Feature/design system#18
Open
Ryan-A-B wants to merge 17 commits into
Open
Conversation
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Introduces a new @beddybytes/ui package implementing design tokens, core React components, and a Vite-powered gallery/prototype app to preview the design system.
Changes:
- Added a Vite + React + Tailwind setup for the UI workspace.
- Implemented foundational design tokens (brand/alias/mapped theme) and shared base styles.
- Added a component library plus an interactive gallery/prototype viewer and documentation (
DESIGN.md).
Reviewed changes
Copilot reviewed 38 out of 40 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| ui/vite.config.ts | Adds Vite config for React plugin and dev server host restrictions. |
| ui/tsconfig.json | Establishes TypeScript strict settings for the UI package. |
| ui/tailwind.config.js | Adds Tailwind config placeholder for the UI package. |
| ui/src/vite-env.d.ts | Adds Vite client type references for TS projects. |
| ui/src/tokens/theme/dark.css | Defines mapped dark theme tokens used by components/layouts. |
| ui/src/tokens/responsive.css | Defines breakpoint tokens for responsive layouts. |
| ui/src/tokens/brand.css | Defines raw brand tokens (colors, scale, fonts). |
| ui/src/tokens/alias.css | Defines semantic alias tokens referencing the brand layer. |
| ui/src/styles.css | Wires Tailwind + tokens + shared global utilities/base styles. |
| ui/src/index.ts | Exposes component exports and imports package styles. |
| ui/src/gallery/main.tsx | Adds gallery app entrypoint rendering GalleryPages. |
| ui/src/gallery/gallery.css | Adds gallery layout/styling for token + component previews. |
| ui/src/gallery/GalleryPages.tsx | Implements gallery routing, token pages, component demos, and prototypes. |
| ui/src/examples/prototype/README.md | Documents purpose/scope of prototype examples. |
| ui/src/examples/prototype/MarketingPagePrototype.tsx | Adds a marketing layout prototype using the UI components. |
| ui/src/examples/prototype/AppHomePrototypes.tsx | Adds app layout prototypes using UI components and tokens. |
| ui/src/examples/prototype/AppHomePrototypes.css | Adds prototype-specific layout CSS for the app prototypes. |
| ui/src/components/classNames.ts | Adds a small helper to compose className strings. |
| ui/src/components/VideoControls/index.tsx | Adds a clustered video control component. |
| ui/src/components/TextInput/index.tsx | Adds a styled text input with invalid state styling. |
| ui/src/components/StarrySky/index.tsx | Adds deterministic starfield surface component with intensity variants. |
| ui/src/components/StarryNight/index.tsx | Adds deterministic starfield background surface component. |
| ui/src/components/SessionTimer/index.tsx | Adds session timer control cluster component. |
| ui/src/components/Select/index.tsx | Adds a custom select UI backed by a hidden native <select>. |
| ui/src/components/PasswordInput/index.tsx | Adds password input with show/hide toggle. |
| ui/src/components/Panel/index.tsx | Adds a panel surface primitive with tone variants. |
| ui/src/components/IconButton/index.tsx | Adds icon-only button component with variants/sizes. |
| ui/src/components/FormField/index.tsx | Adds form field wrapper handling label/hint/error. |
| ui/src/components/ConnectionStatusBadge/index.tsx | Adds compact connection status badge component. |
| ui/src/components/Checkbox/index.tsx | Adds styled checkbox with optional label. |
| ui/src/components/Button/index.tsx | Adds button component with variants/sizes/loading state. |
| ui/src/components/Badge/index.tsx | Adds badge component with tone variants. |
| ui/src/components/Alert/index.tsx | Adds alert component with tone variants and icons. |
| ui/postcss.config.js | Configures PostCSS plugins (Tailwind + autoprefixer). |
| ui/package.json | Defines UI package metadata, scripts, and dependencies. |
| ui/index.html | Adds HTML entry for the gallery app. |
| ui/DESIGN.md | Adds design system documentation and usage guidelines. |
| ui/.gitignore | Ignores build output and node_modules for the UI workspace. |
| scripts/ui/run.sh | Adds Docker-based helper script to run the UI dev server. |
Files not reviewed (1)
- ui/package-lock.json: Language not supported
Comments suppressed due to low confidence (2)
ui/src/styles.css:1
styles.cssimports prototype-only CSS (./examples/prototype/AppHomePrototypes.css). Sincesrc/index.tsimports./styles.css, any consumer importing@beddybytes/uiwill also pull in prototype layout styles, which is likely an unintended public side effect. Split prototype/gallery styles into a separate stylesheet (used only by the gallery app) and keep the library’s exported styles limited to tokens + component primitives.
ui/vite.config.ts:1- Restricting
server.allowedHoststo['beddybytes-ui']can break local dev access vialocalhost/127.0.0.1(common when port-forwarding or accessing the dev server outside Docker DNS). If the intent is to harden against DNS rebinding while still supporting typical local workflows, includelocalhostand127.0.0.1(or make this conditional on environment/CI) rather than a single hostname.
Comment on lines
+6
to
+21
| "main": "./dist/index.js", | ||
| "types": "./dist/index.d.ts", | ||
| "exports": { | ||
| ".": { | ||
| "types": "./dist/index.d.ts", | ||
| "import": "./dist/index.js" | ||
| }, | ||
| "./styles.css": "./dist/styles.css" | ||
| }, | ||
| "files": [ | ||
| "dist", | ||
| "DESIGN.md" | ||
| ], | ||
| "scripts": { | ||
| "dev": "vite --host 0.0.0.0", | ||
| "build": "tsc && vite build", |
Comment on lines
+19
to
+24
| "scripts": { | ||
| "dev": "vite --host 0.0.0.0", | ||
| "build": "tsc && vite build", | ||
| "typecheck": "tsc --noEmit", | ||
| "preview": "vite preview --host 0.0.0.0" | ||
| }, |
Comment on lines
+68
to
+97
| className="sr-only" | ||
| onChange={(event) => { | ||
| set_internal_value(event.currentTarget.value) | ||
| onChange?.(event) | ||
| }} | ||
| tabIndex={-1} | ||
| > | ||
| {children} | ||
| </select> | ||
|
|
||
| <button | ||
| type="button" | ||
| aria-haspopup="listbox" | ||
| aria-expanded={is_open} | ||
| aria-controls={listbox_id} | ||
| disabled={disabled} | ||
| className={classNames( | ||
| 'grid h-11 w-full items-center rounded-md border bg-input text-left text-text', | ||
| leading_icon ? 'select-trigger-with-icon' : 'select-trigger-without-icon', | ||
| leading_icon ? 'pl-0' : 'pl-4', | ||
| 'pr-3 transition disabled:cursor-not-allowed disabled:opacity-55', | ||
| 'focus-ring', | ||
| invalid ? 'border-danger' : 'border-input-border hover:border-input-border-hover' | ||
| )} | ||
| onClick={() => set_is_open((current) => !current)} | ||
| onBlur={(event) => { | ||
| if (!event.currentTarget.parentElement?.contains(event.relatedTarget)) { | ||
| set_is_open(false) | ||
| } | ||
| }} |
Comment on lines
+6
to
+10
| export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> { | ||
| invalid?: boolean | ||
| leading_icon?: React.ReactNode | ||
| menu_placement?: 'bottom' | 'top' | ||
| } |
| return { metadata: '', body: source } | ||
| } | ||
|
|
||
| const [, metadata = '', body = ''] = source.split('---') |
Comment on lines
+17
to
+50
| const hash_seed = (seed: string): number => { | ||
| let hash = 2166136261 | ||
| for (let index = 0; index < seed.length; index += 1) { | ||
| hash ^= seed.charCodeAt(index) | ||
| hash = Math.imul(hash, 16777619) | ||
| } | ||
| return hash >>> 0 | ||
| } | ||
|
|
||
| const next_value = (value: number): number => { | ||
| return (Math.imul(value, 1664525) + 1013904223) >>> 0 | ||
| } | ||
|
|
||
| const build_stars = (seed: string, count: number): Star[] => { | ||
| const stars: Star[] = [] | ||
| let state = hash_seed(`${seed}:${count}`) | ||
|
|
||
| for (let index = 0; index < count; index += 1) { | ||
| state = next_value(state) | ||
| const left = (state / 4294967295) * 100 | ||
| state = next_value(state) | ||
| const top = (state / 4294967295) * 100 | ||
| state = next_value(state) | ||
| const size = 1 + (state / 4294967295) * 1.8 | ||
| state = next_value(state) | ||
| const opacity = 0.28 + (state / 4294967295) * 0.56 | ||
| state = next_value(state) | ||
| const blur = (state / 4294967295) > 0.86 ? 4 : 0 | ||
|
|
||
| stars.push({ left, top, size, opacity, blur }) | ||
| } | ||
|
|
||
| return stars | ||
| } |
Comment on lines
+30
to
+43
| "@tailwindcss/postcss": "^4.3.0", | ||
| "@vitejs/plugin-react": "^4.2.1", | ||
| "autoprefixer": "^10.4.19", | ||
| "lucide-react": "^0.468.0", | ||
| "postcss": "^8.4.38", | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0", | ||
| "tailwindcss": "^4.3.0", | ||
| "typescript": "^5.3.3", | ||
| "vite": "^5.2.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/react": "^18.2.55", | ||
| "@types/react-dom": "^18.2.19" |
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.
No description provided.