V1.0

.eslintrc.js

@@ -12,6 +12,7 @@ const extendsBase = [
     'plugin:import/typescript',
     'plugin:jsx-a11y/recommended',
     'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
     'plugin:react-hooks/recommended',
     'plugin:testing-library/react',
     'plugin:tailwindcss/recommended',
@@ -29,12 +30,12 @@ const rulesBase = {
     'brace-style': 'warn',
     'prefer-template': 'warn',
     'no-useless-concat': 'warn',
-    'tailwindcss/no-custom-classname': ['off'],
 };
 
 const typescriptRules = {
     ...rulesBase,
     '@typescript-eslint/no-explicit-any': 'warn',
+    '@typescript-eslint/no-empty-interface': 'off',
     '@typescript-eslint/prefer-nullish-coalescing': 'warn',
     '@typescript-eslint/array-type': ['warn', { default: 'array-simple' }],
     '@typescript-eslint/consistent-type-imports': ['warn', { fixStyle: 'inline-type-imports' }],

.github/workflows/library-publish.yml

@@ -6,7 +6,7 @@ on:
       - "*"
 
 env:
-  NODE_VERSION: 16
+  NODE_VERSION: 18
   NODE_CACHE: "yarn"
 
 jobs:

.github/workflows/library-release.yml

@@ -13,7 +13,7 @@ on:
           - major
 
 env:
-  NODE_VERSION: 16
+  NODE_VERSION: 18
   NODE_CACHE: "yarn"
 
 jobs:

.github/workflows/library-test.yml

@@ -11,7 +11,7 @@ concurrency:
   cancel-in-progress: true
 
 env:
-  NODE_VERSION: 16
+  NODE_VERSION: 18
   NODE_CACHE: "yarn"
 
 jobs:

.github/workflows/storybook-preview-deploy.yml

@@ -7,7 +7,7 @@ on:
       - synchronize
 
 env:
-  NODE_VERSION: 16
+  NODE_VERSION: 18
   NODE_CACHE: "yarn"
 
 jobs:
@@ -41,20 +41,20 @@ jobs:
         run: pip install --user pyyaml packaging
       - name: Install ipfs-cluster-ctl
         run: |
-          wget https://dist.ipfs.io/ipfs-cluster-ctl/v1.0.0/ipfs-cluster-ctl_v1.0.0_linux-amd64.tar.gz
-          tar xvfz ipfs-cluster-ctl_v1.0.0_linux-amd64.tar.gz
+          wget https://dist.ipfs.tech/ipfs-cluster-ctl/v1.0.6/ipfs-cluster-ctl_v1.0.6_linux-amd64.tar.gz
+          tar xvfz ipfs-cluster-ctl_v1.0.6_linux-amd64.tar.gz
       - name: Unpin from IPFS
         continue-on-error: true
         if: steps.get-deployment.outputs.comment-id != 0
         run: |
           COMMENT='${{ steps.get-deployment.outputs.comment-body }}'
           IFS=" " read -ra array <<< "$COMMENT"
           hash=${array[3]}
-          ./ipfs-cluster-ctl/ipfs-cluster-ctl --basic-auth '${{ secrets.IPFS_BASIC_AUTH }}' --host '${{ secrets.IPFS_HOST }}' pin rm $hash
+          ./ipfs-cluster-ctl/ipfs-cluster-ctl --basic-auth '${{ secrets.IPFS_BASIC_AUTH }}' --host '${{ vars.IPFS_HOST_ADDRESS }}' pin rm $hash
       - name: Pin on IPFS
         id: ipfs-pin
         run: |
-          ipfsResult="$(./ipfs-cluster-ctl/ipfs-cluster-ctl --basic-auth '${{ secrets.IPFS_BASIC_AUTH }}' --host '${{ secrets.IPFS_HOST }}' add -r './storybook-static' | tail -1)"
+          ipfsResult="$(./ipfs-cluster-ctl/ipfs-cluster-ctl --basic-auth '${{ secrets.IPFS_BASIC_AUTH }}' --host '${{ vars.IPFS_HOST_ADDRESS }}' -s add -r './storybook-static' | tail -1)"
           IFS=" " read -ra array <<< "$ipfsResult"
           echo "hash=${array[1]}" >> $GITHUB_OUTPUT
       - name: Echo url

.github/workflows/storybook-preview-remove.yml

@@ -7,7 +7,7 @@ on:
       - closed
 
 env:
-  NODE_VERSION: 16
+  NODE_VERSION: 18
   NODE_CACHE: "yarn"
 
 jobs:
@@ -33,7 +33,7 @@ jobs:
           COMMENT='${{ steps.get-deployment.outputs.comment-body }}'
           IFS=" " read -ra array <<< "$COMMENT"
           hash=${array[3]}
-          ./ipfs-cluster-ctl/ipfs-cluster-ctl --basic-auth '${{ secrets.IPFS_BASIC_AUTH }}' --host '${{ secrets.IPFS_HOST }}' pin rm $hash
+          ./ipfs-cluster-ctl/ipfs-cluster-ctl --basic-auth '${{ secrets.IPFS_BASIC_AUTH }}' --host '${{ vars.IPFS_HOST_ADDRESS }}' pin rm $hash
       - name: Delete Comment
         uses: actions/[email protected]
         if: steps.get-deployment.outputs.comment-id != 0

.github/workflows/storybook-publish.yml

@@ -6,7 +6,7 @@ on:
       - "*"
 
 env:
-  NODE_VERSION: 16
+  NODE_VERSION: 18
   NODE_CACHE: "yarn"
 
 jobs:

.storybook/main.ts

@@ -1,22 +1,37 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
+import type { RuleSetRule } from 'webpack';
 
 const config: StorybookConfig = {
-    stories: ['../docs/**/*.@(md|mdx)', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+    stories: ['../docs/**/*.@(md|mdx)', '../src/**/*.stories.@(js|jsx|ts|tsx)', '../src/**/*.@(md|mdx)'],
     addons: [
         '@storybook/addon-links',
         '@storybook/addon-essentials',
-        '@storybook/addon-interactions',
-        {
-            name: '@storybook/addon-styling',
-            options: { postCss: true },
-        },
+        { name: '@storybook/addon-styling', options: { postCss: true } },
+        '@storybook/addon-designs',
     ],
     framework: {
         name: '@storybook/react-webpack5',
         options: {},
     },
-    docs: {
-        autodocs: 'tag',
+    staticDirs: ['../src/assets'],
+    webpackFinal: (webpackConfig) => {
+        // Remove any svg loader already set and use @svgr/webpack to load svgs on Storybook
+        const svgWebpackRule = webpackConfig.module?.rules?.find((rule) => {
+            if (rule != null && typeof rule !== 'string' && (rule as RuleSetRule)?.test instanceof RegExp) {
+                return (rule as Record<string, any>).test?.test('.svg');
+            }
+        });
+
+        if (typeof svgWebpackRule !== 'string') {
+            (svgWebpackRule as RuleSetRule).exclude = /\.svg$/;
+        }
+
+        webpackConfig.module?.rules?.push({
+            test: /\.svg$/,
+            use: ['@svgr/webpack'],
+        });
+
+        return webpackConfig;
     },
 };
 

.storybook/preview.tsx

@@ -1,7 +1,4 @@
-import isPropValid from '@emotion/is-prop-valid';
 import type { Preview } from '@storybook/react';
-import React from 'react';
-import { StyleSheetManager } from 'styled-components';
 import '../index.css';
 
 const preview: Preview = {
@@ -13,18 +10,35 @@ const preview: Preview = {
                 date: /Date$/,
             },
         },
+        options: {
+            storySort: {
+                method: 'alphabetical',
+                order: ['Docs', ['Open Design System', 'Installation'], 'Design Tokens', 'Components'],
+            },
+        },
+        backgrounds: {
+            default: 'neutral-50',
+            values: [
+                {
+                    name: 'neutral-0',
+                    value: 'var(--ods-color-neutral-0)',
+                },
+                {
+                    name: 'neutral-50',
+                    value: 'var(--ods-color-neutral-50)',
+                },
+                {
+                    name: 'neutral-800',
+                    value: 'var(--ods-color-neutral-800)',
+                },
+            ],
+        },
     },
     decorators: [
         (Story) => (
-            <StyleSheetManager
-                shouldForwardProp={(propName, elementToBeRendered) =>
-                    typeof elementToBeRendered === 'string' ? isPropValid(propName) : true
-                }
-            >
-                <div className="flex">
-                    <Story />
-                </div>
-            </StyleSheetManager>
+            <div className="flex">
+                <Story />
+            </div>
         ),
     ],
 };