@noths/shared-components-v1 v0.0.10
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.2Direct Usage
Install from NPM
npm install @noths/shared-components
npm install @noths/vendor-bundleDeveloping on shared-components while inside your app
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.
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 <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:
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<!-- Shared-components style integration -->
{{{ sharedComponentsStyle }}}
</head>
<body>
<!-- Your Markup Container -->
<div id="app">{{{ renderedHtml }}}</div>
<!-- Shared-components javascript integration -->
{{{ vendorJS }}}
{{{ sharedComponentsJs }}}
<!-- Your Client App -->
<script src="{{ assets.app.js }}"></script>
</body>
</html>- 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()],
}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 bootstrapDeveloping with storybook
As part of a merge into master, 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 storybookBuild process for shared-components
Generate assets:
npm run buildPublishing
Release version
npm version (major|minor|patch|[...tag])npm publishBeta version
npm run prerelease