@apify/ui-library 1.97.2 → 1.98.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/dist/src/components/action_link.stories.d.ts +50 -0
  2. package/dist/src/components/action_link.stories.d.ts.map +1 -0
  3. package/dist/src/components/action_link.stories.js +129 -0
  4. package/dist/src/components/action_link.stories.js.map +1 -0
  5. package/dist/src/components/actor_template_card.stories.d.ts +49 -0
  6. package/dist/src/components/actor_template_card.stories.d.ts.map +1 -0
  7. package/dist/src/components/actor_template_card.stories.js +154 -0
  8. package/dist/src/components/actor_template_card.stories.js.map +1 -0
  9. package/dist/src/components/banner.stories.d.ts +53 -0
  10. package/dist/src/components/banner.stories.d.ts.map +1 -0
  11. package/dist/src/components/banner.stories.js +132 -0
  12. package/dist/src/components/banner.stories.js.map +1 -0
  13. package/dist/src/components/blog_article.stories.d.ts +33 -0
  14. package/dist/src/components/blog_article.stories.d.ts.map +1 -0
  15. package/dist/src/components/blog_article.stories.js +92 -0
  16. package/dist/src/components/blog_article.stories.js.map +1 -0
  17. package/dist/src/components/chip.stories.d.ts +98 -0
  18. package/dist/src/components/chip.stories.d.ts.map +1 -0
  19. package/dist/src/components/chip.stories.js +251 -0
  20. package/dist/src/components/chip.stories.js.map +1 -0
  21. package/dist/src/components/code/code_block/code_block_with_tabs.d.ts +1 -1
  22. package/dist/src/components/code/code_block/code_block_with_tabs.d.ts.map +1 -1
  23. package/dist/src/components/code/code_block/code_block_with_tabs.stories.d.ts +23 -0
  24. package/dist/src/components/code/code_block/code_block_with_tabs.stories.d.ts.map +1 -0
  25. package/dist/src/components/code/code_block/code_block_with_tabs.stories.js +63 -0
  26. package/dist/src/components/code/code_block/code_block_with_tabs.stories.js.map +1 -0
  27. package/dist/src/components/code/inline_code/inline_code.stories.d.ts +16 -0
  28. package/dist/src/components/code/inline_code/inline_code.stories.d.ts.map +1 -0
  29. package/dist/src/components/code/inline_code/inline_code.stories.js +47 -0
  30. package/dist/src/components/code/inline_code/inline_code.stories.js.map +1 -0
  31. package/dist/src/components/code/one_line_code/one_line_code.stories.d.ts +16 -0
  32. package/dist/src/components/code/one_line_code/one_line_code.stories.d.ts.map +1 -0
  33. package/dist/src/components/code/one_line_code/one_line_code.stories.js +81 -0
  34. package/dist/src/components/code/one_line_code/one_line_code.stories.js.map +1 -0
  35. package/dist/src/components/color_wheel_gradient.stories.d.ts +38 -0
  36. package/dist/src/components/color_wheel_gradient.stories.d.ts.map +1 -0
  37. package/dist/src/components/color_wheel_gradient.stories.js +126 -0
  38. package/dist/src/components/color_wheel_gradient.stories.js.map +1 -0
  39. package/dist/src/components/link.stories.d.ts +22 -0
  40. package/dist/src/components/link.stories.d.ts.map +1 -0
  41. package/dist/src/components/link.stories.js +112 -0
  42. package/dist/src/components/link.stories.js.map +1 -0
  43. package/dist/src/components/rating.stories.d.ts +32 -0
  44. package/dist/src/components/rating.stories.d.ts.map +1 -0
  45. package/dist/src/components/rating.stories.js +95 -0
  46. package/dist/src/components/rating.stories.js.map +1 -0
  47. package/dist/src/components/simple_markdown/simple_markdown.d.ts +2 -2
  48. package/dist/src/components/simple_markdown/simple_markdown.d.ts.map +1 -1
  49. package/dist/src/components/simple_markdown/simple_markdown.stories.d.ts +8 -0
  50. package/dist/src/components/simple_markdown/simple_markdown.stories.d.ts.map +1 -0
  51. package/dist/src/components/simple_markdown/simple_markdown.stories.js +60 -0
  52. package/dist/src/components/simple_markdown/simple_markdown.stories.js.map +1 -0
  53. package/dist/src/components/tabs/tab.stories.d.ts.map +1 -1
  54. package/dist/src/components/tabs/tab.stories.js +1 -0
  55. package/dist/src/components/tabs/tab.stories.js.map +1 -1
  56. package/dist/src/components/text/text.stories.d.ts +13 -0
  57. package/dist/src/components/text/text.stories.d.ts.map +1 -0
  58. package/dist/src/components/text/text.stories.js +14 -0
  59. package/dist/src/components/text/text.stories.js.map +1 -0
  60. package/dist/src/design_system/tokens/radiuses.d.ts +2 -0
  61. package/dist/src/design_system/tokens/radiuses.d.ts.map +1 -1
  62. package/dist/src/design_system/tokens/radiuses.js +2 -0
  63. package/dist/src/design_system/tokens/radiuses.js.map +1 -1
  64. package/dist/src/design_system/tokens/radiuses.stories.d.ts +6 -0
  65. package/dist/src/design_system/tokens/radiuses.stories.d.ts.map +1 -0
  66. package/dist/src/design_system/tokens/radiuses.stories.js +30 -0
  67. package/dist/src/design_system/tokens/radiuses.stories.js.map +1 -0
  68. package/dist/src/design_system/tokens/shadows.stories.d.ts +6 -0
  69. package/dist/src/design_system/tokens/shadows.stories.d.ts.map +1 -0
  70. package/dist/src/design_system/tokens/shadows.stories.js +37 -0
  71. package/dist/src/design_system/tokens/shadows.stories.js.map +1 -0
  72. package/dist/src/design_system/tokens/spaces.stories.d.ts +10 -0
  73. package/dist/src/design_system/tokens/spaces.stories.d.ts.map +1 -0
  74. package/dist/src/design_system/tokens/spaces.stories.js +92 -0
  75. package/dist/src/design_system/tokens/spaces.stories.js.map +1 -0
  76. package/dist/tsconfig.build.tsbuildinfo +1 -1
  77. package/package.json +3 -3
  78. package/src/components/action_link.stories.tsx +145 -0
  79. package/src/components/actor_template_card.stories.tsx +179 -0
  80. package/src/components/badge.doc.mdx +35 -0
  81. package/src/components/banner.stories.tsx +256 -0
  82. package/src/components/blog_article.stories.tsx +133 -0
  83. package/src/components/chip.stories.tsx +301 -0
  84. package/src/components/code/code_block/code_block.stories.jsx +133 -0
  85. package/src/components/code/code_block/code_block_with_tabs.stories.tsx +81 -0
  86. package/src/components/code/code_block/code_block_with_tabs.tsx +1 -1
  87. package/src/components/code/inline_code/inline_code.stories.tsx +88 -0
  88. package/src/components/code/one_line_code/one_line_code.stories.tsx +173 -0
  89. package/src/components/color_wheel_gradient.stories.tsx +157 -0
  90. package/src/components/floating/tooltip.stories.jsx +0 -1
  91. package/src/components/link.stories.tsx +127 -0
  92. package/src/components/message.stories.jsx +116 -0
  93. package/src/components/rating.stories.tsx +166 -0
  94. package/src/components/simple_markdown/simple_markdown.stories.tsx +71 -0
  95. package/src/components/simple_markdown/simple_markdown.tsx +1 -1
  96. package/src/components/tabs/tab.stories.tsx +1 -0
  97. package/src/components/tag.doc.mdx +38 -0
  98. package/src/components/text/text.stories.tsx +61 -0
  99. package/src/design_system/tokens/radiuses.doc.mdx +12 -0
  100. package/src/design_system/tokens/radiuses.stories.tsx +49 -0
  101. package/src/design_system/tokens/radiuses.ts +2 -0
  102. package/src/design_system/tokens/shadows.doc.mdx +16 -0
  103. package/src/design_system/tokens/shadows.stories.tsx +58 -0
  104. package/src/design_system/tokens/spaces.doc.mdx +18 -0
  105. package/src/design_system/tokens/spaces.stories.tsx +131 -0
@@ -0,0 +1,92 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { BlogArticle } from './blog_article.js';
3
+ export default {
4
+ title: 'UI-Library/BlogArticle',
5
+ component: BlogArticle,
6
+ argTypes: {
7
+ imageNode: {
8
+ control: 'object',
9
+ description: 'React node representing the article image or media.',
10
+ },
11
+ title: {
12
+ control: 'text',
13
+ description: 'Title of the blog article.',
14
+ },
15
+ ctaTitle: {
16
+ control: 'text',
17
+ description: 'Call-to-action text displayed in the read more section.',
18
+ },
19
+ },
20
+ parameters: {
21
+ design: {
22
+ type: 'figma',
23
+ url: 'TODO: Add Figma URL',
24
+ },
25
+ },
26
+ };
27
+ /**
28
+ * Default story for BlogArticle.
29
+ * Shows the component with a sample image, title, and default CTA text.
30
+ */
31
+ export const Default = {
32
+ args: {
33
+ imageNode: (_jsx("img", { src: "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=225&fit=crop&crop=faces", alt: "Sample blog cover", style: { width: '100%', height: '100%', objectFit: 'cover', borderRadius: '12px' } })),
34
+ title: 'How to Build Scalable Web Scrapers with Apify',
35
+ ctaTitle: 'Read more',
36
+ },
37
+ };
38
+ /**
39
+ * Story for BlogArticle with a custom CTA title.
40
+ * Demonstrates how the CTA text can be customized from the default "Read more".
41
+ */
42
+ export const CustomCTA = {
43
+ args: {
44
+ imageNode: (_jsx("img", { src: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=225&fit=crop&crop=faces", alt: "Custom blog cover", style: { width: '100%', height: '100%', objectFit: 'cover', borderRadius: '12px' } })),
45
+ title: 'Introducing the New Apify SDK',
46
+ ctaTitle: 'Learn more',
47
+ },
48
+ };
49
+ /**
50
+ * Story for BlogArticle with a long title.
51
+ * Useful for testing text wrapping and layout with lengthy titles.
52
+ */
53
+ export const LongTitle = {
54
+ args: {
55
+ imageNode: (_jsx("img", { src: "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=400&h=225&fit=crop&crop=faces", alt: "Long title blog cover", style: { width: '100%', height: '100%', objectFit: 'cover', borderRadius: '12px' } })),
56
+ title: 'A Comprehensive Guide to Web Automation: Best Practices, Common Pitfalls, and Real-World Use Cases for Modern Developers',
57
+ ctaTitle: 'Read more',
58
+ },
59
+ };
60
+ /**
61
+ * Story for BlogArticle with a short title.
62
+ * Demonstrates the component behavior with minimal text content.
63
+ */
64
+ export const ShortTitle = {
65
+ args: {
66
+ imageNode: (_jsx("img", { src: "https://images.unsplash.com/photo-1504639725590-34d0984388bd?w=400&h=225&fit=crop&crop=faces", alt: "Short title blog cover", style: { width: '100%', height: '100%', objectFit: 'cover', borderRadius: '12px' } })),
67
+ title: 'Quick Tips',
68
+ ctaTitle: 'Read more',
69
+ },
70
+ };
71
+ /**
72
+ * Story for BlogArticle with a placeholder image.
73
+ * Shows how the component handles when no actual image is provided.
74
+ */
75
+ export const PlaceholderImage = {
76
+ args: {
77
+ imageNode: (_jsx("div", { style: {
78
+ width: '100%',
79
+ height: '100%',
80
+ backgroundColor: '#f0f0f0',
81
+ display: 'flex',
82
+ alignItems: 'center',
83
+ justifyContent: 'center',
84
+ color: '#666',
85
+ borderRadius: '12px',
86
+ fontSize: '14px',
87
+ }, children: "Image placeholder" })),
88
+ title: 'Understanding Data Processing Pipelines',
89
+ ctaTitle: 'Read more',
90
+ },
91
+ };
92
+ //# sourceMappingURL=blog_article.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"blog_article.stories.js","sourceRoot":"","sources":["../../../src/components/blog_article.stories.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,eAAe;IACX,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACN,SAAS,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,qDAAqD;SACrE;QACD,KAAK,EAAE;YACH,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,4BAA4B;SAC5C;QACD,QAAQ,EAAE;YACN,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,yDAAyD;SACzE;KACJ;IACD,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,qBAAqB;SAC7B;KACJ;CACsB,CAAC;AAI5B;;;GAGG;AACH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC1B,IAAI,EAAE;QACF,SAAS,EAAE,CACP,cACI,GAAG,EAAC,8FAA8F,EAClG,GAAG,EAAC,mBAAmB,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,GACpF,CACL;QACD,KAAK,EAAE,+CAA+C;QACtD,QAAQ,EAAE,WAAW;KACxB;CACJ,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAU;IAC5B,IAAI,EAAE;QACF,SAAS,EAAE,CACP,cACI,GAAG,EAAC,2FAA2F,EAC/F,GAAG,EAAC,mBAAmB,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,GACpF,CACL;QACD,KAAK,EAAE,+BAA+B;QACtC,QAAQ,EAAE,YAAY;KACzB;CACJ,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAU;IAC5B,IAAI,EAAE;QACF,SAAS,EAAE,CACP,cACI,GAAG,EAAC,2FAA2F,EAC/F,GAAG,EAAC,uBAAuB,EAC3B,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,GACpF,CACL;QACD,KAAK,EAAE,0HAA0H;QACjI,QAAQ,EAAE,WAAW;KACxB;CACJ,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAU;IAC7B,IAAI,EAAE;QACF,SAAS,EAAE,CACP,cACI,GAAG,EAAC,8FAA8F,EAClG,GAAG,EAAC,wBAAwB,EAC5B,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,GACpF,CACL;QACD,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,WAAW;KACxB;CACJ,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACnC,IAAI,EAAE;QACF,SAAS,EAAE,CACP,cACI,KAAK,EAAE;gBACH,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,eAAe,EAAE,SAAS;gBAC1B,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,KAAK,EAAE,MAAM;gBACb,YAAY,EAAE,MAAM;gBACpB,QAAQ,EAAE,MAAM;aACnB,kCAGC,CACT;QACD,KAAK,EAAE,yCAAyC;QAChD,QAAQ,EAAE,WAAW;KACxB;CACJ,CAAC"}
@@ -0,0 +1,98 @@
1
+ import type { Meta, StoryObj } from '@storybook/react-vite';
2
+ import { type ChipProps } from './chip.js';
3
+ declare const _default: Meta<ChipProps>;
4
+ export default _default;
5
+ type Story = StoryObj<ChipProps>;
6
+ /**
7
+ * Default chip with medium size and default type
8
+ */
9
+ export declare const Default: Story;
10
+ /**
11
+ * Extra small chip - the smallest size available
12
+ */
13
+ export declare const ExtraSmall: Story;
14
+ /**
15
+ * Small chip size
16
+ */
17
+ export declare const Small: Story;
18
+ /**
19
+ * Medium chip size (default)
20
+ */
21
+ export declare const Medium: Story;
22
+ /**
23
+ * Large chip size
24
+ */
25
+ export declare const Large: Story;
26
+ /**
27
+ * Primary chip type with brand colors
28
+ */
29
+ export declare const Primary: Story;
30
+ /**
31
+ * Success chip type for positive states
32
+ */
33
+ export declare const Success: Story;
34
+ /**
35
+ * Warning chip type for cautionary states
36
+ */
37
+ export declare const Warning: Story;
38
+ /**
39
+ * Danger chip type for error or critical states
40
+ */
41
+ export declare const Danger: Story;
42
+ /**
43
+ * Chip with an icon on the right side
44
+ */
45
+ export declare const WithIcon: Story;
46
+ /**
47
+ * Primary chip with check icon
48
+ */
49
+ export declare const PrimaryWithIcon: Story;
50
+ /**
51
+ * Success chip with check icon
52
+ */
53
+ export declare const SuccessWithIcon: Story;
54
+ /**
55
+ * Warning chip with warning icon
56
+ */
57
+ export declare const WarningWithIcon: Story;
58
+ /**
59
+ * Danger chip with error icon
60
+ */
61
+ export declare const DangerWithIcon: Story;
62
+ /**
63
+ * Clickable chip with pointer cursor
64
+ */
65
+ export declare const Clickable: Story;
66
+ /**
67
+ * Non-clickable chip with default cursor
68
+ */
69
+ export declare const NonClickable: Story;
70
+ /**
71
+ * Large primary clickable chip with icon
72
+ */
73
+ export declare const LargePrimaryClickableWithIcon: Story;
74
+ /**
75
+ * Small success chip showing status
76
+ */
77
+ export declare const SmallStatusChip: Story;
78
+ /**
79
+ * Extra small chip for compact layouts
80
+ */
81
+ export declare const ExtraSmallTag: Story;
82
+ /**
83
+ * Chip with longer text content
84
+ */
85
+ export declare const WithLongText: Story;
86
+ /**
87
+ * Multiple chips showcasing different types in one view
88
+ */
89
+ export declare const AllTypes: Story;
90
+ /**
91
+ * Multiple chips showcasing different sizes in one view
92
+ */
93
+ export declare const AllSizes: Story;
94
+ /**
95
+ * Chips with various icons demonstrating versatility
96
+ */
97
+ export declare const WithVariousIcons: Story;
98
+ //# sourceMappingURL=chip.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"chip.stories.d.ts","sourceRoot":"","sources":["../../../src/components/chip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;wBA4CpE,IAAI,CAAC,SAAS,CAAC;AAhCpB,wBAgCqB;AAErB,KAAK,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;AAEjC;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,6BAA6B,EAAE,KAQ3C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAK1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAU9B,CAAC"}
@@ -0,0 +1,251 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Chip, CHIP_SIZES, CHIP_TYPES } from './chip.js';
3
+ const mockIcons = {
4
+ star: _jsx("span", { style: { fontSize: '14px' }, children: "\u2B50" }),
5
+ check: _jsx("span", { style: { fontSize: '14px' }, children: "\u2713" }),
6
+ warning: _jsx("span", { style: { fontSize: '14px' }, children: "\u26A0\uFE0F" }),
7
+ error: _jsx("span", { style: { fontSize: '14px' }, children: "\u274C" }),
8
+ info: _jsx("span", { style: { fontSize: '14px' }, children: "\u2139\uFE0F" }),
9
+ heart: _jsx("span", { style: { fontSize: '14px' }, children: "\u2764\uFE0F" }),
10
+ tag: _jsx("span", { style: { fontSize: '14px' }, children: "#" }),
11
+ };
12
+ export default {
13
+ title: 'UI-Library/Chip',
14
+ tags: ['deprecated'],
15
+ component: Chip,
16
+ argTypes: {
17
+ type: {
18
+ control: 'select',
19
+ options: Object.values(CHIP_TYPES),
20
+ },
21
+ size: {
22
+ control: 'select',
23
+ options: Object.values(CHIP_SIZES),
24
+ },
25
+ clickable: {
26
+ control: 'boolean',
27
+ },
28
+ icon: {
29
+ control: false,
30
+ },
31
+ children: {
32
+ control: 'text',
33
+ },
34
+ className: {
35
+ control: 'text',
36
+ },
37
+ },
38
+ parameters: {
39
+ design: {
40
+ type: 'figma',
41
+ url: 'TODO: Add Figma URL',
42
+ },
43
+ },
44
+ };
45
+ /**
46
+ * Default chip with medium size and default type
47
+ */
48
+ export const Default = {
49
+ args: {
50
+ children: 'Default Chip',
51
+ },
52
+ };
53
+ /**
54
+ * Extra small chip - the smallest size available
55
+ */
56
+ export const ExtraSmall = {
57
+ args: {
58
+ size: CHIP_SIZES.EXTRA_SMALL,
59
+ children: 'XS Chip',
60
+ },
61
+ };
62
+ /**
63
+ * Small chip size
64
+ */
65
+ export const Small = {
66
+ args: {
67
+ size: CHIP_SIZES.SMALL,
68
+ children: 'Small Chip',
69
+ },
70
+ };
71
+ /**
72
+ * Medium chip size (default)
73
+ */
74
+ export const Medium = {
75
+ args: {
76
+ size: CHIP_SIZES.MEDIUM,
77
+ children: 'Medium Chip',
78
+ },
79
+ };
80
+ /**
81
+ * Large chip size
82
+ */
83
+ export const Large = {
84
+ args: {
85
+ size: CHIP_SIZES.LARGE,
86
+ children: 'Large Chip',
87
+ },
88
+ };
89
+ /**
90
+ * Primary chip type with brand colors
91
+ */
92
+ export const Primary = {
93
+ args: {
94
+ type: CHIP_TYPES.PRIMARY,
95
+ children: 'Primary Chip',
96
+ },
97
+ };
98
+ /**
99
+ * Success chip type for positive states
100
+ */
101
+ export const Success = {
102
+ args: {
103
+ type: CHIP_TYPES.SUCCESS,
104
+ children: 'Success Chip',
105
+ },
106
+ };
107
+ /**
108
+ * Warning chip type for cautionary states
109
+ */
110
+ export const Warning = {
111
+ args: {
112
+ type: CHIP_TYPES.WARNING,
113
+ children: 'Warning Chip',
114
+ },
115
+ };
116
+ /**
117
+ * Danger chip type for error or critical states
118
+ */
119
+ export const Danger = {
120
+ args: {
121
+ type: CHIP_TYPES.DANGER,
122
+ children: 'Danger Chip',
123
+ },
124
+ };
125
+ /**
126
+ * Chip with an icon on the right side
127
+ */
128
+ export const WithIcon = {
129
+ args: {
130
+ children: 'Starred',
131
+ icon: mockIcons.star,
132
+ },
133
+ };
134
+ /**
135
+ * Primary chip with check icon
136
+ */
137
+ export const PrimaryWithIcon = {
138
+ args: {
139
+ type: CHIP_TYPES.PRIMARY,
140
+ children: 'Completed',
141
+ icon: mockIcons.check,
142
+ },
143
+ };
144
+ /**
145
+ * Success chip with check icon
146
+ */
147
+ export const SuccessWithIcon = {
148
+ args: {
149
+ type: CHIP_TYPES.SUCCESS,
150
+ children: 'Verified',
151
+ icon: mockIcons.check,
152
+ },
153
+ };
154
+ /**
155
+ * Warning chip with warning icon
156
+ */
157
+ export const WarningWithIcon = {
158
+ args: {
159
+ type: CHIP_TYPES.WARNING,
160
+ children: 'Caution',
161
+ icon: mockIcons.warning,
162
+ },
163
+ };
164
+ /**
165
+ * Danger chip with error icon
166
+ */
167
+ export const DangerWithIcon = {
168
+ args: {
169
+ type: CHIP_TYPES.DANGER,
170
+ children: 'Error',
171
+ icon: mockIcons.error,
172
+ },
173
+ };
174
+ /**
175
+ * Clickable chip with pointer cursor
176
+ */
177
+ export const Clickable = {
178
+ args: {
179
+ children: 'Click me',
180
+ clickable: true,
181
+ },
182
+ };
183
+ /**
184
+ * Non-clickable chip with default cursor
185
+ */
186
+ export const NonClickable = {
187
+ args: {
188
+ children: 'Static chip',
189
+ clickable: false,
190
+ },
191
+ };
192
+ /**
193
+ * Large primary clickable chip with icon
194
+ */
195
+ export const LargePrimaryClickableWithIcon = {
196
+ args: {
197
+ type: CHIP_TYPES.PRIMARY,
198
+ size: CHIP_SIZES.LARGE,
199
+ children: 'Premium Feature',
200
+ icon: mockIcons.star,
201
+ clickable: true,
202
+ },
203
+ };
204
+ /**
205
+ * Small success chip showing status
206
+ */
207
+ export const SmallStatusChip = {
208
+ args: {
209
+ type: CHIP_TYPES.SUCCESS,
210
+ size: CHIP_SIZES.SMALL,
211
+ children: 'Active',
212
+ },
213
+ };
214
+ /**
215
+ * Extra small chip for compact layouts
216
+ */
217
+ export const ExtraSmallTag = {
218
+ args: {
219
+ size: CHIP_SIZES.EXTRA_SMALL,
220
+ children: 'Tag',
221
+ icon: mockIcons.tag,
222
+ },
223
+ };
224
+ /**
225
+ * Chip with longer text content
226
+ */
227
+ export const WithLongText = {
228
+ args: {
229
+ children: 'This is a longer chip text',
230
+ type: CHIP_TYPES.PRIMARY,
231
+ },
232
+ };
233
+ /**
234
+ * Multiple chips showcasing different types in one view
235
+ */
236
+ export const AllTypes = {
237
+ render: () => (_jsxs("div", { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' }, children: [_jsx(Chip, { type: CHIP_TYPES.DEFAULT, children: "Default" }), _jsx(Chip, { type: CHIP_TYPES.PRIMARY, children: "Primary" }), _jsx(Chip, { type: CHIP_TYPES.SUCCESS, children: "Success" }), _jsx(Chip, { type: CHIP_TYPES.WARNING, children: "Warning" }), _jsx(Chip, { type: CHIP_TYPES.DANGER, children: "Danger" })] })),
238
+ };
239
+ /**
240
+ * Multiple chips showcasing different sizes in one view
241
+ */
242
+ export const AllSizes = {
243
+ render: () => (_jsxs("div", { style: { display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx(Chip, { size: CHIP_SIZES.EXTRA_SMALL, children: "XS" }), _jsx(Chip, { size: CHIP_SIZES.SMALL, children: "Small" }), _jsx(Chip, { size: CHIP_SIZES.MEDIUM, children: "Medium" }), _jsx(Chip, { size: CHIP_SIZES.LARGE, children: "Large" })] })),
244
+ };
245
+ /**
246
+ * Chips with various icons demonstrating versatility
247
+ */
248
+ export const WithVariousIcons = {
249
+ render: () => (_jsxs("div", { style: { display: 'flex', gap: '8px', flexWrap: 'wrap' }, children: [_jsx(Chip, { type: CHIP_TYPES.SUCCESS, icon: mockIcons.check, children: "Approved" }), _jsx(Chip, { type: CHIP_TYPES.WARNING, icon: mockIcons.warning, children: "Pending" }), _jsx(Chip, { type: CHIP_TYPES.DANGER, icon: mockIcons.error, children: "Failed" }), _jsx(Chip, { type: CHIP_TYPES.PRIMARY, icon: mockIcons.heart, children: "Favorite" }), _jsx(Chip, { type: CHIP_TYPES.DEFAULT, icon: mockIcons.info, children: "Info" })] })),
250
+ };
251
+ //# sourceMappingURL=chip.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"chip.stories.js","sourceRoot":"","sources":["../../../src/components/chip.stories.tsx"],"names":[],"mappings":"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"}
@@ -19,7 +19,7 @@ export type CodeBlockTabProps = {
19
19
  languageOverride?: string;
20
20
  onClick?: (e: React.MouseEvent) => void;
21
21
  } & Partial<SharedLinkProps>;
22
- type CodeBlockWithTabsProps = SharedBoxProps & {
22
+ export type CodeBlockWithTabsProps = SharedBoxProps & {
23
23
  codeBlockProps: SharedCodeBlockProps;
24
24
  currentTabKey: CodeBlockTabKey;
25
25
  tabs: CodeBlockTabProps[];
@@ -1 +1 @@
1
- {"version":3,"file":"code_block_with_tabs.d.ts","sourceRoot":"","sources":["../../../../../src/components/code/code_block/code_block_with_tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAO,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAClF,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjE,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,GAAG,YAAY,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAC;AAC1G,KAAK,kBAAkB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAuC9E,CAAC;AAEF,KAAK,cAAc,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,UAAU,GAAG,SAAS,CAAC,GAAG,kBAAkB,CAAC;AAEhG,KAAK,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,mBAAmB,GAAG,SAAS,GAAG,UAAU,GAAG,eAAe,GAAG,aAAa,CAAC,CAAC;AACjI,KAAK,eAAe,GAAG,IAAI,CAAC,gBAAgB,EAAE,IAAI,GAAG,KAAK,GAAG,QAAQ,CAAC,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG;IAC5B,GAAG,EAAE,eAAe,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC3C,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;AAE7B,KAAK,sBAAsB,GAAG,cAAc,GAAG;IAC3C,cAAc,EAAE,oBAAoB,CAAC;IACrC,aAAa,EAAE,eAAe,CAAC;IAC/B,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAE1B,uBAAuB,CAAC,EAAE,eAAe,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,+BAA+B;;;;;CAK3C,CAAC;AA6GF,eAAO,MAAM,iBAAiB,0FAA2F,sBAAsB,4CA0D9I,CAAC"}
1
+ {"version":3,"file":"code_block_with_tabs.d.ts","sourceRoot":"","sources":["../../../../../src/components/code/code_block/code_block_with_tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAO,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAClF,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE5D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjE,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,MAAM,GAAG,YAAY,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,YAAY,CAAC;AAC1G,KAAK,kBAAkB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAuC9E,CAAC;AAEF,KAAK,cAAc,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,UAAU,GAAG,SAAS,CAAC,GAAG,kBAAkB,CAAC;AAEhG,KAAK,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,mBAAmB,GAAG,SAAS,GAAG,UAAU,GAAG,eAAe,GAAG,aAAa,CAAC,CAAC;AACjI,KAAK,eAAe,GAAG,IAAI,CAAC,gBAAgB,EAAE,IAAI,GAAG,KAAK,GAAG,QAAQ,CAAC,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG;IAC5B,GAAG,EAAE,eAAe,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CAC3C,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;AAE7B,MAAM,MAAM,sBAAsB,GAAG,cAAc,GAAG;IAClD,cAAc,EAAE,oBAAoB,CAAC;IACrC,aAAa,EAAE,eAAe,CAAC;IAC/B,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAE1B,uBAAuB,CAAC,EAAE,eAAe,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,+BAA+B;;;;;CAK3C,CAAC;AA6GF,eAAO,MAAM,iBAAiB,0FAA2F,sBAAsB,4CA0D9I,CAAC"}
@@ -0,0 +1,23 @@
1
+ import { type CodeBlockWithTabsProps } from './code_block_with_tabs.js';
2
+ declare const _default: {
3
+ title: string;
4
+ parameters: {
5
+ design: {
6
+ type: string;
7
+ url: string;
8
+ };
9
+ layout: string;
10
+ };
11
+ component: ({ className, codeBlockProps, currentTabKey, tabs, optimisticCurrentTabKey, ...props }: CodeBlockWithTabsProps) => import("react/jsx-runtime").JSX.Element;
12
+ };
13
+ export default _default;
14
+ export declare const Default: {
15
+ ({ tabs, ...args }: Omit<CodeBlockWithTabsProps, "currentTabKey">): import("react/jsx-runtime").JSX.Element;
16
+ args: {
17
+ tabs: {
18
+ key: string;
19
+ content: string;
20
+ }[];
21
+ };
22
+ };
23
+ //# sourceMappingURL=code_block_with_tabs.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"code_block_with_tabs.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/code/code_block/code_block_with_tabs.stories.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEgB,KAAK,sBAAsB,EACjD,MAAM,2BAA2B,CAAC;;;;;;;;;;;;AAEnC,wBAUE;AAaF,eAAO,MAAM,OAAO;wBAAuB,IAAI,CAAC,sBAAsB,EAAE,eAAe,CAAC;;;;;;;CAgBvF,CAAC"}
@@ -0,0 +1,63 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useMemo, useState } from 'react';
3
+ import styled from 'styled-components';
4
+ import { theme, } from '../../../design_system/theme.js';
5
+ import { CodeBlockWithTabs, } from './code_block_with_tabs.js';
6
+ export default {
7
+ title: 'UI-Library/Code/CodeBlockWithTabs',
8
+ parameters: {
9
+ design: {
10
+ type: 'figma',
11
+ url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/Shared-library?node-id=5266-34497&t=aaAINB9GEUOOBZVl-4',
12
+ },
13
+ layout: 'centered',
14
+ },
15
+ component: CodeBlockWithTabs,
16
+ };
17
+ const Container = styled.div `
18
+ width: 360px;
19
+ display: flex;
20
+ flex-direction: column;
21
+ justify-content: center;
22
+
23
+ @media ${theme.device.tablet} {
24
+ width: 840px;
25
+ }
26
+ `;
27
+ export const Default = ({ tabs, ...args }) => {
28
+ const [currentTabKey, setCurrentTabKey] = useState(tabs[0]?.key);
29
+ const extendedTabs = useMemo(() => tabs.map((tab) => ({
30
+ ...tab,
31
+ onClick: () => setCurrentTabKey(tab.key),
32
+ })), [tabs]);
33
+ return (_jsx(Container, { children: _jsx(CodeBlockWithTabs, { currentTabKey: currentTabKey, tabs: extendedTabs, ...args }) }));
34
+ };
35
+ Default.args = {
36
+ tabs: [
37
+ {
38
+ key: 'python',
39
+ content: `
40
+ a = 1
41
+ b = 2
42
+ c = a + b
43
+ print(c)`,
44
+ },
45
+ {
46
+ key: 'javascript',
47
+ content: `
48
+ const a = 1;
49
+ const b = 2;
50
+ const c = a + b;
51
+ console.log(c);`,
52
+ },
53
+ {
54
+ key: 'typescript',
55
+ content: `
56
+ const a: number = 1;
57
+ const b: number = 2;
58
+ const c: number = a + b;
59
+ console.log(c);`,
60
+ },
61
+ ],
62
+ };
63
+ //# sourceMappingURL=code_block_with_tabs.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"code_block_with_tabs.stories.js","sourceRoot":"","sources":["../../../../../src/components/code/code_block/code_block_with_tabs.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EACH,KAAK,GACR,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAEH,iBAAiB,GACpB,MAAM,2BAA2B,CAAC;AAEnC,eAAe;IACX,KAAK,EAAE,mCAAmC;IAC1C,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,4GAA4G;SACpH;QACD,MAAM,EAAE,UAAU;KACrB;IACD,SAAS,EAAE,iBAAiB;CAC/B,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;aAMf,KAAK,CAAC,MAAM,CAAC,MAAM;;;CAG/B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,EAAiD,EAAE,EAAE;IACxF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACjE,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QAClD,GAAG,GAAG;QACN,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAC;KAC3C,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEb,OAAO,CACH,KAAC,SAAS,cACN,KAAC,iBAAiB,IACd,aAAa,EAAE,aAAgC,EAC/C,IAAI,EAAE,YAAY,KACd,IAAI,GACV,GACM,CACf,CAAC;AACN,CAAC,CAAC;AAEF,OAAO,CAAC,IAAI,GAAG;IACX,IAAI,EAAE;QACF;YACI,GAAG,EAAE,QAAQ;YACb,OAAO,EAAE;;;;SAIZ;SACA;QACD;YACI,GAAG,EAAE,YAAY;YACjB,OAAO,EAAE;;;;gBAIL;SACP;QACD;YACI,GAAG,EAAE,YAAY;YACjB,OAAO,EAAE;;;;gBAIL;SAEP;KACJ;CACJ,CAAC"}
@@ -0,0 +1,16 @@
1
+ import type { Meta, StoryObj } from '@storybook/react-vite';
2
+ import type { InlineCodeProps } from './inline_code.js';
3
+ /**
4
+ * Stories for the InlineCode component. This file showcases the
5
+ * various states and configurations of the inline code component,
6
+ * including different sizes and copy button functionality.
7
+ */
8
+ declare const _default: Meta<InlineCodeProps>;
9
+ export default _default;
10
+ type Story = StoryObj<InlineCodeProps>;
11
+ /**
12
+ * Comprehensive comparison of all InlineCode variants side by side.
13
+ * Shows different sizes, copy button states, and various code examples.
14
+ */
15
+ export declare const AllVariants: Story;
16
+ //# sourceMappingURL=inline_code.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"inline_code.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/code/inline_code/inline_code.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAGxD;;;;GAIG;wBA0BE,IAAI,CAAC,eAAe,CAAC;AAzB1B,wBAyB2B;AAE3B,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAEvC;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KA4CzB,CAAC"}
@@ -0,0 +1,47 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { InlineCode } from './inline_code.js';
3
+ /**
4
+ * Stories for the InlineCode component. This file showcases the
5
+ * various states and configurations of the inline code component,
6
+ * including different sizes and copy button functionality.
7
+ */
8
+ export default {
9
+ title: 'ui-library/InlineCode',
10
+ component: InlineCode,
11
+ tags: [],
12
+ argTypes: {
13
+ children: {
14
+ control: 'text',
15
+ description: 'The code content to display',
16
+ },
17
+ size: {
18
+ control: 'select',
19
+ options: ['regular', 'small', 'big'],
20
+ description: 'Size of the inline code text',
21
+ },
22
+ withCopyButton: {
23
+ control: 'boolean',
24
+ description: 'Whether to show a copy button',
25
+ },
26
+ },
27
+ parameters: {
28
+ design: {
29
+ type: 'figma',
30
+ url: 'https://www.figma.com/design/duSsGnk84UMYav8mg8QNgR/%F0%9F%93%96-Shared-library?node-id=2132-2425&t=tH2x12cMH5yh0fuf-0',
31
+ },
32
+ },
33
+ };
34
+ /**
35
+ * Comprehensive comparison of all InlineCode variants side by side.
36
+ * Shows different sizes, copy button states, and various code examples.
37
+ */
38
+ export const AllVariants = {
39
+ render: () => (_jsxs("div", { style: {
40
+ display: 'grid',
41
+ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
42
+ gap: '24px',
43
+ padding: '24px',
44
+ maxWidth: '1200px',
45
+ }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '12px' }, children: [_jsx("h3", { style: { margin: '0 0 8px 0', fontSize: '16px', fontWeight: '600' }, children: "Size Variants" }), _jsxs("div", { children: [_jsx("p", { style: { margin: '0 0 4px 0', fontSize: '14px', color: '#666' }, children: "Small" }), _jsx(InlineCode, { size: "small", children: "npm install @apify/ui-library" })] }), _jsxs("div", { children: [_jsx("p", { style: { margin: '0 0 4px 0', fontSize: '14px', color: '#666' }, children: "Regular" }), _jsx(InlineCode, { size: "regular", children: "npm install @apify/ui-library" })] }), _jsxs("div", { children: [_jsx("p", { style: { margin: '0 0 4px 0', fontSize: '14px', color: '#666' }, children: "Big" }), _jsx(InlineCode, { size: "big", children: "npm install @apify/ui-library" })] })] }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '12px' }, children: [_jsx("h3", { style: { margin: '0 0 8px 0', fontSize: '16px', fontWeight: '600' }, children: "With Copy Button" }), _jsxs("div", { children: [_jsx("p", { style: { margin: '0 0 4px 0', fontSize: '14px', color: '#666' }, children: "Small" }), _jsx(InlineCode, { size: "small", withCopyButton: true, children: "npm install @apify/ui-library" })] }), _jsxs("div", { children: [_jsx("p", { style: { margin: '0 0 4px 0', fontSize: '14px', color: '#666' }, children: "Regular" }), _jsx(InlineCode, { size: "regular", withCopyButton: true, children: "npm install @apify/ui-library" })] }), _jsxs("div", { children: [_jsx("p", { style: { margin: '0 0 4px 0', fontSize: '14px', color: '#666' }, children: "Big" }), _jsx(InlineCode, { size: "big", withCopyButton: true, children: "npm install @apify/ui-library" })] })] })] })),
46
+ };
47
+ //# sourceMappingURL=inline_code.stories.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"inline_code.stories.js","sourceRoot":"","sources":["../../../../../src/components/code/inline_code/inline_code.stories.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C;;;;GAIG;AACH,eAAe;IACX,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,EAAE;IACR,QAAQ,EAAE;QACN,QAAQ,EAAE;YACN,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,6BAA6B;SAC7C;QACD,IAAI,EAAE;YACF,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC;YACpC,WAAW,EAAE,8BAA8B;SAC9C;QACD,cAAc,EAAE;YACZ,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,+BAA+B;SAC/C;KACJ;IACD,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,IAAI,EAAE,OAAO;YACb,GAAG,EAAE,wHAAwH;SAChI;KACJ;CACqB,CAAC;AAI3B;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAU;IAC9B,MAAM,EAAE,GAAG,EAAE,CAAC,CACV,eAAK,KAAK,EAAE;YACR,OAAO,EAAE,MAAM;YACf,mBAAmB,EAAE,sCAAsC;YAC3D,GAAG,EAAE,MAAM;YACX,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,QAAQ;SACrB,aAEG,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aACjE,aAAI,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,8BAAoB,EAC3F,0BACI,YAAG,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,sBAAW,EAC7E,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,8CAA2C,IACjE,EACN,0BACI,YAAG,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,wBAAa,EAC/E,KAAC,UAAU,IAAC,IAAI,EAAC,SAAS,8CAA2C,IACnE,EACN,0BACI,YAAG,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,oBAAS,EAC3E,KAAC,UAAU,IAAC,IAAI,EAAC,KAAK,8CAA2C,IAC/D,IACJ,EAGN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aACjE,aAAI,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,iCAAuB,EAC9F,0BACI,YAAG,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,sBAAW,EAC7E,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,cAAc,oDAA2C,IAChF,EACN,0BACI,YAAG,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,wBAAa,EAC/E,KAAC,UAAU,IAAC,IAAI,EAAC,SAAS,EAAC,cAAc,oDAA2C,IAClF,EACN,0BACI,YAAG,KAAK,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,oBAAS,EAC3E,KAAC,UAAU,IAAC,IAAI,EAAC,KAAK,EAAC,cAAc,oDAA2C,IAC9E,IACJ,IACJ,CACT;CACJ,CAAC"}