-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* adds popover component * adds table docs * adds inline-code docs
- Loading branch information
1 parent
bfd6845
commit 16f1b2f
Showing
15 changed files
with
339 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block"; | ||
| import { code } from "@/code-block/code"; | ||
| import { InlineCode } from "@/inline-code"; | ||
| import type { MetaFunction } from "@vercel/remix"; | ||
| import { Example } from "~/components/example"; | ||
|
|
||
| export const meta: MetaFunction = () => { | ||
| return [ | ||
| { title: "@ngrok/mantle — InlineCode" }, | ||
| { name: "description", content: "mantle is ngrok's UI library and design system" }, | ||
| ]; | ||
| }; | ||
|
|
||
| export default function Page() { | ||
| return ( | ||
| <div> | ||
| <h1 className="text-5xl font-medium">InlineCode</h1> | ||
| <p className="mt-4 text-xl text-gray-600">Marks text to signify a short fragment of inline computer code.</p> | ||
|
|
||
| <Example className="mt-4"> | ||
| <InlineCode>npm install @ngrok/mantle</InlineCode> | ||
| </Example> | ||
| <CodeBlock className="rounded-t-none rounded-b-lg"> | ||
| <CodeBlockBody> | ||
| <CodeBlockCopyButton /> | ||
| <CodeBlockCode language="tsx">{code`<InlineCode>npm install @ngrok/mantle</InlineCode>`}</CodeBlockCode> | ||
| </CodeBlockBody> | ||
| </CodeBlock> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { Button } from "@/button"; | ||
| import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block"; | ||
| import { code } from "@/code-block/code"; | ||
| import { Input } from "@/input"; | ||
| import { Popover, PopoverContent, PopoverTrigger } from "@/popover"; | ||
| import type { MetaFunction } from "@vercel/remix"; | ||
| import { Example } from "~/components/example"; | ||
|
|
||
| export const meta: MetaFunction = () => { | ||
| return [ | ||
| { title: "@ngrok/mantle — Popover" }, | ||
| { name: "description", content: "mantle is ngrok's UI library and design system" }, | ||
| ]; | ||
| }; | ||
|
|
||
| export default function Page() { | ||
| return ( | ||
| <div> | ||
| <h1 className="text-5xl font-medium">Popover</h1> | ||
| <p className="mt-4 text-xl text-gray-600">Displays rich content in a portal, triggered by a button.</p> | ||
| <Example className="mt-4 gap-2"> | ||
| <Popover> | ||
| <PopoverTrigger asChild> | ||
| <Button>Open popover</Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent className="w-80"> | ||
| <form | ||
| className="grid gap-4" | ||
| onSubmit={(event) => { | ||
| event.preventDefault(); | ||
| }} | ||
| > | ||
| <div className="space-y-2"> | ||
| <h4 className="font-medium leading-none">Dimensions</h4> | ||
| <p className="text-sm text-muted-foreground">Set the dimensions for the layer.</p> | ||
| </div> | ||
| <div className="grid gap-2"> | ||
| <div className="grid grid-cols-3 items-center gap-4"> | ||
| <label htmlFor="width">Width</label> | ||
| <Input id="width" defaultValue="100%" className="col-span-2 h-8" /> | ||
| </div> | ||
| <div className="grid grid-cols-3 items-center gap-4"> | ||
| <label htmlFor="maxWidth">Max. width</label> | ||
| <Input id="maxWidth" defaultValue="300px" className="col-span-2 h-8" /> | ||
| </div> | ||
| <div className="grid grid-cols-3 items-center gap-4"> | ||
| <label htmlFor="height">Height</label> | ||
| <Input id="height" defaultValue="25px" className="col-span-2 h-8" /> | ||
| </div> | ||
| <div className="grid grid-cols-3 items-center gap-4"> | ||
| <label htmlFor="maxHeight">Max. height</label> | ||
| <Input id="maxHeight" defaultValue="none" className="col-span-2 h-8" /> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </PopoverContent> | ||
| </Popover> | ||
| </Example> | ||
| <CodeBlock className="rounded-t-none rounded-b-lg"> | ||
| <CodeBlockBody> | ||
| <CodeBlockCopyButton /> | ||
| <CodeBlockCode language="tsx"> | ||
| {code` | ||
| <Popover> | ||
| <PopoverTrigger asChild> | ||
| <Button>Open popover</Button> | ||
| </PopoverTrigger> | ||
| <PopoverContent className="w-80"> | ||
| <p>Reprehenderit veniam excepteur incididunt et ut eu.</p> | ||
| </PopoverContent> | ||
| </Popover> | ||
| `} | ||
| </CodeBlockCode> | ||
| </CodeBlockBody> | ||
| </CodeBlock> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| import { CodeBlock, CodeBlockBody, CodeBlockCode, CodeBlockCopyButton } from "@/code-block"; | ||
| import { code } from "@/code-block/code"; | ||
| import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "@/table"; | ||
| import type { MetaFunction } from "@vercel/remix"; | ||
| import { Example } from "~/components/example"; | ||
|
|
||
| export const meta: MetaFunction = () => { | ||
| return [ | ||
| { title: "@ngrok/mantle — Table" }, | ||
| { name: "description", content: "mantle is ngrok's UI library and design system" }, | ||
| ]; | ||
| }; | ||
|
|
||
| export default function Page() { | ||
| return ( | ||
| <div> | ||
| <h1 className="text-5xl font-medium">Table</h1> | ||
| <p className="mt-4 text-xl text-gray-600">A responsive table component.</p> | ||
| <Example className="mt-4 gap-2"> | ||
| <ExampleTable /> | ||
| </Example> | ||
| <CodeBlock className="rounded-t-none rounded-b-lg"> | ||
| <CodeBlockBody> | ||
| <CodeBlockCopyButton /> | ||
| <CodeBlockCode language="tsx"> | ||
| {code` | ||
| <Table> | ||
| <TableCaption>A list of your recent invoices.</TableCaption> | ||
| <TableHeader> | ||
| <TableRow> | ||
| <TableHead className="w-[100px]">Invoice</TableHead> | ||
| <TableHead>Status</TableHead> | ||
| <TableHead>Method</TableHead> | ||
| <TableHead className="text-right">Amount</TableHead> | ||
| </TableRow> | ||
| </TableHeader> | ||
| <TableBody> | ||
| {invoices.map((invoice) => ( | ||
| <TableRow key={invoice.invoice}> | ||
| <TableCell className="font-medium">{invoice.invoice}</TableCell> | ||
| <TableCell>{invoice.paymentStatus}</TableCell> | ||
| <TableCell>{invoice.paymentMethod}</TableCell> | ||
| <TableCell className="text-right">{invoice.totalAmount}</TableCell> | ||
| </TableRow> | ||
| ))} | ||
| </TableBody> | ||
| <TableFooter> | ||
| <TableRow> | ||
| <TableCell colSpan={3}>Total</TableCell> | ||
| <TableCell className="text-right">$2,500.00</TableCell> | ||
| </TableRow> | ||
| </TableFooter> | ||
| </Table> | ||
| `} | ||
| </CodeBlockCode> | ||
| </CodeBlockBody> | ||
| </CodeBlock> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const ExampleTable = () => { | ||
| const invoices = [ | ||
| { | ||
| invoice: "INV001", | ||
| paymentStatus: "Paid", | ||
| totalAmount: "$250.00", | ||
| paymentMethod: "Credit Card", | ||
| }, | ||
| { | ||
| invoice: "INV002", | ||
| paymentStatus: "Pending", | ||
| totalAmount: "$150.00", | ||
| paymentMethod: "PayPal", | ||
| }, | ||
| { | ||
| invoice: "INV003", | ||
| paymentStatus: "Unpaid", | ||
| totalAmount: "$350.00", | ||
| paymentMethod: "Bank Transfer", | ||
| }, | ||
| { | ||
| invoice: "INV004", | ||
| paymentStatus: "Paid", | ||
| totalAmount: "$450.00", | ||
| paymentMethod: "Credit Card", | ||
| }, | ||
| { | ||
| invoice: "INV005", | ||
| paymentStatus: "Paid", | ||
| totalAmount: "$550.00", | ||
| paymentMethod: "PayPal", | ||
| }, | ||
| { | ||
| invoice: "INV006", | ||
| paymentStatus: "Pending", | ||
| totalAmount: "$200.00", | ||
| paymentMethod: "Bank Transfer", | ||
| }, | ||
| { | ||
| invoice: "INV007", | ||
| paymentStatus: "Unpaid", | ||
| totalAmount: "$300.00", | ||
| paymentMethod: "Credit Card", | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <div className="mt-4 rounded-lg border border-gray-300 overflow-hidden z-10"> | ||
| <Table> | ||
| <TableCaption>A list of your recent invoices.</TableCaption> | ||
| <TableHeader> | ||
| <TableRow> | ||
| <TableHead className="w-[100px]">Invoice</TableHead> | ||
| <TableHead>Status</TableHead> | ||
| <TableHead>Method</TableHead> | ||
| <TableHead className="text-right">Amount</TableHead> | ||
| </TableRow> | ||
| </TableHeader> | ||
| <TableBody> | ||
| {invoices.map((invoice) => ( | ||
| <TableRow key={invoice.invoice}> | ||
| <TableCell className="font-medium">{invoice.invoice}</TableCell> | ||
| <TableCell>{invoice.paymentStatus}</TableCell> | ||
| <TableCell>{invoice.paymentMethod}</TableCell> | ||
| <TableCell className="text-right">{invoice.totalAmount}</TableCell> | ||
| </TableRow> | ||
| ))} | ||
| </TableBody> | ||
| <TableFooter> | ||
| <TableRow> | ||
| <TableCell colSpan={3}>Total</TableCell> | ||
| <TableCell className="text-right">$2,500.00</TableCell> | ||
| </TableRow> | ||
| </TableFooter> | ||
| </Table> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import * as PopoverPrimitive from "@radix-ui/react-popover"; | ||
| import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"; | ||
| import { cx } from "../cx"; | ||
|
|
||
| const Popover = PopoverPrimitive.Root; | ||
|
|
||
| const PopoverTrigger = PopoverPrimitive.Trigger; | ||
|
|
||
| const PopoverContent = forwardRef< | ||
| ElementRef<typeof PopoverPrimitive.Content>, | ||
| ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> | ||
| >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( | ||
| <PopoverPrimitive.Portal> | ||
| <PopoverPrimitive.Content | ||
| ref={ref} | ||
| align={align} | ||
| sideOffset={sideOffset} | ||
| className={cx( | ||
| "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", | ||
| className, | ||
| )} | ||
| {...props} | ||
| /> | ||
| </PopoverPrimitive.Portal> | ||
| )); | ||
| PopoverContent.displayName = PopoverPrimitive.Content.displayName; | ||
|
|
||
| export { Popover, PopoverTrigger, PopoverContent }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
16f1b2fThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
mantle-storybook – ./
mantle-storybook.vercel.app
mantle-storybook-ngrok-dev.vercel.app
mantle-storybook-git-main-ngrok-dev.vercel.app