Skip to content

Commit 8232564

Browse files
officialMECHofficialMECH
committed
component clean up
1 parent 6f612eb commit 8232564

File tree

23 files changed

+125
-115
lines changed

23 files changed

+125
-115
lines changed

‎panda.config.ts

+1-49
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { defineConfig } from "@pandacss/dev";
22

33
export default defineConfig({
44
preflight: true,
5-
include: ["./src/**/*.{js,jsx,ts,tsx}", "./pages/**/*.{js,jsx,ts,tsx}"],
5+
include: ["./src/**/*.{js,jsx,ts,tsx}"],
66
exclude: [],
77
outdir: "src/styles",
88
globalCss: {
@@ -37,40 +37,6 @@ export default defineConfig({
3737
fontFamily: "monospace",
3838
fontSize: "md",
3939
},
40-
details: {
41-
width: "full",
42-
"& summary": {
43-
paddingY: 2,
44-
paddingX: 4,
45-
backgroundColor: "element",
46-
cursor: "pointer",
47-
display: "flex",
48-
justifyContent: "space-between",
49-
gap: 8,
50-
alignItems: "center",
51-
fontWeight: "bold",
52-
fontSize: "xl",
53-
listStyle: "none",
54-
},
55-
"& summary::-webkit-details-marker": {
56-
display: "none",
57-
},
58-
"& summary::after": {
59-
fontFamily: "system",
60-
content: '"▶"',
61-
},
62-
"&[open] summary::after": {
63-
fontFamily: "system",
64-
content: '"▼"',
65-
},
66-
"& summary > *": {
67-
paddingY: 2,
68-
},
69-
"& section ": {
70-
paddingY: 2,
71-
marginX: 4,
72-
},
73-
},
7440
hr: {
7541
marginY: 4,
7642
},
@@ -87,20 +53,6 @@ export default defineConfig({
8753
p: {
8854
marginBottom: 2,
8955
},
90-
pre: {
91-
fontFamily: "monospace",
92-
fontSize: "md",
93-
},
94-
select: {
95-
paddingX: "0.5em",
96-
},
97-
table: {
98-
borderCollapse: "separate",
99-
borderSpacing: 0.5,
100-
"& thead": {
101-
fontWeight: "bold",
102-
},
103-
},
10456
},
10557
theme: {
10658
extend: {

‎src/components/primitives.tsx

-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/** */
2-
31
import { AsChildProps } from "$/types";
42
import { Slot } from "@radix-ui/react-slot";
53
import { ComponentPropsWithoutRef, ElementType, ForwardRefExoticComponent, ForwardedRef, forwardRef } from "react";
@@ -26,8 +24,3 @@ export function createDynamicPrimitive<T extends PrimitiveElement, P>(fallback:
2624
type Props = PrimitiveProps<T> & AsChildProps & P;
2725
return forwardRef<T, Props>((props, ref) => renderFn(fallback(props) as T, props, ref));
2826
}
29-
/** Create an exotic component with slot behavior. */
30-
export function createMaskedPrimitive<T extends PrimitiveElement, P = {}>(fallback: T, renderFn = (element: T, props: PrimitiveProps<T> & AsChildProps & P, ref: ForwardedRef<T>): JSX.Element | null => render(element, props, ref)) {
31-
type Props = PrimitiveProps<T> & AsChildProps & P;
32-
return forwardRef<T, Props>((...args) => renderFn(fallback, ...args));
33-
}

‎src/components/ui/atoms/Badge/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { RecipeVariantProps } from "$/styles/types";
44

55
const Component = createDynamicPrimitive<"a", RecipeVariantProps<typeof cn.root>>(
66
({ href }) => (href ? "a" : "span"),
7-
(Element, { asChild, children, color, className, ...delegated }) => {
7+
(Element, { asChild, children, color, className, ...rest }) => {
88
return (
9-
<Element className={cx(cn.root(), className)} style={{ backgroundColor: color }} {...delegated}>
9+
<Element className={cx(cn.root(), className)} style={{ backgroundColor: color }} {...rest}>
1010
{children}
1111
</Element>
1212
);

‎src/components/ui/builders/Details/index.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { createPrimitive } from "$/components/primitives";
2+
import * as Primitive from "@radix-ui/react-collapsible";
3+
import { useState } from "react";
4+
5+
const Root = createPrimitive(Primitive.Root, (Element, { ...rest }) => {
6+
const [open] = useState(rest.open);
7+
return (
8+
<Element asChild {...rest}>
9+
<details open={open}>{rest.children}</details>
10+
</Element>
11+
);
12+
});
13+
14+
const Trigger = createPrimitive(Primitive.Trigger, (Element, { ...rest }) => {
15+
return (
16+
<Element asChild {...rest}>
17+
<summary>{rest.children}</summary>
18+
</Element>
19+
);
20+
});
21+
22+
const Content = createPrimitive(Primitive.Content, (Element, { ...rest }) => {
23+
return (
24+
<Element asChild>
25+
<section>{rest.children}</section>
26+
</Element>
27+
);
28+
});
29+
30+
export { Content, Root, Trigger };

‎src/components/ui/builders/Dialog/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1+
import { createPrimitive } from "$/components/primitives";
12
import { css, cx } from "$/styles/css";
23
import * as Primitive from "@radix-ui/react-dialog";
3-
import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
44

55
const Root = Primitive.Root;
66

77
const Trigger = Primitive.Trigger;
88

9-
const Content = forwardRef<ElementRef<typeof Primitive.Content>, ComponentPropsWithoutRef<typeof Primitive.Content>>(({ className, ...props }, ref) => {
9+
const Content = createPrimitive<typeof Primitive.Content>(Primitive.Content, (Element, { asChild, className, ...rest }) => {
1010
return (
1111
<Primitive.Portal>
1212
<Primitive.Overlay className={cn.overlay}>
13-
<Primitive.Content className={cx(cn.content, className)} ref={ref} {...props} />
13+
<Element className={cx(cn.content, className)} {...rest} />
1414
</Primitive.Overlay>
1515
</Primitive.Portal>
1616
);

‎src/components/ui/builders/Field/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Slot } from "@radix-ui/react-slot";
55
import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
66
import { Provider, useContext } from "./context";
77

8-
interface RootProps extends ComponentPropsWithoutRef<"div">, AsChildProps {
8+
interface RootProps {
99
id: string;
1010
}
1111
const Root = createPrimitive<"fieldset", ScopedProps<RootProps>>("fieldset", (Element, { __scope, asChild, id, ...rest }) => {

‎src/components/ui/builders/Popover/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1+
import { createPrimitive } from "$/components/primitives";
12
import * as Primitive from "@radix-ui/react-popover";
2-
import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
33

44
const Root = Primitive.Root;
55

66
const Trigger = Primitive.Trigger;
77

8-
const Content = forwardRef<ElementRef<typeof Primitive.Content>, ComponentPropsWithoutRef<typeof Primitive.Content>>(({ sideOffset = 4, ...props }, ref) => {
8+
const Content = createPrimitive<typeof Primitive.Content>(Primitive.Content, (Element, { asChild, sideOffset = 4, ...props }) => {
99
return (
1010
<Primitive.Portal>
11-
<Primitive.Content ref={ref} sideOffset={sideOffset} {...props} />
11+
<Element sideOffset={sideOffset} {...props} />
1212
</Primitive.Portal>
1313
);
1414
});

‎src/components/ui/builders/Table/index.tsx

+15-4
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@ import { scrollable } from "$/styles/patterns";
55
const Root = createPrimitive("table", (Element, { asChild, ...rest }) => {
66
return (
77
<div className={cx(cn.wrapper)}>
8-
<Element className={cx(cn.container)} {...rest} />
8+
<Element className={cx(cn.root)} {...rest} />
99
</div>
1010
);
1111
});
1212

13-
const Header = createPrimitive("thead");
13+
const Header = createPrimitive("thead", (Element, { asChild, ...rest }) => {
14+
return <Element className={cx(cn.header)} {...rest} />;
15+
});
1416

1517
const Body = createPrimitive("tbody");
1618

@@ -23,8 +25,17 @@ const Head = createPrimitive("th");
2325
const Cell = createPrimitive("td");
2426

2527
const cn = {
26-
wrapper: scrollable({ width: "full" }),
27-
container: css({ margin: "auto" }),
28+
wrapper: scrollable({
29+
width: "full",
30+
}),
31+
root: css({
32+
margin: "auto",
33+
borderCollapse: "separate",
34+
borderSpacing: 0.5,
35+
}),
36+
header: css({
37+
fontWeight: "bold",
38+
}),
2839
};
2940

3041
export { Body, Cell, Footer, Head, Header, Root, Row };

‎src/components/ui/builders/Tooltip/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { createPrimitive } from "$/components/primitives";
12
import * as Primitive from "@radix-ui/react-tooltip";
2-
import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
33

44
type Props = Primitive.TooltipProps;
55

@@ -9,8 +9,8 @@ const Root = Primitive.Root;
99

1010
const Trigger = Primitive.Trigger;
1111

12-
const Content = forwardRef<ElementRef<typeof Primitive.Content>, ComponentPropsWithoutRef<typeof Primitive.Content>>(({ sideOffset = 4, ...props }, ref) => {
13-
return <Primitive.Content ref={ref} sideOffset={sideOffset} {...props} />;
12+
const Content = createPrimitive<typeof Primitive.Content>(Primitive.Content, (Element, { sideOffset = 4, ...props }) => {
13+
return <Element sideOffset={sideOffset} {...props} />;
1414
});
1515

1616
export { Content, Provider, Root, Trigger, type Props };

‎src/components/ui/builders/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export * as Collapsible from "@radix-ui/react-collapsible";
33
export * as Tabs from "@radix-ui/react-tabs";
44
export * as Toggle from "@radix-ui/react-toggle";
55

6+
export * as Details from "./Details";
67
export * as Dialog from "./Dialog";
78
export * as Field from "./Field";
89
export * as Popover from "./Popover";

‎src/components/ui/molecules/Callout/index.tsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import { css, cva, cx } from "$/styles/css";
22
import { hstack, vstack } from "$/styles/patterns";
33
import { RecipeVariantProps } from "$/styles/types";
4-
import { PropsWithChildren } from "react";
4+
import { ComponentPropsWithoutRef } from "react";
55

6-
interface Props {
7-
title?: string;
8-
}
9-
function Component({ title, variant, children }: PropsWithChildren<Props> & RecipeVariantProps<typeof cn.root>) {
6+
interface Props extends ComponentPropsWithoutRef<"aside"> {}
7+
8+
function Component({ title, variant, children, ...rest }: Props & RecipeVariantProps<typeof cn.root>) {
109
return (
11-
<aside className={cx(cn.root({ variant }))}>
10+
<aside className={cx(cn.root({ variant }))} {...rest}>
1211
<span className={cx(cn.heading)}>{title ?? variant?.toUpperCase()}</span>
1312
<small className={cx(cn.content)}>{children}</small>
1413
</aside>

‎src/components/ui/molecules/Checkbox/index.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,11 @@ import { Checkbox as Builder } from "$/components/ui/builders";
33
import { css, cx } from "$/styles/css";
44
import { center, interactable } from "$/styles/patterns";
55
import { faCheck } from "@fortawesome/free-solid-svg-icons";
6+
import { ComponentPropsWithoutRef } from "react";
67

7-
function Component({ className, ...rest }: Builder.CheckboxProps) {
8+
interface Props extends ComponentPropsWithoutRef<typeof Builder.Root> {}
9+
10+
function Component({ className, ...rest }: Props) {
811
return (
912
<Builder.Root className={cx(cn.root, className)} {...rest}>
1013
<Builder.Indicator asChild className={cn.indicator}>

‎src/components/ui/molecules/Details/index.tsx

+22-16
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,24 @@
1-
import { Icon } from "$/components/ui/atoms";
2-
import { Collapsible as Builder } from "$/components/ui/builders";
1+
import { Details as Builder } from "$/components/ui/builders";
32
import { css, cx } from "$/styles/css";
43
import { interactable } from "$/styles/patterns";
5-
import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
6-
import { ReactNode } from "react";
4+
import { RenderProps } from "$/types";
5+
import { ComponentPropsWithoutRef } from "react";
76

8-
interface Props extends Builder.CollapsibleProps {
9-
render: () => ReactNode;
10-
}
7+
interface Props extends ComponentPropsWithoutRef<typeof Builder.Root> {}
118

12-
function Component({ children, render, className, ...rest }: Props) {
9+
function Component({ children, render, className, ...rest }: Props & RenderProps<Props>) {
1310
return (
1411
<Builder.Root className={cx(cn.root, className)} {...rest}>
15-
<Builder.Trigger asChild className={cx(cn.trigger)}>
16-
<summary>
17-
{children}
18-
<Icon icon={faCaretDown} />
19-
</summary>
20-
</Builder.Trigger>
21-
<Builder.Content className={cx(cn.content)}>{render()}</Builder.Content>
12+
<Builder.Trigger className={cx(cn.trigger)}>{children}</Builder.Trigger>
13+
<Builder.Content className={cx(cn.content)}>{render({})}</Builder.Content>
2214
</Builder.Root>
2315
);
2416
}
2517

2618
const cn = {
27-
root: css({ width: "full" }),
19+
root: css({
20+
width: "full",
21+
}),
2822
trigger: css(interactable.raw(), {
2923
paddingY: 2,
3024
paddingX: 4,
@@ -35,9 +29,21 @@ const cn = {
3529
fontWeight: "bold",
3630
fontSize: "xl",
3731
listStyle: "none",
32+
"&::-webkit-details-marker": {
33+
display: "none",
34+
},
35+
"&::after": {
36+
fontFamily: "system",
37+
content: '"▶"',
38+
},
39+
"&[data-state='open']::after": {
40+
fontFamily: "system",
41+
content: '"▼"',
42+
},
3843
}),
3944
content: css({
4045
paddingBottom: 2,
46+
height: "max-content",
4147
}),
4248
};
4349

‎src/components/ui/molecules/Dialog/index.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import { css } from "$/styles/css";
33
import { RenderProps } from "$/types";
44
import { ComponentPropsWithoutRef } from "react";
55

6-
function Component({ render, children, ...rest }: ComponentPropsWithoutRef<typeof Builder.Root> & RenderProps) {
6+
interface Props extends ComponentPropsWithoutRef<typeof Builder.Root> {}
7+
8+
function Component({ render, children, ...rest }: Props & RenderProps<{ close: (props?: Props) => void }>) {
79
return (
810
<Builder.Root {...rest}>
911
<Builder.Trigger asChild>{children}</Builder.Trigger>

‎src/components/ui/molecules/Popover/index.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ import { css } from "$/styles/css";
33
import { RenderProps } from "$/types";
44
import { ComponentPropsWithoutRef } from "react";
55

6-
function Component({ render, children, ...rest }: ComponentPropsWithoutRef<typeof Builder.Root> & RenderProps) {
6+
interface Props extends ComponentPropsWithoutRef<typeof Builder.Root> {}
7+
8+
function Component({ render, children, ...rest }: Props & RenderProps) {
79
return (
810
<Builder.Root {...rest}>
911
<Builder.Trigger>{children}</Builder.Trigger>
1012
<Builder.Content side="top" sideOffset={4} className={cn.content}>
11-
{render({ close })}
13+
{render({})}
1214
</Builder.Content>
1315
</Builder.Root>
1416
);

‎src/components/ui/molecules/Section/index.tsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,23 @@ import { Heading } from "$/components/ui/atoms";
22
import { cva } from "$/styles/css";
33
import { flex } from "$/styles/patterns";
44
import { RecipeVariantProps } from "$/styles/types";
5-
import { HTMLAttributes, forwardRef } from "react";
5+
import { ComponentPropsWithoutRef } from "react";
66

7-
interface Props {
7+
interface Props extends ComponentPropsWithoutRef<"section"> {
88
heading?: string;
9-
center?: boolean;
109
gap?: number;
1110
}
1211

13-
const Component = forwardRef<HTMLElement, HTMLAttributes<HTMLElement> & RecipeVariantProps<typeof cn.content> & Props>(({ heading, center, direction = "column", gap = 1, children }, ref) => {
12+
const Component = ({ heading, center, direction = "column", gap = 1, children, ...rest }: Props & RecipeVariantProps<typeof cn.content>) => {
1413
return (
15-
<section ref={ref} className={cn.root({ center })}>
14+
<section className={cn.root({ center })} {...rest}>
1615
{heading && <Heading size={2}>{heading}</Heading>}
1716
<div className={cn.content({ direction, center })} style={{ gap: gap * 16 }}>
1817
{children}
1918
</div>
2019
</section>
2120
);
22-
});
21+
};
2322

2423
const cn = {
2524
root: cva({

0 commit comments

Comments
 (0)