feat: form関連のカテゴライズ

packages/tailwindcss/index.js

@@ -2,6 +2,16 @@ const button = require("./button");
 const outlinedButton = require("./outlinedButton");
 const status = require("./status");
 const card = require("./card");
-const form = require("./form");
+const input = require("./input");
+const select = require("./select");
+const toggleSwitch = require("./toggleSwitch");
 
-module.exports = [button, outlinedButton, status, card, form];
+module.exports = [
+  button,
+  outlinedButton,
+  status,
+  card,
+  input,
+  select,
+  toggleSwitch,
+];

packages/tailwindcss/form.js → packages/tailwindcss/input.js

@@ -6,14 +6,6 @@ module.exports = plugin.withOptions(
   () => {
     return ({ addComponents, theme }) => {
       addComponents([
-        {
-          ".label": {
-            color: theme("colors.gray.600"),
-            fontSize: "12px",
-            lineHeight: 1,
-            marginBottom: "1em",
-          },
-        },
         {
           "[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select": {
             appearance: "none",
@@ -117,76 +109,6 @@ module.exports = plugin.withOptions(
               outline: `1px auto -webkit-focus-ring-color`,
             },
           },
-          select: {
-            "background-image": `url("${svgToDataUri(
-              `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${theme(
-                "colors.gray.500"
-              )}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`
-            )}")`,
-            "background-position": `right ${theme("spacing.2")} center`,
-            "background-repeat": `no-repeat`,
-            "background-size": `1.5em 1.5em`,
-            "padding-right": theme("spacing.10"),
-            "color-adjust": `exact`,
-          },
-          "[multiple]": {
-            "background-image": "initial",
-            "background-position": "initial",
-            "background-repeat": "unset",
-            "background-size": "initial",
-            "padding-right": theme("spacing.3"),
-            "color-adjust": "unset",
-          },
-        },
-        {
-          ".switch": {
-            position: "relative",
-            width: theme("spacing.16"),
-            height: theme("spacing.8"),
-            input: {
-              position: "absolute",
-              left: 0,
-              top: 0,
-              width: "100%",
-              height: "100%",
-              "z-index": 5,
-              opacity: 0,
-              cursor: "pointer",
-            },
-
-            label: {
-              width: theme("width.full"),
-              height: theme("height.full"),
-              background: theme("colors.gray.300"),
-              position: "relative",
-              display: "inline-block",
-              "border-radius": theme("borderRadius.full"),
-              transition: "0.2s",
-              "box-sizing": "border-box",
-              span: {
-                content: "",
-                position: "absolute",
-                width: theme("spacing.8"),
-                height: theme("height.full"),
-                "border-radius": "100%",
-                left: 0,
-                top: 0,
-                "z-index": 2,
-                background: theme("colors.white"),
-                "box-shadow": "0 0 5px rgba(0, 0, 0, 0.2)",
-                transition: "0.2s",
-              },
-            },
-
-            "input:checked": {
-              "+label": {
-                "background-color": theme("colors.primary.500"),
-                span: {
-                  transform: "translateX(100%)",
-                },
-              },
-            },
-          },
         },
       ]);
     };

packages/tailwindcss/select.js

@@ -0,0 +1,35 @@
+const plugin = require("tailwindcss/plugin");
+const theme = require("./theme");
+const svgToDataUri = require("mini-svg-data-uri");
+
+module.exports = plugin.withOptions(
+  () => {
+    return ({ addComponents, theme }) => {
+      addComponents([
+        {
+          select: {
+            "background-image": `url("${svgToDataUri(
+              `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="${theme(
+                "colors.gray.500"
+              )}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>`
+            )}")`,
+            "background-position": `right ${theme("spacing.2")} center`,
+            "background-repeat": `no-repeat`,
+            "background-size": `1.5em 1.5em`,
+            "padding-right": theme("spacing.10"),
+            "color-adjust": `exact`,
+          },
+          "[multiple]": {
+            "background-image": "initial",
+            "background-position": "initial",
+            "background-repeat": "unset",
+            "background-size": "initial",
+            "padding-right": theme("spacing.3"),
+            "color-adjust": "unset",
+          },
+        },
+      ]);
+    };
+  },
+  () => ({ theme })
+);

packages/tailwindcss/stories/Button.stories.js

@@ -2,25 +2,17 @@ export default {
   title: "Buttons/Button",
   argTypes: {
     label: { control: "text" },
+    disabled: { control: "boolean" },
   },
 };
 
-const Template = ({ label }) => {
-  return `<button type="button" class="button">${label}</button>`;
+const Template = ({ label, disabled }) => {
+  return `<button type="button" class="button" ${
+    disabled && "disabled"
+  }>${label}</button>`;
 };
 
 export const Default = Template.bind({});
 Default.args = {
   label: "ボタン",
 };
-
-const disabledTemplate = ({ label }) => {
-  return `
-  <button type="button" disabled class="button">${label}</button>
-  `;
-};
-
-export const Disabled = disabledTemplate.bind({});
-Disabled.args = {
-  ...Default.args,
-};

packages/tailwindcss/stories/Input.stories.js

@@ -69,36 +69,3 @@ const FileTemplate = () => {
   return `<input type="file" />`;
 };
 export const File = FileTemplate.bind({});
-
-const SelectTemplate = () => {
-  return `
-      <select>
-        <option value="option-1">option-1</option>
-        <option value="option-2">option-2</option>
-        <option value="option-3">option-3</option>
-      </select>
-    `;
-};
-export const Select = SelectTemplate.bind({});
-
-const SelectMultipleTemplate = () => {
-  return `
-      <select multiple>
-        <option value="option-1">option-1</option>
-        <option value="option-2">option-2</option>
-        <option value="option-3">option-3</option>
-      </select>
-    `;
-};
-export const SelectMultiple = SelectMultipleTemplate.bind({});
-
-const SwitchTemplate = () => {
-  return `
-    <div class="switch">
-      <input id="toggle" class="switch-input" type='checkbox' />
-      <label for="toggle" class="switch-label"/>
-        <span></span>
-    </div> 
-    `;
-};
-export const Switch = SwitchTemplate.bind({});

packages/tailwindcss/stories/Select.stories.js

@@ -0,0 +1,25 @@
+export default {
+  title: "Forms/Select",
+};
+
+const SelectTemplate = () => {
+  return `
+      <select>
+        <option value="option-1">option-1</option>
+        <option value="option-2">option-2</option>
+        <option value="option-3">option-3</option>
+      </select>
+    `;
+};
+export const Select = SelectTemplate.bind({});
+
+const SelectMultipleTemplate = () => {
+  return `
+      <select multiple>
+        <option value="option-1">option-1</option>
+        <option value="option-2">option-2</option>
+        <option value="option-3">option-3</option>
+      </select>
+    `;
+};
+export const SelectMultiple = SelectMultipleTemplate.bind({});

packages/tailwindcss/stories/ToggleSwitch.stories.js

@@ -0,0 +1,14 @@
+export default {
+  title: "Forms/ToggleSwitch",
+};
+
+const ToggleSwitchTemplate = () => {
+  return `
+    <div class="switch">
+      <input id="toggle" class="switch-input" type='checkbox' />
+      <label for="toggle" class="switch-label"/>
+        <span></span>
+    </div> 
+    `;
+};
+export const Default = ToggleSwitchTemplate.bind({});

packages/tailwindcss/toggleSwitch.js

@@ -0,0 +1,62 @@
+const plugin = require("tailwindcss/plugin");
+const theme = require("./theme");
+
+module.exports = plugin.withOptions(
+  () => {
+    return ({ addComponents, theme }) => {
+      addComponents([
+        {
+          ".switch": {
+            position: "relative",
+            width: theme("spacing.16"),
+            height: theme("spacing.8"),
+            input: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              width: "100%",
+              height: "100%",
+              "z-index": 5,
+              opacity: 0,
+              cursor: "pointer",
+            },
+
+            label: {
+              width: theme("width.full"),
+              height: theme("height.full"),
+              background: theme("colors.gray.300"),
+              position: "relative",
+              display: "inline-block",
+              "border-radius": theme("borderRadius.full"),
+              transition: "0.2s",
+              "box-sizing": "border-box",
+              span: {
+                content: "",
+                position: "absolute",
+                width: theme("spacing.8"),
+                height: theme("height.full"),
+                "border-radius": "100%",
+                left: 0,
+                top: 0,
+                "z-index": 2,
+                background: theme("colors.white"),
+                "box-shadow": "0 0 5px rgba(0, 0, 0, 0.2)",
+                transition: "0.2s",
+              },
+            },
+
+            "input:checked": {
+              "+label": {
+                "background-color": theme("colors.primary.500"),
+                span: {
+                  transform: "translateX(100%)",
+                },
+              },
+            },
+          },
+        },
+      ]);
+    };
+  },
+  () => ({ theme })
+);