@noths/shared-components

Shared components for NOTHS

Usage no npm install needed!

<script type="module">
  import nothsSharedComponents from 'https://cdn.skypack.dev/@noths/shared-components';
</script>

README

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:

"@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 });
  1. 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>
  1. 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 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