feat: add Modal compound component to registry#2
Open
calebpanza wants to merge 2 commits into
Open
Conversation
Add a Modal compound-component family to the crescent-ui shadcn registry,
generalized from the Post for Me dashboard and DXLogic app-level modal
implementations into registry source (cn-* tokens, icon-agnostic, dual-base).
- registry/bases/{base,radix}/ui/modal.tsx — Modal layout (Header/Body/
Columns/Aside/Footer) + replace-style ModalViews navigation, composed on
the consumer's dialog + button (registryDependencies)
- app/ui/dialog.tsx — Base UI Dialog chrome the showcase renders Modal on
- cn-dialog-content radius token across all 8 styles
- modal-view keyframes shipped via the registry item css field (+ app.css
for the live showcase)
- build-registry.ts: emit registryDependencies + css; registry.json + demo
Carousel slides are a planned follow-up (needs embla + a Carousel primitive).
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Add the slidable carousel variation (ModalCarousel, ModalCarouselViewport, ModalSlide, ModalCarouselDots, ModalCarouselNav, useModalCarousel) to the Modal registry source, completing the full family reconciled from the Post for Me and DXLogic references. - Merge carousel parts into the single registry modal.tsx (base + radix), composing the consumer's stock shadcn carousel via @/ui/carousel - Add carousel to modal's registryDependencies (alongside dialog + button) - Add app/ui/carousel.tsx (embla) so the showcase renders the carousel - Add a Slidable carousel showcase example - Rebuild registry-dist (32 items, no unresolved cn-*)
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.
Assignee: Caleb Panza
Summary
Adds the
Modalcompound-component family to the crescent-ui shadcn registry (CUI-1). The family is authored as registry source one level up from the resolved app output (the Post for Me / DXLogic copies are the result of ashadcn add):cn-*tokens instead of literal colors,IconPlaceholderinstead of a hard icon import, dual-base (Base UI + Radix), and a self-contained item that ships its owncss.This PR now delivers the full family — Layout + Views + Carousel — reconciled from the pasted Post for Me reference and the live DXLogic copy (
web/app/components/modal/), which were verified byte-identical.What's in the family
Modal/ModalContent(framed|simple),ModalHeader/ModalBody/ModalColumns·ModalColumn·ModalAside/ModalFooter.ModalCarousel/ModalCarouselViewport/ModalSlide/ModalCarouselDots/ModalCarouselNav+useModalCarousel. Ordered horizontal slides with deliberate, button-driven stepping (drag off).ModalViews/ModalView/ModalViewsBack+useModalViews.How the carousel slice fits the registry model
carouselis a stock shadcn primitive, so — exactly likedialogandbutton— it's referenced viaregistryDependenciesrather than re-authored as a crescent item. The modal source composes the consumer's@/ui/carousel; embla arrives transitively through that primitive. Anapp/ui/carousel.tsx(embla) is added solely so the showcase can render the carousel live.Changes
registry/bases/{base,radix}/ui/modal.tsx— merged theModalCarouselparts into the single source (mirrors howModalViewswas merged).scripts/build-registry.ts+registry.json—carouseladded to modal'sregistryDependencies; descriptions refreshed.app/ui/carousel.tsx(new),embla-carousel-reactdependency — showcase rendering.app/showcase/components/modal-demo.tsx+demos.tsx— a "Slidable carousel" example.registry-dist/*/modal.json×16 — regenerated.Verification
registry:build— 32 items, no unresolvedcn-*.typecheck,lint, fullbuild(SSR + client) — all green.Closes CUI-1.