🏗️ Setup Storybook and workspaces.

.editorconfig

@@ -0,0 +1,16 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4
+tab_width = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[{package.json,*.yml}]
+indent_style = space
+indent_size = 2

.github/workflows/dependency-review.yml

@@ -0,0 +1,24 @@
+# Dependency Review Action
+#
+# This Action will scan dependency manifest files that change as part of a Pull Request, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
+#
+# Source repository: https://github.com/actions/dependency-review-action
+# Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement
+name: 'Dependency Review'
+
+on:
+  pull_request:
+    branches:
+      - release/**
+
+permissions:
+  contents: read
+
+jobs:
+  dependency-review:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 'Checkout Repository'
+        uses: actions/checkout@v3
+      - name: 'Dependency Review'
+        uses: actions/dependency-review-action@v2

.github/workflows/file-existence.yml

@@ -0,0 +1,49 @@
+#
+# All the packages, even private ones, must include a set of basic files to
+# perform correctly. This workflow checks the existence of those files when
+# pushing or submitting a PR to specific branches.
+#
+name: 'File(s) Existence'
+
+on:
+  push:
+    branches:
+      - master
+      - release/**
+  pull_request:
+    branches:
+      - release/**
+
+jobs:
+  file_existence:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v1
+
+      - name: Check packages main files existence
+        id: check_files
+        uses: andstor/[email protected]
+        with:
+          # Comma separated string with paths to files and directories to check for existence.
+          # Supports glob paterns (https://github.com/isaacs/node-glob).
+          files: 'packages/**/package.json, packages/**/README.md, packages/**/CHANGELOG.md, packages/**/LICENSE, packages/**/.gitignore'
+          # Ignore if a file name has upper or lower cases.
+          ignore_case: true
+          # Indicates whether to follow symbolic links.
+          follow_symbolic_links: true
+          # Makes the Action fail on missing files.
+          allow_failure: true
+
+      # ******** NOTE ********
+      # "files_exists" outputs true if the file(s) exists, otherwise false.
+      #
+      - name: Successful result
+        if: steps.check_files.outputs.files_exists == 'true'
+        # Only runs if all of the files exists.
+        run: echo All files exists.
+
+      - name: Unsuccessful result
+        if: steps.check_files.outputs.files_exists != 'true'
+        # Only runs if some of the files don't exist.
+        run: echo Looks like one or more files are missing.

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+.DS_Store
+.npmrc
+.changelog
+.dccache
+
+# Ignore all error logs.
+*.log

.prettierignore

@@ -0,0 +1,7 @@
+# Ignore artifacts:
+build
+coverage
+
+# Ignore minified files:
+*.min.js
+*.min.css

.prettierrc.json

@@ -0,0 +1,36 @@
+{
+	"useTabs": true,
+	"tabWidth": 4,
+	"printWidth": 80,
+	"singleQuote": true,
+	"trailingComma": "es5",
+	"bracketSameLine": false,
+	"arrowParens": "always",
+	"parenSpacing": true,
+	"bracketSpacing": true,
+	"endOfLine": "lf",
+	"overrides": [
+		{
+			"files": "*.{css,sass,scss}",
+			"options": {
+				"singleQuote": false,
+				"parenSpacing": false,
+				"bracketSpacing": true
+			}
+		},
+		{
+			"files": "*.css",
+			"options": {
+				"useTabs": true,
+				"tabWidth": 4
+			}
+		},
+		{
+			"files": ["package.json", "*.yml"],
+			"options": {
+				"useTabs": false,
+				"tabWidth": 2
+			}
+		}
+	]
+}

.storybook/main.js

@@ -0,0 +1,28 @@
+const path = require('path');
+
+module.exports = {
+	stories: [
+		'../packages/**/*.stories.mdx',
+		'../packages/**/*.stories.@(js|jsx|ts|tsx)',
+	],
+	addons: [
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions',
+		'@storybook/addon-postcss',
+	],
+	webpackFinal: async (config, { configType }) => {
+		// Add SASS support.
+		config.module.rules.push({
+			test: /\.scss$/,
+			use: ['style-loader', 'css-loader', 'sass-loader'],
+			include: path.resolve(__dirname, '../'),
+		});
+
+		return config;
+	},
+	framework: '@storybook/react',
+	core: {
+		builder: '@storybook/builder-webpack5',
+	},
+};

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+	actions: { argTypesRegex: '^on[A-Z].*' },
+	controls: {
+		matchers: {
+			color: /(background|color)$/i,
+			date: /Date$/,
+		},
+	},
+};

.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+	"extends": ["@wordpress/stylelint-config"]
+}

lerna.json

@@ -0,0 +1,10 @@
+{
+	"npmClient": "yarn",
+	"useWorkspaces": true,
+	"version": "0.0.0",
+	"command": {
+		"publish": {
+			"message": "🚀 Publish changes."
+		}
+	}
+}

package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@wpmudev/sui-react",
+  "description": "SUI React, the WPMU DEV Products styles library.",
+  "version": "0.0.0",
+  "license": "GPL-3.0",
+  "keywords": [
+    "incsub",
+    "wpmudev",
+    "shared-ui",
+    "react",
+    "components",
+    "containers"
+  ],
+  "author": "WPMU DEV (https://wpmudev.com)",
+  "contributors": [
+    {
+      "name": "Leighton Sapir",
+      "email": "[email protected]",
+      "url": "https://iamleigh.com"
+    }
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wpmudev/sui-react.git"
+  },
+  "scripts": {
+    "format-files": "clear && yarn prettier --write .",
+    "build-css": "clear && lerna run build",
+    "storybook": "start-storybook -p 6007",
+    "build-storybook": "build-storybook",
+    "changelog": "npx lerna-changelog"
+  },
+  "bugs": {
+    "url": "https://incsub.atlassian.net/browse/SUI"
+  },
+  "homepage": "https://github.com/wpmudev/sui-react#readme",
+  "workspaces": [
+    "packages/*"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.18.9",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-postcss": "2.0.0",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@storybook/testing-library": "^0.0.13",
+    "@wordpress/stylelint-config": "^20.0.2",
+    "@wpmudev/storybook": "^0.0.0",
+    "babel-loader": "^8.2.5",
+    "css-loader": "^6.7.1",
+    "dedent": "^0.7.0",
+    "lerna": "^4.0.0",
+    "lerna-changelog": "^2.2.0",
+    "path": "^0.12.7",
+    "prettier": "2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.54.0",
+    "sass-loader": "^13.0.2",
+    "style-loader": "^3.3.1",
+    "stylelint": "^14.9.1"
+  },
+  "resolutions": {
+    "glob-parent": "^6.0.1",
+    "parse-path": "^5.0.0",
+    "parse-url": "^8.1.0",
+    "trim": "^0.0.3",
+    "trim-newlines": "^3.0.1"
+  },
+  "changelog": {
+    "repo": "wpmudev/sui-react",
+    "labels": {
+      "breaking": "💥 Breaking Change",
+      "new": "✨ New Feature",
+      "improvement": "🚀 Improvement",
+      "bug": "🐛 Bug Fix",
+      "accessibility": "♿️ Accessibility",
+      "documentation": "📝 Documentation",
+      "internal": "🏠 Internal"
+    }
+  }
+}