mop-react-ui-components v0.1.0

mop-react-ui-components

React UI Components

Project architecture:

• Framework: React

• Language: Javascript

• Packet manager: Yarn

Project implementation:

Application parts below are flagged like this:

• 📒 Folders
• 📑 Files

Project arhitecture:

• 📒 src
  • 📒 assets
  • 📒 common
    • 📑 helpers.js
  • 📒 components
    • 📒 default-input
      • 📑 default-input.js
      • 📑 default-input.test.js
      • 📑 default-input-styles.js
      • 📑 default-input.stories.js
    • 📑 index.js
  • 📒 theme
    • 📒 styles
    • 📑 theme.js
• 📑 package.json
• 📑 README.md

Setting up project:

• Install dependencies: yarn install

• Start project: yarn start

• Create a deployable build yarn build

• To build locally and test in other app:

  • Run yarn run build:watch.
  • Run yarn link - this will set the local build of the package to resolve to.
  • In the other project directory run yarn link "mop-react-ui-components".
  • After you are done, run yarn unlink.

• Trigger tests yarn test

• Build storybook for deployment yarn build-storybook

Usage

You'll need to wrap your app in the exported theme provider to be able to use any components:

import { DefaultTheme, ThemeProvider, Text } from 'mop-react-ui-components';

const App = () =>
  <ThemeProvider theme={DefaultTheme}>
    <Text>Hello MOP</Text>
  </ThemeProvider>

You can override or replace DefaultTheme with your own theme.

Prettier and ESLint

Install Visual Studio Code extensions:

• ESLint
• Prettier

Should you want to impose specific Visual Studio Code editor configuration, you can do that in settings.json

Authors and contributors

• Eldin Soljic - Sholja - Software Developer

See also the list of contributors who participated in this project.

Happy coding!