feat(theme): add input-date recipe#278
Open
alexgrozav wants to merge 3 commits into
Open
Conversation
Add a segmented date-input recipe family inspired by Nuxt UI's input-date: a wrapper recipe (useInputDateRecipe) that owns the field surface and :focus-within ring as a member of the field family, plus a segment recipe (useInputDateSegmentRecipe) for the individually-focusable date parts. Includes tests, Storybook showcase (registration, component, grids, stories), and docs. Refs UXF-2.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Raw selector() declarations don't auto-declare numeric spacing multiplier variables the way recipe base/variant values do, so referencing "@0.125" in the input-date wrapper setup threw "Variable 0.125 is not defined" at Storybook build time. Inline the calc against the spacing base variable instead, matching the calendar recipe pattern. Update the test instance to declare spacing. Refs UXF-2.
Replace the verbose css`calc(${ref("spacing")} * 0.125)` setup-selector
form with the embedded-reference expression `calc(@spacing * 0.125)`.
Styleframe's resolver parses an @-ref embedded in an expression without
validation, so a raw selector can scale a token inline without a
pre-declared multiplier variable. The arithmetic must stay inside calc()
or the output is invalid CSS (var(--spacing) * .125).
Document the pattern in the implement-recipe and verify-recipe skills,
and promote the Storybook production build to a required verification
step (it is the only check that catches undefined-token errors).
Refs UXF-2.
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
1 participant
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.
Summary
Adds a segmented Input Date recipe family to
@styleframe/theme, inspired by Nuxt UI'sinput-date. It styles the segmented date input surface only — calendar/popover styling stays in the existingcalendarrecipe.Two recipes:
useInputDateRecipe()— the wrapper that owns the visual field (border, background, padding,:focus-withinring). A member of the field recipes family, so it shares the Input recipe's color / style / state surface: Container colors (light/dark/neutral),default/soft/ghostvariants,sm/md/lgsizes, andinvalid/disabled/readonlystates. Its setup callback lays the inner.input-date-fieldrow out as flex and registers the muted.input-date-separatorglyph.useInputDateSegmentRecipe()— the individually-focusable date/time segment. Transparent, inherits typography from the wrapper, centers digits with tabular figures, and paints a:focushighlight (@color.primary/@color.white). Singlesizeaxis.What's included
theme/src/recipes/input-date/(useInputDateRecipe,useInputDateSegmentRecipe, barrel) + root barrel export.InputDate.vue,InputDateGrid.vue/InputDateSizeGrid.vuepreview grids, and 15 stories underTheme/Recipes/Forms/InputDate.apps/docs/content/docs/05.components/05.forms/06.input-date.md, grounded in the recipe source with 10 live story embeds. The forms docs were renumbered (06.otp → 07.otp, …) to slotinput-datealphabetically betweeninputandotp; routes strip numeric prefixes, so the renumber is link-safe.Verification
pnpm typecheck— 15/15 tasks pass (incl. storybookvue-tsc)pnpm --filter @styleframe/theme test— 288 files / 3245 tests passpnpm lint(oxlint) — 0 errors, no warnings in input-dateRefs
Refs UXF-2
Test plan
pnpm typecheckpnpm --filter @styleframe/theme testpnpm lintTheme/Recipes/Forms/InputDatestories (colors, variants, sizes, states)06.input-date.mdrenders and the 10 story-preview embeds resolve