Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Conversation

@vineethasok
Copy link
Collaborator

Replaces styled-components with SCSS modules across all components, introduces a new theme system with build-time configuration, and adds a Vite plugin for CSS variable generation. Updates Storybook to support the new theming approach, removes legacy theme and style files, and provides migration and build-time config documentation. This results in improved bundle size, faster theme switching, and better tree-shaking support.

Replaces styled-components with SCSS modules across all components, introduces a new theme system with build-time configuration, and adds a Vite plugin for CSS variable generation. Updates Storybook to support the new theming approach, removes legacy theme and style files, and provides migration and build-time config documentation. This results in improved bundle size, faster theme switching, and better tree-shaking support.
@vineethasok vineethasok self-assigned this Oct 1, 2025
@vercel
Copy link

vercel bot commented Oct 1, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
click-ui Ready Ready Preview Comment Nov 14, 2025 2:24pm

Update package.json and package-lock.json to reflect the new version 0.0.234-sc-deprecation.1. This is for testing the functionality
vineethasok and others added 2 commits October 9, 2025 15:31
…App Router compatibility

Add the "use client" directive to 42 component files to ensure proper client-side rendering in Next.js 13+ App Router environments. These components use React hooks, event handlers, and browser APIs that require client-side execution.

Components updated:
- Form components (Checkbox, Switch, RadioGroup, TextField, NumberField, etc.)
- Interactive UI (Button, IconButton, Dropdown, Popover, Dialog, etc.)
- Layout components (Accordion, Tabs, Table, FileTabs, etc.)
- Navigation (Pagination, Sidebar components)
- Feedback (Alert, Toast, Tooltip, HoverCard, ProgressBar)
- Data input (DatePicker, FileUpload, AutoComplete, Select)

This change enables these components to work seamlessly in React Server Component contexts while maintaining their interactive functionality.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
Eliminates the 'classic' theme from theme lists, configuration, and code logic. Removes classic theme token files and CSS, updates documentation, and refactors theme hooks and context to only support 'light', 'dark', and 'system' themes. Cleans up unused auto theme logic and ensures all theme switching and CSS variable generation use the new approach.
@serdec
Copy link
Member

serdec commented Oct 13, 2025

do we want to migrate to scss? i thought we opted for standard css

@vineethasok
Copy link
Collaborator Author

vineethasok commented Oct 13, 2025

do we want to migrate to scss? i thought we opted for standard css

I think scss we can add nested content easily. It would be better for DX. The build data contains css and not scss as output

@serdec
Copy link
Member

serdec commented Oct 13, 2025

I think scss we can add nested content easily. It would be better for DX. The build data contains css and not scss as output

my preference is strongly for css as overtime it tends to include the best features from scss and doesn't add any other dependency

Introduces a new config/ directory with universal configuration plugins for Vite, Webpack, Rollup, and Next.js, including a shared core, type definitions, and documentation. Updates package.json and package-lock.json to add new devDependencies and peerDependencies for bundler support. Adds tsconfig.config.json for TypeScript configuration of the new plugins.
…eration

Replaces 'systemModeOverrides' with a top-level 'dark' property in theme config for dark mode overrides. Updates ClickUIProvider and ServerClickUIProvider to merge dark overrides and generate CSS variables using light-dark() only for color variables, with separate handling for non-color variables. Cleans up config loading, adds getThemeValue utility, and updates Vite plugin to match new config structure.
Updated dayjs plugin imports to use explicit .js extensions in DateDetails.tsx. Refactored linkStyles.ts to use double quotes for consistency and converted linkClasses to an arrow function. Added import for global theme styles in index.ts to ensure styles are included when using the library.
Add Node.js environment to ESLint config, update .gitignore to exclude generated SCSS and CSS declaration files, and adjust VSCode settings to hide these files from search and file explorer. Refactor Vite config to bundle all CSS into one file, enforce consistent CSS module class names, and improve external dependency handling for React and other libraries.
Major documentation overhaul for Click UI theme configuration: rewrote BUILD_TIME_CONFIG_CLICK_UI.md as a full API reference, added CONFIG_ARCHITECTURE.md to explain config/plugin design, and updated README.md and config/README.md for clearer quick start and plugin setup. Added CLI bin/click-ui.js and bin/commands/init.js for config file scaffolding. Removed legacy click-ui-config.example.js and src/theme/README.md. Added practical examples for Vite, Webpack, Rollup, Next.js, and updated provider/usage docs for new config structure.
Introduces utility types for type-safe polymorphic React components in src/utils/polymorphic/index.ts, including documentation and usage examples in README.md. Adds index.test.tsx to demonstrate type safety, SCSS module compatibility, ref forwarding, and real-world usage scenarios.
Introduces a capitalize function that capitalizes the first letter of a string and converts kebab-case to PascalCase. Includes comprehensive unit tests for various input scenarios.
Updated Container, EllipsisContent, GridContainer, Link, and Text components to use shared polymorphic types from utils/polymorphic for improved type safety and flexibility. Replaced manual capitalization logic with a shared capitalize utility. Adjusted SvgImageElement to wrap SVG in a div for consistent styling.
Updated css-generator utilities to handle arrays, generating indexed CSS variables for array elements. Extended NestedJSONObject and ConfigThemeValues types to support arrays and booleans. Added comprehensive tests for array and nested value handling in CSS variable generation.
Updated Icon.module.scss to apply sizing classes to the wrapper instead of SVG, ensuring SVGs inherit dimensions. Added the disableDefaultSize prop to Icon, allowing consumers to prevent default size classes for custom sizing via className. Updated Icon.tsx and types.ts accordingly, and refactored imports in Icon.stories.tsx for consistency.
Moved common styles for FileUpload components into a new FileUploadCommon.module.scss file. Updated FileUpload.tsx and FileMultiUpload.tsx to import and use shared classes, reducing duplication and improving maintainability. Component-specific SCSS files now only contain unique styles.
Introduces new SCSS mixins for empty and base button styles, refactors components to use these mixins, and removes redundant EmptyButton usage in favor of native buttons. Updates color variable references for consistency, improves icon sizing and specificity, and streamlines theme handling in CodeBlock and chart color stories. Also fixes minor logic and style issues in Card, Collapsible, Popover, and VerticalStepper components.
Removed all files related to the bundler plugin system and configuration architecture, including config plugins for Vite, Webpack, Rollup, and Next.js. Added a new CLI workflow for theme generation: users now create a config file, generate custom theme CSS via the CLI, and import the CSS directly in their app. Introduced new CLI commands and utilities for config loading and CSS generation, and updated documentation to reflect the new workflow.
Deleted example files for App, Next.js, Rollup, Vite, and Webpack from the examples directory. This cleanup removes sample usage and configuration code for Click UI integrations.
Deleted vite-plugin TypeScript, JavaScript, and type definition files. This removes the Click UI Vite plugin implementation and its type declarations from the project.
Refactored multiple component SCSS modules to use `cui-variants` mixins for variant-based styling instead of chained class selectors. Updated corresponding React components to generate and apply variant class names programmatically using a `capitalize` utility, and to set data attributes for variant state. This change improves maintainability, enables lower CSS specificity, and prepares the codebase for more scalable styling patterns.
Introduces a generated cui-default-theme.css file for Click UI, supporting automatic light/dark theme switching. Adds new utilities for CSS building and theme attribute management, removes the old css-generator test, and refactors theme provider and utility files to use the new CSS builder approach. Updates theme tokens and documentation to align with the new system.
Replaces inline chart color rendering in chartColors.stories.tsx with a ChartColorComponent and removes the now-unused chartColors.stories.module.scss file. Also cleans up comments and unused code in App.tsx.
Introduces src/styles/cui.css as a combined entrypoint for default theme and component styles, updating documentation to recommend its use. Adds _cui-variants.scss with modern variant mixins, and extends _mixins.scss with new helpers for full-width, sidebar, form, input, menu item, and SVG styling. Updates build-tokens.js to always use objects in setWith, and adjusts Vite config to output cui-components.css instead of style.css.
Expanded the README and Introduction.mdx with detailed instructions for custom theming using the Click UI CLI, clarified style import options, and explained the build-time CSS approach. Updated references to new CSS entry points and improved documentation on theme switching and CSS variable usage.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants