B 1945 paper (#2327)

components/atoms/paper/index.ts

@@ -0,0 +1,3 @@
+export * from "./paper.core";
+export * from "./variants/paper-default";
+export * from "./paper.types";

components/atoms/paper/paper.core.tsx

@@ -0,0 +1,14 @@
+import { ElementType } from "react";
+
+import { cn } from "src/utils/cn";
+
+import { TPaperProps } from "./paper.types";
+import { PaperCoreVariants } from "./paper.variants";
+
+export function PaperCore<C extends ElementType = "article">({ classNames, as, ...props }: TPaperProps<C>) {
+  const Component = as || "article";
+  const { size, container, ...htmlProps } = props;
+  const slots = PaperCoreVariants({ size, container });
+
+  return <Component {...htmlProps} className={cn(slots.base(), classNames?.base)} />;
+}

components/atoms/paper/paper.loading.tsx

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+
+import { SkeletonEl } from "components/ds/skeleton/skeleton";
+
+export function PaperLoading({ width, height }: Pick<ComponentProps<typeof SkeletonEl>, "width" | "height">) {
+  return <SkeletonEl width={width} height={height} className="rounded-xl" />;
+}

components/atoms/paper/paper.stories.tsx

@@ -0,0 +1,77 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Typo } from "components/atoms/typo/variants/typo-default";
+
+import { PaperLoading } from "../paper/paper.loading";
+import { PaperCore } from "./paper.core";
+import { TPaperProps } from "./paper.types";
+import { Paper } from "./variants/paper-default";
+
+type Story = StoryObj<typeof PaperCore>;
+
+const defaultProps: TPaperProps<"div"> = {};
+
+const meta: Meta<typeof PaperCore> = {
+  component: PaperCore,
+  title: "Atoms/Paper",
+  tags: ["autodocs"],
+  parameters: {
+    backgrounds: {
+      default: "white",
+      values: [{ name: "white", value: "#fff" }],
+    },
+  },
+};
+
+export const Default: Story = {
+  render: args => {
+    return (
+      <div className="grid gap-2">
+        <Paper {...defaultProps} {...args} size={"l"}>
+          Paper l
+        </Paper>
+        <Paper {...defaultProps} {...args}>
+          Paper m (default)
+        </Paper>
+        <Paper {...defaultProps} {...args} size={"s"}>
+          Paper s
+        </Paper>
+      </div>
+    );
+  },
+};
+
+export const Containers: Story = {
+  render: args => {
+    return (
+      <div className="grid gap-2">
+        <Paper {...defaultProps} {...args}>
+          Container 1
+        </Paper>
+        <Paper {...defaultProps} {...args} container={"2"}>
+          Container 2
+        </Paper>
+        <Paper {...defaultProps} {...args} container={"3"}>
+          Container 3
+        </Paper>
+        <Paper {...defaultProps} {...args} container={"4"}>
+          Container 4
+        </Paper>
+        <Paper {...defaultProps} {...args} container={"action"}>
+          Container action
+        </Paper>
+        <Paper {...defaultProps} {...args} container={"inverse"}>
+          <Typo classNames={{ base: "text-text-4" }}>Container inverse</Typo>
+        </Paper>
+      </div>
+    );
+  },
+};
+
+export const Skeleton: Story = {
+  render: () => {
+    return <PaperLoading width={"100%"} height={"200px"} />;
+  },
+};
+
+export default meta;

components/atoms/paper/paper.types.ts

@@ -0,0 +1,14 @@
+import { ElementType } from "react";
+import { VariantProps } from "tailwind-variants";
+import { AsProps } from "types/as-element";
+
+import { PaperCoreVariants } from "./paper.variants";
+
+type Variants = VariantProps<typeof PaperCoreVariants>;
+type classNames = Partial<typeof PaperCoreVariants["slots"]>;
+
+export type TPaperProps<C extends ElementType> = AsProps<C> &
+  Variants & {
+    classNames?: classNames;
+    as?: C;
+  };

components/atoms/paper/paper.variants.ts

@@ -0,0 +1,26 @@
+import { tv } from "tailwind-variants";
+
+export const PaperCoreVariants = tv({
+  slots: {
+    base: "group rounded-xl border-1 border-container-stroke-separator",
+  },
+  variants: {
+    size: {
+      l: { base: "p-6" },
+      m: { base: "p-4" },
+      s: { base: "p-3" },
+    },
+    container: {
+      "1": { base: "bg-container-1" },
+      "2": { base: "bg-container-2" },
+      "3": { base: "bg-container-3" },
+      "4": { base: "bg-container-4" },
+      action: { base: "bg-container-action" },
+      inverse: { base: "bg-container-inverse" },
+    },
+  },
+  defaultVariants: {
+    size: "m",
+    container: "1",
+  },
+});

components/atoms/paper/variants/paper-default.tsx

@@ -0,0 +1,8 @@
+import { ElementType } from "react";
+
+import { PaperCore } from "../paper.core";
+import { TPaperProps } from "../paper.types";
+
+export function Paper<C extends ElementType = "article">({ ...props }: TPaperProps<C>) {
+  return <PaperCore {...props} classNames={{}} />;
+}

components/atoms/typo/typo.loading.tsx

@@ -1,3 +1,3 @@
-export const TypoLoading = () => {
+export function TypoLoading() {
   return <div />;
-};
+}

tools/create-ds.js

@@ -104,7 +104,7 @@ async function createLoading({ name, path, PascalName }) {
     `${path}/${name}.loading.tsx`,
     prettier.format(
       `
-        export const ${PascalName}Loading = () => {
+        export function ${PascalName}Loading() {
           return <div />;
         };
   `,