Squashed commit of the following:

commit 3f0ad5a Author: ROTO0504 <[email protected]> Date: Thu Oct 31 18:20:39 2024 +0900 🚧 bun run test commit c50c27f Author: ROTO0504 <[email protected]> Date: Thu Oct 31 18:19:05 2024 +0900 🚧 スタイル以外作成 commit f5e3c98 Author: ROTO0504 <[email protected]> Date: Thu Oct 31 16:08:31 2024 +0900 🚧 toasterを修正 commit 312c97e Author: ROTO0504 <[email protected]> Date: Thu Oct 31 14:30:01 2024 +0900 🚧 toaster改善 commit 6725253 Author: ROTO0504 <[email protected]> Date: Thu Oct 31 14:02:04 2024 +0900 🚧 test commit 90955f5 Author: ROTO0504 <[email protected]> Date: Thu Oct 31 12:09:01 2024 +0900 🚧 エラーをtoaster表示へ移行 commit c12d24b Author: ROTO0504 <[email protected]> Date: Wed Oct 30 02:20:56 2024 +0900 🚧 dialog表示の根本完成 TODO: ダイアログの表示を完成させる commit 4311593 Author: ROTO0504 <[email protected]> Date: Fri Oct 25 17:22:51 2024 +0900 🚧 useForm設定完了 commit e79f00f Author: ROTO0504 <[email protected]> Date: Wed Oct 23 19:51:33 2024 +0900 🚧 useForm前コミット commit 6f322da Author: ROTO0504 <[email protected]> Date: Mon Oct 21 23:58:39 2024 +0900 🚧 フォーム作成 datePickerがよくない commit 9e0ec94 Author: ROTO0504 <[email protected]> Date: Mon Oct 21 02:45:23 2024 +0900 🚧 company-form 制作開始
wappon28dev · Oct 31, 2024 · 07e4abb · 07e4abb
1 parent a432378
commit 07e4abb
Show file tree

Hide file tree

Showing 5 changed files with 1,055 additions and 0 deletions.
diff --git a/src/components/sva/datePicker.ts b/src/components/sva/datePicker.ts
@@ -0,0 +1,127 @@
+import { datePickerAnatomy } from "@ark-ui/react";
+import { sva } from "panda/css";
+
+export const svaDatePicker = sva({
+  className: "datePicker",
+  slots: datePickerAnatomy.keys(),
+  base: {
+    control: {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      padding: "8px",
+      borderRadius: "md",
+      backgroundColor: "wkb.bg",
+      shadow: "md",
+      _hover: {
+        borderColor: "gray.400",
+      },
+      _focusWithin: {
+        borderColor: "blue.500",
+      },
+    },
+    input: {
+      fontSize: "16px",
+      color: "gray.700",
+      bg: "wkb.bg",
+      padding: "0 8px",
+      width: "100%",
+      _focus: {
+        outline: "none",
+      },
+    },
+    trigger: {
+      fontSize: "20px",
+      color: "gray.500",
+      cursor: "pointer",
+      _hover: {
+        color: "blue.500",
+      },
+    },
+    clearTrigger: {
+      fontSize: "20px",
+      color: "gray.500",
+      cursor: "pointer",
+      _hover: {
+        color: "red.500",
+      },
+    },
+    content: {
+      padding: "16px",
+      border: "1px solid",
+      borderColor: "gray.300",
+      borderRadius: "md",
+      boxShadow: "lg",
+      backgroundColor: "white",
+    },
+    positioner: {
+      zIndex: 10,
+    },
+    yearSelect: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "8px 16px",
+    },
+    monthSelect: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "8px 16px",
+    },
+    table: {
+      width: "100%",
+      borderCollapse: "collapse",
+      marginTop: "8px",
+    },
+    tableRow: {
+      display: "flex",
+      justifyContent: "space-between",
+      width: "100%",
+    },
+    tableCell: {
+      width: "14.285%",
+      height: "36px",
+      textAlign: "center",
+      verticalAlign: "middle",
+      cursor: "pointer",
+      _hover: {
+        backgroundColor: "gray.100",
+      },
+      _selected: {
+        backgroundColor: "blue.500",
+        color: "white",
+      },
+    },
+    tableHead: {
+      fontWeight: "bold",
+      color: "gray.500",
+      display: "flex",
+      width: "1%",
+    },
+    prevTrigger: {
+      display: "flex",
+      alignItems: "center",
+      backgroundColor: "blue.500",
+      color: "white",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      cursor: "pointer",
+      _hover: {
+        backgroundColor: "blue.400",
+      },
+    },
+    nextTrigger: {
+      display: "flex",
+      alignItems: "center",
+      backgroundColor: "blue.500",
+      color: "white",
+      padding: "4px 8px",
+      borderRadius: "4px",
+      cursor: "pointer",
+      _hover: {
+        backgroundColor: "blue.400",
+      },
+    },
+  },
+});
diff --git a/src/components/sva/formDialog.ts b/src/components/sva/formDialog.ts
@@ -0,0 +1,60 @@
+import { dialogAnatomy } from "@ark-ui/react";
+import { sva } from "panda/css";
+
+/**
+ * Ark UI の [Popover コンポーネント](https://ark-ui.com/react/docs/components/popover) の基底スタイル
+ *
+ * 書き方 refs:
+ * - https://panda-css.com/docs/concepts/slot-recipes
+ * - https://ark-ui.com/react/docs/guides/styling#styling-with-panda-css
+ * - https://speakerdeck.com/ikumatadokoro/panda-css-to-ark-ui-dehazimeruge-ren-kai-fa?slide=31
+ */
+export const svaFormDialog = sva({
+  className: "formDialog",
+  slots: dialogAnatomy.keys(),
+  base: {
+    content: {
+      backgroundColor: "wkb-neutral.0",
+      borderRadius: "md",
+      boxShadow: "md",
+      padding: "md",
+      position: "fixed",
+      zIndex: "modalContent",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      rounded: "md",
+      // fade in animation
+      animation: "fadeIn 0.3s",
+      p: 4,
+    },
+    title: {
+      fontSize: "lg",
+      fontWeight: "bold",
+      marginBottom: "md",
+      mb: 4,
+    },
+    description: {
+      marginBottom: "md",
+      fontSize: "md",
+    },
+    trigger: {
+      cursor: "pointer",
+    },
+    backdrop: {
+      animation: "fadeIn 0.3s",
+      backgroundColor: "wkb-neutral.0/20",
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: "modal",
+    },
+    closeTrigger: {
+      right: "sm",
+      top: "sm",
+      color: "wkb.primary",
+    },
+  },
+});
diff --git a/src/components/sva/numberInput.ts b/src/components/sva/numberInput.ts
@@ -0,0 +1,32 @@
+import { numberInputAnatomy } from "@ark-ui/react";
+import { sva } from "panda/css";
+
+export const svaNumberInput = sva({
+  className: "numberInput",
+  slots: numberInputAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      alignItems: "center",
+      borderRadius: "md",
+      backgroundColor: "wkb.bg",
+      textAlign: "right",
+      width: "100%",
+      _hover: {
+        borderColor: "gray.400",
+      },
+      _focusWithin: {
+        borderColor: "blue.500",
+      },
+    },
+    input: {
+      fontSize: "6xl",
+      color: "gray.700",
+      textAlign: "right",
+      width: "100%",
+      _focus: {
+        outline: "none",
+      },
+    },
+  },
+});
diff --git a/src/components/sva/textArea.ts b/src/components/sva/textArea.ts
@@ -0,0 +1,60 @@
+import { fieldAnatomy } from "@ark-ui/react";
+import { sva } from "panda/css";
+
+/**
+ * Ark UI の [Popover コンポーネント](https://ark-ui.com/react/docs/components/popover) の基底スタイル
+ *
+ * 書き方 refs:
+ * - https://panda-css.com/docs/concepts/slot-recipes
+ * - https://ark-ui.com/react/docs/guides/styling#styling-with-panda-css
+ * - https://speakerdeck.com/ikumatadokoro/panda-css-to-ark-ui-dehazimeruge-ren-kai-fa?slide=31
+ */
+export const svaTextArea = sva({
+  className: "TextArea",
+  slots: fieldAnatomy.keys(),
+  base: {
+    root: {
+      display: "grid",
+      gap: "0.5rem",
+      gridTemplateColumns: "1fr",
+      width: "100%",
+      margin: "auto",
+      borderRadius: "md",
+    },
+    textarea: {
+      bg: "wkb.bg",
+      rounded: "md",
+      shadow: "md",
+      duration: "200ms",
+      width: "100%",
+      minHeight: "200px",
+      outline: "none",
+      p: "1rem",
+      _focus: {
+        outline: "solid 2px wkb.primary",
+      },
+    },
+    select: {
+      bg: "wkb.bg",
+      border: "1px solid",
+      borderColor: "wkb.bg",
+      rounded: "md",
+      shadow: "md",
+      duration: "200ms",
+    },
+    input: {
+      minHeight: "48px",
+      bg: "wkb.bg",
+      rounded: "md",
+      shadow: "md",
+      width: "100%",
+      p: "1rem",
+      _open: {
+        //
+      },
+      _closed: {
+        //
+      },
+    },
+  },
+});