daleui 0.0.2 → 0.0.5

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 (176) hide show
  1. package/README.md +43 -0
  2. package/dist/check-DEVerfH5.js +72 -0
  3. package/dist/components/Box/Box.d.ts +34 -0
  4. package/dist/components/Box/Box.js +34 -0
  5. package/dist/components/Button/Button.d.ts +37 -0
  6. package/dist/components/Button/Button.js +367 -0
  7. package/dist/components/Card/Card.d.ts +68 -0
  8. package/dist/components/Card/Card.js +132 -0
  9. package/dist/components/Checkbox/Checkbox.d.ts +34 -0
  10. package/dist/components/Checkbox/Checkbox.js +657 -0
  11. package/dist/components/Flex/Flex.d.ts +361 -0
  12. package/dist/components/Flex/Flex.js +65 -0
  13. package/dist/components/HStack/HStack.d.ts +23 -0
  14. package/dist/components/HStack/HStack.js +35 -0
  15. package/dist/components/Heading/Heading.d.ts +33 -0
  16. package/dist/components/Heading/Heading.js +67 -0
  17. package/dist/components/Icon/Icon.d.ts +20 -0
  18. package/dist/components/Icon/Icon.js +325 -0
  19. package/dist/components/Label/Label.d.ts +35 -0
  20. package/dist/components/Label/Label.js +74 -0
  21. package/dist/components/Link/Link.d.ts +33 -0
  22. package/dist/components/Link/Link.js +176 -0
  23. package/dist/components/PasswordInput/PasswordInput.d.ts +17 -0
  24. package/dist/components/PasswordInput/PasswordInput.js +151 -0
  25. package/dist/components/RadioGroup/RadioGroup.d.ts +82 -0
  26. package/dist/components/RadioGroup/RadioGroup.js +713 -0
  27. package/dist/components/Select/Select.d.ts +39 -0
  28. package/dist/components/Select/Select.js +222 -0
  29. package/dist/components/Tag/Tag.d.ts +26 -0
  30. package/dist/components/Tag/Tag.js +189 -0
  31. package/dist/components/Text/Text.d.ts +22 -0
  32. package/dist/components/Text/Text.js +115 -0
  33. package/dist/components/TextInput/TextInput.d.ts +21 -0
  34. package/dist/components/TextInput/TextInput.js +106 -0
  35. package/dist/components/VStack/VStack.d.ts +23 -0
  36. package/dist/components/VStack/VStack.js +35 -0
  37. package/dist/css-QiVVeZaw.js +212 -0
  38. package/dist/cva-BrKodHDH.js +57 -0
  39. package/dist/cx-DN21T1EH.js +9 -0
  40. package/dist/hstack-cCrHxysi.js +43 -0
  41. package/dist/index.css +1 -0
  42. package/dist/index.d.ts +18 -0
  43. package/dist/index.js +37 -0
  44. package/dist/tokens/colors.d.ts +4 -0
  45. package/dist/tokens/iconography.d.ts +45 -0
  46. package/dist/tokens/spacing.d.ts +42 -0
  47. package/dist/tokens/typography.d.ts +312 -0
  48. package/dist/use-locale-context-DYXE7B4r.js +775 -0
  49. package/package.json +62 -39
  50. package/styled-system/css/conditions.mjs +36 -0
  51. package/styled-system/css/css.d.ts +22 -0
  52. package/styled-system/css/css.mjs +45 -0
  53. package/styled-system/css/cva.d.ts +6 -0
  54. package/styled-system/css/cva.mjs +87 -0
  55. package/styled-system/css/cx.d.ts +5 -0
  56. package/styled-system/css/cx.mjs +15 -0
  57. package/styled-system/css/index.d.ts +5 -0
  58. package/styled-system/css/index.mjs +4 -0
  59. package/styled-system/css/sva.d.ts +4 -0
  60. package/styled-system/css/sva.mjs +46 -0
  61. package/styled-system/helpers.mjs +316 -0
  62. package/styled-system/patterns/aspect-ratio.d.ts +20 -0
  63. package/styled-system/patterns/aspect-ratio.mjs +38 -0
  64. package/styled-system/patterns/bleed.d.ts +21 -0
  65. package/styled-system/patterns/bleed.mjs +24 -0
  66. package/styled-system/patterns/box.d.ts +20 -0
  67. package/styled-system/patterns/box.mjs +15 -0
  68. package/styled-system/patterns/center.d.ts +20 -0
  69. package/styled-system/patterns/center.mjs +21 -0
  70. package/styled-system/patterns/circle.d.ts +20 -0
  71. package/styled-system/patterns/circle.mjs +25 -0
  72. package/styled-system/patterns/container.d.ts +20 -0
  73. package/styled-system/patterns/container.mjs +21 -0
  74. package/styled-system/patterns/cq.d.ts +21 -0
  75. package/styled-system/patterns/cq.mjs +21 -0
  76. package/styled-system/patterns/divider.d.ts +22 -0
  77. package/styled-system/patterns/divider.mjs +25 -0
  78. package/styled-system/patterns/flex.d.ts +26 -0
  79. package/styled-system/patterns/flex.mjs +26 -0
  80. package/styled-system/patterns/float.d.ts +23 -0
  81. package/styled-system/patterns/float.mjs +52 -0
  82. package/styled-system/patterns/grid-item.d.ts +25 -0
  83. package/styled-system/patterns/grid-item.mjs +25 -0
  84. package/styled-system/patterns/grid.d.ts +24 -0
  85. package/styled-system/patterns/grid.mjs +27 -0
  86. package/styled-system/patterns/hstack.d.ts +21 -0
  87. package/styled-system/patterns/hstack.mjs +24 -0
  88. package/styled-system/patterns/index.d.ts +21 -0
  89. package/styled-system/patterns/index.mjs +20 -0
  90. package/styled-system/patterns/link-overlay.d.ts +20 -0
  91. package/styled-system/patterns/link-overlay.mjs +24 -0
  92. package/styled-system/patterns/spacer.d.ts +20 -0
  93. package/styled-system/patterns/spacer.mjs +21 -0
  94. package/styled-system/patterns/square.d.ts +20 -0
  95. package/styled-system/patterns/square.mjs +24 -0
  96. package/styled-system/patterns/stack.d.ts +23 -0
  97. package/styled-system/patterns/stack.mjs +24 -0
  98. package/styled-system/patterns/visually-hidden.d.ts +20 -0
  99. package/styled-system/patterns/visually-hidden.mjs +18 -0
  100. package/styled-system/patterns/vstack.d.ts +21 -0
  101. package/styled-system/patterns/vstack.mjs +24 -0
  102. package/styled-system/patterns/wrap.d.ts +24 -0
  103. package/styled-system/patterns/wrap.mjs +25 -0
  104. package/styled-system/tokens/index.d.ts +9 -0
  105. package/styled-system/tokens/index.mjs +3176 -0
  106. package/styled-system/tokens/tokens.d.ts +63 -0
  107. package/styled-system/types/composition.d.ts +224 -0
  108. package/styled-system/types/conditions.d.ts +310 -0
  109. package/styled-system/types/csstype.d.ts +21298 -0
  110. package/styled-system/types/global.d.ts +20 -0
  111. package/styled-system/types/index.d.ts +7 -0
  112. package/styled-system/types/parts.d.ts +8 -0
  113. package/styled-system/types/pattern.d.ts +78 -0
  114. package/styled-system/types/prop-type.d.ts +265 -0
  115. package/styled-system/types/recipe.d.ts +181 -0
  116. package/styled-system/types/selectors.d.ts +59 -0
  117. package/styled-system/types/static-css.d.ts +56 -0
  118. package/styled-system/types/style-props.d.ts +7504 -0
  119. package/styled-system/types/system-types.d.ts +269 -0
  120. package/.github/CODEOWNERS +0 -1
  121. package/.github/FUNDING.yml +0 -1
  122. package/.github/workflows/automation.yml +0 -13
  123. package/.github/workflows/chromatic.yml +0 -19
  124. package/.github/workflows/deployment.yml +0 -32
  125. package/.github/workflows/integration.yml +0 -15
  126. package/.github/workflows/storybook-tests.yml +0 -17
  127. package/.storybook/main.ts +0 -18
  128. package/.storybook/preview.ts +0 -29
  129. package/.storybook/test-runner.ts +0 -33
  130. package/bun.lock +0 -2099
  131. package/chromatic.config.json +0 -5
  132. package/eslint.config.js +0 -28
  133. package/index.html +0 -13
  134. package/panda.config.ts +0 -61
  135. package/postcss.config.cjs +0 -5
  136. package/public/logo.svg +0 -9
  137. package/src/App.tsx +0 -67
  138. package/src/assets/Discord.svg +0 -1
  139. package/src/assets/GitHub.svg +0 -1
  140. package/src/assets/LinkedIn.svg +0 -1
  141. package/src/assets/Medium.svg +0 -1
  142. package/src/assets/YouTube.svg +0 -1
  143. package/src/components/Button/Button.stories.tsx +0 -115
  144. package/src/components/Button/Button.test.tsx +0 -108
  145. package/src/components/Button/Button.tsx +0 -245
  146. package/src/components/Button/index.tsx +0 -1
  147. package/src/components/Checkbox/Checkbox.stories.tsx +0 -129
  148. package/src/components/Checkbox/Checkbox.test.tsx +0 -169
  149. package/src/components/Checkbox/Checkbox.tsx +0 -190
  150. package/src/components/Heading/Heading.stories.tsx +0 -72
  151. package/src/components/Heading/Heading.test.tsx +0 -55
  152. package/src/components/Heading/Heading.tsx +0 -73
  153. package/src/components/Heading/index.tsx +0 -1
  154. package/src/components/Icon/Icon.stories.tsx +0 -106
  155. package/src/components/Icon/Icon.test.tsx +0 -44
  156. package/src/components/Icon/Icon.tsx +0 -116
  157. package/src/components/Icon/index.tsx +0 -1
  158. package/src/components/Text/Text.stories.tsx +0 -65
  159. package/src/components/Text/Text.test.tsx +0 -54
  160. package/src/components/Text/Text.tsx +0 -93
  161. package/src/components/Text/index.tsx +0 -1
  162. package/src/index.css +0 -2
  163. package/src/main.tsx +0 -10
  164. package/src/setupTests.tsx +0 -5
  165. package/src/styles/globalCss.ts +0 -43
  166. package/src/tokens/colors.mdx +0 -100
  167. package/src/tokens/colors.ts +0 -288
  168. package/src/tokens/iconography.mdx +0 -15
  169. package/src/tokens/iconography.tsx +0 -54
  170. package/src/tokens/typography.mdx +0 -38
  171. package/src/tokens/typography.ts +0 -132
  172. package/src/vite-env.d.ts +0 -2
  173. package/tsconfig.app.json +0 -25
  174. package/tsconfig.json +0 -7
  175. package/tsconfig.node.json +0 -22
  176. package/vite.config.ts +0 -16
package/chromatic.config.json DELETED
@@ -1,5 +0,0 @@
1
- {
2
- "onlyChanged": true,
3
- "projectId": "Project:675790d317ba346348aa3490",
4
- "zip": true
5
- }
package/eslint.config.js DELETED
@@ -1,28 +0,0 @@
1
- import js from "@eslint/js";
2
- import globals from "globals";
3
- import reactHooks from "eslint-plugin-react-hooks";
4
- import reactRefresh from "eslint-plugin-react-refresh";
5
- import tseslint from "typescript-eslint";
6
-
7
- export default tseslint.config(
8
- { ignores: ["dist", "styled-system"] },
9
- {
10
- extends: [js.configs.recommended, ...tseslint.configs.recommended],
11
- files: ["**/*.{ts,tsx}"],
12
- languageOptions: {
13
- ecmaVersion: 2020,
14
- globals: globals.browser,
15
- },
16
- plugins: {
17
- "react-hooks": reactHooks,
18
- "react-refresh": reactRefresh,
19
- },
20
- rules: {
21
- ...reactHooks.configs.recommended.rules,
22
- "react-refresh/only-export-components": [
23
- "warn",
24
- { allowConstantExport: true },
25
- ],
26
- },
27
- }
28
- );
package/index.html DELETED
@@ -1,13 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <link rel="icon" type="image/svg+xml" href="/vite.svg" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Dale UI</title>
8
- </head>
9
- <body>
10
- <div id="root"></div>
11
- <script type="module" src="/src/main.tsx"></script>
12
- </body>
13
- </html>
package/panda.config.ts DELETED
@@ -1,61 +0,0 @@
1
- import { defineConfig } from "@pandacss/dev";
2
- import { globalCss } from "./src/styles/globalCss";
3
- import { colors, semanticColors } from "./src/tokens/colors";
4
- import {
5
- textStyles,
6
- fonts,
7
- fontWeights,
8
- fontSizes,
9
- letterSpacings,
10
- lineHeights,
11
- } from "./src/tokens/typography";
12
-
13
- export default defineConfig({
14
- // Whether to use css reset
15
- preflight: true,
16
-
17
- // Where to look for your css declarations
18
- include: ["./src/**/*.{js,jsx,ts,tsx}"],
19
-
20
- // Files to exclude
21
- exclude: [],
22
-
23
- globalCss,
24
-
25
- globalVars: {
26
- "--font-spoqa": "Spoqa Han Sans Neo",
27
- },
28
-
29
- staticCss: {
30
- css: [
31
- {
32
- properties: {
33
- textStyle: Object.keys(textStyles),
34
- fontSize: Object.keys(fontSizes),
35
- fontWeight: Object.keys(fontWeights),
36
- },
37
- },
38
- ],
39
- },
40
-
41
- // Useful for theme customization
42
- theme: {
43
- extend: {
44
- textStyles,
45
- tokens: {
46
- colors,
47
- fonts,
48
- fontWeights,
49
- fontSizes,
50
- letterSpacings,
51
- lineHeights,
52
- },
53
- semanticTokens: {
54
- colors: semanticColors,
55
- },
56
- },
57
- },
58
-
59
- // The output directory for your css system
60
- outdir: "styled-system",
61
- });
package/postcss.config.cjs DELETED
@@ -1,5 +0,0 @@
1
- module.exports = {
2
- plugins: {
3
- "@pandacss/dev/postcss": {},
4
- },
5
- };
package/public/logo.svg DELETED
@@ -1,9 +0,0 @@
1
- <svg width="45" height="22" viewBox="0 0 45 22" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M14.84 19.03L0.29 12.61V10.51L14.84 3.25V6.76L4.82 11.41L14.84 15.52V19.03ZM28.408 0.579999L20.428 22H16.378L24.358 0.579999H28.408ZM29.8505 15.52L39.8705 11.41L29.8505 6.76V3.25L44.4005 10.51V12.61L29.8505 19.03V15.52Z" fill="url(#paint0_linear_278_133)"/>
3
- <defs>
4
- <linearGradient id="paint0_linear_278_133" x1="-1" y1="9.51219" x2="46" y2="9.51219" gradientUnits="userSpaceOnUse">
5
- <stop stop-color="#24EACA"/>
6
- <stop offset="1" stop-color="#846DE9"/>
7
- </linearGradient>
8
- </defs>
9
- </svg>
package/src/App.tsx DELETED
@@ -1,67 +0,0 @@
1
- import logo from "/logo.svg";
2
- import { css } from "../styled-system/css";
3
- import { Button } from "./components/Button";
4
- import { Heading } from "./components/Heading";
5
- import { Text } from "./components/Text";
6
-
7
- function App() {
8
- return (
9
- <div
10
- className={css({
11
- maxW: "prose",
12
- mx: "auto",
13
- })}
14
- >
15
- <header>
16
- <a
17
- href="/"
18
- className={css({
19
- display: "flex",
20
- gap: "4",
21
- })}
22
- >
23
- <img src={logo} className="logo" alt="logo" />
24
- 달레 UI
25
- </a>
26
- </header>
27
- <main>
28
- <Heading level={1}>Welcome Dale UI!</Heading>
29
- <section>
30
- <Heading level={2}>유용한 링크</Heading>
31
- <ul>
32
- <li>
33
- <a href="https://main--675790d317ba346348aa3490.chromatic.com/">
34
- 스토리북
35
- </a>
36
- </li>
37
- <li>
38
- <a href="https://github.com/DaleStudy/daleui">깃허브</a>
39
- </li>
40
- <li>
41
- <a href="https://github.com/DaleStudy/daleui/wiki">위키</a>
42
- </li>
43
- <li>
44
- <a href="https://github.com/DaleStudy/daleui/discussions">
45
- 게시판
46
- </a>
47
- </li>
48
- <li>
49
- <a href="https://discord.com/channels/775115965964222492/1280152682044063837">
50
- 채팅방
51
- </a>
52
- </li>
53
- </ul>
54
- </section>
55
- <section>
56
- <Heading level={2}>섹션 2</Heading>
57
- <Button variant={"solid"}>클릭</Button>
58
- </section>
59
- </main>
60
- <footer>
61
- <Text muted>© 2024 Dale UI. All rights reserved.</Text>
62
- </footer>
63
- </div>
64
- );
65
- }
66
-
67
- export default App;
package/src/assets/Discord.svg DELETED
@@ -1 +0,0 @@
1
- <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Discord</title><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>
package/src/assets/GitHub.svg DELETED
@@ -1 +0,0 @@
1
- <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
package/src/assets/LinkedIn.svg DELETED
@@ -1 +0,0 @@
1
- <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
package/src/assets/Medium.svg DELETED
@@ -1 +0,0 @@
1
- <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Medium</title><path d="M4.21 0A4.201 4.201 0 0 0 0 4.21v15.58A4.201 4.201 0 0 0 4.21 24h15.58A4.201 4.201 0 0 0 24 19.79v-1.093c-.137.013-.278.02-.422.02-2.577 0-4.027-2.146-4.09-4.832a7.592 7.592 0 0 1 .022-.708c.093-1.186.475-2.241 1.105-3.022a3.885 3.885 0 0 1 1.395-1.1c.468-.237 1.127-.367 1.664-.367h.023c.101 0 .202.004.303.01V4.211A4.201 4.201 0 0 0 19.79 0Zm.198 5.583h4.165l3.588 8.435 3.59-8.435h3.864v.146l-.019.004c-.705.16-1.063.397-1.063 1.254h-.003l.003 10.274c.06.676.424.885 1.063 1.03l.02.004v.145h-4.923v-.145l.019-.005c.639-.144.994-.353 1.054-1.03V7.267l-4.745 11.15h-.261L6.15 7.569v9.445c0 .857.358 1.094 1.063 1.253l.02.004v.147H4.405v-.147l.019-.004c.705-.16 1.065-.397 1.065-1.253V6.987c0-.857-.358-1.094-1.064-1.254l-.018-.004zm19.25 3.668c-1.086.023-1.733 1.323-1.813 3.124H24V9.298a1.378 1.378 0 0 0-.342-.047Zm-1.862 3.632c-.1 1.756.86 3.239 2.204 3.634v-3.634z"/></svg>
package/src/assets/YouTube.svg DELETED
@@ -1 +0,0 @@
1
- <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>YouTube</title><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
package/src/components/Button/Button.stories.tsx DELETED
@@ -1,115 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/react";
2
- import { Button } from "./Button";
3
- import { vstack } from "../../../styled-system/patterns";
4
-
5
- export default {
6
- component: Button,
7
- parameters: {
8
- layout: "centered",
9
- },
10
- args: {
11
- children: "시작하기",
12
- variant: "solid",
13
- },
14
- } satisfies Meta<typeof Button>;
15
-
16
- export const Basic: StoryObj<typeof Button> = {};
17
-
18
- export const Variants: StoryObj<typeof Button> = {
19
- render: (args) => {
20
- return (
21
- <div className={vstack({ gap: "4" })}>
22
- <Button {...args} variant="solid">
23
- 솔리드 버튼
24
- </Button>
25
- <Button {...args} variant="outline">
26
- 아웃라인 버튼
27
- </Button>
28
- </div>
29
- );
30
- },
31
- argTypes: {
32
- children: {
33
- control: false,
34
- },
35
- variant: {
36
- control: false,
37
- },
38
- },
39
- };
40
-
41
- export const Tones: StoryObj<typeof Button> = {
42
- render: (args) => {
43
- return (
44
- <div className={vstack({ gap: "4" })}>
45
- <Button {...args} tone="neutral">
46
- 중립 색조
47
- </Button>
48
- <Button {...args} tone="accent">
49
- 강조 색조
50
- </Button>
51
- <Button {...args} tone="danger">
52
- 위험 색조
53
- </Button>
54
- <Button {...args} tone="warning">
55
- 경고 색조
56
- </Button>
57
- </div>
58
- );
59
- },
60
- argTypes: {
61
- children: {
62
- control: false,
63
- },
64
- tone: {
65
- control: false,
66
- },
67
- },
68
- };
69
-
70
- export const Sizes: StoryObj<typeof Button> = {
71
- render: (args) => {
72
- return (
73
- <div className={vstack({ gap: "4" })}>
74
- <Button {...args} size="sm">
75
- 작은 버튼
76
- </Button>
77
- <Button {...args} size="md">
78
- 중간 버튼
79
- </Button>
80
- <Button {...args} size="lg">
81
- 큰 버튼
82
- </Button>
83
- </div>
84
- );
85
- },
86
- argTypes: {
87
- children: {
88
- control: false,
89
- },
90
- size: {
91
- control: false,
92
- },
93
- },
94
- };
95
-
96
- export const Disabled: StoryObj<typeof Button> = {
97
- render: (args) => {
98
- return (
99
- <div className={vstack({ gap: "4" })}>
100
- <Button {...args} disabled>
101
- 비활성화 버튼
102
- </Button>
103
- <Button {...args}>활성화 버튼</Button>
104
- </div>
105
- );
106
- },
107
- argTypes: {
108
- children: {
109
- control: false,
110
- },
111
- disabled: {
112
- control: false,
113
- },
114
- },
115
- };
package/src/components/Button/Button.test.tsx DELETED
@@ -1,108 +0,0 @@
1
- import { composeStories } from "@storybook/react";
2
- import { render, screen, fireEvent } from "@testing-library/react";
3
- import { expect, test, vi } from "vitest";
4
- import * as stories from "./Button.stories";
5
- import { Button } from "./Button";
6
-
7
- const { Basic, Variants, Tones, Sizes, Disabled } = composeStories(stories);
8
-
9
- test("renders the button with the correct text content", () => {
10
- render(<Basic>테스트</Basic>);
11
-
12
- expect(screen.getByText("테스트")).toBeInTheDocument();
13
- });
14
-
15
- test("applies the correct variant styles", () => {
16
- render(<Variants />);
17
-
18
- expect(screen.getByText("솔리드 버튼")).toHaveClass("bg_bg");
19
- expect(screen.getByText("아웃라인 버튼")).toHaveClass("bd_3px_solid");
20
- });
21
-
22
- test("applies the correct tone styles", () => {
23
- render(<Tones />);
24
-
25
- expect(screen.getByText("중립 색조")).toHaveClass("bg_bg");
26
- expect(screen.getByText("강조 색조")).toHaveClass("bg_bg.accent");
27
- expect(screen.getByText("위험 색조")).toHaveClass("bg_bg.danger");
28
- expect(screen.getByText("경고 색조")).toHaveClass("bg_bg.warning");
29
- });
30
-
31
- test("applies the correct font size based on the size prop", () => {
32
- render(<Sizes />);
33
-
34
- expect(screen.getByText("작은 버튼")).toHaveClass("fs_sm");
35
- expect(screen.getByText("중간 버튼")).toHaveClass("fs_md");
36
- expect(screen.getByText("큰 버튼")).toHaveClass("fs_lg");
37
- });
38
-
39
- test("applies the correct disabled styles", () => {
40
- render(<Disabled />);
41
-
42
- expect(screen.getByText("비활성화 버튼")).toBeDisabled();
43
- expect(screen.getByText("활성화 버튼")).toBeEnabled();
44
- expect(screen.getByText("비활성화 버튼")).toHaveClass("[&:disabled]:op_0.5");
45
- });
46
-
47
- test("renders a button with type='button' by default", () => {
48
- render(<Basic>Default Button</Basic>);
49
- const button = screen.getByText("Default Button");
50
- expect(button).toHaveAttribute("type", "button");
51
- });
52
-
53
- test("renders a button with type='button' by default", () => {
54
- render(<Basic variant="solid">Default Button</Basic>);
55
- const button = screen.getByText("Default Button");
56
- expect(button).toHaveAttribute("type", "button");
57
- });
58
-
59
- test("renders a button with type='button' when specified", () => {
60
- render(
61
- <Button type="button" variant="solid">
62
- Button Type Button
63
- </Button>
64
- );
65
- const button = screen.getByText("Button Type Button");
66
- expect(button).toHaveAttribute("type", "button");
67
- });
68
-
69
- test("renders a button with type='submit' when specified", () => {
70
- render(
71
- <form>
72
- <Button type="submit" variant="solid">
73
- Submit Type Button
74
- </Button>
75
- </form>
76
- );
77
- const button = screen.getByText("Submit Type Button");
78
- expect(button).toHaveAttribute("type", "submit");
79
- });
80
-
81
- test("submits the form when type='submit' button is clicked", () => {
82
- const handleSubmit = vi.fn();
83
- render(
84
- <form onSubmit={handleSubmit}>
85
- <Button type="submit" variant="solid">
86
- Submit Button
87
- </Button>
88
- </form>
89
- );
90
-
91
- const submitButton = screen.getByText("Submit Button");
92
- fireEvent.click(submitButton);
93
- expect(handleSubmit).toHaveBeenCalledTimes(1);
94
- });
95
-
96
- test("does not submit the form when type='button' button is clicked", () => {
97
- const handleSubmit = vi.fn();
98
- render(
99
- <form onSubmit={handleSubmit}>
100
- <Button type="button" variant="solid">
101
- Button Type Button
102
- </Button>
103
- </form>
104
- );
105
- const buttonTypeButton = screen.getByText("Button Type Button");
106
- fireEvent.click(buttonTypeButton);
107
- expect(handleSubmit).toHaveBeenCalledTimes(0);
108
- });
package/src/components/Button/Button.tsx DELETED
@@ -1,245 +0,0 @@
1
- import React, { type HTMLAttributes } from "react";
2
- import { css, cva } from "../../../styled-system/css";
3
- import type { Tone } from "../../tokens/colors";
4
-
5
- type ButtonVariant = "solid" | "outline";
6
- type ButtonSize = "sm" | "md" | "lg";
7
-
8
- export interface ButtonProps
9
- extends Omit<HTMLAttributes<HTMLElement>, "style"> {
10
- /** 텍스트 */
11
- children: React.ReactNode;
12
- /** 타입 */
13
- type?: "button" | "submit";
14
- /** 클릭 시 실행함수 */
15
- onClick?: () => void;
16
- /** 종류 */
17
- variant: ButtonVariant;
18
- /** 색조 */
19
- tone?: Tone;
20
- /** 버튼의 크기 */
21
- size?: ButtonSize;
22
- /** 버튼 비활성화 여부 */
23
- disabled?: boolean;
24
- }
25
-
26
- /**
27
- * - `variant` 속성으로 버튼의 스타일 종류를 지정할 수 있습니다.
28
- * - `tone` 속성으로 버튼의 색상 강조를 지정할 수 있습니다.
29
- * - `size` 속성으로 버튼의 크기를 지정할 수 있습니다.
30
- * - `type` 속성으로 버튼의 타입을 지정할 수 있습니다.
31
- * - `disabled` 속성을 사용하여 버튼을 비활성화할 수 있습니다.
32
- */
33
- export const Button = ({
34
- children,
35
- type = "button",
36
- onClick,
37
- variant = "solid",
38
- tone = "neutral",
39
- size = "md",
40
- disabled,
41
- ...rest
42
- }: ButtonProps) => {
43
- return (
44
- <button
45
- className={css(styles.raw({ tone, variant, size }), baseStyles)}
46
- type={type}
47
- onClick={onClick}
48
- disabled={disabled}
49
- {...rest}
50
- >
51
- {children}
52
- </button>
53
- );
54
- };
55
-
56
- const baseStyles = {
57
- appearance: "none",
58
- margin: "0",
59
- fontWeight: 500,
60
- textAlign: "center",
61
- textDecoration: "none",
62
- display: "flex",
63
- alignItems: "center",
64
- justifyContent: "center",
65
- width: ["auto", "100%"],
66
- borderRadius: "10px",
67
- cursor: "pointer",
68
- transition: "0.2s",
69
- lineHeight: "1",
70
- outline: "0",
71
- "&:disabled": {
72
- opacity: 0.5,
73
- cursor: "not-allowed",
74
- },
75
- };
76
-
77
- const styles = cva({
78
- base: {
79
- padding: "0.7rem 3rem",
80
- },
81
- variants: {
82
- size: {
83
- sm: {
84
- padding: "0.5rem 1.5rem",
85
- fontSize: "sm",
86
- },
87
- md: {
88
- padding: "0.7rem 2rem",
89
- fontSize: "md",
90
- },
91
- lg: {
92
- padding: "1rem 2.5rem",
93
- fontSize: "lg",
94
- },
95
- },
96
- variant: {
97
- solid: {},
98
- outline: {},
99
- },
100
- tone: {
101
- neutral: {},
102
- accent: {},
103
- danger: {},
104
- warning: {},
105
- },
106
- },
107
- compoundVariants: [
108
- {
109
- variant: "solid",
110
- tone: "neutral",
111
- css: {
112
- background: "bg",
113
- color: "text",
114
- "&:active, &:hover": {
115
- background: "bg.hover",
116
- },
117
- "&:focus": {
118
- outlineColor: "border.neutral",
119
- outline: "3px solid",
120
- outlineOffset: "2px",
121
- },
122
- },
123
- },
124
- {
125
- variant: "solid",
126
- tone: "accent",
127
- css: {
128
- background: "bg.accent",
129
- color: "text.accent",
130
- "&:active, &:hover": {
131
- background: "bg.hover.accent",
132
- },
133
- "&:focus": {
134
- outlineColor: "border.accent",
135
- outline: "3px solid",
136
- outlineOffset: "2px",
137
- },
138
- },
139
- },
140
- {
141
- variant: "solid",
142
- tone: "danger",
143
- css: {
144
- background: "bg.danger",
145
- color: "text.danger",
146
- "&:active, &:hover": {
147
- background: "bg.hover.danger",
148
- },
149
- "&:focus": {
150
- outlineColor: "border.danger",
151
- outline: "3px solid",
152
- outlineOffset: "2px",
153
- },
154
- },
155
- },
156
- {
157
- variant: "solid",
158
- tone: "warning",
159
- css: {
160
- background: "bg.warning",
161
- color: "text.warning",
162
- "&:active, &:hover": {
163
- background: "bg.hover.warning",
164
- },
165
- "&:focus": {
166
- outlineColor: "border.warning",
167
- outline: "3px solid",
168
- outlineOffset: "2px",
169
- },
170
- },
171
- },
172
- {
173
- variant: "outline",
174
- tone: "neutral",
175
- css: {
176
- border: "3px solid",
177
- borderColor: "border",
178
- color: "text",
179
- "&:active, &:hover": {
180
- background: "bg.hover",
181
- color: "text.muted",
182
- },
183
- "&:focus": {
184
- outlineColor: "border.neutral",
185
- outline: "3px solid",
186
- outlineOffset: "2px",
187
- },
188
- },
189
- },
190
- {
191
- variant: "outline",
192
- tone: "accent",
193
- css: {
194
- border: "3px solid",
195
- borderColor: "border.accent",
196
- color: "text.accent",
197
- "&:active, &:hover": {
198
- background: "bg.hover.accent",
199
- color: "text.muted.accent",
200
- },
201
- "&:focus": {
202
- outlineColor: "border.accent",
203
- outline: "3px solid",
204
- outlineOffset: "2px",
205
- },
206
- },
207
- },
208
- {
209
- variant: "outline",
210
- tone: "danger",
211
- css: {
212
- border: "3px solid",
213
- borderColor: "border.danger",
214
- color: "text.danger",
215
- "&:active, &:hover": {
216
- background: "bg.hover.danger",
217
- color: "text.muted.danger",
218
- },
219
- "&:focus": {
220
- outlineColor: "border.danger",
221
- outline: "3px solid",
222
- outlineOffset: "2px",
223
- },
224
- },
225
- },
226
- {
227
- variant: "outline",
228
- tone: "warning",
229
- css: {
230
- border: "3px solid",
231
- borderColor: "border.warning",
232
- color: "text.warning",
233
- "&:active, &:hover": {
234
- background: "bg.hover.warning",
235
- color: "text.muted.warning",
236
- },
237
- "&:focus": {
238
- outlineColor: "border.warning",
239
- outline: "3px solid",
240
- outlineOffset: "2px",
241
- },
242
- },
243
- },
244
- ],
245
- });
package/src/components/Button/index.tsx DELETED
@@ -1 +0,0 @@
1
- export { Button } from "./Button";