@reitwagen/design-components 0.2.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/components/Toggle/Toggle.d.ts +2 -2
  2. package/dist/components/Toggle/Toggle.d.ts.map +1 -1
  3. package/dist/components/Toggle/Toggle.js +18 -6
  4. package/dist/components/Toggle/Toggle.stories.d.ts +1 -0
  5. package/dist/components/Toggle/Toggle.stories.d.ts.map +1 -1
  6. package/dist/components/Toggle/Toggle.stories.js +64 -1
  7. package/dist/index.css +6 -0
  8. package/package.json +1 -1
package/dist/components/Toggle/Toggle.d.ts CHANGED
@@ -4,10 +4,10 @@ declare const toggleVariants: (props?: ({
4
4
  disabled?: boolean | null | undefined;
5
5
  checked?: boolean | null | undefined;
6
6
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
7
- interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled">, VariantProps<typeof toggleVariants> {
7
+ export interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled">, VariantProps<typeof toggleVariants> {
8
8
  onCheckedChange?: (checked: boolean) => void;
9
9
  }
10
- export declare function Toggle({ checked, disabled, onCheckedChange, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
10
+ export declare function Toggle({ checked: controlledChecked, defaultChecked, disabled, onCheckedChange, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
11
11
  export declare namespace Toggle {
12
12
  var displayName: string;
13
13
  }
package/dist/components/Toggle/Toggle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,cAAc;;;8EAmCnB,CAAC;AA6BF,UAAU,WACR,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,EAC/D,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,QAAQ,EACR,eAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,2CAkBb;yBAvBe,MAAM"}
1
+ {"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAY,MAAM,OAAO,CAAC;AACvD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,cAAc;;;8EAmCnB,CAAC;AA6BF,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,EAC/D,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAO,EAAE,iBAAiB,EAC1B,cAAc,EACd,QAAQ,EACR,eAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,2CAkCb;yBAxCe,MAAM"}
package/dist/components/Toggle/Toggle.js CHANGED
@@ -3,9 +3,10 @@
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  exports.Toggle = Toggle;
5
5
  const jsx_runtime_1 = require("react/jsx-runtime");
6
+ const react_1 = require("react");
6
7
  const class_variance_authority_1 = require("class-variance-authority");
7
8
  const style_1 = require("../../utils/style");
8
- const toggleVariants = (0, class_variance_authority_1.cva)("ui:ring-0 ui:h-[31px] ui:w-[51px] ui:rounded-full ui:inline-flex ui:items-center ui:rounded-full ui:transition-colors ui:duration-100", {
9
+ const toggleVariants = (0, class_variance_authority_1.cva)("ui:focus:ring-0 ui:ring-0 ui:h-[31px] ui:w-[51px] ui:rounded-full ui:inline-flex ui:items-center ui:rounded-full ui:transition-colors ui:duration-100", {
9
10
  variants: {
10
11
  disabled: {
11
12
  true: "ui:pointer-events-none",
@@ -38,7 +39,7 @@ const toggleVariants = (0, class_variance_authority_1.cva)("ui:ring-0 ui:h-[31px
38
39
  checked: false,
39
40
  },
40
41
  });
41
- const thumbVariants = (0, class_variance_authority_1.cva)("ui:bg-white ui:rounded-full ui:transition-transform", {
42
+ const thumbVariants = (0, class_variance_authority_1.cva)("ui:focus:ring-0 ui:ring-0 ui:bg-white ui:rounded-full ui:transition-transform", {
42
43
  variants: {
43
44
  disabled: {
44
45
  true: "",
@@ -61,10 +62,21 @@ const thumbVariants = (0, class_variance_authority_1.cva)("ui:bg-white ui:rounde
61
62
  checked: false,
62
63
  },
63
64
  });
64
- function Toggle({ checked, disabled, onCheckedChange, ...props }) {
65
- return ((0, jsx_runtime_1.jsx)("button", { role: "switch", onClick: () => onCheckedChange?.(!checked), "aria-checked": Boolean(checked), className: (0, style_1.cn)(toggleVariants({
66
- checked,
65
+ function Toggle({ checked: controlledChecked, defaultChecked, disabled, onCheckedChange, ...props }) {
66
+ const [uncontrolledChecked, setUncontrolledChecked] = (0, react_1.useState)(defaultChecked);
67
+ const isChecked = controlledChecked ?? uncontrolledChecked;
68
+ const handleClick = () => {
69
+ if (disabled) {
70
+ return;
71
+ }
72
+ if (controlledChecked === undefined) {
73
+ setUncontrolledChecked(!isChecked);
74
+ }
75
+ onCheckedChange?.(!isChecked);
76
+ };
77
+ return ((0, jsx_runtime_1.jsx)("button", { role: "switch", onClick: handleClick, "aria-checked": isChecked, className: (0, style_1.cn)(toggleVariants({
78
+ checked: isChecked,
67
79
  disabled,
68
- })), disabled: disabled || undefined, ...props, children: (0, jsx_runtime_1.jsx)("span", { className: thumbVariants({ checked, disabled }) }) }));
80
+ })), disabled: disabled || undefined, ...props, children: (0, jsx_runtime_1.jsx)("span", { className: thumbVariants({ checked: isChecked, disabled }) }) }));
69
81
  }
70
82
  Toggle.displayName = "Toggle";
package/dist/components/Toggle/Toggle.stories.d.ts CHANGED
@@ -29,4 +29,5 @@ declare const meta: {
29
29
  export default meta;
30
30
  type Story = StoryObj<typeof meta>;
31
31
  export declare const Controlled: Story;
32
+ export declare const UnControlled: Story;
32
33
  //# sourceMappingURL=Toggle.stories.d.ts.map
package/dist/components/Toggle/Toggle.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;CAwBqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAanC,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAC"}
1
+ {"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAe,MAAM,UAAU,CAAC;AAE/C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;CAwBqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAcnC,eAAO,MAAM,UAAU,EAAE,KA8CxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA2B1B,CAAC"}
package/dist/components/Toggle/Toggle.stories.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Controlled = void 0;
3
+ exports.UnControlled = exports.Controlled = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const react_1 = require("react");
6
6
  const test_1 = require("@storybook/test");
@@ -36,11 +36,74 @@ function ToggleWithControlled(props) {
36
36
  return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { ...props, checked: checked, onCheckedChange: () => setChecked(!checked) }));
37
37
  }
38
38
  exports.Controlled = {
39
+ parameters: {
40
+ docs: {
41
+ description: {
42
+ story: `
43
+ ### 상태를 외부에서 관리하는 방식
44
+
45
+ Toggle의 상태를 외부에서 관리하려면 <code>checked</code>와 <code>onCheckedChange</code> 속성을 함께 사용하세요.
46
+ `,
47
+ },
48
+ source: {
49
+ code: `
50
+ function Controlled() {
51
+ const [checked, setChecked] = useState(props.checked);
52
+
53
+ return (
54
+ <Toggle
55
+ checked={checked}
56
+ onCheckedChange={() => setChecked(!checked)}
57
+ />
58
+ );
59
+ }
60
+ `.trim(),
61
+ },
62
+ },
63
+ },
39
64
  render: (props) => (0, jsx_runtime_1.jsx)(ToggleWithControlled, { ...props }),
40
65
  args: {
41
66
  checked: false,
42
67
  disabled: false,
43
68
  },
69
+ argTypes: {
70
+ checked: {
71
+ control: { type: "boolean" },
72
+ options: ["true", "false"],
73
+ },
74
+ disabled: {
75
+ control: { type: "boolean" },
76
+ options: ["true", "false"],
77
+ },
78
+ },
79
+ play: async ({ canvasElement }) => {
80
+ const canvas = (0, test_1.within)(canvasElement);
81
+ const toggle = canvas.getByRole("switch");
82
+ await test_1.userEvent.click(toggle);
83
+ },
84
+ };
85
+ exports.UnControlled = {
86
+ parameters: {
87
+ docs: {
88
+ description: {
89
+ story: `
90
+ ### 상태를 내부에서 관리하는 방식
91
+
92
+ Toggle의 상태를 내부에서 자동으로 관리하려면 <code>defaultChecked</code> 속성을 사용하세요. 이 속성은 Toggle이 처음 화면에 표시될 때 선택 상태를 정해주고, 그 후에는 컴포넌트가 스스로 상태를 관리해요. 상태 변화를 추적하지 않아도 될 때 유용해요.
93
+ `,
94
+ },
95
+ },
96
+ },
97
+ render: (props) => (0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { defaultChecked: true, ...props }),
98
+ args: {
99
+ defaultChecked: true,
100
+ },
101
+ argTypes: {
102
+ defaultChecked: {
103
+ control: { type: "boolean" },
104
+ options: ["true", "false"],
105
+ },
106
+ },
44
107
  play: async ({ canvasElement }) => {
45
108
  const canvas = (0, test_1.within)(canvasElement);
46
109
  const toggle = canvas.getByRole("switch");
package/dist/index.css CHANGED
@@ -657,6 +657,12 @@
657
657
  -webkit-user-select: none;
658
658
  user-select: none;
659
659
  }
660
+ .ui\:focus\:ring-0 {
661
+ &:focus {
662
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
663
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
664
+ }
665
+ }
660
666
  .ui\:active\:bg-blue-50 {
661
667
  &:active {
662
668
  background-color: var(--ui-color-blue-50);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reitwagen/design-components",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ],