FE-518: Add Storybook and update build/lint setup for refractive#8549
FE-518: Add Storybook and update build/lint setup for refractive#8549
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
This stack of pull requests is managed by Graphite. Learn more about stacking. |
PR SummaryMedium Risk Overview Modernizes API/usage adjustments: renames surface equation exports to lowerCamelCase ( Written by Cursor Bugbot for commit 4c2a6f1. This will update automatically on new commits. Configure here. |
🤖 Augment PR SummarySummary: This PR modernizes the Changes:
Technical Notes: The library build now targets ESM output only and declares types from 🤖 Was this summary useful? React with 👍 or 👎 |
| { "button": true, "submit": true, "reset": false } | ||
| ], | ||
|
|
||
| "react-hooks/rules-of-hooks": "error", |
There was a problem hiding this comment.
There was a problem hiding this comment.
Re: react-hooks rules — oxlint supports react-hooks/* syntax, same as petrinaut's config. No change needed.
| export type SurfaceFnDef = (x: number) => number; | ||
|
|
||
| export const CONVEX_CIRCLE: SurfaceFnDef = (x) => Math.sqrt(1 - (1 - x) ** 2); | ||
| export const convexCircle: SurfaceFnDef = (x) => |
There was a problem hiding this comment.
These exports were renamed from CONVEX*/CONCAVE/LIP to camelCase, and src/main.ts re-exports them, so this is a public API breaking change for any downstream imports. It may be worth confirming versioning/changelog expectations for this rename.
Severity: medium
🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.
There was a problem hiding this comment.
Fixed in 4c2a6f1 — updated the consumer in ds-components/switch.tsx to use the new names.
| "sideEffects": false, | ||
| "main": "./dist/index.cjs", | ||
| "module": "./dist/index.js", | ||
| "main": "./dist/index.js", |
There was a problem hiding this comment.
There was a problem hiding this comment.
Intentional — ESM-only, same as @hashintel/petrinaut. All consumers use bundlers.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
| import react from "@vitejs/plugin-react"; | ||
| import babel from "@rolldown/plugin-babel"; | ||
| import react, { reactCompilerPreset } from "@vitejs/plugin-react"; | ||
| import { dts } from "rolldown-plugin-dts"; |
There was a problem hiding this comment.
Replace the import of 'rolldown-plugin-dts' with 'vite-plugin-dts' to fix the compatibility issue with rolldown. Change to: import dts from 'vite-plugin-dts';
Spotted by Graphite (based on CI logs)
Is this helpful? React 👍 or 👎 to let us know.
There was a problem hiding this comment.
rolldown-plugin-dts is correct — same as petrinaut. vite-plugin-dts is the old approach.
| dts({ tsgo: true }).map((plugin) => | ||
| // Ensure runs before Vite's native TypeScript transform | ||
| plugin.name.endsWith("fake-js") | ||
| ? { ...plugin, enforce: "pre" } | ||
| : plugin, | ||
| ), |
There was a problem hiding this comment.
Replace the rolldown-plugin-dts configuration with vite-plugin-dts configuration. Change to: dts({ rollupTypes: true, insertTypesEntry: true, exclude: ['/.stories.', '/.test.'], copyDtsFiles: false, outDir: 'dist' })
Spotted by Graphite (based on CI logs)
Is this helpful? React 👍 or 👎 to let us know.
There was a problem hiding this comment.
rolldown-plugin-dts with tsgo: true is the intended setup, matching petrinaut.
17e5684 to
ccc9e08
Compare
132f9b3 to
a0766e7
Compare
a0766e7 to
e6353b8
Compare
ccc9e08 to
6cecb10
Compare
Replace the playground/ dev server with Storybook for component development and visual testing. - Remove playground/ folder and its Vite dev server setup - Add Storybook 9 with @storybook/react-vite framework - Create playground story showing refractive glass effect over scrollable article content - Simplify vite.config.ts for lib-only builds (Storybook handles dev) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…cate package error Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace ESLint with oxlint, tsc with tsgo, upgrade to Vite 8 + Storybook 10, switch to ES-only output with rolldown-plugin-dts for declaration generation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
e6353b8 to
f34deb3
Compare
- Bump Storybook from 10.2.13 to 10.2.19 for Vite 8 compatibility - Update ds-components/switch.tsx to use renamed `lip` export Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Benchmark results
|
| Function | Value | Mean | Flame graphs |
|---|---|---|---|
| resolve_policies_for_actor | user: empty, selectivity: high, policies: 2002 | Flame Graph | |
| resolve_policies_for_actor | user: empty, selectivity: low, policies: 1 | Flame Graph | |
| resolve_policies_for_actor | user: empty, selectivity: medium, policies: 1001 | Flame Graph | |
| resolve_policies_for_actor | user: seeded, selectivity: high, policies: 3314 | Flame Graph | |
| resolve_policies_for_actor | user: seeded, selectivity: low, policies: 1 | Flame Graph | |
| resolve_policies_for_actor | user: seeded, selectivity: medium, policies: 1526 | Flame Graph | |
| resolve_policies_for_actor | user: system, selectivity: high, policies: 2078 | Flame Graph | |
| resolve_policies_for_actor | user: system, selectivity: low, policies: 1 | Flame Graph | |
| resolve_policies_for_actor | user: system, selectivity: medium, policies: 1033 | Flame Graph |
policy_resolution_medium
| Function | Value | Mean | Flame graphs |
|---|---|---|---|
| resolve_policies_for_actor | user: empty, selectivity: high, policies: 102 | Flame Graph | |
| resolve_policies_for_actor | user: empty, selectivity: low, policies: 1 | Flame Graph | |
| resolve_policies_for_actor | user: empty, selectivity: medium, policies: 51 | Flame Graph | |
| resolve_policies_for_actor | user: seeded, selectivity: high, policies: 269 | Flame Graph | |
| resolve_policies_for_actor | user: seeded, selectivity: low, policies: 1 | Flame Graph | |
| resolve_policies_for_actor | user: seeded, selectivity: medium, policies: 107 | Flame Graph | |
| resolve_policies_for_actor | user: system, selectivity: high, policies: 133 | Flame Graph | |
| resolve_policies_for_actor | user: system, selectivity: low, policies: 1 | Flame Graph | |
| resolve_policies_for_actor | user: system, selectivity: medium, policies: 63 | Flame Graph |
policy_resolution_none
| Function | Value | Mean | Flame graphs |
|---|---|---|---|
| resolve_policies_for_actor | user: empty, selectivity: high, policies: 2 | Flame Graph | |
| resolve_policies_for_actor | user: empty, selectivity: low, policies: 1 | Flame Graph | |
| resolve_policies_for_actor | user: empty, selectivity: medium, policies: 1 | Flame Graph | |
| resolve_policies_for_actor | user: system, selectivity: high, policies: 8 | Flame Graph | |
| resolve_policies_for_actor | user: system, selectivity: low, policies: 1 | Flame Graph | |
| resolve_policies_for_actor | user: system, selectivity: medium, policies: 3 | Flame Graph |
policy_resolution_small
| Function | Value | Mean | Flame graphs |
|---|---|---|---|
| resolve_policies_for_actor | user: empty, selectivity: high, policies: 52 | Flame Graph | |
| resolve_policies_for_actor | user: empty, selectivity: low, policies: 1 | Flame Graph | |
| resolve_policies_for_actor | user: empty, selectivity: medium, policies: 25 | Flame Graph | |
| resolve_policies_for_actor | user: seeded, selectivity: high, policies: 94 | Flame Graph | |
| resolve_policies_for_actor | user: seeded, selectivity: low, policies: 1 | Flame Graph | |
| resolve_policies_for_actor | user: seeded, selectivity: medium, policies: 26 | Flame Graph | |
| resolve_policies_for_actor | user: system, selectivity: high, policies: 66 | Flame Graph | |
| resolve_policies_for_actor | user: system, selectivity: low, policies: 1 | Flame Graph | |
| resolve_policies_for_actor | user: system, selectivity: medium, policies: 29 | Flame Graph |
read_scaling_complete
| Function | Value | Mean | Flame graphs |
|---|---|---|---|
| entity_by_id;one_depth | 1 entities | Flame Graph | |
| entity_by_id;one_depth | 10 entities | Flame Graph | |
| entity_by_id;one_depth | 25 entities | Flame Graph | |
| entity_by_id;one_depth | 5 entities | Flame Graph | |
| entity_by_id;one_depth | 50 entities | Flame Graph | |
| entity_by_id;two_depth | 1 entities | Flame Graph | |
| entity_by_id;two_depth | 10 entities | Flame Graph | |
| entity_by_id;two_depth | 25 entities | Flame Graph | |
| entity_by_id;two_depth | 5 entities | Flame Graph | |
| entity_by_id;two_depth | 50 entities | Flame Graph | |
| entity_by_id;zero_depth | 1 entities | Flame Graph | |
| entity_by_id;zero_depth | 10 entities | Flame Graph | |
| entity_by_id;zero_depth | 25 entities | Flame Graph | |
| entity_by_id;zero_depth | 5 entities | Flame Graph | |
| entity_by_id;zero_depth | 50 entities | Flame Graph |
read_scaling_linkless
| Function | Value | Mean | Flame graphs |
|---|---|---|---|
| entity_by_id | 1 entities | Flame Graph | |
| entity_by_id | 10 entities | Flame Graph | |
| entity_by_id | 100 entities | Flame Graph | |
| entity_by_id | 1000 entities | Flame Graph | |
| entity_by_id | 10000 entities | Flame Graph |
representative_read_entity
| Function | Value | Mean | Flame graphs |
|---|---|---|---|
| entity_by_id | entity type ID: https://blockprotocol.org/@alice/types/entity-type/block/v/1
|
Flame Graph | |
| entity_by_id | entity type ID: https://blockprotocol.org/@alice/types/entity-type/book/v/1
|
Flame Graph | |
| entity_by_id | entity type ID: https://blockprotocol.org/@alice/types/entity-type/building/v/1
|
Flame Graph | |
| entity_by_id | entity type ID: https://blockprotocol.org/@alice/types/entity-type/organization/v/1
|
Flame Graph | |
| entity_by_id | entity type ID: https://blockprotocol.org/@alice/types/entity-type/page/v/2
|
Flame Graph | |
| entity_by_id | entity type ID: https://blockprotocol.org/@alice/types/entity-type/person/v/1
|
Flame Graph | |
| entity_by_id | entity type ID: https://blockprotocol.org/@alice/types/entity-type/playlist/v/1
|
Flame Graph | |
| entity_by_id | entity type ID: https://blockprotocol.org/@alice/types/entity-type/song/v/1
|
Flame Graph | |
| entity_by_id | entity type ID: https://blockprotocol.org/@alice/types/entity-type/uk-address/v/1
|
Flame Graph |
representative_read_entity_type
| Function | Value | Mean | Flame graphs |
|---|---|---|---|
| get_entity_type_by_id | Account ID: bf5a9ef5-dc3b-43cf-a291-6210c0321eba
|
Flame Graph |
representative_read_multiple_entities
| Function | Value | Mean | Flame graphs |
|---|---|---|---|
| entity_by_property | traversal_paths=0 | 0 | |
| entity_by_property | traversal_paths=255 | 1,resolve_depths=inherit:1;values:255;properties:255;links:127;link_dests:126;type:true | |
| entity_by_property | traversal_paths=2 | 1,resolve_depths=inherit:0;values:0;properties:0;links:0;link_dests:0;type:false | |
| entity_by_property | traversal_paths=2 | 1,resolve_depths=inherit:0;values:0;properties:0;links:1;link_dests:0;type:true | |
| entity_by_property | traversal_paths=2 | 1,resolve_depths=inherit:0;values:0;properties:2;links:1;link_dests:0;type:true | |
| entity_by_property | traversal_paths=2 | 1,resolve_depths=inherit:0;values:2;properties:2;links:1;link_dests:0;type:true | |
| link_by_source_by_property | traversal_paths=0 | 0 | |
| link_by_source_by_property | traversal_paths=255 | 1,resolve_depths=inherit:1;values:255;properties:255;links:127;link_dests:126;type:true | |
| link_by_source_by_property | traversal_paths=2 | 1,resolve_depths=inherit:0;values:0;properties:0;links:0;link_dests:0;type:false | |
| link_by_source_by_property | traversal_paths=2 | 1,resolve_depths=inherit:0;values:0;properties:0;links:1;link_dests:0;type:true | |
| link_by_source_by_property | traversal_paths=2 | 1,resolve_depths=inherit:0;values:0;properties:2;links:1;link_dests:0;type:true | |
| link_by_source_by_property | traversal_paths=2 | 1,resolve_depths=inherit:0;values:2;properties:2;links:1;link_dests:0;type:true |
scenarios
| Function | Value | Mean | Flame graphs |
|---|---|---|---|
| full_test | query-limited | Flame Graph | |
| full_test | query-unlimited | Flame Graph | |
| linked_queries | query-limited | Flame Graph | |
| linked_queries | query-unlimited | Flame Graph |


🌟 What is the purpose of this PR?
Modernizes the build, lint, and dev tooling for
@hashintel/petrinaut,@apps/petrinaut-website, and@hashintel/refractiveto use the latest versions of Vite, oxlint, and the React Compiler plugin — and aligns all three packages on the same configuration patterns.🔗 Related links
🔍 What does this change?
Migrate petrinaut & petrinaut-website from ESLint to oxlint
eslint.config.jswith.oxlintrc.jsonin both packages--type-awarelinting and--report-unused-disable-directives-severity=errorjsx-a11y,unicornplugins; promote allwarnrules toerroruse no memo, etc.)CLAUDE.mdfor petrinaut with stack/conventions docsUpgrade dev tooling across all three packages
@vitejs/plugin-react5.x → 6.0.1@typescript/native-preview→ 7.0.0-dev.20260315.1rolldown-plugin-dts→ 0.22.5,storybook→ 10.2.19babel.pluginsto@rolldown/plugin-babel+reactCompilerPresetAdd Storybook to
@hashintel/refractive.storybook/config andplayground.stories.tsx(replaces oldplayground/directory)Align
@hashintel/refractiveconfig with petrinaut.oxlintrc.json,tsconfig.json(noFallthroughCasesInSwitch), and Vite config patternsoxlint-tsgolint,@rolldown/plugin-babeldevDependenciesCONVEX→convex, etc.) to satisfynew-capruleMonorepo fixes
node_modulesfrom workspace glob to fix turbo duplicate package errorweb-workertohash-frontendfor elkjs compatibilityui-subviews.tsconstant in petrinaut to fix circular referencePre-Merge Checklist 🚀
🚢 Has this modified a publishable library?
This PR:
📜 Does this require a change to the docs?
The changes in this PR:
🕸️ Does this require a change to the Turbo Graph?
The changes in this PR:
turbo.json's have been updated to reflect this🛡 What tests cover this?
yarn lint:eslintandyarn lint:tscpass for all three packagesyarn buildsucceeds for@hashintel/refractiveand@hashintel/petrinaut