diff --git a/package.json b/package.json index 1666252..3531603 100644 --- a/package.json +++ b/package.json @@ -20,35 +20,35 @@ "react-dom": ">=18" }, "devDependencies": { - "@floating-ui/react": "^0.26.10", + "@floating-ui/react": "^0.26.12", "@ianvs/prettier-plugin-sort-imports": "^4.2.1", "@material/material-color-utilities": "^0.2.7", "@mdi/js": "^7.4.47", "@mdi/react": "^1.6.1", - "@storybook/addon-essentials": "^8.0.5", - "@storybook/addon-interactions": "^8.0.5", - "@storybook/addon-links": "^8.0.5", - "@storybook/blocks": "^8.0.5", - "@storybook/react": "^8.0.5", - "@storybook/react-vite": "^8.0.5", - "@types/react": "^18.2.74", - "@types/react-dom": "^18.2.23", - "@typescript-eslint/eslint-plugin": "^7.5.0", - "@typescript-eslint/parser": "^7.5.0", + "@storybook/addon-essentials": "^8.0.9", + "@storybook/addon-interactions": "^8.0.9", + "@storybook/addon-links": "^8.0.9", + "@storybook/blocks": "^8.0.9", + "@storybook/react": "^8.0.9", + "@storybook/react-vite": "^8.0.9", + "@types/react": "^18.2.79", + "@types/react-dom": "^18.2.25", + "@typescript-eslint/eslint-plugin": "^7.7.1", + "@typescript-eslint/parser": "^7.7.1", "@vitejs/plugin-react": "^4.2.1", "chromatic": "^11.3.0", - "clsx": "^2.1.0", + "clsx": "^2.1.1", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", "eslint-plugin-storybook": "^0.8.0", "glob": "^10.3.12", "prettier": "^3.2.5", - "sass": "^1.72.0", - "storybook": "^8.0.5", + "sass": "^1.75.0", + "storybook": "^8.0.9", "styled-jsx": "^5.1.2", - "typescript": "^5.4.3", - "vite": "^5.2.7" + "typescript": "^5.4.5", + "vite": "^5.2.10" }, "publishConfig": { "registry": "https://registry.npmjs.org" diff --git a/src/components/app-bar/BottomAppBar.tsx b/src/components/app-bar/BottomAppBar.tsx index 5ebbfa4..c2aab97 100644 --- a/src/components/app-bar/BottomAppBar.tsx +++ b/src/components/app-bar/BottomAppBar.tsx @@ -6,6 +6,7 @@ import { ExtendProps } from '@/utils/type' /** * `` has fixed style `height: 80px` + * * @specs https://m3.material.io/components/bottom-app-bar/specs */ export const BottomAppBar = forwardRef< diff --git a/src/components/app-bar/TopAppBar.tsx b/src/components/app-bar/TopAppBar.tsx index 4816fd4..f2f5082 100644 --- a/src/components/app-bar/TopAppBar.tsx +++ b/src/components/app-bar/TopAppBar.tsx @@ -5,7 +5,6 @@ import { mergeStyles } from '@/utils/style' import { ExtendProps } from '@/utils/type' /** - * * @specs https://m3.material.io/components/top-app-bar/specs */ export const TopAppBar = forwardRef< diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx index 37e0440..5e8b2d3 100644 --- a/src/components/card/Card.tsx +++ b/src/components/card/Card.tsx @@ -6,6 +6,7 @@ import { ExtendProps, TagNameString } from '@/utils/type' /** * You can set the `disabled` property to disable ripple + * * @specs https://m3.material.io/components/cards/specs */ export const Card = forwardRef< diff --git a/src/components/carousel/Carousel.stories.tsx b/src/components/carousel/Carousel.stories.tsx index e55aa1b..532b254 100644 --- a/src/components/carousel/Carousel.stories.tsx +++ b/src/components/carousel/Carousel.stories.tsx @@ -14,7 +14,7 @@ export const Default: Story = { args: { items: new Array(6).fill(0).map((_, i) => ({ value: ( - + ), label: `Cat ${i + 1}`, })), diff --git a/src/components/carousel/Carousel.tsx b/src/components/carousel/Carousel.tsx index b92697d..b448361 100644 --- a/src/components/carousel/Carousel.tsx +++ b/src/components/carousel/Carousel.tsx @@ -15,7 +15,8 @@ interface ItemWithFlex extends Item { /** * [warn]: Incomplete implementation, and only three visible items is implemented, - * make sure the array length is multiple of 3, or it will throw error + * make sure the array length is multiple of 3 + * * @specs https://m3.material.io/components/carousel/specs */ export const Carousel = forwardRef< @@ -35,8 +36,7 @@ export const Carousel = forwardRef< { items: initItems, height, className, style, ...props }, ref, ) { - if (initItems.length % 3 !== 0) - throw new Error('the item array length must be a multiple of 3') + initItems.slice(0, initItems.length - (initItems.length % 3)) // make sure the array length is multiple of 3 const [items, setItems] = useState(initFlex(initItems)) const containerRef = useRef(null) useImperativeHandle(ref, () => containerRef.current!) diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/checkbox/Checkbox.tsx index e6b9059..1a2d0cc 100644 --- a/src/components/checkbox/Checkbox.tsx +++ b/src/components/checkbox/Checkbox.tsx @@ -12,6 +12,7 @@ import { ExtendProps } from '@/utils/type' /** * According to the official implementation, the ripple effect should not occupy space. * Therefore, if the parent container has `overflow: hidden`, make sure that there is enough area to show the ripple effect. + * * @specs https://m3.material.io/components/checkbox/specs */ export const Checkbox = forwardRef< diff --git a/src/components/divider/Divider.tsx b/src/components/divider/Divider.tsx index 4fa0952..c446056 100644 --- a/src/components/divider/Divider.tsx +++ b/src/components/divider/Divider.tsx @@ -5,6 +5,7 @@ import { ExtendProps } from '@/utils/type' /** * The divider has margin included by default, you can remove it by adding `style={{margin:"0"}}` + * * @specs https://m3.material.io/components/divider/specs */ export const Divider = forwardRef< diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx index 1fa23c3..b2bb3a1 100644 --- a/src/components/menu/Menu.tsx +++ b/src/components/menu/Menu.tsx @@ -5,6 +5,7 @@ import { ExtendProps } from '@/utils/type' /** * The `` container, will contain `` and `` components + * * @specs https://m3.material.io/components/menus/specs */ export const Menu = forwardRef< diff --git a/src/components/progress-indicator/LinearProgressIndicator.tsx b/src/components/progress-indicator/LinearProgressIndicator.tsx index 88327e6..6f792bc 100644 --- a/src/components/progress-indicator/LinearProgressIndicator.tsx +++ b/src/components/progress-indicator/LinearProgressIndicator.tsx @@ -7,6 +7,7 @@ import { ExtendProps } from '@/utils/type' /** * [notice]: This component has default `min-width: 5rem` and `width: 100%` for convenience. * You can manually set style property to override it if needed. + * * @specs https://m3.material.io/components/progress-indicators/specs#efada034-defe-401e-803a-e6ea2833a396 */ export const LinearProgressIndicator = forwardRef< diff --git a/src/components/radio-button/RadioButton.tsx b/src/components/radio-button/RadioButton.tsx index a075178..abc31ed 100644 --- a/src/components/radio-button/RadioButton.tsx +++ b/src/components/radio-button/RadioButton.tsx @@ -9,6 +9,7 @@ import { ExtendProps } from '@/utils/type' /** * According to the official implementation, the ripple effect should not occupy space. * Therefore, if the parent container has `overflow: hidden`, make sure that there is enough area to show the ripple effect. + * * @specs https://m3.material.io/components/radio-button/specs */ export const RadioButton = forwardRef< diff --git a/src/components/sheet/BottomSheet.tsx b/src/components/sheet/BottomSheet.tsx index a7c3e8a..5b52698 100644 --- a/src/components/sheet/BottomSheet.tsx +++ b/src/components/sheet/BottomSheet.tsx @@ -17,6 +17,7 @@ export type BottomSheetHandle = ReturnType * * This component use ref to control show and hide, * you can call `ref.current.show()` to show and `ref.current.hide()` to hide + * * @specs https://m3.material.io/components/bottom-sheets/specs */ export const BottomSheet = forwardRef< diff --git a/src/components/slider/Slider.tsx b/src/components/slider/Slider.tsx index f84b001..317f00d 100644 --- a/src/components/slider/Slider.tsx +++ b/src/components/slider/Slider.tsx @@ -19,6 +19,7 @@ import { ExtendProps } from '@/utils/type' * An slider component, note that you should set width or height (use `style` property) for this component! * * TODO: Two handles is not implemented yet! + * * @specs https://m3.material.io/components/sliders/specs */ export const Slider = forwardRef< diff --git a/src/components/tooltip/RichTooltip.tsx b/src/components/tooltip/RichTooltip.tsx index 5f0f5bd..a7d9d8a 100644 --- a/src/components/tooltip/RichTooltip.tsx +++ b/src/components/tooltip/RichTooltip.tsx @@ -6,6 +6,7 @@ import { ExtendProps } from '@/utils/type' /** * [tips]: You may consider manually add `
` + * * @specs https://m3.material.io/components/tooltips/specs */ export const RichTooltip = forwardRef<