@react5/ui 1.0.27 → 1.0.28

package/packages/lib/jest.config.js

@@ -1,20 +1,20 @@
-/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
-export default {
-  preset: 'ts-jest',
-  passWithNoTests: true,
-  testEnvironment: 'jsdom',
-  transform: {
-    '^.+\\.(js|jsx|mjs|ts|tsx)$': 'babel-jest',
-  },
-  moduleNameMapper:{
-    "\\.(css|less|scss|sass|svg)$": "identity-obj-proxy"
-  },
-  // transformIgnorePatterns: [
-  //   'node_modules/(?!(bem)/)',
-  // ],
-  testPathIgnorePatterns: [
-    "/build/",
-    "/dist/"
-  ],
-  setupFilesAfterEnv: ['./src/test/setupTests.ts'],
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+export default {
+  preset: 'ts-jest',
+  passWithNoTests: true,
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(js|jsx|mjs|ts|tsx)$': 'babel-jest',
+  },
+  moduleNameMapper:{
+    "\\.(css|less|scss|sass|svg)$": "identity-obj-proxy"
+  },
+  // transformIgnorePatterns: [
+  //   'node_modules/(?!(bem)/)',
+  // ],
+  testPathIgnorePatterns: [
+    "/build/",
+    "/dist/"
+  ],
+  setupFilesAfterEnv: ['./src/test/setupTests.ts'],
 };

package/packages/lib/package.json

@@ -1,102 +1,100 @@
-{
-  "name": "@react5/lib",
-  "version": "0.1.1",
-  "description": "React library starter.",
-  "main": "dist/index.js",
-  "type": "module",
-  "module": "dist/esm/index.esm.js",
-  "types": "dist/types/index.d.ts",
-  "style": "dist/index.css",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/react5/ui.git"
-  },
-  "author": "React5.com",
-  "license": "MIT",
-  "peerDependencies": {
-    "react": ">=19",
-    "react-dom": ">=19",
-    "clsx": "^2.1.1",
-    "@react5/bem": "^0.4.3",
-    "i18next": ">=23",
-    "react-i18next": ">=15",
-    "react-icons": ">=5",
-    "react-router": ">=7",
-    "@react5/time-span": "^0.3.34"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.27.4",
-    "@babel/eslint-parser": "^7.27.5",
-    "@babel/plugin-transform-runtime": "^7.27.4",
-    "@babel/preset-env": "^7.27.2",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
-    "@babel/runtime": "^7.27.6",
-    "@testing-library/react": "^16.3.0",
-    "@types/jest": "^30.0.0",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@typescript-eslint/eslint-plugin": "^8.34.1",
-    "@typescript-eslint/parser": "^8.34.1",
-    "eslint": "^9.29.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-prettier": "^5.5.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "jest": "^30.0.2",
-    "prettier": "^3.5.3",
-    "prettier-eslint": "^16.4.2",
-    "prettier-eslint-cli": "^8.0.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "babel-jest": "^30.0.2",
-    "ts-jest": "^29.4.0",
-    "typescript": "^5.8.3",
-    "clsx": "^2.1.1",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.6",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-terser": "^0.4.4",
-    "rollup-plugin-copy": "^3.5.0",
-    "@rollup/plugin-json": "^6.1.0",
-    "@svgr/rollup": "^8.1.0",
-    "@react5/bundle-sass": "^0.5.8",
-    "postcss": "^8.5.6",
-    "rollup": "^4.44.0",
-    "jest-environment-jsdom": "^30.0.2",
-    "npm-run-all": "^4.1.5",
-    "sass-embedded": "^1.89.2",
-    "i18next": "^25.2.1",
-    "react-i18next": "^15.5.3",
-    "react-icons": "^5.5.0",
-    "react-router": "^7.6.2",
-    "@react5/time-span": "^0.3.35",
-    "@chromatic-com/storybook": "^4.0.1",
-    "@storybook/addon-links": "^9.0.12",
-    "@storybook/addon-onboarding": "^9.0.12",
-    "@storybook/react": "^9.0.12",
-    "@storybook/react-vite": "^9.0.12",
-    "@vitejs/plugin-react": "^4.5.2",
-    "eslint-plugin-storybook": "^9.0.12",
-    "storybook": "^9.0.12",
-    "vite": "^6.3.5",
-    "plop": "^4.0.1",
-    "@testing-library/dom": "^10.4.0",
-    "identity-obj-proxy": "^3.0.0",
-    "vite-plugin-svgr": "^4.3.0"
-  },
-  "scripts": {
-    "build": "npm-run-all tsc rollup",
-    "rollup": "rollup -c --filterLogs '!message:*__PURE__*'",
-    "clean": "rimraf build",
-    "watch": "rollup -c -w --filterLogs '!message:*__PURE__*'",
-    "dev": "npm-run-all --parallel tsc-watch watch",
-    "dev-watch": "npm-run-all --parallel tsc-watch watch",
-    "tsc": "tsc -b",
-    "tsc-watch": "tsc -b --watch",
-    "lint": "eslint \"src/**\" --ext .ts --ext .tsx",
-    "test": "jest",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "plop": "plop"
-  }
-}
+{
+  "name": "@react5/lib",
+  "version": "0.1.1",
+  "description": "React library starter.",
+  "main": "dist/index.js",
+  "type": "module",
+  "module": "dist/esm/index.esm.js",
+  "types": "dist/types/index.d.ts",
+  "style": "dist/index.css",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/react5/ui.git"
+  },
+  "author": "React5.com",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "clsx": "^2.1.1",
+    "@react5/bem": "^0.4.3",
+    "i18next": ">=23",
+    "react-i18next": ">=15",
+    "react-icons": ">=5",
+    "react-router": ">=7",
+    "@react5/time-span": "^0.3.34"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.6",
+    "@babel/eslint-parser": "^7.28.6",
+    "@babel/plugin-transform-runtime": "^7.28.5",
+    "@babel/preset-env": "^7.28.6",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@babel/runtime": "^7.28.6",
+    "@testing-library/react": "^16.3.1",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.53.0",
+    "@typescript-eslint/parser": "^8.53.0",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "jest": "^30.2.0",
+    "prettier": "^3.8.0",
+    "prettier-eslint": "^16.4.2",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "babel-jest": "^30.2.0",
+    "ts-jest": "^29.4.6",
+    "typescript": "^5.9.3",
+    "clsx": "^2.1.1",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "rollup-plugin-copy": "^3.5.0",
+    "@rollup/plugin-json": "^6.1.0",
+    "@svgr/rollup": "^8.1.0",
+    "@react5/bundle-sass": "^0.5.9",
+    "postcss": "^8.5.6",
+    "rollup": "^4.55.1",
+    "jest-environment-jsdom": "^30.2.0",
+    "npm-run-all": "^4.1.5",
+    "sass-embedded": "^1.97.2",
+    "i18next": "^25.7.4",
+    "react-i18next": "^16.5.3",
+    "react-icons": "^5.5.0",
+    "react-router": "^7.12.0",
+    "@react5/time-span": "^0.3.36",
+    "@storybook/addon-links": "^10.1.11",
+    "@storybook/addon-onboarding": "^10.1.11",
+    "@storybook/react": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
+    "@vitejs/plugin-react": "^5.1.2",
+    "eslint-plugin-storybook": "^10.1.11",
+    "storybook": "^10.1.11",
+    "vite": "^7.3.1",
+    "plop": "^4.0.4",
+    "@testing-library/dom": "^10.4.1",
+    "identity-obj-proxy": "^3.0.0",
+    "vite-plugin-svgr": "^4.5.0"
+  },
+  "scripts": {
+    "build": "npm-run-all tsc rollup",
+    "rollup": "rollup -c --filterLogs '!message:*__PURE__*'",
+    "clean": "rimraf build",
+    "watch": "rollup -c -w --filterLogs '!message:*__PURE__*'",
+    "dev": "npm-run-all --parallel tsc-watch watch",
+    "dev-watch": "npm-run-all --parallel tsc-watch watch",
+    "tsc": "tsc -b",
+    "tsc-watch": "tsc -b --watch",
+    "lint": "eslint \"src/**\" --ext .ts --ext .tsx",
+    "test": "jest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "plop": "plop"
+  }
+}

package/packages/lib/plop/component/index.js

@@ -1,44 +1,44 @@
-export default function (plop) {
-	// component generator
-	plop.setGenerator('component', {
-		description: 'A design system component',
-		prompts: [{
-			type: 'input',
-			name: 'name',
-			message: 'name:'
-		}],
-		actions: [{
-			type: 'add',
-			path: 'src/components/{{pascalCase name}}/index.tsx',
-			templateFile: 'plop/templates/component/index.hbs'
-		},
-    {
-			type: 'add',
-			path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.tsx',
-			templateFile: 'plop/templates/component/component.hbs'
-		},
-    {
-			type: 'add',
-			path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.scss',
-			templateFile: 'plop/templates/component/style.hbs'
-		},
-    {
-			type: 'add',
-			path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.test.tsx',
-			templateFile: 'plop/templates/component/test.hbs'
-		},
-    {
-			type: 'add',
-			path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.stories.tsx',
-			templateFile: 'plop/templates/component/stories.hbs'
-		},
-    
-
-    {
-      type: 'append',
-      path: 'src/components/index.tsx',
-      template: "export * from './{{pascalCase name}}'"
-    },
-    ]
-  });
+export default function (plop) {
+	// component generator
+	plop.setGenerator('component', {
+		description: 'A design system component',
+		prompts: [{
+			type: 'input',
+			name: 'name',
+			message: 'name:'
+		}],
+		actions: [{
+			type: 'add',
+			path: 'src/components/{{pascalCase name}}/index.tsx',
+			templateFile: 'plop/templates/component/index.hbs'
+		},
+    {
+			type: 'add',
+			path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.tsx',
+			templateFile: 'plop/templates/component/component.hbs'
+		},
+    {
+			type: 'add',
+			path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.scss',
+			templateFile: 'plop/templates/component/style.hbs'
+		},
+    {
+			type: 'add',
+			path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.test.tsx',
+			templateFile: 'plop/templates/component/test.hbs'
+		},
+    {
+			type: 'add',
+			path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.stories.tsx',
+			templateFile: 'plop/templates/component/stories.hbs'
+		},
+    
+
+    {
+      type: 'append',
+      path: 'src/components/index.tsx',
+      template: "export * from './{{pascalCase name}}'"
+    },
+    ]
+  });
 };

package/packages/lib/plop/index.js

@@ -1,4 +1,4 @@
-import component from './component/index.js'
-export default function (plop) {
-	component(plop);
+import component from './component/index.js'
+export default function (plop) {
+	component(plop);
 };

package/packages/lib/plop/templates/component/component.hbs

@@ -1,20 +1,20 @@
-import { FormEvent, ReactNode } from 'react';
-import './{{pascalCase name}}.scss'
-import clsx from 'clsx';
-import { bem } from "../../utils/bem";
-
-interface {{pascalCase name}}Props {
-  onClick?: (e?: FormEvent<HTMLButtonElement>) => void;
-  disabled?: boolean;
-  className?: string;
-  children: ReactNode;
-}
-const b = bem("{{dashCase name}}");
-export const {{pascalCase name}} = ({children, onClick, className}: {{pascalCase name}}Props) => {
-  return (
-    <div className={clsx(b(), className)} onClick={onClick}>
-      {children}
-    </div>
-  )
-}
+import { FormEvent, ReactNode } from 'react';
+import './{{pascalCase name}}.scss'
+import clsx from 'clsx';
+import { bem } from "../../utils/bem";
+
+interface {{pascalCase name}}Props {
+  onClick?: (e?: FormEvent<HTMLButtonElement>) => void;
+  disabled?: boolean;
+  className?: string;
+  children: ReactNode;
+}
+const b = bem("{{dashCase name}}");
+export const {{pascalCase name}} = ({children, onClick, className}: {{pascalCase name}}Props) => {
+  return (
+    <div className={clsx(b(), className)} onClick={onClick}>
+      {children}
+    </div>
+  )
+}
 export default {{pascalCase name}}

package/packages/lib/plop/templates/component/index.hbs

@@ -1 +1 @@
-export * from "./{{pascalCase name}}";
+export * from "./{{pascalCase name}}";

package/packages/lib/plop/templates/component/stories.hbs

@@ -1,17 +1,17 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { {{pascalCase name}} } from './{{pascalCase name}}';
-
-const meta: Meta<typeof {{pascalCase name}}> = {
-  title: 'Example/{{pascalCase name}}',
-  component: {{pascalCase name}},
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} as Meta;
-export default meta;
-
-type Story = StoryObj<typeof {{pascalCase name}}>;
-
-export const Text{{pascalCase name}}: Story = {
-  render: () => <{{pascalCase name}}>Test</{{pascalCase name}}>,
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { {{pascalCase name}} } from './{{pascalCase name}}';
+
+const meta: Meta<typeof {{pascalCase name}}> = {
+  title: 'Example/{{pascalCase name}}',
+  component: {{pascalCase name}},
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as Meta;
+export default meta;
+
+type Story = StoryObj<typeof {{pascalCase name}}>;
+
+export const Text{{pascalCase name}}: Story = {
+  render: () => <{{pascalCase name}}>Test</{{pascalCase name}}>,
+};

package/packages/lib/plop/templates/component/style.hbs

@@ -1,2 +1,2 @@
-.r5ui-{{dashCase name}} {
+.r5ui-{{dashCase name}} {
 }

package/packages/lib/plop/templates/component/test.hbs

@@ -1,12 +1,12 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { {{pascalCase name}} } from './{{pascalCase name}}';
-
-describe('{{pascalCase name}} Component', () => {
-  test('renders the button with the correct label', () => {
-    render(<{{pascalCase name}} onClick={jest.fn()} >Test</{{pascalCase name}}>);
-    const div = screen.getByRole('{{pascalCase name}}', { name: /click me/i });
-    expect(div).toBeInTheDocument();
-  });
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { {{pascalCase name}} } from './{{pascalCase name}}';
+
+describe('{{pascalCase name}} Component', () => {
+  test('renders the button with the correct label', () => {
+    render(<{{pascalCase name}} onClick={jest.fn()} >Test</{{pascalCase name}}>);
+    const div = screen.getByRole('{{pascalCase name}}', { name: /click me/i });
+    expect(div).toBeInTheDocument();
+  });
 });

package/packages/lib/plopfile.js

@@ -1 +1 @@
-export { default } from './plop/index.js';
+export { default } from './plop/index.js';

package/packages/lib/rollup.config.mjs

@@ -1,64 +1,64 @@
-import pkg from "./package.json" with { type: "json" };
-
-import { babel } from "@rollup/plugin-babel";
-import terser from "@rollup/plugin-terser";
-import resolve from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import bundleSass from "@react5/bundle-sass";
-import json from '@rollup/plugin-json';
-import svgr from '@svgr/rollup';
-
-const production = !process.env.ROLLUP_WATCH;
-process.env.NODE_ENV = production ? 'production' : '';
-const extensions = [".js", ".jsx", ".ts", ".tsx", ".json", ".svg", ];
-const external = [
-  ...Object.keys(pkg.peerDependencies || {}),
-  ...Object.keys(pkg.dependencies || {}),
-  "@babel/runtime",
-  "react/jsx-runtime"
-];
-
-const pathsToWatch =[ 'src/**' ];
-
-export default [
-  {
-    input: "./src/index.tsx",
-    output: [
-      {
-        file: pkg.main,
-        format: "cjs",
-        exports: "named",
-        sourcemap: !production,
-        //inlineDynamicImports: true,
-      },
-      {
-        file: pkg.module,
-        format: "es",
-        exports: "named",
-        sourcemap: !production,
-        //inlineDynamicImports: true,
-      },
-    ],
-    external,
-    plugins: [
-      resolve({
-        extensions,
-      }),
-      json(),
-      svgr(),
-      commonjs(),
-      babel({
-        exclude: /^(.+\/)?node_modules\/.+$/,
-        extensions,
-        babelHelpers: "runtime",
-        sourcemap: !production,
-        skipPreflightCheck: true
-      }),
-      bundleSass({scssOnly: false}),
-      production && terser(),
-    ],
-    watch: {
-      paths: pathsToWatch
-    }
-  }
-];
+import pkg from "./package.json" with { type: "json" };
+
+import { babel } from "@rollup/plugin-babel";
+import terser from "@rollup/plugin-terser";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import bundleSass from "@react5/bundle-sass";
+import json from '@rollup/plugin-json';
+import svgr from '@svgr/rollup';
+
+const production = !process.env.ROLLUP_WATCH;
+process.env.NODE_ENV = production ? 'production' : '';
+const extensions = [".js", ".jsx", ".ts", ".tsx", ".json", ".svg", ];
+const external = [
+  ...Object.keys(pkg.peerDependencies || {}),
+  ...Object.keys(pkg.dependencies || {}),
+  "@babel/runtime",
+  "react/jsx-runtime"
+];
+
+const pathsToWatch =[ 'src/**' ];
+
+export default [
+  {
+    input: "./src/index.tsx",
+    output: [
+      {
+        file: pkg.main,
+        format: "cjs",
+        exports: "named",
+        sourcemap: !production,
+        //inlineDynamicImports: true,
+      },
+      {
+        file: pkg.module,
+        format: "es",
+        exports: "named",
+        sourcemap: !production,
+        //inlineDynamicImports: true,
+      },
+    ],
+    external,
+    plugins: [
+      resolve({
+        extensions,
+      }),
+      json(),
+      svgr(),
+      commonjs(),
+      babel({
+        exclude: /^(.+\/)?node_modules\/.+$/,
+        extensions,
+        babelHelpers: "runtime",
+        sourcemap: !production,
+        skipPreflightCheck: true
+      }),
+      bundleSass({scssOnly: false}),
+      production && terser(),
+    ],
+    watch: {
+      paths: pathsToWatch
+    }
+  }
+];