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..f0a1529 --- /dev/null +++ b/src/icons.ts @@ -0,0 +1,26 @@ +export { default as AppsIcon } from './icons/AppsIcon'; +export { default as ArrowLeft } from './icons/ArrowLeft'; +export { default as ArrowLinkRight } from './icons/ArrowLinkRight'; +export { default as ArrowLinkUpRight } from './icons/ArrowLinkUpRight'; +export { default as ArrowRight } from './icons/ArrowRight'; +export { default as AuthorIcon } from './icons/AuthorIcon'; +export { default as BitcoinIcon} from './icons/BitcoinIcon'; +export { default as BookmarkIcon} from './icons/BookmarkIcon'; +export { default as CalendarIcon} from './icons/CalendarIcon'; +export { default as CloseIconOutlined} from './icons/CloseIconOutlined'; +export { default as DateIcon} from './icons/DateIcon'; +export { default as DayIcon} from './icons/DayIcon'; +export { default as DiceIcon} from './icons/DiceIcon'; +export { default as DiscordIcon} from './icons/DiscordIcon'; +export { default as FilterIcon} from './icons/FilterIcon'; +export { default as FilterCloseIcon} from './icons/FilterCloseIcon'; +export { default as GithubIcon} from './icons/GithubIcon'; +export { default as MicIcon} from './icons/MicIcon'; +export { default as NightIcon} from './icons/NightIcon'; +export { default as NostrIcon} from './icons/NostrIcon'; +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'; +export { default as TwitterXIcon} from './icons/TwitterXIcon'; 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..0a3d26c --- /dev/null +++ b/src/icons/ArrowLeft.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; +import { SVGProps } from "react"; +const ArrowLeft = ({ width = 7, height, pathProps, ...props }: SVGProps & { pathProps?: SVGProps }) => { + // height is destructed and unused, scaling is defined by width + return ( + + + + ); +}; +export default ArrowLeft; diff --git a/src/icons/ArrowLinkRight.tsx b/src/icons/ArrowLinkRight.tsx new file mode 100644 index 0000000..ab4cd90 --- /dev/null +++ b/src/icons/ArrowLinkRight.tsx @@ -0,0 +1,37 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const ArrowLinkRight = ({ + width = 24, + height, + pathProps, + ...props +}: SVGProps & { pathProps?: SVGProps }) => ( + // height is destructed and unused, scaling is defined by width + + + + +); + +export default ArrowLinkRight; diff --git a/src/icons/ArrowLinkUpRight.tsx b/src/icons/ArrowLinkUpRight.tsx new file mode 100644 index 0000000..8c74aae --- /dev/null +++ b/src/icons/ArrowLinkUpRight.tsx @@ -0,0 +1,36 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const ArrowLinkUpRight = ({ + width = 24, + height, + pathProps, + ...props +}: SVGProps & { pathProps?: SVGProps }) => ( + // height is destructed and unused, scaling is defined by width + + + + +); + +export default ArrowLinkUpRight; diff --git a/src/icons/ArrowRight.tsx b/src/icons/ArrowRight.tsx new file mode 100644 index 0000000..a47ec5b --- /dev/null +++ b/src/icons/ArrowRight.tsx @@ -0,0 +1,23 @@ +import * as React from "react"; +import { SVGProps } from "react"; +const ArrowRight = ({ width = 7, height, pathProps, ...props }: SVGProps & { pathProps?: 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..ab1dd36 --- /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/BookmarkIcon.tsx b/src/icons/BookmarkIcon.tsx new file mode 100644 index 0000000..0d6e812 --- /dev/null +++ b/src/icons/BookmarkIcon.tsx @@ -0,0 +1,18 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const BookmarkIcon = ({ width = 25, height, ...props }: SVGProps) => ( + // height is destructed and unused, scaling is defined by width + + + + +); + +export default BookmarkIcon; diff --git a/src/icons/CalendarIcon.tsx b/src/icons/CalendarIcon.tsx new file mode 100644 index 0000000..64072eb --- /dev/null +++ b/src/icons/CalendarIcon.tsx @@ -0,0 +1,58 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const CalendarIcon = ({ + width = 23, + height, + pathProps, + ...props +}: SVGProps & { pathProps?: SVGProps }) => ( + // height is destructed and unused, scaling is defined by width + // pathProps is destructured and unused + + + + + + + + +); + +export default CalendarIcon; diff --git a/src/icons/CloseIconOutlined.tsx b/src/icons/CloseIconOutlined.tsx new file mode 100644 index 0000000..147ba82 --- /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/DiceIcon.tsx b/src/icons/DiceIcon.tsx new file mode 100644 index 0000000..d9f5613 --- /dev/null +++ b/src/icons/DiceIcon.tsx @@ -0,0 +1,45 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const DiceIcon = ({ + width = 23, + height, + pathProps, + ...props +}: SVGProps & { pathProps?: SVGProps }) => ( + // height is destructed and unused, scaling is defined by width + // pathProps is destructured and unused + + + + + + + +); + +export default DiceIcon; diff --git a/src/icons/DiscordIcon.tsx b/src/icons/DiscordIcon.tsx new file mode 100644 index 0000000..11ee534 --- /dev/null +++ b/src/icons/DiscordIcon.tsx @@ -0,0 +1,24 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const DiscordIcon = ({ + width = 45, + height, + pathProps, + ...props +}: SVGProps & { pathProps?: SVGProps }) => ( + // height is destructed and unused, scaling is defined by width + // pathProps is destructured and unused + + + + +); + +export default DiscordIcon; diff --git a/src/icons/FilterCloseIcon.tsx b/src/icons/FilterCloseIcon.tsx new file mode 100644 index 0000000..703ae47 --- /dev/null +++ b/src/icons/FilterCloseIcon.tsx @@ -0,0 +1,18 @@ +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/GithubIcon.tsx b/src/icons/GithubIcon.tsx new file mode 100644 index 0000000..93544e8 --- /dev/null +++ b/src/icons/GithubIcon.tsx @@ -0,0 +1,24 @@ +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/MicIcon.tsx b/src/icons/MicIcon.tsx new file mode 100644 index 0000000..25824fb --- /dev/null +++ b/src/icons/MicIcon.tsx @@ -0,0 +1,40 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const MicIcon = ({ + width = 27, + height, + pathProps, + ...props +}: SVGProps & { pathProps?: SVGProps }) => ( + // height is destructed and unused, scaling is defined by width + // pathProps is destructured and unused + + + + + + +); + +export default MicIcon; diff --git a/src/icons/NightIcon.tsx b/src/icons/NightIcon.tsx new file mode 100644 index 0000000..0fadac8 --- /dev/null +++ b/src/icons/NightIcon.tsx @@ -0,0 +1,28 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const NightIcon = ({ + width = 12, + height, + pathProps, + ...svgProps +}: SVGProps & { pathProps?: SVGProps }) => ( + // height is destructed and unused, scaling is defined by width + + + +); + +export default NightIcon; diff --git a/src/icons/NostrIcon.tsx b/src/icons/NostrIcon.tsx new file mode 100644 index 0000000..79f7cd2 --- /dev/null +++ b/src/icons/NostrIcon.tsx @@ -0,0 +1,24 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const NostrIcon = ({ + width = 31, + height, + pathProps, + ...props +}: SVGProps & { pathProps?: SVGProps }) => ( + // height is destructed and unused, scaling is defined by width + // pathProps is destructured and unused + + + + +); + +export default NostrIcon; 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..b7b76ec --- /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/icons/TwitterXIcon.tsx b/src/icons/TwitterXIcon.tsx new file mode 100644 index 0000000..24851de --- /dev/null +++ b/src/icons/TwitterXIcon.tsx @@ -0,0 +1,27 @@ +import * as React from "react"; +import { SVGProps } from "react"; + +const TwitterXIcon = ({ + width = 37, + height, + pathProps, + ...props +}: SVGProps & { pathProps?: SVGProps }) => ( + // height is destructed and unused, scaling is defined by width + // pathProps is destructured and unused + + + + +); + +export default TwitterXIcon; 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..5e8bc21 --- /dev/null +++ b/src/icons/stories/icon.stories.tsx @@ -0,0 +1,55 @@ +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, + className: "text-orange-500", + pathProps: { + strokeWidth: 1.5, + } + }, + render: (args) => , +}; 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,