Converted to Yarn Workspace 3

Signed-off-by: Antonette Caldwell <[email protected]>

.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/components-release.yml

@@ -0,0 +1,54 @@
+name: Build and Publish Components Package
+
+on:
+  release:
+    types: [published]    
+  workflow_dispatch:
+    inputs:
+      release-type:
+        required: true
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install deps and build
+        working-directory: packages/components
+        run: |
+          yarn
+          yarn build
+
+  publish-gpr:
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: "https://registry.npmjs.org"
+          scope: "@layer5"
+
+      - name: Publish Components to npm
+        working-directory: packages/components
+        run: yarn publish --release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

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

@@ -1,4 +1,4 @@
-name: Publish NPM Package
+name: Build and Publish W=SVG Package
 
 on:
   release:
@@ -24,9 +24,10 @@ jobs:
           node-version: 18
 
       - name: Install deps and build
+        working-directory: packages/svg
         run: |
           yarn
-          yarn build-all
+          yarn build
 
   publish-gpr:
     needs: build
@@ -45,7 +46,8 @@ jobs:
           registry-url: "https://registry.npmjs.org"
           scope: "@layer5"
 
-      - name: Publish to npm
+      - name: Publish SVG to npm
+        working-directory: packages/svg
         run: yarn publish --release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_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

@@ -7,8 +7,8 @@ The Sistent Design System from Layer5 provides the open source building blocks t
 - Design System components in React.js
 - npm package:
 
-`@layer5/sistent-components`
-`@layer5/sistent-svg`
+* `@layer5/sistent-components`
+* `@layer5/sistent-svg`
 
 ### Brand
 
@@ -17,8 +17,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
+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,48 @@
+{
+  "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": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@layer5/sistent-components": "workspace:^",
+    "@mui/material": "^5.14.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.4.1",
+    "@storybook/addon-interactions": "^7.4.1",
+    "@storybook/addon-links": "^7.4.1",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/blocks": "^7.4.1",
+    "@storybook/react": "^7.4.1",
+    "@storybook/react-vite": "^7.4.1",
+    "@storybook/testing-library": "^0.2.0",
+    "@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.1",
+    "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>

packages/design-system/src/stories/AppBar.stories.jsx → apps/design-system/src/stories/AppBar.stories.tsx

@@ -1,14 +1,18 @@
-import { AppBar, Box, IconButton, Toolbar, Typography } from '@layer5/sistent-components';
+import type { Meta } from '@storybook/react';
 
-export default {
+import { AppBar, Box, Button, IconButton, Toolbar, Typography } from '@layer5/sistent-components';
+
+const meta = {
   title: 'Example/AppBar',
   component: AppBar,
-  tags: ['autodocs'],
   parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen'
-  }
-};
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof AppBar>;
+
+export default meta;
+// type Story = StoryObj<typeof meta>;
 
 export function Primary() {
   return (
@@ -33,7 +37,7 @@ export function BasicAppBar() {
           <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
             Dashboard
           </Typography>
-          {/* <Button color="inherit">Login</Button> */}
+          <Button color="inherit">Login</Button>
         </Toolbar>
       </AppBar>
     </Box>
@@ -60,11 +64,11 @@ export function MesheryHeader() {
           <Box sx={{ flexGrow: 1 }} />
           <Box data-test="settings-button" sx={{ display: { xs: 'none', md: 'flex' } }}>
             {/* <Link href="/settings">
-                            <IconButton>
-                                <Settings />
-                            </IconButton>
-                        </Link>
-                        */}
+                                  <IconButton>
+                                      <Settings />
+                                  </IconButton>
+                              </Link>
+                              */}
           </Box>
         </Toolbar>
       </AppBar>