Mungwin React Widgets

A React widgets library for Mungwin

Your Design counts

If you have a widget you love and want to build, this is the place to build it before using it in any mungwin project.

Proposed workflow

1. Checkout development branch
2. Pull the latest changes from development with git pull
3. Install the latest changes in development with npm install
4. Create and checkout your new branch, name it as issue_name-issue_number/component_name or any other relevant name you choose
5. Design you components

• mungwin-react-elements is a dev dependency to this project, so the first place to start is there.
• Break down your widget into small components, if you don't find a component in mungwin-react-elements, then you have to build it there first,
• Link your projects and test first before creating you PR
  • in mungwin-react-elements root folder, run npm link
  • in mungwin-react-widgets root folder, run npm link mungwin-react-elements this will link both projects on your local machine, so you can develop components for your widgets in mungwin-react-elements and use them to develop mungwin-react-widgets before making you PR

6. Design your widget

• You can use css file imports or @emotion/styled whichever you choose is up to you
• Put your widgets in src/widgets/your_widget_folder/YourWidget.component.js
• If you choose to use styled components with @emotion/styled, put your styles in src/widgets/your_widget_folder/YourWidget.styles.js and export them, then import them in YourComponent.js
• If you choose to use css, put your styles in src/widgets/your_widget_folder/YourWidget.styles.css , then import them in YourWidget.component.js

6. Test your widget with storybook

• Put your widtet stories in src/widgets/your_widget_folder/YourWidget.stories.js
• Test their functionality, it should look great

7. Export your widget for public consumption in src/index.js use the format export {default as YourWidget} from './widgets/your_widget_folder/YourWidget.component'
8. Lint your code

• Run npm run lint:fix

9. Commit your changes
10. Push your code create a PR