diff --git a/apps/docs/content/components/icons/Icon.mdx b/apps/docs/content/components/icons/Icon.mdx index fee8b99d9..7d6f09078 100644 --- a/apps/docs/content/components/icons/Icon.mdx +++ b/apps/docs/content/components/icons/Icon.mdx @@ -1,12 +1,12 @@ --- title: Icon -description: An icon component allow you to render a custom icon. +description: An icon component is used to render a custom icon. category: "icons" links: source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/icons/src/Icon.tsx --- - + Hopper provides multiple ways to use icons in your project: @@ -82,13 +82,13 @@ function CustomIcon(props: CreatedIconProps) { An icon can vary in size. When used inside another component, it'll generally be sized automatically. If you use a standalone icon, you can use the size prop to control the sizing. - + ### Styling The color of the icon can be changed using the `fill` prop. All the styled system props are also available. - + ## Advanced customization diff --git a/apps/docs/content/components/icons/RichIcon.mdx b/apps/docs/content/components/icons/RichIcon.mdx index 50d624ed1..239a8a52b 100644 --- a/apps/docs/content/components/icons/RichIcon.mdx +++ b/apps/docs/content/components/icons/RichIcon.mdx @@ -1,49 +1,81 @@ --- title: RichIcon -description: TBD +description: A rich icon component is used to render a rich custom icon. category: "icons" links: source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/icons/src/RichIcon.tsx -status: WIP --- -## Props + + +Similar to icons, RichIcons are vibrant and colorful. Perfect for decorative purposes or drawing attention to specific elements. + +Hopper provides multiple ways to use rich icons in your project: + +- Using the [Workleap icon library](/icons/overview/introduction) +- [Creating your own icons](#creating-your-custom-rich-icons) + +## Creating your custom rich icons -TODO: Add the props table, if we have multiple props table (ex: TagList and Tag) in the same file, use the name of the component in ### before the each props table +To use an rich icon component to create custom rich icons you must first import your SVG icon as a component by using [`@svgr/webpack`](https://react-svgr.com/docs/getting-started/). -## Guidelines +Hopper provides two methods for creating your custom icons: -TODO: If we have some guidelines about this component's usage +- Using the `createRichIcon` function (recommended) +- Using the `RichIcon` component -### Accessibility ? +Both `RichIcon` and `createRichIcon` enable you to style the icon using the styled system. -TODO: If we have some guidelines about this component and accessibility +### Using the createRichIcon function -## Anatomy +The `createRichIcon` function is a convenience wrapper around the process of generating icons with `Icon`, allowing you to achieve the same functionality with less effort. -TODO: We have anatomy screenshots from the Figma, we could most likely use them here +```tsx {6} +import CustomRichIcon24 from "./path/to/custom-rich-icon-24.svg"; +import CustomRichIcon32 from "./path/to/custom-rich-icon-32.svg"; +import CustomRichIcon40 from "./path/to/custom-rich-icon-40.svg"; +import { createRichIcon } from "@hopper-ui/icons"; -### Concepts +const CustomRichIcon = createRichIcon(CustomRichIcon24, CustomRichIcon32, CustomRichIcon40, "CustomIcon") +``` -TODO: links to related concepts +### Using the Icon component -### Composed Components +```tsx {8-12} +import CustomRichIcon24 from "./path/to/custom-icon-24.svg" +import CustomRichIcon32 from "./path/to/custom-icon-32.svg" +import CustomRichIcon40 from "./path/to/custom-icon-40.svg" +import { Icon, type CreatedRichIconProps } from "@hopper-ui/icons"; -TODO: links to related components (most likely all component which are used by the slots) +function CustomRichIcon(props: CreatedRichIconProps) { + return ( + + ) +} +``` -## Usage +### Sizes -## Advanced customization +An icon can vary in size. When used inside another component, it'll generally be sized automatically. If you use a standalone icon, you can use the size prop to control the sizing. -### Contexts -TODO: Example of context + content about the context + -### Custom Children +### Styling -TODO: Example of passing custom childrens to the components to fake a slot +The color of the icon can be changed using the `fill` prop. All the styled system props are also available. -### Custom Component + -TODO: Example of creating a custom version of this component +### Variants + +The color of the icon can be changed using the `fill` prop. All the styled system props are also available. + + + +## Props -## Migration Notes (WIP) + diff --git a/apps/docs/examples/Preview.ts b/apps/docs/examples/Preview.ts index 8f8292f55..403776f49 100644 --- a/apps/docs/examples/Preview.ts +++ b/apps/docs/examples/Preview.ts @@ -734,14 +734,14 @@ export const Previews: Record = { "inputs/docs/textField/fluid": { component: lazy(() => import("@/../../packages/components/src/inputs/docs/textField/fluid.tsx")) }, - "icons/docs/preview": { - component: lazy(() => import("@/../../packages/icons/docs/preview.tsx")) + "icons/docs/icon/preview": { + component: lazy(() => import("@/../../packages/icons/docs/icon/preview.tsx")) }, - "icons/docs/sizes": { - component: lazy(() => import("@/../../packages/icons/docs/sizes.tsx")) + "icons/docs/icon/sizes": { + component: lazy(() => import("@/../../packages/icons/docs/icon/sizes.tsx")) }, - "icons/docs/styling": { - component: lazy(() => import("@/../../packages/icons/docs/styling.tsx")) + "icons/docs/icon/styling": { + component: lazy(() => import("@/../../packages/icons/docs/icon/styling.tsx")) }, "IconList/docs/preview": { component: lazy(() => import("@/../../packages/components/src/IconList/docs/preview.tsx")) @@ -749,6 +749,18 @@ export const Previews: Record = { "IconList/docs/size": { component: lazy(() => import("@/../../packages/components/src/IconList/docs/size.tsx")) }, + "icons/docs/richIcon/preview": { + component: lazy(() => import("@/../../packages/icons/docs/richIcon/preview.tsx")) + }, + "icons/docs/richIcon/sizes": { + component: lazy(() => import("@/../../packages/icons/docs/richIcon/sizes.tsx")) + }, + "icons/docs/richIcon/styling": { + component: lazy(() => import("@/../../packages/icons/docs/richIcon/styling.tsx")) + }, + "icons/docs/richIcon/variants": { + component: lazy(() => import("@/../../packages/icons/docs/richIcon/variants.tsx")) + }, "ErrorMessage/docs/preview": { component: lazy(() => import("@/../../packages/components/src/ErrorMessage/docs/preview.tsx")) }, diff --git a/apps/docs/scripts/generateComponentData.ts b/apps/docs/scripts/generateComponentData.ts index 7d44f380b..79e92cfec 100644 --- a/apps/docs/scripts/generateComponentData.ts +++ b/apps/docs/scripts/generateComponentData.ts @@ -29,6 +29,7 @@ export interface Options { const PACKAGES = path.join(process.cwd(), "..", "..", "packages", "components", "src"); const ICON_FILE = path.join(process.cwd(), "..", "..", "packages", "icons", "src", "Icon.tsx"); +const RICH_ICON_FILE = path.join(process.cwd(), "..", "..", "packages", "icons", "src", "RichIcon.tsx"); const COMPONENT_DATA = path.join(process.cwd(), "datas", "components"); const tsConfigParser = docgenTs.withCustomConfig( @@ -311,7 +312,8 @@ async function generateComponentData() { // Manually add Icon.tsx to the component list const iconComponent: ComponentData = { name: "Icon", filePath: ICON_FILE }; - const components = [...componentList, iconComponent]; + const richIconComponent: ComponentData = { name: "RichIcon", filePath: RICH_ICON_FILE }; + const components = [...componentList, iconComponent, richIconComponent]; if (!components.length) { console.error("No components found"); diff --git a/packages/icons/docs/Icon.stories.tsx b/packages/icons/docs/Icon.stories.tsx deleted file mode 100644 index e2e7a45ae..000000000 --- a/packages/icons/docs/Icon.stories.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { SlotProvider, Stack } from "@hopper-ui/components"; -import type { Meta, StoryObj } from "@storybook/react"; - -import { SparklesIcon } from "../src/generated-icon-components/SparklesIcon.tsx"; -import { IconContext } from "../src/IconContext.ts"; - -/** - * An icon component allow you to render a custom icon. - * - * [View repository](https://github.com/gsoft-inc/wl-hopper/tree/main/packages/icons/src/Icon.tsx) - * - - * [View package](https://www.npmjs.com/package/@hopper-ui/icons) - * - - * View storybook TODO - */ -const meta = { - title: "Docs/Icon", - tags: ["autodocs"], - parameters: { - // Disables Chromatic's snapshotting on documentation stories - chromatic: { disableSnapshot: true } - }, - component: SparklesIcon -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = { -}; - -/** - * Icons support t-shirt sizing. When used inside another Hopper component, they'll generally be sized automatically, but if you use icons standalone, you can use the size prop to control the sizing. The default size is "md". - */ -export const Sizing: Story = { - render: props => ( - - - - - - ) -}; - -/** - * The color of the icon can be changed using the `fill` prop. - * All the styled system props are also available. - */ -export const Styling: Story = { - args: { - fill:"primary" - } -}; - -/** - * All Hopper Components export a corresponding context that can be used to send props to them from a parent element. - * You can send any prop or ref via context that you could pass to the corresponding component. - * The local props and ref on the component are merged with the ones passed via context, with the local props taking precedence - */ -export const AdvancedCustomization: Story = { - - render: props => ( - - - - ) -}; diff --git a/packages/icons/docs/RichIcon.stories.tsx b/packages/icons/docs/RichIcon.stories.tsx deleted file mode 100644 index b9e5230f2..000000000 --- a/packages/icons/docs/RichIcon.stories.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import { Stack, SlotProvider, Inline } from "@hopper-ui/components"; -import type { Meta, StoryObj } from "@storybook/react"; - -import { SparklesRichIcon } from "../src/generated-rich-icon-components/index.ts"; -import { RichIconContext } from "../src/RichIconContext.ts"; - -/** - * A rich icon component allow you to render a custom rich icon. - * - * [View repository](https://github.com/gsoft-inc/wl-hopper/tree/main/packages/icons/src/RichIcon.tsx) - * - - * [View package](https://www.npmjs.com/package/@hopper-ui/icons) - * - - * View storybook TODO - */ -const meta = { - title: "Docs/RichIcon", - tags: ["autodocs"], - parameters: { - // Disables Chromatic's snapshotting on documentation stories - chromatic: { disableSnapshot: true } - }, - component: SparklesRichIcon -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = { -}; - -/** - * Icons support t-shirt sizing. When used inside another Hopper component, they'll generally be sized automatically, but if you use icons standalone, you can use the size prop to control the sizing. The default size is "md". - */ -export const Sizing: Story = { - render: props => ( - - - - - - ) -}; - -/** - * A rich icon can use different variants. - */ -export const Variants: Story = { - render: props => ( - - - - - - - - - - - - - - - - - - - - ) -}; - -/** - * All Hopper Components export a corresponding context that can be used to send props to them from a parent element. - * You can send any prop or ref via context that you could pass to the corresponding component. - * The local props and ref on the component are merged with the ones passed via context, with the local props taking precedence - */ -export const AdvancedCustomization: Story = { - render: props => ( - - - - ) -}; diff --git a/packages/icons/docs/preview.tsx b/packages/icons/docs/icon/preview.tsx similarity index 75% rename from packages/icons/docs/preview.tsx rename to packages/icons/docs/icon/preview.tsx index f758c2d43..9bf2af540 100644 --- a/packages/icons/docs/preview.tsx +++ b/packages/icons/docs/icon/preview.tsx @@ -1,6 +1,6 @@ import { createIcon } from "@hopper-ui/icons"; -import { Sparkles16, Sparkles24, Sparkles32 } from "./src/index.ts"; +import { Sparkles16, Sparkles24, Sparkles32 } from "../src/index.ts"; const CustomIcon = createIcon(Sparkles16, Sparkles24, Sparkles32, "CustomIcon"); diff --git a/packages/icons/docs/sizes.tsx b/packages/icons/docs/icon/sizes.tsx similarity index 84% rename from packages/icons/docs/sizes.tsx rename to packages/icons/docs/icon/sizes.tsx index d7e369df6..1fec7f3bb 100644 --- a/packages/icons/docs/sizes.tsx +++ b/packages/icons/docs/icon/sizes.tsx @@ -1,7 +1,7 @@ import { Inline } from "@hopper-ui/components"; import { createIcon } from "@hopper-ui/icons"; -import { Sparkles16, Sparkles24, Sparkles32 } from "./src/index.ts"; +import { Sparkles16, Sparkles24, Sparkles32 } from "../src/index.ts"; const CustomIcon = createIcon(Sparkles16, Sparkles24, Sparkles32, "CustomIcon"); diff --git a/packages/icons/docs/styling.tsx b/packages/icons/docs/icon/styling.tsx similarity index 76% rename from packages/icons/docs/styling.tsx rename to packages/icons/docs/icon/styling.tsx index 929b5bc19..a3507d467 100644 --- a/packages/icons/docs/styling.tsx +++ b/packages/icons/docs/icon/styling.tsx @@ -1,6 +1,6 @@ import { createIcon } from "@hopper-ui/icons"; -import { Sparkles16, Sparkles24, Sparkles32 } from "./src/index.ts"; +import { Sparkles16, Sparkles24, Sparkles32 } from "../src/index.ts"; const CustomIcon = createIcon(Sparkles16, Sparkles24, Sparkles32, "CustomIcon"); diff --git a/packages/icons/docs/richIcon/preview.tsx b/packages/icons/docs/richIcon/preview.tsx new file mode 100644 index 000000000..02e74027f --- /dev/null +++ b/packages/icons/docs/richIcon/preview.tsx @@ -0,0 +1,13 @@ +import { createRichIcon } from "@hopper-ui/icons"; + +import { SparklesRichIcon24, SparklesRichIcon32, SparklesRichIcon40 } from "../src/index.ts"; + +const CustomRichIcon = createRichIcon(SparklesRichIcon24, SparklesRichIcon32, SparklesRichIcon40, "SparklesRichIcon"); + +export default function Example() { + return ( + + ); +} + + diff --git a/packages/icons/docs/richIcon/sizes.tsx b/packages/icons/docs/richIcon/sizes.tsx new file mode 100644 index 000000000..10c716a6a --- /dev/null +++ b/packages/icons/docs/richIcon/sizes.tsx @@ -0,0 +1,16 @@ +import { Inline } from "@hopper-ui/components"; +import { createRichIcon } from "@hopper-ui/icons"; + +import { SparklesRichIcon24, SparklesRichIcon32, SparklesRichIcon40 } from "../src/index.ts"; + +const CustomRichIcon = createRichIcon(SparklesRichIcon24, SparklesRichIcon32, SparklesRichIcon40, "SparklesRichIcon"); + +export default function Example() { + return ( + + + + + + ); +} diff --git a/packages/icons/docs/richIcon/styling.tsx b/packages/icons/docs/richIcon/styling.tsx new file mode 100644 index 000000000..d2669c070 --- /dev/null +++ b/packages/icons/docs/richIcon/styling.tsx @@ -0,0 +1,11 @@ +import { createRichIcon } from "@hopper-ui/icons"; + +import { SparklesRichIcon24, SparklesRichIcon32, SparklesRichIcon40 } from "../src/index.ts"; + +const CustomRichIcon = createRichIcon(SparklesRichIcon24, SparklesRichIcon32, SparklesRichIcon40, "SparklesRichIcon"); + +export default function Example() { + return ( + + ); +} diff --git a/packages/icons/docs/richIcon/variants.tsx b/packages/icons/docs/richIcon/variants.tsx new file mode 100644 index 000000000..cd5d16b66 --- /dev/null +++ b/packages/icons/docs/richIcon/variants.tsx @@ -0,0 +1,30 @@ +import { Inline, Stack } from "@hopper-ui/components"; +import { createRichIcon } from "@hopper-ui/icons"; + +import { SparklesRichIcon24, SparklesRichIcon32, SparklesRichIcon40 } from "../src/index.ts"; + +const CustomRichIcon = createRichIcon(SparklesRichIcon24, SparklesRichIcon32, SparklesRichIcon40, "SparklesRichIcon"); + +export default function Example() { + return ( + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/icons/docs/src/SparklesRich24.tsx b/packages/icons/docs/src/SparklesRich24.tsx new file mode 100644 index 000000000..b4498e1bc --- /dev/null +++ b/packages/icons/docs/src/SparklesRich24.tsx @@ -0,0 +1,4 @@ +import { forwardRef, type Ref, type SVGProps } from "react"; + +// eslint-disable-next-line max-len +export const SparklesRichIcon24 = forwardRef((props: SVGProps, ref: Ref) => ); diff --git a/packages/icons/docs/src/SparklesRich32.tsx b/packages/icons/docs/src/SparklesRich32.tsx new file mode 100644 index 000000000..623e4e93c --- /dev/null +++ b/packages/icons/docs/src/SparklesRich32.tsx @@ -0,0 +1,5 @@ +import { forwardRef, type Ref, type SVGProps } from "react"; + +// eslint-disable-next-line max-len +export const SparklesRichIcon32 = forwardRef((props: SVGProps, ref: Ref) => ); + diff --git a/packages/icons/docs/src/SparklesRich40.tsx b/packages/icons/docs/src/SparklesRich40.tsx new file mode 100644 index 000000000..5558f46a8 --- /dev/null +++ b/packages/icons/docs/src/SparklesRich40.tsx @@ -0,0 +1,4 @@ +import { forwardRef, type Ref, type SVGProps } from "react"; + +// eslint-disable-next-line max-len +export const SparklesRichIcon40 = forwardRef((props: SVGProps, ref: Ref) => ); diff --git a/packages/icons/docs/src/index.ts b/packages/icons/docs/src/index.ts index 3999d2591..791ed1a8a 100644 --- a/packages/icons/docs/src/index.ts +++ b/packages/icons/docs/src/index.ts @@ -1,3 +1,7 @@ export { Sparkles16 } from "./Sparkles16.tsx"; export { Sparkles24 } from "./Sparkles24.tsx"; export { Sparkles32 } from "./Sparkles32.tsx"; +export { SparklesRichIcon24 } from "./SparklesRich24.tsx"; +export { SparklesRichIcon32 } from "./SparklesRich32.tsx"; +export { SparklesRichIcon40 } from "./SparklesRich40.tsx"; +