feat(dashboard): ui component library#198
Open
merencia wants to merge 7 commits into
Open
Conversation
merencia
changed the title
merencia
changed the title
GiovaniGuizzo
requested changes
Jul 4, 2026
GiovaniGuizzo
left a comment
GiovaniGuizzo
left a comment
Contributor
There was a problem hiding this comment.
Are we using TailwindCSS or inline styles? I think we should use TailwindCSS instead of inlining everything.
syncs the sidequest.js design system: ships the tokens (colors, typography, spacing, radii, fonts) plus the .sq-* base layer as @sidequest/dashboard/ui/styles.css, and drops tailwind from the ui in favor of the design system's css-variable tokens with inline-styled components. adds the first two primitives, Card and Badge, ported faithfully from the design system, each at 100% test coverage with storybook stories rendered on the dark product surface.
Icon resolves lucide-react glyphs by name (the design system's iconography), keeping the string-name api; Button ports the design system's action control with primary/default/outline/ghost/danger variants, three sizes, and optional leading/trailing icons. both at 100% coverage with stories. lucide-react is an optional peer, external to the lib build.
ports the rest of the design system into @sidequest/dashboard/ui: Input, Select, FormField, Table, Pagination, StatCard, StepProgress, CodeBlock, Sidebar, NavItem and ThemeToggle. every primitive is faithful to the design system (css-variable tokens + inline styles), typed, and at 100% test coverage with storybook stories. the ui library is now 15 components. storybook gets a dark/light toolbar switch so every component can be verified in both themes; the tokens already flip via [data-theme], so Card/Button/Icon and friends adapt with no component changes.
…t theme Badge status colors now come from the theme-aware --status-* tokens with a color-mix fill, so pills stay legible in the light theme instead of washing out. CodeBlock text uses a fixed light color since the code surface is always near-black in both themes.
the code block surface now adapts: near-black in dark, light gray in light, with theme-aware text on top. reverts the always-dark-surface assumption.
the ui components were authored with inline style objects. this reworks them to tailwind v4 utilities that read from the design tokens, dropping daisyui from the mix. styles.css bridges the token css vars into tailwind via `@theme inline` (kept inline so the semantic colors stay theme-aware), the shipped stylesheet is now compiled by the tailwind cli, and the sq-* class names stay on the elements as styling hooks. behavior, props and the public api are unchanged.
merencia
force-pushed
the
feat/dashboard-ui-components
branch
from
5234a3c to
bbf04c4
Compare
GiovaniGuizzo
left a comment
GiovaniGuizzo
left a comment
Contributor
There was a problem hiding this comment.
https://tailwindcss.com/docs/dark-mode
Maybe there is a better way of doing theming with Tailwindcss other than a useEffect. I suspect the window flicker with the theme change after mounting the components, no?
| /** Props for the {@link Icon} component. Extends the underlying Lucide SVG props. */ | ||
| export interface IconProps extends Omit<LucideProps, "ref"> { | ||
| /** Lucide icon name, kebab or space separated, e.g. "play", "x", "refresh-ccw". */ | ||
| name: string; |
Contributor
There was a problem hiding this comment.
Maybe this could be "keyof typeof icons"?
Comment on lines
+20
to
+31
| <button | ||
| type="button" | ||
| disabled={!enabled} | ||
| onClick={enabled ? onClick : undefined} | ||
| className={cn( | ||
| "h-control-sm min-w-8 px-[0.7rem] text-xs font-medium font-sans border border-edge-strong", | ||
| active ? "text-on-brand bg-brand" : "text-fg bg-surface-raised", | ||
| enabled ? "cursor-pointer opacity-100 enabled:hover:bg-surface-hover" : "cursor-not-allowed opacity-40", | ||
| )} | ||
| > | ||
| {content} | ||
| </button> |
Contributor
There was a problem hiding this comment.
Shouldn't we be using our own Button.tsx component here?
| export function Sidebar({ | ||
| logoSrc, | ||
| brand = "Sidequest", | ||
| footer = "v0.1.0 · OSS Edition", |
Type the Icon `name` prop (and the icon props that feed it: Button, NavItem, StatCard, StepProgress) as `IconName = keyof typeof icons`, so a wrong icon name is a compile error instead of a silent no-op. Names are now the Lucide PascalCase keys (the package's own export names), dropping the kebab->Pascal conversion. The unknown-name guard stays for runtime safety. Addresses review on Icon.tsx (Giovani: "keyof typeof icons?").
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
2 participants
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.
stacked on #197. the
@sidequest/dashboard/uicomponent library adding primitives