FE-518: Add Storybook and update build/lint setup for refractive

libs/@hashintel/ds-components/package.json

@@ -78,7 +78,7 @@
     "lucide-react": "0.544.0",
     "npm-run-all": "4.1.5",
     "storybook": "9.1.19",
-    "tsdown": "^0.18.1",
+    "tsdown": "^0.21.4",
     "typescript": "5.9.3",
     "vite": "7.1.11",
     "vite-plugin-dts": "4.5.4",

libs/@hashintel/ds-components/src/components/switch.tsx

@@ -1,6 +1,6 @@
 import { Switch as BaseSwitch } from "@ark-ui/react/switch";
 import { css } from "@hashintel/ds-helpers/css";
-import { LIP, refractive } from "@hashintel/refractive";
+import { lip, refractive } from "@hashintel/refractive";
 
 // Layout constants
 const SLIDER_HEIGHT = 20;
@@ -104,7 +104,7 @@ export const Switch: React.FC<SwitchProps> = ({
             refraction={{
               radius: THUMB_RADIUS,
               bezelWidth: THUMB_RADIUS * 0.42,
-              bezelHeightFn: LIP,
+              bezelHeightFn: lip,
               glassThickness: 12,
               specularOpacity: 0.5,
             }}

libs/@hashintel/ds-helpers/package.json

@@ -86,7 +86,7 @@
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "sync-fetch": "0.5.2",
-    "tsdown": "^0.18.1",
+    "tsdown": "^0.21.4",
     "typescript": "5.9.3",
     "vite": "7.1.11",
     "vitest": "^4.0.16"

libs/@hashintel/ds-theme/package.json

@@ -56,7 +56,7 @@
     "case-anything": "3.1.0",
     "colorjs.io": "0.6.1",
     "npm-run-all": "4.1.5",
-    "tsdown": "^0.18.1",
+    "tsdown": "^0.21.4",
     "tsx": "4.20.6",
     "typescript": "5.9.3",
     "vitest": "^4.0.16",

libs/@hashintel/refractive/.oxlintrc.json

@@ -0,0 +1,165 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["import", "react", "jsx-a11y", "unicorn", "typescript"],
+  "categories": {
+    "correctness": "error"
+  },
+  "env": {
+    "builtin": true,
+    "es2026": true,
+    "browser": true
+  },
+  "rules": {
+    "array-callback-return": ["error", { "allowImplicit": true }],
+    "default-case-last": "error",
+    "default-param-last": "error",
+    "eqeqeq": ["error", "always", { "null": "ignore" }],
+    "guard-for-in": "error",
+    "no-alert": "error",
+    "no-cond-assign": ["error", "always"],
+    "no-extend-native": "error",
+    "no-loop-func": "error",
+    "no-new": "error",
+    "no-param-reassign": [
+      "error",
+      {
+        "props": true,
+        "ignorePropertyModificationsForRegex": ["^existing", "draft"]
+      }
+    ],
+    "no-return-assign": ["error", "always"],
+    "no-self-compare": "error",
+    "no-sequences": "error",
+    "no-template-curly-in-string": "error",
+    "no-unsafe-optional-chaining": [
+      "error",
+      { "disallowArithmeticOperators": true }
+    ],
+    "no-unused-vars": [
+      "error",
+      {
+        "args": "all",
+        "argsIgnorePattern": "^_+",
+        "varsIgnorePattern": "^_+"
+      }
+    ],
+    "no-void": ["error", { "allowAsStatement": true }],
+
+    "no-console": "error",
+    "new-cap": "error",
+    "no-new-func": "error",
+    "func-names": "error",
+    "no-bitwise": "error",
+    "no-multi-assign": "error",
+
+    "no-restricted-globals": [
+      "error",
+      { "name": "isFinite", "message": "Use Number.isFinite instead" },
+      { "name": "isNaN", "message": "Use Number.isNaN instead" },
+      "event",
+      "name",
+      "length",
+      "status"
+    ],
+    "no-shadow": "error",
+    "no-use-before-define": "error",
+
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": [
+          {
+            "group": ["@local/*"],
+            "message": "You cannot use unpublished local packages in a published package."
+          }
+        ]
+      }
+    ],
+
+    "import/no-named-as-default": "error",
+    "import/no-named-as-default-member": "error",
+    "import/no-mutable-exports": "error",
+    "import/no-duplicates": "error",
+    "import/no-named-default": "error",
+    "import/no-self-import": "error",
+    "import/no-cycle": "error",
+
+    "react/jsx-pascal-case": ["error", { "allowAllCaps": true }],
+    "react/no-danger": "error",
+    "react/jsx-no-target-blank": ["error", { "enforceDynamicLinks": "always" }],
+    "react/jsx-no-comment-textnodes": "error",
+    "react/no-array-index-key": "error",
+    "react/button-has-type": [
+      "error",
+      { "button": true, "submit": true, "reset": false }
+    ],
+
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "off",
+
+    "jsx-a11y/prefer-tag-over-role": "off",
+    "jsx-a11y/aria-role": ["error", { "ignoreNonDOM": false }],
+    "jsx-a11y/no-noninteractive-tabindex": [
+      "error",
+      { "tags": [], "roles": ["tabpanel"] }
+    ],
+    "jsx-a11y/label-has-associated-control": "error",
+    "jsx-a11y/no-static-element-interactions": [
+      "error",
+      {
+        "handlers": [
+          "onClick",
+          "onMouseDown",
+          "onMouseUp",
+          "onKeyPress",
+          "onKeyDown",
+          "onKeyUp"
+        ]
+      }
+    ],
+
+    "@typescript-eslint/ban-ts-comment": [
+      "error",
+      {
+        "ts-expect-error": "allow-with-description",
+        "minimumDescriptionLength": 10
+      }
+    ],
+    "@typescript-eslint/no-empty-object-type": "error",
+    "@typescript-eslint/no-explicit-any": "error",
+    "@typescript-eslint/no-require-imports": "error",
+    "@typescript-eslint/no-unnecessary-type-constraint": "error",
+    "@typescript-eslint/no-implied-eval": "error",
+    "@typescript-eslint/no-misused-promises": "error",
+    "@typescript-eslint/no-unnecessary-condition": "error",
+    "@typescript-eslint/no-unsafe-assignment": "error",
+    "@typescript-eslint/no-unsafe-call": "error",
+    "@typescript-eslint/no-unsafe-function-type": "error",
+
+    "unicorn/no-new-array": "off",
+    "unicorn/filename-case": "error",
+
+    "constructor-super": "off",
+    "no-class-assign": "off",
+    "no-const-assign": "off",
+    "no-dupe-keys": "off",
+    "no-func-assign": "off",
+    "no-import-assign": "off",
+    "no-obj-calls": "off",
+    "no-redeclare": "off",
+    "no-setter-return": "off",
+    "no-this-before-super": "off",
+    "no-unsafe-negation": "off",
+    "no-constant-condition": "off",
+    "no-throw-literal": "off",
+    "prefer-promise-reject-errors": "off"
+  },
+  "ignorePatterns": [
+    "dist/**",
+    "build/**",
+    "coverage/**",
+    "*.gen.*",
+    "*.tsbuildinfo",
+    ".turbo/**"
+  ]
+}

libs/@hashintel/refractive/.storybook/main.ts

@@ -0,0 +1,8 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  framework: "@storybook/react-vite",
+  stories: ["../stories/**/*.stories.@(ts|tsx)"],
+};
+
+export default config;

libs/@hashintel/refractive/.storybook/preview.ts

@@ -0,0 +1,9 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default preview;

libs/@hashintel/refractive/package.json

@@ -18,29 +18,31 @@
   ],
   "type": "module",
   "sideEffects": false,
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
     "build": "vite build",
-    "dev": "vite",
+    "dev": "storybook dev -p 6006",
     "dev:lib": "vite build --watch",
-    "fix:eslint": "eslint --fix .",
-    "lint:eslint": "eslint --report-unused-disable-directives .",
-    "lint:tsc": "tsc --noEmit",
-    "prepublishOnly": "yarn build"
+    "lint:eslint": "oxlint --type-aware --report-unused-disable-directives-severity=error .",
+    "fix:eslint": "oxlint --fix --type-aware --report-unused-disable-directives-severity=error .",
+    "lint:tsc": "tsgo --noEmit",
+    "prepublishOnly": "yarn build",
+    "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@local/eslint": "workspace:*",
-    "@local/tsconfig": "workspace:*",
+    "@rolldown/plugin-babel": "0.2.1",
+    "@storybook/react-vite": "10.2.19",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "5.0.4",
+    "@typescript/native-preview": "7.0.0-dev.20260315.1",
+    "@vitejs/plugin-react": "6.0.1",
     "babel-plugin-react-compiler": "1.0.0",
-    "eslint": "9.39.3",
-    "typescript": "5.9.3",
-    "vite": "7.1.11",
-    "vite-plugin-dts": "4.5.4"
+    "oxlint": "1.55.0",
+    "oxlint-tsgolint": "0.17.0",
+    "rolldown-plugin-dts": "0.22.5",
+    "storybook": "10.2.19",
+    "vite": "8.0.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",