@feminab/box-ui 0.1.0

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 (295) hide show
  1. package/.babelrc +15 -0
  2. package/.storybook/main.ts +20 -0
  3. package/.storybook/preview.ts +15 -0
  4. package/README.md +46 -0
  5. package/dist/@interfaces/Badge.d.d.ts +12 -0
  6. package/dist/@interfaces/Badge.d.d.ts.map +1 -0
  7. package/dist/@interfaces/Button.d.d.ts +15 -0
  8. package/dist/@interfaces/Button.d.d.ts.map +1 -0
  9. package/dist/@interfaces/Color.d.d.ts +6 -0
  10. package/dist/@interfaces/Color.d.d.ts.map +1 -0
  11. package/dist/@interfaces/IButtonItem.d.d.ts +6 -0
  12. package/dist/@interfaces/IButtonItem.d.d.ts.map +1 -0
  13. package/dist/@interfaces/ISubNavItem.d.d.ts +9 -0
  14. package/dist/@interfaces/ISubNavItem.d.d.ts.map +1 -0
  15. package/dist/@interfaces/MobileNavProps.d.d.ts +5 -0
  16. package/dist/@interfaces/MobileNavProps.d.d.ts.map +1 -0
  17. package/dist/@interfaces/NavItem.d.d.ts +22 -0
  18. package/dist/@interfaces/NavItem.d.d.ts.map +1 -0
  19. package/dist/@interfaces/Pagination.d.d.ts +8 -0
  20. package/dist/@interfaces/Pagination.d.d.ts.map +1 -0
  21. package/dist/@interfaces/Select.d.d.ts +14 -0
  22. package/dist/@interfaces/Select.d.d.ts.map +1 -0
  23. package/dist/@interfaces/SideNavProps.d.d.ts +11 -0
  24. package/dist/@interfaces/SideNavProps.d.d.ts.map +1 -0
  25. package/dist/@interfaces/TextInput.d.d.ts +15 -0
  26. package/dist/@interfaces/TextInput.d.d.ts.map +1 -0
  27. package/dist/@interfaces/index.d.ts +12 -0
  28. package/dist/@interfaces/index.d.ts.map +1 -0
  29. package/dist/Badge.d.ts +4 -0
  30. package/dist/Badge.d.ts.map +1 -0
  31. package/dist/Button.d.ts +4 -0
  32. package/dist/Button.d.ts.map +1 -0
  33. package/dist/ButtonGroup.d.ts +9 -0
  34. package/dist/ButtonGroup.d.ts.map +1 -0
  35. package/dist/ColorBox.d.ts +4 -0
  36. package/dist/ColorBox.d.ts.map +1 -0
  37. package/dist/Header.d.ts +13 -0
  38. package/dist/Header.d.ts.map +1 -0
  39. package/dist/Nav/MobileNav.d.ts +4 -0
  40. package/dist/Nav/MobileNav.d.ts.map +1 -0
  41. package/dist/Nav/NavItem.d.ts +4 -0
  42. package/dist/Nav/NavItem.d.ts.map +1 -0
  43. package/dist/Nav/SideNav.d.ts +5 -0
  44. package/dist/Nav/SideNav.d.ts.map +1 -0
  45. package/dist/Nav/SubNavItem.d.ts +4 -0
  46. package/dist/Nav/SubNavItem.d.ts.map +1 -0
  47. package/dist/Page.d.ts +3 -0
  48. package/dist/Page.d.ts.map +1 -0
  49. package/dist/Paginate.d.ts +4 -0
  50. package/dist/Paginate.d.ts.map +1 -0
  51. package/dist/Select.d.ts +4 -0
  52. package/dist/Select.d.ts.map +1 -0
  53. package/dist/StoryLayout.d.ts +9 -0
  54. package/dist/StoryLayout.d.ts.map +1 -0
  55. package/dist/TextInput.d.ts +4 -0
  56. package/dist/TextInput.d.ts.map +1 -0
  57. package/dist/Typography.d.ts +14 -0
  58. package/dist/Typography.d.ts.map +1 -0
  59. package/dist/box-ui.cjs.development.js +1122 -0
  60. package/dist/box-ui.cjs.development.js.map +1 -0
  61. package/dist/box-ui.cjs.production.min.js +2 -0
  62. package/dist/box-ui.cjs.production.min.js.map +1 -0
  63. package/dist/box-ui.esm.js +1096 -0
  64. package/dist/box-ui.esm.js.map +1 -0
  65. package/dist/data/colors.d.ts +3 -0
  66. package/dist/data/colors.d.ts.map +1 -0
  67. package/dist/data/countries.d.ts +3 -0
  68. package/dist/data/countries.d.ts.map +1 -0
  69. package/dist/data/images/index.d.ts +5 -0
  70. package/dist/data/images/index.d.ts.map +1 -0
  71. package/dist/data/index.d.ts +6 -0
  72. package/dist/data/index.d.ts.map +1 -0
  73. package/dist/data/navItems.d.ts +4 -0
  74. package/dist/data/navItems.d.ts.map +1 -0
  75. package/dist/data/options.d.ts +5 -0
  76. package/dist/data/options.d.ts.map +1 -0
  77. package/dist/data/prices.d.ts +3 -0
  78. package/dist/data/prices.d.ts.map +1 -0
  79. package/dist/hooks/useIconClassName.d.ts +5 -0
  80. package/dist/hooks/useIconClassName.d.ts.map +1 -0
  81. package/dist/hooks/useIconProps.d.ts +5 -0
  82. package/dist/hooks/useIconProps.d.ts.map +1 -0
  83. package/dist/index.d.ts +14 -0
  84. package/dist/index.d.ts.map +1 -0
  85. package/dist/index.js +8 -0
  86. package/dist/reportWebVitals.d.ts +4 -0
  87. package/dist/reportWebVitals.d.ts.map +1 -0
  88. package/dist/setupTests.d.ts +2 -0
  89. package/dist/setupTests.d.ts.map +1 -0
  90. package/dist/stories/Badge.stories.d.ts +13 -0
  91. package/dist/stories/Badge.stories.d.ts.map +1 -0
  92. package/dist/stories/Button.stories.d.ts +16 -0
  93. package/dist/stories/Button.stories.d.ts.map +1 -0
  94. package/dist/stories/ButtonGroup.stories.d.ts +11 -0
  95. package/dist/stories/ButtonGroup.stories.d.ts.map +1 -0
  96. package/dist/stories/Colors.stories.d.ts +8 -0
  97. package/dist/stories/Colors.stories.d.ts.map +1 -0
  98. package/dist/stories/Header.stories.d.ts +20 -0
  99. package/dist/stories/Header.stories.d.ts.map +1 -0
  100. package/dist/stories/MobileNav.stories.d.ts +10 -0
  101. package/dist/stories/MobileNav.stories.d.ts.map +1 -0
  102. package/dist/stories/Page.stories.d.ts +14 -0
  103. package/dist/stories/Page.stories.d.ts.map +1 -0
  104. package/dist/stories/Paginate.stories.d.ts +11 -0
  105. package/dist/stories/Paginate.stories.d.ts.map +1 -0
  106. package/dist/stories/Select.stories.d.ts +11 -0
  107. package/dist/stories/Select.stories.d.ts.map +1 -0
  108. package/dist/stories/SideNav.stories.d.ts +10 -0
  109. package/dist/stories/SideNav.stories.d.ts.map +1 -0
  110. package/dist/stories/TextInput.stories.d.ts +11 -0
  111. package/dist/stories/TextInput.stories.d.ts.map +1 -0
  112. package/dist/stories/Typography.stories.d.ts +11 -0
  113. package/dist/stories/Typography.stories.d.ts.map +1 -0
  114. package/output.css +639 -0
  115. package/package.json +91 -0
  116. package/postcss.config.js +6 -0
  117. package/public/favicon.ico +0 -0
  118. package/public/index.html +43 -0
  119. package/public/logo192.png +0 -0
  120. package/public/logo512.png +0 -0
  121. package/public/manifest.json +25 -0
  122. package/public/robots.txt +3 -0
  123. package/src/@interfaces/Badge.d.tsx +13 -0
  124. package/src/@interfaces/Button.d.tsx +17 -0
  125. package/src/@interfaces/Color.d.tsx +5 -0
  126. package/src/@interfaces/IButtonItem.d.tsx +6 -0
  127. package/src/@interfaces/ISubNavItem.d.tsx +10 -0
  128. package/src/@interfaces/MobileNavProps.d.tsx +4 -0
  129. package/src/@interfaces/NavItem.d.tsx +22 -0
  130. package/src/@interfaces/Pagination.d.tsx +7 -0
  131. package/src/@interfaces/Select.d.tsx +12 -0
  132. package/src/@interfaces/SideNavProps.d.tsx +11 -0
  133. package/src/@interfaces/TextInput.d.tsx +13 -0
  134. package/src/@interfaces/index.tsx +11 -0
  135. package/src/Badge.tsx +44 -0
  136. package/src/Button.tsx +132 -0
  137. package/src/ButtonGroup.tsx +37 -0
  138. package/src/ColorBox.tsx +15 -0
  139. package/src/Header.tsx +55 -0
  140. package/src/Nav/MobileNav.tsx +35 -0
  141. package/src/Nav/NavItem.tsx +101 -0
  142. package/src/Nav/SideNav.tsx +165 -0
  143. package/src/Nav/SubNavItem.tsx +39 -0
  144. package/src/Page.tsx +72 -0
  145. package/src/Paginate.tsx +102 -0
  146. package/src/Select.tsx +102 -0
  147. package/src/StoryLayout.tsx +17 -0
  148. package/src/TextInput.tsx +103 -0
  149. package/src/Typography.tsx +81 -0
  150. package/src/data/colors.tsx +279 -0
  151. package/src/data/countries.tsx +57 -0
  152. package/src/data/images/be.svg +1 -0
  153. package/src/data/images/de.svg +1 -0
  154. package/src/data/images/fr.svg +1 -0
  155. package/src/data/images/in.svg +1 -0
  156. package/src/data/images/index.tsx +33 -0
  157. package/src/data/images/it.svg +1 -0
  158. package/src/data/images/logo.svg +23 -0
  159. package/src/data/images/nl.svg +1 -0
  160. package/src/data/images/ru.svg +1 -0
  161. package/src/data/images/us.svg +1 -0
  162. package/src/data/index.tsx +5 -0
  163. package/src/data/navItems.tsx +109 -0
  164. package/src/data/options.tsx +51 -0
  165. package/src/data/prices.tsx +36 -0
  166. package/src/hooks/useIconClassName.tsx +14 -0
  167. package/src/hooks/useIconProps.tsx +19 -0
  168. package/src/index.js +15 -0
  169. package/src/react-app-env.d.ts +1 -0
  170. package/src/reportWebVitals.ts +15 -0
  171. package/src/setupTests.ts +5 -0
  172. package/src/stories/Badge.stories.tsx +86 -0
  173. package/src/stories/Button.stories.tsx +104 -0
  174. package/src/stories/ButtonGroup.stories.tsx +83 -0
  175. package/src/stories/Colors.stories.tsx +31 -0
  176. package/src/stories/Configure.mdx +364 -0
  177. package/src/stories/Header.stories.ts +33 -0
  178. package/src/stories/MobileNav.stories.tsx +60 -0
  179. package/src/stories/Page.stories.ts +32 -0
  180. package/src/stories/Paginate.stories.tsx +64 -0
  181. package/src/stories/Select.stories.tsx +77 -0
  182. package/src/stories/SideNav.stories.tsx +38 -0
  183. package/src/stories/TextInput.stories.tsx +100 -0
  184. package/src/stories/Typography.stories.tsx +115 -0
  185. package/src/stories/assets/accessibility.png +0 -0
  186. package/src/stories/assets/accessibility.svg +1 -0
  187. package/src/stories/assets/addon-library.png +0 -0
  188. package/src/stories/assets/assets.png +0 -0
  189. package/src/stories/assets/avif-test-image.avif +0 -0
  190. package/src/stories/assets/context.png +0 -0
  191. package/src/stories/assets/discord.svg +1 -0
  192. package/src/stories/assets/docs.png +0 -0
  193. package/src/stories/assets/figma-plugin.png +0 -0
  194. package/src/stories/assets/github.svg +1 -0
  195. package/src/stories/assets/share.png +0 -0
  196. package/src/stories/assets/styling.png +0 -0
  197. package/src/stories/assets/testing.png +0 -0
  198. package/src/stories/assets/theming.png +0 -0
  199. package/src/stories/assets/tutorials.svg +1 -0
  200. package/src/stories/assets/youtube.svg +1 -0
  201. package/src/styles/global.css +367 -0
  202. package/storybook-static/125.65b26339.iframe.bundle.js +405 -0
  203. package/storybook-static/125.65b26339.iframe.bundle.js.LICENSE.txt +9 -0
  204. package/storybook-static/125.65b26339.iframe.bundle.js.map +1 -0
  205. package/storybook-static/13.0638081a.iframe.bundle.js +2 -0
  206. package/storybook-static/13.0638081a.iframe.bundle.js.LICENSE.txt +9 -0
  207. package/storybook-static/161.a19908ac.iframe.bundle.js +2 -0
  208. package/storybook-static/161.a19908ac.iframe.bundle.js.LICENSE.txt +9 -0
  209. package/storybook-static/161528bb6c25115b3f83.png +0 -0
  210. package/storybook-static/167.3fa3a909.iframe.bundle.js +1 -0
  211. package/storybook-static/294.ce38f65c.iframe.bundle.js +1 -0
  212. package/storybook-static/2dbc69731c3f9930a271.png +0 -0
  213. package/storybook-static/314.568bd9af.iframe.bundle.js +2 -0
  214. package/storybook-static/314.568bd9af.iframe.bundle.js.LICENSE.txt +15 -0
  215. package/storybook-static/364.0b18ef67.iframe.bundle.js +1 -0
  216. package/storybook-static/735.1625d9f4.iframe.bundle.js +2 -0
  217. package/storybook-static/735.1625d9f4.iframe.bundle.js.LICENSE.txt +9 -0
  218. package/storybook-static/742.597501f6.iframe.bundle.js +1 -0
  219. package/storybook-static/7a58d2cb9a6358f85e9b.png +0 -0
  220. package/storybook-static/844.aec20bdb.iframe.bundle.js +95 -0
  221. package/storybook-static/844.aec20bdb.iframe.bundle.js.LICENSE.txt +19 -0
  222. package/storybook-static/844.aec20bdb.iframe.bundle.js.map +1 -0
  223. package/storybook-static/9335a1a91b80ad4fec70.png +0 -0
  224. package/storybook-static/936.fd850a3f.iframe.bundle.js +1 -0
  225. package/storybook-static/961.0e5457c5.iframe.bundle.js +2 -0
  226. package/storybook-static/961.0e5457c5.iframe.bundle.js.LICENSE.txt +9 -0
  227. package/storybook-static/c720ced26387af8a9cb2.png +0 -0
  228. package/storybook-static/e93de094692245f1ec04.png +0 -0
  229. package/storybook-static/f7d8b9a8cec7528e0e36.png +0 -0
  230. package/storybook-static/favicon.ico +0 -0
  231. package/storybook-static/favicon.svg +1 -0
  232. package/storybook-static/iframe.html +511 -0
  233. package/storybook-static/index.html +185 -0
  234. package/storybook-static/index.json +1 -0
  235. package/storybook-static/logo192.png +0 -0
  236. package/storybook-static/logo512.png +0 -0
  237. package/storybook-static/main.069281cf.iframe.bundle.js +1 -0
  238. package/storybook-static/manifest.json +25 -0
  239. package/storybook-static/nunito-sans-bold-italic.woff2 +0 -0
  240. package/storybook-static/nunito-sans-bold.woff2 +0 -0
  241. package/storybook-static/nunito-sans-italic.woff2 +0 -0
  242. package/storybook-static/nunito-sans-regular.woff2 +0 -0
  243. package/storybook-static/project.json +1 -0
  244. package/storybook-static/robots.txt +3 -0
  245. package/storybook-static/runtime~main.295ddda4.iframe.bundle.js +1 -0
  246. package/storybook-static/sb-addons/chromatic-com-storybook-10/manager-bundle.js +331 -0
  247. package/storybook-static/sb-addons/chromatic-com-storybook-10/manager-bundle.js.LEGAL.txt +51 -0
  248. package/storybook-static/sb-addons/essentials-actions-2/manager-bundle.js +3 -0
  249. package/storybook-static/sb-addons/essentials-backgrounds-4/manager-bundle.js +12 -0
  250. package/storybook-static/sb-addons/essentials-controls-1/manager-bundle.js +402 -0
  251. package/storybook-static/sb-addons/essentials-docs-3/manager-bundle.js +242 -0
  252. package/storybook-static/sb-addons/essentials-measure-7/manager-bundle.js +3 -0
  253. package/storybook-static/sb-addons/essentials-outline-8/manager-bundle.js +3 -0
  254. package/storybook-static/sb-addons/essentials-toolbars-6/manager-bundle.js +3 -0
  255. package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js +3 -0
  256. package/storybook-static/sb-addons/interactions-11/manager-bundle.js +222 -0
  257. package/storybook-static/sb-addons/links-12/manager-bundle.js +3 -0
  258. package/storybook-static/sb-addons/onboarding-9/manager-bundle.js +127 -0
  259. package/storybook-static/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js +3 -0
  260. package/storybook-static/sb-common-assets/favicon.svg +1 -0
  261. package/storybook-static/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
  262. package/storybook-static/sb-common-assets/nunito-sans-bold.woff2 +0 -0
  263. package/storybook-static/sb-common-assets/nunito-sans-italic.woff2 +0 -0
  264. package/storybook-static/sb-common-assets/nunito-sans-regular.woff2 +0 -0
  265. package/storybook-static/sb-manager/globals-module-info.js +1051 -0
  266. package/storybook-static/sb-manager/globals-runtime.js +41591 -0
  267. package/storybook-static/sb-manager/globals.js +48 -0
  268. package/storybook-static/sb-manager/runtime.js +12048 -0
  269. package/storybook-static/sb-preview/globals.js +33 -0
  270. package/storybook-static/sb-preview/runtime.js +7745 -0
  271. package/storybook-static/static/css/main.08036cd2.css +2294 -0
  272. package/storybook-static/static/css/main.08036cd2.css.map +1 -0
  273. package/storybook-static/static/media/discord.d85804c7f88be863ff119366ab74d826.svg +1 -0
  274. package/storybook-static/static/media/github.e4e8df827592b1ed0288e4678e1965ce.svg +1 -0
  275. package/storybook-static/static/media/tutorials.fde6e46fc254fa77b6e39d1118470f7c.svg +1 -0
  276. package/storybook-static/static/media/youtube.fd046a09fac357359f94cc21068d6560.svg +1 -0
  277. package/storybook-static/stories-Badge-stories.484f7206.iframe.bundle.js +1 -0
  278. package/storybook-static/stories-Button-stories.5e29be85.iframe.bundle.js +1 -0
  279. package/storybook-static/stories-ButtonGroup-stories.cc89968c.iframe.bundle.js +1 -0
  280. package/storybook-static/stories-Colors-stories.f892dc75.iframe.bundle.js +2 -0
  281. package/storybook-static/stories-Colors-stories.f892dc75.iframe.bundle.js.LICENSE.txt +15 -0
  282. package/storybook-static/stories-Configure-mdx.81346d97.iframe.bundle.js +1 -0
  283. package/storybook-static/stories-Header-stories.cf691094.iframe.bundle.js +2 -0
  284. package/storybook-static/stories-Header-stories.cf691094.iframe.bundle.js.LICENSE.txt +15 -0
  285. package/storybook-static/stories-MobileNav-stories.f04cccdd.iframe.bundle.js +1 -0
  286. package/storybook-static/stories-Page-stories.0c9aa29d.iframe.bundle.js +2 -0
  287. package/storybook-static/stories-Page-stories.0c9aa29d.iframe.bundle.js.LICENSE.txt +15 -0
  288. package/storybook-static/stories-Paginate-stories.3b161781.iframe.bundle.js +1 -0
  289. package/storybook-static/stories-Select-stories.7556ae0d.iframe.bundle.js +1 -0
  290. package/storybook-static/stories-SideNav-stories.093fac6a.iframe.bundle.js +1 -0
  291. package/storybook-static/stories-TextInput-stories.6d3e15c6.iframe.bundle.js +1 -0
  292. package/storybook-static/stories-Typography-stories.6640f7ac.iframe.bundle.js +2 -0
  293. package/storybook-static/stories-Typography-stories.6640f7ac.iframe.bundle.js.LICENSE.txt +15 -0
  294. package/tailwind.config.js +113 -0
  295. package/tsconfig.json +29 -0
package/public/favicon.ico ADDED
Binary file
package/public/index.html ADDED
@@ -0,0 +1,43 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
7
+ <meta name="theme-color" content="#000000" />
8
+ <meta
9
+ name="description"
10
+ content="Web site created using create-react-app"
11
+ />
12
+ <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13
+ <!--
14
+ manifest.json provides metadata used when your web app is installed on a
15
+ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16
+ -->
17
+ <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18
+ <!--
19
+ Notice the use of %PUBLIC_URL% in the tags above.
20
+ It will be replaced with the URL of the `public` folder during the build.
21
+ Only files inside the `public` folder can be referenced from the HTML.
22
+
23
+ Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24
+ work correctly both with client-side routing and a non-root public URL.
25
+ Learn how to configure a non-root public URL by running `npm run build`.
26
+ -->
27
+ <title>React App</title>
28
+ </head>
29
+ <body>
30
+ <noscript>You need to enable JavaScript to run this app.</noscript>
31
+ <div id="root"></div>
32
+ <!--
33
+ This HTML file is a template.
34
+ If you open it directly in the browser, you will see an empty page.
35
+
36
+ You can add webfonts, meta tags, or analytics to this file.
37
+ The build step will place the bundled scripts into the <body> tag.
38
+
39
+ To begin the development, run `npm start` or `yarn start`.
40
+ To create a production bundle, use `npm run build` or `yarn build`.
41
+ -->
42
+ </body>
43
+ </html>
package/public/logo192.png ADDED
Binary file
package/public/logo512.png ADDED
Binary file
package/public/manifest.json ADDED
@@ -0,0 +1,25 @@
1
+ {
2
+ "short_name": "React App",
3
+ "name": "Create React App Sample",
4
+ "icons": [
5
+ {
6
+ "src": "favicon.ico",
7
+ "sizes": "64x64 32x32 24x24 16x16",
8
+ "type": "image/x-icon"
9
+ },
10
+ {
11
+ "src": "logo192.png",
12
+ "type": "image/png",
13
+ "sizes": "192x192"
14
+ },
15
+ {
16
+ "src": "logo512.png",
17
+ "type": "image/png",
18
+ "sizes": "512x512"
19
+ }
20
+ ],
21
+ "start_url": ".",
22
+ "display": "standalone",
23
+ "theme_color": "#000000",
24
+ "background_color": "#ffffff"
25
+ }
package/public/robots.txt ADDED
@@ -0,0 +1,3 @@
1
+ # https://www.robotstxt.org/robotstxt.html
2
+ User-agent: *
3
+ Disallow:
package/src/@interfaces/Badge.d.tsx ADDED
@@ -0,0 +1,13 @@
1
+ import React from "react";
2
+
3
+ export type BadgeVariant = "gray" | "primary" | "warning" | "error" | "success";
4
+ export type BadgeSize = "sm" | "md" | "lg";
5
+
6
+ export interface BadgeProps {
7
+ children: string | React.ReactElement;
8
+ LeadingIcon?: React.ReactElement;
9
+ TrailingIcon?: React.ReactElement;
10
+ className?: string;
11
+ variant: BadgeVariant;
12
+ size: BadgeSize;
13
+ }
package/src/@interfaces/Button.d.tsx ADDED
@@ -0,0 +1,17 @@
1
+ import {ButtonHTMLAttributes, ReactElement} from 'react';
2
+
3
+ export type ButtonVariant = 'primary' | 'secondary' | 'secondaryGray' | 'tertiary' | 'tertiaryGray';
4
+ export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
5
+ export type ButtonState = "default" | "hover" | "focus" | "disabled";
6
+
7
+ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
8
+ variant?: ButtonVariant;
9
+ size?: ButtonSize;
10
+ children?: string | ReactElement;
11
+ className?: string;
12
+ LeadingIcon?: ReactElement;
13
+ TrailingIcon?: ReactElement;
14
+ IconOnly?: React.ReactElement<React.HTMLProps<HTMLElement>>; // DOM elements
15
+ disabled?: boolean;
16
+ }
17
+
package/src/@interfaces/Color.d.tsx ADDED
@@ -0,0 +1,5 @@
1
+ export interface IColor{
2
+ bgClass: string,
3
+ code: number,
4
+ hex: string
5
+ }
package/src/@interfaces/IButtonItem.d.tsx ADDED
@@ -0,0 +1,6 @@
1
+ import React from "react";
2
+
3
+ export interface IButtonItem{
4
+ value:string;
5
+ content: React.ReactNode;
6
+ }
package/src/@interfaces/ISubNavItem.d.tsx ADDED
@@ -0,0 +1,10 @@
1
+ import React from "react";
2
+ import { SubNavItem } from "./NavItem.d";
3
+
4
+ export interface SubNavItemProps {
5
+ inDropdown?: boolean;
6
+ isActive: boolean;
7
+ subItem: SubNavItem;
8
+ onClick: React.MouseEventHandler<HTMLLIElement>;
9
+ }
10
+
package/src/@interfaces/MobileNavProps.d.tsx ADDED
@@ -0,0 +1,4 @@
1
+ export interface MobileNavProps {
2
+ open: boolean;
3
+ toggleOpen: () => void;
4
+ }
package/src/@interfaces/NavItem.d.tsx ADDED
@@ -0,0 +1,22 @@
1
+ export interface BaseNavItem {
2
+ order: number;
3
+ path?: string;
4
+ label: string;
5
+ }
6
+
7
+ export interface SubNavItem extends BaseNavItem {}
8
+
9
+ export interface INavItem extends BaseNavItem {
10
+ icon: React.ReactElement;
11
+ toggleSidebar?: boolean;
12
+ subItems?: SubNavItem[];
13
+ }
14
+
15
+ export interface NavItemProps {
16
+ item: INavItem;
17
+ isActive: boolean;
18
+ activeSubNavItem: string;
19
+ open: boolean;
20
+ openDropdown: boolean;
21
+ onClick: (item: INavItem, subNavPath?: string) => void;
22
+ }
package/src/@interfaces/Pagination.d.tsx ADDED
@@ -0,0 +1,7 @@
1
+ export interface PaginationProps {
2
+ totalPages: number,
3
+ page: number,
4
+ setPage: (page: number) => void,
5
+ isMobile: boolean,
6
+ className: string,
7
+ }
package/src/@interfaces/Select.d.tsx ADDED
@@ -0,0 +1,12 @@
1
+ export interface IOption {
2
+ value: string,
3
+ label: string | React.ReactNode,
4
+ }
5
+ export interface SelectProps{
6
+ placeholder: string,
7
+ options?: IOption[],
8
+ selectedOption?: IOption | undefined,
9
+ setSelectedOption: (option: string) => void,
10
+ LeadingIcon?: React.ReactElement,
11
+ width?: string
12
+ }
package/src/@interfaces/SideNavProps.d.tsx ADDED
@@ -0,0 +1,11 @@
1
+ import { INavItem } from "./NavItem.d";
2
+
3
+ export interface SideNavProps {
4
+ className?: string;
5
+ navItemsTop: INavItem[];
6
+ navItemsBottom: INavItem[];
7
+ open: boolean;
8
+ setOpen: (open: boolean) => void;
9
+ username: string;
10
+ email: string;
11
+ }
package/src/@interfaces/TextInput.d.tsx ADDED
@@ -0,0 +1,13 @@
1
+ export interface TextInputProps {
2
+ type: "email" | "text",
3
+ value: string,
4
+ placeholder: string,
5
+ error?: string,
6
+ label?: string,
7
+ helperText?:string,
8
+ disabled?: boolean,
9
+ leadingText?: string;
10
+ LeadingIcon?: React.ReactElement;
11
+ TrailingIcon?: React.ReactElement;
12
+ handleChange?:(event: React.ChangeEvent<HTMLInputElement>) => void;
13
+ }
package/src/@interfaces/index.tsx ADDED
@@ -0,0 +1,11 @@
1
+ export * from './Color.d';
2
+ export * from './IButtonItem.d';
3
+ export * from './Pagination.d';
4
+ export * from './Badge.d';
5
+ export * from './Button.d';
6
+ export * from './Select.d';
7
+ export * from './TextInput.d';
8
+ export * from './NavItem.d';
9
+ export * from './ISubNavItem.d';
10
+ export * from './SideNavProps.d';
11
+ export * from './MobileNavProps.d';
package/src/Badge.tsx ADDED
@@ -0,0 +1,44 @@
1
+ import React, { FC } from "react";
2
+ import { BadgeProps, BadgeSize, BadgeVariant } from "./@interfaces";
3
+ import classNames from "classnames";
4
+
5
+ const BadgeSizeClasses: Record<BadgeSize, string> = {
6
+ sm: "badge-sm",
7
+ md: "badge-md",
8
+ lg: "badge-lg",
9
+ };
10
+
11
+ const BadgeVariantClasses: Record<BadgeVariant, string> = {
12
+ gray: "badge-gray",
13
+ primary: "badge-primary",
14
+ warning: "badge-warning",
15
+ error: "badge-error",
16
+ success: "badge-success",
17
+ };
18
+
19
+ export const Badge: FC<BadgeProps> = ({
20
+ className,
21
+ children,
22
+ LeadingIcon,
23
+ TrailingIcon,
24
+ variant,
25
+ size,
26
+ }) => {
27
+ const badgeVariantClassName = BadgeVariantClasses[variant];
28
+ const badgeSizeClassName = BadgeSizeClasses[size];
29
+
30
+ return (
31
+ <div
32
+ className={classNames(
33
+ "badge-base",
34
+ badgeSizeClassName,
35
+ badgeVariantClassName,
36
+ className
37
+ )}
38
+ >
39
+ {LeadingIcon && <span className="mr-1.5">{LeadingIcon}</span>}
40
+ {children}
41
+ {TrailingIcon && <span className="mr-1.5">{TrailingIcon}</span>}
42
+ </div>
43
+ );
44
+ };
package/src/Button.tsx ADDED
@@ -0,0 +1,132 @@
1
+ import React, { ReactElement, cloneElement, isValidElement } from "react";
2
+ import {
3
+ ButtonProps,
4
+ ButtonVariant,
5
+ ButtonSize,
6
+ ButtonState,
7
+ } from "./@interfaces";
8
+ import classNames from "classnames";
9
+
10
+ const buttonVariantClasses: Record<
11
+ ButtonVariant,
12
+ Record<ButtonState, string>
13
+ > = {
14
+ primary: {
15
+ default: "btn-primary",
16
+ hover: "btn-primary-hover",
17
+ focus: "btn-primary-focus shadow-grayDark",
18
+ disabled: "btn-primary-disabled",
19
+ },
20
+ secondary: {
21
+ default: "btn-secondary",
22
+ hover: "btn-secondary-hover",
23
+ focus: "btn-secondary-focus shadow-grayDark",
24
+ disabled: "btn-secondary-disabled",
25
+ },
26
+ secondaryGray: {
27
+ default: "btn-secondaryGray",
28
+ hover: "btn-secondaryGray-hover",
29
+ focus: "btn-secondaryGray-focus shadow-grayDark",
30
+ disabled: "btn-secondaryGray-disabled",
31
+ },
32
+ tertiary: {
33
+ default: "btn-tertiary",
34
+ hover: "btn-tertiary-hover",
35
+ focus: "btn-tertiary-focus shadow-grayDark",
36
+ disabled: "btn-tertiary-disabled",
37
+ },
38
+ tertiaryGray: {
39
+ default: "btn-tertiaryGray",
40
+ hover: "btn-tertiaryGray-hover",
41
+ focus: "btn-tertiaryGray-focus shadow-grayDark",
42
+ disabled: "btn-tertiaryGray-disabled",
43
+ },
44
+ };
45
+
46
+ const buttonSizeClasses: Record<ButtonSize, string> = {
47
+ sm: "btn-sm",
48
+ md: "btn-md",
49
+ lg: "btn-lg",
50
+ xl: "btn-xl",
51
+ "2xl": "btn-2xl",
52
+ };
53
+
54
+ const buttonIconSizeClasses: Record<ButtonSize, string> = {
55
+ sm: "btn-icon-sm",
56
+ md: "btn-icon-md",
57
+ lg: "btn-icon-lg",
58
+ xl: "btn-icon-xl",
59
+ "2xl": "btn-icon-2xl",
60
+ };
61
+
62
+ export const Button = ({
63
+ children,
64
+ className,
65
+ variant = "primary",
66
+ size = "md",
67
+ disabled,
68
+ LeadingIcon,
69
+ TrailingIcon,
70
+ IconOnly,
71
+ ...buttonProps
72
+ }: ButtonProps) => {
73
+ const buttonVariantClassName = buttonVariantClasses[variant];
74
+ const buttonIconSizeClassName = buttonIconSizeClasses[size];
75
+
76
+ const setIconSize = (icon: ReactElement, iconSize: number) => {
77
+ if (isValidElement<{ size?: number }>(icon) && "size" in icon.props) {
78
+ return cloneElement(icon, { size: 20 });
79
+ }
80
+ return icon;
81
+ };
82
+
83
+ const setClassName = (icon: ReactElement, additionalClass: string) => {
84
+ return isValidElement<{ className?: string }>(icon)
85
+ ? cloneElement(icon, {
86
+ className: classNames(icon.props.className, additionalClass),
87
+ })
88
+ : icon;
89
+ };
90
+
91
+ return (
92
+ <button
93
+ type="button"
94
+ className={classNames("btn-base", className, {
95
+ [buttonSizeClasses[size]]: !IconOnly,
96
+ [classNames(buttonIconSizeClassName, "justify-center")]: IconOnly,
97
+ [classNames(buttonVariantClassName.default,
98
+ buttonVariantClassName.hover,
99
+ buttonVariantClassName.focus)]: !disabled,
100
+ [classNames(buttonVariantClassName.disabled, "cursor-not-allowed")]: disabled,
101
+ })}
102
+ {...buttonProps}
103
+ >
104
+ {LeadingIcon && (
105
+ <span>
106
+ {setClassName(
107
+ LeadingIcon,
108
+ classNames({
109
+ "mr-2": size !== "2xl",
110
+ "mr-3": size === "2xl",
111
+ })
112
+ )}
113
+ </span>
114
+ )}
115
+ {children}
116
+ {IconOnly && (
117
+ <span>{setIconSize(IconOnly, size === "2xl" ? 24 : 20)}</span>
118
+ )}
119
+ {TrailingIcon && (
120
+ <span>
121
+ {setClassName(
122
+ TrailingIcon,
123
+ classNames({
124
+ "ml-2": size !== "2xl",
125
+ "ml-3": size === "2xl",
126
+ })
127
+ )}
128
+ </span>
129
+ )}
130
+ </button>
131
+ );
132
+ };
package/src/ButtonGroup.tsx ADDED
@@ -0,0 +1,37 @@
1
+ import React from "react";
2
+ import { IButtonItem } from "./@interfaces";
3
+ import classNames from "classnames";
4
+
5
+ export interface ButtonGroupProps {
6
+ options: IButtonItem[];
7
+ activeOption: string;
8
+ setActiveOption: (activeOption: string) => void;
9
+ }
10
+
11
+ export const ButtonGroup = ({
12
+ options,
13
+ activeOption,
14
+ setActiveOption,
15
+ }: ButtonGroupProps) => {
16
+ return (
17
+ <div>
18
+ {options.map((option, index) => (
19
+ <button
20
+ key={option.value}
21
+ className={classNames(
22
+ "inline-flex whitespace-nowrap items-center h-10 px-4 font-medium text-center text-sm focus:outline-none hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-white border border-gray-300 dark:border-gray-500",
23
+ {
24
+ "rounded-l-lg": index === 0,
25
+ "rounded-r-lg": index === options.length - 1,
26
+ "bg-gray-50 dark:bg-gray-700": activeOption === option.value,
27
+ "border-r-0": index !== 0 && index !== options.length - 1
28
+ }
29
+ )}
30
+ onClick={() => setActiveOption(option.value)}
31
+ >
32
+ {option.content}
33
+ </button>
34
+ ))}
35
+ </div>
36
+ );
37
+ };
package/src/ColorBox.tsx ADDED
@@ -0,0 +1,15 @@
1
+ import React from "react";
2
+ import { IColor } from "./@interfaces";
3
+
4
+ export const ColorBox = ({ code, hex, bgClass }: IColor) => (
5
+ <div
6
+ key={bgClass}
7
+ className="flex flex-col rounded-lg shadow-lg w-26 h-39 dark:bg-white">
8
+ <div className={`h-20 ${bgClass} rounded-t-lg`} />
9
+ <div className="mx-3 my-3">
10
+ {code}
11
+ <br/>
12
+ {hex}
13
+ </div>
14
+ </div>
15
+ );
package/src/Header.tsx ADDED
@@ -0,0 +1,55 @@
1
+ import React from 'react';
2
+
3
+ import { Button } from './Button';
4
+
5
+ type User = {
6
+ name: string;
7
+ };
8
+
9
+ export interface HeaderProps {
10
+ user?: User;
11
+ onLogin?: () => void;
12
+ onLogout?: () => void;
13
+ onCreateAccount?: () => void;
14
+ }
15
+
16
+ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
17
+ <header>
18
+ <div className="storybook-header">
19
+ <div>
20
+ <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
21
+ <g fill="none" fillRule="evenodd">
22
+ <path
23
+ d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
24
+ fill="#FFF"
25
+ />
26
+ <path
27
+ d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
28
+ fill="#555AB9"
29
+ />
30
+ <path
31
+ d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
32
+ fill="#91BAF8"
33
+ />
34
+ </g>
35
+ </svg>
36
+ <h1>Acme</h1>
37
+ </div>
38
+ <div>
39
+ {user ? (
40
+ <>
41
+ <span className="welcome">
42
+ Welcome, <b>{user.name}</b>!
43
+ </span>
44
+ <Button size="sm" onClick={onLogout}>Log out</Button>
45
+ </>
46
+ ) : (
47
+ <>
48
+ <Button size="sm" onClick={onLogin}>Log in</Button>
49
+ <Button variant="primary" size="sm" onClick={onCreateAccount} >Sign up</Button>
50
+ </>
51
+ )}
52
+ </div>
53
+ </div>
54
+ </header>
55
+ );
package/src/Nav/MobileNav.tsx ADDED
@@ -0,0 +1,35 @@
1
+ import classNames from "classnames";
2
+ import React, { FC } from "react";
3
+ import { Typography } from "../Typography";
4
+ import { renderLogo } from "./SideNav";
5
+ import {MobileNavProps} from '../@interfaces';
6
+
7
+
8
+ export const MobileNavbar: FC<MobileNavProps> = ({ open, toggleOpen }) => (
9
+ <div className="z-40 flex items-center justify-between h-20 py-6 bg-white shadow-md dark:bg-gray-900 px-9">
10
+ {renderLogo()}
11
+ <Typography variant="h6" customWeight="medium" className="select-none">
12
+ Box UI
13
+ </Typography>
14
+ <svg
15
+ width="32"
16
+ height="32"
17
+ viewBox="0 0 32 32"
18
+ xmlns="http://www.w3.org/2000/svg"
19
+ className={classNames(
20
+ "text-gray-500 transition-all duration-100 ease-out cursor-pointer stroke-current hover:text-gray-900 dark:text-white dark:hover:text-gray-200",
21
+ {
22
+ "opacity-0": open,
23
+ },
24
+ )}
25
+ onClick={toggleOpen}
26
+ >
27
+ <path
28
+ d="M4 16H22.6667M4 8H28M4 24H28"
29
+ strokeWidth="2"
30
+ strokeLinecap="round"
31
+ strokeLinejoin="round"
32
+ />
33
+ </svg>
34
+ </div>
35
+ );
package/src/Nav/NavItem.tsx ADDED
@@ -0,0 +1,101 @@
1
+ import React, {FC} from "react";
2
+ import { NavItemProps } from "../@interfaces";
3
+ import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
4
+ import { FiChevronDown } from "react-icons/fi";
5
+ import { Typography } from "../Typography";
6
+ import { SubNavItem } from "./SubNavItem";
7
+ import classNames from "classnames";
8
+ import { useIconProps } from "../hooks/useIconProps";
9
+
10
+ export const NavItem:FC<NavItemProps> = ({
11
+ item,
12
+ isActive,
13
+ activeSubNavItem,
14
+ open,
15
+ openDropdown,
16
+ onClick,
17
+ }) => {
18
+ const { setProps } = useIconProps();
19
+
20
+ const ArrowDown = FiChevronDown as React.FC<any>;
21
+
22
+ return (
23
+ <Popover key={item.label} className="relative">
24
+ <PopoverButton as={React.Fragment}>
25
+ <li
26
+ className={classNames("navItem group", {
27
+ "px-4": open,
28
+ "ml-2 px-2 w-10": !open,
29
+ "bg-primary-50 dark:bg-gray-100 dark:bg-opacity-10": isActive,
30
+ })}
31
+ onClick={() => onClick(item)}
32
+ >
33
+ {setProps(item.icon, 24, classNames("group-hover:text-primary-600 dark:group-hover:text-white dark:text-white transform duration-100 ease-out",
34
+ {
35
+ "-rotate-180": item.toggleSidebar && !open,
36
+ "text-gray-900": !isActive,
37
+ "text-primary-600 dark:text-white": isActive,
38
+ },))}
39
+ <>
40
+ <Typography
41
+ variant="md"
42
+ customWeight="medium"
43
+ className={classNames("flex-grow ml-3", {
44
+ "opacity-0 hidden": !open,
45
+ })}
46
+ customColor={classNames(
47
+ "group-hover:text-primary-600 dark:group-hover:text-white",
48
+ {
49
+ "text-gray-800 dark:text-white": !isActive,
50
+ "text-primary-600 dark:text-white": isActive,
51
+ },
52
+ )}
53
+ >
54
+ {item.label}
55
+ </Typography>
56
+ {item.subItems && item.subItems.length > 0 ? (
57
+ <ArrowDown
58
+ size={20}
59
+ className={classNames(
60
+ "group-hover:text-primary-600 dark:group-hover:text-white transform duration-100 ease-out",
61
+ {
62
+ "opacity-0 hidden": !open,
63
+ "text-gray-400": !isActive,
64
+ "text-primary-600 dark:text-white": isActive,
65
+ "-rotate-180": openDropdown,
66
+ },
67
+ )}
68
+ />
69
+ ) : null}
70
+ </>
71
+ </li>
72
+ </PopoverButton>
73
+
74
+ {openDropdown && open && item.subItems && item.subItems.length > 0 ? (
75
+ <div className="my-2 space-y-1">
76
+ {item.subItems.map((subItem) => (
77
+ <SubNavItem
78
+ key={subItem.label}
79
+ isActive={activeSubNavItem === subItem.label}
80
+ subItem={subItem}
81
+ onClick={() => onClick(item, subItem.label)}
82
+ />
83
+ ))}
84
+ </div>
85
+ ) : null}
86
+
87
+ {!open && item.subItems && item.subItems.length > 0 ? (
88
+ <PopoverPanel className="absolute z-50 px-4 py-3 ml-5 space-y-1 bg-white rounded-lg shadow-md -top-3 left-19 w-58 dark:bg-gray-900">
89
+ {item.subItems.map((subItem) => (
90
+ <SubNavItem
91
+ key={subItem.label}
92
+ inDropdown
93
+ isActive={activeSubNavItem === subItem.label}
94
+ subItem={subItem}
95
+ onClick={() => onClick(item, subItem.label)}
96
+ />
97
+ ))}
98
+ </PopoverPanel>
99
+ ) : null}
100
+ </Popover>
101
+ )};