@reitwagen/design-components 0.2.0 → 0.2.2

package/dist/components/Toggle/Toggle.stories.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Controlled = void 0;
+exports.UnControlled = exports.Controlled = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const test_1 = require("@storybook/test");
@@ -36,11 +36,74 @@ function ToggleWithControlled(props) {
     return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { ...props, checked: checked, onCheckedChange: () => setChecked(!checked) }));
 }
 exports.Controlled = {
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### 상태를 외부에서 관리하는 방식
+
+Toggle의 상태를 외부에서 관리하려면 <code>checked</code>와 <code>onCheckedChange</code> 속성을 함께 사용하세요.
+`,
+            },
+            source: {
+                code: `
+function Controlled() {
+  const [checked, setChecked] = useState(props.checked);
+
+  return (
+    <Toggle
+      checked={checked}
+      onCheckedChange={() => setChecked(!checked)}
+    />
+  );
+}
+        `.trim(),
+            },
+        },
+    },
     render: (props) => (0, jsx_runtime_1.jsx)(ToggleWithControlled, { ...props }),
     args: {
         checked: false,
         disabled: false,
     },
+    argTypes: {
+        checked: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+        disabled: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = (0, test_1.within)(canvasElement);
+        const toggle = canvas.getByRole("switch");
+        await test_1.userEvent.click(toggle);
+    },
+};
+exports.UnControlled = {
+    parameters: {
+        docs: {
+            description: {
+                story: `
+### 상태를 내부에서 관리하는 방식
+    
+Toggle의 상태를 내부에서 자동으로 관리하려면 <code>defaultChecked</code> 속성을 사용하세요. 이 속성은 Toggle이 처음 화면에 표시될 때 선택 상태를 정해주고, 그 후에는 컴포넌트가 스스로 상태를 관리해요. 상태 변화를 추적하지 않아도 될 때 유용해요.
+`,
+            },
+        },
+    },
+    render: (props) => (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { defaultChecked: true, ...props }),
+    args: {
+        defaultChecked: true,
+    },
+    argTypes: {
+        defaultChecked: {
+            control: { type: "boolean" },
+            options: ["true", "false"],
+        },
+    },
     play: async ({ canvasElement }) => {
         const canvas = (0, test_1.within)(canvasElement);
         const toggle = canvas.getByRole("switch");

package/dist/index.css

@@ -657,6 +657,12 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .ui\:focus\:ring-0 {
+    &:focus {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .ui\:active\:bg-blue-50 {
     &:active {
       background-color: var(--ui-color-blue-50);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reitwagen/design-components",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "sideEffects": [
     "**/*.css"
   ],