Add ds-react package (#635)

Author: robphoenix

packages/react/.eslintrc.cjs

@@ -0,0 +1,8 @@
+/* eslint-env node */
+module.exports = {
+  extends: ['../../.eslintrc.js', 'plugin:storybook/recommended'],
+  parserOptions: {
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
+  },
+};

packages/react/.gitignore

@@ -0,0 +1,2 @@
+*.css
+!src/**/*.css

packages/react/.storybook/main.ts

@@ -0,0 +1,33 @@
+import { join, dirname } from 'path';
+import type { 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 = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-mdx-gfm'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+  async viteFinal(config) {
+    // Add your configuration here
+    config.optimizeDeps = {
+      exclude: ['node_modules/.cache/sb-vite'],
+    };
+    return config;
+  },
+};
+export default config;

packages/react/.storybook/preview.ts

@@ -0,0 +1,12 @@
+import { Preview } from '@storybook/react';
+import '@utilitywarehouse/fontsource';
+import '@utilitywarehouse/css-reset';
+import '@utilitywarehouse/colour-system/css/colours.css';
+import '../styles.css';
+import '../src/storybook/styles.css';
+
+const preview: Preview = {
+  parameters: {},
+};
+
+export default preview;

packages/react/.stylelintrc.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+  extends: 'stylelint-config-standard',
+  plugins: ['stylelint-media-use-custom-media'],
+  rules: {
+    'csstools/media-use-custom-media': ['known', { importFrom: ['./src/styles/breakpoints.css'] }],
+    'at-rule-no-unknown': [true, { ignoreAtRules: ['breakpoints'] }],
+    // Enforce prefixes on classnames and keyframes
+    'selector-class-pattern': /^((mobile|tablet|desktop|wide):)?-?uwp-([a-zA-Z\d]|-)+$/,
+    'custom-property-pattern': /([a-zA-Z\d]|-)+$/,
+    'keyframes-name-pattern': /^uwp-([a-z]|-)+$/,
+  },
+};

packages/react/README.md

@@ -0,0 +1 @@
+# React

packages/react/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@utilitywarehouse/ds-react",
+  "version": "0.0.0",
+  "description": "React components",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rm -rf .turbo node_modules dist *.css",
+    "build": "pnpm build:css && pnpm build:js",
+    "build:css": "postcss ./src/styles/index.css -o styles.css",
+    "build:js": "NODE_OPTIONS='--max-old-space-size=16384' tsup",
+    "build:storybook": "storybook build",
+    "build:storybook:ci": "pnpm build && pnpm build:storybook",
+    "dev": "pnpm dev:storybook & pnpm dev:css",
+    "dev:css": "postcss --watch --verbose src/styles/index.css -o styles.css",
+    "dev:storybook": "storybook dev -p 6006",
+    "ts-types": "tsc",
+    "lint": "pnpm lint:js && pnpm lint:css",
+    "lint:fix": "pnpm lint:js:fix && pnpm lint:css:fix",
+    "lint:js": "TIMING=1 eslint --max-warnings 0 \"src/**/*.ts*\"",
+    "lint:js:fix": "TIMING=1 eslint --fix --max-warnings 0 \"src/**/*.ts*\" src",
+    "lint:css": "stylelint \"src/**/*.css\"",
+    "lint:css:fix": "stylelint \"src/**/*.css\" --fix",
+    "format": "prettier --write \"src/**/*.ts*\"",
+    "format:ci": "prettier --list-different \"src/**/*.ts*\""
+  },
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "files": [
+    "dist",
+    "*.css"
+  ],
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@utilitywarehouse/react-icons": "^1.11.0",
+    "clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-mdx-gfm": "^8.4.5",
+    "@storybook/addon-onboarding": "^8.4.2",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-vite": "^8.4.2",
+    "@storybook/test": "^8.4.2",
+    "@types/node": "^22.9.0",
+    "@types/react": "^18.3.12",
+    "@utilitywarehouse/colour-system": "^0.5.0",
+    "@utilitywarehouse/css-reset": "^0.1.0",
+    "@utilitywarehouse/fontsource": "^0.1.0",
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.6",
+    "eslint-plugin-storybook": "^0.11.0",
+    "postcss": "^8.4.49",
+    "postcss-cli": "^11.0.0",
+    "postcss-custom-media": "^11.0.5",
+    "postcss-import": "^16.1.0",
+    "postcss-nesting": "^13.0.1",
+    "prop-types": "^15.8.1",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "storybook": "^8.4.2",
+    "stylelint": "^16.10.0",
+    "stylelint-config-standard": "^36.0.1",
+    "stylelint-media-use-custom-media": "^4.0.0",
+    "tsup": "^8.3.5"
+  }
+}

packages/react/postcss-breakpoints.cjs

@@ -0,0 +1,133 @@
+const fs = require('fs');
+const path = require('path');
+const postcss = require('postcss');
+
+/**
+ *
+ * Many thanks to Radix for blazing the trail: https://github.com/radix-ui/themes/blob/main/packages/radix-ui-themes/postcss-breakpoints.cjs
+ *
+ */
+
+// Build a list of breakpoints from "@custom media" rules in "breakpoints.css"
+const breakpointsFile = path.resolve('./src/styles/breakpoints.css');
+const breakpointsCss = fs.readFileSync(breakpointsFile, 'utf-8');
+const breakpoints = postcss
+  .parse(breakpointsCss)
+  .nodes.map(node => {
+    if (node.type === 'atrule' && node.name === 'custom-media') {
+      const [_match, name, params] = node.params.match(/--(\w+)\s+(.+)/);
+      return { name, params };
+    }
+
+    return null;
+  })
+  .filter(Boolean);
+
+const cache = new WeakMap();
+
+module.exports = () => ({
+  postcssPlugin: 'postcss-breakpoints',
+  Rule(rule) {
+    if (rule.parent.name === 'breakpoints') {
+      const breakpointsRule = rule.parent;
+
+      // when we first meet a given @breakpoints at-rule
+      if (!cache.has(breakpointsRule)) {
+        // create the final media rules for this @breakpoints at-rule
+        const medias = breakpoints.reduce((breakpointsMedias, breakpoint) => {
+          breakpointsMedias[breakpoint.name] = new postcss.AtRule({
+            name: 'media',
+            params: breakpoint.params,
+          });
+          return breakpointsMedias;
+        }, {});
+
+        // add an entry to the cache
+        cache.set(breakpointsRule, medias);
+
+        // add final media rules after the @breakpoints at-rule
+        const mediaRules = Object.values(medias).reverse();
+        mediaRules.forEach(media => {
+          breakpointsRule.after(media);
+        });
+      }
+
+      // move the rule itself before @breakpoints at-rule
+      breakpointsRule.before(rule);
+
+      // save clone of the rule before we modify it
+      const originalRule = rule.clone();
+      // clean up the extra indentation
+      rule.selector = rule.selector.replace(/\n\s\s/g, '\n');
+      rule.cleanRaws();
+
+      // add breakpoint-level rules
+      breakpoints.forEach(breakpoint => {
+        const clone = originalRule.clone();
+        updateClass(clone, breakpoint.name);
+        cache.get(breakpointsRule)[breakpoint.name].append(clone);
+      });
+
+      // remove @breakpoints at-rule and clear cache if it has no rules
+      if (breakpointsRule.nodes.length === 0) {
+        breakpointsRule.remove();
+        cache.delete(breakpointsRule);
+      }
+    }
+  },
+});
+
+module.exports.postcss = true;
+
+function updateClass(node, prefix) {
+  if (node.type === 'atrule') {
+    node.each(child => updateClass(child, prefix));
+  }
+
+  /**
+   * Should match responsive classes (uwp-r- prefix):
+   * ```
+   * .uwp-r-size-1
+   * .uwp-r-m-2
+   * .-uwp-r-m-2
+   * .uwp-Button.uwp-r-size-1 (captures "uwp-r-size-1")
+   * ```
+   *
+   * Should not match:
+   * .uwp-Button
+   */
+  const classNameRegexp = /\.(-?uwp-r-[a-z0-9-]+)/g; // TODO: import class prefix?
+
+  // Check for rules that use compound props on a component:
+  // - a component name (prefixed with "rt-" and pascal cased)
+  // - followed by 2 or more prop selectors (lowercase, numbers, -)
+  //
+  // e.g. ".rt-DialogContent.rt-r-size-2.gray"
+  if (/\.uwp-(?:[A-Z][a-z]+)+(?:\.[a-z0-9-]+){2,}/.test(node.selector)) {
+    throw Error(`
+      "${node.selector}" looks like it uses compound props on a component.
+      "@breakpoints" does not support compound props yet.
+    `);
+  }
+
+  if (classNameRegexp.test(node.selector)) {
+    node.selector = node.selector.replace(classNameRegexp, `.${prefix}\\:$1`);
+  }
+
+  addPropertySuffixes(node, prefix);
+}
+
+function addPropertySuffixes(propertyNode, suffix) {
+  propertyNode.nodes.map(node => {
+    /**
+     * Should match custom properties with responsive --r prefix:
+     * ```
+     * --r-padding
+     * ```
+     */
+    const propertyNameRegexp = /(--r-[a-z0-9-]+)/g;
+    if (propertyNameRegexp.test(node.value)) {
+      node.value = node.value.replace(propertyNameRegexp, `$1-${suffix}`);
+    }
+  });
+}

packages/react/postcss.config.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-nesting'),
+    require('./postcss-breakpoints.cjs'),
+    require('postcss-custom-media'),
+    require('autoprefixer'),
+    // require('cssnano')({
+    //   preset: 'default',
+    // }),
+  ],
+};