Set of shareable noths components
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
Install from NPM
npm install @noths/shared-components
npm install @noths/vendor-bundle
You will need the following in your package.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.
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';
This package generates <script> and <style> tags for integrating into your template.
In your template generator (your server.js or webpack config):
// 1. import utilities
import { createJsTag as createVendorJsTag } from '@noths/vendor-bundle';
import { createStyleTag, createJsTag } from '@noths/shared-components';
// 2. Generate tags, using development mode if needed
let sharedComponentsStyle = createStyleTag({ isDev });
let sharedComponentsJs = createJsTag({ isDev });
let vendorJS = createVendorJsTag({ isDev });- Use the created variables in the template:
- Integrate the shared-components plugin into your webpack config:
const SharedComponentsPlugin = require('@noths/shared-components').SharedComponentsPlugin;
// Add the plugin to the webpack configuration
{
...
loaders: ...,
plugins: [new SharedComponentsPlugin()],
}Import your shared-components like so:
import { Button } from '@noths/shared-components';
On the root folder run
npm run bootstrap
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
Generate assets:
npm run build
Release version
npm version (major|minor|patch|[...tag])
npm publish
Beta version
npm run prerelease