[workspace] Converted to Yarn Workspace 3 with Lerna

.dockerignore

@@ -0,0 +1,2 @@
+.yarn/cache
+.yarn/install-state.gz

.eslintignore

@@ -0,0 +1,7 @@
+jest.config.js
+vite.config.ts
+.eslintrc.cjs
+node_modules
+dist
+storybook-static
+*.md

.gitattributes

@@ -0,0 +1,2 @@
+/.yarn/releases/** binary
+/.yarn/plugins/** binary

.github/workflows/checks.yml

@@ -0,0 +1,27 @@
+name: Checks
+on:
+    pull_request:
+        types: [opened, synchronize]
+
+jobs:
+    checks:
+        runs-on: ubuntu-latest
+        strategy:
+            matrix:
+              node-version: [16, 18, 20]
+        steps:
+        - name: Checkout Repo
+          uses: actions/checkout@v3
+
+        - name: Setup Node.js ${{ matrix.node-version }}
+          uses: actions/setup-node@v3
+          with:
+            node-version: ${{ matrix.node-version }}
+
+        - name: Setup and install deps
+          run: |
+            yarn install
+
+        - name: Prettier check
+          run: |
+            yarn format:check

.github/workflows/release.yaml → .github/workflows/release.yml

@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Setup Node.js 18.x
         uses: actions/setup-node@v3
@@ -36,7 +36,7 @@ jobs:
       packages: write
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node.js 18.x
         uses: actions/setup-node@v3
@@ -46,7 +46,17 @@ jobs:
           scope: "@layer5"
 
       - name: Publish to npm
-        run: yarn publish --release
+        run: |
+            git config user.name "${{ github.actor }}"
+            git config user.email "${{ github.actor}}@users.noreply.github.com"
+
+            if [ ${{ github.base_ref }} = development ]; then
+            npx lerna version --conventional-commits --conventional-prerelease --preid beta --yes
+            else
+            npx lerna version --conventional-commits --conventional-graduate --yes
+            fi
+
+            npx lerna publish from-git --yes
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -20,4 +20,12 @@
 node_modules
 
 build/**
-dist/**
+dist/**
+
+.yarn/*
+.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.yarnrc.yml

@@ -0,0 +1,11 @@
+enableGlobalCache: true
+
+nmHoistingLimits: workspaces
+
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: "@yarnpkg/plugin-workspace-tools"
+
+yarnPath: .yarn/releases/yarn-3.6.3.cjs

MAINTAINERS.md

@@ -1,5 +1,5 @@
-### Sistent Maintainer
-
-| Name                | GitHub                 | Affiliation |
-| ------------------- | ---------------------- | ----------- |
-| Antonette Caldwell  | nebula-aac             | Acquia      |
+### Sistent Maintainer
+
+| Name               | GitHub     | Affiliation |
+| ------------------ | ---------- | ----------- |
+| Antonette Caldwell | nebula-aac | Aquia       |

README.md

@@ -2,7 +2,16 @@
 
 The Sistent Design System from Layer5 provides the open source building blocks to design and implement consistent, accessible, and delightful product experiences.
 
-## Brand
+### Packages
+
+Design System components in React, usually built with Vite.
+
+List of npm packages:
+
+- `@layer5/sistent-components`
+- `@layer5/sistent-svg`
+
+### Brand
 
 - Layer5 Brand Guide ([PDF](https://layer5.io/brand/brand-guide.pdf))
 - [Layer5 Logos](https://layer5.io/company/brand) (more assets available in shared Community drive).
@@ -13,17 +22,10 @@ The Sistent Design System from Layer5 provides the open source building blocks t
 
 ### How to get started
 
-1. Install `[email protected]`
-2. Use `yarn` to install dependencies
-
-### NPM Packages
-  - `@layer5/sistent-components`
-  - `@layer5/sistent-svg`
-
-### Redux Toolkit Query
-
-- [Readme](packages/rtk-query-codegen/README.md)
+Use `corepack enable` to go ahead and install yarn.
 
+1. Install `[email protected]`
+2. Use `yarn` to install dependencies from the root of this project.
 
 <div>&nbsp;</div>
 

apps/design-system/.eslintignore

@@ -0,0 +1 @@
+storybook-static

apps/design-system/.eslintrc.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

apps/design-system/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+storybook-static

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

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+import { dirname, join } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-interactions')
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  }
+};
+export default config;

packages/design-system/.storybook/preview.js → apps/design-system/.storybook/preview.ts

@@ -1,9 +1,9 @@
 import { CssBaseline, ThemeProvider } from '@mui/material';
-import { lightTheme, darkTheme } from '../src/stories/themes/app';
 import { withThemeFromJSXProvider } from '@storybook/addon-styling';
+import type { Preview } from '@storybook/react';
+import { darkTheme, lightTheme } from '../src/stories/themes/app';
 
-/** @type { import('@storybook/react').Preview } */
-const preview = {
+const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {

packages/design-system/index.html → apps/design-system/index.html

@@ -4,10 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Vite + React + TS</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

apps/design-system/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "design-system",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build-storybook": "storybook build",
+    "dev": "vite",
+    "init-msw": "msw init public/",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix",
+    "preview": "vite preview",
+    "storybook": "BROWSER=none storybook dev -p 6006"
+  },
+  "dependencies": {
+    "@layer5/sistent-components": "workspace:^",
+    "@layer5/sistent-svg": "workspace:^",
+    "@mui/material": "^5.14.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@storybook/addon-essentials": "^7.4.3",
+    "@storybook/addon-interactions": "^7.4.3",
+    "@storybook/addon-links": "^7.4.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",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "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",
+    "storybook": "^7.4.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}

apps/design-system/src/App.tsx

@@ -0,0 +1,5 @@
+function App() {
+  return <div></div>;
+}
+
+export default App;

packages/design-system/src/main.jsx → apps/design-system/src/main.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App';
+import App from './App.tsx';
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>