Skip to content

Commit

Permalink
fix(design-system): isolate design system package, and upgrade storybook
Browse files Browse the repository at this point in the history
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
  • Loading branch information
nebula-aac committed Nov 7, 2023
1 parent c479704 commit 0ab9f32
Show file tree
Hide file tree
Showing 13 changed files with 13,124 additions and 8,149 deletions.
4 changes: 2 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,6 @@ dist/**
!.yarn/sdks
!.yarn/versions

packages/design-system/dist/**
**/storybook-static/**
lerna-debug.log
pub.sh
pub.sh
2 changes: 0 additions & 2 deletions apps/design-system/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,3 @@ dist-ssr
*.njsproj
*.sln
*.sw?

storybook-static
8 changes: 5 additions & 3 deletions apps/design-system/.storybook/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
4 changes: 2 additions & 2 deletions apps/design-system/.storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -9,7 +9,7 @@ const preview: Preview = {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/
date: /Date$/i
}
}
}
Expand Down
Binary file added apps/design-system/.yarn/install-state.gz
Binary file not shown.
27 changes: 27 additions & 0 deletions apps/design-system/README.md
Original file line number Diff line number Diff line change
@@ -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
45 changes: 25 additions & 20 deletions apps/design-system/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
}
}
28 changes: 27 additions & 1 deletion apps/design-system/src/App.tsx
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 2 additions & 2 deletions apps/design-system/src/stories/AppBar.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 0ab9f32

Please sign in to comment.