Merge branch 'master' into colors

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

.github/workflows/build-and-deploy-site.yml

@@ -0,0 +1,30 @@
+name: Build and Deploy Site
+on:
+  push:
+    branches: [ master ]
+    paths:
+      - '!**'
+      - 'site/**'
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@master
+        with:
+          fetch-depth: 1
+
+      - name: Install and Build 🔧 
+        run: |
+          cd site
+          npm install
+          npm run build
+
+      - name: Deploy 🚀
+        uses: JamesIves/[email protected]
+        with:
+          branch: site # The branch the action should deploy to.
+          folder: public # The folder the action should deploy.
+          clean: true

.github/workflows/build-and-preview-site.yml

@@ -0,0 +1,34 @@
+name: Build and Preview Site
+on:
+  pull_request:
+    branches: [ master ]
+    types: [opened, synchronize, reopened]
+    paths:
+      - '!**'
+      - 'site/**'
+
+jobs:
+  site-preview:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@master
+        with:
+          persist-credentials: false
+          fetch-depth: 1
+
+      - name: Install and Build 🔧 
+        run: |
+          cd site
+          npm install
+          npm run noIndex
+      - name: Zip Site
+        run: bash site/script.sh
+      - name: Upload files
+        uses: actions/upload-artifact@master
+        with:
+          name: public-dir
+          path: ./public-dir.zip
+          retention-days: 1
+      - name: Triger Inner workflow
+        run: echo "trigering inner workflow"

.github/workflows/preview-site.yml

@@ -0,0 +1,46 @@
+name: Deploy Preview
+on:
+  workflow_run:
+    workflows:
+      - Build and Preview Site
+    types:
+      - completed
+
+jobs:
+  deploy-preview:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/[email protected]
+
+      - name: Download Site dir
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          github_token: ${{ secrets.GH_ACCESS_TOKEN }}
+          workflow: build-and-preview-site.yml
+          run_id: ${{ github.event.workflow_run.id }}
+          name: public-dir
+
+      - name: Unzip Site
+        run: |
+          rm -rf ./site/public
+          unzip public-dir.zip
+          rm -f public-dir.zip
+
+      - name: Deploy to Netlify
+        id: netlify
+        uses: nwtgck/[email protected]
+        with:
+          publish-dir: 'site/public'
+          production-deploy: false
+          github-token: ${{ secrets.GH_ACCESS_TOKEN }}
+          enable-commit-comment: false
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+
+      - name: Comment Deploy URL
+        uses: ./.github/actions/comment-preview-on-pr
+        with:
+          token: ${{ secrets.GH_ACCESS_TOKEN }}
+          deploy_url: "${{ steps.netlify.outputs.deploy-url }}"

.github/workflows/release.yml

@@ -56,18 +56,16 @@ jobs:
           
       - name: Publish to npm
         run: |
-              - run: npm publish --verbose
+            git config user.name "${{ github.actor }}"
+            git config user.email "${{ github.actor}}@users.noreply.github.com"
 
-            # git config user.name "${{ github.actor }}"
-            # git config user.email "${{ github.actor}}@users.noreply.github.com"
-
-            # if [ ${{ github.base_ref }} = development ]; then
-            # HUSKY=0 npx lerna version --no-private --conventional-commits --conventional-prerelease --preid beta --yes
-            # else
-            # HUSKY=0 npx lerna version --no-private --conventional-commits --yes
-            # fi
+            if [ ${{ github.base_ref }} = development ]; then
+            HUSKY=0 npx lerna version --no-private --conventional-commits --conventional-prerelease --preid beta --yes
+            else
+            HUSKY=0 npx lerna version --no-private --conventional-commits --yes
+            fi
             
-            # HUSKY=0 npx lerna publish from-git --yes
+            HUSKY=0 npx lerna publish from-git --no-private --yes
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/storybook-deploy.yml

@@ -30,6 +30,7 @@ jobs:
       - name: Build Storybook
         run: |
           cd apps/design-system
+          yarn install
           yarn build-storybook
 
       - name: Deploy Storybook

.gitignore

@@ -28,4 +28,8 @@ dist/**
 !.yarn/plugins
 !.yarn/releases
 !.yarn/sdks
-!.yarn/versions
+!.yarn/versions
+
+**/storybook-static/**
+lerna-debug.log
+pub.sh

.prettierignore

@@ -1,4 +1,4 @@
 # Ignore artifacts:
-dist
-coverage
-
+**/dist/**
+**/coverage/**
+**/.cache/**

CNAME

@@ -0,0 +1 @@
+design.layer5.io

CONTRIBUTING.md

@@ -72,6 +72,19 @@ Please contribute! Layer5 documentation uses Jekyll and GitHub Pages to host doc
    `git push origin <my-changes>`
 1. Open a pull request (in your web browser) against the repo.
 
+### Commit Message Format
+
+We follow the [Conventional Commits](https://www.conventionalcommits.org/) standard for our commit messages. Each commit should have a type, an optional scope, and a descriptive message. Examples of commit types include "feat," "fix," "docs," and more.
+
+Here's a basic commit message format:
+
+For example:
+
+- `feat(auth): add user authentication feature`
+- `fix(ui): resolve styling issue in the header`
+
+Please ensure that your commits adhere to this format to maintain a clear and organized commit history.
+
 #### Tests
 
 Users can now test their code on their local machine against the CI checks implemented using `make run-tests`.

Makefile

@@ -1,11 +1,15 @@
-setup:
+.PHONY: setup build format-check format-fix
+
+## Install Sistent dependencies your local machine.
+package-setup:
 	yarn install
 
-build: install
+## Build Sistent components and packages on your local machine.
+package-build: setup
 	yarn run build-all
 
-format-check:
+package-format-check:
 	yarn run format:check
 
-format-fix:
+package-format-fix:
 	yarn run format:write

README.md

@@ -1,4 +1,4 @@
-# Sistent Design System
+# Layer5 Design System Sistent
 
 The Sistent Design System from Layer5 provides the open source building blocks to design and implement consistent, accessible, and delightful product experiences.
 

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/README.md

@@ -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/package.json

@@ -4,33 +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": "BROWSER=none storybook dev -p 6006"
+    "storybook": "storybook dev -p 6006"
   },
   "dependencies": {
-    "@layer5/sistent-components": "workspace:^",
-    "@layer5/sistent-svg": "workspace:^",
-    "@mui/material": "^5.14.8",
+    "@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",
-    "@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",
@@ -39,11 +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",
-    "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.4.5"
+  },
+  "installConfig": {
+    "hoistingLimits": "workspaces"
   }
 }

apps/design-system/src/App.tsx

@@ -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;