@kofile/gds-react

Welcome to GDS React

This package is designed to help you streamline your development process and create beautiful user interfaces.

Getting Started

To get started with GDS React, please refer to our documentation on Storybook. Storybook provides an interactive and visual way to explore and understand how to use our components and features.

Explore the Documentation

Server-Side Rendering (SSR) Compatibility

Our design system components are categorized by their SSR compatibility to help you choose the right components for your rendering strategy.

✅ SSR Compatible Components

These components render purely static HTML and work perfectly with server-side rendering:

Basic UI Components:

• Button - Pure HTML button with data attributes
• Badge - Simple span element with styling props
• Card - Basic div container with data attributes
• Loader - Static div element
• Divider - Uses Radix Separator (SSR compatible)
• Avatar - Uses Radix Avatar (SSR compatible)
• Banner - Static div with role="status"
• Navigation - Pure HTML nav structure with compound components
• Table - Standard HTML table elements with data attributes
• Input - Uses React.useId() but renders static HTML
• Label - Basic label element
• FormLabel - Basic label element
• FieldMessage - Static div for form messages
• Link - Basic anchor element
• Logo - Image element
• IconWrap - Static wrapper element
• EmptyState - Static content container

Form Components:

• Checkbox - Uses Radix Checkbox (SSR compatible)
• Switch - Uses Radix Switch (SSR compatible)
• RadioGroup - Uses Radix RadioGroup (SSR compatible)
• Slider - Uses Radix Slider (SSR compatible)
• Progress - Uses Radix Progress (SSR compatible)

⚠️ SSR with Hydration Required

These components need client-side JavaScript to function but can be server-rendered with hydration:

Interactive Components:

• Accordion - Uses Radix Accordion, needs hydration for expand/collapse
• Tabs - Uses Radix Tabs, needs hydration for tab switching
• Collapsible - Uses Radix Collapsible, needs hydration for show/hide
• Select - Uses Radix DropdownMenu, needs hydration for dropdown behavior
• Menu - Uses Radix DropdownMenu, needs hydration for menu interactions
• Popover - Uses Radix Popover, needs hydration for positioning and show/hide
• Tooltip - Uses Radix Tooltip, needs hydration for hover/focus behavior

Overlay Components:

• Dialog - Uses Radix Dialog, needs hydration for portal rendering and focus management
• Modal - Uses Radix Dialog, needs hydration for portal rendering and focus management
• AlertDialog - Uses Radix AlertDialog, needs hydration for portal rendering
• Toast - Uses Radix Toast, needs hydration for portal rendering and auto-dismiss

❌ CSR Only Components

These components require client-side only features and cannot be server-rendered:

Complex Interactive Components:

• Table.AdjustmentBar - Uses useEffect for lifecycle management and complex state
• Table.ColumnMenu - Complex state management and DOM manipulation
• Table.IndeterminateCheckbox - Complex checkbox state management

Components with Browser APIs:

• Navigation demos - Use custom hooks like useIsMobile and useLockBodyScroll that depend on window object
• Select demos - Use useEffect with event listeners and DOM manipulation
• Table demos - Use useReactTable hook with complex state management

Usage Recommendations

• For SSR: Use the SSR-compatible components directly
• For SSR with Hydration: Use Next.js dynamic imports with ssr: false for overlay components
• For CSR Only: These should only be used in client-side rendered applications
• Testing: Test SSR compatibility by disabling JavaScript in your browser to see which components still function

Features

GDS React offers a range of features that can enhance your development workflow. Feel free to browse through the Storybook documentation to discover what our package can do for you.

If you encounter any issues or have questions, please don't hesitate to reach out to our support team or contribute to the project on GitHub.

Happy coding!