Skip to content

Commit 94de23c

Browse files
cody-dot-jscody-dot-js
authored
adds TextArea + initial docs (#121)
1 parent ef61c4f commit 94de23c

21 files changed

+150
-62
lines changed

‎app/components/layout.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,11 @@ function Navigation({ className, style }: WithStyleProps) {
183183
Table
184184
</NavLink>
185185
</li>
186+
<li>
187+
<NavLink to="/components/text-area" prefetch="intent">
188+
Text Area
189+
</NavLink>
190+
</li>
186191
<li>
187192
<NavLink to="/components/theme-provider" prefetch="intent">
188193
Theme Provider

‎app/components/link.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Anchor } from "@/anchor/src/anchor";
1+
import { Anchor } from "@/anchor";
22
import { LinkProps, Link as RRLink } 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/src/anchor";
1+
import { Anchor } from "@/anchor";
22
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
33

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

‎app/routes/base.colors.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Anchor } from "@/anchor/src/anchor";
1+
import { Anchor } from "@/anchor";
22
import { cx } from "@/core";
3-
import { InlineCode } from "@/inline-code/src/inline-code";
3+
import { InlineCode } from "@/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

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
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";
1+
import { Anchor } from "@/anchor";
2+
import { code, CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
3+
import { InlineCode } from "@/inline-code";
54
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
65
import { Example } from "~/components/example";
76

‎app/routes/components.button.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
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";
1+
import { Button } from "@/button";
2+
import { code, CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
3+
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/table";
54
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
65
import { Example } from "~/components/example";
76

‎app/routes/components.card.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
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";
1+
import { Card, CardBody, CardFooter, CardHeader, CardTitle } from "@/card";
2+
import { code, CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
43
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
54
import { Example } from "~/components/example";
65

‎app/routes/components.code-block.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { code } from "@/code-block/src/code";
21
import {
2+
code,
33
CodeBlock,
44
CodeBlockBody,
55
CodeBlockCode,
66
CodeBlockCopyButton,
77
CodeBlockExpanderButton,
88
CodeBlockHeader,
99
CodeBlockTitle,
10-
} from "@/code-block/src/code-block";
10+
} from "@/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

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
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";
1+
import { code, CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
2+
import { InlineCode } from "@/inline-code";
43
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
54
import { Example } from "~/components/example";
65

‎app/routes/components.input.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
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";
1+
import { code, CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
2+
import { Input } from "@/input";
3+
import { Table, TableBody, TableHead, TableHeader, TableRow } from "@/table";
54
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
65
import { Example } from "~/components/example";
76

‎app/routes/components.popover.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
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";
1+
import { Button } from "@/button";
2+
import { code, CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
3+
import { Input } from "@/input";
4+
import { Popover, PopoverContent, PopoverTrigger } from "@/popover";
65
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
76
import { Example } from "~/components/example";
87

‎app/routes/components.select.tsx

+2-11
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,5 @@
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";
1+
import { code, CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
2+
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/select";
123
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
134
import { Example } from "~/components/example";
145

‎app/routes/components.sheet.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
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";
1+
import { Button } from "@/button";
2+
import { code, CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
43
import {
54
Sheet,
65
SheetBody,
@@ -11,7 +10,7 @@ import {
1110
SheetHeader,
1211
SheetTitle,
1312
SheetTrigger,
14-
} from "@/sheet/src/sheet";
13+
} from "@/sheet";
1514
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
1615
import { Example } from "~/components/example";
1716

‎app/routes/components.table.tsx

+2-12
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,5 @@
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";
1+
import { code, CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
2+
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "@/table";
133
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
144
import { Example } from "~/components/example";
155

‎app/routes/components.text-area.tsx

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { code, CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
2+
import { InlineCode } from "@/inline-code";
3+
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/table";
4+
import { TextArea } from "@/text-area";
5+
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
6+
import { Example } from "~/components/example";
7+
8+
export const meta: MetaFunction = () => {
9+
return [
10+
{ title: "@ngrok/mantle — TextArea" },
11+
{ name: "description", content: "mantle is ngrok's UI library and design system" },
12+
];
13+
};
14+
15+
export const headers: HeadersFunction = () => {
16+
return {
17+
"Cache-Control": "max-age=300, stale-while-revalidate=604800",
18+
};
19+
};
20+
21+
export default function Page() {
22+
return (
23+
<div>
24+
<h1 className="text-5xl font-medium">TextArea</h1>
25+
<p className="mt-4 text-xl text-gray-600">Displays a form textarea or a component that looks like a textarea.</p>
26+
27+
<Example className="mt-4 flex-col gap-4">
28+
<TextArea className="max-w-64" placeholder="Enter a username" />
29+
<TextArea className="max-w-64" appearance="monospaced" placeholder="Enter a username" />
30+
<TextArea className="max-w-64" placeholder="Enter a username" aria-invalid />
31+
</Example>
32+
<CodeBlock className="rounded-b-lg rounded-t-none">
33+
<CodeBlockBody>
34+
<CodeBlockCopyButton />
35+
<CodeBlockCode language="tsx">{code`
36+
<>
37+
<TextArea placeholder="Enter a username" />
38+
<TextArea className="max-w-64" appearance="monospaced" placeholder="Enter a username" />
39+
<TextArea placeholder="Enter a username" aria-invalid />
40+
</>
41+
`}</CodeBlockCode>
42+
</CodeBlockBody>
43+
</CodeBlock>
44+
45+
<h2 className="mt-16 text-3xl font-medium">API Reference</h2>
46+
<div className="z-10 mt-4 overflow-hidden rounded-lg border border-gray-300">
47+
<Table>
48+
<TableHeader>
49+
<TableRow>
50+
<TableHead>Prop</TableHead>
51+
<TableHead>Type</TableHead>
52+
<TableHead>Default</TableHead>
53+
</TableRow>
54+
</TableHeader>
55+
<TableBody className="font-mono text-xs text-gray-600">
56+
<TableRow>
57+
<TableCell className="align-top font-medium">appearance</TableCell>
58+
<TableCell className="space-y-2 align-top text-xs">
59+
<InlineCode>&quot;monospaced&quot; | undefined</InlineCode>
60+
</TableCell>
61+
<TableCell className="align-top">
62+
<InlineCode>undefined</InlineCode>
63+
</TableCell>
64+
</TableRow>
65+
</TableBody>
66+
</Table>
67+
</div>
68+
</div>
69+
);
70+
}

‎app/routes/components.tooltip.tsx

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
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";
1+
import { Button } from "@/button";
2+
import { code, CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block";
3+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/tooltip";
54
import type { HeadersFunction, MetaFunction } from "@remix-run/node";
65
import { Example } from "~/components/example";
76

‎app/types/routes.ts

+2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export const routePatterns = [
1616
"/components/sheet",
1717
"/components/skeleton",
1818
"/components/table",
19+
"/components/text-area",
1920
"/components/theme-provider",
2021
"/components/tooltip",
2122
] as const;
@@ -43,6 +44,7 @@ export const routes = [
4344
"/components/sheet",
4445
"/components/skeleton",
4546
"/components/table",
47+
"/components/text-area",
4648
"/components/theme-provider",
4749
"/components/tooltip",
4850
] as const;

‎components/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export * from "./select";
1111
export * from "./sheet";
1212
export * from "./skeleton";
1313
export * from "./table";
14-
export * from "./theme-provider";
14+
export * from "./text-area";
1515
export * from "./theme-provider";
1616
export * from "./tooltip";
1717

‎components/text-area/index.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export { TextArea } from "./src/text-area";
2+
3+
export type { TextAreaProps } from "./src/text-area";

‎components/text-area/src/text-area.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { VariantProps } from "@/types/src/variant-props";
2+
import { cva } from "class-variance-authority";
3+
import { forwardRef } from "react";
4+
import type { TextareaHTMLAttributes } from "react";
5+
import { cx } from "../../core";
6+
7+
const textAreaVariants = cva(
8+
"flex min-h-16 w-full rounded-md border border-input bg-white dark:bg-gray-50 px-3 py-2 shadow-sm focus-visible:outline-none focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50 sm:text-sm",
9+
{
10+
variants: {
11+
state: {
12+
default: "text-gray-900 border-gray-300 placeholder:text-gray-400 focus:border-blue-600 focus:ring-blue-500/25",
13+
danger: "border-red-600 focus:border-red-600 focus:ring-red-500/25",
14+
},
15+
appearance: {
16+
monospaced: "font-mono text-[0.9375rem] sm:text-[0.8125rem]",
17+
},
18+
},
19+
defaultVariants: {
20+
state: "default",
21+
},
22+
},
23+
);
24+
25+
type TextAreaVariants = VariantProps<typeof textAreaVariants>;
26+
27+
export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & Pick<TextAreaVariants, "appearance">;
28+
29+
const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(({ appearance, className, ...props }, ref) => {
30+
const state = props["aria-invalid"] ? "danger" : "default";
31+
return <textarea className={cx(textAreaVariants({ appearance, state }), className)} ref={ref} {...props} />;
32+
});
33+
TextArea.displayName = "TextArea";
34+
35+
export { TextArea };

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"description": "mantle is ngrok's UI library and design system.",
44
"author": "ngrok",
55
"license": "MIT",
6-
"version": "0.0.8",
6+
"version": "0.0.9",
77
"homepage": "https://mantle.ngrok.com",
88
"repository": {
99
"type": "git",

0 commit comments

Comments
 (0)