diff --git a/apps/docs/app/ui/components/propTable/PropTable.tsx b/apps/docs/app/ui/components/propTable/PropTable.tsx index e6e9aa9d7..6c6006e29 100644 --- a/apps/docs/app/ui/components/propTable/PropTable.tsx +++ b/apps/docs/app/ui/components/propTable/PropTable.tsx @@ -109,17 +109,37 @@ export default async function PropTable({ component }: PropTableProps) { const { groups } = await getComponentProps(component); const formattedGroups = await formatGroup(groups); + const mergedObject = formattedGroups.reduce((acc, current) => { + for (const [key, value] of Object.entries(current)) { + if (acc[key]) { + acc[key] = acc[key].concat(value); + } else { + acc[key] = value; + } + } + + return acc; + }, {}); + + const mergedArray = Object.entries(mergedObject).map(([key, value]) => ({ + [key]: value + })); + return ( <> - {formattedGroups.map(group => { + {mergedArray.map(group => { const [key] = Object.keys(group); const isEmpty = group[key].length === 0; + if (isEmpty) { + return null; + } + return ( {key === "default" ? : - !isEmpty && {capitalize(key)} diff --git a/apps/docs/app/ui/components/simpleTable/SimpleTable.tsx b/apps/docs/app/ui/components/simpleTable/SimpleTable.tsx index 140b4a33b..8f36e1e53 100644 --- a/apps/docs/app/ui/components/simpleTable/SimpleTable.tsx +++ b/apps/docs/app/ui/components/simpleTable/SimpleTable.tsx @@ -1,3 +1,5 @@ +"use client"; + import clsx from "clsx"; interface SimpleTableProps { @@ -7,7 +9,7 @@ interface SimpleTableProps { lastColumnAlignment?: "left" | "right"; } -export default async function SimpleTable({ "aria-label": ariaLabel, headers, data, lastColumnAlignment }: SimpleTableProps) { +export default function SimpleTable({ "aria-label": ariaLabel, headers, data, lastColumnAlignment }: SimpleTableProps) { return ( diff --git a/apps/docs/content/components/collections/TagGroup.mdx b/apps/docs/content/components/collections/TagGroup.mdx index 886ab55c8..5027bc174 100644 --- a/apps/docs/content/components/collections/TagGroup.mdx +++ b/apps/docs/content/components/collections/TagGroup.mdx @@ -62,7 +62,7 @@ A tag can be disabled using the `isDisabled` prop. -### Invalid +### Invalid Tag If a tag group is invalid, it will display an error message. Displaying this error message will hide the helper message. @@ -113,7 +113,7 @@ Using the `renderEmptyState` prop, you can customize the empty state message whe -### Invalid +### Invalid TagGroup A tag can be set as invalid using the `isInvalid` prop. diff --git a/packages/components/src/tag/docs/tag/count.tsx b/packages/components/src/tag/docs/tag/count.tsx index 674b15795..8fb90f606 100644 --- a/packages/components/src/tag/docs/tag/count.tsx +++ b/packages/components/src/tag/docs/tag/count.tsx @@ -3,15 +3,15 @@ import { Badge, Tag, TagGroup, Text } from "@hopper-ui/components"; export default function Example() { return ( - + Designer 12 - + Developer 100 - + Manager 99+ diff --git a/packages/components/src/tag/docs/tag/icons.tsx b/packages/components/src/tag/docs/tag/icons.tsx index bedd8f536..d69b6199d 100644 --- a/packages/components/src/tag/docs/tag/icons.tsx +++ b/packages/components/src/tag/docs/tag/icons.tsx @@ -4,11 +4,11 @@ import { SparklesIcon } from "@hopper-ui/icons"; export default function Example() { return ( - + Developer - + Designer @@ -16,7 +16,7 @@ export default function Example() { - + Manager diff --git a/packages/icons/docs/preview.tsx b/packages/icons/docs/preview.tsx index 638514828..f758c2d43 100644 --- a/packages/icons/docs/preview.tsx +++ b/packages/icons/docs/preview.tsx @@ -1,10 +1,8 @@ import { createIcon } from "@hopper-ui/icons"; -import CustomIcon16 from "./src/sparkles-16.svg"; -import CustomIcon24 from "./src/sparkles-24.svg"; -import CustomIcon32 from "./src/sparkles-32.svg"; +import { Sparkles16, Sparkles24, Sparkles32 } from "./src/index.ts"; -const CustomIcon = createIcon(CustomIcon16, CustomIcon24, CustomIcon32, "CustomIcon"); +const CustomIcon = createIcon(Sparkles16, Sparkles24, Sparkles32, "CustomIcon"); export default function Example() { return ( diff --git a/packages/icons/docs/sizes.tsx b/packages/icons/docs/sizes.tsx index 7f39b3174..d7e369df6 100644 --- a/packages/icons/docs/sizes.tsx +++ b/packages/icons/docs/sizes.tsx @@ -1,11 +1,9 @@ import { Inline } from "@hopper-ui/components"; import { createIcon } from "@hopper-ui/icons"; -import CustomIcon16 from "./src/sparkles-16.svg"; -import CustomIcon24 from "./src/sparkles-24.svg"; -import CustomIcon32 from "./src/sparkles-32.svg"; +import { Sparkles16, Sparkles24, Sparkles32 } from "./src/index.ts"; -const CustomIcon = createIcon(CustomIcon16, CustomIcon24, CustomIcon32, "CustomIcon"); +const CustomIcon = createIcon(Sparkles16, Sparkles24, Sparkles32, "CustomIcon"); export default function Example() { return ( diff --git a/packages/icons/docs/src/Sparkles16.tsx b/packages/icons/docs/src/Sparkles16.tsx new file mode 100644 index 000000000..15936c7ab --- /dev/null +++ b/packages/icons/docs/src/Sparkles16.tsx @@ -0,0 +1,6 @@ +import { forwardRef, type SVGProps } from "react"; + +export const Sparkles16 = forwardRef>((props, ref) => ( + // eslint-disable-next-line max-len + +)); diff --git a/packages/icons/docs/src/Sparkles24.tsx b/packages/icons/docs/src/Sparkles24.tsx new file mode 100644 index 000000000..d1637fd05 --- /dev/null +++ b/packages/icons/docs/src/Sparkles24.tsx @@ -0,0 +1,7 @@ +import { forwardRef, type SVGProps } from "react"; + + +export const Sparkles24 = forwardRef>((props, ref) => ( + // eslint-disable-next-line max-len + +)); diff --git a/packages/icons/docs/src/Sparkles32.tsx b/packages/icons/docs/src/Sparkles32.tsx new file mode 100644 index 000000000..08b42640f --- /dev/null +++ b/packages/icons/docs/src/Sparkles32.tsx @@ -0,0 +1,7 @@ +import { forwardRef, type SVGProps } from "react"; + + +export const Sparkles32 = forwardRef>((props, ref) => ( + // eslint-disable-next-line max-len + +)); diff --git a/packages/icons/docs/src/index.ts b/packages/icons/docs/src/index.ts new file mode 100644 index 000000000..3999d2591 --- /dev/null +++ b/packages/icons/docs/src/index.ts @@ -0,0 +1,3 @@ +export { Sparkles16 } from "./Sparkles16.tsx"; +export { Sparkles24 } from "./Sparkles24.tsx"; +export { Sparkles32 } from "./Sparkles32.tsx"; diff --git a/packages/icons/docs/src/sparkles-16.svg b/packages/icons/docs/src/sparkles-16.svg deleted file mode 100644 index 1fdd7be59..000000000 --- a/packages/icons/docs/src/sparkles-16.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/docs/src/sparkles-24.svg b/packages/icons/docs/src/sparkles-24.svg deleted file mode 100644 index 729ba8252..000000000 --- a/packages/icons/docs/src/sparkles-24.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/docs/src/sparkles-32.svg b/packages/icons/docs/src/sparkles-32.svg deleted file mode 100644 index 7632ca498..000000000 --- a/packages/icons/docs/src/sparkles-32.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/icons/docs/styling.tsx b/packages/icons/docs/styling.tsx index 46a8edb4e..929b5bc19 100644 --- a/packages/icons/docs/styling.tsx +++ b/packages/icons/docs/styling.tsx @@ -1,10 +1,8 @@ import { createIcon } from "@hopper-ui/icons"; -import CustomIcon16 from "./src/sparkles-16.svg"; -import CustomIcon24 from "./src/sparkles-24.svg"; -import CustomIcon32 from "./src/sparkles-32.svg"; +import { Sparkles16, Sparkles24, Sparkles32 } from "./src/index.ts"; -const CustomIcon = createIcon(CustomIcon16, CustomIcon24, CustomIcon32, "CustomIcon"); +const CustomIcon = createIcon(Sparkles16, Sparkles24, Sparkles32, "CustomIcon"); export default function Example() { return (