react-mcu 1.0.1 → 1.0.3

package/README.md

@@ -1,43 +1,141 @@
-# react-mcu
-
 [![npm version](https://img.shields.io/npm/v/react-mcu.svg)](https://www.npmjs.com/package/react-mcu)
+[![](https://img.shields.io/badge/chromatic-171c23.svg?logo=chromatic)](https://www.chromatic.com/library?appId=695eb517cb602e59b4cc045c&branch=main)
+[![](https://img.shields.io/badge/storybook-171c23.svg?logo=storybook)](https://main--695eb517cb602e59b4cc045c.chromatic.com)
 
-A React component library.
-
-## Installation
+It injects `--mcu-*` CSS variables into the page, based on
+[m3 color system](https://m3.material.io/styles/color/roles).
 
-```bash
-npm install react-mcu
-```
+https://material-foundation.github.io/material-theme-builder/
 
-## Usage
+# Usage
 
 ```tsx
 import { Mcu } from "react-mcu";
 
-function App() {
-  return <Mcu />;
-}
+<Mcu
+  source="#0e1216"
+  scheme="vibrant"
+  contrast={0.5}
+  customColors={[
+    { name: "myCustomColor1", hex: "#FF5733", blend: true },
+    { name: "myCustomColor2", hex: "#3498DB", blend: false },
+  ]}
+>
+  <p style={{
+    backgroundColor: "var(--mcu-surface)",
+    color: "var(--mcu-on-surface)",
+  }}>
+    Hello, MCU <span style={{
+      backgroundColor: "var(--mcu-my-custom-color1)",
+      color: "var(--mcu-my-custom-color2)",
+    }}>colors<span>!
+  </p>
+</Mcu>
 ```
 
-## Components
-
-### Mcu
+https://github.com/user-attachments/assets/5b67c961-d7a4-4b64-9356-4ada26bc9be4
 
-A simple component that renders "Hello World".
+A `useMcu` hook is also provided:
 
 ```tsx
-<Mcu />
+import { useMcu } from "react-mcu";
+
+const { initials, setMcuConfig, getMcuColor } = useMcu();
+
+return (
+  <button onClick={() => setMcuConfig({ ...initials, source: "#FF5722" })}>
+    Change to {getMcuColor("primary", "light")}
+  </button>
+);
 ```
 
-## Contributing
+## Tailwind
+
+Compatible with Tailwind through
+[theme variables](https://tailwindcss.com/docs/theme):
+
+```css
+@theme {
+  --color-background: var(--mcu-background);
+  --color-on-background: var(--mcu-on-background);
+  --color-surface: var(--mcu-surface);
+  --color-surface-dim: var(--mcu-surface-dim);
+  --color-surface-bright: var(--mcu-surface-bright);
+  --color-surface-container-lowest: var(--mcu-surface-container-lowest);
+  --color-surface-container-low: var(--mcu-surface-container-low);
+  --color-surface-container: var(--mcu-surface-container);
+  --color-surface-container-high: var(--mcu-surface-container-high);
+  --color-surface-container-highest: var(--mcu-surface-container-highest);
+  --color-on-surface: var(--mcu-on-surface);
+  --color-on-surface-variant: var(--mcu-on-surface-variant);
+  --color-outline: var(--mcu-outline);
+  --color-outline-variant: var(--mcu-outline-variant);
+  --color-inverse-surface: var(--mcu-inverse-surface);
+  --color-inverse-on-surface: var(--mcu-inverse-on-surface);
+  --color-primary: var(--mcu-primary);
+  --color-on-primary: var(--mcu-on-primary);
+  --color-primary-container: var(--mcu-primary-container);
+  --color-on-primary-container: var(--mcu-on-primary-container);
+  --color-primary-fixed: var(--mcu-primary-fixed);
+  --color-primary-fixed-dim: var(--mcu-primary-fixed-dim);
+  --color-on-primary-fixed: var(--mcu-on-primary-fixed);
+  --color-on-primary-fixed-variant: var(--mcu-on-primary-fixed-variant);
+  --color-inverse-primary: var(--mcu-inverse-primary);
+  --color-secondary: var(--mcu-secondary);
+  --color-on-secondary: var(--mcu-on-secondary);
+  --color-secondary-container: var(--mcu-secondary-container);
+  --color-on-secondary-container: var(--mcu-on-secondary-container);
+  --color-secondary-fixed: var(--mcu-secondary-fixed);
+  --color-secondary-fixed-dim: var(--mcu-secondary-fixed-dim);
+  --color-on-secondary-fixed: var(--mcu-on-secondary-fixed);
+  --color-on-secondary-fixed-variant: var(--mcu-on-secondary-fixed-variant);
+  --color-tertiary: var(--mcu-tertiary);
+  --color-on-tertiary: var(--mcu-on-tertiary);
+  --color-tertiary-container: var(--mcu-tertiary-container);
+  --color-on-tertiary-container: var(--mcu-on-tertiary-container);
+  --color-tertiary-fixed: var(--mcu-tertiary-fixed);
+  --color-tertiary-fixed-dim: var(--mcu-tertiary-fixed-dim);
+  --color-on-tertiary-fixed: var(--mcu-on-tertiary-fixed);
+  --color-on-tertiary-fixed-variant: var(--mcu-on-tertiary-fixed-variant);
+  --color-error: var(--mcu-error);
+  --color-on-error: var(--mcu-on-error);
+  --color-error-container: var(--mcu-error-container);
+  --color-on-error-container: var(--mcu-on-error-container);
+}
+```
 
-When submitting a pull request, please include a changeset to document your changes:
+# Dev
+
+## INSTALL
+
+Pre-requisites:
+
+- Install [nvm](https://github.com/nvm-sh/nvm), then:
+  ```sh
+  $ nvm install
+  $ nvm use
+  $ node -v # make sure your version satisfies package.json#engines.node
+  ```
+  nb: if you want this node version to be your default nvm's one:
+  `nvm alias default node`
+- Install pnpm, with:
+  ```sh
+  $ corepack enable
+  $ corepack prepare --activate # it reads "packageManager"
+  $ pnpm -v # make sure your version satisfies package.json#engines.pnpm
+  ```
+
+```sh
+$ pnpm i
+```
+
+## CONTRIBUTING
+
+When submitting a pull request, please include a changeset to document your
+changes:
 
 ```bash
-pnpm dlx changeset
+pnpm exec changeset
 ```
 
 This helps us maintain the changelog and version the package appropriately.
-
-bump02

package/dist/index.d.ts

@@ -1,5 +1,28 @@
-interface McuProps {
-}
-declare const Mcu: React.FC<McuProps>;
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SchemeTonalSpot, SchemeMonochrome, SchemeNeutral, SchemeVibrant, SchemeExpressive, SchemeFidelity, SchemeContent, CustomColor } from '@material/material-color-utilities';
 
-export { Mcu, type McuProps };
+type HexCustomColor = Omit<CustomColor, "value"> & {
+    hex: string;
+};
+type McuConfig = {
+    source: string;
+    scheme: SchemeName;
+    contrast: number;
+    customColors: HexCustomColor[];
+};
+declare const schemesMap: {
+    readonly tonalSpot: typeof SchemeTonalSpot;
+    readonly monochrome: typeof SchemeMonochrome;
+    readonly neutral: typeof SchemeNeutral;
+    readonly vibrant: typeof SchemeVibrant;
+    readonly expressive: typeof SchemeExpressive;
+    readonly fidelity: typeof SchemeFidelity;
+    readonly content: typeof SchemeContent;
+};
+declare const schemeNames: (keyof typeof schemesMap)[];
+type SchemeName = (typeof schemeNames)[number];
+declare function Mcu({ source, scheme, contrast, customColors, children, }: McuConfig & {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { Mcu };

package/dist/index.js

@@ -1,8 +1,248 @@
 // src/Mcu.tsx
+import {
+  argbFromHex,
+  Hct,
+  hexFromArgb as hexFromArgb2,
+  MaterialDynamicColors,
+  SchemeContent,
+  SchemeExpressive,
+  SchemeFidelity,
+  SchemeMonochrome,
+  SchemeNeutral,
+  SchemeTonalSpot,
+  SchemeVibrant
+} from "@material/material-color-utilities";
+import { kebabCase } from "lodash-es";
+import { useMemo as useMemo2 } from "react";
+
+// src/Mcu.context.tsx
+import { hexFromArgb } from "@material/material-color-utilities";
+import {
+  useCallback,
+  useInsertionEffect,
+  useMemo,
+  useState
+} from "react";
+
+// src/lib/createRequiredContext.ts
+import { createContext, useContext } from "react";
+var createRequiredContext = () => {
+  const Ctx = createContext(null);
+  const useCtx = () => {
+    const contextValue = useContext(Ctx);
+    if (contextValue === null) {
+      throw new Error("Context value is null");
+    }
+    return contextValue;
+  };
+  return [useCtx, Ctx.Provider, Ctx];
+};
+
+// src/Mcu.context.tsx
 import { jsx } from "react/jsx-runtime";
-var Mcu = () => {
-  return /* @__PURE__ */ jsx("div", { children: "hello react-mcu" });
+var [useMcu, Provider, McuContext] = createRequiredContext();
+var McuProvider = ({
+  source: initialSource,
+  scheme: initialScheme,
+  contrast: initialContrast,
+  customColors: initialCustomColors,
+  styleId,
+  children
+}) => {
+  const [initials] = useState(() => ({
+    source: initialSource,
+    scheme: initialScheme,
+    contrast: initialContrast,
+    customColors: initialCustomColors
+  }));
+  const [mcuConfig, setMcuConfig] = useState(initials);
+  const { css, mergedColorsLight, mergedColorsDark } = useMemo(
+    () => generateCss(mcuConfig),
+    [mcuConfig]
+  );
+  useInsertionEffect(() => {
+    let tag = document.getElementById(styleId);
+    if (!tag) {
+      tag = document.createElement("style");
+      tag.id = styleId;
+      document.head.appendChild(tag);
+    }
+    tag.textContent = css;
+  }, [css, styleId]);
+  const getMcuColor = useCallback(
+    (colorName, theme) => {
+      return hexFromArgb(
+        (theme === "light" ? mergedColorsLight : mergedColorsDark)[colorName]
+      );
+    },
+    [mergedColorsDark, mergedColorsLight]
+  );
+  const value = useMemo(
+    () => ({
+      initials,
+      setMcuConfig,
+      getMcuColor
+    }),
+    [getMcuColor, initials]
+  );
+  return /* @__PURE__ */ jsx(Provider, { value, children });
+};
+
+// src/Mcu.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var schemesMap = {
+  tonalSpot: SchemeTonalSpot,
+  monochrome: SchemeMonochrome,
+  neutral: SchemeNeutral,
+  vibrant: SchemeVibrant,
+  expressive: SchemeExpressive,
+  fidelity: SchemeFidelity,
+  content: SchemeContent
+};
+var schemeNames = Object.keys(
+  schemesMap
+);
+var mcuStyleId = "mcu-styles";
+function Mcu({
+  source,
+  scheme,
+  contrast,
+  customColors,
+  children
+}) {
+  const config = useMemo2(
+    () => ({
+      source,
+      scheme,
+      contrast,
+      customColors
+    }),
+    [contrast, customColors, scheme, source]
+  );
+  const { css } = useMemo2(() => generateCss(config), [config]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("style", { id: mcuStyleId, children: css }),
+    /* @__PURE__ */ jsx2(McuProvider, { ...config, styleId: mcuStyleId, children })
+  ] });
+}
+var tokenNames = [
+  "background",
+  "onBackground",
+  "surface",
+  "surfaceDim",
+  "surfaceBright",
+  "surfaceContainerLowest",
+  "surfaceContainerLow",
+  "surfaceContainer",
+  "surfaceContainerHigh",
+  "surfaceContainerHighest",
+  "onSurface",
+  "onSurfaceVariant",
+  "outline",
+  "outlineVariant",
+  "inverseSurface",
+  "inverseOnSurface",
+  "primary",
+  // "primaryDim",
+  "onPrimary",
+  "primaryContainer",
+  "onPrimaryContainer",
+  "primaryFixed",
+  "primaryFixedDim",
+  "onPrimaryFixed",
+  "onPrimaryFixedVariant",
+  "inversePrimary",
+  "primaryFixed",
+  "primaryFixedDim",
+  "onPrimaryFixed",
+  "onPrimaryFixedVariant",
+  "secondary",
+  // "secondaryDim",
+  "onSecondary",
+  "secondaryContainer",
+  "onSecondaryContainer",
+  "secondaryFixed",
+  "secondaryFixedDim",
+  "onSecondaryFixed",
+  "onSecondaryFixedVariant",
+  "tertiary",
+  // "tertiaryDim",
+  "onTertiary",
+  "tertiaryContainer",
+  "onTertiaryContainer",
+  "tertiaryFixed",
+  "tertiaryFixedDim",
+  "onTertiaryFixed",
+  "onTertiaryFixedVariant",
+  "error",
+  // "errorDim",
+  "onError",
+  "errorContainer",
+  "onErrorContainer",
+  "scrim",
+  // added manually, was missing
+  "shadow"
+  // added manually, was missing
+];
+function toRecord(arr, getEntry) {
+  return arr.reduce(
+    (acc, item) => {
+      const [key, value] = getEntry(item);
+      acc[key] = value;
+      return acc;
+    },
+    {}
+  );
+}
+function mergeBaseAndCustomColors(scheme, customColors) {
+  const baseVars = toRecord(tokenNames, (tokenName) => {
+    const dynamicColor = MaterialDynamicColors[tokenName];
+    const argb = dynamicColor.getArgb(scheme);
+    return [tokenName, argb];
+  });
+  const customVars = toRecord(customColors, (color) => [
+    color.name,
+    color.value
+  ]);
+  return { ...baseVars, ...customVars };
+}
+var cssVar = (colorName, colorValue) => {
+  const name = `--mcu-${kebabCase(colorName)}`;
+  const value = hexFromArgb2(colorValue);
+  return `${name}:${value};`;
+};
+var toCssVars = (mergedColors) => {
+  return Object.entries(mergedColors).map(([name, value]) => cssVar(name, value)).join(" ");
 };
+function generateCss({
+  source: hexSource,
+  customColors: hexCustomColors,
+  scheme,
+  contrast
+}) {
+  console.log("MCU generateCss");
+  const sourceArgb = argbFromHex(hexSource);
+  const hct = Hct.fromInt(sourceArgb);
+  const SchemeClass = schemesMap[scheme];
+  const lightScheme = new SchemeClass(hct, false, contrast);
+  const darkScheme = new SchemeClass(hct, true, contrast);
+  const customColors = hexCustomColors.map(({ hex, ...rest }) => ({
+    ...rest,
+    value: argbFromHex(hex)
+  }));
+  const mergedColorsLight = mergeBaseAndCustomColors(lightScheme, customColors);
+  const mergedColorsDark = mergeBaseAndCustomColors(darkScheme, customColors);
+  const lightVars = toCssVars(mergedColorsLight);
+  const darkVars = toCssVars(mergedColorsDark);
+  return {
+    css: `
+    :root { ${lightVars} }
+    .dark { ${darkVars} }
+    `,
+    mergedColorsLight,
+    mergedColorsDark
+  };
+}
 export {
   Mcu
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-mcu",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "A React component library",
   "keywords": [
     "react",
@@ -28,25 +28,35 @@
   ],
   "type": "module",
   "devDependencies": {
-    "@arethetypeswrong/cli": "^0.15.4",
+    "@arethetypeswrong/cli": "^0.18.2",
     "@changesets/cli": "^2.27.7",
+    "@storybook/react-vite": "^10.1.11",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.1",
+    "@types/lodash-es": "^4.17.12",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
+    "chromatic": "^13.3.5",
+    "husky": "^9.1.7",
     "jsdom": "^27.4.0",
+    "lint-staged": "^16.2.7",
     "prettier": "^3.3.3",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
+    "storybook": "^10.1.11",
     "tsup": "^8.2.4",
     "typescript": "^5.5.4",
-    "vitest": "^2.0.5"
+    "vitest": "^4.0.16"
   },
   "peerDependencies": {
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
   },
+  "dependencies": {
+    "@material/material-color-utilities": "^0.3.0",
+    "lodash-es": "^4.17.22"
+  },
   "scripts": {
     "build": "tsup",
     "ci": "pnpm run build && pnpm run check-format && pnpm run check-exports && pnpm run lint && pnpm run test",
@@ -56,6 +66,9 @@
     "check-format": "prettier --check .",
     "check-exports": "attw --pack . --ignore-rules cjs-resolves-to-esm no-resolution",
     "release": "pnpm run build && changeset publish",
-    "local-release": "pnpm run ci && changeset version && changeset publish"
+    "local-release": "pnpm run ci && changeset version && changeset publish",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "chromatic --project-token $CHROMATIC_PROJECT_TOKEN"
   }
 }