@mindlogic-ai/logician-ui 4.0.0-alpha.9 → 5.0.0-alpha.0

package/eslint/rules/no-deprecated-tokens.js

@@ -0,0 +1,128 @@
+/**
+ * logician-ui/no-deprecated-tokens
+ *
+ * Warns on 4.x colour token names that 5.0 keeps only as deprecated aliases
+ * (`primary.lightest`, `danger.main`, `slate.800`, `var(--chakra-colors-slate-300)` …)
+ * and on the 4.x raw primitives 5.0 removed (`blue.500`, `gray.300`, …), and
+ * names the replacement. The aliases are removed in 6.0.
+ *
+ * The mapping is read from src/theme/deprecatedColorTokens.json — the same
+ * file the theme builds its aliases from and the 5.0 codemod renames with — so
+ * the three cannot disagree.
+ *
+ * Options: [{ removedPrimitives: boolean }] (default true).
+ */
+'use strict';
+
+const data = require('../../src/theme/deprecatedColorTokens.json');
+
+const ALIASES = data.aliases;
+const GRAY = data.removedPrimitives.gray;
+const FAMILIES = data.removedPrimitives.families;
+
+const esc = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+// Token path → Chakra's CSS variable name: dots → dashes, camelCase →
+// kebab-case (`primary.fillStrong` → `primary-fill-strong`), as Chakra's
+// `dashCase` does. Used for the names we match and the names we suggest.
+const kebab = (s) =>
+  s.replace(/\./g, '-').replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+const byLength = (a, b) => b.length - a.length;
+const keys = Object.keys(ALIASES).sort(byLength);
+const dotted = keys.map(esc).join('|');
+const dashedToKey = new Map(keys.map((k) => [kebab(k), k]));
+const dashed = [...dashedToKey.keys()].sort(byLength).map(esc).join('|');
+const fam = FAMILIES.map(esc).join('|');
+const famDashedToName = new Map(FAMILIES.map((f) => [kebab(f), f]));
+const famDashed = [...famDashedToName.keys()].sort(byLength).map(esc).join('|');
+// A name must not be part of a longer path: `primary.light` ≠ `primary.lighter`,
+// `slate.100` ≠ `slate.1000`, `foo.primary.light` and `fg.default` are not
+// touched. Exception: Chakra token references carry a `colors.` prefix —
+// `{colors.success.main}`, `token('colors.success.main')`, a string that is
+// exactly `'colors.success.main'` — so `colors.` is accepted when it starts
+// the string or follows `{`, a quote or `token(`. Same as codemods/5.0/token-renames.js.
+const PREFIX = `(?:(?<=^|[{'"\`]|token\\()(colors\\.)|(?<![\\w.-]))`;
+const ALIAS_RE = new RegExp(
+  `${PREFIX}(${dotted})(?![\\w-])|--chakra-colors-(${dashed})(?![\\w-])`,
+  'g'
+);
+const PRIMITIVE_RE = new RegExp(
+  `${PREFIX}(${fam})\\.(\\d+)(?![\\w.-])|--chakra-colors-(${famDashed})-(\\d+)(?![\\w-])`,
+  'g'
+);
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Disallow logician-ui 4.x colour token names that are deprecated or removed in 5.0',
+      url: 'https://github.com/mindlogic-ai/logician-ui/blob/dev/MIGRATION-5.0.md',
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: { removedPrimitives: { type: 'boolean' } },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      deprecated:
+        "'{{name}}' is a deprecated logician-ui 4.x token (removed in 6.0). Use '{{replacement}}'. Run the 5.0 codemod to migrate.",
+      primitive:
+        "'{{name}}' is a 4.x raw primitive that logician-ui 5.0 removed — it now falls through to Chakra's default palette. {{hint}}",
+    },
+  },
+  create(context) {
+    const opts = context.options[0] || {};
+    const checkPrimitives = opts.removedPrimitives !== false;
+
+    const check = (node, text) => {
+      if (typeof text !== 'string' || text.length === 0) return;
+      for (const m of text.matchAll(ALIAS_RE)) {
+        const key = m[2] || dashedToKey.get(m[3]);
+        const replacement = m[2]
+          ? `${m[1] || ''}${ALIASES[key]}`
+          : `var(--chakra-colors-${kebab(ALIASES[key])})`;
+        context.report({
+          node,
+          messageId: 'deprecated',
+          data: { name: m[0], replacement },
+        });
+      }
+      if (!checkPrimitives) return;
+      for (const m of text.matchAll(PRIMITIVE_RE)) {
+        const family = m[2] || famDashedToName.get(m[4]);
+        const step = m[3] || m[5];
+        const to = GRAY[step];
+        const grayRepl =
+          family === 'gray' && to
+            ? m[2]
+              ? `${m[1] || ''}${to}`
+              : `var(--chakra-colors-${kebab(to)})`
+            : null;
+        const hint = grayRepl
+          ? `Use '${grayRepl}'.`
+          : 'Use a semantic token (primary.*, neutral.N, a status family, category.*) — see MIGRATION-5.0.md.';
+        context.report({
+          node,
+          messageId: 'primitive',
+          data: { name: m[0], hint },
+        });
+      }
+    };
+
+    return {
+      Literal(node) {
+        // Type-level unions (`type T = 'slate.800' | …`) are not style usages.
+        if (node.parent && node.parent.type === 'TSLiteralType') return;
+        if (typeof node.value === 'string') check(node, node.value);
+      },
+      TemplateElement(node) {
+        const p = node.parent && node.parent.parent;
+        if (p && p.type === 'TSLiteralType') return;
+        check(node, node.value && node.value.cooked);
+      },
+    };
+  },
+};

package/eslint/rules/no-deprecated-tokens.test.ts

@@ -0,0 +1,130 @@
+/**
+ * RuleTester suite for logician-ui/no-deprecated-tokens.
+ *
+ * Run: npx vitest run --config codemods/vitest.config.ts
+ * (that config includes eslint/**\/*.test.ts — Node-only, like the codemods).
+ */
+import { createRequire } from 'module';
+import { afterAll, describe, it } from 'vitest';
+
+const require = createRequire(import.meta.url);
+const { RuleTester } = require('eslint');
+const rule = require('./no-deprecated-tokens');
+
+RuleTester.describe = describe;
+RuleTester.it = it;
+RuleTester.itOnly = it.only;
+RuleTester.afterAll = afterAll;
+
+const tester = new RuleTester({
+  parser: require.resolve('@typescript-eslint/parser'),
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+    ecmaFeatures: { jsx: true },
+  },
+});
+
+const deprecated = (name: string, replacement: string) => ({
+  messageId: 'deprecated',
+  data: { name, replacement },
+});
+
+tester.run('no-deprecated-tokens', rule, {
+  valid: [
+    // 5.0 names
+    "const a = 'primary.wash';",
+    "const a = 'var(--chakra-colors-primary-wash-active)';",
+    "const a = '{colors.success.solid}';",
+    // Neighbours that only look like a deprecated name
+    "const a = 'primary.lighter2';",
+    "const a = 'slate.8000';",
+    "const a = 'foo.primary.light';",
+    "const a = 'theme.colors.primary.light';",
+    "const a = 'x colors.primary.light';",
+    "const a = 'var(--chakra-colors-slate-3000)';",
+    "const a = 'fg.default';",
+    // Type-level literals are not style usages
+    "type T = 'slate.800' | 'primary.light';",
+    'type T = `primary.lighter`;',
+    // removedPrimitives: false turns primitive warnings off
+    { code: "const a = 'blue.500';", options: [{ removedPrimitives: false }] },
+  ],
+  invalid: [
+    {
+      code: "const a = 'primary.lightest';",
+      errors: [deprecated('primary.lightest', 'primary.wash')],
+    },
+    {
+      code: '<Box bg="slate.800" />',
+      errors: [deprecated('slate.800', 'neutral.9')],
+    },
+    // Dashed CSS variable: matched kebab-case, replacement suggested kebab-case
+    {
+      code: "const a = 'var(--chakra-colors-primary-lighter)';",
+      errors: [
+        deprecated(
+          '--chakra-colors-primary-lighter',
+          'var(--chakra-colors-primary-wash-active)'
+        ),
+      ],
+    },
+    {
+      code: "const a = 'var(--chakra-colors-primary-fill-strong)';",
+      errors: [
+        deprecated(
+          '--chakra-colors-primary-fill-strong',
+          'var(--chakra-colors-primary-hover)'
+        ),
+      ],
+    },
+    // Chakra token references with a colors. prefix keep the prefix
+    {
+      code: "const a = '{colors.success.main}';",
+      errors: [deprecated('colors.success.main', 'colors.success.solid')],
+    },
+    {
+      code: "const a = 'color-mix(in oklab, {colors.warning.fill} 70%, black)';",
+      errors: [deprecated('colors.warning.fill', 'colors.warning.solid')],
+    },
+    {
+      code: "const a = token('colors.danger.main');",
+      errors: [deprecated('colors.danger.main', 'colors.danger.solid')],
+    },
+    {
+      code: "const a = '{colors.grayDark.200}';",
+      errors: [{ messageId: 'primitive' }],
+    },
+    {
+      code: "const a = 'var(--chakra-colors-gray-dark-200)';",
+      errors: [{ messageId: 'primitive' }],
+    },
+    {
+      code: "const a = '{colors.gray.300}';",
+      errors: [
+        {
+          messageId: 'primitive',
+          data: {
+            name: 'colors.gray.300',
+            hint: "Use 'colors.neutral.5'.",
+          },
+        },
+      ],
+    },
+    // Template literal quasis
+    {
+      code: 'const a = `1px solid var(--chakra-colors-slate-300) ${x} {colors.danger.main}`;',
+      errors: [
+        deprecated(
+          '--chakra-colors-slate-300',
+          'var(--chakra-colors-neutral-5)'
+        ),
+        deprecated('colors.danger.main', 'colors.danger.solid'),
+      ],
+    },
+    {
+      code: "const a = 'blue.500';",
+      errors: [{ messageId: 'primitive' }],
+    },
+  ],
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "4.0.0-alpha.9",
+  "version": "5.0.0-alpha.0",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -15,11 +15,21 @@
       "types": "./dist/icons.d.ts",
       "import": "./dist/icons.mjs",
       "require": "./dist/icons.js"
-    }
+    },
+    "./styles": {
+      "types": "./dist/styles.d.ts",
+      "import": "./dist/styles.mjs",
+      "require": "./dist/styles.js"
+    },
+    "./eslint": "./eslint/index.js",
+    "./codemods/5.0/*": "./codemods/5.0/*"
   },
   "files": [
     "dist",
     "src",
+    "eslint",
+    "codemods",
+    "MIGRATION-5.0.md",
     "README.md",
     "USAGE.md"
   ],
@@ -32,10 +42,12 @@
     "build": "rollup -c rollup.config.mjs",
     "build:watch": "rollup -c rollup.config.mjs --watch",
     "prepublishOnly": "yarn build",
-    "lint": "eslint src --ext .ts,.tsx && yarn run check-exports",
-    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "lint": "eslint --rulesdir eslint/rules src --ext .ts,.tsx && yarn run check-exports",
+    "lint:fix": "eslint --rulesdir eslint/rules src --ext .ts,.tsx --fix",
     "type-check": "tsc --noEmit",
-    "test": "vitest run",
+    "test": "vitest run && vitest run --config codemods/vitest.config.ts && node scripts/palette/generate.mjs --check",
+    "test:codemods": "vitest run --config codemods/vitest.config.ts",
+    "palette:check": "node scripts/palette/generate.mjs --check",
     "test:watch": "vitest",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -48,6 +60,7 @@
     "check-exports": "node check-component-exports.js"
   },
   "peerDependencies": {
+    "@ark-ui/react": "^5.39.0",
     "@chakra-ui/react": "^3.3.0",
     "@emotion/react": "^11.11.0",
     "next": "^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
@@ -71,7 +84,6 @@
     "next-themes": "^0.4.6",
     "polished": "^4.3.0",
     "react-markdown": "^10.1.0",
-    "react-pin-input": "^1.3.0",
     "recharts": "^3.1.2",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
@@ -82,6 +94,7 @@
     "shiki": "^1.22.0"
   },
   "devDependencies": {
+    "@ark-ui/react": "5.39.0",
     "@chakra-ui/react": "^3.3.0",
     "@changesets/cli": "^2.27.0",
     "@emotion/react": "^11.11.0",
@@ -98,12 +111,14 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
+    "@types/jscodeshift": "^17.3.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@types/svgo": "^3.0.0",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.0",
+    "axe-core": "^4.13.0",
     "eslint": "^8.45.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
@@ -115,6 +130,8 @@
     "eslint-plugin-unused-imports": "^4.2.0",
     "formik": "^2.4.9",
     "framer-motion": "^10.0.0",
+    "jscodeshift": "^17.3.0",
+    "jsdom": "^25.0.0",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "react": "^18.0.0",
@@ -127,10 +144,9 @@
     "svgo": "^4.0.0",
     "tsc-alias": "^1.8.0",
     "typescript": "^5.2.0",
-    "jsdom": "^25.0.0",
     "vite": "^5.0.0",
-    "vitest": "^3.2.4",
     "vite-plugin-svgr": "^4.3.0",
+    "vitest": "^3.2.4",
     "yup": "^1.7.1"
   },
   "keywords": [

package/src/components/Accordion/Accordion.presence.test.tsx

@@ -0,0 +1,54 @@
+import { Accordion as ChakraAccordion, ChakraProvider } from '@chakra-ui/react';
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { Accordion } from './Accordion';
+
+/**
+ * Accordion content runs the same height animation as Collapsible, so it gets
+ * the same clock (300 in / 150 out) instead of Chakra's symmetric 200 / 200,
+ * and keeps the recipe's own `expand-height` name.
+ */
+const rulesFor = (el: Element) => {
+  const css = Array.from(document.querySelectorAll('style'))
+    .map((s) => s.textContent ?? '')
+    .join('\n');
+  return el.className
+    .split(' ')
+    .filter((c) => c.startsWith('css-'))
+    .flatMap((c) => [
+      ...css.matchAll(new RegExp(`\\.${c}[^{]*\\{([^}]*)\\}`, 'g')),
+    ])
+    .map((m) => m[1])
+    .join('\n');
+};
+
+describe('Accordion presence timing', () => {
+  it('opens on motion.base and closes on fast, keeping the height keyframes', () => {
+    const { container } = render(
+      <ChakraProvider value={system}>
+        <Accordion defaultValue={['a']}>
+          <ChakraAccordion.Item value="a">
+            <ChakraAccordion.ItemTrigger>A</ChakraAccordion.ItemTrigger>
+            <ChakraAccordion.ItemContent>
+              <ChakraAccordion.ItemBody>body</ChakraAccordion.ItemBody>
+            </ChakraAccordion.ItemContent>
+          </ChakraAccordion.Item>
+        </Accordion>
+      </ChakraProvider>
+    );
+    const rules = rulesFor(
+      container.querySelector('[data-part="item-content"]')!
+    );
+
+    expect(rules).toContain(
+      'animation-duration:var(--chakra-durations-motion-base)'
+    );
+    expect(rules).toContain('animation-duration:var(--chakra-durations-fast)');
+    expect(rules).not.toContain(
+      'animation-duration:var(--chakra-durations-moderate)'
+    );
+    expect(rules).toContain('expand-height');
+  });
+});

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { Box, Flex, Text } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Accordion, AccordionButton, AccordionItem, AccordionPanel } from '.';
 
@@ -172,26 +172,30 @@ export const WithCustomContent: Story = {
   },
   render: (args) => {
     return (
-      <Accordion {...args} borderColor="red.500">
+      <Accordion {...args} borderColor="danger.border">
         <AccordionItem value="errors">
-          <AccordionButton bg="red.50" p={3} borderBottomColor="red.500">
+          <AccordionButton
+            bg="danger.bg"
+            p={3}
+            borderBottomColor="danger.border"
+          >
             <Flex align="center" gap={2}>
               <Box
                 as="span"
                 fontSize="xl"
-                color="red.500"
+                color="danger.fg"
                 aria-label="Error icon"
               >
                 ⚠️
               </Box>
-              <Text fontWeight="bold" color="gray.800">
+              <Text fontWeight="bold" color="fg.default">
                 Failed Upload Rows (3 errors)
               </Text>
             </Flex>
           </AccordionButton>
           <AccordionPanel p={4}>
-            <Box bg="gray.50" p={4} borderRadius="md">
-              <Text fontSize="sm" color="gray.700" mb={2}>
+            <Box bg="bg.subtle" p={4} borderRadius="md">
+              <Text fontSize="sm" color="fg.muted" mb={2}>
                 This heavy content is lazy-loaded only when expanded
               </Text>
               <Box as="ul" pl={4}>
@@ -203,24 +207,28 @@ export const WithCustomContent: Story = {
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem value="warnings">
-          <AccordionButton bg="yellow.50" p={3} borderBottomColor="yellow.500">
+          <AccordionButton
+            bg="warning.bg"
+            p={3}
+            borderBottomColor="warning.border"
+          >
             <Flex align="center" gap={2}>
               <Box
                 as="span"
                 fontSize="xl"
-                color="yellow.600"
+                color="warning.fg"
                 aria-label="Warning icon"
               >
                 ⚡
               </Box>
-              <Text fontWeight="bold" color="gray.800">
+              <Text fontWeight="bold" color="fg.default">
                 Warning Messages (2 warnings)
               </Text>
             </Flex>
           </AccordionButton>
           <AccordionPanel p={4}>
-            <Box bg="gray.50" p={4} borderRadius="md">
-              <Text fontSize="sm" color="gray.700">
+            <Box bg="bg.subtle" p={4} borderRadius="md">
+              <Text fontSize="sm" color="fg.muted">
                 Content is mounted when expanded and unmounted when collapsed
                 (check React DevTools)
               </Text>