Merge pull request #109 from wrap-org/feature/wrap-1222-component-library

NPM package

Author: DanWebb

.eslintrc.js .eslintrc.cjs.eslintrc.js renamed to .eslintrc.cjs

@@ -22,3 +22,4 @@ jobs:
       - uses: chromaui/action@v11
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          buildScriptName: build:storybook

.github/workflows/chromatic.yml

@@ -36,9 +36,9 @@ jobs:
           node-version: ${{ matrix.version }}
           cache: npm
       - run: npm ci
-      - run: npm run build-storybook
+      - run: npm run build:storybook
       - run: npx playwright install --with-deps
-      - run: npm run test-storybook
+      - run: npm run test:storybook
   lint:
     name: 🧹 Lint
     runs-on: ubuntu-latest

.github/workflows/ci.yml

@@ -1,7 +1,7 @@
 node_modules
 storybook-static
 dist
-src/index.tsx
+src/index.ts
 *.log
 .vscode/*
 

.gitignore

@@ -40,6 +40,13 @@ const config: StorybookConfig = {
     options: {}
   },
   staticDirs: [path.resolve(__dirname, '../src/assets')],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
 };
 
 export default config;

.storybook/main.ts

@@ -25,22 +25,18 @@ Install the module.
 npm install --save @wrap.ngo/evergreen
 ```
 
-Add the global CSS in your main app file or CSS.
+Add the global CSS and JS in your main app file.
 
 ```js
-import '@wrap.ngo/evergreen/src/styles/main.scss';
-
-// Optional font face
-import '@wrap.ngo/evergreen/src/styles/fonts.scss';
-```
-
-Components can be used by importing them into the files to be used or they can be installed once globally (because web components are all registered to a [global registry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry) on the window).
-
-```js
-import '@wrap.ngo/evergreen/components/control/Button/Button';
+// Global styles
+import '@wrap.ngo/evergreen/styles';
+// Optional font import
+import '@wrap.ngo/evergreen/fonts';
+// Component registration
+import '@wrap.ngo/evergreen/components'
 ```
 
-Use the component anywhere in HTML or JSX.
+Use the components anywhere.
 
 ```html
 <evg-button variant="primary">