@eleventheye/asui 1.0.24 → 1.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 (78) hide show
  1. package/dist/icons/AddItemIcon.d.ts.map +1 -1
  2. package/dist/icons/AddItemIcon.js +1 -1
  3. package/dist/icons/AddItemIcon.js.map +1 -1
  4. package/dist/icons/GamesIcon.d.ts.map +1 -1
  5. package/dist/icons/GamesIcon.js +1 -1
  6. package/dist/icons/GamesIcon.js.map +1 -1
  7. package/dist/icons/RulerIcon.js +1 -1
  8. package/dist/icons/TimeLapseIcon.js +1 -1
  9. package/dist/icons/TimeLapseIcon.js.map +1 -1
  10. package/dist/icons/UserSettingsIcon.js +1 -1
  11. package/dist/icons/UserSettingsIcon.js.map +1 -1
  12. package/dist/stories/Button.d.ts +10 -0
  13. package/dist/stories/Button.d.ts.map +1 -0
  14. package/dist/stories/Button.js +19 -0
  15. package/dist/stories/Button.js.map +1 -0
  16. package/dist/stories/Button.stories.d.ts +24 -0
  17. package/dist/stories/Button.stories.d.ts.map +1 -0
  18. package/dist/stories/Button.stories.js +39 -0
  19. package/dist/stories/Button.stories.js.map +1 -0
  20. package/dist/stories/Header.d.ts +13 -0
  21. package/dist/stories/Header.d.ts.map +1 -0
  22. package/dist/stories/Header.js +5 -0
  23. package/dist/stories/Header.js.map +1 -0
  24. package/dist/stories/Header.stories.d.ts +19 -0
  25. package/dist/stories/Header.stories.d.ts.map +1 -0
  26. package/dist/stories/Header.stories.js +25 -0
  27. package/dist/stories/Header.stories.js.map +1 -0
  28. package/dist/stories/Icons.d.ts +10 -0
  29. package/dist/stories/Icons.d.ts.map +1 -0
  30. package/dist/stories/Icons.js +7 -0
  31. package/dist/stories/Icons.js.map +1 -0
  32. package/dist/stories/Icons.stories.d.ts +21 -0
  33. package/dist/stories/Icons.stories.d.ts.map +1 -0
  34. package/dist/stories/Icons.stories.js +42 -0
  35. package/dist/stories/Icons.stories.js.map +1 -0
  36. package/dist/stories/Page.d.ts +4 -0
  37. package/dist/stories/Page.d.ts.map +1 -0
  38. package/dist/stories/Page.js +9 -0
  39. package/dist/stories/Page.js.map +1 -0
  40. package/dist/stories/Page.stories.d.ts +13 -0
  41. package/dist/stories/Page.stories.d.ts.map +1 -0
  42. package/dist/stories/Page.stories.js +32 -0
  43. package/dist/stories/Page.stories.js.map +1 -0
  44. package/package.json +13 -2
  45. package/src/icons/AddItemIcon.tsx +1 -2
  46. package/src/icons/GamesIcon.tsx +1 -18
  47. package/src/icons/RulerIcon.tsx +1 -1
  48. package/src/icons/TimeLapseIcon.tsx +1 -1
  49. package/src/icons/UserSettingsIcon.tsx +1 -1
  50. package/src/stories/Button.stories.ts +53 -0
  51. package/src/stories/Button.tsx +37 -0
  52. package/src/stories/Configure.mdx +364 -0
  53. package/src/stories/Header.stories.ts +33 -0
  54. package/src/stories/Header.tsx +56 -0
  55. package/src/stories/Icons.stories.ts +55 -0
  56. package/src/stories/Icons.tsx +166 -0
  57. package/src/stories/Page.stories.ts +32 -0
  58. package/src/stories/Page.tsx +73 -0
  59. package/src/stories/assets/accessibility.png +0 -0
  60. package/src/stories/assets/accessibility.svg +1 -0
  61. package/src/stories/assets/addon-library.png +0 -0
  62. package/src/stories/assets/assets.png +0 -0
  63. package/src/stories/assets/avif-test-image.avif +0 -0
  64. package/src/stories/assets/context.png +0 -0
  65. package/src/stories/assets/discord.svg +1 -0
  66. package/src/stories/assets/docs.png +0 -0
  67. package/src/stories/assets/figma-plugin.png +0 -0
  68. package/src/stories/assets/github.svg +1 -0
  69. package/src/stories/assets/share.png +0 -0
  70. package/src/stories/assets/styling.png +0 -0
  71. package/src/stories/assets/testing.png +0 -0
  72. package/src/stories/assets/theming.png +0 -0
  73. package/src/stories/assets/tutorials.svg +1 -0
  74. package/src/stories/assets/youtube.svg +1 -0
  75. package/src/stories/button.css +30 -0
  76. package/src/stories/header.css +32 -0
  77. package/src/stories/icons.css +44 -0
  78. package/src/stories/page.css +68 -0
@@ -1 +1 @@
1
- {"version":3,"file":"AddItemIcon.d.ts","sourceRoot":"","sources":["../../src/icons/AddItemIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA8BpC,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"AddItemIcon.d.ts","sourceRoot":"","sources":["../../src/icons/AddItemIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA6BpC,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { IconContainer } from '../icons/styles';
3
3
  const AddItemIcon = ({ className = '', size = 24, color = '#fffff0', fillColor = 'transparent', fillOpacity = 1, circleStrokeColor = '#fffff0', }) => {
4
- return (_jsx(IconContainer, { className: className, children: _jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { fill: fillColor, fillOpacity: fillOpacity, cx: "12", cy: "12", r: "10.5", stroke: circleStrokeColor, strokeWidth: '1.5px' }), _jsx("path", { d: "M10 18V16H8V14H10V12H12V14H14V16H12V18H10Z", fill: color }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 2C4.34315 2 3 3.34315 3 5V19C3 20.6569 4.34315 22 6 22H18C19.6569 22 21 20.6569 21 19V9C21 5.13401 17.866 2 14 2H6ZM6 4H13V9H19V19C19 19.5523 18.5523 20 18 20H6C5.44772 20 5 19.5523 5 19V5C5 4.44772 5.44772 4 6 4ZM15 4.10002C16.6113 4.4271 17.9413 5.52906 18.584 7H15V4.10002Z", fill: color })] }) }));
4
+ return (_jsx(IconContainer, { className: className, children: _jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { fill: fillColor, fillOpacity: fillOpacity, cx: "12", cy: "12", r: "10.5", stroke: circleStrokeColor, strokeWidth: '1.5px' }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.74 15.8V14.42H9.36V13.03h1.38V11.65h1.39v1.39h1.39v1.39H12.13v1.39H10.74ZM7.98 4.73c-1.15 0-2.08.93-2.08 2.08V16.5c0 1.15.93 2.08 2.08 2.08h8.31c1.15 0 2.08-.93 2.08-2.08V9.58c0-2.68-2.17-4.85-4.85-4.85H7.98Zm0 1.39h4.84V9.58h4.16V16.5c0 .39-.31.69-.69.69H7.98c-.39 0-.69-.31-.69-.69V6.8c0-.39.31-.69.69-.69Zm6.23.06c1.12.23 2.04.99 2.48 2.02H14.21V6.17Z", fill: color })] }) }));
5
5
  };
6
6
  export default AddItemIcon;
7
7
  //# sourceMappingURL=AddItemIcon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"AddItemIcon.js","sourceRoot":"","sources":["../../src/icons/AddItemIcon.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,WAAW,GAAwB,CAAC,EACxC,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,SAAS,EACjB,SAAS,GAAG,aAAa,EACzB,WAAW,GAAG,CAAC,EACf,iBAAiB,GAAG,SAAS,GAC9B,EAAE,EAAE;IACH,OAAO,CACL,KAAC,aAAa,IAAC,SAAS,EAAE,SAAS,YACjC,eAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,aACvG,iBACE,IAAI,EAAE,SAAS,EACf,WAAW,EAAE,WAAW,EACxB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,MAAM,EACR,MAAM,EAAE,iBAAiB,EACzB,WAAW,EAAE,OAAO,GACpB,EACF,eAAM,CAAC,EAAC,4CAA4C,EAAC,IAAI,EAAE,KAAK,GAAI,EACpE,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,yRAAyR,EAC3R,IAAI,EAAE,KAAK,GACX,IACE,GACQ,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"AddItemIcon.js","sourceRoot":"","sources":["../../src/icons/AddItemIcon.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,WAAW,GAAwB,CAAC,EACxC,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,SAAS,EACjB,SAAS,GAAG,aAAa,EACzB,WAAW,GAAG,CAAC,EACf,iBAAiB,GAAG,SAAS,GAC9B,EAAE,EAAE;IACH,OAAO,CACL,KAAC,aAAa,IAAC,SAAS,EAAE,SAAS,YACjC,eAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,aACvG,iBACE,IAAI,EAAE,SAAS,EACf,WAAW,EAAE,WAAW,EACxB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,MAAM,EACR,MAAM,EAAE,iBAAiB,EACzB,WAAW,EAAE,OAAO,GACpB,EACF,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,wWAAwW,EAC1W,IAAI,EAAE,KAAK,GACX,IACE,GACQ,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"GamesIcon.d.ts","sourceRoot":"","sources":["../../src/icons/GamesIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA8ClC,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"GamesIcon.d.ts","sourceRoot":"","sources":["../../src/icons/GamesIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA6BlC,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { IconContainer } from '../icons/styles';
3
3
  const GamesIcon = ({ className = '', size = 24, color = '#fffff0', fillColor = 'transparent', fillOpacity = 1, circleStrokeColor = '#fffff0', }) => {
4
- return (_jsx(IconContainer, { className: className, children: _jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { fill: fillColor, fillOpacity: fillOpacity, cx: "12", cy: "12", r: "10.5", stroke: circleStrokeColor, strokeWidth: '1.5px' }), _jsx("path", { d: "M13.83 10.91c.27.27.27.71 0 .98-.27.28-.72.28-.99 0-.27-.27-.27-.71 0-.98.27-.28.72-.28.99 0Z", fill: color }), _jsx("path", { d: "M14.32 9.42c.28-.27.72-.27.99 0 .28.27.28.72 0 .99-.27.27-.71.27-.99 0-.27-.27-.27-.72 0-.99Z", fill: color }), _jsx("path", { d: "M16.8 10.91c.27.27.27.71 0 .98-.27.28-.72.28-.99 0-.27-.27-.27-.71 0-.98.27-.28.72-.28.99 0Z", fill: color }), _jsx("path", { d: "M14.32 12.39c.28-.27.72-.27.99 0 .28.27.28.72 0 .99-.27.27-.71.27-.99 0-.27-.27-.27-.72 0-.99Z", fill: color }), _jsx("path", { d: "M7.2 12.1H5.8V10.7H7.2V9.3H8.6v1.4H10v1.4H8.6v1.4H7.2V12.1Z", fill: color }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.4 7C5.69 7 3.5 9.19 3.5 11.9c0 2.71 2.19 4.9 4.9 4.9h7c2.71 0 4.9-2.19 4.9-4.9 0-2.71-2.19-4.9-4.9-4.9h-7Zm7 1.4h-7c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5h7c1.93 0 3.5-1.57 3.5-3.5s-1.57-3.5-3.5-3.5Z", fill: color })] }) }));
4
+ return (_jsx(IconContainer, { className: className, children: _jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { fill: fillColor, fillOpacity: fillOpacity, cx: "12", cy: "12", r: "10.5", stroke: circleStrokeColor, strokeWidth: '1.5px' }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.4 8.4c1.93 0 3.5 1.57 3.5 3.5s-1.57 3.5-3.5 3.5h-7c-1.93 0-3.5-1.57-3.5-3.5S6.47 8.4 8.4 8.4h7ZM8.4 7h7c2.71 0 4.9 2.19 4.9 4.9 0 2.71-2.19 4.9-4.9 4.9h-7c-2.71 0-4.9-2.19-4.9-4.9C3.5 9.19 5.69 7 8.4 7Zm5.38 4.2c.18 0 .36.07.5.21.27.27.27.71 0 .98-.27.28-.72.28-.99 0-.27-.27-.27-.71 0-.98.14-.14.32-.21.5-.21Zm1.49-1.48c.18 0 .35.06.49.2.28.27.28.72 0 .99-.27.27-.71.27-.99 0-.27-.27-.27-.72 0-.99.14-.13.32-.2.5-.2Zm1.49 1.48c.18 0 .36.07.5.21.27.27.27.71 0 .98-.27.28-.72.28-.99 0-.27-.27-.27-.71 0-.98.14-.14.32-.21.5-.21Zm-1.51 1.49c.19-.01.38.06.52.2.28.27.28.72 0 .99-.27.27-.71.27-.99 0-.27-.27-.27-.72 0-.99.14-.12.3-.19.47-.2ZM7.66 13.94h1.4v-1.4h1.4v-1.4H9.06V9.74H7.66v1.4H6.26v1.4h1.4Z", fill: color })] }) }));
5
5
  };
6
6
  export default GamesIcon;
7
7
  //# sourceMappingURL=GamesIcon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"GamesIcon.js","sourceRoot":"","sources":["../../src/icons/GamesIcon.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,SAAS,GAAwB,CAAC,EACtC,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,SAAS,EACjB,SAAS,GAAG,aAAa,EACzB,WAAW,GAAG,CAAC,EACf,iBAAiB,GAAG,SAAS,GAC9B,EAAE,EAAE;IACH,OAAO,CACL,KAAC,aAAa,IAAC,SAAS,EAAE,SAAS,YACjC,eAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,aACvG,iBACE,IAAI,EAAE,SAAS,EACf,WAAW,EAAE,WAAW,EACxB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,MAAM,EACR,MAAM,EAAE,iBAAiB,EACzB,WAAW,EAAE,OAAO,GACpB,EACF,eACE,CAAC,EAAC,+FAA+F,EACjG,IAAI,EAAE,KAAK,GACX,EACF,eACE,CAAC,EAAC,+FAA+F,EACjG,IAAI,EAAE,KAAK,GACX,EACF,eACE,CAAC,EAAC,8FAA8F,EAChG,IAAI,EAAE,KAAK,GACX,EACF,eACE,CAAC,EAAC,gGAAgG,EAClG,IAAI,EAAE,KAAK,GACX,EACF,eAAM,CAAC,EAAC,6DAA6D,EAAC,IAAI,EAAE,KAAK,GAAI,EACrF,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,+MAA+M,EACjN,IAAI,EAAE,KAAK,GACX,IACE,GACQ,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"GamesIcon.js","sourceRoot":"","sources":["../../src/icons/GamesIcon.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,SAAS,GAAwB,CAAC,EACtC,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,SAAS,EACjB,SAAS,GAAG,aAAa,EACzB,WAAW,GAAG,CAAC,EACf,iBAAiB,GAAG,SAAS,GAC9B,EAAE,EAAE;IACH,OAAO,CACL,KAAC,aAAa,IAAC,SAAS,EAAE,SAAS,YACjC,eAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,aACvG,iBACE,IAAI,EAAE,SAAS,EACf,WAAW,EAAE,WAAW,EACxB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,MAAM,EACR,MAAM,EAAE,iBAAiB,EACzB,WAAW,EAAE,OAAO,GACpB,EACF,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,gsBAAgsB,EAClsB,IAAI,EAAE,KAAK,GACX,IACE,GACQ,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { IconContainer } from '../icons/styles';
3
3
  const RulerIcon = ({ className = '', size = 24, color = '#fffff0', fillColor = 'transparent', fillOpacity = 1, circleStrokeColor = '#fffff0', }) => {
4
- return (_jsx(IconContainer, { className: className, children: _jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { fill: fillColor, fillOpacity: fillOpacity, cx: "12", cy: "12", r: "10.5", stroke: circleStrokeColor, strokeWidth: '1.5px' }), _jsx("path", { d: "M9.3 8.6v2.1c0 .4.3.7.7.7s.7-.3.7-.7V8.6h1.4v3.5c0 .4.3.7.7.7s.7-.3.7-.7V8.6h1.4v2.1c0 .4.3.7.7.7s.7-.3.7-.7V8.6h1.4c.4 0 .7.3.7.7v4.9c0 .4-.3.7-.7.7H5.1c-.4 0-.7-.3-.7-.7V9.3c0-.4.3-.7.7-.7H6.5v3.5c0 .4.3.7.7.7s.7-.3.7-.7V8.6H9.3ZM5.1 7.2H17.7c1.2 0 2.1.9 2.1 2.1v4.9c0 1.2-.9 2.1-2.1 2.1H5.1c-1.2 0-2.1-.9-2.1-2.1V9.3c0-1.2.9-2.1 2.1-2.1Z", fillRule: "evenodd", clipRule: "evenodd", fill: color })] }) }));
4
+ return (_jsx(IconContainer, { className: className, children: _jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { fill: fillColor, fillOpacity: fillOpacity, cx: "12", cy: "12", r: "10.5", stroke: circleStrokeColor, strokeWidth: '1.5px' }), _jsx("path", { d: "M9.7 8.6v2.1c0 .4.3.7.7.7s.7-.3.7-.7V8.6h1.4v3.5c0 .4.3.7.7.7s.7-.3.7-.7V8.6h1.4v2.1c0 .4.3.7.7.7s.7-.3.7-.7V8.6h1.4c.4 0 .7.3.7.7v4.9c0 .4-.3.7-.7.7H5.5c-.4 0-.7-.3-.7-.7V9.3c0-.4.3-.7.7-.7H6.9v3.5c0 .4.3.7.7.7s.7-.3.7-.7V8.6H9.7ZM5.5 7.2H18.1c1.2 0 2.1.9 2.1 2.1v4.9c0 1.2-.9 2.1-2.1 2.1H5.5c-1.2 0-2.1-.9-2.1-2.1V9.3c0-1.2.9-2.1 2.1-2.1Z", fillRule: "evenodd", clipRule: "evenodd", fill: color })] }) }));
5
5
  };
6
6
  export default RulerIcon;
7
7
  //# sourceMappingURL=RulerIcon.js.map
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { IconContainer } from '../icons/styles';
3
3
  const TimeLapseIcon = ({ className = '', size = 24, color = '#fffff0', fillColor = 'transparent', fillOpacity = 1, circleStrokeColor = '#fffff0', }) => {
4
- return (_jsx(IconContainer, { className: className, children: _jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { fill: fillColor, fillOpacity: fillOpacity, cx: "12", cy: "12", r: "10.5", stroke: circleStrokeColor, strokeWidth: '1.5px' }), _jsx("path", { d: "M11.9 16.1c-1.2 0-2.2-.5-3-1.2l3-3V7.7c2.3 0 4.2 1.9 4.2 4.2 0 2.3-1.9 4.2-4.2 4.2Zm6.6-4.2c0 3.6-3 6.6-6.6 6.6s-6.6-3-6.6-6.6 3-6.6 6.6-6.6 6.6 3 6.6 6.6Zm-1.2 0c0 3-2.4 5.4-5.4 5.4s-5.4-2.4-5.4-5.4 2.4-5.4 5.4-5.4 5.4 2.4 5.4 5.4Z", fillRule: "evenodd", clipRule: "evenodd", fill: color })] }) }));
4
+ return (_jsx(IconContainer, { className: className, children: _jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { fill: fillColor, fillOpacity: fillOpacity, cx: "12", cy: "12", r: "10.5", stroke: circleStrokeColor, strokeWidth: '1.5px' }), _jsx("path", { d: "M12.03 17.33c-1.51 0-2.77-.63-3.78-1.51l3.78-3.78V6.74c2.9 0 5.29 2.39 5.29 5.29s-2.39 5.29-5.29 5.29Zm8.32-5.3c0 4.54-3.78 8.32-8.32 8.32s-8.32-3.78-8.32-8.32 3.78-8.32 8.32-8.32 8.32 3.79 8.32 8.32Zm-1.51 0c0 3.78-3.02 6.8-6.8 6.8s-6.81-3.02-6.81-6.8 3.02-6.8 6.8-6.8 6.8 3.02 6.8 6.8Z", fillRule: "evenodd", clipRule: "evenodd", fill: color })] }) }));
5
5
  };
6
6
  export default TimeLapseIcon;
7
7
  //# sourceMappingURL=TimeLapseIcon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TimeLapseIcon.js","sourceRoot":"","sources":["../../src/icons/TimeLapseIcon.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,aAAa,GAAwB,CAAC,EAC1C,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,SAAS,EACjB,SAAS,GAAG,aAAa,EACzB,WAAW,GAAG,CAAC,EACf,iBAAiB,GAAG,SAAS,GAC9B,EAAE,EAAE;IACH,OAAO,CACL,KAAC,aAAa,IAAC,SAAS,EAAE,SAAS,YACjC,eAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,aACvG,iBACE,IAAI,EAAE,SAAS,EACf,WAAW,EAAE,WAAW,EACxB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,MAAM,EACR,MAAM,EAAE,iBAAiB,EACzB,WAAW,EAAE,OAAO,GACpB,EACF,eACE,CAAC,EAAC,0OAA0O,EAC5O,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,IAAI,EAAE,KAAK,GACX,IACE,GACQ,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"TimeLapseIcon.js","sourceRoot":"","sources":["../../src/icons/TimeLapseIcon.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,aAAa,GAAwB,CAAC,EAC1C,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,SAAS,EACjB,SAAS,GAAG,aAAa,EACzB,WAAW,GAAG,CAAC,EACf,iBAAiB,GAAG,SAAS,GAC9B,EAAE,EAAE;IACH,OAAO,CACL,KAAC,aAAa,IAAC,SAAS,EAAE,SAAS,YACjC,eAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,aACvG,iBACE,IAAI,EAAE,SAAS,EACf,WAAW,EAAE,WAAW,EACxB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,MAAM,EACR,MAAM,EAAE,iBAAiB,EACzB,WAAW,EAAE,OAAO,GACpB,EACF,eACE,CAAC,EAAC,iSAAiS,EACnS,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,IAAI,EAAE,KAAK,GACX,IACE,GACQ,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { IconContainer } from '../icons/styles';
3
3
  const UserSettingsIcon = ({ className = '', size = 24, color = '#fffff0', fillColor = 'transparent', fillOpacity = 1, circleStrokeColor = '#fffff0', }) => {
4
- return (_jsx(IconContainer, { className: className, children: _jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { fill: fillColor, fillOpacity: fillOpacity, cx: "12", cy: "12", r: "10.5", stroke: circleStrokeColor, strokeWidth: '1.5px' }), _jsx("path", { d: "M9.7 11.6c-.4 0-.8.2-.8.6-.1 1.5 0 3 0 4.5 1.1.6 2.3 1.2 3.4 1.7 1.1-.5 2.2-1.1 3.2-1.7 0-1.3 0-2.6 0-3.9 0-.4 0-1.1-.7-1.2-1.6 0-3.4 0-5.1 0Zm2.4-5.9C10.8 5.6 10 7.1 10.7 8s2.3.8 2.8-.2c.7-1-.2-2.3-1.4-2.3Zm.1-1.6c1.6 0 3 1.1 3.2 2.5.4 1.6-1.1 3.4-2.9 3.4.6 0 1.3 0 1.9 0 1.3-.1 2.6.7 2.7 1.9 0 1.3 0 2.6 0 3.9.3-.2.5-.3.8-.5 0-1.7 0-3.5 0-5.3.5 0 1.1 0 1.6 0 0 1.9 0 4 0 6-2.5 1.3-5 2.5-7.4 3.8-2.5-1.2-4.9-2.5-7.4-3.8 0-1.9 0-4 0-6 .5 0 1.1 0 1.7 0 0 1.7 0 3.5 0 5.3.3.1.5.3.8.5 0-1.1 0-2.2 0-3.2-.1-1.1.7-2.3 1.9-2.5.9-.1 1.8-.1 2.8-.1-1.6-.2-2.9-1.4-3-2.7-.2-1.7 1.4-3.4 3.3-3.3Z", fill: color })] }) }));
4
+ return (_jsx(IconContainer, { className: className, children: _jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "transparent", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { fill: fillColor, fillOpacity: fillOpacity, cx: "12", cy: "12", r: "10.5", stroke: circleStrokeColor, strokeWidth: '1.5px' }), _jsx("path", { d: "m9.7 11.6c-.4 0-.8.2-.8.6-.1 1.5 0 3 0 4.5 1.1.6 2.3 1.2 3.4 1.7 1.1-.5 2.2-1.1 3.2-1.7v-3.9c0-.4 0-1.1-.7-1.2zm2.4-6.13C10.8 5.37 10 7.1 10.7 8s2.41.87 2.91-.13c.7-1-.06-2.44-1.51-2.4zm.1-1.5c1.6 0 3 1.23 3.2 2.63.4 1.6-1.1 3.4-2.9 3.4h1.9c1.3-.1 2.6.7 2.7 1.9v3.9c.3-.2.5-.3.8-.5V10h1.6v6c-2.46 1.5-4.8 2.78-7.2 4.2-2.48-1.44-5.14-2.78-7.6-4.2v-6h1.7v5.3c.3.1.5.3.8.5V12.6c-.1-1.1.7-2.3 1.9-2.5.9-.1 1.8-.1 2.8-.1-1.6-.2-2.9-1.4-3-2.7-.2-1.7 1.4-3.43 3.3-3.33Z", fill: color })] }) }));
5
5
  };
6
6
  export default UserSettingsIcon;
7
7
  //# sourceMappingURL=UserSettingsIcon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"UserSettingsIcon.js","sourceRoot":"","sources":["../../src/icons/UserSettingsIcon.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,gBAAgB,GAAwB,CAAC,EAC7C,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,SAAS,EACjB,SAAS,GAAG,aAAa,EACzB,WAAW,GAAG,CAAC,EACf,iBAAiB,GAAG,SAAS,GAC9B,EAAE,EAAE;IACH,OAAO,CACL,KAAC,aAAa,IAAC,SAAS,EAAE,SAAS,YACjC,eAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,aACvG,iBACE,IAAI,EAAE,SAAS,EACf,WAAW,EAAE,WAAW,EACxB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,MAAM,EACR,MAAM,EAAE,iBAAiB,EACzB,WAAW,EAAE,OAAO,GACpB,EACF,eACE,CAAC,EAAC,0kBAA0kB,EAC5kB,IAAI,EAAE,KAAK,GACX,IACE,GACQ,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"UserSettingsIcon.js","sourceRoot":"","sources":["../../src/icons/UserSettingsIcon.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,gBAAgB,GAAwB,CAAC,EAC7C,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,SAAS,EACjB,SAAS,GAAG,aAAa,EACzB,WAAW,GAAG,CAAC,EACf,iBAAiB,GAAG,SAAS,GAC9B,EAAE,EAAE;IACH,OAAO,CACL,KAAC,aAAa,IAAC,SAAS,EAAE,SAAS,YACjC,eAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,aACvG,iBACE,IAAI,EAAE,SAAS,EACf,WAAW,EAAE,WAAW,EACxB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,MAAM,EACR,MAAM,EAAE,iBAAiB,EACzB,WAAW,EAAE,OAAO,GACpB,EACF,eACE,CAAC,EAAC,gdAAgd,EACld,IAAI,EAAE,KAAK,GACX,IACE,GACQ,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
@@ -0,0 +1,10 @@
1
+ import './button.css';
2
+ export interface ButtonProps {
3
+ primary?: boolean;
4
+ backgroundColor?: string;
5
+ size?: 'small' | 'medium' | 'large';
6
+ label: string;
7
+ onClick?: () => void;
8
+ }
9
+ export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
10
+ //# sourceMappingURL=Button.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/stories/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAW;IAE1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IAEpC,KAAK,EAAE,MAAM,CAAC;IAEd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAGD,eAAO,MAAM,MAAM,GAAI,qDAMpB,WAAW,4CAYb,CAAC"}
@@ -0,0 +1,19 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ import './button.css';
14
+ export const Button = (_a) => {
15
+ var { primary = false, size = 'medium', backgroundColor, label } = _a, props = __rest(_a, ["primary", "size", "backgroundColor", "label"]);
16
+ const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
17
+ return (_jsx("button", Object.assign({ type: "button", className: ['storybook-button', `storybook-button--${size}`, mode].join(' '), style: { backgroundColor } }, props, { children: label })));
18
+ };
19
+ //# sourceMappingURL=Button.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/stories/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAEA,OAAO,cAAc,CAAC;AAgBtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAMT,EAAE,EAAE;QANK,EACrB,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,QAAQ,EACf,eAAe,EACf,KAAK,OAEO,EADT,KAAK,cALa,+CAMtB,CADS;IAER,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,6BAA6B,CAAC;IACnF,OAAO,CACL,+BACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,kBAAkB,EAAE,qBAAqB,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC5E,KAAK,EAAE,EAAE,eAAe,EAAE,IACtB,KAAK,cAER,KAAK,IACC,CACV,CAAC;AACJ,CAAC,CAAC"}
@@ -0,0 +1,24 @@
1
+ import type { StoryObj } from '@storybook/react';
2
+ declare const meta: {
3
+ title: string;
4
+ component: ({ primary, size, backgroundColor, label, ...props }: import("./Button").ButtonProps) => import("react/jsx-runtime").JSX.Element;
5
+ parameters: {
6
+ layout: string;
7
+ };
8
+ tags: string[];
9
+ argTypes: {
10
+ backgroundColor: {
11
+ control: "color";
12
+ };
13
+ };
14
+ args: {
15
+ onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
16
+ };
17
+ };
18
+ export default meta;
19
+ type Story = StoryObj<typeof meta>;
20
+ export declare const Primary: Story;
21
+ export declare const Secondary: Story;
22
+ export declare const Large: Story;
23
+ export declare const Small: Story;
24
+ //# sourceMappingURL=Button.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAMvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;CAeqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC"}
@@ -0,0 +1,39 @@
1
+ import { fn } from '@storybook/test';
2
+ import { Button } from './Button';
3
+ const meta = {
4
+ title: 'Example/Button',
5
+ component: Button,
6
+ parameters: {
7
+ layout: 'centered',
8
+ },
9
+ tags: ['autodocs'],
10
+ argTypes: {
11
+ backgroundColor: { control: 'color' },
12
+ },
13
+ args: { onClick: fn() },
14
+ };
15
+ export default meta;
16
+ export const Primary = {
17
+ args: {
18
+ primary: true,
19
+ label: 'Button',
20
+ },
21
+ };
22
+ export const Secondary = {
23
+ args: {
24
+ label: 'Button',
25
+ },
26
+ };
27
+ export const Large = {
28
+ args: {
29
+ size: 'large',
30
+ label: 'Button',
31
+ },
32
+ };
33
+ export const Small = {
34
+ args: {
35
+ size: 'small',
36
+ label: 'Button',
37
+ },
38
+ };
39
+ //# sourceMappingURL=Button.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/stories/Button.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE;QAEV,MAAM,EAAE,UAAU;KACnB;IAED,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,QAAQ,EAAE;QACR,eAAe,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KACtC;IAED,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE;CACM,CAAC;AAEhC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC"}
@@ -0,0 +1,13 @@
1
+ import './header.css';
2
+ type User = {
3
+ name: string;
4
+ };
5
+ export interface HeaderProps {
6
+ user?: User;
7
+ onLogin?: () => void;
8
+ onLogout?: () => void;
9
+ onCreateAccount?: () => void;
10
+ }
11
+ export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
12
+ export {};
13
+ //# sourceMappingURL=Header.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/stories/Header.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC;AAEtB,KAAK,IAAI,GAAG;IACV,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,MAAM,GAAI,8CAA8C,WAAW,4CAuC/E,CAAC"}
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import { Button } from './Button';
3
+ import './header.css';
4
+ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (_jsx("header", { children: _jsxs("div", { className: "storybook-header", children: [_jsxs("div", { children: [_jsx("svg", { width: "32", height: "32", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: _jsxs("g", { fill: "none", fillRule: "evenodd", children: [_jsx("path", { d: "M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z", fill: "#FFF" }), _jsx("path", { d: "M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z", fill: "#555AB9" }), _jsx("path", { d: "M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z", fill: "#91BAF8" })] }) }), _jsx("h1", { children: "Acme" })] }), _jsx("div", { children: user ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "welcome", children: ["Welcome, ", _jsx("b", { children: user.name }), "!"] }), _jsx(Button, { size: "small", onClick: onLogout, label: "Log out" })] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", onClick: onLogin, label: "Log in" }), _jsx(Button, { primary: true, size: "small", onClick: onCreateAccount, label: "Sign up" })] })) })] }) }));
5
+ //# sourceMappingURL=Header.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/stories/Header.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,cAAc,CAAC;AAatB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAe,EAAE,EAAE,CAAC,CACnF,2BACE,eAAK,SAAS,EAAC,kBAAkB,aAC/B,0BACE,cAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,aAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,aAC/B,eACE,CAAC,EAAC,mFAAmF,EACrF,IAAI,EAAC,MAAM,GACX,EACF,eACE,CAAC,EAAC,kEAAkE,EACpE,IAAI,EAAC,SAAS,GACd,EACF,eACE,CAAC,EAAC,gEAAgE,EAClE,IAAI,EAAC,SAAS,GACd,IACA,GACA,EACN,gCAAa,IACT,EACN,wBACG,IAAI,CAAC,CAAC,CAAC,CACN,8BACE,gBAAM,SAAS,EAAC,SAAS,0BACd,sBAAI,IAAI,CAAC,IAAI,GAAK,SACtB,EACP,KAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAC,SAAS,GAAG,IACzD,CACJ,CAAC,CAAC,CAAC,CACF,8BACE,KAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,QAAQ,GAAG,EACxD,KAAC,MAAM,IAAC,OAAO,QAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,eAAe,EAAE,KAAK,EAAC,SAAS,GAAG,IACxE,CACJ,GACG,IACF,GACC,CACV,CAAC"}
@@ -0,0 +1,19 @@
1
+ import type { StoryObj } from '@storybook/react';
2
+ declare const meta: {
3
+ title: string;
4
+ component: ({ user, onLogin, onLogout, onCreateAccount }: import("./Header").HeaderProps) => import("react/jsx-runtime").JSX.Element;
5
+ tags: string[];
6
+ parameters: {
7
+ layout: string;
8
+ };
9
+ args: {
10
+ onLogin: import("@vitest/spy").Mock<(...args: any[]) => any>;
11
+ onLogout: import("@vitest/spy").Mock<(...args: any[]) => any>;
12
+ onCreateAccount: import("@vitest/spy").Mock<(...args: any[]) => any>;
13
+ };
14
+ };
15
+ export default meta;
16
+ type Story = StoryObj<typeof meta>;
17
+ export declare const LoggedIn: Story;
18
+ export declare const LoggedOut: Story;
19
+ //# sourceMappingURL=Header.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Header.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Header.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,QAAA,MAAM,IAAI;;;;;;;;;;;;CAcqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAU,CAAC"}
@@ -0,0 +1,25 @@
1
+ import { fn } from '@storybook/test';
2
+ import { Header } from './Header';
3
+ const meta = {
4
+ title: 'Example/Header',
5
+ component: Header,
6
+ tags: ['autodocs'],
7
+ parameters: {
8
+ layout: 'fullscreen',
9
+ },
10
+ args: {
11
+ onLogin: fn(),
12
+ onLogout: fn(),
13
+ onCreateAccount: fn(),
14
+ },
15
+ };
16
+ export default meta;
17
+ export const LoggedIn = {
18
+ args: {
19
+ user: {
20
+ name: 'Jane Doe',
21
+ },
22
+ },
23
+ };
24
+ export const LoggedOut = {};
25
+ //# sourceMappingURL=Header.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Header.stories.js","sourceRoot":"","sources":["../../src/stories/Header.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,MAAM;IAEjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QAEV,MAAM,EAAE,YAAY;KACrB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,EAAE,EAAE;QACb,QAAQ,EAAE,EAAE,EAAE;QACd,eAAe,EAAE,EAAE,EAAE;KACtB;CAC4B,CAAC;AAEhC,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,IAAI,EAAE;YACJ,IAAI,EAAE,UAAU;SACjB;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU,EAAE,CAAC"}
@@ -0,0 +1,10 @@
1
+ import './icons.css';
2
+ export interface IconsProps {
3
+ color?: string;
4
+ size?: number;
5
+ fillColor?: string;
6
+ fillOpacity: number;
7
+ circleStrokeColor?: string;
8
+ }
9
+ export declare const Icons: ({ color, size, fillColor, fillOpacity, circleStrokeColor, }: IconsProps) => import("react/jsx-runtime").JSX.Element;
10
+ //# sourceMappingURL=Icons.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Icons.d.ts","sourceRoot":"","sources":["../../src/stories/Icons.tsx"],"names":[],"mappings":"AAmBA,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,UAAU;IAEzB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,WAAW,EAAE,MAAM,CAAC;IAEpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAGD,eAAO,MAAM,KAAK,GAAI,6DAMnB,UAAU,4CA4HZ,CAAC"}
@@ -0,0 +1,7 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { AddItemIcon, AddUserIcon, CheckIcon, DeleteIcon, EyeIcon, EyeSlashIcon, GamesIcon, GearUserIcon, HexagonIcon, HomeIcon, LockIcon, PenIcon, RulerIcon, SaveIcon, TimeLapseIcon, UnlockIcon, UserSettingsIcon, } from '../icons';
3
+ import './icons.css';
4
+ export const Icons = ({ color = '#000000', size = 24, fillColor = 'transparent', fillOpacity = 1, circleStrokeColor = 'transparent', }) => {
5
+ return (_jsxs("div", { className: "storybook-icon-wrapper", children: [_jsx(AddItemIcon, { size: size, color: color, fillColor: fillColor, fillOpacity: fillOpacity, circleStrokeColor: circleStrokeColor }), _jsx(AddUserIcon, { size: size, color: color, fillColor: fillColor, fillOpacity: fillOpacity, circleStrokeColor: circleStrokeColor }), _jsx(CheckIcon, { size: size, color: color, fillColor: fillColor, fillOpacity: fillOpacity, circleStrokeColor: circleStrokeColor }), _jsx(DeleteIcon, { size: size, color: color, fillColor: fillColor, fillOpacity: fillOpacity, circleStrokeColor: circleStrokeColor }), _jsx(EyeIcon, { size: size, color: color, fillColor: fillColor, fillOpacity: fillOpacity, circleStrokeColor: circleStrokeColor }), _jsx(EyeSlashIcon, { size: size, color: color, fillColor: fillColor, fillOpacity: fillOpacity, circleStrokeColor: circleStrokeColor }), _jsx(GamesIcon, { size: size, color: color, fillColor: fillColor, fillOpacity: fillOpacity, circleStrokeColor: circleStrokeColor }), _jsx(GearUserIcon, { size: size, color: color, fillColor: fillColor, fillOpacity: fillOpacity, circleStrokeColor: circleStrokeColor }), _jsx(HexagonIcon, { size: size, color: color, fillColor: fillColor, fillOpacity: fillOpacity, circleStrokeColor: circleStrokeColor }), _jsx(HomeIcon, { size: size, color: color, fillColor: fillColor, fillOpacity: fillOpacity, circleStrokeColor: circleStrokeColor }), _jsx(LockIcon, { size: size, color: color, fillColor: fillColor, fillOpacity: fillOpacity, circleStrokeColor: circleStrokeColor }), _jsx(PenIcon, { size: size, color: color, fillColor: fillColor, fillOpacity: fillOpacity, circleStrokeColor: circleStrokeColor }), _jsx(RulerIcon, { size: size, color: color, fillColor: fillColor, fillOpacity: fillOpacity, circleStrokeColor: circleStrokeColor }), _jsx(SaveIcon, { size: size, color: color, fillColor: fillColor, fillOpacity: fillOpacity, circleStrokeColor: circleStrokeColor }), _jsx(TimeLapseIcon, { size: size, color: color, fillColor: fillColor, fillOpacity: fillOpacity, circleStrokeColor: circleStrokeColor }), _jsx(UnlockIcon, { size: size, color: color, fillColor: fillColor, fillOpacity: fillOpacity, circleStrokeColor: circleStrokeColor }), _jsx(UserSettingsIcon, { size: size, color: color, fillColor: fillColor, fillOpacity: fillOpacity, circleStrokeColor: circleStrokeColor })] }));
6
+ };
7
+ //# sourceMappingURL=Icons.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Icons.js","sourceRoot":"","sources":["../../src/stories/Icons.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,21 @@
1
+ import type { StoryObj } from '@storybook/react';
2
+ declare const meta: {
3
+ title: string;
4
+ component: ({ color, size, fillColor, fillOpacity, circleStrokeColor, }: import("./Icons").IconsProps) => import("react/jsx-runtime").JSX.Element;
5
+ parameters: {
6
+ layout: string;
7
+ };
8
+ tags: string[];
9
+ argTypes: {
10
+ color: {
11
+ control: "color";
12
+ };
13
+ };
14
+ args: {};
15
+ };
16
+ export default meta;
17
+ type Story = StoryObj<typeof meta>;
18
+ export declare const Default: Story;
19
+ export declare const Medium: Story;
20
+ export declare const Large: Story;
21
+ //# sourceMappingURL=Icons.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Icons.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Icons.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;CAeoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAQnB,CAAC"}
@@ -0,0 +1,42 @@
1
+ import { Icons } from './Icons';
2
+ const meta = {
3
+ title: 'Icons',
4
+ component: Icons,
5
+ parameters: {
6
+ layout: 'centered',
7
+ },
8
+ tags: ['autodocs'],
9
+ argTypes: {
10
+ color: { control: 'color' },
11
+ },
12
+ args: {},
13
+ };
14
+ export default meta;
15
+ export const Default = {
16
+ args: {
17
+ color: `#000000`,
18
+ size: 24,
19
+ fillColor: 'transparent',
20
+ fillOpacity: 1,
21
+ circleStrokeColor: 'transparent',
22
+ },
23
+ };
24
+ export const Medium = {
25
+ args: {
26
+ color: `#000000`,
27
+ size: 32,
28
+ fillColor: 'transparent',
29
+ fillOpacity: 1,
30
+ circleStrokeColor: 'transparent',
31
+ },
32
+ };
33
+ export const Large = {
34
+ args: {
35
+ color: `#000000`,
36
+ size: 48,
37
+ fillColor: 'transparent',
38
+ fillOpacity: 1,
39
+ circleStrokeColor: 'transparent',
40
+ },
41
+ };
42
+ //# sourceMappingURL=Icons.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Icons.stories.js","sourceRoot":"","sources":["../../src/stories/Icons.stories.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE;QAEV,MAAM,EAAE,UAAU;KACnB;IAED,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAC5B;IAED,IAAI,EAAE,EAAE;CACoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,EAAE;QACR,SAAS,EAAE,aAAa;QACxB,WAAW,EAAE,CAAC;QACd,iBAAiB,EAAE,aAAa;KACjC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,EAAE;QACR,SAAS,EAAE,aAAa;QACxB,WAAW,EAAE,CAAC;QACd,iBAAiB,EAAE,aAAa;KACjC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,EAAE;QACR,SAAS,EAAE,aAAa;QACxB,WAAW,EAAE,CAAC;QACd,iBAAiB,EAAE,aAAa;KACjC;CACF,CAAC"}
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import './page.css';
3
+ export declare const Page: React.FC;
4
+ //# sourceMappingURL=Page.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../src/stories/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,YAAY,CAAC;AAMpB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EA+DxB,CAAC"}
@@ -0,0 +1,9 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import React from 'react';
3
+ import { Header } from './Header';
4
+ import './page.css';
5
+ export const Page = () => {
6
+ const [user, setUser] = React.useState();
7
+ return (_jsxs("article", { children: [_jsx(Header, { user: user, onLogin: () => setUser({ name: 'Jane Doe' }), onLogout: () => setUser(undefined), onCreateAccount: () => setUser({ name: 'Jane Doe' }) }), _jsxs("section", { className: "storybook-page", children: [_jsx("h2", { children: "Pages in Storybook" }), _jsxs("p", { children: ["We recommend building UIs with a", ' ', _jsx("a", { href: "https://componentdriven.org", target: "_blank", rel: "noopener noreferrer", children: _jsx("strong", { children: "component-driven" }) }), ' ', "process starting with atomic components and ending with pages."] }), _jsx("p", { children: "Render pages with mock data. This makes it easy to build and review page states without needing to navigate to them in your app. Here are some handy patterns for managing page data in Storybook:" }), _jsxs("ul", { children: [_jsx("li", { children: "Use a higher-level connected component. Storybook helps you compose such data from the \"args\" of child component stories" }), _jsx("li", { children: "Assemble data in the page component from your services. You can mock these services out using Storybook." })] }), _jsxs("p", { children: ["Get a guided tutorial on component-driven development at", ' ', _jsx("a", { href: "https://storybook.js.org/tutorials/", target: "_blank", rel: "noopener noreferrer", children: "Storybook tutorials" }), ". Read more in the", ' ', _jsx("a", { href: "https://storybook.js.org/docs", target: "_blank", rel: "noopener noreferrer", children: "docs" }), "."] }), _jsxs("div", { className: "tip-wrapper", children: [_jsx("span", { className: "tip", children: "Tip" }), " Adjust the width of the canvas with the", ' ', _jsx("svg", { width: "10", height: "10", viewBox: "0 0 12 12", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { fill: "none", fillRule: "evenodd", children: _jsx("path", { d: "M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z", id: "a", fill: "#999" }) }) }), "Viewports addon in the toolbar"] })] })] }));
8
+ };
9
+ //# sourceMappingURL=Page.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Page.js","sourceRoot":"","sources":["../../src/stories/Page.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,YAAY,CAAC;AAMpB,MAAM,CAAC,MAAM,IAAI,GAAa,GAAG,EAAE;IACjC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAQ,CAAC;IAE/C,OAAO,CACL,8BACE,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAC5C,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,EAClC,eAAe,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,GACpD,EAEF,mBAAS,SAAS,EAAC,gBAAgB,aACjC,8CAA2B,EAC3B,4DACmC,GAAG,EACpC,YAAG,IAAI,EAAC,6BAA6B,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,YAC7E,gDAAiC,GAC/B,EAAC,GAAG,sEAEN,EACJ,6NAII,EACJ,yBACE,sJAGK,EACL,oIAGK,IACF,EACL,oFAC2D,GAAG,EAC5D,YAAG,IAAI,EAAC,qCAAqC,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,oCAEnF,wBACe,GAAG,EACtB,YAAG,IAAI,EAAC,+BAA+B,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,qBAE7E,SAEF,EACJ,eAAK,SAAS,EAAC,aAAa,aAC1B,eAAM,SAAS,EAAC,KAAK,oBAAW,8CAAyC,GAAG,EAC5E,cAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,YAAG,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,YAC/B,eACE,CAAC,EAAC,sOAAsO,EACxO,EAAE,EAAC,GAAG,EACN,IAAI,EAAC,MAAM,GACX,GACA,GACA,sCAEF,IACE,IACF,CACX,CAAC;AACJ,CAAC,CAAC"}
@@ -0,0 +1,13 @@
1
+ import type { StoryObj } from '@storybook/react';
2
+ declare const meta: {
3
+ title: string;
4
+ component: import("react").FC<{}>;
5
+ parameters: {
6
+ layout: string;
7
+ };
8
+ };
9
+ export default meta;
10
+ type Story = StoryObj<typeof meta>;
11
+ export declare const LoggedOut: Story;
12
+ export declare const LoggedIn: Story;
13
+ //# sourceMappingURL=Page.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Page.stories.d.ts","sourceRoot":"","sources":["../../src/stories/Page.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,QAAA,MAAM,IAAI;;;;;;CAOmB,CAAC;AAE9B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,SAAS,EAAE,KAAU,CAAC;AAGnC,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC"}
@@ -0,0 +1,32 @@
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
10
+ import { expect, userEvent, within } from '@storybook/test';
11
+ import { Page } from './Page';
12
+ const meta = {
13
+ title: 'Example/Page',
14
+ component: Page,
15
+ parameters: {
16
+ layout: 'fullscreen',
17
+ },
18
+ };
19
+ export default meta;
20
+ export const LoggedOut = {};
21
+ export const LoggedIn = {
22
+ play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
23
+ const canvas = within(canvasElement);
24
+ const loginButton = canvas.getByRole('button', { name: /Log in/i });
25
+ yield expect(loginButton).toBeInTheDocument();
26
+ yield userEvent.click(loginButton);
27
+ yield expect(loginButton).not.toBeInTheDocument();
28
+ const logoutButton = canvas.getByRole('button', { name: /Log out/i });
29
+ yield expect(logoutButton).toBeInTheDocument();
30
+ }),
31
+ };
32
+ //# sourceMappingURL=Page.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Page.stories.js","sourceRoot":"","sources":["../../src/stories/Page.stories.ts"],"names":[],"mappings":";;;;;;;;;AACA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAE5D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QAEV,MAAM,EAAE,YAAY;KACrB;CAC0B,CAAC;AAE9B,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,SAAS,GAAU,EAAE,CAAC;AAGnC,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE,KAA0B,EAAE,4CAArB,EAAE,aAAa,EAAE;QAC5B,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;QACrC,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;QACpE,MAAM,MAAM,CAAC,WAAW,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC9C,MAAM,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACnC,MAAM,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;QAElD,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QACtE,MAAM,MAAM,CAAC,YAAY,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACjD,CAAC,CAAA;CACF,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@eleventheye/asui",
3
- "version": "1.0.24",
3
+ "version": "1.1.0",
4
4
  "private": false,
5
5
  "description": "AS UI React Library by eleventheye (another one!)",
6
6
  "keywords": [
@@ -47,10 +47,21 @@
47
47
  "prebuild": "npm run clean",
48
48
  "preversion": "npm run build",
49
49
  "test": "jest",
50
- "version": "npm publish"
50
+ "version": "npm publish",
51
+ "storybook": "storybook dev -p 6006",
52
+ "build-storybook": "storybook build"
51
53
  },
52
54
  "devDependencies": {
55
+ "@storybook/addon-essentials": "^8.6.12",
56
+ "@storybook/addon-interactions": "^8.6.12",
57
+ "@storybook/addon-onboarding": "^8.6.12",
58
+ "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
59
+ "@storybook/blocks": "^8.6.12",
60
+ "@storybook/react": "^8.6.12",
61
+ "@storybook/react-webpack5": "^8.6.12",
62
+ "@storybook/test": "^8.6.12",
53
63
  "@types/styled-components": "^5.1.34",
64
+ "storybook": "^8.6.12",
54
65
  "typescript": "^5.8.3"
55
66
  },
56
67
  "dependencies": {
@@ -22,11 +22,10 @@ const AddItemIcon: React.FC<IconProps> = ({
22
22
  stroke={circleStrokeColor}
23
23
  strokeWidth={'1.5px'}
24
24
  />
25
- <path d="M10 18V16H8V14H10V12H12V14H14V16H12V18H10Z" fill={color} />
26
25
  <path
27
26
  fillRule="evenodd"
28
27
  clipRule="evenodd"
29
- d="M6 2C4.34315 2 3 3.34315 3 5V19C3 20.6569 4.34315 22 6 22H18C19.6569 22 21 20.6569 21 19V9C21 5.13401 17.866 2 14 2H6ZM6 4H13V9H19V19C19 19.5523 18.5523 20 18 20H6C5.44772 20 5 19.5523 5 19V5C5 4.44772 5.44772 4 6 4ZM15 4.10002C16.6113 4.4271 17.9413 5.52906 18.584 7H15V4.10002Z"
28
+ d="M10.74 15.8V14.42H9.36V13.03h1.38V11.65h1.39v1.39h1.39v1.39H12.13v1.39H10.74ZM7.98 4.73c-1.15 0-2.08.93-2.08 2.08V16.5c0 1.15.93 2.08 2.08 2.08h8.31c1.15 0 2.08-.93 2.08-2.08V9.58c0-2.68-2.17-4.85-4.85-4.85H7.98Zm0 1.39h4.84V9.58h4.16V16.5c0 .39-.31.69-.69.69H7.98c-.39 0-.69-.31-.69-.69V6.8c0-.39.31-.69.69-.69Zm6.23.06c1.12.23 2.04.99 2.48 2.02H14.21V6.17Z"
30
29
  fill={color}
31
30
  />
32
31
  </svg>
@@ -22,27 +22,10 @@ const GamesIcon: React.FC<IconProps> = ({
22
22
  stroke={circleStrokeColor}
23
23
  strokeWidth={'1.5px'}
24
24
  />
25
- <path
26
- d="M13.83 10.91c.27.27.27.71 0 .98-.27.28-.72.28-.99 0-.27-.27-.27-.71 0-.98.27-.28.72-.28.99 0Z"
27
- fill={color}
28
- />
29
- <path
30
- d="M14.32 9.42c.28-.27.72-.27.99 0 .28.27.28.72 0 .99-.27.27-.71.27-.99 0-.27-.27-.27-.72 0-.99Z"
31
- fill={color}
32
- />
33
- <path
34
- d="M16.8 10.91c.27.27.27.71 0 .98-.27.28-.72.28-.99 0-.27-.27-.27-.71 0-.98.27-.28.72-.28.99 0Z"
35
- fill={color}
36
- />
37
- <path
38
- d="M14.32 12.39c.28-.27.72-.27.99 0 .28.27.28.72 0 .99-.27.27-.71.27-.99 0-.27-.27-.27-.72 0-.99Z"
39
- fill={color}
40
- />
41
- <path d="M7.2 12.1H5.8V10.7H7.2V9.3H8.6v1.4H10v1.4H8.6v1.4H7.2V12.1Z" fill={color} />
42
25
  <path
43
26
  fillRule="evenodd"
44
27
  clipRule="evenodd"
45
- d="M8.4 7C5.69 7 3.5 9.19 3.5 11.9c0 2.71 2.19 4.9 4.9 4.9h7c2.71 0 4.9-2.19 4.9-4.9 0-2.71-2.19-4.9-4.9-4.9h-7Zm7 1.4h-7c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5h7c1.93 0 3.5-1.57 3.5-3.5s-1.57-3.5-3.5-3.5Z"
28
+ d="M15.4 8.4c1.93 0 3.5 1.57 3.5 3.5s-1.57 3.5-3.5 3.5h-7c-1.93 0-3.5-1.57-3.5-3.5S6.47 8.4 8.4 8.4h7ZM8.4 7h7c2.71 0 4.9 2.19 4.9 4.9 0 2.71-2.19 4.9-4.9 4.9h-7c-2.71 0-4.9-2.19-4.9-4.9C3.5 9.19 5.69 7 8.4 7Zm5.38 4.2c.18 0 .36.07.5.21.27.27.27.71 0 .98-.27.28-.72.28-.99 0-.27-.27-.27-.71 0-.98.14-.14.32-.21.5-.21Zm1.49-1.48c.18 0 .35.06.49.2.28.27.28.72 0 .99-.27.27-.71.27-.99 0-.27-.27-.27-.72 0-.99.14-.13.32-.2.5-.2Zm1.49 1.48c.18 0 .36.07.5.21.27.27.27.71 0 .98-.27.28-.72.28-.99 0-.27-.27-.27-.71 0-.98.14-.14.32-.21.5-.21Zm-1.51 1.49c.19-.01.38.06.52.2.28.27.28.72 0 .99-.27.27-.71.27-.99 0-.27-.27-.27-.72 0-.99.14-.12.3-.19.47-.2ZM7.66 13.94h1.4v-1.4h1.4v-1.4H9.06V9.74H7.66v1.4H6.26v1.4h1.4Z"
46
29
  fill={color}
47
30
  />
48
31
  </svg>