From afbb80da7d642cbd4aa321d50fd4a46bd8068f46 Mon Sep 17 00:00:00 2001 From: Victor Trinh Date: Tue, 17 Dec 2024 16:22:31 -0500 Subject: [PATCH 1/3] Fix Responsive --- apps/docs/app/ui/components/simpleTable/SimpleTable.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/docs/app/ui/components/simpleTable/SimpleTable.tsx b/apps/docs/app/ui/components/simpleTable/SimpleTable.tsx index 140b4a33..8f36e1e5 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 ( From bfe67ae4749fc0dd7e5e6b2cefb9028c43461bd5 Mon Sep 17 00:00:00 2001 From: Victor Trinh Date: Tue, 17 Dec 2024 16:22:38 -0500 Subject: [PATCH 2/3] Fix TagGroup --- apps/docs/content/components/collections/TagGroup.mdx | 4 ++-- packages/components/src/tag/docs/tag/count.tsx | 6 +++--- packages/components/src/tag/docs/tag/icons.tsx | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/docs/content/components/collections/TagGroup.mdx b/apps/docs/content/components/collections/TagGroup.mdx index 886ab55c..5027bc17 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 674b1579..8fb90f60 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 bedd8f53..d69b6199 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 From 24e14888a56a3827e65e8e33ac767bf5aad73944 Mon Sep 17 00:00:00 2001 From: Victor Trinh Date: Wed, 18 Dec 2024 11:25:52 -0500 Subject: [PATCH 3/3] Fix icon --- .../app/ui/components/propTable/PropTable.tsx | 24 +++++++++++++++++-- packages/icons/docs/preview.tsx | 6 ++--- packages/icons/docs/sizes.tsx | 6 ++--- packages/icons/docs/src/Sparkles16.tsx | 6 +++++ packages/icons/docs/src/Sparkles24.tsx | 7 ++++++ packages/icons/docs/src/Sparkles32.tsx | 7 ++++++ packages/icons/docs/src/index.ts | 3 +++ packages/icons/docs/src/sparkles-16.svg | 1 - packages/icons/docs/src/sparkles-24.svg | 1 - packages/icons/docs/src/sparkles-32.svg | 1 - packages/icons/docs/styling.tsx | 6 ++--- 11 files changed, 51 insertions(+), 17 deletions(-) create mode 100644 packages/icons/docs/src/Sparkles16.tsx create mode 100644 packages/icons/docs/src/Sparkles24.tsx create mode 100644 packages/icons/docs/src/Sparkles32.tsx create mode 100644 packages/icons/docs/src/index.ts delete mode 100644 packages/icons/docs/src/sparkles-16.svg delete mode 100644 packages/icons/docs/src/sparkles-24.svg delete mode 100644 packages/icons/docs/src/sparkles-32.svg diff --git a/apps/docs/app/ui/components/propTable/PropTable.tsx b/apps/docs/app/ui/components/propTable/PropTable.tsx index e6e9aa9d..6c6006e2 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/packages/icons/docs/preview.tsx b/packages/icons/docs/preview.tsx index 63851482..f758c2d4 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 7f39b317..d7e369df 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 00000000..15936c7a --- /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 00000000..d1637fd0 --- /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 00000000..08b42640 --- /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 00000000..3999d259 --- /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 1fdd7be5..00000000 --- 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 729ba825..00000000 --- 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 7632ca49..00000000 --- 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 46a8edb4..929b5bc1 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 (