fix(design-system): isolate design system package, and upgrade storybook

Isolated Design System apps. Upgraded Storybook, and also updated dependencies to use official
releases from the components and svg libraries.

BREAKING CHANGE: design-system apps is an isolated project, so this means, it will not be hoisted
into the yarn workspace, when you run `yarn install` in the root workspace. Any dependencies will be
free to be added without dependencies issues in the workspace.

fix #156, fix #194

Author: nebula-aac

.gitignore

@@ -30,6 +30,6 @@ dist/**
 !.yarn/sdks
 !.yarn/versions
 
-packages/design-system/dist/**
+**/storybook-static/**
 lerna-debug.log
-pub.sh
+pub.sh

apps/design-system/.gitignore

@@ -22,5 +22,3 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-
-storybook-static

apps/design-system/.storybook/main.ts

@@ -10,19 +10,21 @@ function getAbsolutePath(value: string): any {
   return dirname(require.resolve(join(value, 'package.json')));
 }
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@storybook/addon-onboarding'),
-    getAbsolutePath('@storybook/addon-interactions')
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-themes')
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-vite'),
     options: {}
   },
   docs: {
     autodocs: 'tag'
-  }
+  },
+  logLevel: 'debug'
 };
 export default config;

apps/design-system/.storybook/preview.ts

@@ -1,5 +1,5 @@
 import { CssBaseline, ThemeProvider } from '@mui/material';
-import { withThemeFromJSXProvider } from '@storybook/addon-styling';
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 import type { Preview } from '@storybook/react';
 import { darkTheme, lightTheme } from '../src/stories/themes/app';
 
@@ -9,7 +9,7 @@ const preview: Preview = {
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/
+        date: /Date$/i
       }
     }
   }

apps/design-system/.yarn/install-state.gz

@@ -0,0 +1,27 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+   parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+   },
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

apps/design-system/README.md

@@ -4,31 +4,34 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "build": "tsc && vite build",
     "build-storybook": "storybook build",
     "dev": "vite",
     "init-msw": "msw init public/",
-    "lint": "eslint .",
-    "lint:fix": "eslint --fix",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006"
   },
   "dependencies": {
-    "@layer5/sistent-components": "workspace:^",
-    "@layer5/sistent-svg": "workspace:^"
+    "@layer5/sistent-components": "^0.8.1-beta.10",
+    "@layer5/sistent-svg": "^0.11.1-beta.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.16",
-    "@storybook/addon-essentials": "^7.4.3",
-    "@storybook/addon-interactions": "^7.4.3",
-    "@storybook/addon-links": "^7.4.3",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.17",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
     "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^7.4.3",
-    "@storybook/react": "^7.4.3",
-    "@storybook/react-vite": "^7.4.3",
-    "@storybook/testing-library": "^0.2.1",
+    "@storybook/addon-themes": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-vite": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
@@ -37,13 +40,15 @@
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-storybook": "^0.6.13",
-    "msw": "^1.3.0",
-    "msw-storybook-addon": "^1.8.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^7.4.3",
+    "eslint-plugin-storybook": "^0.6.15",
+    "msw": "^2.0.3",
+    "msw-storybook-addon": "^1.10.0",
+    "mui-datatables": "^4.3.0",
+    "storybook": "^7.5.3",
     "typescript": "^5.0.2",
-    "vite": "^4.5.0"
+    "vite": "^4.4.5"
+  },
+  "installConfig": {
+    "hoistingLimits": "workspaces"
   }
 }

apps/design-system/package.json

@@ -1,5 +1,31 @@
+import { useState } from 'react';
+import './App.css';
+import reactLogo from './assets/react.svg';
+import viteLogo from '/vite.svg';
+
 function App() {
-  return <div></div>;
+  const [count, setCount] = useState(0);
+
+  return (
+    <>
+      <div>
+        <a href="https://vitejs.dev" target="_blank">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>Vite + React</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
+    </>
+  );
 }
 
 export default App;

apps/design-system/src/App.tsx

@@ -12,9 +12,9 @@ const meta = {
 } satisfies Meta<typeof AppBar>;
 
 export default meta;
-// type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>;
 
-export function Primary() {
+export function Primary(): Story {
   return (
     <AppBar position="fixed" color="primary">
       <Toolbar>