Migrate twenty UI

nx.json

@@ -279,5 +279,6 @@
   "defaultBase": "main",
   "tui": {
     "enabled": false
-  }
+  },
+  "analytics": false
 }

packages/twenty-ui/.size-limit.json

@@ -18,42 +18,42 @@
   {
     "name": "testing",
     "path": "dist/testing.mjs",
-    "limit": "10 kB"
+    "limit": "188 kB"
   },
   {
     "name": "components",
     "path": "dist/components.mjs",
-    "limit": "40 kB"
+    "limit": "209 kB"
   },
   {
     "name": "display",
     "path": "dist/display.mjs",
-    "limit": "30 kB"
+    "limit": "509 kB"
   },
   {
     "name": "feedback",
     "path": "dist/feedback.mjs",
-    "limit": "20 kB"
+    "limit": "164 kB"
   },
   {
     "name": "input",
     "path": "dist/input.mjs",
-    "limit": "50 kB"
+    "limit": "278 kB"
   },
   {
     "name": "layout",
     "path": "dist/layout.mjs",
-    "limit": "20 kB"
+    "limit": "230 kB"
   },
   {
     "name": "navigation",
     "path": "dist/navigation.mjs",
-    "limit": "20 kB"
+    "limit": "219 kB"
   },
   {
     "name": "json-visualizer",
     "path": "dist/json-visualizer.mjs",
-    "limit": "30 kB"
+    "limit": "173 kB"
   },
   {
     "name": "theme",
@@ -68,7 +68,7 @@
   {
     "name": "utilities",
     "path": "dist/utilities.mjs",
-    "limit": "10 kB"
+    "limit": "217 kB"
   },
   {
     "name": "style.css",

packages/twenty-ui/.storybook/preview.tsx

@@ -1,7 +1,7 @@
 import { type Preview } from '@storybook/react-vite';
-import '@new-ui/theme-constants/theme-light.css';
-import '@new-ui/theme-constants/theme-dark.css';
-import { ThemeProvider } from '@new-ui/theme-constants';
+import '@ui/theme-constants/theme-light.css';
+import '@ui/theme-constants/theme-dark.css';
+import { ThemeProvider } from '@ui/theme-constants';
 
 const preview: Preview = {
   tags: ['autodocs'],

packages/twenty-ui/.storybook/vitest.setup.ts

@@ -1,3 +1,4 @@
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
 import { setProjectAnnotations } from '@storybook/react-vite';
 import { MotionGlobalConfig } from 'framer-motion';
 import * as projectAnnotations from './preview';
@@ -9,4 +10,6 @@ import * as projectAnnotations from './preview';
 MotionGlobalConfig.skipAnimations = true;
 
 // Apply Storybook's preview configuration to Vitest runs.
-setProjectAnnotations([projectAnnotations]);
+// The a11y addon annotations register the axe afterEach hook so that
+// parameters.a11y.test = 'error' (set in preview.tsx) actually gates tests.
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

packages/twenty-ui/package.json

@@ -1,6 +1,25 @@
 {
   "name": "twenty-ui",
   "version": "0.1.0",
+  "description": "Twenty's shared React UI component library.",
+  "license": "AGPL-3.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/twentyhq/twenty.git",
+    "directory": "packages/twenty-ui"
+  },
+  "homepage": "https://twenty.com",
+  "bugs": "https://github.com/twentyhq/twenty/issues",
+  "keywords": [
+    "twenty",
+    "ui",
+    "react",
+    "components",
+    "design-system"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "style": "./dist/style.css",
@@ -50,6 +69,7 @@
     "@base-ui/react": "^1.5.0",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/colors": "^3.0.0",
+    "@sniptt/guards": "^0.2.0",
     "@tabler/icons-react": "^3.31.0",
     "clsx": "^2.1.1",
     "date-fns": "^2.30.0",
@@ -61,7 +81,6 @@
     "react-dom": "^18.2.0",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.4.4",
-    "twenty-shared": "workspace:*",
     "zod": "^4.1.11"
   },
   "peerDependencies": {

packages/twenty-ui/src/accessibility/components/VisibilityHidden.module.scss

@@ -0,0 +1,11 @@
+.root {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

packages/twenty-ui/src/accessibility/components/VisibilityHidden.module.scss.d.ts

@@ -0,0 +1,4 @@
+declare const classNames: {
+  readonly root: 'root';
+};
+export default classNames;

packages/twenty-ui/src/accessibility/components/VisibilityHidden.tsx

@@ -0,0 +1,9 @@
+import styles from './VisibilityHidden.module.scss';
+
+export const VisibilityHidden = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  return <span className={styles.root}>{children}</span>;
+};

packages/twenty-ui/src/accessibility/components/VisibilityHiddenInput.module.scss

@@ -0,0 +1,11 @@
+.root {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

packages/twenty-ui/src/accessibility/components/VisibilityHiddenInput.module.scss.d.ts

@@ -0,0 +1,4 @@
+declare const classNames: {
+  readonly root: 'root';
+};
+export default classNames;

packages/twenty-ui/src/accessibility/components/VisibilityHiddenInput.tsx

@@ -0,0 +1,16 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+
+import styles from './VisibilityHiddenInput.module.scss';
+
+// The deprecated Linaria styled.input forwarded refs and accepted all native
+// input props, so the port preserves that contract.
+export const VisibilityHiddenInput = forwardRef<
+  HTMLInputElement,
+  React.ComponentPropsWithoutRef<'input'>
+>(({ className, ...props }, ref) => (
+  // oxlint-disable-next-line react/jsx-props-no-spreading
+  <input ref={ref} className={clsx(styles.root, className)} {...props} />
+));
+
+VisibilityHiddenInput.displayName = 'VisibilityHiddenInput';

packages/twenty-ui/src/accessibility/index.ts

@@ -7,4 +7,6 @@
  *                              |___/
  */
 
-export {};
+export { VisibilityHidden } from './components/VisibilityHidden';
+export { VisibilityHiddenInput } from './components/VisibilityHiddenInput';
+export { VISIBILITY_HIDDEN } from './utils/visibility-hidden';

packages/twenty-ui/src/accessibility/utils/visibility-hidden.ts

@@ -0,0 +1,11 @@
+export const VISIBILITY_HIDDEN = `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+`;