@cmotino/cm-web-components 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,67 @@
-# Temporary Holding Version
+# cm-web-components
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A React component library built on Material UI.
+
+## Requirements
+
+- React 19 and MUI 9, with Emotion
+- ES modules only
+- TypeScript consumers need `moduleResolution` set to `bundler`, `node16` or `nodenext`
+
+## Theming
+
+`CmThemeProvider` applies the default look. Use `createCmTheme` to override it for your project:
+
+```tsx
+import Button from '@mui/material/Button'
+import { CmThemeProvider, createCmTheme } from '@cmotino/cm-web-components'
+
+const theme = createCmTheme({
+  palette: { primary: { main: '#0b6e4f' } },
+  shape: { borderRadius: 4 },
+})
+
+export function App() {
+  return (
+    <CmThemeProvider theme={theme}>
+      <Button sx={{ mt: 2 }}>Save</Button>
+    </CmThemeProvider>
+  )
+}
+```
+
+**A top-level `palette` override only changes light mode.** To change dark mode, override `colorSchemes.dark`:
+
+```ts
+createCmTheme({
+  palette: { primary: { main: '#0b6e4f' } },
+  colorSchemes: { dark: { palette: { primary: { main: '#7fd8b6' } } } },
+})
+```
+
+**Colors follow the operating system by default.** For a manual light and dark toggle, set a color scheme selector:
+
+```ts
+createCmTheme({ cssVariables: { colorSchemeSelector: 'class' } })
+```
+
+`CmThemeProvider` adds no global styles. Pass `baseline` to include MUI's `CssBaseline`. Fonts are up to your project.
+
+## Development
+
+Use the Node version in `.nvmrc`, then:
+
+```sh
+npm install
+npm run dev
+```
+
+`npm run dev` starts Storybook. Before opening a pull request, run:
+
+```sh
+npm run lint && npm run typecheck && npm test && npm run build && npm run test:dist
+```
+
+Pull requests with user-facing changes need a changelog entry from `npm run changeset`.
+
+Design decisions are in [`docs/specs`](./docs/specs/README.md). Start with the [architecture spec](./docs/specs/0000-architecture.md) and the [roadmap](./docs/specs/roadmap.md).

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './theme/index.ts';

package/dist/index.js

@@ -0,0 +1,3 @@
+import { createCmTheme } from "./theme/createCmTheme.js";
+import { CmThemeProvider } from "./theme/CmThemeProvider.js";
+export { CmThemeProvider, createCmTheme };

package/dist/theme/CmThemeProvider.d.ts

@@ -0,0 +1,14 @@
+import type { Theme, ThemeProviderProps } from '@mui/material/styles';
+export interface CmThemeProviderProps extends Omit<ThemeProviderProps<Theme>, 'theme'> {
+    /**
+     * The theme to apply. Build one with `createCmTheme`.
+     * @default the library theme
+     */
+    theme?: ThemeProviderProps<Theme>['theme'];
+    /**
+     * If `true`, adds MUI's `CssBaseline` global styles.
+     * @default false
+     */
+    baseline?: boolean;
+}
+export declare function CmThemeProvider({ theme, baseline, children, ...other }: CmThemeProviderProps): import("react").JSX.Element;

package/dist/theme/CmThemeProvider.js

@@ -0,0 +1,51 @@
+"use client";
+import { createCmTheme } from "./createCmTheme.js";
+import { c } from "react/compiler-runtime";
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider } from "@mui/material/styles";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/theme/CmThemeProvider.tsx
+var libraryTheme = createCmTheme();
+function CmThemeProvider(t0) {
+	const $ = c(12);
+	let children;
+	let other;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({theme: t1, baseline: t2, children, ...other} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = other;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		children = $[1];
+		other = $[2];
+		t1 = $[3];
+		t2 = $[4];
+	}
+	const theme = t1 === void 0 ? libraryTheme : t1;
+	const baseline = t2 === void 0 ? false : t2;
+	let t3;
+	if ($[5] !== baseline) {
+		t3 = baseline ? /* @__PURE__ */ jsx(CssBaseline, {}) : null;
+		$[5] = baseline;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== children || $[8] !== other || $[9] !== t3 || $[10] !== theme) {
+		t4 = /* @__PURE__ */ jsxs(ThemeProvider, {
+			theme,
+			...other,
+			children: [t3, children]
+		});
+		$[7] = children;
+		$[8] = other;
+		$[9] = t3;
+		$[10] = theme;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+}
+export { CmThemeProvider };

package/dist/theme/createCmTheme.d.ts

@@ -0,0 +1,11 @@
+import type { Theme, ThemeOptions } from '@mui/material/styles';
+/**
+ * Creates a theme from the library defaults and a project's overrides.
+ *
+ * A top-level `palette` override applies to the default color scheme only,
+ * which is light. To change dark mode, override `colorSchemes.dark`.
+ *
+ * The overrides must be merged before calling `createTheme`. With color
+ * schemes defined, `createTheme(defaults, overrides)` silently ignores them.
+ */
+export declare function createCmTheme(overrides?: ThemeOptions): Theme;

package/dist/theme/createCmTheme.js

@@ -0,0 +1,17 @@
+import { defaultThemeOptions } from "./defaultTheme.js";
+import { createTheme } from "@mui/material/styles";
+import deepmerge from "@mui/utils/deepmerge";
+// src/theme/createCmTheme.ts
+/**
+* Creates a theme from the library defaults and a project's overrides.
+*
+* A top-level `palette` override applies to the default color scheme only,
+* which is light. To change dark mode, override `colorSchemes.dark`.
+*
+* The overrides must be merged before calling `createTheme`. With color
+* schemes defined, `createTheme(defaults, overrides)` silently ignores them.
+*/
+function createCmTheme(overrides = {}) {
+	return createTheme(deepmerge(defaultThemeOptions, overrides));
+}
+export { createCmTheme };

package/dist/theme/defaultTheme.d.ts

@@ -0,0 +1,2 @@
+import type { ThemeOptions } from '@mui/material/styles';
+export declare const defaultThemeOptions: ThemeOptions;

package/dist/theme/defaultTheme.js

@@ -0,0 +1,9 @@
+// src/theme/defaultTheme.ts
+var defaultThemeOptions = {
+	cssVariables: true,
+	colorSchemes: {
+		light: true,
+		dark: true
+	}
+};
+export { defaultThemeOptions };

package/dist/theme/index.d.ts

@@ -0,0 +1,3 @@
+export { CmThemeProvider } from './CmThemeProvider.tsx';
+export type { CmThemeProviderProps } from './CmThemeProvider.tsx';
+export { createCmTheme } from './createCmTheme.ts';

package/package.json

@@ -1,6 +1,77 @@
 {
   "name": "@cmotino/cm-web-components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "tsc -b && vite build && tsc -p tsconfig.build.json",
+    "build-storybook": "storybook build",
+    "lint": "eslint .",
+    "typecheck": "tsc -b",
+    "test": "vitest run --project unit",
+    "test:watch": "vitest --project unit",
+    "test:dist": "vitest run --project dist",
+    "changeset": "changeset",
+    "release": "npm run build && changeset publish"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.7",
+    "@changesets/cli": "^3.0.3",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@eslint/js": "^10.0.1",
+    "@fontsource/roboto": "^5.3.0",
+    "@mui/icons-material": "^9.5.0",
+    "@mui/material": "^9.5.0",
+    "@rolldown/plugin-babel": "^0.3.0",
+    "@storybook/addon-a11y": "^10.6.6",
+    "@storybook/addon-docs": "^10.6.6",
+    "@storybook/react-vite": "^10.6.6",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^24.19.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^10.14.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.7",
+    "globals": "^17.13.0",
+    "jsdom": "^31.0.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "storybook": "^10.6.6",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.72.1",
+    "vite": "^8.3.6",
+    "vitest": "^5.1.0"
+  },
+  "dependencies": {
+    "@mui/utils": "^9.0.0"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@mui/material": "^9.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}