feat(typescript): add ts support, remove some redundant modules, chan…

…ge tree shake logic

.storybook/main.js

@@ -6,15 +6,17 @@ module.exports = {
         './../stories/changelog.story.mdx',
         './../stories/gettingStarted.story.mdx',
         './../stories/*/**/*.stories.jsx',
-        './../stories/*/**/*.stories.mdx'
-    ], // '../stories/atoms/*/*.stories.jsx'
+        './../stories/*/**/*.stories.tsx',
+        './../stories/*/**/*.stories.mdx',
+        './../src/lib/**/**/*.stories.tsx'
+    ],
     addons: [
         '@storybook/preset-scss',
         'storybook-dark-mode',
         {
             name: '@storybook/addon-essentials',
             options: {
-                backgrounds: true // 👈 control addon params
+                backgrounds: true
             }
         },
         '@storybook/addon-a11y'
@@ -26,6 +28,9 @@ module.exports = {
     core: {
         builder: 'webpack5'
     },
+    typescript: {
+        reactDocgen: 'react-docgen-typescript-plugin'
+    },
     webpackFinal: async (config) => {
         const aliasPaths = {
             src: '../src/',
@@ -34,15 +39,18 @@ 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]);
         }
+
         return config;
     },
     features: {
-        previewMdx2: true // 👈 MDX 2 enabled here
+        previewMdx2: true
     }
 };

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"]
 }

configs/rollup.config.js

@@ -1,3 +1,4 @@
+import typescript from '@rollup/plugin-typescript';
 import { resolve as resolvePath } from 'path';
 import { visualizer } from 'rollup-plugin-visualizer';
 import resolve from '@rollup/plugin-node-resolve';
@@ -7,23 +8,24 @@ import babel from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
 import image from '@rollup/plugin-image';
 import json from '@rollup/plugin-json';
-
-// import url from 'postcss-url';
 import postcss from 'rollup-plugin-postcss';
 import prefixSelector from 'postcss-prefix-selector';
 import autoprefixer from 'autoprefixer';
 import { getDirectories, getFiles } from '../scripts/utils';
-// import scss from 'rollup-plugin-scss';
 
 const packageJson = require('../package.json');
-// console.log('🚀 ~ file: rollup.config.js ~ line 103 ~ packageJson', packageJson);
+
+const TSComponentsList = ['Avatar', 'LinkButton'];
 
 const getInputs = (name, dir) => {
     const inputs = getDirectories(dir).reduce((obj, item) => {
         const [name] = item.split('/').reverse();
+        // Tmp solution should be removed after full
+        // typescript migration
+        const extension = TSComponentsList.includes(name) ? 'tsx' : 'js';
         return {
             ...obj,
-            [name]: `${item}/index.js`
+            [name]: `${item}/index.${extension}`
         };
     }, {});
 
@@ -32,13 +34,20 @@ const getInputs = (name, dir) => {
     };
 };
 
-const scriptsInputs = Object.entries({
+const componentsInputs = Object.entries({
     atoms: 'src/lib/atoms',
     molecules: 'src/lib/molecules',
     organisms: 'src/lib/organisms',
     providers: 'src/lib/providers'
 }).reduce((obj, entry) => ({ ...obj, ...getInputs(...entry) }), {});
 
+const hooks = getFiles('src/hooks').reduce((acc, path) => {
+    const [hookPath] = path.split('/').reverse();
+    const hookName = hookPath.replace('.js', '');
+    acc[hookName] = path;
+    return acc;
+}, {});
+
 const getFormableInputs = (name, dir) =>
     getFiles(dir).reduce((obj, item) => {
         const [name] = item.split('/').reverse();
@@ -56,17 +65,34 @@ const formableInputs = Object.entries({
 
 export default {
     input: {
-        ...scriptsInputs,
+        ...componentsInputs,
         ...formableInputs,
-        index: 'src/index.js',
+        ...hooks,
+        index: 'src/index.ts',
         configs: 'src/configs.js'
     },
     output: [
         {
             dir: 'dist',
             format: 'esm',
-            entryFileNames: '[name].js',
-            exports: 'named'
+            exports: 'named',
+            entryFileNames: ({ facadeModuleId }) => {
+                // Check if the module is one of the components that require nested structure
+
+                const folders = ['atoms', 'molecules', 'organisms', 'providers'];
+                const isComponent = folders.some((folder) => facadeModuleId.includes(`/src/lib/${folder}/`));
+                const isHook = facadeModuleId.includes(`/src/hooks/`);
+
+                let filePath = '[name].js';
+
+                if (isComponent) {
+                    filePath = `[name]/index.js`;
+                } else if (isHook) {
+                    filePath = `hooks/[name].js`;
+                }
+
+                return filePath;
+            }
         }
     ],
     external: ['react', 'react-dom'],
@@ -82,10 +108,16 @@ export default {
                 wrappers: 'src/wrappers/index.js',
                 configs: 'src/configs.js',
                 hooks: 'src/hooks/index.js',
-                indexof: 'src/utils/indexof.js'
+                indexof: 'src/utils/indexof.js',
+                components: 'src/index.ts'
             }
         }),
-        resolve(),
+        resolve({
+            ignoreSideEffectsForRoot: true
+        }),
+        typescript({
+            tsconfig: resolvePath(__dirname, 'tsconfig.json')
+        }),
         babel({
             babelHelpers: 'bundled',
             babelrc: true,
@@ -106,14 +138,14 @@ export default {
                 autoprefixer,
                 prefixSelector({
                     prefix: `[data-gene-ui-version="${packageJson.version}"]`,
-                    // to prevent global styles isolation
+                    // To prevent global styles isolation
                     exclude: [new RegExp(/^(html|:root|body|\*)/)],
                     transform: (prefix, selector, prefixedSelector, file) =>
                         file.includes('src/lib/') ? prefixedSelector : selector
                 })
             ]
         }),
-        // make conditional of generation bundle size via script parameter
+        // Make conditional of generation bundle size via script parameter
         visualizer({ template: 'treemap', filename: 'stats/treemap.html', gzipSize: true }),
         visualizer({ template: 'network', filename: 'stats/network.html', gzipSize: true }),
         visualizer({ template: 'sunburst', filename: 'stats/sunburst.html', gzipSize: true })

configs/tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "baseUrl": "../src",
+        "paths": {
+            "src": ["./"],
+            "components": ["./index.ts"],
+            "utils": ["./utils/index.js"],
+            "wrappers": ["./wrappers/index.js"],
+            "configs": ["./configs.js"],
+            "hooks": ["./hooks/index.js"]
+        },
+        "outDir": "../dist",
+        "target": "es6",
+        "module": "esnext",
+        "declaration": true,
+        "emitDeclarationOnly": true,
+        "moduleResolution": "node",
+        "jsx": "react",
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitAny": false // TODO remove after typescript migration
+    },
+    "include": ["../src/**/*.ts", "../src/**/index.tsx"]
+}

src/index.mobile.ts

@@ -0,0 +1,24 @@
+// Atoms
+export * from './lib/atoms/Button/index.mobile';
+export * from './lib/atoms/Divider/index.mobile';
+export * from './lib/atoms/Icon/index.mobile';
+export * from './lib/atoms/Label/index.mobile';
+export * from './lib/atoms/Radio/index.mobile';
+export * from './lib/atoms/Switcher/index.mobile';
+
+// Molecules
+export * from './lib/molecules/Alert/index.mobile';
+export * from './lib/molecules/Checkbox/index.mobile';
+export * from './lib/molecules/ExtendedInput/index.mobile';
+export * from './lib/molecules/Grid/index.mobile';
+export * from './lib/molecules/Notification/index.mobile';
+export * from './lib/molecules/Pagination/index.mobile';
+export * from './lib/molecules/RadioGroup/index.mobile';
+export * from './lib/molecules/ValidatableElements/Elements/index.mobile';
+export * from './lib/molecules/MobileNavigation/index.mobile';
+export * from './lib/molecules/Products/index.mobile';
+export * from './lib/molecules/Counter/index.mobile';
+
+// Organisms
+export * from './lib/organisms/CheckboxGroup/index.mobile';
+export * from './lib/organisms/Form/index.mobile';