# shared-components Set of shareable noths components ## Integrating shared-components into your App ### Installation You will need both, the `@noths/vendor-bundle` and `@noths/shared-components` to use shared-components. The vendor bundle contains the `react` and `react-dom` and `redux` dependencies. **Your application must use the same version of the vendor-bundle dependencies.** ``` Install vendor bundle dependencies npm install react@16.2.0 react-dom@16.2.0 redux@3.7.2 ``` #### Direct Usage Install from NPM ``` npm install @noths/shared-components npm install @noths/vendor-bundle ``` #### Developing on shared-components while inside your app You will need the following in your `package.json`: ```json "@noths/shared-components": "file:../frontend-packages/packages/shared-components", "@noths/vendor-bundle": "file:../frontend-packages/packages/vendor-bundle", ``` PS: Don't forget to run `npm run build` to generate the latest build for each package before starting to use it. ### Integration #### Styled components There is a separate import location to get the styled component version of a shared component ``` import { Button } from '@noths/shared-components/styled'; ``` You can continue doing imports from both styled and the BEM/Scss implementation while migrating to styled components: ``` import { FormInput } from '@noths/shared-components'; import { Button } from '@noths/shared-components/styled'; ``` #### BEM/Scss components This package generates ` ``` 4. Integrate the shared-components plugin into your webpack config: ```javascript const SharedComponentsPlugin = require('@noths/shared-components').SharedComponentsPlugin; // Add the plugin to the webpack configuration { ... loaders: ..., plugins: [new SharedComponentsPlugin()], } ``` ##### Usage in your App Import your shared-components like so: ``` import { Button } from '@noths/shared-components'; ``` --- ## Developing on shared-components ### Installation On the root folder run ``` npm run bootstrap ``` ### Developing with storybook As part of a merge into main, storybook will be updated and made available here: http://unwrapped.notonthehighstreet.com/frontend-packages To run and use storybook use the following command: ``` npm run storybook ``` ### Build process for shared-components Generate assets: ``` npm run build ``` ### Publishing Release version ``` npm version (major|minor|patch|[...tag]) ``` ``` npm publish ``` Beta version ``` npm run prerelease ```