Merge pull request #53 from brainstormforce/staging

v0.0.2

.eslintrc.js

@@ -1,16 +1,31 @@
 // .eslintrc.mjs
 module.exports = {
 	root: true,
-	extends: ["plugin:@wordpress/eslint-plugin/recommended-with-formatting"],
+	extends: [ 'plugin:@wordpress/eslint-plugin/recommended-with-formatting', "plugin:storybook/recommended" ],
+	settings: {
+		'import/resolver': {
+			node: {
+				extensions: [ '.js', '.jsx', '.ts', '.tsx' ],
+			},
+			alias: {
+				map: [
+					[ '@', './src' ],
+					[ '@/components', './src/components' ],
+					[ '@/utilities', './src/utilities' ],
+				],
+				extensions: [ '.js', '.jsx' ],
+			},
+		},
+	},
 	parserOptions: {
 		requireConfigFile: false,
 		babelOptions: {
-			presets: ["@wordpress/babel-preset-default"],
+			presets: [ '@wordpress/babel-preset-default' ],
 		},
 	},
 	rules: {
-		"jsx-a11y/click-events-have-key-events": "off",
-		"react-hooks/exhaustive-deps": "off",
-		"jsx-a11y/label-has-associated-control": "off",
+		'jsx-a11y/click-events-have-key-events': 'off',
+		'react-hooks/exhaustive-deps': 'off',
+		'jsx-a11y/label-has-associated-control': 'off',
 	},
 };

.github/dependabot.yml

@@ -1,22 +1,22 @@
 version: 2
 updates:
-  # Maintain dependencies for GitHub Actions
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    target-branch: "dev"
-    schedule:
-      interval: "daily"
+    # Maintain dependencies for GitHub Actions
+    - package-ecosystem: 'github-actions'
+      directory: '/'
+      target-branch: 'dev'
+      schedule:
+          interval: 'daily'
 
-  # Maintain dependencies for npm
-  - package-ecosystem: "npm"
-    directory: "/"
-    target-branch: "dev"
-    schedule:
-      interval: "daily"
+    # Maintain dependencies for npm
+    - package-ecosystem: 'npm'
+      directory: '/'
+      target-branch: 'dev'
+      schedule:
+          interval: 'daily'
 
-  # Maintain dependencies for Composer
-  - package-ecosystem: "composer"
-    target-branch: "dev"
-    directory: "/"
-    schedule:
-      interval: "daily"
+    # Maintain dependencies for Composer
+    - package-ecosystem: 'composer'
+      target-branch: 'dev'
+      directory: '/'
+      schedule:
+          interval: 'daily'

.github/workflows/chromatic.yml

@@ -0,0 +1,29 @@
+name: "Chromatic"
+
+on:
+    push:
+        branches:
+        - staging
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install dependencies
+        # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
+        run: npm install
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          zip: true
+          onlyChanged: true # 👈 Required option to enable TurboSnap

.github/workflows/code-analysis.yml

@@ -4,42 +4,42 @@ on: pull_request
 
 # Cancels all previous workflow runs for pull requests that have not completed.
 concurrency:
-  # The concurrency group contains the workflow name and the branch name for pull requests
-  # or the commit hash for any other events.
-  group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
-  cancel-in-progress: true
+    # The concurrency group contains the workflow name and the branch name for pull requests
+    # or the commit hash for any other events.
+    group: ${{ github.workflow }}-${{ github.event_name == 'pull_request' && github.head_ref || github.sha }}
+    cancel-in-progress: true
 
 jobs:
-  analysis:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node: ["18.15"]
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Use desired version of NodeJS
-        uses: actions/setup-node@v2
-        with:
-          node-version: ${{ matrix.node }}
-
-      - name: Cache NPM packages
-        uses: actions/cache@v2
-        with:
-          # npm cache files are stored in `~/.npm` on Linux/macOS
-          path: ~/.npm
-          key: ${{ runner.os }}-node-${{ matrix.node }}-npm-cache-${{ hashFiles('**/package-lock.json') }}
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Lint JS
-        if: always()
-        run: npm run lint:js
-
-      - name: Lint CSS
-        if: always()
-        run: npm run lint:css
+    analysis:
+        runs-on: ubuntu-latest
+
+        strategy:
+            matrix:
+                node: ['18.15']
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v2
+
+            - name: Use desired version of NodeJS
+              uses: actions/setup-node@v2
+              with:
+                  node-version: ${{ matrix.node }}
+
+            - name: Cache NPM packages
+              uses: actions/cache@v2
+              with:
+                  # npm cache files are stored in `~/.npm` on Linux/macOS
+                  path: ~/.npm
+                  key: ${{ runner.os }}-node-${{ matrix.node }}-npm-cache-${{ hashFiles('**/package-lock.json') }}
+
+            - name: Install dependencies
+              run: npm install
+
+            - name: Lint JS
+              if: always()
+              run: npm run lint:js
+
+            - name: Lint CSS
+              if: always()
+              run: npm run lint:css

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 dist/*.map
-.DS_Store
+.DS_Store
+*storybook.log
+storybook-static/*

.prettierrc.js

@@ -1,11 +1,11 @@
 // Import the default config file and expose it in the project root.
 // Useful for editor integrations.
 
-const config = require("@wordpress/prettier-config");
+const config = require('@wordpress/prettier-config');
 
 config.overrides = [
 	{
-		files: ["*.scss", "*.css"],
+		files: ['*.scss', '*.css'],
 		options: {
 			printWidth: 500,
 			singleQuote: false,

.storybook/main.js

@@ -0,0 +1,31 @@
+import path from 'path';
+
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: ["@storybook/addon-webpack5-compiler-swc", "@storybook/addon-onboarding", "@storybook/addon-links", "@storybook/addon-essentials", "@chromatic-com/storybook", "@storybook/addon-interactions"],
+  swc: () => ({
+    jsc: {
+      transform: {
+        react: {
+          runtime: 'automatic'
+        }
+      }
+    }
+  }),
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  core: {
+    builder: "webpack5",
+  },
+  webpackFinal: async (config) => {
+    config.resolve.alias = {
+      '@': path.resolve(__dirname, '..', 'src'),
+    };
+
+    return config;
+  },
+};
+export default config;

.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/react').Preview } */
+import '../dist/force-ui.css';
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

babel.config.js

@@ -1,6 +1,3 @@
 module.exports = {
-    presets: [
-        "@babel/preset-env", 
-        "@babel/preset-react"
-    ]
+	presets: [ '@babel/preset-env', '@babel/preset-react' ],
 };

dist/force-ui.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom'), 'version' => 'bb18901488b5453d1e86');
+<?php return array('dependencies' => array('react', 'react-dom'), 'version' => '27e54a60318d13aa0c6c');

dist/utils/withTW.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '4114bc5c3397a0071e02');
+<?php return array('dependencies' => array(), 'version' => 'f5765dea688f24fb260e');