Merge pull request #49 from softconstruct/release/2.12.0

Release 2.12.0

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,7 +1,7 @@
 name: Feature request 💡
 description: >-
   Use this template to propose new features.
-title: '[Feat:] '
+title: '[Feat]: '
 labels:
   - phase / exploring
   - type / feature

.github/workflows/pull-request.yml

@@ -0,0 +1,23 @@
+name: Pull Request CI
+on:
+    pull_request:
+        branches: ["release/*", "main"]
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v2
+            - name: Setup Node
+              uses: actions/setup-node@v2
+              with:
+                  node-version: '16.x'
+                  registry-url: 'https://registry.npmjs.org'
+            - name: 📥 Install dependencies
+              run: npm install
+            - name: 🔧 Pure build 
+              run: npm run build -- --pure
+            - name: 🧪 Run tests
+              run: npm run test
+            - name: 🧑‍💻 Linting source code
+              run: npm run lint-styles && npm run lint-scripts

.storybook/.babelrc

@@ -0,0 +1,4 @@
+{ 
+    "extends": "../configs/.babelrc",
+    "presets": ["@babel/preset-env", "@babel/preset-react",  "@babel/preset-typescript"]
+}

.storybook/components/DocContainer.jsx

@@ -1,39 +1,22 @@
 import React, { useMemo } from 'react';
-import { DocsContainer as BaseContainer } from '@storybook/addon-docs';
+import { DocsContainer as BaseContainer } from '@storybook/blocks';
 import { useDarkMode } from 'storybook-dark-mode';
 import { themes } from '@storybook/theming';
 
 export const DocsContainer = ({ children, context }) => {
-    const dark = useDarkMode();
+    let contextTitle = context?.primaryStory?.title;
 
-    const title = useMemo(
-        () =>
-            context.title[context.title.length - 2] === '-'
-                ? context.title.replace(context.title.slice(-2), '')
-                : context.title,
-        []
-    );
+    const title = useMemo(() => {
+        if (contextTitle) {
+            return contextTitle[contextTitle.length - 2] === '-'
+                ? contextTitle.replace(contextTitle.slice(-2), '')
+                : contextTitle;
+        }
+    }, [contextTitle]);
 
+    if (contextTitle) context.primaryStory.title = title;
     return (
-        <BaseContainer
-            context={{
-                ...context,
-                title,
-                storyById: (id) => {
-                    const storyContext = context.storyById(id);
-                    return {
-                        ...storyContext,
-                        parameters: {
-                            ...storyContext?.parameters,
-                            docs: {
-                                ...storyContext?.parameters?.docs,
-                                theme: dark ? themes.dark : themes.light
-                            }
-                        }
-                    };
-                }
-            }}
-        >
+        <BaseContainer context={context} theme={useDarkMode() ? themes.dark : themes.normal}>
             {children}
         </BaseContainer>
     );

.storybook/components/SidebarLabelWrapper/SidebarLabelWrapper.js

@@ -3,7 +3,7 @@ import experimental from '../../assets/experimental.svg';
 import deprecated from '../../assets/deprecated.svg';
 import './index.css';
 
-import libVersions from '../../lib-versions';
+import libVersions from '../../lib-versions.json';
 
 const cmpStages = {
     '-e': {
@@ -43,7 +43,7 @@ const SidebarLabelWrapper = ({ item }) => {
     useEffect(() => {
         if (renderOnce || !document.querySelector('#versions__select')) {
             renderOnce = false;
-            const sidebar = document.querySelector('.os-content');
+            const sidebar = document.querySelector('.css-194spiq');
             const currentVersionRegex = /v\d\.\d\.\d/;
             const currentVersion =
                 window.location.href.match(currentVersionRegex) && window.location.href.match(currentVersionRegex)[0];

.storybook/components/SidebarLabelWrapper/index.css

@@ -46,10 +46,10 @@ button[data-action='collapse-root'] {
 }
 
 .versions {
-    position: sticky;
+    position: absolute;
     bottom: 29px;
     background: #f6f9fc;
-    width: 100%;
+    width: 88%;
     box-shadow: 1px -5px 31px 0 rgba(0, 0, 0, 0.1);
     z-index: 9999999;
 }
@@ -143,6 +143,9 @@ button[data-action='collapse-root'] {
     border-color: #404040;
 }
 
+#storybook-explorer-menu {
+    margin-bottom: 100px;
+}
 /*******************************************/
 /*addons icons change and display none*/
 /******************************************/

.storybook/decorators.js

@@ -1,14 +1,14 @@
 import React, { useMemo, useState, useEffect } from 'react';
 import './storybookReset.scss';
 import { useDarkMode } from 'storybook-dark-mode';
-import { GeneUIProvider } from 'src/lib/providers';
+import { GeneUIProvider } from 'components';
 import { Alert } from 'src';
 import { componentStage } from '../stories/assets/storybook.globals';
 
 const ComponentStageMessage = ({ stage, currentVersion }) => (
     <>
         This component is <b>{stage}</b>, to learn more about the <b>{stage}</b> stage{' '}
-        <a href={`${currentVersion}/?path=/docs/introduction--page#component-stages`}>read here</a>.
+        <a href={`${currentVersion}/?path=/docs/introduction--docs#component-stages`}>read here</a>.
     </>
 );
 
@@ -18,7 +18,19 @@ const CustomDecorator = ({ children }) => {
     const [allowRenderChildren, setAllowRenderChildren] = useState(false);
     const isDarkMode = useDarkMode();
     let type;
-    const componentStageProp = children?.props?.componentStage || children?.props?.children?.props?.componentStage;
+    const componentStageGetter = (children, num) => {
+        return (
+            Array.isArray(children?.props?.children) &&
+            children?.props?.children.length >= num &&
+            children?.props?.children[num]?.props?.componentStage
+        );
+    };
+
+    const componentStageProp =
+        children?.props?.componentStage ||
+        children?.props?.children?.props?.componentStage ||
+        componentStageGetter(children, 1) ||
+        componentStageGetter(children, 0);
 
     const currentVersion = useMemo(
         () =>

.storybook/main.js

@@ -2,30 +2,37 @@ const path = require('path');
 
 module.exports = {
     stories: [
-        './../stories/introduction.story.mdx',
-        './../stories/changelog.story.mdx',
-        './../stories/gettingStarted.story.mdx',
-        './../stories/*/**/*.stories.jsx',
-        './../stories/*/**/*.stories.mdx'
-    ], // '../stories/atoms/*/*.stories.jsx'
+        './../stories/introduction.mdx',
+        './../stories/changelog.mdx',
+        './../stories/gettingStarted.mdx',
+        './../src/lib/**/**/*.stories.tsx',
+        './../stories/*/**/*.stories.jsx'
+    ],
     addons: [
         '@storybook/preset-scss',
         'storybook-dark-mode',
         {
             name: '@storybook/addon-essentials',
             options: {
-                backgrounds: true // 👈 control addon params
+                backgrounds: true
             }
         },
-        '@storybook/addon-a11y'
+        '@storybook/addon-a11y',
+        '@storybook/addon-jest'
     ],
-    framework: '@storybook/react',
-    reactOptions: {
-        fastRefresh: true
+    staticDirs: ['./public'],
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {
+            fastRefresh: true
+        }
     },
     core: {
         builder: 'webpack5'
     },
+    typescript: {
+        reactDocgen: 'react-docgen-typescript-plugin'
+    },
     webpackFinal: async (config) => {
         const aliasPaths = {
             src: '../src/',
@@ -34,15 +41,30 @@ module.exports = {
             wrappers: '../src/wrappers/index.js',
             configs: '../src/configs.js',
             hooks: '../src/hooks/index.js',
-            indexof: '../src/utils/indexof.js'
+            indexof: '../src/utils/indexof.js',
+            stories: '../stories/',
+            components: '../src/index.ts'
         };
 
         for (let aliasPath in aliasPaths) {
             config.resolve.alias[aliasPath] = path.resolve(__dirname, aliasPaths[aliasPath]);
         }
+
+        // Hardcode to specify custom babel config file path for storybook
+        // as the last one not supporting the babel custom config file path
+        const babelLoader = config.module.rules[3].use[0];
+        babelLoader.options = {
+            ...babelLoader.options,
+            babelrc: true,
+            configFile: './.storybook/.babelrc'
+        };
+
         return config;
     },
     features: {
-        previewMdx2: true // 👈 MDX 2 enabled here
+        previewMdx2: true
+    },
+    docs: {
+        autodocs: true
     }
 };

.storybook/preview.js

@@ -5,7 +5,9 @@ import { DocsContainer } from './components/DocContainer';
 import { themes } from '@storybook/theming';
 import { softConstructThem } from './softConstructThem';
 
-import { Title, Subtitle, Description, Primary, ArgsTable, Stories, PRIMARY_STORY } from '@storybook/addon-docs';
+import { Title, Subtitle, Description, ArgsTable, Stories, PRIMARY_STORY } from '@storybook/blocks';
+import { withTests } from '@storybook/addon-jest';
+import results from '../coverage/.jest-test-results.json';
 
 export const decorators = [
     (Story, context) => {
@@ -16,11 +18,9 @@ export const decorators = [
             setDir(RTL);
         }, [RTL]);
         document.documentElement.dir = dir.toString();
-
-        // if you need to override some description 👈
-        // if(context?.argTypes?.className?.description) context.argTypes.className.description = 'custom description'
         return customDecorators(Story);
-    }
+    },
+    withTests({ results })
 ];
 
 export const parameters = {

.vscode/settings.json

@@ -1,4 +1,27 @@
 {
     "prettier.configPath": "./configs/.prettierrc",
-    "editor.formatOnSave": true
+    "prettier.ignorePath": "./configs/.prettierignore",
+    "editor.formatOnSave": true,
+
+    "stylelint.enable": true,
+    "stylelint.configFile": "./configs/.stylelintrc.json",
+    "stylelint.validate": ["css", "scss"],
+
+    "eslint.enable": true,
+    "eslint.options": {
+      "configFile": "./configs/.eslintrc.json",
+      "ignorePatterns": [
+        ".git/",
+        ".github/",
+        "node_modules/",
+        "dist/",
+        "stats/",
+        "coverage/",
+        "docs/"
+      ]
+    },
+
+    "cSpell.words": [
+      "geneui"
+    ]
 }

configs/.eslintignore

@@ -1,5 +1,5 @@
 .git
-.gitlab
+.github
 node_modules
 
 # Ignore artifacts:

configs/.prettierignore

@@ -1,5 +1,5 @@
 .git
-.gitlab
+.github
 
 node_modules
 

configs/.stylelintrc.json

@@ -24,5 +24,6 @@
         "scss/operator-no-unspaced": null,
         "scss/operator-no-newline-after": null,
         "color-function-notation": "legacy"
-    }
+    },
+    "ignoreFiles": ["../coverage/**/*.css"]
 }