Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix console errors in the documentation #552

Merged
merged 3 commits into from
Dec 18, 2024
Merged

Fix console errors in the documentation #552

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
afbb80d
Fix Responsive
victortrinh2 Dec 17, 2024
bfe67ae
Fix TagGroup
victortrinh2 Dec 17, 2024
24e1488
Fix icon
victortrinh2 Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions apps/docs/app/ui/components/propTable/PropTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<Fragment key={key}>
{key === "default" ?
<PropTableRender items={group[key]} /> :
!isEmpty && <Collapsible className="hd-props-table__section"
<Collapsible className="hd-props-table__section"
key={key}
title={<Title level={4}>
{capitalize(key)}
Expand Down
4 changes: 3 additions & 1 deletion apps/docs/app/ui/components/simpleTable/SimpleTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
"use client";

import clsx from "clsx";

interface SimpleTableProps {
Expand All @@ -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 (
<table aria-label={ariaLabel} className="hd-table">
<thead>
Expand Down
4 changes: 2 additions & 2 deletions apps/docs/content/components/collections/TagGroup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ A tag can be disabled using the `isDisabled` prop.

<Example src="tag/docs/tag/disabled" />

### Invalid
### Invalid Tag

If a tag group is invalid, it will display an error message. Displaying this error message will hide the helper message.

Expand Down Expand Up @@ -113,7 +113,7 @@ Using the `renderEmptyState` prop, you can customize the empty state message whe

<Example src="tag/docs/tagGroup/empty" />

### Invalid
### Invalid TagGroup

A tag can be set as invalid using the `isInvalid` prop.

Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/tag/docs/tag/count.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ import { Badge, Tag, TagGroup, Text } from "@hopper-ui/components";
export default function Example() {
return (
<TagGroup aria-label="Jobs">
<Tag id="designer" size="sm">
<Tag id="designer" size="sm" textValue="Designer">
<Text>Designer</Text>
<Badge>12</Badge>
</Tag>
<Tag id="developer" size="md">
<Tag id="developer" size="md" textValue="Developer">
<Text>Developer</Text>
<Badge variant="subdued">100</Badge>
</Tag>
<Tag id="manager" size="lg">
<Tag id="manager" size="lg" textValue="Manager">
<Text>Manager</Text>
<Badge>99+</Badge>
</Tag>
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/tag/docs/tag/icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@ import { SparklesIcon } from "@hopper-ui/icons";
export default function Example() {
return (
<TagGroup aria-label="Jobs">
<Tag id="developer" size="sm">
<Tag id="developer" size="sm" textValue="Developer">
<SparklesIcon />
<Text>Developer</Text>
</Tag>
<Tag id="designer" size="md">
<Tag id="designer" size="md" textValue="Designer">
<Text>Designer</Text>
<IconList>
<SparklesIcon />
<SparklesIcon />
<SparklesIcon />
</IconList>
</Tag>
<Tag id="manager" size="lg">
<Tag id="manager" size="lg" textValue="Manager">
<Text>Manager</Text>
<IconList>
<SparklesIcon />
Expand Down
6 changes: 2 additions & 4 deletions packages/icons/docs/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down
6 changes: 2 additions & 4 deletions packages/icons/docs/sizes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down
6 changes: 6 additions & 0 deletions packages/icons/docs/src/Sparkles16.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { forwardRef, type SVGProps } from "react";

export const Sparkles16 = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((props, ref) => (
// eslint-disable-next-line max-len
<svg {...props} ref={ref} xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fillRule="evenodd" d="M5.518.998c.329 0 .62.215.716.53l.913 2.958 2.425 1.077a.75.75 0 0 1 0 1.37L7.147 8.012l-.913 2.958a.75.75 0 0 1-1.433 0l-.912-2.958-2.426-1.077a.75.75 0 0 1 0-1.371L3.89 4.486l.91-2.959a.75.75 0 0 1 .717-.529m0 3.296-.297.96a.75.75 0 0 1-.412.464l-1.193.53 1.193.53a.75.75 0 0 1 .412.465l.297.96.296-.96a.75.75 0 0 1 .412-.465l1.193-.53-1.193-.53a.75.75 0 0 1-.412-.464zM9.5 3.748a.75.75 0 0 1 .75-.75h1.25v-1.25a.75.75 0 0 1 1.5 0v1.25h1.25a.75.75 0 0 1 0 1.5H13v1.25a.75.75 0 0 1-1.5 0v-1.25h-1.25a.75.75 0 0 1-.75-.75M8 12.25a.75.75 0 0 1 .75-.75H10v-1.25a.75.75 0 0 1 1.5 0v1.25h1.25a.75.75 0 0 1 0 1.5H11.5v1.25a.75.75 0 1 1-1.5 0V13H8.75a.75.75 0 0 1-.75-.75" /></svg>
));
7 changes: 7 additions & 0 deletions packages/icons/docs/src/Sparkles24.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { forwardRef, type SVGProps } from "react";


export const Sparkles24 = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((props, ref) => (
// eslint-disable-next-line max-len
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" {...props} ref={ref}><path fillRule="evenodd" d="M17 3a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 17 3m-7.996.002a.75.75 0 0 1 .72.542l1.325 4.602 3.527 1.678a.75.75 0 0 1 0 1.355l-3.527 1.678-1.324 4.602a.75.75 0 0 1-1.442 0L6.96 12.857l-3.527-1.678a.75.75 0 0 1 0-1.355L6.96 8.146l1.324-4.602a.75.75 0 0 1 .72-.542m0 3.461-.697 2.423a.75.75 0 0 1-.399.47L5.5 10.502l2.408 1.146a.75.75 0 0 1 .399.47l.697 2.422.697-2.423a.75.75 0 0 1 .399-.47l2.408-1.145L10.1 9.356a.75.75 0 0 1-.399-.47zM17.75 8.75a.75.75 0 0 0-1.5 0v1.5a.75.75 0 0 0 1.5 0zM13 7a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5A.75.75 0 0 1 13 7m5.75-.75a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5zM15 13a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-1.5 0v-1.5A.75.75 0 0 1 15 13m.75 5.75a.75.75 0 0 0-1.5 0v1.5a.75.75 0 0 0 1.5 0zM11 17a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5A.75.75 0 0 1 11 17m5.75-.75a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5z" /></svg>
));
7 changes: 7 additions & 0 deletions packages/icons/docs/src/Sparkles32.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { forwardRef, type SVGProps } from "react";


export const Sparkles32 = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>((props, ref) => (
// eslint-disable-next-line max-len
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" {...props} ref={ref}><path fillRule="evenodd" d="M12.5 4a1 1 0 0 1 .956.705l1.891 6.135 5.059 2.246a1 1 0 0 1 0 1.828l-5.059 2.246-1.891 6.135a1 1 0 0 1-1.912 0L9.653 17.16l-5.059-2.246a1 1 0 0 1 0-1.828l5.059-2.246 1.891-6.135A1 1 0 0 1 12.5 4m0 4.394-1.07 3.47a1 1 0 0 1-.55.62L7.464 14l3.416 1.517a1 1 0 0 1 .55.62l1.07 3.47 1.07-3.47a1 1 0 0 1 .55-.62L17.536 14l-3.416-1.517a1 1 0 0 1-.55-.62zM18 9a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1m7-1a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2zm-2-4a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0V5a1 1 0 0 1 1-1m1 7a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0zm-8 12a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1m7-1a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2zm-2-4a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1m1 7a1 1 0 1 0-2 0v2a1 1 0 1 0 2 0z" /></svg>
));
3 changes: 3 additions & 0 deletions packages/icons/docs/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export { Sparkles16 } from "./Sparkles16.tsx";
export { Sparkles24 } from "./Sparkles24.tsx";
export { Sparkles32 } from "./Sparkles32.tsx";
1 change: 0 additions & 1 deletion packages/icons/docs/src/sparkles-16.svg
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion packages/icons/docs/src/sparkles-24.svg
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion packages/icons/docs/src/sparkles-32.svg
View file
Open in desktop

This file was deleted.

6 changes: 2 additions & 4 deletions packages/icons/docs/styling.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down
Loading