5.0.3 • Published 12 months ago

@noths/shared-components v5.0.3

Weekly downloads
1,211
License
ISC
Repository
github
Last release
12 months ago

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
rc-sliderreact-slickreact-helmetreact-springreact-lazyloadreact-dotdotdotreact-on-screen@noths/styles-configreact-transition-group
@infinitebrahmanuniverse/nolb-_not@everything-registry/sub-chunk-667@noths/mono-components@noths/storefront
5.0.3

12 months ago

5.0.2

1 year ago

5.0.1

1 year ago

5.0.0

1 year ago

4.3.0

1 year ago

4.2.12

2 years ago

4.2.11

3 years ago

4.2.6

4 years ago

4.2.5

4 years ago

4.2.5-0

4 years ago

4.2.4

5 years ago

4.2.3

5 years ago

4.2.2

5 years ago

4.2.1

5 years ago

4.1.1-16

5 years ago

4.2.0

5 years ago

4.1.1-14

5 years ago

4.1.1-12

5 years ago

4.1.1-11

5 years ago

4.1.1-10

5 years ago

4.1.1

5 years ago

4.1.1-7

5 years ago

4.1.1-8

5 years ago

4.1.1-9

5 years ago

4.1.1-6

5 years ago

4.1.1-5

5 years ago

4.1.1-3

5 years ago

4.1.1-4

5 years ago

4.1.1-2

5 years ago

4.1.1-1

5 years ago

4.1.1-0

5 years ago

4.1.0

5 years ago

4.0.18

5 years ago

4.0.17

5 years ago

4.0.16

5 years ago

4.0.15

5 years ago

4.0.14

5 years ago

4.0.14-alpha.8

5 years ago

4.0.13

5 years ago

4.0.12

5 years ago

4.0.11

5 years ago

4.0.10

5 years ago

4.0.9

5 years ago

4.0.8

5 years ago

4.0.7

5 years ago

4.0.6

5 years ago

4.0.5

5 years ago

4.0.4

5 years ago

4.0.3

5 years ago

4.0.1

5 years ago

4.0.2

5 years ago

4.0.0

5 years ago

3.0.0

5 years ago

2.3.15

5 years ago

2.3.15-0

5 years ago

2.3.14

5 years ago

2.3.12

5 years ago

2.3.11

5 years ago

2.3.11-14

5 years ago

2.3.11-13

5 years ago

2.3.11-12

5 years ago

2.3.11-11

5 years ago

2.3.11-10

5 years ago

2.3.11-9

5 years ago

2.3.11-8

5 years ago

2.3.11-7

5 years ago

2.3.11-5

5 years ago

2.3.11-6

5 years ago

2.3.11-3

5 years ago

2.3.11-4

5 years ago

2.3.11-1

5 years ago

2.3.11-2

5 years ago

2.3.11-0

5 years ago

2.3.10

5 years ago

2.3.9

5 years ago

2.3.8

5 years ago

2.3.6

5 years ago

2.3.7

5 years ago

2.3.6-3

5 years ago

2.3.6-2

5 years ago

2.3.6-1

5 years ago

2.3.6-0

5 years ago

2.3.4

5 years ago

2.3.5

5 years ago

2.3.2

5 years ago

2.3.3

5 years ago

2.3.2-0

5 years ago

2.3.1-1

5 years ago

2.3.1-0

5 years ago

2.3.1

5 years ago

2.3.0

5 years ago

2.2.4

5 years ago

2.2.3

5 years ago

2.2.1

6 years ago

2.2.0

6 years ago

2.1.23

6 years ago

1.18.0

6 years ago

1.17.4-2

6 years ago

1.17.4-1

6 years ago

1.17.4-0

6 years ago

2.1.22

6 years ago

2.1.21

6 years ago

2.1.19

6 years ago

2.1.20

6 years ago

2.1.18

6 years ago

1.17.3

6 years ago

1.17.2

6 years ago

2.1.16

6 years ago

1.17.2-1

6 years ago

1.17.2-0

6 years ago

2.1.15

6 years ago

1.17.1

6 years ago

1.17.0

6 years ago

1.16.17-3

6 years ago

1.16.17-2

6 years ago

1.16.17-1

6 years ago

1.16.17-0

6 years ago

2.1.14

6 years ago

2.1.13

6 years ago

2.1.12

6 years ago

2.1.11

6 years ago

2.1.11-0

6 years ago

2.1.10

6 years ago

2.1.9

6 years ago

1.16.16

6 years ago

1.16.15

6 years ago

1.16.15-5

6 years ago

2.1.8

6 years ago

1.16.15-4

6 years ago

2.1.7

6 years ago

1.16.15-3

6 years ago

1.16.15-2

6 years ago

1.16.15-1

6 years ago

2.1.6

6 years ago

2.1.5

6 years ago

2.1.4

6 years ago

2.1.3

6 years ago

2.1.2

6 years ago

2.1.1

6 years ago

2.1.1-0

6 years ago

2.1.0

6 years ago

2.0.25-2

6 years ago

2.0.25-1

6 years ago

2.0.24

6 years ago

2.0.23

6 years ago

2.0.22

6 years ago

2.0.22-2

6 years ago

2.0.22-1

6 years ago

2.0.22-0

6 years ago

2.0.21

6 years ago

2.0.21-1

6 years ago

2.0.20

6 years ago

2.0.20-1

6 years ago

2.0.20-0

6 years ago

2.0.19

6 years ago

2.0.18

6 years ago

2.0.17

6 years ago

2.0.16

6 years ago

2.0.15

6 years ago

2.0.14

6 years ago

2.0.13

6 years ago

2.0.12

6 years ago

2.0.11

6 years ago

2.0.10

6 years ago

2.0.9

6 years ago

2.0.8

6 years ago

2.0.8-0

6 years ago

2.0.7

6 years ago

2.0.6

6 years ago

2.0.5

6 years ago

2.0.4

6 years ago

2.0.3

6 years ago

1.16.15-0

6 years ago

2.0.3-0

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.1-0

6 years ago

2.0.0

6 years ago

1.16.14-20

6 years ago

1.16.14-19

6 years ago

1.16.14-18

6 years ago

1.16.14-17

6 years ago

1.16.14

6 years ago

1.16.14-16

6 years ago

1.16.14-15

6 years ago

1.16.14-14

6 years ago

1.16.14-13

6 years ago

1.16.14-12

6 years ago

1.16.14-11

6 years ago

1.16.14-10

6 years ago

1.16.14-8

6 years ago

1.16.14-7

6 years ago

1.16.14-6

6 years ago

1.16.14-5

6 years ago

1.16.14-4

6 years ago

1.16.14-3

6 years ago

1.16.14-2

6 years ago

1.16.14-1

6 years ago

1.16.14-0

6 years ago

1.16.13

6 years ago

1.16.12

6 years ago

1.16.11

6 years ago

1.16.10

6 years ago

1.16.9

6 years ago

1.16.7

6 years ago

1.16.6

6 years ago

1.16.6-1

6 years ago

1.16.5

6 years ago

1.16.4

6 years ago

1.16.3

6 years ago

1.16.2

6 years ago

1.16.1

6 years ago

1.16.0

6 years ago

1.15.3-2

6 years ago

1.15.3-0

6 years ago

1.15.2

6 years ago

1.15.1

6 years ago

1.15.0

6 years ago

1.14.2

6 years ago

1.14.1

6 years ago

1.14.0

6 years ago

1.13.1

6 years ago

1.13.0

6 years ago

1.12.9

6 years ago

1.12.8

6 years ago

1.12.7-1

6 years ago

1.12.7-0

6 years ago

1.12.6

6 years ago

1.12.4

6 years ago

1.12.3

6 years ago

1.12.2

6 years ago

1.12.2-0

6 years ago

1.12.1

6 years ago

1.12.0

6 years ago

1.11.5

6 years ago

1.11.5-1

6 years ago

1.11.5-0

6 years ago

1.11.4

6 years ago

1.11.3

6 years ago

1.11.2

6 years ago

1.11.1

6 years ago

1.11.0

6 years ago

1.10.11-7

6 years ago

1.10.11-6

6 years ago

1.10.11-5

6 years ago

1.10.11-4

6 years ago

1.10.11-3

6 years ago

1.10.11-2

6 years ago

1.10.11-1

6 years ago

1.10.11-0

6 years ago

1.10.10

6 years ago

1.10.9

6 years ago

1.10.8

6 years ago

1.10.7

6 years ago

1.10.7-0

6 years ago

1.10.6

6 years ago

1.10.5

6 years ago

1.10.4

6 years ago

1.10.3

6 years ago

1.10.2

6 years ago

1.10.1

6 years ago

1.10.1-1

6 years ago

1.10.1-0

6 years ago

1.10.0

6 years ago

1.9.12

6 years ago

1.9.11

6 years ago

1.9.10

6 years ago

1.9.9

6 years ago

1.9.9-0

6 years ago

1.9.7-0

6 years ago

1.9.8

6 years ago

1.9.7

6 years ago

1.9.6

6 years ago

1.9.5

6 years ago

1.9.4

6 years ago

1.9.3

6 years ago

1.9.2

6 years ago

1.9.1

6 years ago

1.8.1

6 years ago

1.8.0

6 years ago

1.7.3

6 years ago

1.7.2

6 years ago

1.7.1

6 years ago

1.7.0

6 years ago

1.6.5-1

6 years ago

1.6.5-0

6 years ago

1.6.4

6 years ago

1.6.3

6 years ago

1.6.2

6 years ago

1.6.1

6 years ago

1.6.0

6 years ago

1.5.12

6 years ago

1.5.11

6 years ago

1.5.10

6 years ago

1.5.9

6 years ago

1.5.8

6 years ago

1.5.7

6 years ago

1.5.6

6 years ago

1.5.5

6 years ago

1.5.4

6 years ago

1.5.3

6 years ago

1.5.2

6 years ago

1.5.1

6 years ago

1.5.1-0

6 years ago

1.5.0

6 years ago

1.4.2

6 years ago

1.4.2-0

6 years ago

1.4.1

6 years ago

1.4.0

7 years ago

1.3.2

7 years ago

1.3.1-0

7 years ago

1.3.1

7 years ago

1.3.0

7 years ago

1.2.0

7 years ago

1.1.2-1

7 years ago

1.1.2-0

7 years ago

1.1.1

7 years ago

1.1.0

7 years ago

1.0.5-3

7 years ago

1.0.5-2

7 years ago

1.0.5-1

7 years ago

1.0.5-0

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.3-3

7 years ago

1.0.3-2

7 years ago

1.0.3-1

7 years ago

1.0.3-0

7 years ago

1.0.2-9

7 years ago

1.0.2-8

7 years ago

1.0.2-7

7 years ago

1.0.2-6

7 years ago

1.0.2-5

7 years ago

1.0.2-4

7 years ago

1.0.2-3

7 years ago

1.0.2-2

7 years ago

1.0.2-1

7 years ago

1.0.2

7 years ago

1.0.2-0

7 years ago

1.0.1

7 years ago

1.0.1-4

7 years ago

1.0.1-3

7 years ago

1.0.1-2

7 years ago

1.0.1-1

7 years ago

1.0.1-0

7 years ago

1.0.0

7 years ago

0.3.2-3

7 years ago

0.3.2-2

7 years ago

0.3.2-0

7 years ago

0.3.1

7 years ago

0.3.0

7 years ago

0.2.6

7 years ago

0.2.6-8

7 years ago

0.2.6-7

7 years ago

0.2.6-6

7 years ago

0.2.6-5

7 years ago

0.2.6-4

7 years ago

0.2.6-3

7 years ago

0.2.6-2

7 years ago

0.2.6-1

7 years ago

0.2.6-0

7 years ago

0.2.5

7 years ago

0.2.4

7 years ago

0.2.4-0

7 years ago

0.2.4-add-address-hypernova.0

7 years ago

0.2.3

7 years ago

0.2.2

7 years ago

0.2.2-1

7 years ago

0.2.2-0

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago

0.0.62-2

7 years ago

0.0.62-1

7 years ago

0.0.62-0

7 years ago

0.0.61

7 years ago

0.0.60

7 years ago

0.0.59

7 years ago

0.0.58

7 years ago

0.0.57

7 years ago

0.0.56

7 years ago

0.0.55

7 years ago

0.0.55-6

7 years ago

0.0.55-5

7 years ago

0.0.55-4

7 years ago

0.0.55-3

7 years ago

0.0.55-2

7 years ago

0.0.54

7 years ago

0.0.54-0

7 years ago

0.0.53

7 years ago

0.0.52

7 years ago

0.0.52-0

7 years ago

0.0.51

7 years ago

0.0.50

7 years ago

0.0.49

7 years ago

0.0.49-0

7 years ago

0.0.48-4

7 years ago

0.0.48-3

7 years ago

0.0.48

7 years ago

0.0.48-2

7 years ago

0.0.48-1

7 years ago

0.0.48-0

7 years ago

0.0.47

7 years ago

0.0.46

7 years ago

0.0.46-2

7 years ago

0.0.46-1

7 years ago

0.0.46-0

7 years ago

0.0.45

7 years ago

0.0.44

7 years ago

0.0.43

7 years ago

0.0.42-beta-2

7 years ago

0.0.42-beta

7 years ago

0.0.42

7 years ago

0.0.41

7 years ago

0.0.40

7 years ago

0.0.39

7 years ago

0.0.38

7 years ago

0.0.37

7 years ago

0.0.36

7 years ago

0.0.35

7 years ago

0.0.35-beta.1

7 years ago

0.0.35-beta.0

7 years ago

0.0.34

7 years ago

0.0.33

7 years ago

0.0.33-beta.0

7 years ago

0.0.32

7 years ago

0.0.31

7 years ago

0.0.30

7 years ago

0.0.29

7 years ago

0.0.28

7 years ago

0.0.27

7 years ago

0.0.27-beta.1

7 years ago

0.0.27-beta.0

7 years ago

0.0.27-6

7 years ago

0.0.27-5

7 years ago

0.0.27-4

7 years ago

0.0.27-3

7 years ago

0.0.27-2

7 years ago

0.0.27-1

7 years ago

0.0.26

7 years ago

0.0.26-beta

7 years ago

0.0.25

7 years ago

0.0.24

7 years ago

0.0.23

7 years ago

0.0.22

7 years ago

0.0.21

7 years ago

0.0.21-1

7 years ago

0.0.20

7 years ago

0.0.20-5

7 years ago

0.0.20-4

7 years ago

0.0.20-3

7 years ago

0.0.20-2

7 years ago

0.0.20-1

7 years ago

0.0.19

7 years ago

0.0.18

7 years ago

0.0.17

7 years ago

0.0.16

7 years ago

0.0.16-beta

7 years ago

0.0.15

7 years ago

0.0.14

7 years ago

0.0.13

7 years ago

0.0.12

7 years ago

0.0.12-1

7 years ago

0.0.12-0

7 years ago

0.0.11

7 years ago

0.0.11-0

7 years ago

0.0.10

7 years ago

0.0.9

7 years ago

0.0.8

7 years ago

0.0.7

7 years ago

0.0.6

7 years ago

0.0.5

7 years ago

0.0.4

7 years ago

0.0.3

7 years ago

0.0.3-2

7 years ago

0.0.3-1

7 years ago

0.0.3-0

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago