Skip to content

Commit 62417f5

Browse files
committed
improves component directory structure
1 parent 6dc971a commit 62417f5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

79 files changed

+1556
-1611
lines changed

app/components/example.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { cx } from "@/cx";
2-
import { WithStyleProps } from "@/types/with-style-props";
1+
import { cx } from "@/core";
2+
import { WithStyleProps } from "@/types";
33
import { PropsWithChildren } from "react";
44

55
type Props = PropsWithChildren & WithStyleProps;

app/components/layout.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { Button } from "@/button";
2-
import { cx } from "@/cx";
2+
import { cx } from "@/core";
33
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger } from "@/select";
44
import { isTheme, theme, useTheme } from "@/theme-provider";
5-
import { WithStyleProps } from "@/types/with-style-props";
5+
import { WithStyleProps } from "@/types";
66
import { List } from "@phosphor-icons/react/List";
77
import { Sun } from "@phosphor-icons/react/Sun";
88
import { X } from "@phosphor-icons/react/X";

app/components/link.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Anchor } from "@/anchor";
1+
import { Anchor } from "@/anchor/src/anchor";
22
import { LinkProps, Link as RRLink } from "@remix-run/react";
33
import { Route } from "~/types/routes";
44

app/components/nav-link.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { cx } from "@/cx";
1+
import { cx } from "@/core";
22
import { NavLinkProps, NavLink as RRNavLink } from "@remix-run/react";
33
import { Route } from "~/types/routes";
44

app/routes/_index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Anchor } from "@/anchor";
1+
import { Anchor } from "@/anchor/src/anchor";
22
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
33

44
export const meta: MetaFunction = () => {

app/routes/base.colors.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Anchor } from "@/anchor";
2-
import { cx } from "@/cx";
3-
import { InlineCode } from "@/inline-code";
1+
import { Anchor } from "@/anchor/src/anchor";
2+
import { cx } from "@/core";
3+
import { InlineCode } from "@/inline-code/src/inline-code";
44
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
55
import { HashNavLink } from "~/components/hash-nav-link";
66

app/routes/components.anchor.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { Anchor } from "@/anchor";
2-
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
3-
import { code } from "@/code-block/code";
4-
import { InlineCode } from "@/inline-code";
1+
import { Anchor } from "@/anchor/src/anchor";
2+
import { code } from "@/code-block/src/code";
3+
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block/src/code-block";
4+
import { InlineCode } from "@/inline-code/src/inline-code";
55
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
66
import { Example } from "~/components/example";
77

app/routes/components.button.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { Button } from "@/button";
2-
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
3-
import { code } from "@/code-block/code";
4-
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/table";
1+
import { Button } from "@/button/src/button";
2+
import { code } from "@/code-block/src/code";
3+
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block/src/code-block";
4+
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/table/src/table";
55
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
66
import { Example } from "~/components/example";
77

app/routes/components.card.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Card, CardBody, CardFooter, CardHeader, CardTitle } from "@/card";
2-
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
3-
import { code } from "@/code-block/code";
1+
import { Card, CardBody, CardFooter, CardHeader, CardTitle } from "@/card/src/card";
2+
import { code } from "@/code-block/src/code";
3+
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block/src/code-block";
44
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
55
import { Example } from "~/components/example";
66

app/routes/components.code-block.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { code } from "@/code-block/src/code";
12
import {
23
CodeBlock,
34
CodeBlockBody,
@@ -6,8 +7,7 @@ import {
67
CodeBlockExpanderButton,
78
CodeBlockHeader,
89
CodeBlockTitle,
9-
} from "@/code-block";
10-
import { code } from "@/code-block/code";
10+
} from "@/code-block/src/code-block";
1111
import { FileText } from "@phosphor-icons/react/FileText";
1212
import { Terminal } from "@phosphor-icons/react/Terminal";
1313
import type { HeadersFunction, MetaFunction } from "@remix-run/node";

app/routes/components.inline-code.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
2-
import { code } from "@/code-block/code";
3-
import { InlineCode } from "@/inline-code";
1+
import { code } from "@/code-block/src/code";
2+
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block/src/code-block";
3+
import { InlineCode } from "@/inline-code/src/inline-code";
44
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
55
import { Example } from "~/components/example";
66

app/routes/components.input.tsx

+13-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
2-
import { code } from "@/code-block/code";
3-
import { Input } from "@/input";
4-
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/table";
1+
import { code } from "@/code-block/src/code";
2+
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block/src/code-block";
3+
import { Input } from "@/input/src/input";
4+
import { Table, TableBody, TableHead, TableHeader, TableRow } from "@/table/src/table";
55
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
66
import { Example } from "~/components/example";
77

@@ -26,12 +26,17 @@ export default function Page() {
2626

2727
<Example className="mt-4 flex-col gap-4">
2828
<Input className="max-w-64" placeholder="Enter a username" />
29-
<Input className="max-w-64" placeholder="Enter a username" state="danger" />
29+
<Input className="max-w-64" placeholder="Enter a username" aria-invalid />
3030
</Example>
3131
<CodeBlock className="rounded-b-lg rounded-t-none">
3232
<CodeBlockBody>
3333
<CodeBlockCopyButton />
34-
<CodeBlockCode language="tsx">{code`<Input placeholder="Enter a username" />`}</CodeBlockCode>
34+
<CodeBlockCode language="tsx">{code`
35+
<>
36+
<Input placeholder="Enter a username" />
37+
<Input placeholder="Enter a username" aria-invalid />
38+
</>
39+
`}</CodeBlockCode>
3540
</CodeBlockBody>
3641
</CodeBlock>
3742

@@ -46,14 +51,14 @@ export default function Page() {
4651
</TableRow>
4752
</TableHeader>
4853
<TableBody className="font-mono text-xs text-gray-600">
49-
<TableRow>
54+
{/* <TableRow>
5055
<TableCell className="align-top font-medium">state</TableCell>
5156
<TableCell className="space-y-2 align-top text-xs">
5257
<p>default</p>
5358
<p>danger</p>
5459
</TableCell>
5560
<TableCell className="align-top">default</TableCell>
56-
</TableRow>
61+
</TableRow> */}
5762
</TableBody>
5863
</Table>
5964
</div>

app/routes/components.media-object.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
2-
import { code } from "@/code-block/code";
1+
import { code, CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
32
import { InlineCode } from "@/inline-code";
43
import { MediaObject, MediaObjectContent, MediaObjectMedia } from "@/media-object";
54
import type { HeadersFunction, MetaFunction } from "@remix-run/node";

app/routes/components.popover.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { Button } from "@/button";
2-
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
3-
import { code } from "@/code-block/code";
4-
import { Input } from "@/input";
5-
import { Popover, PopoverContent, PopoverTrigger } from "@/popover";
1+
import { Button } from "@/button/src/button";
2+
import { code } from "@/code-block/src/code";
3+
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block/src/code-block";
4+
import { Input } from "@/input/src/input";
5+
import { Popover, PopoverContent, PopoverTrigger } from "@/popover/src/popover";
66
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
77
import { Example } from "~/components/example";
88

app/routes/components.select.tsx

+11-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
1-
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
2-
import { code } from "@/code-block/code";
3-
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/select";
1+
import { code } from "@/code-block/src/code";
2+
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block/src/code-block";
3+
import {
4+
Select,
5+
SelectContent,
6+
SelectGroup,
7+
SelectItem,
8+
SelectLabel,
9+
SelectTrigger,
10+
SelectValue,
11+
} from "@/select/src/select";
412
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
513
import { Example } from "~/components/example";
614

app/routes/components.sheet.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Button } from "@/button";
2-
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
3-
import { code } from "@/code-block/code";
1+
import { Button } from "@/button/src/button";
2+
import { code } from "@/code-block/src/code";
3+
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block/src/code-block";
44
import {
55
Sheet,
66
SheetBody,
@@ -11,7 +11,7 @@ import {
1111
SheetHeader,
1212
SheetTitle,
1313
SheetTrigger,
14-
} from "@/sheet";
14+
} from "@/sheet/src/sheet";
1515
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
1616
import { Example } from "~/components/example";
1717

app/routes/components.skeleton.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
2-
import { code } from "@/code-block/code";
1+
import { code, CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
32
import { MediaObject, MediaObjectContent, MediaObjectMedia } from "@/media-object";
43
import { Skeleton } from "@/skeleton";
54
import type { HeadersFunction, MetaFunction } from "@remix-run/node";

app/routes/components.table.tsx

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
1-
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
2-
import { code } from "@/code-block/code";
3-
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "@/table";
1+
import { code } from "@/code-block/src/code";
2+
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block/src/code-block";
3+
import {
4+
Table,
5+
TableBody,
6+
TableCaption,
7+
TableCell,
8+
TableFooter,
9+
TableHead,
10+
TableHeader,
11+
TableRow,
12+
} from "@/table/src/table";
413
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
514
import { Example } from "~/components/example";
615

app/routes/components.theme-provider.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
code,
23
CodeBlock,
34
CodeBlockBody,
45
CodeBlockCode,
@@ -7,7 +8,6 @@ import {
78
CodeBlockHeader,
89
CodeBlockTitle,
910
} from "@/code-block";
10-
import { code } from "@/code-block/code";
1111
import { InlineCode } from "@/inline-code";
1212
import { preventWrongThemeFlashScriptContent } from "@/theme-provider";
1313
import { FileText } from "@phosphor-icons/react/FileText";

app/routes/components.tooltip.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { Button } from "@/button";
2-
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
3-
import { code } from "@/code-block/code";
4-
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/tooltip";
1+
import { Button } from "@/button/src/button";
2+
import { code } from "@/code-block/src/code";
3+
import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block/src/code-block";
4+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/tooltip/src/tooltip";
55
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
66
import { Example } from "~/components/example";
77

components/anchor/index.tsx

+1-30
Original file line numberDiff line numberDiff line change
@@ -1,30 +1 @@
1-
import { Slot } from "@radix-ui/react-slot";
2-
import { AnchorHTMLAttributes, forwardRef } from "react";
3-
import { cx } from "../cx";
4-
import { WithAsChild } from "../types/as-child";
5-
6-
const anchorClassNames = (className: string | undefined) =>
7-
cx(
8-
"text-blue-600 focus-visible:ring-blue-600/25 cursor-pointer rounded bg-transparent focus:outline-none focus-visible:ring hover:underline",
9-
className,
10-
);
11-
12-
type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & WithAsChild;
13-
14-
/**
15-
* Fundamental component for rendering links to external addresses.
16-
*
17-
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
18-
*
19-
* @note If you need to link to an internal application route, prefer using the
20-
* [`react-router-dom` `<Link>`](https://reactrouter.com/en/main/components/link) or the
21-
* [`@remix-run/react` `<Link>`](https://remix.run/docs/en/main/components/link).
22-
*/
23-
const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(({ asChild, className, ...props }, ref) => {
24-
const Component = asChild ? Slot : "a";
25-
26-
return <Component className={anchorClassNames(className)} ref={ref} {...props} />;
27-
});
28-
Anchor.displayName = "Anchor";
29-
30-
export { Anchor, anchorClassNames };
1+
export { Anchor, anchorClassNames } from "./src/anchor";

components/anchor/anchor.stories.tsx components/anchor/src/anchor.stories.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Meta, StoryObj } from "@storybook/react";
2-
import { Anchor } from ".";
2+
import { Anchor } from "./anchor";
33

44
const meta: Meta<typeof Anchor> = {
55
title: "Anchor",

components/anchor/src/anchor.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Slot } from "@radix-ui/react-slot";
2+
import { AnchorHTMLAttributes, forwardRef } from "react";
3+
import { cx } from "../../core";
4+
import { WithAsChild } from "../../types/src/as-child";
5+
6+
const anchorClassNames = (className: string | undefined) =>
7+
cx(
8+
"text-blue-600 focus-visible:ring-blue-600/25 cursor-pointer rounded bg-transparent focus:outline-none focus-visible:ring hover:underline",
9+
className,
10+
);
11+
12+
type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & WithAsChild;
13+
14+
/**
15+
* Fundamental component for rendering links to external addresses.
16+
*
17+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
18+
*
19+
* @note If you need to link to an internal application route, prefer using the
20+
* [`react-router-dom` `<Link>`](https://reactrouter.com/en/main/components/link) or the
21+
* [`@remix-run/react` `<Link>`](https://remix.run/docs/en/main/components/link).
22+
*/
23+
const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(({ asChild, className, ...props }, ref) => {
24+
const Component = asChild ? Slot : "a";
25+
26+
return <Component className={anchorClassNames(className)} ref={ref} {...props} />;
27+
});
28+
Anchor.displayName = "Anchor";
29+
30+
export { Anchor, anchorClassNames };

components/back-to-top-button/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { ArrowLineUp } from "@phosphor-icons/react/ArrowLineUp";
22
import { useWindowScroll } from "@uidotdev/usehooks";
33
import { useEffect, useRef, type CSSProperties } from "react";
4-
import { cx } from "../cx";
4+
import { cx } from "../core";
55
import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion";
66
import { Portal } from "../portal";
7-
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip";
7+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip/src/tooltip";
88

99
type Props = {
1010
className?: string;

0 commit comments

Comments
 (0)