feat: add card, divider and input
parent
d16d06da3b
commit
fa840257d3
@ -0,0 +1,59 @@
|
|||||||
|
import React from "react";
|
||||||
|
import type { Meta, StoryObj } from "@storybook/react";
|
||||||
|
import * as Card from "./Card";
|
||||||
|
import { Box } from "../Box";
|
||||||
|
import { Input } from "../Input";
|
||||||
|
import { Button } from "../Button";
|
||||||
|
import { cx } from "../../utils";
|
||||||
|
|
||||||
|
const meta: Meta<typeof Card.$> = {
|
||||||
|
title: "UI/Card",
|
||||||
|
component: Card.$,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof Card>;
|
||||||
|
|
||||||
|
export const Default: Story = {
|
||||||
|
render: () => (
|
||||||
|
<Box className={cx(["w-96"])}>
|
||||||
|
<Card.$ paddless>
|
||||||
|
<Card.Header>
|
||||||
|
<Card.Title>Create account</Card.Title>
|
||||||
|
<Card.Description>
|
||||||
|
Manage all your transactions in one place.
|
||||||
|
</Card.Description>
|
||||||
|
</Card.Header>
|
||||||
|
<Card.Body>
|
||||||
|
<form onSubmit={(event) => event.preventDefault()}>
|
||||||
|
<Input label="Name" fullWidth />
|
||||||
|
|
||||||
|
<Box className={cx(["py-2"])} />
|
||||||
|
|
||||||
|
<Input label="Type" fullWidth />
|
||||||
|
|
||||||
|
<Box className={cx(["py-2"])} />
|
||||||
|
|
||||||
|
<Input label="Balance" money fullWidth />
|
||||||
|
</form>
|
||||||
|
</Card.Body>
|
||||||
|
<Card.Footer className={cx(["flex", "justify-between"])}>
|
||||||
|
<Button>Cancel</Button>
|
||||||
|
<Button intent="primary">Save</Button>
|
||||||
|
</Card.Footer>
|
||||||
|
</Card.$>
|
||||||
|
</Box>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
// Another way to use this component alone is to import the named export
|
||||||
|
// import { Card } from './Card';
|
||||||
|
export const Paddless: Story = {
|
||||||
|
render: () => (
|
||||||
|
<Box className={cx(["w-96"])}>
|
||||||
|
<Card.$>
|
||||||
|
<p>Dummy content while we create the input components.</p>
|
||||||
|
</Card.$>
|
||||||
|
</Box>
|
||||||
|
),
|
||||||
|
};
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import { cva } from "class-variance-authority";
|
||||||
|
|
||||||
|
const base = [
|
||||||
|
"overflow-hidden",
|
||||||
|
"rounded-lg",
|
||||||
|
"bg-white",
|
||||||
|
"border-2",
|
||||||
|
"divide-y",
|
||||||
|
"divide-y-2",
|
||||||
|
"text-mono-text",
|
||||||
|
];
|
||||||
|
|
||||||
|
const cardStyles = cva(base, {
|
||||||
|
variants: {
|
||||||
|
paddless: {
|
||||||
|
true: ["p-0"],
|
||||||
|
false: ["px-4", "py-4", "sm:px-6", "divide-y-0"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
paddless: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export { cardStyles };
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Primitive } from "@radix-ui/react-primitive";
|
||||||
|
|
||||||
|
import * as T from "./Card.types";
|
||||||
|
import { cardStyles } from "./Card.styles";
|
||||||
|
import { Header, Title, Description, Body, Footer } from "./components";
|
||||||
|
import { cx } from "../../utils";
|
||||||
|
|
||||||
|
const Card = React.forwardRef<T.CardElement, T.CardProps>(
|
||||||
|
({ children, paddless, ...props }, forwardedRef) => {
|
||||||
|
const classes = cx(cardStyles({ paddless }), props.className);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Primitive.div {...props} className={classes} ref={forwardedRef}>
|
||||||
|
{children}
|
||||||
|
</Primitive.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Root element
|
||||||
|
const $ = Card;
|
||||||
|
|
||||||
|
export { $, Card, Header, Title, Body, Description, Footer };
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import { ComponentPropsWithRef, ElementRef } from "react";
|
||||||
|
import { Primitive } from "@radix-ui/react-primitive";
|
||||||
|
import { VariantProps } from "class-variance-authority";
|
||||||
|
import { cardStyles } from "./Card.styles";
|
||||||
|
|
||||||
|
type CardElement = ElementRef<typeof Primitive.div>;
|
||||||
|
|
||||||
|
type CardProps = Omit<ComponentPropsWithRef<typeof Primitive.div>, "asChild"> &
|
||||||
|
VariantProps<typeof cardStyles> & {
|
||||||
|
paddless?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type { CardElement, CardProps };
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Box } from "../../Box";
|
||||||
|
import { cx } from "../../../utils";
|
||||||
|
import { styles } from "./styles";
|
||||||
|
import { HTMLAttributes } from "react";
|
||||||
|
|
||||||
|
type BodyProps = HTMLAttributes<HTMLDivElement> & React.PropsWithChildren<{}>;
|
||||||
|
|
||||||
|
type Body = (props: BodyProps) => React.ReactElement | null;
|
||||||
|
|
||||||
|
const Body: Body = ({ children, ...props }) => {
|
||||||
|
const classes = cx(styles, props.className);
|
||||||
|
return (
|
||||||
|
<Box {...props} className={classes}>
|
||||||
|
{children}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { Body };
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Box } from "../../Box";
|
||||||
|
import { cx } from "../../../utils";
|
||||||
|
|
||||||
|
type Description = (
|
||||||
|
props: React.PropsWithChildren<{}>
|
||||||
|
) => React.ReactElement | null;
|
||||||
|
|
||||||
|
const Description: Description = ({ children }) => {
|
||||||
|
return <Box className={cx(["mt-1"])}>{children}</Box>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export { Description };
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Box } from "../../Box";
|
||||||
|
import { cx } from "../../../utils";
|
||||||
|
import { styles } from "./styles";
|
||||||
|
import { HTMLAttributes } from "react";
|
||||||
|
import { cva } from "class-variance-authority";
|
||||||
|
|
||||||
|
type FooterProps = HTMLAttributes<HTMLDivElement> & React.PropsWithChildren<{}>;
|
||||||
|
|
||||||
|
type Footer = (props: FooterProps) => React.ReactElement | null;
|
||||||
|
|
||||||
|
const Footer: Footer = ({ children, ...props }) => {
|
||||||
|
const classes = cx(styles, props.className);
|
||||||
|
return (
|
||||||
|
<Box {...props} className={classes}>
|
||||||
|
{children}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { Footer };
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Primitive } from "@radix-ui/react-primitive";
|
||||||
|
import { styles } from "./styles";
|
||||||
|
import { cx } from "../../../utils";
|
||||||
|
|
||||||
|
type HTMLTableHeader = React.ElementRef<typeof Primitive.div>;
|
||||||
|
|
||||||
|
type HeaderProps = React.ComponentPropsWithoutRef<typeof Primitive.div> & {};
|
||||||
|
|
||||||
|
const Header = React.forwardRef<HTMLTableHeader, HeaderProps>(
|
||||||
|
({ children, ...props }, forwardRef) => {
|
||||||
|
const classes = cx(styles, props.className);
|
||||||
|
return (
|
||||||
|
<Primitive.div {...props} className={classes} ref={forwardRef}>
|
||||||
|
{children}
|
||||||
|
</Primitive.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export { Header };
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
import { Primitive } from "@radix-ui/react-primitive";
|
||||||
|
import * as React from "react";
|
||||||
|
import { cva, VariantProps } from "class-variance-authority";
|
||||||
|
import { cx } from "../../../utils";
|
||||||
|
|
||||||
|
const base = ["text-lg", "font-semibold", "leading-6", "text-mono-primary"];
|
||||||
|
|
||||||
|
const titleStyles = cva(base);
|
||||||
|
|
||||||
|
type TitleElement = React.ElementRef<typeof Primitive.h3>;
|
||||||
|
|
||||||
|
type TitleProps = React.ComponentPropsWithoutRef<typeof Primitive.h3> &
|
||||||
|
VariantProps<typeof titleStyles> & {};
|
||||||
|
|
||||||
|
const Title = React.forwardRef<TitleElement, TitleProps>(
|
||||||
|
({ children, ...props }, forwardRef) => {
|
||||||
|
const classes = cx(titleStyles(), props.className);
|
||||||
|
return (
|
||||||
|
<Primitive.h3 {...props} className={classes} ref={forwardRef}>
|
||||||
|
{children}
|
||||||
|
</Primitive.h3>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export { Title };
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
export * from "./Header";
|
||||||
|
export * from "./Title";
|
||||||
|
export * from "./Body";
|
||||||
|
export * from "./Description";
|
||||||
|
export * from "./Footer";
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
const styles = ["px-4", "py-4", "sm:px-6"];
|
||||||
|
|
||||||
|
export { styles };
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export * from "./Card";
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
import React from "react";
|
||||||
|
import type { Meta, StoryObj } from "@storybook/react";
|
||||||
|
import { Box } from "../Box";
|
||||||
|
import { Divider } from "./Divider";
|
||||||
|
import * as Card from "../Card";
|
||||||
|
import { cx } from "../../utils";
|
||||||
|
|
||||||
|
const meta: Meta<typeof Divider> = {
|
||||||
|
title: "UI/Divider",
|
||||||
|
component: Divider,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof Divider>;
|
||||||
|
|
||||||
|
export const Default: Story = {
|
||||||
|
render: () => (
|
||||||
|
<Box>
|
||||||
|
Hello world
|
||||||
|
<Divider />
|
||||||
|
Hello world
|
||||||
|
</Box>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const WithBorder: Story = {
|
||||||
|
render: () => (
|
||||||
|
<Box>
|
||||||
|
Hello world
|
||||||
|
<Divider border />
|
||||||
|
Hello world
|
||||||
|
</Box>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const OnCard: Story = {
|
||||||
|
render: () => (
|
||||||
|
<Box className={cx(["lead"])}>
|
||||||
|
<Card.$>
|
||||||
|
<p>
|
||||||
|
The first rule of Fight Club is: You do not talk about Fight Club.
|
||||||
|
</p>
|
||||||
|
<Divider border />
|
||||||
|
<p>The second rule of Fight Club is: Always bring cupcakes.</p>
|
||||||
|
</Card.$>
|
||||||
|
</Box>
|
||||||
|
),
|
||||||
|
};
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import { cva } from "class-variance-authority";
|
||||||
|
|
||||||
|
const base = [""];
|
||||||
|
|
||||||
|
const horizontal = ["px-0", "w-full"];
|
||||||
|
const vertical = ["py-0", "h-full"];
|
||||||
|
|
||||||
|
const dividerStyles = cva(base, {
|
||||||
|
variants: {
|
||||||
|
size: {
|
||||||
|
sm: ["p-1"],
|
||||||
|
md: ["p-2"],
|
||||||
|
lg: ["p-4"],
|
||||||
|
xl: ["p-6"],
|
||||||
|
},
|
||||||
|
border: {
|
||||||
|
true: [],
|
||||||
|
},
|
||||||
|
orientation: {
|
||||||
|
horizontal,
|
||||||
|
vertical,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
size: "md",
|
||||||
|
orientation: "horizontal",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export { dividerStyles };
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { match, P } from "ts-pattern";
|
||||||
|
import * as T from "./Divider.types";
|
||||||
|
import { Box } from "../Box";
|
||||||
|
import { cx } from "../../utils";
|
||||||
|
import { dividerStyles } from "./Divider.styles";
|
||||||
|
|
||||||
|
const Divider = React.forwardRef<
|
||||||
|
HTMLDivElement | HTMLHRElement,
|
||||||
|
T.DividerProps
|
||||||
|
>(({ children, border = false, orientation, size, ...props }, forwardedRef) => {
|
||||||
|
const classes = cx(
|
||||||
|
dividerStyles({ orientation, size, border }),
|
||||||
|
props.className
|
||||||
|
);
|
||||||
|
return match({ border })
|
||||||
|
.with({ border: true }, () => (
|
||||||
|
<div {...props} className={classes}>
|
||||||
|
<Box className={cx(["bg-mono-border", "h-[2px]"])} />
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
.otherwise(() => <div {...props} className={classes} ref={forwardedRef} />);
|
||||||
|
});
|
||||||
|
|
||||||
|
export { Divider };
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
import { VariantProps } from "class-variance-authority";
|
||||||
|
import { dividerStyles } from "./Divider.styles";
|
||||||
|
import { HTMLAttributes } from "react";
|
||||||
|
|
||||||
|
type DividerProps = VariantProps<typeof dividerStyles> &
|
||||||
|
HTMLAttributes<HTMLDivElement> & {
|
||||||
|
border?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export { DividerProps };
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import React from "react";
|
||||||
|
import type { Meta, StoryObj } from "@storybook/react";
|
||||||
|
import { Box } from "../Box";
|
||||||
|
import { Input } from "./Input";
|
||||||
|
import { cx } from "../../utils";
|
||||||
|
|
||||||
|
const meta: Meta<typeof Input> = {
|
||||||
|
title: "UI/Input",
|
||||||
|
component: Input,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof Input>;
|
||||||
|
|
||||||
|
export const Default: Story = {
|
||||||
|
render: () => (
|
||||||
|
<Box className={cx(["w-96"])}>
|
||||||
|
<Input label="name" />
|
||||||
|
</Box>
|
||||||
|
),
|
||||||
|
};
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import { cva } from "class-variance-authority";
|
||||||
|
|
||||||
|
const base = [
|
||||||
|
"block",
|
||||||
|
"rounded-lg",
|
||||||
|
"border-2",
|
||||||
|
"border-mono-border",
|
||||||
|
"py-1.5",
|
||||||
|
"px-2",
|
||||||
|
"text-mono-text",
|
||||||
|
"text-ellipsis",
|
||||||
|
"placeholder:text-mono-border",
|
||||||
|
"outline-none",
|
||||||
|
"focus:ring-0",
|
||||||
|
"focus:border-mono-primary",
|
||||||
|
];
|
||||||
|
|
||||||
|
const inputStyles = cva(base, {
|
||||||
|
variants: {
|
||||||
|
fullWidth: {
|
||||||
|
true: ["w-full"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
fullWidth: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export { inputStyles };
|
||||||
@ -0,0 +1,106 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import dashify from "dashify";
|
||||||
|
import { Primitive } from "@radix-ui/react-primitive";
|
||||||
|
import { NumericFormat } from "react-number-format";
|
||||||
|
import type * as T from "./Input.types";
|
||||||
|
import { Box } from "../Box";
|
||||||
|
import { cx } from "../../utils";
|
||||||
|
import { inputStyles } from "./Input.styles";
|
||||||
|
import { match } from "ts-pattern";
|
||||||
|
|
||||||
|
const Input = React.forwardRef<HTMLInputElement, T.InputProps>(
|
||||||
|
(
|
||||||
|
{
|
||||||
|
label,
|
||||||
|
fullWidth,
|
||||||
|
money,
|
||||||
|
numericFormatOptions,
|
||||||
|
hideLabel = false,
|
||||||
|
symbol = "$",
|
||||||
|
currency = "USD",
|
||||||
|
...props
|
||||||
|
},
|
||||||
|
forwardedRef
|
||||||
|
) => {
|
||||||
|
const htmlId = dashify(label);
|
||||||
|
const classes = cx(
|
||||||
|
inputStyles({ fullWidth }),
|
||||||
|
{
|
||||||
|
"pr-12": currency,
|
||||||
|
"text-right": money,
|
||||||
|
},
|
||||||
|
props.className
|
||||||
|
);
|
||||||
|
|
||||||
|
const moneyDecoratorsClasses = [
|
||||||
|
"pointer-events-none",
|
||||||
|
"absolute",
|
||||||
|
"inset-y-0",
|
||||||
|
"flex",
|
||||||
|
"items-center",
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
className={cx(["relative"], {
|
||||||
|
"w-full": fullWidth,
|
||||||
|
"max-w-xs": !fullWidth,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
className={cx(
|
||||||
|
["text-sm", "font-semibold", "leading-6", "text-mono-primary"],
|
||||||
|
{
|
||||||
|
"sr-only": hideLabel,
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
htmlFor={htmlId}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</label>
|
||||||
|
<Box
|
||||||
|
className={cx(["relative"], {
|
||||||
|
"mt-1": !hideLabel,
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{match({ money })
|
||||||
|
.with({ money: true }, () => (
|
||||||
|
<>
|
||||||
|
<Box className={cx(["left-0", "pl-3"], moneyDecoratorsClasses)}>
|
||||||
|
<span className={cx(["text-mono-primary", "sm:text-sm"])}>
|
||||||
|
{symbol}
|
||||||
|
</span>
|
||||||
|
</Box>
|
||||||
|
<NumericFormat
|
||||||
|
id={htmlId}
|
||||||
|
className={classes}
|
||||||
|
valueIsNumericString
|
||||||
|
{...numericFormatOptions}
|
||||||
|
{...props}
|
||||||
|
// prefix={"$"}
|
||||||
|
getInputRef={forwardedRef}
|
||||||
|
/>
|
||||||
|
<Box
|
||||||
|
className={cx(["right-0", "pr-3"], moneyDecoratorsClasses)}
|
||||||
|
>
|
||||||
|
<span className={cx(["text-mono-primary", "sm:text-sm"])}>
|
||||||
|
{currency}
|
||||||
|
</span>
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
))
|
||||||
|
.otherwise(() => (
|
||||||
|
<input
|
||||||
|
{...props}
|
||||||
|
id={htmlId}
|
||||||
|
className={classes}
|
||||||
|
ref={forwardedRef}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export { Input };
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Primitive } from "@radix-ui/react-primitive";
|
||||||
|
import { VariantProps } from "class-variance-authority";
|
||||||
|
import { inputStyles } from "./Input.styles";
|
||||||
|
import { NumericFormatProps } from "react-number-format";
|
||||||
|
import { InputHTMLAttributes } from "react";
|
||||||
|
|
||||||
|
type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> &
|
||||||
|
VariantProps<typeof inputStyles> & {
|
||||||
|
label: string;
|
||||||
|
money?: boolean;
|
||||||
|
hideLabel?: boolean;
|
||||||
|
type?: NumericFormatProps["type"];
|
||||||
|
value?: HTMLInputElement["value"] | NumericFormatProps["value"];
|
||||||
|
defaultValue?:
|
||||||
|
| HTMLInputElement["defaultValue"]
|
||||||
|
| NumericFormatProps["defaultValue"];
|
||||||
|
onValueChange?: NumericFormatProps["onValueChange"];
|
||||||
|
numericFormatOptions?: NumericFormatProps;
|
||||||
|
symbol?: string;
|
||||||
|
currency?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export { InputProps };
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export * from "./Input";
|
||||||
Loading…
Reference in New Issue