feat: vite upgrade

.eslintignore

@@ -10,5 +10,6 @@ server
 **/*.test.ts
 **/*.test.tsx
 __mocks__
-./jest.config.js
+./vite.config.ts
 ./rollup.config.js
+!.storybook

.eslintrc.json

@@ -5,9 +5,10 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
     "plugin:react/recommended",
-    "plugin:import/typescript"
+    "plugin:import/typescript",
+    "plugin:storybook/recommended"
   ],
-  "plugins": ["react", "@emotion", "@typescript-eslint", "import"],
+  "plugins": ["react", "@emotion", "@typescript-eslint", "import", "unused-imports"],
   "env": {
     "node": true,
     "browser": true,
@@ -16,11 +17,17 @@
     "es6": true
   },
   "rules": {
+    "no-unused-vars": "off", // or "@typescript-eslint/no-unused-vars": "off",
+    "unused-imports/no-unused-imports": "error",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
+    ],
+    "@typescript-eslint/consistent-type-imports": "error",
     "react/no-unknown-property": ["error", { "ignore": ["css"] }],
     /* React rules */
     "react/no-direct-mutation-state": "error",
     "react/no-unused-prop-types": "warn",
-    "react/no-unknown-property": ["error", { "ignore": ["css"] }],
     "react/self-closing-comp": [
       "warn",
       {
@@ -30,6 +37,8 @@
     ],
     "react/prop-types": "off",
     "react/button-has-type": "warn",
+
+    "@typescript-eslint/no-explicit-any": ["off"],
     "react/no-array-index-key": "warn",
     "react/no-render-return-value": 0,
     "react/boolean-prop-naming": [
@@ -41,6 +50,14 @@
     ],
     /* JSX rules */
     "react/jsx-key": "error",
+    "react/jsx-curly-brace-presence": ["error", "never"],
+    // Since we are using React 17+ we no longer need these
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/no-children-prop": "off",
+
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
     /* eslint basic rules */
     "padding-line-between-statements": [
       "error",

.gitignore

@@ -33,3 +33,5 @@ build-storybook.log
 
 /typeDocs
 ./bundle-analysis.html
+
+vite.config.ts*

.storybook/main.ts

@@ -1,7 +1,5 @@
-import '@babel/polyfill';
-
-const fs = require('fs');
-const path = require('path');
+import fs from 'fs';
+import path from 'path';
 
 function getPackageDir(filepath: string) {
   let currDir = path.dirname(require.resolve(filepath));
@@ -21,71 +19,55 @@ function getPackageDir(filepath: string) {
 
 module.exports = {
   stories: [
-    '../docs/WELCOME.stories.@(md|mdx)',
-    '../docs/GETTING_STARTED.stories.@(md|mdx)',
-    '../docs/system/THEME.stories.@(md|mdx)',
-    '../docs/system/COLOR-UTILITY.stories.@(md|mdx)',
-    '../docs/guides/*.stories.@(md|mdx)',
-    '../docs/tokens/TOKENS.stories.@(md|mdx)',
-    '../docs/tokens/globals/*.stories.@(md|mdx)',
-    '../docs/tokens/*.stories.@(md|mdx)',
-    '../docs/system/*.stories.@(md|mdx)',
-    '../src/**/*.stories.@(ts|tsx|mdx)',
+    '../docs/WELCOME.mdx',
+    '../docs/GETTING_STARTED.mdx',
+    '../docs/system/THEME.mdx',
+    '../docs/system/COLOR-UTILITY.mdx',
+    '../docs/guides/*.mdx',
+    '../docs/tokens/TOKENS.mdx',
+    '../docs/tokens/globals/*.mdx',
+    '../docs/tokens/*.mdx',
+    '../docs/system/*.mdx',
+    '../src/**/*.@(mdx|stories.@(ts|tsx))',
   ],
+
   addons: [
-    '@storybook/addon-actions/register',
+    // '@storybook/addon-actions/register',
+    '@storybook/addon-interactions',
     '@storybook/addon-links',
     '@storybook/addon-viewport',
     '@storybook/addon-knobs',
-    '@storybook/addon-a11y',
-    '@storybook/addon-storysource/register',
+    '@storybook/addon-a11y', // '@storybook/addon-storysource/register',
     '@storybook/addon-docs',
     'storybook-addon-pseudo-states',
-    'storybook-addon-designs',
+    '@storybook/addon-designs',
+    '@storybook/addon-mdx-gfm',
   ],
+
   staticDirs: ['../public'],
-  core: {
-    builder: 'webpack5',
-  },
-  webpackFinal: async (config: any) => {
-    // do mutation to the config
-    // Edit config with care. Make sure to preserve the following config options:
-    // * entry
-    // * output
 
-    const rules = config.module.rules;
-    const fileLoaderRule = rules.find((rule: any) => rule.test.test('.svg'));
-    fileLoaderRule.exclude = /\.svg$/;
+  env: (config: any) => ({
+    ...config,
+    STORYBOOK_ENV: 'true',
+  }),
 
-    config.module.rules[0].use[0].options.presets = [
-      ...config.module.rules[0].use[0].options.presets,
-      require.resolve('@emotion/babel-preset-css-prop'),
-    ];
+  docs: {
+    inlineStories: true,
+    defaultName: 'Overview',
 
-    rules.push({
-      test: /\.(png|jpe?g|gif)$/i,
-      use: [
-        {
-          loader: 'file-loader',
-        },
-      ],
-    });
-    rules.push({
-      test: /\.svg$/,
-      issuer: /\.tsx?$/,
-      use: ['@svgr/webpack'],
-    });
+    story: {
+      canvas: { sourceState: 'shown' },
+      source: { type: 'code' },
+    },
+  },
 
-    config.module.rules.push({
-      test: /\.svg$/,
-      issuer: /\.style.ts?$/,
-      use: ['url-loader'],
-    });
+  typescript: {
+    // also valid 'react-docgen-typescript' | false
+    reactDocgen: 'react-docgen-typescript',
+  },
 
-    return config;
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
   },
-  env: (config: any) => ({
-    ...config,
-    STORYBOOK_ENV: 'true',
-  }),
 };

.storybook/manager-head.html

@@ -5,6 +5,7 @@
 <style>
   body {
     font-family: "Roboto", sans-serif;
+    color: rgb(51, 51, 51);
   }
 
   nav.container.sidebar-container {
@@ -17,21 +18,24 @@
   #storybook-explorer-menu button[aria-expanded="true"],
   #storybook-explorer-menu [data-nodetype="root"] button:hover,
   #storybook-explorer-menu button:focus,
-  #storybook-explorer-menu a[data-selected]:hover {
+  #storybook-explorer-menu div[data-selected]:hover {
     background-color: rgba(80, 52, 255, 0.1);
   }
   #storybook-explorer-menu [data-nodetype="root"] button {
     background-color: transparent;
   }
 
-  #storybook-explorer-menu a[data-selected="true"],
-  #storybook-explorer-menu a[data-selected="true"]:hover {
+  #storybook-explorer-menu div {
+    color: rgb(51, 51, 51);
+  }
+  #storybook-explorer-menu div[data-selected="true"],
+  #storybook-explorer-menu div[data-selected="true"]:hover {
     background-color: #175BF5;
     color: #f0f3ff;
   }
 
-  #storybook-explorer-menu a[data-selected="true"] svg {
-    color: #f0f3ff;
+  #storybook-explorer-menu div[data-selected="true"] a svg {
+    color: #fff;
   }
 
   .os-content button:hover {

.storybook/manager.ts

@@ -0,0 +1,17 @@
+import { addons } from '@storybook/manager-api';
+import { create } from '@storybook/theming';
+
+const theme = create({
+  base: 'light',
+  // brandImage: logo,
+  brandUrl: 'https://designlab.orfium.com',
+  barSelectedColor: '#175BF5',
+  brandTitle: 'Ictinus Design System',
+  barTextColor: 'rgb(153, 153, 153)',
+  colorPrimary: '#175BF5',
+  colorSecondary: '#585C6D',
+});
+
+addons.setConfig({
+  theme,
+});

.storybook/preview-head.html

@@ -5,6 +5,15 @@
     background: #f0f3ff !important;
   }
 
+  .css-qa4clq :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h3)):first-of-type {
+      margin-top: revert !important;
+      padding: inherit;
+  }
+  .css-qa4clq :where(h2:not(.sb-anchor, .sb-unstyled, .sb-unstyled h2))
+  {
+    border: none !important;
+  }
+  .csbdocs-content :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)) code,
   .sbdocs-content code {
     background: #e7eefe;
     color: #1552dd;
@@ -13,15 +22,16 @@
   ul.sbdocs.sbdocs-ul {
     margin: 24px 0;
   }
-  .sbdocs.sbdocs-li:not(:last-child) {
+  .sbdocs > ul > li:not(:last-child) {
     margin-bottom: 8px;
   }
 
-  .sbdocs.sbdocs-li,
-  .sbdocs.sbdocs-li a {
+  .sbdocs > ul > li,
+  .sbdocs > ul > li a {
     color: #1552dd;
     font-size: 18px;
     font-weight: 500;
+    text-decoration: none;
   }
 
   table.sbdocs.sbdocs-table {
@@ -44,13 +54,17 @@
     background: #f4f8ff;
     padding: 1rem 10px;
   }
+  .sbdocs.sbdocs-preview {
+    background: transparent;
+  }
 
   .docblock-argstable {
     margin-top: 0 !important;
   }
 
   /* API props styling */
-  tbody.docblock-argstable-body td > div > div span {
+  tbody.docblock-argstable-body td > div > div span,
+  tbody.docblock-argstable-body tr td:nth-of-type(2) > div:last-of-type span {
     background: #e7eefe;
     color: #1552dd;
   }