mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 01:45:10 +03:00
55ee3e0f2c
## What kind of change does this PR introduce? New shared component + docs. ## What is the current behavior? `AdvancedConfiguration` and `InternalOnlyConfiguration` in the New Project form each contain bespoke `<Collapsible>` markup. There's no reusable collapsible section component available to other card/panel forms. ## What is the new behavior? - Extracts a shared `CollapsibleCardSection` into `packages/ui-patterns`, exported via `ui-patterns/CollapsibleCardSection` - Refactors `AdvancedConfiguration` and `InternalOnlyConfiguration` to use it - Adds design system docs with a live demo at `/docs/fragments/collapsible-card-section` This is a prereq for #45707 and #46187, which both consume this component. | Example Usage | | --- | | <img width="1464" height="500" alt="CleanShot 2026-05-22 at 15 20 38@2x" src="https://github.com/user-attachments/assets/5b88ef8d-3f9a-4454-b246-5bbaf53e027a" /> | ## To test - [ ] Check that [the Design System page](https://design-system-git-dnywh-collapsible-card-section-supabase.vercel.app/design-system/docs/fragments/collapsible-card-section) makes sense - [ ] Check that the [new project form](https://studio-staging-git-dnywh-collapsible-card-section-supabase.vercel.app/dashboard/new/) collapsible sections work as expected <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Introduced CollapsibleCardSection component as a reusable UI pattern for collapsible card-based content with customizable title, description, and open state. * Refactored project configuration interfaces to use the new component for improved visual consistency. * **Documentation** * Added comprehensive documentation with interactive examples and multiple usage patterns for CollapsibleCardSection. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46250?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Supabase UI Patterns
This package should be used for components which are built using NPM libraries (react-markdown, reactflow for example),
which make no sense to be included in all apps. It should also be used for components which are constructed using various
components from the ui package.
This package does not have a barrel file - each component has to be imported from its index
(ui-patterns/PrivacySettings, for example). This is intentional so that adding a new component which is used only in
1 or 2 apps doesn't burden the rest of the apps.