@apify/ui-library 1.112.4 → 1.113.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.
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +4 -4
- package/src/components/code/code_block/code_block.stories.jsx +0 -1
- package/src/components/tabs/tab.stories.tsx +1 -1
- package/src/components/tag.stories.jsx +0 -1
- package/dist/src/components/action_link.stories.d.ts +0 -50
- package/dist/src/components/action_link.stories.d.ts.map +0 -1
- package/dist/src/components/action_link.stories.js +0 -129
- package/dist/src/components/action_link.stories.js.map +0 -1
- package/dist/src/components/actor_template_card.stories.d.ts +0 -49
- package/dist/src/components/actor_template_card.stories.d.ts.map +0 -1
- package/dist/src/components/actor_template_card.stories.js +0 -154
- package/dist/src/components/actor_template_card.stories.js.map +0 -1
- package/dist/src/components/banner.stories.d.ts +0 -53
- package/dist/src/components/banner.stories.d.ts.map +0 -1
- package/dist/src/components/banner.stories.js +0 -132
- package/dist/src/components/banner.stories.js.map +0 -1
- package/dist/src/components/blog_article.stories.d.ts +0 -33
- package/dist/src/components/blog_article.stories.d.ts.map +0 -1
- package/dist/src/components/blog_article.stories.js +0 -92
- package/dist/src/components/blog_article.stories.js.map +0 -1
- package/dist/src/components/button.stories.d.ts +0 -6
- package/dist/src/components/button.stories.d.ts.map +0 -1
- package/dist/src/components/button.stories.js +0 -46
- package/dist/src/components/button.stories.js.map +0 -1
- package/dist/src/components/card_container.stories.d.ts +0 -10
- package/dist/src/components/card_container.stories.d.ts.map +0 -1
- package/dist/src/components/card_container.stories.js +0 -33
- package/dist/src/components/card_container.stories.js.map +0 -1
- package/dist/src/components/chip.stories.d.ts +0 -98
- package/dist/src/components/chip.stories.d.ts.map +0 -1
- package/dist/src/components/chip.stories.js +0 -251
- package/dist/src/components/chip.stories.js.map +0 -1
- package/dist/src/components/code/code_block/code_block_with_tabs.stories.d.ts +0 -23
- package/dist/src/components/code/code_block/code_block_with_tabs.stories.d.ts.map +0 -1
- package/dist/src/components/code/code_block/code_block_with_tabs.stories.js +0 -63
- package/dist/src/components/code/code_block/code_block_with_tabs.stories.js.map +0 -1
- package/dist/src/components/code/inline_code/inline_code.stories.d.ts +0 -16
- package/dist/src/components/code/inline_code/inline_code.stories.d.ts.map +0 -1
- package/dist/src/components/code/inline_code/inline_code.stories.js +0 -47
- package/dist/src/components/code/inline_code/inline_code.stories.js.map +0 -1
- package/dist/src/components/code/one_line_code/one_line_code.stories.d.ts +0 -16
- package/dist/src/components/code/one_line_code/one_line_code.stories.d.ts.map +0 -1
- package/dist/src/components/code/one_line_code/one_line_code.stories.js +0 -81
- package/dist/src/components/code/one_line_code/one_line_code.stories.js.map +0 -1
- package/dist/src/components/color_wheel_gradient.stories.d.ts +0 -38
- package/dist/src/components/color_wheel_gradient.stories.d.ts.map +0 -1
- package/dist/src/components/color_wheel_gradient.stories.js +0 -126
- package/dist/src/components/color_wheel_gradient.stories.js.map +0 -1
- package/dist/src/components/icon_button.stories.d.ts +0 -36
- package/dist/src/components/icon_button.stories.d.ts.map +0 -1
- package/dist/src/components/icon_button.stories.js +0 -59
- package/dist/src/components/icon_button.stories.js.map +0 -1
- package/dist/src/components/link.stories.d.ts +0 -22
- package/dist/src/components/link.stories.d.ts.map +0 -1
- package/dist/src/components/link.stories.js +0 -112
- package/dist/src/components/link.stories.js.map +0 -1
- package/dist/src/components/rating.stories.d.ts +0 -32
- package/dist/src/components/rating.stories.d.ts.map +0 -1
- package/dist/src/components/rating.stories.js +0 -95
- package/dist/src/components/rating.stories.js.map +0 -1
- package/dist/src/components/simple_markdown/simple_markdown.stories.d.ts +0 -8
- package/dist/src/components/simple_markdown/simple_markdown.stories.d.ts.map +0 -1
- package/dist/src/components/simple_markdown/simple_markdown.stories.js +0 -60
- package/dist/src/components/simple_markdown/simple_markdown.stories.js.map +0 -1
- package/dist/src/components/spinner.stories.d.ts +0 -8
- package/dist/src/components/spinner.stories.d.ts.map +0 -1
- package/dist/src/components/spinner.stories.js +0 -24
- package/dist/src/components/spinner.stories.js.map +0 -1
- package/dist/src/components/tabs/tab.stories.d.ts +0 -38
- package/dist/src/components/tabs/tab.stories.d.ts.map +0 -1
- package/dist/src/components/tabs/tab.stories.js +0 -88
- package/dist/src/components/tabs/tab.stories.js.map +0 -1
- package/dist/src/components/text/text.stories.d.ts +0 -13
- package/dist/src/components/text/text.stories.d.ts.map +0 -1
- package/dist/src/components/text/text.stories.js +0 -14
- package/dist/src/components/text/text.stories.js.map +0 -1
- package/dist/src/design_system/tokens/radiuses.stories.d.ts +0 -6
- package/dist/src/design_system/tokens/radiuses.stories.d.ts.map +0 -1
- package/dist/src/design_system/tokens/radiuses.stories.js +0 -30
- package/dist/src/design_system/tokens/radiuses.stories.js.map +0 -1
- package/dist/src/design_system/tokens/shadows.stories.d.ts +0 -6
- package/dist/src/design_system/tokens/shadows.stories.d.ts.map +0 -1
- package/dist/src/design_system/tokens/shadows.stories.js +0 -37
- package/dist/src/design_system/tokens/shadows.stories.js.map +0 -1
- package/dist/src/design_system/tokens/spaces.stories.d.ts +0 -10
- package/dist/src/design_system/tokens/spaces.stories.d.ts.map +0 -1
- package/dist/src/design_system/tokens/spaces.stories.js +0 -92
- package/dist/src/design_system/tokens/spaces.stories.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@apify/ui-library",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.113.0",
|
|
4
4
|
"description": "React UI library used by apify.com",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"It's not nice, but helps us to get around the problem of multiple react instances."
|
|
27
27
|
],
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@apify/ui-icons": "^1.
|
|
29
|
+
"@apify/ui-icons": "^1.27.0",
|
|
30
30
|
"@floating-ui/react": "^0.26.2",
|
|
31
31
|
"@react-hook/resize-observer": "^2.0.2",
|
|
32
32
|
"clsx": "^2.0.0",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"styled-components": "^6.1.19"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
|
-
"@storybook/react-vite": "^
|
|
54
|
+
"@storybook/react-vite": "^10.1.9",
|
|
55
55
|
"@types/hast": "^3.0.4",
|
|
56
56
|
"@types/lodash": "^4.14.200",
|
|
57
57
|
"@types/react": "19.2.2",
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"src",
|
|
65
65
|
"style"
|
|
66
66
|
],
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "a1683f75a0ada9cb934e4fb313dab2765241b96e"
|
|
68
68
|
}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import type { ComponentProps } from 'react';
|
|
3
|
-
import { ActionLink, BackLink } from './action_link.js';
|
|
4
|
-
type ActionLinkProps = ComponentProps<typeof ActionLink>;
|
|
5
|
-
type BackLinkProps = ComponentProps<typeof BackLink>;
|
|
6
|
-
declare const _default: Meta<ActionLinkProps>;
|
|
7
|
-
export default _default;
|
|
8
|
-
type Story = StoryObj<ActionLinkProps>;
|
|
9
|
-
type BackStory = StoryObj<BackLinkProps>;
|
|
10
|
-
/**
|
|
11
|
-
* Default story for ActionLink.
|
|
12
|
-
* Shows the basic usage with text and a right arrow icon.
|
|
13
|
-
*/
|
|
14
|
-
export declare const Default: Story;
|
|
15
|
-
/**
|
|
16
|
-
* ActionLink with a longer text content.
|
|
17
|
-
* Demonstrates how the component handles longer text labels.
|
|
18
|
-
*/
|
|
19
|
-
export declare const LongText: Story;
|
|
20
|
-
/**
|
|
21
|
-
* ActionLink with custom content props.
|
|
22
|
-
* Shows how additional props can be passed to the internal Heading component.
|
|
23
|
-
*/
|
|
24
|
-
export declare const WithContentProps: Story;
|
|
25
|
-
/**
|
|
26
|
-
* ActionLink rendered as a button element.
|
|
27
|
-
* Demonstrates the flexibility of the 'as' prop for different HTML elements.
|
|
28
|
-
*/
|
|
29
|
-
export declare const AsButton: Story;
|
|
30
|
-
/**
|
|
31
|
-
* Default story for BackLink.
|
|
32
|
-
* Shows the basic usage with text and a left arrow icon for navigation back.
|
|
33
|
-
*/
|
|
34
|
-
export declare const BackLinkDefault: BackStory;
|
|
35
|
-
/**
|
|
36
|
-
* BackLink with shorter text.
|
|
37
|
-
* Demonstrates the BackLink component with minimal text content.
|
|
38
|
-
*/
|
|
39
|
-
export declare const BackLinkShort: BackStory;
|
|
40
|
-
/**
|
|
41
|
-
* BackLink rendered as a button.
|
|
42
|
-
* Shows BackLink flexibility with different HTML elements.
|
|
43
|
-
*/
|
|
44
|
-
export declare const BackLinkAsButton: BackStory;
|
|
45
|
-
/**
|
|
46
|
-
* ActionLink with external URL.
|
|
47
|
-
* Demonstrates usage for external navigation with proper URL.
|
|
48
|
-
*/
|
|
49
|
-
export declare const ExternalLink: Story;
|
|
50
|
-
//# sourceMappingURL=action_link.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"action_link.stories.d.ts","sourceRoot":"","sources":["../../../src/components/action_link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAExD,KAAK,eAAe,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AACzD,KAAK,aAAa,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;wBAsChD,IAAI,CAAC,eAAe,CAAC;AApC1B,wBAoC2B;AAE3B,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AACvC,KAAK,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAEzC;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,SAM7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,SAM3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,SAO9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC"}
|
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { ActionLink, BackLink } from './action_link.js';
|
|
3
|
-
export default {
|
|
4
|
-
title: 'UI-Library/ActionLink',
|
|
5
|
-
component: ActionLink,
|
|
6
|
-
argTypes: {
|
|
7
|
-
children: {
|
|
8
|
-
control: 'text',
|
|
9
|
-
description: 'The text content of the link.',
|
|
10
|
-
},
|
|
11
|
-
to: {
|
|
12
|
-
control: 'text',
|
|
13
|
-
description: 'The URL that the link points to.',
|
|
14
|
-
},
|
|
15
|
-
as: {
|
|
16
|
-
control: 'text',
|
|
17
|
-
description: 'Component to render as (default is the Link component, which is an anchor).',
|
|
18
|
-
},
|
|
19
|
-
contentProps: {
|
|
20
|
-
control: 'object',
|
|
21
|
-
description: 'Additional props passed to the Heading component.',
|
|
22
|
-
},
|
|
23
|
-
target: {
|
|
24
|
-
control: 'select',
|
|
25
|
-
options: ['_self', '_blank', '_parent', '_top'],
|
|
26
|
-
description: 'Target window for the link.',
|
|
27
|
-
},
|
|
28
|
-
onClick: {
|
|
29
|
-
action: 'clicked',
|
|
30
|
-
description: 'Click event handler.',
|
|
31
|
-
},
|
|
32
|
-
},
|
|
33
|
-
parameters: {
|
|
34
|
-
design: {
|
|
35
|
-
type: 'figma',
|
|
36
|
-
url: 'TODO: Add Figma URL',
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
};
|
|
40
|
-
/**
|
|
41
|
-
* Default story for ActionLink.
|
|
42
|
-
* Shows the basic usage with text and a right arrow icon.
|
|
43
|
-
*/
|
|
44
|
-
export const Default = {
|
|
45
|
-
args: {
|
|
46
|
-
children: 'Continue reading',
|
|
47
|
-
to: '#',
|
|
48
|
-
},
|
|
49
|
-
};
|
|
50
|
-
/**
|
|
51
|
-
* ActionLink with a longer text content.
|
|
52
|
-
* Demonstrates how the component handles longer text labels.
|
|
53
|
-
*/
|
|
54
|
-
export const LongText = {
|
|
55
|
-
args: {
|
|
56
|
-
children: 'Learn more about our comprehensive documentation',
|
|
57
|
-
to: '#',
|
|
58
|
-
},
|
|
59
|
-
};
|
|
60
|
-
/**
|
|
61
|
-
* ActionLink with custom content props.
|
|
62
|
-
* Shows how additional props can be passed to the internal Heading component.
|
|
63
|
-
*/
|
|
64
|
-
export const WithContentProps = {
|
|
65
|
-
args: {
|
|
66
|
-
children: 'Explore features',
|
|
67
|
-
to: '#',
|
|
68
|
-
contentProps: {
|
|
69
|
-
style: { fontWeight: 'bold' },
|
|
70
|
-
},
|
|
71
|
-
},
|
|
72
|
-
};
|
|
73
|
-
/**
|
|
74
|
-
* ActionLink rendered as a button element.
|
|
75
|
-
* Demonstrates the flexibility of the 'as' prop for different HTML elements.
|
|
76
|
-
*/
|
|
77
|
-
export const AsButton = {
|
|
78
|
-
args: {
|
|
79
|
-
children: 'Submit form',
|
|
80
|
-
as: 'button',
|
|
81
|
-
onClick: () => console.log('Button clicked'),
|
|
82
|
-
},
|
|
83
|
-
};
|
|
84
|
-
/**
|
|
85
|
-
* Default story for BackLink.
|
|
86
|
-
* Shows the basic usage with text and a left arrow icon for navigation back.
|
|
87
|
-
*/
|
|
88
|
-
export const BackLinkDefault = {
|
|
89
|
-
render: (args) => _jsx(BackLink, { ...args }),
|
|
90
|
-
args: {
|
|
91
|
-
children: 'Back to previous page',
|
|
92
|
-
to: '#',
|
|
93
|
-
},
|
|
94
|
-
};
|
|
95
|
-
/**
|
|
96
|
-
* BackLink with shorter text.
|
|
97
|
-
* Demonstrates the BackLink component with minimal text content.
|
|
98
|
-
*/
|
|
99
|
-
export const BackLinkShort = {
|
|
100
|
-
render: (args) => _jsx(BackLink, { ...args }),
|
|
101
|
-
args: {
|
|
102
|
-
children: 'Back',
|
|
103
|
-
to: '#',
|
|
104
|
-
},
|
|
105
|
-
};
|
|
106
|
-
/**
|
|
107
|
-
* BackLink rendered as a button.
|
|
108
|
-
* Shows BackLink flexibility with different HTML elements.
|
|
109
|
-
*/
|
|
110
|
-
export const BackLinkAsButton = {
|
|
111
|
-
render: (args) => _jsx(BackLink, { ...args }),
|
|
112
|
-
args: {
|
|
113
|
-
children: 'Go back',
|
|
114
|
-
as: 'button',
|
|
115
|
-
onClick: () => console.log('Back button clicked'),
|
|
116
|
-
},
|
|
117
|
-
};
|
|
118
|
-
/**
|
|
119
|
-
* ActionLink with external URL.
|
|
120
|
-
* Demonstrates usage for external navigation with proper URL.
|
|
121
|
-
*/
|
|
122
|
-
export const ExternalLink = {
|
|
123
|
-
args: {
|
|
124
|
-
children: 'Visit our website',
|
|
125
|
-
to: 'https://apify.com',
|
|
126
|
-
target: '_blank',
|
|
127
|
-
},
|
|
128
|
-
};
|
|
129
|
-
//# sourceMappingURL=action_link.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"action_link.stories.js","sourceRoot":"","sources":["../../../src/components/action_link.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import type React from 'react';
|
|
3
|
-
interface ActorTemplateCardProps {
|
|
4
|
-
id: string;
|
|
5
|
-
label: string;
|
|
6
|
-
description: string;
|
|
7
|
-
icons: React.ReactNode[];
|
|
8
|
-
useCases?: string[];
|
|
9
|
-
}
|
|
10
|
-
declare const _default: Meta<ActorTemplateCardProps>;
|
|
11
|
-
export default _default;
|
|
12
|
-
type Story = StoryObj<ActorTemplateCardProps>;
|
|
13
|
-
/**
|
|
14
|
-
* Default story showing the basic ActorTemplateCard with standard props
|
|
15
|
-
*/
|
|
16
|
-
export declare const Default: Story;
|
|
17
|
-
/**
|
|
18
|
-
* Card with a starter badge to indicate it's beginner-friendly
|
|
19
|
-
*/
|
|
20
|
-
export declare const WithStarterBadge: Story;
|
|
21
|
-
/**
|
|
22
|
-
* Card with an AI badge to indicate it uses artificial intelligence
|
|
23
|
-
*/
|
|
24
|
-
export declare const WithAIBadge: Story;
|
|
25
|
-
/**
|
|
26
|
-
* Card with both starter and AI badges
|
|
27
|
-
*/
|
|
28
|
-
export declare const WithMultipleBadges: Story;
|
|
29
|
-
/**
|
|
30
|
-
* Card with a single icon
|
|
31
|
-
*/
|
|
32
|
-
export declare const WithSingleIcon: Story;
|
|
33
|
-
/**
|
|
34
|
-
* Card with multiple icons to test flex-wrap behavior
|
|
35
|
-
*/
|
|
36
|
-
export declare const WithMultipleIcons: Story;
|
|
37
|
-
/**
|
|
38
|
-
* Card with a long description to test text truncation
|
|
39
|
-
*/
|
|
40
|
-
export declare const WithLongDescription: Story;
|
|
41
|
-
/**
|
|
42
|
-
* Card with no badges to show the clean appearance without use cases
|
|
43
|
-
*/
|
|
44
|
-
export declare const WithoutBadges: Story;
|
|
45
|
-
/**
|
|
46
|
-
* Card with a very short description
|
|
47
|
-
*/
|
|
48
|
-
export declare const WithShortDescription: Story;
|
|
49
|
-
//# sourceMappingURL=actor_template_card.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"actor_template_card.stories.d.ts","sourceRoot":"","sources":["../../../src/components/actor_template_card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,sBAAsB;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACvB;wBA8CI,IAAI,CAAC,sBAAsB,CAAC;AA3BjC,wBA2BkC;AAElC,KAAK,KAAK,GAAG,QAAQ,CAAC,sBAAsB,CAAC,CAAC;AAE9C;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAQ9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAQhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAQ/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAWjC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAQlC,CAAC"}
|
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { ActorTemplateCard } from './actor_template_card.js';
|
|
3
|
-
// Mock icons for the stories
|
|
4
|
-
const mockIcons = [
|
|
5
|
-
_jsx("img", { src: "https://apify.com/img/template-icons/typescript.svg", alt: "Icon A" }, "1"),
|
|
6
|
-
_jsx("img", { src: "https://apify.com/img/template-icons/typescript.svg", alt: "Icon B" }, "2"),
|
|
7
|
-
];
|
|
8
|
-
const singleIcon = [
|
|
9
|
-
_jsx("img", { src: "https://apify.com/img/template-icons/typescript.svg", alt: "Single Icon" }, "1"),
|
|
10
|
-
];
|
|
11
|
-
const multipleIcons = [
|
|
12
|
-
_jsx("img", { src: "https://apify.com/img/template-icons/typescript.svg", alt: "Icon 1" }, "1"),
|
|
13
|
-
_jsx("img", { src: "https://apify.com/img/template-icons/typescript.svg", alt: "Icon 2" }, "2"),
|
|
14
|
-
_jsx("img", { src: "https://apify.com/img/template-icons/typescript.svg", alt: "Icon 3" }, "3"),
|
|
15
|
-
_jsx("img", { src: "https://apify.com/img/template-icons/typescript.svg", alt: "Icon 4" }, "4"),
|
|
16
|
-
];
|
|
17
|
-
export default {
|
|
18
|
-
title: 'UI-Library/ActorTemplateCard',
|
|
19
|
-
component: ActorTemplateCard,
|
|
20
|
-
argTypes: {
|
|
21
|
-
id: {
|
|
22
|
-
control: 'text',
|
|
23
|
-
},
|
|
24
|
-
label: {
|
|
25
|
-
control: 'text',
|
|
26
|
-
},
|
|
27
|
-
description: {
|
|
28
|
-
control: 'text',
|
|
29
|
-
},
|
|
30
|
-
icons: {
|
|
31
|
-
control: false,
|
|
32
|
-
},
|
|
33
|
-
useCases: {
|
|
34
|
-
control: 'select',
|
|
35
|
-
options: [undefined, ['STARTER'], ['AI'], ['STARTER', 'AI']],
|
|
36
|
-
},
|
|
37
|
-
},
|
|
38
|
-
parameters: {
|
|
39
|
-
design: {
|
|
40
|
-
type: 'figma',
|
|
41
|
-
url: 'TODO: Add Figma URL',
|
|
42
|
-
},
|
|
43
|
-
},
|
|
44
|
-
};
|
|
45
|
-
/**
|
|
46
|
-
* Default story showing the basic ActorTemplateCard with standard props
|
|
47
|
-
*/
|
|
48
|
-
export const Default = {
|
|
49
|
-
args: {
|
|
50
|
-
id: 'web-scraper',
|
|
51
|
-
label: 'Web Scraper',
|
|
52
|
-
description: 'A versatile web scraper that can extract data from any website. Perfect for beginners and professionals alike.',
|
|
53
|
-
icons: mockIcons,
|
|
54
|
-
},
|
|
55
|
-
};
|
|
56
|
-
/**
|
|
57
|
-
* Card with a starter badge to indicate it's beginner-friendly
|
|
58
|
-
*/
|
|
59
|
-
export const WithStarterBadge = {
|
|
60
|
-
args: {
|
|
61
|
-
id: 'simple-scraper',
|
|
62
|
-
label: 'Simple Website Scraper',
|
|
63
|
-
description: 'An easy-to-use scraper designed for beginners. Start scraping websites with minimal configuration.',
|
|
64
|
-
icons: singleIcon,
|
|
65
|
-
useCases: ['STARTER'],
|
|
66
|
-
},
|
|
67
|
-
};
|
|
68
|
-
/**
|
|
69
|
-
* Card with an AI badge to indicate it uses artificial intelligence
|
|
70
|
-
*/
|
|
71
|
-
export const WithAIBadge = {
|
|
72
|
-
args: {
|
|
73
|
-
id: 'ai-scraper',
|
|
74
|
-
label: 'AI-Powered Data Extractor',
|
|
75
|
-
description: 'Advanced scraper using artificial intelligence to intelligently extract and structure data from complex websites.',
|
|
76
|
-
icons: mockIcons,
|
|
77
|
-
useCases: ['AI'],
|
|
78
|
-
},
|
|
79
|
-
};
|
|
80
|
-
/**
|
|
81
|
-
* Card with both starter and AI badges
|
|
82
|
-
*/
|
|
83
|
-
export const WithMultipleBadges = {
|
|
84
|
-
args: {
|
|
85
|
-
id: 'ai-starter-scraper',
|
|
86
|
-
label: 'AI Scraper for Beginners',
|
|
87
|
-
description: 'An AI-powered scraper designed specifically for newcomers. Get the power of AI with beginner-friendly setup.',
|
|
88
|
-
icons: mockIcons,
|
|
89
|
-
useCases: ['STARTER', 'AI'],
|
|
90
|
-
},
|
|
91
|
-
};
|
|
92
|
-
/**
|
|
93
|
-
* Card with a single icon
|
|
94
|
-
*/
|
|
95
|
-
export const WithSingleIcon = {
|
|
96
|
-
args: {
|
|
97
|
-
id: 'single-icon-scraper',
|
|
98
|
-
label: 'E-commerce Scraper',
|
|
99
|
-
description: 'Specialized scraper for e-commerce websites. Extract product information, prices, and reviews efficiently.',
|
|
100
|
-
icons: singleIcon,
|
|
101
|
-
useCases: ['STARTER'],
|
|
102
|
-
},
|
|
103
|
-
};
|
|
104
|
-
/**
|
|
105
|
-
* Card with multiple icons to test flex-wrap behavior
|
|
106
|
-
*/
|
|
107
|
-
export const WithMultipleIcons = {
|
|
108
|
-
args: {
|
|
109
|
-
id: 'multi-icon-scraper',
|
|
110
|
-
label: 'Universal Data Scraper',
|
|
111
|
-
description: 'A comprehensive scraper supporting multiple data formats and websites. Works with JSON, XML, HTML, and more.',
|
|
112
|
-
icons: multipleIcons,
|
|
113
|
-
useCases: ['AI'],
|
|
114
|
-
},
|
|
115
|
-
};
|
|
116
|
-
/**
|
|
117
|
-
* Card with a long description to test text truncation
|
|
118
|
-
*/
|
|
119
|
-
export const WithLongDescription = {
|
|
120
|
-
args: {
|
|
121
|
-
id: 'long-description-scraper',
|
|
122
|
-
label: 'Advanced Web Scraper',
|
|
123
|
-
description: 'This is a very comprehensive web scraper that can handle complex websites with dynamic content, '
|
|
124
|
-
+ 'JavaScript rendering, pagination, infinite scroll, CAPTCHA solving, proxy rotation, and much more. '
|
|
125
|
-
+ 'It includes advanced features like data validation, duplicate detection, rate limiting, and export to '
|
|
126
|
-
+ 'multiple formats including CSV, JSON, XML, and direct database connections.',
|
|
127
|
-
icons: mockIcons,
|
|
128
|
-
useCases: ['STARTER', 'AI'],
|
|
129
|
-
},
|
|
130
|
-
};
|
|
131
|
-
/**
|
|
132
|
-
* Card with no badges to show the clean appearance without use cases
|
|
133
|
-
*/
|
|
134
|
-
export const WithoutBadges = {
|
|
135
|
-
args: {
|
|
136
|
-
id: 'no-badges-scraper',
|
|
137
|
-
label: 'Basic Web Scraper',
|
|
138
|
-
description: 'A straightforward web scraper without any special categorization. Perfect for general-purpose data extraction.',
|
|
139
|
-
icons: mockIcons,
|
|
140
|
-
},
|
|
141
|
-
};
|
|
142
|
-
/**
|
|
143
|
-
* Card with a very short description
|
|
144
|
-
*/
|
|
145
|
-
export const WithShortDescription = {
|
|
146
|
-
args: {
|
|
147
|
-
id: 'short-description-scraper',
|
|
148
|
-
label: 'Quick Scraper',
|
|
149
|
-
description: 'Fast and simple.',
|
|
150
|
-
icons: singleIcon,
|
|
151
|
-
useCases: ['STARTER'],
|
|
152
|
-
},
|
|
153
|
-
};
|
|
154
|
-
//# sourceMappingURL=actor_template_card.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"actor_template_card.stories.js","sourceRoot":"","sources":["../../../src/components/actor_template_card.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import type React from 'react';
|
|
3
|
-
interface BannerProps {
|
|
4
|
-
background?: string;
|
|
5
|
-
useGradientBackground?: boolean;
|
|
6
|
-
width?: string;
|
|
7
|
-
className?: string;
|
|
8
|
-
children: React.ReactNode;
|
|
9
|
-
}
|
|
10
|
-
declare const _default: Meta<BannerProps>;
|
|
11
|
-
export default _default;
|
|
12
|
-
type Story = StoryObj<BannerProps>;
|
|
13
|
-
/**
|
|
14
|
-
* Default banner with gradient background enabled
|
|
15
|
-
*/
|
|
16
|
-
export declare const Default: Story;
|
|
17
|
-
/**
|
|
18
|
-
* Banner with gradient background enabled (explicitly set to true)
|
|
19
|
-
*/
|
|
20
|
-
export declare const WithGradientBackground: Story;
|
|
21
|
-
/**
|
|
22
|
-
* Banner without gradient background - shows solid background color
|
|
23
|
-
*/
|
|
24
|
-
export declare const WithoutGradientBackground: Story;
|
|
25
|
-
/**
|
|
26
|
-
* Banner with custom background color
|
|
27
|
-
*/
|
|
28
|
-
export declare const WithCustomBackground: Story;
|
|
29
|
-
/**
|
|
30
|
-
* Banner with custom background color and gradient overlay
|
|
31
|
-
*/
|
|
32
|
-
export declare const WithCustomBackgroundAndGradient: Story;
|
|
33
|
-
/**
|
|
34
|
-
* Banner with custom width
|
|
35
|
-
*/
|
|
36
|
-
export declare const WithCustomWidth: Story;
|
|
37
|
-
/**
|
|
38
|
-
* Banner with minimal content
|
|
39
|
-
*/
|
|
40
|
-
export declare const WithMinimalContent: Story;
|
|
41
|
-
/**
|
|
42
|
-
* Banner with rich content including buttons and links
|
|
43
|
-
*/
|
|
44
|
-
export declare const WithRichContent: Story;
|
|
45
|
-
/**
|
|
46
|
-
* Banner with warning/alert styling
|
|
47
|
-
*/
|
|
48
|
-
export declare const WarningBanner: Story;
|
|
49
|
-
/**
|
|
50
|
-
* Banner with success/positive messaging
|
|
51
|
-
*/
|
|
52
|
-
export declare const SuccessBanner: Story;
|
|
53
|
-
//# sourceMappingURL=banner.stories.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"banner.stories.d.ts","sourceRoot":"","sources":["../../../src/components/banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,WAAW;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;wBA4BI,IAAI,CAAC,WAAW,CAAC;AA1BtB,wBA0BuB;AAEvB,KAAK,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAcpC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,yBAAyB,EAAE,KAYvC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAelC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,EAAE,KAe7C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAc7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAQhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAuC7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAC"}
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Banner } from './banner.js';
|
|
3
|
-
export default {
|
|
4
|
-
title: 'UI-Library/Banner',
|
|
5
|
-
component: Banner,
|
|
6
|
-
argTypes: {
|
|
7
|
-
background: {
|
|
8
|
-
control: 'text',
|
|
9
|
-
},
|
|
10
|
-
useGradientBackground: {
|
|
11
|
-
control: 'boolean',
|
|
12
|
-
},
|
|
13
|
-
width: {
|
|
14
|
-
control: 'text',
|
|
15
|
-
},
|
|
16
|
-
className: {
|
|
17
|
-
control: 'text',
|
|
18
|
-
},
|
|
19
|
-
children: {
|
|
20
|
-
control: false,
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
parameters: {
|
|
24
|
-
design: {
|
|
25
|
-
type: 'figma',
|
|
26
|
-
url: 'TODO: Add Figma URL',
|
|
27
|
-
},
|
|
28
|
-
},
|
|
29
|
-
};
|
|
30
|
-
/**
|
|
31
|
-
* Default banner with gradient background enabled
|
|
32
|
-
*/
|
|
33
|
-
export const Default = {
|
|
34
|
-
args: {
|
|
35
|
-
children: (_jsxs("div", { children: [_jsx("h2", { style: { margin: 0, marginBottom: '8px', color: 'white' }, children: "Welcome to Apify" }), _jsx("p", { style: { margin: 0, color: 'rgba(255, 255, 255, 0.8)' }, children: "Build reliable web scrapers. Fast." })] })),
|
|
36
|
-
},
|
|
37
|
-
};
|
|
38
|
-
/**
|
|
39
|
-
* Banner with gradient background enabled (explicitly set to true)
|
|
40
|
-
*/
|
|
41
|
-
export const WithGradientBackground = {
|
|
42
|
-
args: {
|
|
43
|
-
useGradientBackground: true,
|
|
44
|
-
children: (_jsxs("div", { children: [_jsx("h2", { style: { margin: 0, marginBottom: '8px', color: 'white' }, children: "Gradient Background Banner" }), _jsx("p", { style: { margin: 0, color: 'rgba(255, 255, 255, 0.8)' }, children: "This banner uses the beautiful gradient background with colorful shapes." })] })),
|
|
45
|
-
},
|
|
46
|
-
};
|
|
47
|
-
/**
|
|
48
|
-
* Banner without gradient background - shows solid background color
|
|
49
|
-
*/
|
|
50
|
-
export const WithoutGradientBackground = {
|
|
51
|
-
args: {
|
|
52
|
-
useGradientBackground: false,
|
|
53
|
-
children: (_jsxs("div", { children: [_jsx("h2", { style: { margin: 0, marginBottom: '8px' }, children: "Simple Banner" }), _jsx("p", { style: { margin: 0, opacity: 0.7 }, children: "This banner uses a simple solid background without gradient effects." })] })),
|
|
54
|
-
},
|
|
55
|
-
};
|
|
56
|
-
/**
|
|
57
|
-
* Banner with custom background color
|
|
58
|
-
*/
|
|
59
|
-
export const WithCustomBackground = {
|
|
60
|
-
args: {
|
|
61
|
-
background: '#4CAF50',
|
|
62
|
-
useGradientBackground: false,
|
|
63
|
-
children: (_jsxs("div", { children: [_jsx("h2", { style: { margin: 0, marginBottom: '8px', color: 'white' }, children: "Custom Green Background" }), _jsx("p", { style: { margin: 0, color: 'rgba(255, 255, 255, 0.9)' }, children: "This banner has a custom green background color." })] })),
|
|
64
|
-
},
|
|
65
|
-
};
|
|
66
|
-
/**
|
|
67
|
-
* Banner with custom background color and gradient overlay
|
|
68
|
-
*/
|
|
69
|
-
export const WithCustomBackgroundAndGradient = {
|
|
70
|
-
args: {
|
|
71
|
-
background: '#2196F3',
|
|
72
|
-
useGradientBackground: true,
|
|
73
|
-
children: (_jsxs("div", { children: [_jsx("h2", { style: { margin: 0, marginBottom: '8px', color: 'white' }, children: "Blue Background with Gradient" }), _jsx("p", { style: { margin: 0, color: 'rgba(255, 255, 255, 0.9)' }, children: "Custom blue background with gradient overlay effects." })] })),
|
|
74
|
-
},
|
|
75
|
-
};
|
|
76
|
-
/**
|
|
77
|
-
* Banner with custom width
|
|
78
|
-
*/
|
|
79
|
-
export const WithCustomWidth = {
|
|
80
|
-
args: {
|
|
81
|
-
width: '600px',
|
|
82
|
-
children: (_jsxs("div", { children: [_jsx("h2", { style: { margin: 0, marginBottom: '8px', color: 'white' }, children: "Custom Width Banner" }), _jsx("p", { style: { margin: 0, color: 'rgba(255, 255, 255, 0.8)' }, children: "This banner has a fixed width of 600px instead of 100%." })] })),
|
|
83
|
-
},
|
|
84
|
-
};
|
|
85
|
-
/**
|
|
86
|
-
* Banner with minimal content
|
|
87
|
-
*/
|
|
88
|
-
export const WithMinimalContent = {
|
|
89
|
-
args: {
|
|
90
|
-
children: (_jsx("p", { style: { margin: 0, color: 'white', textAlign: 'center' }, children: "Simple announcement message" })),
|
|
91
|
-
},
|
|
92
|
-
};
|
|
93
|
-
/**
|
|
94
|
-
* Banner with rich content including buttons and links
|
|
95
|
-
*/
|
|
96
|
-
export const WithRichContent = {
|
|
97
|
-
args: {
|
|
98
|
-
children: (_jsxs("div", { children: [_jsx("h1", { style: { margin: 0, marginBottom: '12px', color: 'white', fontSize: '2rem' }, children: "\uD83D\uDE80 New Feature Launch" }), _jsx("p", { style: { margin: 0, marginBottom: '16px', color: 'rgba(255, 255, 255, 0.9)' }, children: "We've just released our most powerful web scraping tools yet. Experience faster, more reliable data extraction with our enhanced platform." }), _jsxs("div", { style: { display: 'flex', gap: '12px', alignItems: 'center' }, children: [_jsx("button", { type: "button", style: {
|
|
99
|
-
padding: '8px 16px',
|
|
100
|
-
backgroundColor: 'white',
|
|
101
|
-
color: '#333',
|
|
102
|
-
border: 'none',
|
|
103
|
-
borderRadius: '4px',
|
|
104
|
-
fontWeight: 'bold',
|
|
105
|
-
cursor: 'pointer',
|
|
106
|
-
}, children: "Get Started" }), _jsx("a", { href: "#", style: {
|
|
107
|
-
color: 'white',
|
|
108
|
-
textDecoration: 'underline',
|
|
109
|
-
}, children: "Learn more" })] })] })),
|
|
110
|
-
},
|
|
111
|
-
};
|
|
112
|
-
/**
|
|
113
|
-
* Banner with warning/alert styling
|
|
114
|
-
*/
|
|
115
|
-
export const WarningBanner = {
|
|
116
|
-
args: {
|
|
117
|
-
background: '#FF9800',
|
|
118
|
-
useGradientBackground: false,
|
|
119
|
-
children: (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' }, children: [_jsx("span", { style: { fontSize: '1.5rem' }, children: "\u26A0\uFE0F" }), _jsxs("div", { children: [_jsx("h3", { style: { margin: 0, marginBottom: '4px', color: 'white' }, children: "Maintenance Notice" }), _jsx("p", { style: { margin: 0, color: 'rgba(255, 255, 255, 0.9)' }, children: "Scheduled maintenance will occur on Sunday, 12:00-14:00 UTC." })] })] })),
|
|
120
|
-
},
|
|
121
|
-
};
|
|
122
|
-
/**
|
|
123
|
-
* Banner with success/positive messaging
|
|
124
|
-
*/
|
|
125
|
-
export const SuccessBanner = {
|
|
126
|
-
args: {
|
|
127
|
-
background: '#4CAF50',
|
|
128
|
-
useGradientBackground: false,
|
|
129
|
-
children: (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' }, children: [_jsx("span", { style: { fontSize: '1.5rem' }, children: "\u2705" }), _jsxs("div", { children: [_jsx("h3", { style: { margin: 0, marginBottom: '4px', color: 'white' }, children: "Migration Complete" }), _jsx("p", { style: { margin: 0, color: 'rgba(255, 255, 255, 0.9)' }, children: "Your account has been successfully migrated to our new platform." })] })] })),
|
|
130
|
-
},
|
|
131
|
-
};
|
|
132
|
-
//# sourceMappingURL=banner.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"banner.stories.js","sourceRoot":"","sources":["../../../src/components/banner.stories.tsx"],"names":[],"mappings":"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"}
|