@apify/ui-library 0.63.2-featcodeblockwithtabs-5a4360.31 → 0.63.2-featcodeblockwithtabs-5a4360.32
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/src/components/code/code_block/code_block_with_tabs.d.ts +2 -1
- package/dist/src/components/code/code_block/code_block_with_tabs.d.ts.map +1 -1
- package/dist/src/components/code/code_block/code_block_with_tabs.js +59 -59
- package/dist/src/components/code/code_block/code_block_with_tabs.js.map +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/components/code/code_block/code_block_with_tabs.tsx +73 -72
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@apify/ui-library",
|
|
3
|
-
"version": "0.63.2-featcodeblockwithtabs-5a4360.
|
|
3
|
+
"version": "0.63.2-featcodeblockwithtabs-5a4360.32+1e905b277d8",
|
|
4
4
|
"description": "React UI library used by apify.com",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
@@ -66,5 +66,5 @@
|
|
|
66
66
|
"typescript": "^5.1.6",
|
|
67
67
|
"typescript-eslint": "^8.24.0"
|
|
68
68
|
},
|
|
69
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "1e905b277d80c7b4e02e1498fc1bd893de67a91e"
|
|
70
70
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import clsx from 'clsx';
|
|
2
|
+
import React from 'react';
|
|
2
3
|
import styled from 'styled-components';
|
|
3
4
|
|
|
4
5
|
import { theme } from '../../../design_system/theme.js';
|
|
@@ -8,9 +9,9 @@ import { CodeBlock, type CodeBlockProps } from './code_block.js';
|
|
|
8
9
|
|
|
9
10
|
export type CodeBlockTabKey = 'cli' | 'http' | 'javascript' | 'mcp' | 'openapi' | 'python' | 'typescript';
|
|
10
11
|
type CodeBlockTabConfig = {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
label: string;
|
|
13
|
+
language: string;
|
|
14
|
+
src: string;
|
|
14
15
|
};
|
|
15
16
|
|
|
16
17
|
const CODE_BLOCK_TAB_CATALOG: Record<CodeBlockTabKey, CodeBlockTabConfig> = {
|
|
@@ -57,15 +58,15 @@ const CODE_BLOCK_TAB_CATALOG: Record<CodeBlockTabKey, CodeBlockTabConfig> = {
|
|
|
57
58
|
type SharedCodeBlockProps = Omit<CodeBlockProps, 'content' | 'language' | 'defaultTabKey' | 'onTabChange'>;
|
|
58
59
|
type SharedLinkProps = Pick<RegularLinkProps, 'to' | 'rel' | 'target'>;
|
|
59
60
|
|
|
60
|
-
type CodeBlockTabProps = {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
61
|
+
export type CodeBlockTabProps = {
|
|
62
|
+
key: CodeBlockTabKey;
|
|
63
|
+
content: string;
|
|
64
|
+
onClick?: (e: React.MouseEvent) => void;
|
|
64
65
|
} & Partial<SharedLinkProps>;
|
|
65
66
|
|
|
66
67
|
type CodeBlockWithTabsProps = SharedCodeBlockProps & {
|
|
67
|
-
|
|
68
|
-
|
|
68
|
+
currentTabKey: CodeBlockTabKey;
|
|
69
|
+
tabs: CodeBlockTabProps[];
|
|
69
70
|
};
|
|
70
71
|
|
|
71
72
|
export const CODE_BLOCK_WITH_TABS_CLASSNAMES = {
|
|
@@ -76,74 +77,74 @@ export const CODE_BLOCK_WITH_TABS_CLASSNAMES = {
|
|
|
76
77
|
};
|
|
77
78
|
|
|
78
79
|
const CodeBlockWithTabsWrapper = styled.div`
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.${CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB} {
|
|
101
|
-
min-width: 64px;
|
|
102
|
-
position: relative;
|
|
103
|
-
padding: ${theme.space.space12} ${theme.space.space8};
|
|
104
|
-
color: ${theme.color.neutral.textMuted};
|
|
105
|
-
display: flex;
|
|
106
|
-
flex-direction: column;
|
|
107
|
-
flex-shrink: 0;
|
|
108
|
-
align-items: center;
|
|
109
|
-
justify-content: flex-end;
|
|
110
|
-
gap: ${theme.space.space4};
|
|
111
|
-
cursor: pointer;
|
|
112
|
-
|
|
113
|
-
img {
|
|
114
|
-
width: 20px;
|
|
115
|
-
height: 20px;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
[role="tabpanel"] {
|
|
119
|
-
bottom: 0;
|
|
120
|
-
width: 100%;
|
|
121
|
-
height: 2px;
|
|
122
|
-
color: ${theme.color.neutral.text};
|
|
123
|
-
background-color: ${theme.color.primaryBlack.action};
|
|
124
|
-
border-radius: ${theme.radius.radiusFull};
|
|
125
|
-
display: none;
|
|
126
|
-
position: absolute;
|
|
127
|
-
z-index: 2;
|
|
80
|
+
.${CODE_BLOCK_WITH_TABS_CLASSNAMES.TABS} {
|
|
81
|
+
min-width: 266px;
|
|
82
|
+
height: 72px;
|
|
83
|
+
padding-inline: ${theme.space.space8};
|
|
84
|
+
display: flex;
|
|
85
|
+
gap: ${theme.space.space4};
|
|
86
|
+
overflow-x: auto;
|
|
87
|
+
background-color: ${theme.color.neutral.backgroundSubtle};
|
|
88
|
+
border: 1px solid ${theme.color.neutral.border};
|
|
89
|
+
border-bottom: none;
|
|
90
|
+
border-top-right-radius: ${theme.radius.radius12};
|
|
91
|
+
border-top-left-radius: ${theme.radius.radius12};
|
|
92
|
+
|
|
93
|
+
@media ${theme.device.tablet} {
|
|
94
|
+
height: 88px;
|
|
95
|
+
justify-content: center;
|
|
96
|
+
gap: ${theme.space.space24};
|
|
97
|
+
padding-inline: ${theme.space.space24};
|
|
98
|
+
}
|
|
128
99
|
}
|
|
129
100
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
101
|
+
.${CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB} {
|
|
102
|
+
min-width: 64px;
|
|
103
|
+
position: relative;
|
|
104
|
+
padding: ${theme.space.space12} ${theme.space.space8};
|
|
105
|
+
color: ${theme.color.neutral.textMuted};
|
|
106
|
+
display: flex;
|
|
107
|
+
flex-direction: column;
|
|
108
|
+
flex-shrink: 0;
|
|
109
|
+
align-items: center;
|
|
110
|
+
justify-content: flex-end;
|
|
111
|
+
gap: ${theme.space.space4};
|
|
112
|
+
cursor: pointer;
|
|
113
|
+
|
|
114
|
+
img {
|
|
115
|
+
width: 20px;
|
|
116
|
+
height: 20px;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
[role="tabpanel"] {
|
|
120
|
+
bottom: 0;
|
|
121
|
+
width: 100%;
|
|
122
|
+
height: 2px;
|
|
123
|
+
color: ${theme.color.neutral.text};
|
|
124
|
+
background-color: ${theme.color.primaryBlack.action};
|
|
125
|
+
border-radius: ${theme.radius.radiusFull};
|
|
126
|
+
display: none;
|
|
127
|
+
position: absolute;
|
|
128
|
+
z-index: 2;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
&.selected {
|
|
132
|
+
[role="tabpanel"] {
|
|
133
|
+
display: block;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
&:hover {
|
|
138
|
+
color: ${theme.color.neutral.text};
|
|
139
|
+
text-decoration: none;
|
|
140
|
+
}
|
|
134
141
|
}
|
|
135
142
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
143
|
+
.${CODE_BLOCK_WITH_TABS_CLASSNAMES.CONTENT} {
|
|
144
|
+
max-width: initial;
|
|
145
|
+
border-top-left-radius: 0;
|
|
146
|
+
border-top-right-radius: 0;
|
|
139
147
|
}
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.${CODE_BLOCK_WITH_TABS_CLASSNAMES.CONTENT} {
|
|
143
|
-
max-width: initial;
|
|
144
|
-
border-top-left-radius: 0;
|
|
145
|
-
border-top-right-radius: 0;
|
|
146
|
-
}
|
|
147
148
|
`;
|
|
148
149
|
|
|
149
150
|
export const CodeBlockWithTabs = ({ currentTabKey, tabs, className, hideBashHeader = true, ...props }: CodeBlockWithTabsProps) => {
|