Integrere med ds-react formField komponenter (#15)

.eslintrc.js

@@ -1,30 +1,27 @@
 module.exports = {
-    parser: '@typescript-eslint/parser', // Specifies the ESLint parser
-    extends: [
-        'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
-        'plugin:@typescript-eslint/recommended',
-        'prettier', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
-        'plugin:prettier/recommended', // Uses the recommended rules from @typescript-eslint/eslint-plugin,
-        'plugin:jsx-a11y/recommended',
-    ],
-    parserOptions: {
-        ecmaFeatures: {
-            jsx: true, // Allows for the parsing of JSX
-        },
-    },
-    rules: {
-        // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
-        '@typescript-eslint/explicit-function-return-type': 'off',
-        '@typescript-eslint/explicit-module-boundary-types': 'off',
-        '@typescript-eslint/no-var-requires': 'off',
-        '@typescript-eslint/no-explicit-any': 'off',
-        'react-hooks/rules-of-hooks': 'error',
-        'react-hooks/exhaustive-deps': 'warn',
-    },
-    plugins: ['jsx-a11y', 'react-hooks'],
-    settings: {
-        react: {
-            version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
-        },
-    },
-};
+  parser: '@typescript-eslint/parser',
+  // Specifies the ESLint parser
+  extends: ['plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:prettier/recommended', 'plugin:jsx-a11y/recommended', 'plugin:storybook/recommended'],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true // Allows for the parsing of JSX
+
+    }
+  },
+  rules: {
+    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn'
+  },
+  plugins: ['jsx-a11y', 'react-hooks'],
+  settings: {
+    react: {
+      version: 'detect' // Tells eslint-plugin-react to automatically detect the version of React to use
+
+    }
+  }
+};

.github/workflows/main.yml

@@ -14,7 +14,7 @@ jobs:
       runs-on: ubuntu-latest
       strategy:
         matrix:
-          node-version: [12.16.1, 16.15.0]
+          node-version: [16.15.0]
 
       steps:
         - name: Checkout code

.gitignore

@@ -10,6 +10,9 @@
 # testing
 /coverage
 
+# storybook
+/storybook-static
+
 # production
 /build
 

.storybook/main.js

@@ -0,0 +1,66 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = {
+    stories: ['../src/storybook/**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-a11y'],
+    framework: '@storybook/react',
+    core: {
+        builder: 'webpack5',
+    },
+    webpackFinal: async (config) => {
+        //Fjern default svg-loader
+        config.module.rules = config.module.rules.map((data) => {
+            if (/svg\|/.test(String(data.test))) {
+                data.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/;
+            }
+            return data;
+        });
+
+        config.devtool = 'source-map';
+
+        // Make whatever fine-grained changes you need
+        config.module.rules = config.module.rules.concat(
+            {
+                test: /\.svg$/,
+                use: { loader: 'svg-sprite-loader', options: {} },
+            },
+            {
+                test: /\.less$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    'css-loader',
+                    {
+                        loader: 'less-loader',
+                        options: {
+                            lessOptions: {
+                                math: 'always',
+                            },
+                        },
+                    },
+                ],
+            },
+            {
+                test: /\.s[ac]ss$/i,
+                use: [
+                    // Creates `style` nodes from JS strings
+                    'style-loader',
+                    // Translates CSS into CommonJS
+                    'css-loader',
+                    // Compiles Sass to CSS
+                    'sass-loader',
+                ],
+            }
+        );
+
+        config.plugins.push(
+            new MiniCssExtractPlugin({
+                filename: 'css/[name].css?[hash]-[chunkhash]-[contenthash]-[name]',
+            })
+        );
+
+        config.resolve.extensions.push('.ts', '.tsx');
+
+        // Return the altered config
+        return config;
+    },
+};

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

README.md

@@ -24,10 +24,13 @@ const AdvancedDatePicker = () => {
     return (
         <Datepicker
             locale={'nb'}
-            inputId="datepicker-input"
-            inputLabel="Oppgi dato"
+            id="datepicker-input"
+            label="Oppgi dato"
             value={date}
+            inputName="inputName"
             onChange={setDate}
+            error="En feilmelding"
+            disabled={false}
             inputProps={{
                 name: 'dateInput',
                 'aria-invalid': date !== '' && isISODateString(date) === false,
@@ -50,10 +53,10 @@ const AdvancedDatePicker = () => {
 };
 ```
 
-# Kjøre eksempel-app
+# Storybook
 
-Starter app med enkelt eksempel
+Starter storybook med enkelt eksempel som viser noe av funksjonaliteten
 
 ```
-npm run dev
+npm run storybook
 ```