@apify/ui-library 1.138.2-featpublictasks-2f3d3c.52 → 1.138.3

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 (91) hide show
  1. package/dist/src/components/chip.d.ts.map +1 -1
  2. package/dist/src/components/chip.js +2 -25
  3. package/dist/src/components/chip.js.map +1 -1
  4. package/dist/src/components/collapsible_card/collapsible_card.d.ts +2 -3
  5. package/dist/src/components/collapsible_card/collapsible_card.d.ts.map +1 -1
  6. package/dist/src/components/collapsible_card/collapsible_card.js +2 -2
  7. package/dist/src/components/collapsible_card/collapsible_card.js.map +1 -1
  8. package/dist/src/components/floating/floating_component_base.d.ts +1 -72
  9. package/dist/src/components/floating/floating_component_base.d.ts.map +1 -1
  10. package/dist/src/components/floating/floating_component_base.js +36 -66
  11. package/dist/src/components/floating/floating_component_base.js.map +1 -1
  12. package/dist/src/components/floating/tooltip.d.ts +3 -10
  13. package/dist/src/components/floating/tooltip.d.ts.map +1 -1
  14. package/dist/src/components/floating/tooltip.js +20 -24
  15. package/dist/src/components/floating/tooltip.js.map +1 -1
  16. package/dist/src/components/index.d.ts +0 -2
  17. package/dist/src/components/index.d.ts.map +1 -1
  18. package/dist/src/components/index.js +0 -2
  19. package/dist/src/components/index.js.map +1 -1
  20. package/dist/tsconfig.build.tsbuildinfo +1 -1
  21. package/package.json +4 -4
  22. package/src/components/chip.tsx +1 -27
  23. package/src/components/collapsible_card/collapsible_card.tsx +4 -6
  24. package/src/components/floating/floating_component_base.tsx +47 -89
  25. package/src/components/floating/tooltip.tsx +25 -53
  26. package/src/components/index.ts +0 -2
  27. package/dist/src/components/actor_example/actor_example.utils.d.ts +0 -17
  28. package/dist/src/components/actor_example/actor_example.utils.d.ts.map +0 -1
  29. package/dist/src/components/actor_example/actor_example.utils.js +0 -41
  30. package/dist/src/components/actor_example/actor_example.utils.js.map +0 -1
  31. package/dist/src/components/actor_example/actor_example_avatar.d.ts +0 -13
  32. package/dist/src/components/actor_example/actor_example_avatar.d.ts.map +0 -1
  33. package/dist/src/components/actor_example/actor_example_avatar.js +0 -34
  34. package/dist/src/components/actor_example/actor_example_avatar.js.map +0 -1
  35. package/dist/src/components/actor_example/actor_example_card.d.ts +0 -28
  36. package/dist/src/components/actor_example/actor_example_card.d.ts.map +0 -1
  37. package/dist/src/components/actor_example/actor_example_card.js +0 -79
  38. package/dist/src/components/actor_example/actor_example_card.js.map +0 -1
  39. package/dist/src/components/actor_example/actor_example_preview.d.ts +0 -28
  40. package/dist/src/components/actor_example/actor_example_preview.d.ts.map +0 -1
  41. package/dist/src/components/actor_example/actor_example_preview.js +0 -208
  42. package/dist/src/components/actor_example/actor_example_preview.js.map +0 -1
  43. package/dist/src/components/actor_example/actor_example_run_button.d.ts +0 -33
  44. package/dist/src/components/actor_example/actor_example_run_button.d.ts.map +0 -1
  45. package/dist/src/components/actor_example/actor_example_run_button.js +0 -12
  46. package/dist/src/components/actor_example/actor_example_run_button.js.map +0 -1
  47. package/dist/src/components/actor_example/actor_example_schema.d.ts +0 -20
  48. package/dist/src/components/actor_example/actor_example_schema.d.ts.map +0 -1
  49. package/dist/src/components/actor_example/actor_example_schema.js +0 -27
  50. package/dist/src/components/actor_example/actor_example_schema.js.map +0 -1
  51. package/dist/src/components/actor_example/actor_example_schema_field.d.ts +0 -19
  52. package/dist/src/components/actor_example/actor_example_schema_field.d.ts.map +0 -1
  53. package/dist/src/components/actor_example/actor_example_schema_field.js +0 -33
  54. package/dist/src/components/actor_example/actor_example_schema_field.js.map +0 -1
  55. package/dist/src/components/actor_example/actor_example_schema_field_badge.d.ts +0 -9
  56. package/dist/src/components/actor_example/actor_example_schema_field_badge.d.ts.map +0 -1
  57. package/dist/src/components/actor_example/actor_example_schema_field_badge.js +0 -48
  58. package/dist/src/components/actor_example/actor_example_schema_field_badge.js.map +0 -1
  59. package/dist/src/components/actor_example/actor_example_schema_legend.d.ts +0 -10
  60. package/dist/src/components/actor_example/actor_example_schema_legend.d.ts.map +0 -1
  61. package/dist/src/components/actor_example/actor_example_schema_legend.js +0 -29
  62. package/dist/src/components/actor_example/actor_example_schema_legend.js.map +0 -1
  63. package/dist/src/components/actor_example/actor_example_schema_property.d.ts +0 -24
  64. package/dist/src/components/actor_example/actor_example_schema_property.d.ts.map +0 -1
  65. package/dist/src/components/actor_example/actor_example_schema_property.js +0 -122
  66. package/dist/src/components/actor_example/actor_example_schema_property.js.map +0 -1
  67. package/dist/src/components/actor_example/index.d.ts +0 -11
  68. package/dist/src/components/actor_example/index.d.ts.map +0 -1
  69. package/dist/src/components/actor_example/index.js +0 -11
  70. package/dist/src/components/actor_example/index.js.map +0 -1
  71. package/dist/src/components/browser_window/browser_window.d.ts +0 -20
  72. package/dist/src/components/browser_window/browser_window.d.ts.map +0 -1
  73. package/dist/src/components/browser_window/browser_window.js +0 -72
  74. package/dist/src/components/browser_window/browser_window.js.map +0 -1
  75. package/dist/src/components/browser_window/index.d.ts +0 -2
  76. package/dist/src/components/browser_window/index.d.ts.map +0 -1
  77. package/dist/src/components/browser_window/index.js +0 -2
  78. package/dist/src/components/browser_window/index.js.map +0 -1
  79. package/src/components/actor_example/actor_example.utils.ts +0 -52
  80. package/src/components/actor_example/actor_example_avatar.tsx +0 -69
  81. package/src/components/actor_example/actor_example_card.tsx +0 -149
  82. package/src/components/actor_example/actor_example_preview.tsx +0 -295
  83. package/src/components/actor_example/actor_example_run_button.tsx +0 -61
  84. package/src/components/actor_example/actor_example_schema.tsx +0 -60
  85. package/src/components/actor_example/actor_example_schema_field.tsx +0 -87
  86. package/src/components/actor_example/actor_example_schema_field_badge.tsx +0 -66
  87. package/src/components/actor_example/actor_example_schema_legend.tsx +0 -49
  88. package/src/components/actor_example/actor_example_schema_property.tsx +0 -242
  89. package/src/components/actor_example/index.ts +0 -10
  90. package/src/components/browser_window/browser_window.tsx +0 -106
  91. package/src/components/browser_window/index.ts +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"actor_example_schema_legend.js","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_schema_legend.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAIvC,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,6BAA6B,EAAE,MAAM,0BAA0B,CAAC;AACzE,OAAO,EAAE,4BAA4B,EAAE,MAAM,uCAAuC,CAAC;AAErF,MAAM,iBAAiB,GAAkC,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;AAE5G,MAAM,CAAC,MAAM,kCAAkC,GAAG;IAC9C,IAAI,EAAE,6BAA6B;IACnC,IAAI,EAAE,mCAAmC;CAC5C,CAAC;AAEF,MAAM,+BAA+B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;WAIvC,KAAK,CAAC,KAAK,CAAC,OAAO;;OAEvB,kCAAkC,CAAC,IAAI;;;eAG/B,KAAK,CAAC,KAAK,CAAC,MAAM;;CAEhC,CAAC;AAMF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EAAE,SAAS,EAAS,EAAE,EAAE,CAAC,CAC9D,KAAC,+BAA+B,IAAC,SAAS,EAAE,IAAI,CAAC,kCAAkC,CAAC,IAAI,EAAE,SAAS,CAAC,YAC/F,iBAAiB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QAC5B,MAAM,MAAM,GAAG,6BAA6B,CAAC,IAAI,CAAC,CAAC;QACnD,OAAO,CACH,gBAAiB,SAAS,EAAE,kCAAkC,CAAC,IAAI,aAC/D,KAAC,4BAA4B,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,GAAI,EACjE,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAC,QAAQ,YACvC,MAAM,CAAC,KAAK,GACV,KAJA,IAAI,CAKR,CACV,CAAC;IACN,CAAC,CAAC,GAC4B,CACrC,CAAC"}
@@ -1,24 +0,0 @@
1
- import type { ReactNode } from 'react';
2
- import type { ActorExampleSchemaFieldSerialized } from '@apify-packages/types';
3
- export declare const actorExampleSchemaPropertyClassNames: {
4
- ROOT: string;
5
- LEADING: string;
6
- TYPE: string;
7
- NAME: string;
8
- DELIMITER: string;
9
- VALUE: string;
10
- TOGGLE: string;
11
- PRESERVED: string;
12
- INFO: string;
13
- };
14
- type Props = ActorExampleSchemaFieldSerialized & {
15
- className?: string;
16
- isCollapsable?: boolean;
17
- isCollapsed?: boolean;
18
- onToggleCollapsed?: (id: string) => void;
19
- /** Optional slot rendered before the type badge (e.g. a checkbox in a configurator). */
20
- leadingSlot?: ReactNode;
21
- };
22
- export declare const ActorExampleSchemaProperty: ({ type, _id, name, title, description, value, required, isCollapsable, isCollapsed, onToggleCollapsed, leadingSlot, className, }: Props) => import("react/jsx-runtime").JSX.Element;
23
- export {};
24
- //# sourceMappingURL=actor_example_schema_property.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"actor_example_schema_property.d.ts","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_schema_property.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAE,iCAAiC,EAA+B,MAAM,uBAAuB,CAAC;AAgC5G,eAAO,MAAM,oCAAoC;;;;;;;;;;CAUhD,CAAC;AAgFF,KAAK,KAAK,GAAG,iCAAiC,GAAG;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,wFAAwF;IACxF,WAAW,CAAC,EAAE,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,0BAA0B,GAAI,kIAaxC,KAAK,4CA2FP,CAAC"}
@@ -1,122 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import clsx from 'clsx';
3
- import styled, { css } from 'styled-components';
4
- import { ChevronDownIcon, QuestionMarkIcon } from '@apify/ui-icons';
5
- import { theme } from '../../design_system/theme.js';
6
- import { Tooltip } from '../floating/tooltip.js';
7
- import { Text } from '../text/index.js';
8
- import { actorExampleSchemaPropertyMap } from './actor_example.utils.js';
9
- import { ActorExampleSchemaFieldBadge } from './actor_example_schema_field_badge.js';
10
- const normalizePropertyValue = (type, value) => {
11
- if (type === 'object' || value == null)
12
- return undefined;
13
- if (Array.isArray(value)) {
14
- const first = value[0];
15
- if (first == null || typeof first === 'object')
16
- return undefined;
17
- const normalizedFirst = String(first).trim();
18
- if (normalizedFirst.length === 0)
19
- return undefined;
20
- return { value: normalizedFirst, remainingValues: value.length - 1 };
21
- }
22
- const normalizedValue = String(value).trim();
23
- if (normalizedValue.length === 0)
24
- return undefined;
25
- return { value: normalizedValue, remainingValues: 0 };
26
- };
27
- export const actorExampleSchemaPropertyClassNames = {
28
- ROOT: 'actor-example-schema-property',
29
- LEADING: 'actor-example-schema-property__leading',
30
- TYPE: 'actor-example-schema-property__type',
31
- NAME: 'actor-example-schema-property__name',
32
- DELIMITER: 'actor-example-schema-property__delimiter',
33
- VALUE: 'actor-example-schema-property__value',
34
- TOGGLE: 'actor-example-schema-property__toggle',
35
- PRESERVED: 'actor-example-schema-property__preserved',
36
- INFO: 'actor-example-schema-property__info',
37
- };
38
- const ActorExampleSchemaPropertyWrapper = styled.div `
39
- width: 100%;
40
- min-width: 0;
41
- display: flex;
42
- align-items: center;
43
- gap: ${theme.space.space4};
44
-
45
- .${actorExampleSchemaPropertyClassNames.LEADING} {
46
- flex-shrink: 0;
47
- display: inline-flex;
48
- align-items: center;
49
- }
50
-
51
- .${actorExampleSchemaPropertyClassNames.TOGGLE} {
52
- all: unset;
53
- width: 2rem;
54
- height: 2rem;
55
- cursor: pointer;
56
- display: flex;
57
- align-items: center;
58
- justify-content: center;
59
- transition: transform 0.2s ease-in-out;
60
-
61
- ${({ $isCollapsed }) => $isCollapsed &&
62
- css `
63
- transform: rotate(-90deg);
64
- `}
65
- }
66
-
67
- .${actorExampleSchemaPropertyClassNames.TYPE} {
68
- margin-right: ${theme.space.space4};
69
- flex-shrink: 0;
70
- }
71
-
72
- .${actorExampleSchemaPropertyClassNames.NAME} {
73
- min-width: 1ch;
74
- ${({ $type }) => ($type === 'object' || $type === 'array') &&
75
- css `
76
- font-weight: 600;
77
- `}
78
- text-overflow: ellipsis;
79
- white-space: nowrap;
80
- overflow: hidden;
81
- }
82
-
83
- .${actorExampleSchemaPropertyClassNames.DELIMITER} {
84
- display: inline-flex;
85
- flex-shrink: 0;
86
- }
87
-
88
- .${actorExampleSchemaPropertyClassNames.VALUE} {
89
- min-width: 0;
90
- margin-left: ${theme.space.space4};
91
- padding: 1px ${theme.space.space6};
92
- border: 1px solid ${theme.color.neutral.border};
93
- border-radius: ${theme.radius.radius4};
94
- text-overflow: ellipsis;
95
- white-space: nowrap;
96
- overflow: hidden;
97
- }
98
-
99
- .${actorExampleSchemaPropertyClassNames.PRESERVED} {
100
- margin-left: 0;
101
- flex-shrink: 0;
102
- }
103
-
104
- .${actorExampleSchemaPropertyClassNames.INFO} {
105
- flex-shrink: 0;
106
- color: ${theme.color.neutral.textSubtle};
107
- display: inline-flex;
108
- align-items: center;
109
- }
110
- `;
111
- const MIN_PROPERTY_NAME_LENGTH_PRESERVATION = 3;
112
- export const ActorExampleSchemaProperty = ({ type, _id, name, title, description, value, required = false, isCollapsable = false, isCollapsed = false, onToggleCollapsed, leadingSlot, className, }) => {
113
- const tooltip = type ? actorExampleSchemaPropertyMap[type]?.title : undefined;
114
- const normalizedName = title ?? name;
115
- const normalizedValue = normalizePropertyValue(type, value);
116
- return (_jsxs(ActorExampleSchemaPropertyWrapper, { "$type": type, "$isCollapsed": isCollapsed, className: clsx(actorExampleSchemaPropertyClassNames.ROOT, className), children: [leadingSlot && _jsx("span", { className: actorExampleSchemaPropertyClassNames.LEADING, children: leadingSlot }), isCollapsable && (_jsx("button", { type: "button", className: actorExampleSchemaPropertyClassNames.TOGGLE, onClick: () => onToggleCollapsed?.(_id), children: _jsx(ChevronDownIcon, { size: "16" }) })), _jsx(Tooltip, { content: tooltip, className: actorExampleSchemaPropertyClassNames.TYPE, children: _jsx(ActorExampleSchemaFieldBadge, { type: type, title: normalizedName, className: tooltip == null ? actorExampleSchemaPropertyClassNames.TYPE : undefined }) }), _jsx(Text, { as: "span", weight: "medium", className: clsx(actorExampleSchemaPropertyClassNames.NAME, {
117
- [actorExampleSchemaPropertyClassNames.PRESERVED]: normalizedName.length <= MIN_PROPERTY_NAME_LENGTH_PRESERVATION,
118
- }), children: normalizedName }), required && (_jsx(Text, { as: "span", size: "small", weight: "medium", color: theme.color.neutral.textSubtle, className: actorExampleSchemaPropertyClassNames.PRESERVED, children: "(required)" })), description && (_jsx(Tooltip, { content: description, className: actorExampleSchemaPropertyClassNames.INFO, children: _jsx(QuestionMarkIcon, { size: "16" }) })), normalizedValue && (_jsxs(_Fragment, { children: [_jsx(Text, { as: "span", weight: "medium", className: actorExampleSchemaPropertyClassNames.DELIMITER, children: ":" }), _jsx(Text, { as: "span", size: "small", weight: "medium", className: clsx(actorExampleSchemaPropertyClassNames.VALUE, {
119
- [actorExampleSchemaPropertyClassNames.PRESERVED]: normalizedValue.value.length <= MIN_PROPERTY_NAME_LENGTH_PRESERVATION,
120
- }), children: normalizedValue.value }), normalizedValue.remainingValues > 0 && (_jsxs(Text, { as: "span", size: "small", weight: "medium", className: clsx(actorExampleSchemaPropertyClassNames.VALUE, actorExampleSchemaPropertyClassNames.PRESERVED), children: ["+", normalizedValue.remainingValues] }))] }))] }));
121
- };
122
- //# sourceMappingURL=actor_example_schema_property.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"actor_example_schema_property.js","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_schema_property.tsx"],"names":[],"mappings":"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"}
@@ -1,11 +0,0 @@
1
- export * from './actor_example_avatar.js';
2
- export * from './actor_example_card.js';
3
- export * from './actor_example_preview.js';
4
- export * from './actor_example_run_button.js';
5
- export * from './actor_example_schema.js';
6
- export * from './actor_example_schema_field.js';
7
- export * from './actor_example_schema_field_badge.js';
8
- export * from './actor_example_schema_legend.js';
9
- export * from './actor_example_schema_property.js';
10
- export * from './actor_example.utils.js';
11
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/actor_example/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AACtD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,0BAA0B,CAAC"}
@@ -1,11 +0,0 @@
1
- export * from './actor_example_avatar.js';
2
- export * from './actor_example_card.js';
3
- export * from './actor_example_preview.js';
4
- export * from './actor_example_run_button.js';
5
- export * from './actor_example_schema.js';
6
- export * from './actor_example_schema_field.js';
7
- export * from './actor_example_schema_field_badge.js';
8
- export * from './actor_example_schema_legend.js';
9
- export * from './actor_example_schema_property.js';
10
- export * from './actor_example.utils.js';
11
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/actor_example/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AACtD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,0BAA0B,CAAC"}
@@ -1,20 +0,0 @@
1
- import type { ReactNode } from 'react';
2
- declare const classNames: {
3
- readonly ROOT: "browser-window";
4
- readonly HEADER: "browser-window__header";
5
- readonly DOTS: "browser-window__dots";
6
- readonly DOT: "browser-window__dot";
7
- readonly URL: "browser-window__url";
8
- readonly TITLE: "browser-window__title";
9
- readonly CONTAINER: "browser-window__container";
10
- readonly CONTENT: "browser-window__content";
11
- };
12
- export { classNames as browserWindowClassNames };
13
- type Props = {
14
- title: string;
15
- url?: ReactNode;
16
- children: ReactNode;
17
- className?: string;
18
- };
19
- export declare const BrowserWindow: ({ title, url, children, className }: Props) => import("react/jsx-runtime").JSX.Element;
20
- //# sourceMappingURL=browser_window.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"browser_window.d.ts","sourceRoot":"","sources":["../../../../src/components/browser_window/browser_window.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,QAAA,MAAM,UAAU;;;;;;;;;CASN,CAAC;AAEX,OAAO,EAAE,UAAU,IAAI,uBAAuB,EAAE,CAAC;AAuDjD,KAAK,KAAK,GAAG;IACT,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,qCAAqC,KAAK,4CAyBvE,CAAC"}
@@ -1,72 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import clsx from 'clsx';
3
- import styled from 'styled-components';
4
- import { theme } from '../../design_system/theme.js';
5
- import { Badge } from '../badge.js';
6
- const classNames = {
7
- ROOT: 'browser-window',
8
- HEADER: 'browser-window__header',
9
- DOTS: 'browser-window__dots',
10
- DOT: 'browser-window__dot',
11
- URL: 'browser-window__url',
12
- TITLE: 'browser-window__title',
13
- CONTAINER: 'browser-window__container',
14
- CONTENT: 'browser-window__content',
15
- };
16
- export { classNames as browserWindowClassNames };
17
- const BrowserWindowWrapper = styled.div `
18
- border: 1px solid ${theme.color.neutral.separatorSubtle};
19
- border-radius: ${theme.radius.radius12};
20
- background-color: ${theme.color.neutral.background};
21
- overflow: hidden;
22
-
23
- .${classNames.HEADER} {
24
- display: flex;
25
- align-items: center;
26
- gap: ${theme.space.space8};
27
- padding: ${theme.space.space6} ${theme.space.space8};
28
- border-bottom: 1px solid ${theme.color.neutral.separatorSubtle};
29
- background-color: ${theme.color.neutral.backgroundMuted};
30
- }
31
-
32
- .${classNames.DOTS} {
33
- display: flex;
34
- gap: 0.3rem;
35
- flex-shrink: 0;
36
- }
37
-
38
- .${classNames.DOT} {
39
- width: 0.6rem;
40
- height: 0.6rem;
41
- border-radius: 50%;
42
- background-color: ${theme.color.neutral.separatorSubtle};
43
- }
44
-
45
- .${classNames.URL} {
46
- width: 100%;
47
- min-width: 0;
48
- justify-content: flex-start;
49
- color: ${theme.color.neutral.textSubtle};
50
-
51
- span {
52
- min-width: 0;
53
- text-overflow: ellipsis;
54
- white-space: nowrap;
55
- overflow: hidden;
56
- }
57
- }
58
-
59
- .${classNames.TITLE} {
60
- margin-left: auto;
61
- flex-shrink: 0;
62
- }
63
-
64
- .${classNames.CONTAINER} {
65
- min-width: 0;
66
- overflow-x: auto;
67
- }
68
- `;
69
- export const BrowserWindow = ({ title, url, children, className }) => {
70
- return (_jsxs(BrowserWindowWrapper, { className: clsx(classNames.ROOT, className), children: [_jsxs("div", { className: classNames.HEADER, children: [url && (_jsxs(_Fragment, { children: [_jsxs("div", { className: classNames.DOTS, children: [_jsx("span", { className: classNames.DOT }), _jsx("span", { className: classNames.DOT }), _jsx("span", { className: classNames.DOT })] }), _jsx(Badge, { size: "extra_small", variant: "neutral_subtle", className: classNames.URL, children: url })] })), _jsx(Badge, { size: "extra_small", className: classNames.TITLE, children: title })] }), _jsx("div", { className: classNames.CONTAINER, children: _jsx("div", { className: classNames.CONTENT, children: children }) })] }));
71
- };
72
- //# sourceMappingURL=browser_window.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"browser_window.js","sourceRoot":"","sources":["../../../../src/components/browser_window/browser_window.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,UAAU,GAAG;IACf,IAAI,EAAE,gBAAgB;IACtB,MAAM,EAAE,wBAAwB;IAChC,IAAI,EAAE,sBAAsB;IAC5B,GAAG,EAAE,qBAAqB;IAC1B,GAAG,EAAE,qBAAqB;IAC1B,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,2BAA2B;IACtC,OAAO,EAAE,yBAAyB;CAC5B,CAAC;AAEX,OAAO,EAAE,UAAU,IAAI,uBAAuB,EAAE,CAAC;AAEjD,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;wBACf,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe;qBACtC,KAAK,CAAC,MAAM,CAAC,QAAQ;wBAClB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU;;;OAG/C,UAAU,CAAC,MAAM;;;eAGT,KAAK,CAAC,KAAK,CAAC,MAAM;mBACd,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM;mCACxB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe;4BAC1C,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe;;;OAGxD,UAAU,CAAC,IAAI;;;;;;OAMf,UAAU,CAAC,GAAG;;;;4BAIO,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe;;;OAGxD,UAAU,CAAC,GAAG;;;;iBAIJ,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU;;;;;;;;;;OAUxC,UAAU,CAAC,KAAK;;;;;OAKhB,UAAU,CAAC,SAAS;;;;CAI1B,CAAC;AASF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAS,EAAE,EAAE;IACxE,OAAO,CACH,MAAC,oBAAoB,IAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,aAC7D,eAAK,SAAS,EAAE,UAAU,CAAC,MAAM,aAC5B,GAAG,IAAI,CACJ,8BACI,eAAK,SAAS,EAAE,UAAU,CAAC,IAAI,aAC3B,eAAM,SAAS,EAAE,UAAU,CAAC,GAAG,GAAI,EACnC,eAAM,SAAS,EAAE,UAAU,CAAC,GAAG,GAAI,EACnC,eAAM,SAAS,EAAE,UAAU,CAAC,GAAG,GAAI,IACjC,EACN,KAAC,KAAK,IAAC,IAAI,EAAC,aAAa,EAAC,OAAO,EAAC,gBAAgB,EAAC,SAAS,EAAE,UAAU,CAAC,GAAG,YACvE,GAAG,GACA,IACT,CACN,EACD,KAAC,KAAK,IAAC,IAAI,EAAC,aAAa,EAAC,SAAS,EAAE,UAAU,CAAC,KAAK,YAChD,KAAK,GACF,IACN,EACN,cAAK,SAAS,EAAE,UAAU,CAAC,SAAS,YAChC,cAAK,SAAS,EAAE,UAAU,CAAC,OAAO,YAAG,QAAQ,GAAO,GAClD,IACa,CAC1B,CAAC;AACN,CAAC,CAAC"}
@@ -1,2 +0,0 @@
1
- export * from './browser_window.js';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/browser_window/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}
@@ -1,2 +0,0 @@
1
- export * from './browser_window.js';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/browser_window/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}
@@ -1,52 +0,0 @@
1
- import type { IconComponent } from '@apify/ui-icons';
2
- import { AnyIcon, BooleanIcon, MenuIcon, NumberIcon, ObjectIcon, TextIcon } from '@apify/ui-icons';
3
-
4
- import type { ActorExampleSchemaFieldType } from '@apify-packages/types';
5
-
6
- export type ActorExampleSchemaPropertyConfig = {
7
- Icon: IconComponent;
8
- title: string;
9
- backgroundColor: string;
10
- textColor: string;
11
- };
12
-
13
- /**
14
- * Per-type display config used by the schema field components (badge icon, hover tooltip,
15
- * background/text colors). The `var(--actor-schema-field-*)` references are declared on the
16
- * `ActorExampleSchemaFieldBadgeWrapper` styled component itself (with a dark-mode override via
17
- * `html[data-theme='dark'] &`), so the vars are scoped to the badge — no globals are injected.
18
- */
19
- export const actorExampleSchemaPropertyMap: Record<ActorExampleSchemaFieldType, ActorExampleSchemaPropertyConfig> = {
20
- string: {
21
- Icon: TextIcon,
22
- title: 'Text',
23
- backgroundColor: 'var(--actor-schema-field-string-background)',
24
- textColor: 'var(--actor-schema-field-string-text)',
25
- },
26
- number: {
27
- Icon: NumberIcon,
28
- title: 'Number',
29
- backgroundColor: 'var(--actor-schema-field-number-background)',
30
- textColor: 'var(--actor-schema-field-number-text)',
31
- },
32
- boolean: {
33
- Icon: BooleanIcon,
34
- title: 'Boolean',
35
- backgroundColor: 'var(--actor-schema-field-boolean-background)',
36
- textColor: 'var(--actor-schema-field-boolean-text)',
37
- },
38
- array: {
39
- Icon: MenuIcon,
40
- title: 'List',
41
- backgroundColor: 'var(--actor-schema-field-array-background)',
42
- textColor: 'var(--actor-schema-field-array-text)',
43
- },
44
- object: {
45
- Icon: ObjectIcon,
46
- title: 'Object',
47
- backgroundColor: 'var(--actor-schema-field-object-background)',
48
- textColor: 'var(--actor-schema-field-object-text)',
49
- },
50
- };
51
-
52
- export const actorExampleSchemaPropertyDefaultIcon = AnyIcon;
@@ -1,69 +0,0 @@
1
- import { clsx } from 'clsx';
2
- import type React from 'react';
3
- import { useCallback, useMemo } from 'react';
4
- import styled from 'styled-components';
5
-
6
- import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
7
-
8
- const DEFAULT_SIZE = 36;
9
-
10
- export const actorExampleAvatarClassNames = {
11
- ROOT: 'actor-example-avatar',
12
- };
13
-
14
- const ActorExampleAvatarWrapper = styled.img`
15
- flex-shrink: 0;
16
- object-fit: cover;
17
- `;
18
-
19
- export type ActorExampleAvatarProps = {
20
- title?: string;
21
- name: string;
22
- pictureUrl?: string;
23
- fallbackPictureUrl: string;
24
- size?: number;
25
- className?: string;
26
- };
27
-
28
- export const ActorExampleAvatar = ({
29
- title,
30
- name,
31
- pictureUrl,
32
- fallbackPictureUrl,
33
- size = DEFAULT_SIZE,
34
- className,
35
- }: ActorExampleAvatarProps) => {
36
- const { generateProxyImageUrl } = useSharedUiDependencies();
37
-
38
- // Mirrors apify-web's `<Image defaultSrc=…>` behaviour: if the primary src fails to load,
39
- // swap in the fallback so the `<img>` element is always present.
40
- const handlePictureError = useCallback(
41
- (event: React.SyntheticEvent<HTMLImageElement>) => {
42
- if (!event.currentTarget.src.endsWith(fallbackPictureUrl)) {
43
- // eslint-disable-next-line no-param-reassign
44
- event.currentTarget.src = fallbackPictureUrl;
45
- // eslint-disable-next-line no-param-reassign
46
- event.currentTarget.srcset = fallbackPictureUrl;
47
- }
48
- },
49
- [fallbackPictureUrl],
50
- );
51
-
52
- const proxyPictureUrl = useMemo(() => {
53
- if (!generateProxyImageUrl || !pictureUrl) return pictureUrl;
54
- return generateProxyImageUrl(pictureUrl, { resize: { height: size * 2, width: size * 2 } });
55
- }, [pictureUrl, generateProxyImageUrl, size]);
56
-
57
- const src = proxyPictureUrl || fallbackPictureUrl;
58
-
59
- return (
60
- <ActorExampleAvatarWrapper
61
- src={src}
62
- alt={title ?? name}
63
- width={size}
64
- height={size}
65
- className={clsx(actorExampleAvatarClassNames.ROOT, className)}
66
- onError={handlePictureError}
67
- />
68
- );
69
- };
@@ -1,149 +0,0 @@
1
- import { clsx } from 'clsx';
2
- import styled from 'styled-components';
3
-
4
- import { ExternalLinkIcon } from '@apify/ui-icons';
5
-
6
- import { theme } from '../../design_system/theme.js';
7
- import { Badge } from '../badge.js';
8
- import { Box } from '../box.js';
9
- import { Button } from '../button.js';
10
- import { Heading } from '../text/index.js';
11
- import { ActorExampleRunButton, ActorExampleRunButtonLightningIcon } from './actor_example_run_button.js';
12
-
13
- export const actorExampleCardClassNames = {
14
- ROOT: 'actor-example-card',
15
- CONTENT: 'actor-example-card__content',
16
- BADGE: 'actor-example-card__badge',
17
- TITLE: 'actor-example-card__title',
18
- FOOTER: 'actor-example-card__footer',
19
- RUN_BUTTON: 'actor-example-card__run-button',
20
- DETAIL_BUTTON: 'actor-example-card__detail-button',
21
- };
22
-
23
- const ActorExampleCardWrapper = styled(Box)`
24
- min-width: 0;
25
- background-color: ${theme.color.neutral.background};
26
- border: 1px solid ${theme.color.neutral.border};
27
- border-radius: ${theme.radius.radius12};
28
- overflow: hidden;
29
-
30
- .${actorExampleCardClassNames.CONTENT} {
31
- padding: ${theme.space.space16};
32
- display: flex;
33
- flex-direction: column;
34
- gap: ${theme.space.space8};
35
- }
36
-
37
- .${actorExampleCardClassNames.BADGE} {
38
- min-width: 0;
39
- max-width: 100%;
40
-
41
- span {
42
- min-width: 0;
43
- overflow: hidden;
44
- text-overflow: ellipsis;
45
- white-space: nowrap;
46
- }
47
- }
48
-
49
- .${actorExampleCardClassNames.TITLE} {
50
- min-height: 7.2rem; /* 3 lines of text with line-height 2.4rem */
51
- overflow: hidden;
52
- text-overflow: ellipsis;
53
- display: -webkit-box;
54
- -webkit-line-clamp: 3;
55
- -webkit-box-orient: vertical;
56
- }
57
-
58
- .${actorExampleCardClassNames.FOOTER} {
59
- padding: ${theme.space.space12} ${theme.space.space16};
60
- background-color: ${theme.color.neutral.backgroundMuted};
61
- display: grid;
62
- grid-template-columns: repeat(2, minmax(0, 1fr));
63
- gap: ${theme.space.space4};
64
- }
65
-
66
- .${actorExampleCardClassNames.RUN_BUTTON}, .${actorExampleCardClassNames.DETAIL_BUTTON} {
67
- min-width: 0;
68
-
69
- span {
70
- min-width: 0;
71
- overflow: hidden;
72
- text-overflow: ellipsis;
73
- white-space: nowrap;
74
- }
75
-
76
- svg {
77
- flex-shrink: 0;
78
- }
79
- }
80
- `;
81
-
82
- export type ActorExampleCardProps = {
83
- title: string;
84
- badge?: string;
85
- /** Owning actor's id — flows into the run button's analytics event. */
86
- actorId: string;
87
- runUrl: string;
88
- runLabel: string;
89
- /**
90
- * Tracking element id for the run button (e.g. `actorInfo.examples.run`). The card's
91
- * `title` is forwarded as `cardTitle` automatically.
92
- */
93
- runTrackingElement: string;
94
- detailUrl?: string;
95
- detailLabel: string;
96
- detailOpensInNewTab?: boolean;
97
- className?: string;
98
- };
99
-
100
- export const ActorExampleCard = ({
101
- title,
102
- badge,
103
- actorId,
104
- runUrl,
105
- runLabel,
106
- runTrackingElement,
107
- detailUrl,
108
- detailLabel,
109
- detailOpensInNewTab = true,
110
- className,
111
- }: ActorExampleCardProps) => (
112
- <ActorExampleCardWrapper className={clsx(actorExampleCardClassNames.ROOT, className)}>
113
- <Box className={actorExampleCardClassNames.CONTENT}>
114
- {badge && (
115
- <Badge size="extra_small" variant="primary_blue" className={actorExampleCardClassNames.BADGE}>
116
- {badge}
117
- </Badge>
118
- )}
119
- <Heading as="h2" className={actorExampleCardClassNames.TITLE}>
120
- {title}
121
- </Heading>
122
- </Box>
123
- <Box className={actorExampleCardClassNames.FOOTER}>
124
- <ActorExampleRunButton
125
- size="small"
126
- variant="secondary"
127
- actorId={actorId}
128
- consoleUrl={runUrl}
129
- trackingProps={{ element: runTrackingElement, cardTitle: title }}
130
- className={actorExampleCardClassNames.RUN_BUTTON}
131
- LeftIcon={ActorExampleRunButtonLightningIcon}
132
- >
133
- {runLabel}
134
- </ActorExampleRunButton>
135
- {detailUrl && detailLabel && (
136
- <Button
137
- size="small"
138
- variant="tertiary"
139
- to={detailUrl}
140
- target={detailOpensInNewTab ? '_blank' : undefined}
141
- className={actorExampleCardClassNames.DETAIL_BUTTON}
142
- RightIcon={ExternalLinkIcon}
143
- >
144
- {detailLabel}
145
- </Button>
146
- )}
147
- </Box>
148
- </ActorExampleCardWrapper>
149
- );