[SPIKE]feat: CTORNDSD-580: Add crossplatform support - #13
Open
Zlodej43sm wants to merge 23 commits into
Open
Conversation
…re token resolvers
…tion Added memoization to `A2UINode` using `React.memo` to prevent unnecessary re-renders in unchanged subtrees. Introduced caching for `dispatchAction`, `customRenderers`, `renderChildren`, `mergedStyles`, and `sanitizedChartAttributes` for improved performance and stability. Updated type definitions and utility methods to support these enhancements.
…resolvers Removed inline hardcoded values (e.g., font, border, padding) across multiple Web Components (Button, Input, Checkbox, Select). Integrated dynamic style resolution via `design-core` token resolvers to ensure theme consistency and support for overrides. Fixed fidelity harness font mismatch by adding correct imports. Updated components to inherit styles matching real components.
…r gaps and spacing Replaced hardcoded spacing and styling values with theme-driven resolvers across Checkbox, Input, Button, and Select components. Updated token resolvers to support shared tokens (gap, padding, typography, etc.), improving consistency and allowing theme overrides. Enhanced tests to validate fallback behavior and theme integration.
…cts for CTORNDSD-286 Deleted redundant `resolveCheckboxStyle`, `resolveInputStyle`, `resolveSelectStyle`, and `resolveTypographyStyle` tests, as well as outdated reproduction artifacts for CTORNDSD-286. Updated fidelity harness and TypeScript configs to align with theme-driven token resolution via `defaultTheme`.
Introduced new test harnesses (`shell-isolation-check.tsx` and `perf-check.tsx`) to verify Shadow DOM isolation and measure render/update performance for Lit, React, and hybrid "Lit wraps React" buttons. Added support utilities and specs for resolving theme-driven styles in `design-core`. Updated harness to align with theme-driven token resolution.
…onents README - Added "How to use" section with examples for plain HTML, vanilla JS, and React integration. - Included per-component reference table for props, events, and slots. - Documented unsupported features like `<form>` participation, CSS Parts styling, and public methods.
There was a problem hiding this comment.
Pull request overview
Introduces a new framework-agnostic gd-design-core package (token resolvers + zustand/vanilla stores) intended to support cross-platform adapters, and adds two disposable spike consumers (Lit web components + Expo React Native) to validate consumption paths.
Changes:
- Added
libs/design-core(gd-design-core) with pure token-resolver functions and zustand/vanilla state stores, plus Vitest coverage and build tooling. - Added
libs/spike-web-components(Lit) andspike-react-native(Expo) smoke tests demonstratinggd-design-coreconsumption. - Updated root workspace/scripts and TS path aliases to include the new packages.
Reviewed changes
Copilot reviewed 51 out of 53 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.base.json | Adds TS path aliases for gd-design-core. |
| spike-react-native/tsconfig.json | Expo TS config for the RN spike (includes gd-design-core resolution). |
| spike-react-native/src/components/GdButton/GdButton.tsx | RN GdButton adapter consuming resolveButtonVariantStyle. |
| spike-react-native/README.md | RN spike setup + rationale (standalone, non-workspace). |
| spike-react-native/package.json | Expo app deps/scripts, uses gd-design-core via file: dist. |
| spike-react-native/babel.config.js | Expo Babel preset setup. |
| spike-react-native/App.tsx | RN smoke-test harness rendering GdButton. |
| spike-react-native/app.json | Expo app configuration. |
| package.json | Adds workspaces/scripts for design-core and spike-web-components. |
| package-lock.json | Workspace + dependency lock updates (Lit, design-core, etc.). |
| libs/spike-web-components/vite.config.ts | Vite build config for Lit spike library output + d.ts generation. |
| libs/spike-web-components/tsconfig.lib.json | Library tsconfig for emitting declarations/build typing. |
| libs/spike-web-components/tsconfig.json | Project TS references/config root. |
| libs/spike-web-components/tsconfig.harness.json | TS config for the React consumption harness. |
| libs/spike-web-components/src/index.ts | Exports Lit GdButton element. |
| libs/spike-web-components/src/components/gd-button/gd-button.ts | Lit gd-button consuming resolveButtonVariantStyle. |
| libs/spike-web-components/README.md | Spike scope/usage notes and parallel-safety guidance. |
| libs/spike-web-components/project.json | Nx project definition for build/lint targets. |
| libs/spike-web-components/package.json | Private workspace package metadata + deps. |
| libs/spike-web-components/harness/GdButtonReact.tsx | React wrapper harness via @lit/react. |
| libs/spike-web-components/eslint.config.mjs | Project ESLint config/overrides for dependency checks. |
| libs/design-core/vitest.config.ts | Vitest config for design-core unit tests. |
| libs/design-core/vite.config.ts | Vite library build config + d.ts + exports entrypoints. |
| libs/design-core/tsconfig.spec.json | TS config for Vitest test compilation/types. |
| libs/design-core/tsconfig.lib.json | TS config for library build (declarations/composite). |
| libs/design-core/tsconfig.json | Base TS config + references for lib/spec. |
| libs/design-core/src/utils/get.ts | Local minimal get() helper (no ui runtime dependency). |
| libs/design-core/src/utils/get.spec.ts | Unit tests for get(). |
| libs/design-core/src/types.ts | Defines structural DesignCoreTheme interface. |
| libs/design-core/src/tokenResolvers/typography.ts | Typography token resolver. |
| libs/design-core/src/tokenResolvers/typography.spec.ts | Typography resolver tests. |
| libs/design-core/src/tokenResolvers/select.ts | Select token resolver. |
| libs/design-core/src/tokenResolvers/select.spec.ts | Select resolver tests. |
| libs/design-core/src/tokenResolvers/input.ts | Input token resolver. |
| libs/design-core/src/tokenResolvers/input.spec.ts | Input resolver tests. |
| libs/design-core/src/tokenResolvers/index.ts | Barrel exports for token resolvers. |
| libs/design-core/src/tokenResolvers/checkbox.ts | Checkbox token resolver. |
| libs/design-core/src/tokenResolvers/checkbox.spec.ts | Checkbox resolver tests. |
| libs/design-core/src/tokenResolvers/button.ts | Button token resolver (state-keyed style objects). |
| libs/design-core/src/tokenResolvers/button.spec.ts | Button resolver tests. |
| libs/design-core/src/stores/index.ts | Barrel exports for stores. |
| libs/design-core/src/stores/createSelectStore.ts | Shared Select behavioral store (open/close/select/search). |
| libs/design-core/src/stores/createSelectStore.spec.ts | Select store tests. |
| libs/design-core/src/stores/createInputStore.ts | Shared Input behavioral store + debounce helper. |
| libs/design-core/src/stores/createInputStore.spec.ts | Input store/debounce tests. |
| libs/design-core/src/stores/createCheckboxStore.ts | Shared Checkbox behavioral store (controlled/uncontrolled). |
| libs/design-core/src/stores/createCheckboxStore.spec.ts | Checkbox store tests. |
| libs/design-core/src/index.ts | Public exports for the package. |
| libs/design-core/README.md | Package goals, scope, and usage guidance. |
| libs/design-core/project.json | Nx project definition for build/lint/release publish. |
| libs/design-core/package.json | ESM package metadata + subpath exports. |
| libs/design-core/eslint.config.mjs | Project ESLint config/overrides for dependency checks. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
- Removed all mentions of CTOR-related ticket numbers (e.g., CTORNDSD-580, CTORNDSD-590, CTORNDSD-581) across files including descriptions, comments, and documentation. - Simplified package descriptions and readme files for `spike-react-native`, `spike-web-components`, and `gd-design-core`. - Updated metadata and removed unnecessary references to spike plans and tickets. - Ensured parallel-safety notes remain clear but concise.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 53 out of 55 changed files in this pull request and generated 5 comments.
Comments suppressed due to low confidence (2)
spike-react-native/README.md:33
- This section says
spike-web-componentsis the only thing in the repo that touches shared root config and that there is notsconfig.base.jsonpath alias change, but this PR also addsgd-design-coreworkspace +tsconfig.base.jsonpath mappings. Updating the wording will prevent confusion for anyone reading this README in the context of the current repo state.
libs/spike-web-components/README.md:11 - This README says the package is “Not part of any
build:*root script”, but the rootpackage.jsonin this PR addsbuild:spike-web-components/type-check:spike-web-componentsscripts. The doc should reflect the current supported invocation paths.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
…paths in `gd-button` component - Updated `lint` and `lint:fix` scripts in `package.json` to exclude `spike-react-native`. - Simplified import paths in `gd-button` to use `gd-design-core` package.
# Conflicts: # libs/design-core/src/tokenResolvers/typography.ts # libs/spike-web-components/README.md # libs/spike-web-components/package.json # libs/spike-web-components/src/components/gd-button/gd-button.ts # libs/ui/llms.txt # libs/ui/src/ai/README.md # libs/web-components/project.json
…tive` package description
… clean up libraries file structure - Introduced TypeScript JSX typings for `gd-checkbox`, `gd-input`, and `gd-select` for React compatibility. - Added `gd-design-library` as a dependency in `package-lock.json`. - Removed unused files and adjusted libraries directory and structure.
- Eliminated all CTOR ticket references and replaced related documentation/coding comments with concise descriptions. - Adjusted component styles for gd-button, typography, and select, and updated theme-related tokens. - Reduced duplication in component harness files and standardized documentation across web-component harnesses. - Optimized `defaultTheme.json` sizing tokens and normalized focus-visible styles.
Zlodej43sm
changed the title
tjeleascov
approved these changes
Jul 23, 2026
* chore: CTORNDSD-646: remove SSR DSD harness files, add documentation and tooling for bundle size verification - Deleted outdated SSR declarative shadow DOM harness files (`ssr-dsd-hydrated.html` and `ssr-dsd-static.html`). - Added migration documentation for styling and theming (`docs/webcomponents-migration/06-styling-theming.md`) and component complexity matrix (`docs/webcomponents-migration/12-complexity-matrix.md`). - Introduced bundle size regression check script (`check-bundle-size.mjs`) with tolerance support for CI validation. - Updated baseline creation and verification for `measure:web-components-size`. * docs: CTORNDSD-646: correct superseded bundle figures and branch reference The decision README, the options matrix, and the monorepo doc still quoted the pre-646b bundle measurements (9.11 / 16.38 / 113.18 kB). Those were superseded by 10-performance-report.md after ElementInternals and ::part() landed, so the summary a reviewer reads to approve disagreed with the reproduction command it cites (npm run check:web-components-size). Align all three to the current measured figures (11.06 / 17.94 / 105.72 kB) and cite 10-performance-report.md rather than FINDINGS.md section 3. FINDINGS.md section 3 keeps its original numbers by design - it is the chronological log, and section 18 already records the supersession. Also fix the branch reference, which still read feature/CTORNDSD-580. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * fix: CTORNDSD-646: bind theme in SSR harness, narrow the zero-JS claim Executing every step of the demo walkthrough surfaced two tangled problems on the SSR/DSD pages. Only one was a harness bug. Fixed - the harness rendered without a theme. ssr-dsd-render.ts bound no `.theme`, so every token resolved to its own placeholder fallback and emitted `font-family:theme.font.family;font-size:font.size.h1` - invalid CSS the browser discards, leaving the heading in Times. That is the real components' own themeless behavior (FINDINGS.md sections 13, 16), not an SSR defect, but it made the page contradict its own "visibly styled" instruction. Binding defaultTheme matches fidelity-check.tsx and form-participation-check.ts; gd-typography now server-renders "Fira Sans", 48px, 56px with zero unresolved literals. Not fixed, architectural - binding the theme did not style gd-button. Section 12's rewrite moved its theme CSS into a per-instance Constructable StyleSheet. Only `static styles` and inline style attributes serialize into a <template shadowrootmode>; adoptedStyleSheets cannot, and with zero JS nothing runs to adopt one. Section 18.7 noted "the server-rendered output never carried it either way" but read it as harmless and never revisited section 2's "correctly styled" claim. Scope is 1 of 5 atoms - the others use styleMap. The mechanism at fault is the same shared-stylesheet cache credited in section 18.1 for the 50% mount / 57% update improvement, so the performance strategy and the no-JS story are in direct tension for the remaining 35 ports. - ssr-dsd-render.ts: bind defaultTheme; rewrite both pages' copy to state what each element actually demonstrates - ssr-dsd-hydrate-check.ts: assign theme on hydration and record the button background before/after plus adopted-sheet count, read after getAnimations() settles so the background-color transition is not caught mid-flight - FINDINGS.md: new section 20; supersession note on section 2 - 09-ssr-hydration.md, docs README: narrow the unqualified zero-JS styling claim - DEMO.md: new verified 3-minute demo script verify:web-components exits 0. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * chore: remove DEMO.md walkthrough script as no longer needed * feat: CTORNDSD-646: Web components Implement `gd-button` form submission behavior for `type="submit"` and `type="reset"` --------- Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com> Co-authored-by: Zlodej43sm <8863227+Zlodej43sm@users.noreply.github.com>
* chore: remove spike-react-native smoke-test harness - Deleted App.tsx and package-lock.json used for the `spike-react-native` smoke test. - Removed dependencies and styles associated with its functionality. * chore: add focus ring support and visual fidelity fixes for GdInput, GdButton, and GdSelect - Implemented focus ring approximation for `GdInput`, `GdButton`, and `GdSelect` components using absolutely positioned sibling layers. - Added tests for focus ring behavior, except where not supported by test-rendering tools. - Modified Metro config to enhance React dependency resolution and added dist support for `libs/ui/styles.css`. - Updated input and select token resolvers to include `focusColor` theme token. - Added React Native web dependencies, adjusted build scripts, and expanded README documentation for development. * chore: remove `spike-react-native` files and unused components - Deleted `App.tsx`, `GdButton.tsx`, `package.json`, and `README.md` from `spike-react-native` directory. * chore: update web components to use `gd-design-core` for imports - Consolidated import paths across components to reference `gd-design-core`. - Simplified theme utilities and token resolver imports in `gd-checkbox`, `gd-button`, `gd-input`, `gd-select`, and `gd-typography`. * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * chore: add explicit `type` annotations for imports from `gd-design-core` across components - Updated imports in `gd-button`, `gd-select`, `gd-input`, `gd-checkbox`, and `gd-typography` to explicitly use `type` annotations. * feat: CTORNDSD-590: Add font loading and registry to fix React Native compatibility - Introduced `toFontFamily()` utility to resolve CSS font stacks into loadable native font faces. - Added `fonts.ts` for face registration via `expo-font`; ensures Fira Sans and Fira Code assets are loaded. - Updated `App.tsx` to block rendering until fonts are fully loaded. - Expanded GdButton tests and validated alignment with design tokens. - Fixed `dev:react-native` to properly forward Expo CLI flags. --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Co-authored-by: Zlodej43sm <8863227+Zlodej43sm@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Add webcomponents support