From e705b6e12cd8685d8c512e02a3e58097c412baf0 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Thu, 30 Jul 2026 13:05:28 +0200 Subject: [PATCH] :tada: Add components library (#10675) * :tada: Install react-aria-components * :tada: Create modal component in TS using react-aria-component * :tada: Create modal ds component * :tada: Separate header content and footer components * :bug: Remove mf/html macros when not needed * :tada: Solve little problems * :recycle: Format files * :recycle: Remove ModalCloseBtn * :bug: Fix CI * :recycle: Remove unused files * :tada: Make close button not dependant on the modal header * :tada: Add footer with two slots * :tada: Improvements on modal * :bug: Fix package imports and remove login example code --------- Co-authored-by: Andrey Antukh --- frontend/package.json | 7 +- frontend/packages/ui/package.json | 7 + frontend/packages/ui/src/index.ts | 2 +- .../ui/src/lib/example/Example.module.css | 5 - .../ui/src/lib/example/Example.spec.tsx | 10 -- .../ui/src/lib/example/Example.stories.ts | 12 -- .../packages/ui/src/lib/example/Example.tsx | 21 --- .../ui/src/lib/modal/Modal.module.scss | 113 ++++++++++++ frontend/packages/ui/src/lib/modal/Modal.tsx | 66 +++++++ frontend/packages/ui/src/modal.ts | 1 + frontend/packages/ui/vite.config.mts | 17 +- frontend/pnpm-lock.yaml | 121 ++++++++++++- frontend/resources/templates/index.mustache | 1 + .../resources/templates/preview-head.mustache | 1 + frontend/scripts/build-libs.js | 3 + frontend/src/app/main/ui/ds.cljs | 5 + frontend/src/app/main/ui/ds/layout/modal.cljs | 120 +++++++++++++ frontend/src/app/main/ui/ds/layout/modal.mdx | 163 ++++++++++++++++++ frontend/src/app/main/ui/ds/layout/modal.scss | 68 ++++++++ .../app/main/ui/ds/layout/modal.stories.jsx | 146 ++++++++++++++++ 20 files changed, 832 insertions(+), 57 deletions(-) delete mode 100644 frontend/packages/ui/src/lib/example/Example.module.css delete mode 100644 frontend/packages/ui/src/lib/example/Example.spec.tsx delete mode 100644 frontend/packages/ui/src/lib/example/Example.stories.ts delete mode 100644 frontend/packages/ui/src/lib/example/Example.tsx create mode 100644 frontend/packages/ui/src/lib/modal/Modal.module.scss create mode 100644 frontend/packages/ui/src/lib/modal/Modal.tsx create mode 100644 frontend/packages/ui/src/modal.ts create mode 100644 frontend/src/app/main/ui/ds/layout/modal.cljs create mode 100644 frontend/src/app/main/ui/ds/layout/modal.mdx create mode 100644 frontend/src/app/main/ui/ds/layout/modal.scss create mode 100644 frontend/src/app/main/ui/ds/layout/modal.stories.jsx diff --git a/frontend/package.json b/frontend/package.json index 06bd6750f7..284861fb89 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,7 +16,7 @@ "scripts": { "build:app:assets": "node ./scripts/build-app-assets.js", "build:fonts-preview": "node ./scripts/build-fonts-preview.js", - "build:storybook": "pnpm run build:storybook:assets && pnpm run build:storybook:cljs && storybook build", + "build:storybook": "(cd packages/ui && pnpm run build) && pnpm run build:storybook:assets && pnpm run build:storybook:cljs && storybook build", "build:storybook:assets": "node ./scripts/build-storybook-assets.js", "build:storybook:cljs": "clojure -M:dev:shadow-cljs compile storybook", "build:wasm": "../render-wasm/build", @@ -58,7 +58,6 @@ "@penpot/text-editor": "link:text-editor", "@penpot/tokenscript": "link:packages/tokenscript", "@penpot/ua-parser": "penpot/ua-parser#1.0.0", - "@penpot/ui": "link:packages/ui", "@playwright/test": "1.61.1", "@storybook/addon-docs": "10.4.6", "@storybook/addon-themes": "10.4.6", @@ -129,5 +128,9 @@ "watcher": "^2.3.1", "workerpool": "^10.0.3", "xregexp": "^5.1.2" + }, + "dependencies": { + "@penpot/ui": "link:packages/ui", + "react-aria-components": "^1.19.0" } } diff --git a/frontend/packages/ui/package.json b/frontend/packages/ui/package.json index 31e2597bd9..43ffb8932a 100644 --- a/frontend/packages/ui/package.json +++ b/frontend/packages/ui/package.json @@ -7,6 +7,10 @@ ".": { "import": "./dist/index.js" }, + "./modal": { + "import": "./dist/modal.js", + "types": "./dist/modal.d.ts" + }, "./style.css": "./dist/style.css" }, "scripts": { @@ -32,6 +36,9 @@ "storybook": "10.4.6", "vite-plugin-dts": "^5.0.3" }, + "dependencies": { + "react-aria-components": "^1.19.0" + }, "peerDependencies": { "react": ">=19.2", "react-dom": ">=19.2" diff --git a/frontend/packages/ui/src/index.ts b/frontend/packages/ui/src/index.ts index 19ed9b5a98..4c5c366053 100644 --- a/frontend/packages/ui/src/index.ts +++ b/frontend/packages/ui/src/index.ts @@ -1 +1 @@ -export * from './lib/example/Example'; +export { Modal, useModalClose } from './lib/modal/Modal'; diff --git a/frontend/packages/ui/src/lib/example/Example.module.css b/frontend/packages/ui/src/lib/example/Example.module.css deleted file mode 100644 index bcb65dd60c..0000000000 --- a/frontend/packages/ui/src/lib/example/Example.module.css +++ /dev/null @@ -1,5 +0,0 @@ -.container { - background-color: #f0f0f0; - padding: 16px; - border: 2px solid #000; -} diff --git a/frontend/packages/ui/src/lib/example/Example.spec.tsx b/frontend/packages/ui/src/lib/example/Example.spec.tsx deleted file mode 100644 index e3022639d9..0000000000 --- a/frontend/packages/ui/src/lib/example/Example.spec.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { render } from '@testing-library/react'; - -import Example from './Example'; - -describe('Example', () => { - it('should render successfully', () => { - const { baseElement } = render(); - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/frontend/packages/ui/src/lib/example/Example.stories.ts b/frontend/packages/ui/src/lib/example/Example.stories.ts deleted file mode 100644 index 4dfb60c9e7..0000000000 --- a/frontend/packages/ui/src/lib/example/Example.stories.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Example } from './Example'; -import type { Meta, StoryObj } from '@storybook/react-vite'; - -const meta = { - title: 'UI/Example', - component: Example, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Primary: Story = {}; diff --git a/frontend/packages/ui/src/lib/example/Example.tsx b/frontend/packages/ui/src/lib/example/Example.tsx deleted file mode 100644 index 908a8e3fd9..0000000000 --- a/frontend/packages/ui/src/lib/example/Example.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { useState } from 'react'; -import styles from './Example.module.css'; - -export function Example() { - const [count, setCount] = useState(0); - - return ( -
-

Example!

-
-

Counter: {count}

- - - -
-
- - ); -} - -export default Example; diff --git a/frontend/packages/ui/src/lib/modal/Modal.module.scss b/frontend/packages/ui/src/lib/modal/Modal.module.scss new file mode 100644 index 0000000000..b5ab9bf29e --- /dev/null +++ b/frontend/packages/ui/src/lib/modal/Modal.module.scss @@ -0,0 +1,113 @@ +@use "ds/_borders" as *; +@use "ds/_sizes" as *; +@use "ds/_utils" as *; + +.overlay { + position: fixed; + inset: 0; + background: var(--color-overlay-default); + display: flex; + align-items: center; + justify-content: center; + z-index: var(--z-index-set); + + &[data-entering] { + animation: overlay-fade-in 0.2s ease-out; + } + + &[data-exiting] { + animation: overlay-fade-out 0.15s ease-in; + } +} + +.modal { + position: relative; + inline-size: 100%; + margin: var(--sp-l); + background: var(--color-background-primary); + border-radius: $br-8; + box-shadow: var(--el-shadow-dark); + outline: none; + max-block-size: calc(100dvh - var(--sp-xxxl) * 2); + display: flex; + flex-direction: column; + + &[data-entering] { + animation: modal-zoom-in 0.2s ease-out; + } + + &[data-exiting] { + animation: modal-zoom-out 0.15s ease-in; + } +} + +.modalSmall { + max-inline-size: $sz-400; +} + +.modalMedium { + max-inline-size: $sz-512; +} + +.modalLarge { + max-inline-size: px2rem(640); +} + +.modalXlarge { + max-inline-size: px2rem(960); +} + +.dialog { + position: relative; + outline: none; + display: flex; + flex-direction: column; + min-block-size: 0; + overflow: hidden; + max-block-size: inherit; +} + + +@keyframes overlay-fade-in { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} + +@keyframes overlay-fade-out { + from { + opacity: 1; + } + + to { + opacity: 0; + } +} + +@keyframes modal-zoom-in { + from { + opacity: 0; + transform: scale(0.95); + } + + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes modal-zoom-out { + from { + opacity: 1; + transform: scale(0.95); + } + + to { + opacity: 0; + transform: scale(1); + } +} diff --git a/frontend/packages/ui/src/lib/modal/Modal.tsx b/frontend/packages/ui/src/lib/modal/Modal.tsx new file mode 100644 index 0000000000..6d236d4d96 --- /dev/null +++ b/frontend/packages/ui/src/lib/modal/Modal.tsx @@ -0,0 +1,66 @@ +import { + DialogTrigger, + ModalOverlay, + Modal as RACModal, + Dialog, +} from 'react-aria-components'; +import { + createContext, + useContext, + type ReactNode, +} from 'react'; +import styles from './Modal.module.scss'; + +const ModalCloseContext = createContext<(() => void) | null>(null); + +export function useModalClose(): (() => void) | null { + return useContext(ModalCloseContext); +} + +interface ModalProps { + isOpen?: boolean; + onOpenChange?: (isOpen: boolean) => void; + children: ReactNode; + trigger?: ReactNode; + isDismissable?: boolean; + size?: 'small' | 'medium' | 'large' | 'xlarge'; + className?: string; +} + +export function Modal({ + isOpen, + onOpenChange, + children, + trigger, + isDismissable = true, + size = 'medium', + className, +}: ModalProps) { + const sizeClass = + size === 'small' + ? styles.modalSmall + : size === 'large' + ? styles.modalLarge + : size === 'xlarge' + ? styles.modalXlarge + : styles.modalMedium; + + return ( + + {trigger} + + + + {({ close }) => ( + + {children} + + )} + + + + + ); +} diff --git a/frontend/packages/ui/src/modal.ts b/frontend/packages/ui/src/modal.ts new file mode 100644 index 0000000000..4c5c366053 --- /dev/null +++ b/frontend/packages/ui/src/modal.ts @@ -0,0 +1 @@ +export { Modal, useModalClose } from './lib/modal/Modal'; diff --git a/frontend/packages/ui/vite.config.mts b/frontend/packages/ui/vite.config.mts index a1f91b23c1..5ec50406f4 100644 --- a/frontend/packages/ui/vite.config.mts +++ b/frontend/packages/ui/vite.config.mts @@ -10,7 +10,7 @@ const copyCssPlugin = () => ({ closeBundle: () => { try { copyFileSync( - 'dist/index.css', + 'dist/ui.css', '../../resources/public/css/ui.css', ); } catch (e) { @@ -21,6 +21,15 @@ const copyCssPlugin = () => ({ export default defineConfig(() => ({ root: import.meta.dirname, + css: { + preprocessorOptions: { + scss: { + loadPaths: [ + path.resolve(import.meta.dirname, '../../src/app/main/ui'), + ], + }, + }, + }, plugins: [ react({ babel: { @@ -42,9 +51,11 @@ export default defineConfig(() => ({ transformMixedEsModules: true, }, lib: { - entry: 'src/index.ts', + entry: { + index: 'src/index.ts', + modal: 'src/modal.ts', + }, name: 'ui', - fileName: 'index', formats: ['es' as const], }, rollupOptions: { diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 95fb9d9b89..0f0bd5873c 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -25,6 +25,13 @@ patchedDependencies: importers: .: + dependencies: + '@penpot/ui': + specifier: link:packages/ui + version: link:packages/ui + react-aria-components: + specifier: ^1.19.0 + version: 1.19.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7) devDependencies: '@penpot/draft-js': specifier: link:packages/draft-js @@ -47,9 +54,6 @@ importers: '@penpot/ua-parser': specifier: penpot/ua-parser#1.0.0 version: https://codeload.github.com/penpot/ua-parser/tar.gz/90b970f39f2dc08378b975a0f01045b4ec8e89a4 - '@penpot/ui': - specifier: link:packages/ui - version: link:packages/ui '@playwright/test': specifier: 1.61.1 version: 1.61.1 @@ -293,6 +297,9 @@ importers: react: specifier: '>=19.2' version: 19.2.7 + react-aria-components: + specifier: ^1.19.0 + version: 1.19.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7) react-dom: specifier: '>=19.2' version: 19.2.7(react@19.2.7) @@ -965,6 +972,15 @@ packages: resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==} engines: {node: '>=18.18'} + '@internationalized/date@3.12.2': + resolution: {integrity: sha512-FY1Y+H64NDs+HAF6omlnWxm3mEpfgaCSWtL5l551ZZfImA+kGjPFgrnJrGjH6lfmLL0g8Z/mBu1R3kufeCp6Jw==} + + '@internationalized/number@3.6.7': + resolution: {integrity: sha512-3ji1fcrT+FPAK86UqEhB/psHixYo6niWPJtt7+qRaYFynt/BaJG8GhAPimtWUpEiVSTq8ZM8L5psMxGquiB/Vg==} + + '@internationalized/string@3.2.9': + resolution: {integrity: sha512-kzP/M/mbQxODlmOt4bIQZ2SBVUWUSqMLXooXixnX7noche8WHaQcA+nwFN1K2KCF/cp+LDUhcJsCicwkvhD1pg==} + '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0': resolution: {integrity: sha512-qvsTEwEFefhdirGOPnu9Wp6ChfIwy2dBCRuETU3uE+4cC+PFoxMSiiEhxk4lOluA34eARHA0OxqsEUYDqRMgeQ==} peerDependencies: @@ -1505,6 +1521,11 @@ packages: '@polka/url@1.0.0-next.29': resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==} + '@react-types/shared@3.36.0': + resolution: {integrity: sha512-DkP/H0C2YjjS7gZWKNqOmU8a16qHPjQNdzMwmTq9SzplM6Iw0kVMTZ0OIoe6FOgGqa+FwMsE2QbPjh/n3g/jXQ==} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + '@resvg/resvg-js-android-arm-eabi@2.6.2': resolution: {integrity: sha512-FrJibrAk6v29eabIPgcTUMPXiEz8ssrAk7TXxsiZzww9UTQ1Z5KAbFJs+Z0Ez+VZTYgnE5IQJqBcoSiMebtPHA==} engines: {node: '>= 10'} @@ -1977,6 +1998,9 @@ packages: typescript: optional: true + '@swc/helpers@0.5.23': + resolution: {integrity: sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==} + '@testing-library/dom@10.4.1': resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==} engines: {node: '>=18'} @@ -2268,6 +2292,10 @@ packages: argparse@2.0.1: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} + aria-hidden@1.2.6: + resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==} + engines: {node: '>=10'} + aria-query@5.3.0: resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==} @@ -2515,6 +2543,9 @@ packages: resolution: {integrity: sha512-EJUDT7nDVFDvaQgAo2G/PJvxmp1o/c6iXLbswsBbUFXi1Nr+AjA2cKmfbKDMjMvzEe75g3P6JkaDDAKk96A85A==} engines: {node: '>= 4.0'} + client-only@0.0.1: + resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==} + cliui@8.0.1: resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==} engines: {node: '>=12'} @@ -2541,6 +2572,10 @@ packages: resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==} engines: {node: '>=6'} + clsx@2.1.1: + resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} + engines: {node: '>=6'} + color-convert@1.9.3: resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} @@ -4527,6 +4562,18 @@ packages: resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==} hasBin: true + react-aria-components@1.19.0: + resolution: {integrity: sha512-2smSS5nqJ8cGYMQezuUXveZm7eMyHCqTN6mDpylQBYLYbdF5dxCCuW1DHn1VKLe1DybSfPvX/cZtJlDmvFfn8A==} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + + react-aria@3.50.0: + resolution: {integrity: sha512-S0Os6QZk33fzUAKu1QLT9afoUaCBt1ZNdoiq0n2YMVgKIdNIQS8zxiZ8O9hYE6QyDkHKjD6q39LQZ+qaSAIgjw==} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-compiler-runtime@1.0.0: resolution: {integrity: sha512-rRfjYv66HlG8896yPUDONgKzG5BxZD1nV9U6rkm+7VCuvQc903C4MjcoZR4zPw53IKSOX9wMQVpA1IAbRtzQ7w==} peerDependencies: @@ -4560,6 +4607,11 @@ packages: react-lifecycles-compat@3.0.4: resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==} + react-stately@3.48.0: + resolution: {integrity: sha512-ImicSAG+lTotAe5izcs1fz49Zk48w7pDusqYg04WaPhCoej8BJ24soMu3iLXIrsi273s4P1gZrYGrqReMfgEEA==} + peerDependencies: + react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1 + react-virtualized@9.22.6: resolution: {integrity: sha512-U5j7KuUQt3AaMatlMJ0UJddqSiX+Km0YJxSqbAzIiGw5EmNz0khMyqP2hzgu4+QUtm+QPIrxzUX4raJxmVJnHg==} peerDependencies: @@ -6304,6 +6356,18 @@ snapshots: '@humanwhocodes/retry@0.4.3': {} + '@internationalized/date@3.12.2': + dependencies: + '@swc/helpers': 0.5.23 + + '@internationalized/number@3.6.7': + dependencies: + '@swc/helpers': 0.5.23 + + '@internationalized/string@3.2.9': + dependencies: + '@swc/helpers': 0.5.23 + '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0(typescript@6.0.3)(vite@8.1.2(@types/node@26.1.0)(esbuild@0.28.1)(sass-embedded@1.100.0)(sass@1.101.0))': dependencies: glob: 13.0.6 @@ -6753,6 +6817,10 @@ snapshots: '@polka/url@1.0.0-next.29': {} + '@react-types/shared@3.36.0(react@19.2.7)': + dependencies: + react: 19.2.7 + '@resvg/resvg-js-android-arm-eabi@2.6.2': optional: true @@ -7107,6 +7175,10 @@ snapshots: transitivePeerDependencies: - supports-color + '@swc/helpers@0.5.23': + dependencies: + tslib: 2.8.1 + '@testing-library/dom@10.4.1': dependencies: '@babel/code-frame': 7.29.7 @@ -7457,6 +7529,10 @@ snapshots: argparse@2.0.1: {} + aria-hidden@1.2.6: + dependencies: + tslib: 2.8.1 + aria-query@5.3.0: dependencies: dequal: 2.0.3 @@ -7767,6 +7843,8 @@ snapshots: dependencies: source-map: 0.6.1 + client-only@0.0.1: {} + cliui@8.0.1: dependencies: string-width: 4.2.3 @@ -7793,6 +7871,8 @@ snapshots: clsx@1.2.1: {} + clsx@2.1.1: {} + color-convert@1.9.3: dependencies: color-name: 1.1.3 @@ -9909,6 +9989,31 @@ snapshots: minimist: 1.2.8 strip-json-comments: 2.0.1 + react-aria-components@1.19.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7): + dependencies: + '@internationalized/date': 3.12.2 + '@react-types/shared': 3.36.0(react@19.2.7) + '@swc/helpers': 0.5.23 + client-only: 0.0.1 + react: 19.2.7 + react-aria: 3.50.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7) + react-dom: 19.2.7(react@19.2.7) + react-stately: 3.48.0(react@19.2.7) + + react-aria@3.50.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7): + dependencies: + '@internationalized/date': 3.12.2 + '@internationalized/number': 3.6.7 + '@internationalized/string': 3.2.9 + '@react-types/shared': 3.36.0(react@19.2.7) + '@swc/helpers': 0.5.23 + aria-hidden: 1.2.6 + clsx: 2.1.1 + react: 19.2.7 + react-dom: 19.2.7(react@19.2.7) + react-stately: 3.48.0(react@19.2.7) + use-sync-external-store: 1.6.0(react@19.2.7) + react-compiler-runtime@1.0.0(react@19.2.7): dependencies: react: 19.2.7 @@ -9947,6 +10052,16 @@ snapshots: react-lifecycles-compat@3.0.4: {} + react-stately@3.48.0(react@19.2.7): + dependencies: + '@internationalized/date': 3.12.2 + '@internationalized/number': 3.6.7 + '@internationalized/string': 3.2.9 + '@react-types/shared': 3.36.0(react@19.2.7) + '@swc/helpers': 0.5.23 + react: 19.2.7 + use-sync-external-store: 1.6.0(react@19.2.7) + react-virtualized@9.22.6(react-dom@19.2.7(react@19.2.7))(react@19.2.7): dependencies: '@babel/runtime': 7.29.7 diff --git a/frontend/resources/templates/index.mustache b/frontend/resources/templates/index.mustache index 289d6f9e84..453197068e 100644 --- a/frontend/resources/templates/index.mustache +++ b/frontend/resources/templates/index.mustache @@ -18,6 +18,7 @@ + {{#isDebug}} {{/isDebug}} diff --git a/frontend/resources/templates/preview-head.mustache b/frontend/resources/templates/preview-head.mustache index 962b214f3b..a27a7bed95 100644 --- a/frontend/resources/templates/preview-head.mustache +++ b/frontend/resources/templates/preview-head.mustache @@ -1,4 +1,5 @@ +