Feature: Major update to no longer use styled-components#12
Conversation
There was a problem hiding this comment.
Pull request overview
This PR represents a major architectural refactor removing styled-components in favor of SCSS-based styling. The change modernizes the component library by adopting CSS custom properties for theming, eliminating the runtime overhead of styled-components, and updating to newer versions of React (19.x) and Storybook (10.x).
Key changes:
- Replaced styled-components with SCSS using CSS layers and custom properties for theming
- Removed theme type definitions (
IDropzoneTheme,buildDropzoneThemes) and replaced with CSS variable-based theming - Updated React and Storybook to latest versions (React 19.x, Storybook 10.x)
Reviewed changes
Copilot reviewed 15 out of 16 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/component.tsx | Replaced StyledDropzone with plain div element, removed theme prop, manually spread react-dropzone props, added isDisabled prop |
| src/styles.scss | New SCSS file with CSS layers (kiba-structure, kiba-theme) and CSS custom properties for theming |
| src/index.ts | Removed theme/buildTheme exports, added styles.scss import for side effects |
| src/theme.ts | Deleted - theme type definitions no longer needed with CSS-based theming |
| src/buildTheme.ts | Deleted - theme builder no longer needed with CSS-based theming |
| package.json | Removed styled-components dependency, updated React to 19.x, Storybook to 10.x, added sideEffects config for CSS |
| src/documentation.mdx | Updated Storybook imports path to match new addon structure |
| src/documentation.stories.jsx | Removed eslint-disable comment for spreading props |
| .storybook/preview.ts | New TypeScript preview config replacing JSX version, imports CSS files directly |
| .storybook/preview.jsx | Deleted - replaced with TypeScript version without ThemeProvider |
| .storybook/main.ts | New TypeScript config with addon-docs and remark-gfm plugin |
| .storybook/main.js | Deleted - replaced with TypeScript version |
| .storybook/manager.ts | Migrated from .js to .ts with same configuration |
| .storybook/manager.js | Deleted - replaced with TypeScript version |
| makefile | Added NODE_ENV=production to build commands |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <input | ||
| accept={inputProps.accept} | ||
| multiple={inputProps.multiple} | ||
| type={inputProps.type} | ||
| autoComplete={inputProps.autoComplete} | ||
| onChange={inputProps.onChange} | ||
| onClick={inputProps.onClick} | ||
| tabIndex={inputProps.tabIndex} | ||
| style={inputProps.style} | ||
| /> |
There was a problem hiding this comment.
The input element is missing the ref property from inputProps, which is required for react-dropzone to function correctly. The ref is used by react-dropzone to manage the file input element.
Add ref={inputProps.ref} to the input element.
| @@ -1,4 +1,4 @@ | |||
| import { Meta, Story, Canvas, Controls } from '@storybook/blocks'; | |||
| import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'; | |||
There was a problem hiding this comment.
The import path @storybook/addon-docs/blocks may be incorrect for Storybook 10.x. In Storybook 10, the correct import path should be @storybook/blocks (without the /blocks suffix).
Change the import to:
import { Meta, Story, Canvas, Controls } from '@storybook/blocks';| import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks'; | |
| import { Meta, Story, Canvas, Controls } from '@storybook/blocks'; |
| <div | ||
| ref={rootProps.ref} | ||
| tabIndex={rootProps.tabIndex} | ||
| role='button' |
There was a problem hiding this comment.
The div element has role='button' but is missing the aria-disabled attribute when the dropzone is disabled. This is important for accessibility as screen readers need to know the disabled state.
Add aria-disabled={isDisabled} to the div element to properly communicate the disabled state to assistive technologies.
| role='button' | |
| role='button' | |
| aria-disabled={isDisabled} |
Description
Screenshots:
Checklist: