feat: project tailwind

packages/eslint-config-motech-react/index.js

@@ -11,6 +11,7 @@ module.exports = {
         'plugin:@typescript-eslint/recommended',
         'plugin:@typescript-eslint/recommended-requiring-type-checking',
         'plugin:react/jsx-runtime',
+        'plugin:storybook/recommended',
         'prettier',
       ],
       files: ['*.ts', '*.tsx'],
@@ -38,6 +39,7 @@ module.exports = {
           rules: {
             '@typescript-eslint/unbound-method': 'off',
             'import/no-extraneous-dependencies': 'off',
+            'react/jsx-props-no-spreading': 'off',
           },
         },
         {
@@ -50,6 +52,8 @@ module.exports = {
           ],
           rules: {
             'import/no-extraneous-dependencies': 'off',
+            'react/function-component-definition': 'off',
+            'react/jsx-props-no-spreading': 'off',
           },
         },
       ],
@@ -66,6 +70,15 @@ module.exports = {
             allowExpressions: true,
           },
         ],
+        'react/jsx-props-no-spreading': [
+          'error',
+          {
+            custom: 'enforce',
+            exceptions: ['Box', 'Comp'],
+            explicitSpread: 'ignore',
+            html: 'ignore',
+          },
+        ],
         'react/require-default-props': 'off',
       },
     },
@@ -75,6 +88,7 @@ module.exports = {
         'airbnb',
         'airbnb/hooks',
         'plugin:react/jsx-runtime',
+        'plugin:storybook/recommended',
         'prettier',
       ],
       files: ['*.{js,jsx,mjs}'],
@@ -93,6 +107,7 @@ module.exports = {
           plugins: ['jest'],
           rules: {
             'import/no-extraneous-dependencies': 'off',
+            'react/jsx-props-no-spreading': 'off',
           },
         },
         {
@@ -103,6 +118,8 @@ module.exports = {
           ],
           rules: {
             'import/no-extraneous-dependencies': 'off',
+            'react/function-component-definition': 'off',
+            'react/jsx-props-no-spreading': 'off',
           },
         },
       ],
@@ -115,6 +132,15 @@ module.exports = {
             allowExpressions: true,
           },
         ],
+        'react/jsx-props-no-spreading': [
+          'error',
+          {
+            custom: 'enforce',
+            exceptions: ['Box', 'Comp'],
+            explicitSpread: 'ignore',
+            html: 'ignore',
+          },
+        ],
       },
     },
   ],

packages/eslint-config-motech-react/package.json

@@ -36,7 +36,8 @@
     "eslint-plugin-jsx-a11y": "6.9.0",
     "eslint-plugin-react": "7.35.0",
     "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-simple-import-sort": "12.1.1"
+    "eslint-plugin-simple-import-sort": "12.1.1",
+    "eslint-plugin-storybook": "0.6.10"
   },
   "devDependencies": {
     "@motech-development/prettier-motech-config": "workspace:*",

packages/project-tailwind/.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@motech-development/eslint-config-motech-react",
+  "rules": {
+    "jsx-a11y/label-has-associated-control": [
+      2,
+      {
+        "labelComponents": ["Label"],
+        "labelAttributes": ["label"],
+        "controlComponents": ["TextInput"],
+        "depth": 3
+      }
+    ]
+  }
+}

packages/project-tailwind/.prettierrc.json

@@ -0,0 +1 @@
+"@motech-development/prettier-motech-config"

packages/project-tailwind/.releaserc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@motech-development/semantic-release/package"
+}

packages/project-tailwind/.storybook/main.ts

@@ -0,0 +1,30 @@
+import { dirname, join } from 'node:path';
+import { StorybookConfig } from '@storybook/react-vite';
+
+/**
+ * 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) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const config: StorybookConfig = {
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@chromatic-com/storybook'),
+  ],
+  docs: {},
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+};
+
+export default config;

packages/project-tailwind/.storybook/preview-head.html

@@ -0,0 +1,4 @@
+<link
+  href="https://fonts.googleapis.com/css?family=Cabin:400,600&display=swap"
+  rel="stylesheet"
+/>

packages/project-tailwind/.storybook/preview.ts

@@ -0,0 +1,18 @@
+import { Preview } from '@storybook/react';
+import '../src/styles/tailwind.css';
+
+export const tags = ['autodocs'];
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      expanded: true,
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

packages/project-tailwind/.swcrc

@@ -0,0 +1,13 @@
+{
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true
+    },
+    "transform": {
+      "react": {
+        "runtime": "automatic"
+      }
+    }
+  }
+}

packages/project-tailwind/package.json

@@ -0,0 +1,139 @@
+{
+  "name": "@motech-development/project-tailwind",
+  "version": "0.0.0-development",
+  "description": "Breeze UI component library",
+  "author": "Mo Gusbi <mo.gusbi@motechdevelopment.co.uk> (https://motechdevelopment.co.uk)",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "lib"
+  ],
+  "main": "lib/index.cjs.js",
+  "module": "lib/index.esm.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "build": "run prebuild && rollup -c",
+    "deploy": "storybook build",
+    "lint": "eslint './src/**/*.{ts,tsx}'",
+    "package": "run build",
+    "prebuild": "rimraf ./lib",
+    "start": "storybook dev -p 6006",
+    "test": "jest --watch",
+    "test-ci": "jest --coverage --runInBand"
+  },
+  "dependencies": {
+    "@floating-ui/react": "0.24.2",
+    "@headlessui/react": "2.1.8",
+    "@heroicons/react": "2.0.18",
+    "@radix-ui/react-slot": "1.1.0",
+    "clsx": "2.1.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-number-format": "5.4.1",
+    "react-textarea-autosize": "8.4.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "1.9.0",
+    "@mdx-js/react": "1.6.22",
+    "@motech-development/eslint-config-motech-base": "workspace:*",
+    "@motech-development/eslint-config-motech-react": "workspace:*",
+    "@motech-development/prettier-motech-config": "workspace:*",
+    "@motech-development/semantic-release": "workspace:*",
+    "@rollup/plugin-commonjs": "26.0.1",
+    "@rollup/plugin-node-resolve": "15.2.3",
+    "@storybook/addon-actions": "8.3.1",
+    "@storybook/addon-docs": "8.3.1",
+    "@storybook/addon-essentials": "8.3.1",
+    "@storybook/addon-interactions": "8.3.1",
+    "@storybook/addon-links": "8.3.1",
+    "@storybook/react": "8.3.1",
+    "@storybook/react-vite": "8.3.1",
+    "@storybook/test": "8.3.1",
+    "@swc/core": "1.7.22",
+    "@swc/jest": "0.2.36",
+    "@tailwindcss/forms": "0.5.3",
+    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/react": "16.0.1",
+    "@testing-library/user-event": "14.5.2",
+    "@types/jest": "29.5.12",
+    "@types/react": "18.3.5",
+    "@types/react-dom": "18.3.0",
+    "@types/react-textarea-autosize": "8.0.0",
+    "@typescript-eslint/eslint-plugin": "6.2.1",
+    "@typescript-eslint/parser": "6.2.1",
+    "@vitejs/plugin-react-swc": "3.7.0",
+    "autoprefixer": "10.4.14",
+    "eslint": "8.57.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-airbnb-typescript": "18.0.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-cypress": "3.5.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jest": "28.8.1",
+    "eslint-plugin-jsx-a11y": "6.9.0",
+    "eslint-plugin-react": "7.35.0",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-simple-import-sort": "12.1.1",
+    "jest": "29.7.0",
+    "jest-date-mock": "1.0.10",
+    "jest-environment-jsdom": "29.7.0",
+    "jest-watch-typeahead": "2.2.2",
+    "jsdom-testing-mocks": "1.7.0",
+    "postcss": "8.4.21",
+    "postcss-import": "16.1.0",
+    "postcss-loader": "7.2.4",
+    "prettier": "3.2.5",
+    "rimraf": "6.0.1",
+    "rollup": "4.21.2",
+    "rollup-plugin-dts": "6.1.1",
+    "rollup-plugin-exclude-dependencies-from-bundle": "1.1.23",
+    "rollup-plugin-postcss": "4.0.2",
+    "rollup-plugin-swc3": "0.11.2",
+    "snapshot-diff": "0.10.0",
+    "storybook": "8.3.1",
+    "tailwindcss": "3.3.2",
+    "typescript": "5.5.4",
+    "vite": "4.5.3"
+  },
+  "peerDependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{ts,tsx}",
+      "!src/**/*.stories.{ts,tsx}"
+    ],
+    "setupFiles": [
+      "jest-date-mock"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.ts"
+    ],
+    "testEnvironment": "jsdom",
+    "transform": {
+      "^.+\\.(t|j)sx?$": [
+        "@swc/jest",
+        {
+          "jsc": {
+            "transform": {
+              "react": {
+                "runtime": "automatic"
+              }
+            }
+          }
+        }
+      ]
+    },
+    "watchPlugins": [
+      "jest-watch-typeahead/filename",
+      "jest-watch-typeahead/testname"
+    ]
+  },
+  "lint-staged": {
+    "*": "prettier --ignore-unknown --write",
+    "src/**/*.{ts,tsx}": "eslint --fix"
+  }
+}

packages/project-tailwind/postcss.config.js

@@ -0,0 +1,9 @@
+/* eslint-disable sort-keys */
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/project-tailwind/rollup.config.mjs

@@ -0,0 +1,56 @@
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import dts from 'rollup-plugin-dts';
+import external from 'rollup-plugin-exclude-dependencies-from-bundle';
+import postcss from 'rollup-plugin-postcss';
+import { swc } from 'rollup-plugin-swc3';
+import pkg from './package.json' assert { type: 'json' };
+
+export default [
+  {
+    external: [/\.css$/],
+    input: 'src/index.ts',
+    output: [
+      {
+        file: pkg.types,
+        format: 'es',
+      },
+    ],
+    plugins: [dts()],
+  },
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: pkg.main,
+        format: 'cjs',
+        sourcemap: true,
+      },
+      {
+        file: pkg.module,
+        format: 'es',
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      external(),
+      postcss({
+        config: {
+          path: 'postcss.config.js',
+        },
+        extensions: ['.css'],
+        inject: {
+          insertAt: 'top',
+        },
+        minimize: true,
+      }),
+      resolve({
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      }),
+      commonjs(),
+      swc({
+        sourceMaps: true,
+      }),
+    ],
+  },
+];