From 64ac851bc7b059ff38c580043625f2bfdfed2475 Mon Sep 17 00:00:00 2001 From: Emmanuel-Develops Date: Thu, 1 Aug 2024 18:34:28 +0100 Subject: [PATCH 1/4] feat: add icons package --- .github/CONTRIBUTING.md | 27 +++++++++++++++++++ package.json | 12 +++++++++ src/icons.ts | 18 +++++++++++++ src/icons/AppsIcon.tsx | 14 ++++++++++ src/icons/ArrowLeft.tsx | 22 ++++++++++++++++ src/icons/ArrowRight.tsx | 22 ++++++++++++++++ src/icons/AuthorIcon.tsx | 20 ++++++++++++++ src/icons/BitcoinIcon.tsx | 20 ++++++++++++++ src/icons/CloseIconOutlined.tsx | 20 ++++++++++++++ src/icons/DateIcon.tsx | 19 ++++++++++++++ src/icons/DayIcon.tsx | 16 ++++++++++++ src/icons/FilterCloseIcon.tsx | 19 ++++++++++++++ src/icons/FilterIcon.tsx | 19 ++++++++++++++ src/icons/FilterMenuIcon.tsx | 20 ++++++++++++++ src/icons/GithubIcon.tsx | 21 +++++++++++++++ src/icons/NightIcon.tsx | 30 +++++++++++++++++++++ src/icons/PlusIcon.tsx | 22 ++++++++++++++++ src/icons/SearchIcon.tsx | 24 +++++++++++++++++ src/icons/SortIcon.tsx | 46 +++++++++++++++++++++++++++++++++ src/icons/SourceIcon.tsx | 20 ++++++++++++++ src/icons/TimeIcon.tsx | 19 ++++++++++++++ src/index.ts | 2 +- tsup.config.ts | 2 +- 23 files changed, 452 insertions(+), 2 deletions(-) create mode 100644 .github/CONTRIBUTING.md create mode 100644 src/icons.ts create mode 100644 src/icons/AppsIcon.tsx create mode 100644 src/icons/ArrowLeft.tsx create mode 100644 src/icons/ArrowRight.tsx create mode 100644 src/icons/AuthorIcon.tsx create mode 100644 src/icons/BitcoinIcon.tsx create mode 100644 src/icons/CloseIconOutlined.tsx create mode 100644 src/icons/DateIcon.tsx create mode 100644 src/icons/DayIcon.tsx create mode 100644 src/icons/FilterCloseIcon.tsx create mode 100644 src/icons/FilterIcon.tsx create mode 100644 src/icons/FilterMenuIcon.tsx create mode 100644 src/icons/GithubIcon.tsx create mode 100644 src/icons/NightIcon.tsx create mode 100644 src/icons/PlusIcon.tsx create mode 100644 src/icons/SearchIcon.tsx create mode 100644 src/icons/SortIcon.tsx create mode 100644 src/icons/SourceIcon.tsx create mode 100644 src/icons/TimeIcon.tsx diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md new file mode 100644 index 0000000..67345e7 --- /dev/null +++ b/.github/CONTRIBUTING.md @@ -0,0 +1,27 @@ +# Contributing + +Thanks for your interest in contributing to BDP-UI! We welcome all contributions, whether they are bug reports, feature requests, or pull requests. + +## Reporting bugs + +If you find a bug in the code, please open an issue on GitHub. + +## Working locally + +The repo is managed with Yarn Workspaces. + +### Development + +```bash +# install dependencies +yarn install + +# start Storybook and see examples in the browser +yarn dev +``` + +Make your changes and check that they resolve the problem with an example in Storybook. We also suggest adding tests to support your change, and then run `yarn test` to make sure nothing is broken. + +You also need to inform Yarn workspaces that a particular package has changed for proper versioning. Run `yarn version check -i` to mark the appropriate type of change for those packages. + +Lastly, run `yarn build` to ensure that the build runs successfully before submitting the pull request. \ No newline at end of file diff --git a/package.json b/package.json index cc27174..daa9ea6 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,18 @@ "main": "./dist/index.js", "module": "./dist/index.mjs", "types": "./dist/index.d.ts", + "exports": { + ".": { + "import": "./dist/index.mjs", + "require": "./dist/index.js", + "types": "./dist/index.d.ts" + }, + "./icons": { + "import": "./dist/icons.mjs", + "require": "./dist/icons.js", + "types": "./dist/icons.d.ts" + } + }, "files": [ "dist" ], diff --git a/src/icons.ts b/src/icons.ts new file mode 100644 index 0000000..00fda37 --- /dev/null +++ b/src/icons.ts @@ -0,0 +1,18 @@ +export * from './icons/AppsIcon'; +export * from './icons/ArrowLeft'; +export * from './icons/ArrowRight'; +export * from './icons/AuthorIcon'; +export * from './icons/BitcoinIcon'; +export * from './icons/CloseIconOutlined'; +export * from './icons/DateIcon'; +export * from './icons/DayIcon'; +export * from './icons/FilterIcon'; +export * from './icons/FilterCloseIcon'; +export * from './icons/FilterMenuIcon'; +export * from './icons/GithubIcon'; +export * from './icons/NightIcon'; +export * from './icons/PlusIcon'; +export * from './icons/SearchIcon'; +export * from './icons/SortIcon'; +export * from './icons/SourceIcon'; +export * from './icons/TimeIcon'; diff --git a/src/icons/AppsIcon.tsx b/src/icons/AppsIcon.tsx new file mode 100644 index 0000000..d524956 --- /dev/null +++ b/src/icons/AppsIcon.tsx @@ -0,0 +1,14 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const AppsIcon = ({ width = 24, height, ...props }: SVGProps) => ( + // height is destructed and unused, scaling is defined by width + + + +); + +export default AppsIcon; diff --git a/src/icons/ArrowLeft.tsx b/src/icons/ArrowLeft.tsx new file mode 100644 index 0000000..7fffa34 --- /dev/null +++ b/src/icons/ArrowLeft.tsx @@ -0,0 +1,22 @@ +import * as React from "react"; +import { SVGProps } from "react"; +const ArrowLeft = ({ width = 7, height, ...props }: SVGProps) => { + // height is destructed and unused, scaling is defined by width + return ( + + + + ); +}; +export default ArrowLeft; diff --git a/src/icons/ArrowRight.tsx b/src/icons/ArrowRight.tsx new file mode 100644 index 0000000..b879fa5 --- /dev/null +++ b/src/icons/ArrowRight.tsx @@ -0,0 +1,22 @@ +import * as React from "react"; +import { SVGProps } from "react"; +const ArrowRight = ({ width = 7, height, ...props }: SVGProps) => { + // height is destructed and unused, scaling is defined by width + return ( + + + + ); +}; +export default ArrowRight; diff --git a/src/icons/AuthorIcon.tsx b/src/icons/AuthorIcon.tsx new file mode 100644 index 0000000..d93f4ca --- /dev/null +++ b/src/icons/AuthorIcon.tsx @@ -0,0 +1,20 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const AuthorIcon = ({ width = 20, height, ...props }: SVGProps) => ( + // height is destructed and unused, scaling is defined by width + + + +); + +export default AuthorIcon; diff --git a/src/icons/BitcoinIcon.tsx b/src/icons/BitcoinIcon.tsx new file mode 100644 index 0000000..fe59933 --- /dev/null +++ b/src/icons/BitcoinIcon.tsx @@ -0,0 +1,20 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const BitcoinIcon = ({ width = 18, height, ...props }: SVGProps) => ( + // height is destructed and unused, scaling is defined by width + + + + +); + +export default BitcoinIcon; diff --git a/src/icons/CloseIconOutlined.tsx b/src/icons/CloseIconOutlined.tsx new file mode 100644 index 0000000..2235603 --- /dev/null +++ b/src/icons/CloseIconOutlined.tsx @@ -0,0 +1,20 @@ +import * as React from "react"; +import { SVGProps } from "react"; +const CloseIconOutlined = ({ width = 14, height, ...props }: SVGProps) => ( + // height is destructed and unused, scaling is defined by width + + + +); +export default CloseIconOutlined; diff --git a/src/icons/DateIcon.tsx b/src/icons/DateIcon.tsx new file mode 100644 index 0000000..e69f038 --- /dev/null +++ b/src/icons/DateIcon.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const DateIcon = ({ width = 12, height, ...props }: SVGProps) => ( + // height is destructed and unused, scaling is defined by width + + + +); +export default DateIcon; diff --git a/src/icons/DayIcon.tsx b/src/icons/DayIcon.tsx new file mode 100644 index 0000000..0ded1d4 --- /dev/null +++ b/src/icons/DayIcon.tsx @@ -0,0 +1,16 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const DayIcon = ({ width = 16, height, ...props }: SVGProps) => ( + // height is destructed and unused, scaling is defined by width + + + +); + +export default DayIcon; diff --git a/src/icons/FilterCloseIcon.tsx b/src/icons/FilterCloseIcon.tsx new file mode 100644 index 0000000..da52bdc --- /dev/null +++ b/src/icons/FilterCloseIcon.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import { SVGProps } from "react"; +const FilterCloseIcon = ({ width = 20, height, ...props }: SVGProps) => ( + // height is destructed and unused, scaling is defined by width + + + +); +export default FilterCloseIcon; diff --git a/src/icons/FilterIcon.tsx b/src/icons/FilterIcon.tsx new file mode 100644 index 0000000..0ac2c94 --- /dev/null +++ b/src/icons/FilterIcon.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import { SVGProps } from "react"; +const FilterIcon = ({ width = 13, height, ...props }: SVGProps) => ( + // height is destructed and unused, scaling is defined by width + + + +); +export default FilterIcon; diff --git a/src/icons/FilterMenuIcon.tsx b/src/icons/FilterMenuIcon.tsx new file mode 100644 index 0000000..b0a88d4 --- /dev/null +++ b/src/icons/FilterMenuIcon.tsx @@ -0,0 +1,20 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const FilterMenuIcon = ({ width = 25, height, ...props }: SVGProps) => ( + // height is destructed and unused, scaling is defined by width + + + +); + +export default FilterMenuIcon; diff --git a/src/icons/GithubIcon.tsx b/src/icons/GithubIcon.tsx new file mode 100644 index 0000000..89257a9 --- /dev/null +++ b/src/icons/GithubIcon.tsx @@ -0,0 +1,21 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const GithubIcon = ({ width = 52, height, ...props }: SVGProps) => ( + // height is destructed and unused, scaling is defined by width + + + + +); + +export default GithubIcon; diff --git a/src/icons/NightIcon.tsx b/src/icons/NightIcon.tsx new file mode 100644 index 0000000..79d64ae --- /dev/null +++ b/src/icons/NightIcon.tsx @@ -0,0 +1,30 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const NightIcon = ({ + svgProps: { width = 12, height, ...svgProps }, + pathProps, +}: { + svgProps: SVGProps; + pathProps?: SVGProps; +}) => ( + // height is destructed and unused, scaling is defined by width + + + +); + +export default NightIcon; diff --git a/src/icons/PlusIcon.tsx b/src/icons/PlusIcon.tsx new file mode 100644 index 0000000..290f3df --- /dev/null +++ b/src/icons/PlusIcon.tsx @@ -0,0 +1,22 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const PlusIcon = ({ width = 12, height, ...props }: SVGProps) => ( + // height is destructed and unused, scaling is defined by width + + + +); + +export default PlusIcon; diff --git a/src/icons/SearchIcon.tsx b/src/icons/SearchIcon.tsx new file mode 100644 index 0000000..cbbd8ae --- /dev/null +++ b/src/icons/SearchIcon.tsx @@ -0,0 +1,24 @@ +import * as React from "react"; +import { SVGProps } from "react"; +const SearchIcon = ({ width = 20, height, ...props }: SVGProps) => ( + // height is destructed and unused, scaling is defined by width + + + + +); +export default SearchIcon; diff --git a/src/icons/SortIcon.tsx b/src/icons/SortIcon.tsx new file mode 100644 index 0000000..66d8d8f --- /dev/null +++ b/src/icons/SortIcon.tsx @@ -0,0 +1,46 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const SortIcon = ({ width = 20, height, ...props }: SVGProps) => ( + // height is destructed and unused, scaling is defined by width + + + + + + + +); + +export default SortIcon; diff --git a/src/icons/SourceIcon.tsx b/src/icons/SourceIcon.tsx new file mode 100644 index 0000000..ffe9d9a --- /dev/null +++ b/src/icons/SourceIcon.tsx @@ -0,0 +1,20 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const SourceIcon = ({ width = 20, height, ...props }: SVGProps) => ( + // height is destructed and unused, scaling is defined by width + + + +); + +export default SourceIcon; diff --git a/src/icons/TimeIcon.tsx b/src/icons/TimeIcon.tsx new file mode 100644 index 0000000..568c8a7 --- /dev/null +++ b/src/icons/TimeIcon.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const TimeIcon = ({ width = 14, height, ...props }: SVGProps) => ( + // height is destructed and unused, scaling is defined by width + + + +); +export default TimeIcon; diff --git a/src/index.ts b/src/index.ts index ce81ff9..dcd589c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1 +1 @@ -export * from './components/Button' \ No newline at end of file +export * from './components/Button'; \ No newline at end of file diff --git a/tsup.config.ts b/tsup.config.ts index 2e9f9e7..646b3b6 100644 --- a/tsup.config.ts +++ b/tsup.config.ts @@ -1,7 +1,7 @@ import { defineConfig } from 'tsup'; export default defineConfig({ - entry: ['src/index.ts'], + entry: ['src/index.ts', 'src/icons.ts'], format: ['cjs', 'esm'], outDir: 'dist', dts: true, From 1d2f0d464795e196bab48e60a7ab160be774154f Mon Sep 17 00:00:00 2001 From: Emmanuel-Develops Date: Tue, 6 Aug 2024 03:02:55 +0100 Subject: [PATCH 2/4] fix: add pathProps to some icons, rm some hardcoded fill values --- src/icons/ArrowLeft.tsx | 3 ++- src/icons/ArrowRight.tsx | 3 ++- src/icons/BitcoinIcon.tsx | 2 +- src/icons/CloseIconOutlined.tsx | 2 +- src/icons/GithubIcon.tsx | 13 ++++++++----- src/icons/NightIcon.tsx | 14 ++++++-------- src/icons/TimeIcon.tsx | 2 +- 7 files changed, 21 insertions(+), 18 deletions(-) diff --git a/src/icons/ArrowLeft.tsx b/src/icons/ArrowLeft.tsx index 7fffa34..0a3d26c 100644 --- a/src/icons/ArrowLeft.tsx +++ b/src/icons/ArrowLeft.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { SVGProps } from "react"; -const ArrowLeft = ({ width = 7, height, ...props }: SVGProps) => { +const ArrowLeft = ({ width = 7, height, pathProps, ...props }: SVGProps & { pathProps?: SVGProps }) => { // height is destructed and unused, scaling is defined by width return ( ) => clipRule="evenodd" d="M0.354784 5.17724C0.127604 5.39365 0 5.687 0 5.99287C0 6.29873 0.127604 6.59208 0.354784 6.8085L4.92909 11.1621C5.15667 11.3785 5.46529 11.5001 5.78705 11.5C6.10882 11.4999 6.41738 11.3782 6.64485 11.1617C6.87233 10.9452 7.00008 10.6516 7 10.3454C6.99992 10.0393 6.87203 9.74573 6.64445 9.52931L2.92743 5.99287L6.64445 2.45642C6.86554 2.23884 6.98796 1.94734 6.98535 1.64471C6.98274 1.34208 6.8553 1.05254 6.63048 0.83844C6.40566 0.624342 6.10145 0.50282 5.78337 0.500049C5.4653 0.497277 5.1588 0.613478 4.9299 0.823624L0.353974 5.17647L0.354784 5.17724Z" fill="currentColor" + {...pathProps} /> ); diff --git a/src/icons/ArrowRight.tsx b/src/icons/ArrowRight.tsx index b879fa5..a47ec5b 100644 --- a/src/icons/ArrowRight.tsx +++ b/src/icons/ArrowRight.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { SVGProps } from "react"; -const ArrowRight = ({ width = 7, height, ...props }: SVGProps) => { +const ArrowRight = ({ width = 7, height, pathProps, ...props }: SVGProps & { pathProps?: SVGProps }) => { // height is destructed and unused, scaling is defined by width return ( ) => clipRule="evenodd" d="M6.64522 5.17724C6.8724 5.39365 7 5.687 7 5.99287C7 6.29873 6.8724 6.59208 6.64522 6.8085L2.07091 11.1621C1.84333 11.3785 1.53471 11.5001 1.21295 11.5C0.891176 11.4999 0.582617 11.3782 0.355145 11.1617C0.127674 10.9452 -7.58015e-05 10.6516 3.37439e-08 10.3454C7.5869e-05 10.0393 0.127971 9.74573 0.35555 9.52931L4.07257 5.99287L0.35555 2.45642C0.134458 2.23884 0.0120353 1.94734 0.0146483 1.64471C0.0172613 1.34208 0.144701 1.05254 0.36952 0.83844C0.594339 0.624342 0.898547 0.50282 1.21663 0.500049C1.5347 0.497277 1.8412 0.613478 2.0701 0.823624L6.64603 5.17647L6.64522 5.17724Z" fill="currentColor" + {...pathProps} /> ); diff --git a/src/icons/BitcoinIcon.tsx b/src/icons/BitcoinIcon.tsx index fe59933..ab1dd36 100644 --- a/src/icons/BitcoinIcon.tsx +++ b/src/icons/BitcoinIcon.tsx @@ -8,7 +8,7 @@ const BitcoinIcon = ({ width = 18, height, ...props }: SVGProps) xmlns="http://www.w3.org/2000/svg" {...props} > - + diff --git a/src/icons/GithubIcon.tsx b/src/icons/GithubIcon.tsx index 89257a9..93544e8 100644 --- a/src/icons/GithubIcon.tsx +++ b/src/icons/GithubIcon.tsx @@ -1,19 +1,22 @@ import * as React from "react"; import { SVGProps } from "react"; -const GithubIcon = ({ width = 52, height, ...props }: SVGProps) => ( +const GithubIcon = ({ + width = 52, + height, + ...props +}: SVGProps) => ( // height is destructed and unused, scaling is defined by width - ); diff --git a/src/icons/NightIcon.tsx b/src/icons/NightIcon.tsx index 79d64ae..ceed5c8 100644 --- a/src/icons/NightIcon.tsx +++ b/src/icons/NightIcon.tsx @@ -2,16 +2,14 @@ import * as React from "react"; import { SVGProps } from "react"; const NightIcon = ({ - svgProps: { width = 12, height, ...svgProps }, + width = 12, + height, pathProps, -}: { - svgProps: SVGProps; - pathProps?: SVGProps; -}) => ( + ...svgProps +}: SVGProps & { pathProps?: SVGProps }) => ( // height is destructed and unused, scaling is defined by width diff --git a/src/icons/TimeIcon.tsx b/src/icons/TimeIcon.tsx index 568c8a7..b7b76ec 100644 --- a/src/icons/TimeIcon.tsx +++ b/src/icons/TimeIcon.tsx @@ -12,7 +12,7 @@ const TimeIcon = ({ width = 14, height, ...props }: SVGProps) => > ); From 6f82728a9228fda34cb04d0fbfd25a871050ece1 Mon Sep 17 00:00:00 2001 From: Emmanuel-Develops Date: Tue, 6 Aug 2024 03:03:41 +0100 Subject: [PATCH 3/4] feat: proper icon export and icon stories --- src/icons.ts | 36 +++++++-------- src/icons/FilterCloseIcon.tsx | 1 - src/icons/stories/IconShowcase.tsx | 36 +++++++++++++++ src/icons/stories/icon.stories.tsx | 70 ++++++++++++++++++++++++++++++ 4 files changed, 124 insertions(+), 19 deletions(-) create mode 100644 src/icons/stories/IconShowcase.tsx create mode 100644 src/icons/stories/icon.stories.tsx diff --git a/src/icons.ts b/src/icons.ts index 00fda37..ffbec27 100644 --- a/src/icons.ts +++ b/src/icons.ts @@ -1,18 +1,18 @@ -export * from './icons/AppsIcon'; -export * from './icons/ArrowLeft'; -export * from './icons/ArrowRight'; -export * from './icons/AuthorIcon'; -export * from './icons/BitcoinIcon'; -export * from './icons/CloseIconOutlined'; -export * from './icons/DateIcon'; -export * from './icons/DayIcon'; -export * from './icons/FilterIcon'; -export * from './icons/FilterCloseIcon'; -export * from './icons/FilterMenuIcon'; -export * from './icons/GithubIcon'; -export * from './icons/NightIcon'; -export * from './icons/PlusIcon'; -export * from './icons/SearchIcon'; -export * from './icons/SortIcon'; -export * from './icons/SourceIcon'; -export * from './icons/TimeIcon'; +export { default as AppsIcon } from './icons/AppsIcon'; +export { default as ArrowLeft } from './icons/ArrowLeft'; +export { default as ArrowRight } from './icons/ArrowRight'; +export { default as AuthorIcon } from './icons/AuthorIcon'; +export { default as BitcoinIcon} from './icons/BitcoinIcon'; +export { default as CloseIconOutlined} from './icons/CloseIconOutlined'; +export { default as DateIcon} from './icons/DateIcon'; +export { default as DayIcon} from './icons/DayIcon'; +export { default as FilterIcon} from './icons/FilterIcon'; +export { default as FilterCloseIcon} from './icons/FilterCloseIcon'; +export { default as FilterMenuIcon} from './icons/FilterMenuIcon'; +export { default as GithubIcon} from './icons/GithubIcon'; +export { default as NightIcon} from './icons/NightIcon'; +export { default as PlusIcon} from './icons/PlusIcon'; +export { default as SearchIcon} from './icons/SearchIcon'; +export { default as SortIcon} from './icons/SortIcon'; +export { default as SourceIcon} from './icons/SourceIcon'; +export { default as TimeIcon} from './icons/TimeIcon'; diff --git a/src/icons/FilterCloseIcon.tsx b/src/icons/FilterCloseIcon.tsx index da52bdc..703ae47 100644 --- a/src/icons/FilterCloseIcon.tsx +++ b/src/icons/FilterCloseIcon.tsx @@ -11,7 +11,6 @@ const FilterCloseIcon = ({ width = 20, height, ...props }: SVGProps diff --git a/src/icons/stories/IconShowcase.tsx b/src/icons/stories/IconShowcase.tsx new file mode 100644 index 0000000..d6e33b0 --- /dev/null +++ b/src/icons/stories/IconShowcase.tsx @@ -0,0 +1,36 @@ +import React from "react"; + +export const IconShowcase = ({children}: {children: React.ReactNode}) => { + return ( +
+
+ {children} +
+
+ ); +}; + +export const IconItem = ({ + IconComponent, + name, +}: { + IconComponent: React.ComponentType< + React.SVGProps & { + pathProps?: React.SVGProps; + } + >; + name: string; +}) => { + return ( +
+
+ +
+
+

+ {name} +

+
+
+ ); +}; diff --git a/src/icons/stories/icon.stories.tsx b/src/icons/stories/icon.stories.tsx new file mode 100644 index 0000000..8a8a173 --- /dev/null +++ b/src/icons/stories/icon.stories.tsx @@ -0,0 +1,70 @@ +import React from "react"; +import { StoryObj, Meta } from "@storybook/react"; +import * as Icons from "../../icons"; +import { IconItem, IconShowcase } from "./IconShowcase"; + +const meta: Meta = { + title: "Icons/All Icons", + argTypes: { + width: { + control: "number", + }, + color: { + control: "text", + }, + className: { + control: "text", + }, + }, +} as Meta; + +export default meta; + +type SVGIcon = React.SVGProps & { pathProps?: React.SVGProps } +type IconComponent = React.ComponentType; + +type Story = StoryObj; + +const IconGrid = ({ + width, + color, + ...args +}: SVGIcon) => ( + + {Object.entries(Icons).map(([name, Icon]) => { + const IconComponent = Icon as IconComponent; + IconComponent.defaultProps= { + width, + color, + ...args + } + return (); + })} + +); + +export const AllIcons: Story = { + args: { + width: 24, + // color: "black", + className: "text-orange-500", + pathProps: { + strokeWidth: 1, + } + }, + render: (args) => , +}; + +// const Template: StoryFn = (args) =>