@apify/ui-library 0.63.1 → 0.63.2-featcodeblockwithtabs-5a4360.31
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.d.ts +2 -2
- package/dist/src/components/code/code_block/code_block.d.ts.map +1 -1
- package/dist/src/components/code/code_block/code_block.js +6 -6
- package/dist/src/components/code/code_block/code_block.js.map +1 -1
- package/dist/src/components/code/code_block/code_block_with_tabs.d.ts +23 -0
- package/dist/src/components/code/code_block/code_block_with_tabs.d.ts.map +1 -0
- package/dist/src/components/code/code_block/code_block_with_tabs.js +139 -0
- package/dist/src/components/code/code_block/code_block_with_tabs.js.map +1 -0
- package/dist/src/components/code/index.d.ts +1 -0
- package/dist/src/components/code/index.d.ts.map +1 -1
- package/dist/src/components/code/index.js +1 -0
- package/dist/src/components/code/index.js.map +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/components/code/code_block/code_block.tsx +9 -9
- package/src/components/code/code_block/code_block_with_tabs.tsx +208 -0
- package/src/components/code/index.ts +1 -0
|
@@ -11,7 +11,7 @@ type CodeTab = {
|
|
|
11
11
|
bashCommandsStart?: number[];
|
|
12
12
|
to?: string;
|
|
13
13
|
};
|
|
14
|
-
type CodeBlockProps = RegularBoxProps & {
|
|
14
|
+
export type CodeBlockProps = RegularBoxProps & {
|
|
15
15
|
content: string | CodeTab[];
|
|
16
16
|
size?: SharedTextSize;
|
|
17
17
|
language?: string | undefined;
|
|
@@ -33,6 +33,6 @@ type CodeBlockProps = RegularBoxProps & {
|
|
|
33
33
|
hideBashPromptPrefixes?: boolean;
|
|
34
34
|
hideLineNumbers?: boolean | undefined;
|
|
35
35
|
};
|
|
36
|
-
export declare
|
|
36
|
+
export declare const CodeBlock: ({ content, size, language, highlightLines, onTabChange, defaultTabKey, showGradient, hideBashHeader, showActionButton, fullWidth, actionButtonLabel, gradientRotation, hideLineNumbers, fullHeight, title, hideCopyButton, bashCommandsStart, hideBashPromptPrefixes, onActionButtonClick, ...rest }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;
|
|
37
37
|
export {};
|
|
38
38
|
//# sourceMappingURL=code_block.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code_block.d.ts","sourceRoot":"","sources":["../../../../../src/components/code/code_block/code_block.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAIpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAMhE,KAAK,OAAO,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;CACf,CAAA;AAqED,
|
|
1
|
+
{"version":3,"file":"code_block.d.ts","sourceRoot":"","sources":["../../../../../src/components/code/code_block/code_block.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAIpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAMhE,KAAK,OAAO,GAAG;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;CACf,CAAA;AAqED,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG;IAC3C,OAAO,EAAE,MAAM,GAAG,OAAO,EAAE,CAAC;IAC5B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACzE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACzC,CAAA;AAED,eAAO,MAAM,SAAS,ySAqBnB,cAAc,4CAmGhB,CAAC"}
|
|
@@ -9,10 +9,10 @@ import { SyntaxHighlighter } from '../syntax_highlighter.js';
|
|
|
9
9
|
import { CodeBlockWrapper } from './code_block.styled.js';
|
|
10
10
|
import { mapPrefixToBashLine } from './utils.js';
|
|
11
11
|
const LANGUAGES_WITHOUT_LINE_NUMBERS = ['json', 'jsonp', 'jsonp', 'rss', 'yaml', 'xml', 'html', 'bash', 'text', 'dockerfile', 'http'];
|
|
12
|
-
|
|
12
|
+
const HeaderDots = () => {
|
|
13
13
|
return (_jsxs("div", { className: "CodeBlock-HederDotsWrapper", children: [_jsx("div", { className: "CodeBlock-HeaderDot" }), _jsx("div", { className: "CodeBlock-HeaderDot" }), _jsx("div", { className: "CodeBlock-HeaderDot" })] }));
|
|
14
|
-
}
|
|
15
|
-
|
|
14
|
+
};
|
|
15
|
+
const Header = ({ tabs, currentTab, showBashHeader, onTabChange, title, }) => {
|
|
16
16
|
return (_jsxs("div", { className: "CodeBlock-Header", children: [showBashHeader && _jsx(HeaderDots, {}), title && (_jsx(Text, { weight: "bold", className: "CodeBlock-HeaderTitle", children: title })), _jsx("div", { className: "CodeBlock-HeaderTabsWrapper", children: tabs?.map((tab) => {
|
|
17
17
|
const selected = tab.key === currentTab?.key;
|
|
18
18
|
const props = {
|
|
@@ -27,8 +27,8 @@ function Header({ tabs, currentTab, showBashHeader, onTabChange, title, }) {
|
|
|
27
27
|
}
|
|
28
28
|
return (_jsx("div", { ...props, children: label }, tab.key));
|
|
29
29
|
}) })] }));
|
|
30
|
-
}
|
|
31
|
-
export
|
|
30
|
+
};
|
|
31
|
+
export const CodeBlock = ({ content, size, language, highlightLines, onTabChange, defaultTabKey, showGradient, hideBashHeader, showActionButton, fullWidth, actionButtonLabel, gradientRotation = 340, hideLineNumbers, fullHeight, title, hideCopyButton, bashCommandsStart, hideBashPromptPrefixes, onActionButtonClick, ...rest }) => {
|
|
32
32
|
const isMultiTab = content instanceof Array;
|
|
33
33
|
const defaultTab = isMultiTab
|
|
34
34
|
? content.find((tab) => tab.key === defaultTabKey) ?? content[0]
|
|
@@ -65,5 +65,5 @@ export function CodeBlock({ content, size, language, highlightLines, onTabChange
|
|
|
65
65
|
return { data: data.join(' ') };
|
|
66
66
|
}, [currentHighlightLines, showBashPrompt, currentBashLinesPrefixes]);
|
|
67
67
|
return (_jsxs(CodeBlockWrapper, { "$hasHeader": showHeader, "$gradientRotation": gradientRotation, "$hasActionButton": showActionButton, "$hasTabs": isMultiTab, "$fullWidth": fullWidth, "$fullHeight": fullHeight, "$showLineNumbers": showLineNumbers, ...rest, children: [showHeader && (_jsx(Header, { tabs: isMultiTab ? content : null, currentTab: currentTab, onTabChange: handleTabClick, showBashHeader: showBashHeader, title: title })), _jsx(SyntaxHighlighter, { showLineNumbers: true, wrapLines: true, language: currentLanguage, size: size, lineProps: getLineProps, ref: syntaxHighlighterRef, children: currentCode }), _jsxs("div", { className: "CodeBlock-TopRightActionsWrapper", children: [showActionButton && _jsx(ActionButton, { successStyle: true, onClick: onActionButtonClick, children: actionButtonLabel ?? 'Run on Apify' }), !hideCopyButton && _jsx(CopyButton, { code: currentCode })] }), showGradient && (_jsx(ColorWheelGradient, { className: "CodeBlock-Gradient", blurSize: 69 }))] }));
|
|
68
|
-
}
|
|
68
|
+
};
|
|
69
69
|
//# sourceMappingURL=code_block.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code_block.js","sourceRoot":"","sources":["../../../../../src/components/code/code_block/code_block.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAc,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAqBjD,MAAM,8BAA8B,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC;AAEtI,
|
|
1
|
+
{"version":3,"file":"code_block.js","sourceRoot":"","sources":["../../../../../src/components/code/code_block/code_block.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAc,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAqBjD,MAAM,8BAA8B,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC;AAEtI,MAAM,UAAU,GAAG,GAAG,EAAE;IACpB,OAAO,CACH,eAAK,SAAS,EAAC,4BAA4B,aACvC,cAAK,SAAS,EAAC,qBAAqB,GAAG,EACvC,cAAK,SAAS,EAAC,qBAAqB,GAAG,EACvC,cAAK,SAAS,EAAC,qBAAqB,GAAG,IACrC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,CAAC,EACZ,IAAI,EACJ,UAAU,EACV,cAAc,EACd,WAAW,EACX,KAAK,GACK,EAAE,EAAE;IACd,OAAO,CACH,eAAK,SAAS,EAAC,kBAAkB,aAC5B,cAAc,IAAI,KAAC,UAAU,KAAG,EAChC,KAAK,IAAI,CACN,KAAC,IAAI,IAAC,MAAM,EAAC,MAAM,EAAC,SAAS,EAAC,uBAAuB,YAChD,KAAK,GACH,CACV,EACD,cAAK,SAAS,EAAC,6BAA6B,YACvC,IAAI,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;oBACf,MAAM,QAAQ,GAAG,GAAG,CAAC,GAAG,KAAK,UAAU,EAAE,GAAG,CAAC;oBAC7C,MAAM,KAAK,GAAG;wBACV,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,QAAQ,EAAE,CAAC;wBAC9C,OAAO,EAAE,CAAC,CAAmB,EAAE,EAAE,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC;wBACrD,KAAK,EAAE,GAAG,CAAC,KAAK;wBAChB,EAAE,EAAE,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,GAAG;qBACxB,CAAC;oBAEF,MAAM,KAAK,GAAG,KAAC,IAAI,IAAC,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,YACtE,GAAG,CAAC,KAAK,GACP,CAAC;oBAER,IAAI,GAAG,CAAC,EAAE,EAAE,CAAC;wBACT,OAAO,CACH,KAAC,IAAI,IAAe,EAAE,EAAE,GAAG,CAAC,EAAE,KAAM,KAAK,YACpC,KAAK,IADC,GAAG,CAAC,GAAG,CAEX,CACV,CAAC;oBACN,CAAC;oBACD,OAAO,CACH,iBAAuB,KAAK,YACvB,KAAK,IADA,GAAG,CAAC,GAAG,CAEX,CACT,CAAC;gBACN,CAAC,CAAC,GACA,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAyBF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACtB,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,WAAW,EACX,aAAa,EACb,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,SAAS,EACT,iBAAiB,EACjB,gBAAgB,GAAG,GAAG,EACtB,eAAe,EACf,UAAU,EACV,KAAK,EACL,cAAc,EACd,iBAAiB,EACjB,sBAAsB,EACtB,mBAAmB,EACnB,GAAG,IAAI,EACM,EAAE,EAAE;IACjB,MAAM,UAAU,GAAG,OAAO,YAAY,KAAK,CAAC;IAC5C,MAAM,UAAU,GAAG,UAAU;QACzB,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,KAAK,aAAa,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC;QAChE,CAAC,CAAC,IAAI,CAAC;IACX,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAiB,UAAU,CAAC,CAAC;IACzE,MAAM,WAAW,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC5E,MAAM,eAAe,GAAG,QAAQ,IAAI,UAAU,EAAE,QAAQ,CAAC;IAEzD,MAAM,qBAAqB,GAAG,OAAO,CACjC,GAAG,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAAE,cAAc,IAAI,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,EACtE,CAAC,UAAU,EAAE,UAAU,EAAE,cAAc,CAAC,CAC3C,CAAC;IAEF,MAAM,MAAM,GAAG,eAAe,KAAK,MAAM,CAAC;IAE1C,MAAM,eAAe,GAAG,CAAC,eAAe;WACjC,CAAC,8BAA8B,CAAC,QAAQ,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC;IACvE,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,sBAAsB,CAAC;IACzD,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,cAAc,IAAI,CAAC,UAAU,CAAC;IAEhE,MAAM,UAAU,GAAG,UAAU,IAAI,CAAC,CAAC,KAAK,IAAI,cAAc,CAAC;IAE3D,MAAM,oBAAoB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE1D,MAAM,cAAc,GAAG,KAAK,EAAE,GAAY,EAAE,CAAmB,EAAE,EAAE;QAC/D,MAAM,WAAW,EAAE,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QAChC,aAAa,CAAC,GAAG,CAAC,CAAC;QACnB,oBAAoB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACjD,CAAC,CAAC;IAEF,MAAM,wBAAwB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1C,IAAI,CAAC,cAAc;YAAE,OAAO,EAAE,CAAC;QAC/B,OAAO,mBAAmB,CACtB,WAAW,EACX,UAAU,EAAE,iBAAiB,IAAI,iBAAiB,CACrD,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,EAAE,iBAAiB,EAAE,cAAc,EAAE,UAAU,CAAC,CAAC,CAAC;IAEjE,MAAM,YAAY,GAAG,WAAW,CAC5B,CAAC,UAAkB,EAAE,EAAE;QACnB,MAAM,IAAI,GAAG,EAAE,CAAC;QAChB,IAAI,qBAAqB,EAAE,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;YAC9C,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC7B,CAAC;QACD,IAAI,cAAc,EAAE,CAAC;YACjB,IAAI,CAAC,IAAI,CAAC,wBAAwB,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC;QACxD,CAAC;QAED,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;IACpC,CAAC,EACD,CAAC,qBAAqB,EAAE,cAAc,EAAE,wBAAwB,CAAC,CACpE,CAAC;IAEF,OAAO,CACH,MAAC,gBAAgB,kBACD,UAAU,uBACH,gBAAgB,sBACjB,gBAAgB,cACxB,UAAU,gBACR,SAAS,iBACR,UAAU,sBACL,eAAe,KAC7B,IAAI,aAEP,UAAU,IAAI,CACX,KAAC,MAAM,IACH,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EACjC,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,cAAc,EAC3B,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,KAAK,GACd,CACL,EAED,KAAC,iBAAiB,IACd,eAAe,QACf,SAAS,QACT,QAAQ,EAAE,eAAe,EACzB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,YAAY,EACvB,GAAG,EAAE,oBAAoB,YAExB,WAAW,GACI,EAEpB,eAAK,SAAS,EAAC,kCAAkC,aAC5C,gBAAgB,IAAI,KAAC,YAAY,IAAC,YAAY,QAAC,OAAO,EAAE,mBAAmB,YAAG,iBAAiB,IAAI,cAAc,GAAgB,EACjI,CAAC,cAAc,IAAI,KAAC,UAAU,IAAC,IAAI,EAAE,WAAW,GAAI,IACnD,EAEL,YAAY,IAAI,CACb,KAAC,kBAAkB,IACf,SAAS,EAAC,oBAAoB,EAC9B,QAAQ,EAAE,EAAE,GACd,CACL,IACe,CACvB,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { type RegularLinkProps } from '../../link.js';
|
|
2
|
+
import { type CodeBlockProps } from './code_block.js';
|
|
3
|
+
export type CodeBlockTabKey = 'cli' | 'http' | 'javascript' | 'mcp' | 'openapi' | 'python' | 'typescript';
|
|
4
|
+
type SharedCodeBlockProps = Omit<CodeBlockProps, 'content' | 'language' | 'defaultTabKey' | 'onTabChange'>;
|
|
5
|
+
type SharedLinkProps = Pick<RegularLinkProps, 'to' | 'rel' | 'target'>;
|
|
6
|
+
type CodeBlockTabProps = {
|
|
7
|
+
key: CodeBlockTabKey;
|
|
8
|
+
content: string;
|
|
9
|
+
onClick?: (e: React.MouseEvent) => void;
|
|
10
|
+
} & Partial<SharedLinkProps>;
|
|
11
|
+
type CodeBlockWithTabsProps = SharedCodeBlockProps & {
|
|
12
|
+
currentTabKey: CodeBlockTabKey;
|
|
13
|
+
tabs: CodeBlockTabProps[];
|
|
14
|
+
};
|
|
15
|
+
export declare const CODE_BLOCK_WITH_TABS_CLASSNAMES: {
|
|
16
|
+
WRAPPER: string;
|
|
17
|
+
TABS: string;
|
|
18
|
+
TAB: string;
|
|
19
|
+
CONTENT: string;
|
|
20
|
+
};
|
|
21
|
+
export declare const CodeBlockWithTabs: ({ currentTabKey, tabs, className, hideBashHeader, ...props }: CodeBlockWithTabsProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export {};
|
|
23
|
+
//# sourceMappingURL=code_block_with_tabs.d.ts.map
|
|
@@ -0,0 +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":"AAIA,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;AAgD1G,KAAK,oBAAoB,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,GAAG,UAAU,GAAG,eAAe,GAAG,aAAa,CAAC,CAAC;AAC3G,KAAK,eAAe,GAAG,IAAI,CAAC,gBAAgB,EAAE,IAAI,GAAG,KAAK,GAAG,QAAQ,CAAC,CAAC;AAEvE,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,eAAe,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACzC,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;AAE7B,KAAK,sBAAsB,GAAG,oBAAoB,GAAG;IACnD,aAAa,EAAE,eAAe,CAAC;IAC/B,IAAI,EAAE,iBAAiB,EAAE,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,+BAA+B;;;;;CAK3C,CAAC;AAyEF,eAAO,MAAM,iBAAiB,iEAAyE,sBAAsB,4CA2D5H,CAAC"}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 { Link } from '../../link.js';
|
|
6
|
+
import { HeadingShared } from '../../text/heading_shared.js';
|
|
7
|
+
import { CodeBlock } from './code_block.js';
|
|
8
|
+
const CODE_BLOCK_TAB_CATALOG = {
|
|
9
|
+
cli: {
|
|
10
|
+
label: 'CLI',
|
|
11
|
+
language: 'bash',
|
|
12
|
+
src: 'https://apify.com/img/icons/code.svg',
|
|
13
|
+
},
|
|
14
|
+
http: {
|
|
15
|
+
label: 'HTTP',
|
|
16
|
+
language: 'bash',
|
|
17
|
+
src: 'https://apify.com/img/icons/http.svg',
|
|
18
|
+
},
|
|
19
|
+
javascript: {
|
|
20
|
+
label: 'JavaScript',
|
|
21
|
+
language: 'javascript',
|
|
22
|
+
// TODO: duplicate icon from 'template-icons' to 'icons' folder on the web
|
|
23
|
+
src: 'https://apify.com/img/template-icons/javascript.svg',
|
|
24
|
+
},
|
|
25
|
+
mcp: {
|
|
26
|
+
label: 'MCP',
|
|
27
|
+
language: 'bash',
|
|
28
|
+
src: 'https://apify.com/img/icons/mcp.svg',
|
|
29
|
+
},
|
|
30
|
+
openapi: {
|
|
31
|
+
label: 'OpenAPI',
|
|
32
|
+
language: 'json',
|
|
33
|
+
src: 'https://apify.com/img/icons/openapi.svg',
|
|
34
|
+
},
|
|
35
|
+
python: {
|
|
36
|
+
label: 'Python',
|
|
37
|
+
language: 'python',
|
|
38
|
+
// TODO: duplicate icon from 'template-icons' to 'icons' folder on the web
|
|
39
|
+
src: 'https://apify.com/img/template-icons/python.svg',
|
|
40
|
+
},
|
|
41
|
+
typescript: {
|
|
42
|
+
label: 'TypeScript',
|
|
43
|
+
language: 'typescript',
|
|
44
|
+
// TODO: duplicate icon from 'template-icons' to 'icons' folder on the web
|
|
45
|
+
src: 'https://apify.com/img/template-icons/typescript.svg',
|
|
46
|
+
},
|
|
47
|
+
};
|
|
48
|
+
export const CODE_BLOCK_WITH_TABS_CLASSNAMES = {
|
|
49
|
+
WRAPPER: 'CodeBlockWithTabsWrapper',
|
|
50
|
+
TABS: 'CodeBlockWithTabsTabs',
|
|
51
|
+
TAB: 'CodeBlockWithTabsTab',
|
|
52
|
+
CONTENT: 'CodeBlockWithTabsContent',
|
|
53
|
+
};
|
|
54
|
+
const CodeBlockWithTabsWrapper = styled.div `
|
|
55
|
+
.${CODE_BLOCK_WITH_TABS_CLASSNAMES.TABS} {
|
|
56
|
+
min-width: 266px;
|
|
57
|
+
height: 72px;
|
|
58
|
+
padding-inline: ${theme.space.space8};
|
|
59
|
+
display: flex;
|
|
60
|
+
gap: ${theme.space.space4};
|
|
61
|
+
overflow-x: auto;
|
|
62
|
+
background-color: ${theme.color.neutral.backgroundSubtle};
|
|
63
|
+
border: 1px solid ${theme.color.neutral.border};
|
|
64
|
+
border-bottom: none;
|
|
65
|
+
border-top-right-radius: ${theme.radius.radius12};
|
|
66
|
+
border-top-left-radius: ${theme.radius.radius12};
|
|
67
|
+
|
|
68
|
+
@media ${theme.device.tablet} {
|
|
69
|
+
height: 88px;
|
|
70
|
+
justify-content: center;
|
|
71
|
+
gap: ${theme.space.space24};
|
|
72
|
+
padding-inline: ${theme.space.space24};
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.${CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB} {
|
|
77
|
+
min-width: 64px;
|
|
78
|
+
position: relative;
|
|
79
|
+
padding: ${theme.space.space12} ${theme.space.space8};
|
|
80
|
+
color: ${theme.color.neutral.textMuted};
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-direction: column;
|
|
83
|
+
flex-shrink: 0;
|
|
84
|
+
align-items: center;
|
|
85
|
+
justify-content: flex-end;
|
|
86
|
+
gap: ${theme.space.space4};
|
|
87
|
+
cursor: pointer;
|
|
88
|
+
|
|
89
|
+
img {
|
|
90
|
+
width: 20px;
|
|
91
|
+
height: 20px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
[role="tabpanel"] {
|
|
95
|
+
bottom: 0;
|
|
96
|
+
width: 100%;
|
|
97
|
+
height: 2px;
|
|
98
|
+
color: ${theme.color.neutral.text};
|
|
99
|
+
background-color: ${theme.color.primaryBlack.action};
|
|
100
|
+
border-radius: ${theme.radius.radiusFull};
|
|
101
|
+
display: none;
|
|
102
|
+
position: absolute;
|
|
103
|
+
z-index: 2;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
&.selected {
|
|
107
|
+
[role="tabpanel"] {
|
|
108
|
+
display: block;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
&:hover {
|
|
113
|
+
color: ${theme.color.neutral.text};
|
|
114
|
+
text-decoration: none;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.${CODE_BLOCK_WITH_TABS_CLASSNAMES.CONTENT} {
|
|
119
|
+
max-width: initial;
|
|
120
|
+
border-top-left-radius: 0;
|
|
121
|
+
border-top-right-radius: 0;
|
|
122
|
+
}
|
|
123
|
+
`;
|
|
124
|
+
export const CodeBlockWithTabs = ({ currentTabKey, tabs, className, hideBashHeader = true, ...props }) => {
|
|
125
|
+
// Math.Max(0, ) ensures that the index is not negative, in case the currentTabKey is not found in the tabs array
|
|
126
|
+
const currentTabIndex = Math.max(0, tabs.findIndex((tab) => tab.key === currentTabKey));
|
|
127
|
+
const currentTab = tabs[currentTabIndex];
|
|
128
|
+
return (_jsxs(CodeBlockWithTabsWrapper, { className: clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.WRAPPER, className), children: [_jsx("div", { className: CODE_BLOCK_WITH_TABS_CLASSNAMES.TABS, children: tabs.map((tab) => {
|
|
129
|
+
const { label, src } = CODE_BLOCK_TAB_CATALOG[tab.key];
|
|
130
|
+
const selected = tab.key === currentTab?.key;
|
|
131
|
+
const children = (_jsxs(_Fragment, { children: [_jsx("img", { src: src, alt: label }), _jsx(HeadingShared, { type: "titleS", as: "p", children: label }), _jsx("div", { role: "tabpanel" })] }));
|
|
132
|
+
// if the tab has a 'to' prop, render a Link component
|
|
133
|
+
if (tab.to) {
|
|
134
|
+
return (_jsx(Link, { className: clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB, { selected }), to: tab.to, rel: tab.rel, target: tab.target, onClick: tab.onClick, children: children }, tab.key));
|
|
135
|
+
}
|
|
136
|
+
return (_jsx("div", { className: clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB, { selected }), role: "button", onClick: tab.onClick, children: children }, tab.key));
|
|
137
|
+
}) }), _jsx(CodeBlock, { content: currentTab?.content ?? '', language: CODE_BLOCK_TAB_CATALOG[currentTab?.key]?.language, className: CODE_BLOCK_WITH_TABS_CLASSNAMES.CONTENT, hideBashHeader: hideBashHeader, ...props })] }));
|
|
138
|
+
};
|
|
139
|
+
//# sourceMappingURL=code_block_with_tabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"code_block_with_tabs.js","sourceRoot":"","sources":["../../../../../src/components/code/code_block/code_block_with_tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,IAAI,EAAyB,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAuB,MAAM,iBAAiB,CAAC;AASjE,MAAM,sBAAsB,GAAgD;IACxE,GAAG,EAAE;QACD,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,MAAM;QAChB,GAAG,EAAE,sCAAsC;KAC9C;IACD,IAAI,EAAE;QACF,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,MAAM;QAChB,GAAG,EAAE,sCAAsC;KAC9C;IACD,UAAU,EAAE;QACR,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,YAAY;QACtB,0EAA0E;QAC1E,GAAG,EAAE,qDAAqD;KAC7D;IACD,GAAG,EAAE;QACD,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,MAAM;QAChB,GAAG,EAAE,qCAAqC;KAC7C;IACD,OAAO,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,MAAM;QAChB,GAAG,EAAE,yCAAyC;KACjD;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE,QAAQ;QAClB,0EAA0E;QAC1E,GAAG,EAAE,iDAAiD;KACzD;IACD,UAAU,EAAE;QACR,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,YAAY;QACtB,0EAA0E;QAC1E,GAAG,EAAE,qDAAqD;KAC7D;CACJ,CAAC;AAgBF,MAAM,CAAC,MAAM,+BAA+B,GAAG;IAC3C,OAAO,EAAE,0BAA0B;IACnC,IAAI,EAAE,uBAAuB;IAC7B,GAAG,EAAE,sBAAsB;IAC3B,OAAO,EAAE,0BAA0B;CACtC,CAAC;AAEF,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;KACtC,+BAA+B,CAAC,IAAI;;;sBAGnB,KAAK,CAAC,KAAK,CAAC,MAAM;;WAE7B,KAAK,CAAC,KAAK,CAAC,MAAM;;wBAEL,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB;wBACpC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM;;+BAEnB,KAAK,CAAC,MAAM,CAAC,QAAQ;8BACtB,KAAK,CAAC,MAAM,CAAC,QAAQ;;aAEtC,KAAK,CAAC,MAAM,CAAC,MAAM;;;aAGnB,KAAK,CAAC,KAAK,CAAC,OAAO;wBACR,KAAK,CAAC,KAAK,CAAC,OAAO;;;;KAItC,+BAA+B,CAAC,GAAG;;;eAGzB,KAAK,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM;aAC3C,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS;;;;;;WAM/B,KAAK,CAAC,KAAK,CAAC,MAAM;;;;;;;;;;;;eAYd,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;0BACb,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM;uBAClC,KAAK,CAAC,MAAM,CAAC,UAAU;;;;;;;;;;;;;iBAa7B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;;;;KAKpC,+BAA+B,CAAC,OAAO;;;;;CAK3C,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,GAAG,IAAI,EAAE,GAAG,KAAK,EAA0B,EAAE,EAAE;IAC7H,iHAAiH;IACjH,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,KAAK,aAAa,CAAC,CAAC,CAAC;IACxF,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC;IAEzC,OAAO,CACH,MAAC,wBAAwB,IAAC,SAAS,EAAE,IAAI,CAAC,+BAA+B,CAAC,OAAO,EAAE,SAAS,CAAC,aACzF,cAAK,SAAS,EAAE,+BAA+B,CAAC,IAAI,YAC/C,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;oBACd,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,sBAAsB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;oBACvD,MAAM,QAAQ,GAAG,GAAG,CAAC,GAAG,KAAK,UAAU,EAAE,GAAG,CAAC;oBAE7C,MAAM,QAAQ,GAAG,CACb,8BACI,cAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,GAAI,EAC7B,KAAC,aAAa,IAAC,IAAI,EAAC,QAAQ,EAAC,EAAE,EAAC,GAAG,YAC9B,KAAK,GACM,EAChB,cAAK,IAAI,EAAC,UAAU,GAAG,IACxB,CACN,CAAC;oBAEF,sDAAsD;oBACtD,IAAI,GAAG,CAAC,EAAE,EAAE,CAAC;wBACT,OAAO,CACH,KAAC,IAAI,IAED,SAAS,EAAE,IAAI,CAAC,+BAA+B,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,CAAC,EAClE,EAAE,EAAE,GAAG,CAAC,EAAE,EACV,GAAG,EAAE,GAAG,CAAC,GAAG,EACZ,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,OAAO,EAAE,GAAG,CAAC,OAAO,YAEnB,QAAQ,IAPJ,GAAG,CAAC,GAAG,CAQT,CACV,CAAC;oBACN,CAAC;oBAED,OAAO,CACH,cAEI,SAAS,EAAE,IAAI,CAAC,+BAA+B,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,CAAC,EAClE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,CAAC,OAAO,YAEnB,QAAQ,IALJ,GAAG,CAAC,GAAG,CAMV,CACT,CAAC;gBACN,CAAC,CAAC,GACA,EACN,KAAC,SAAS,IACN,OAAO,EAAE,UAAU,EAAE,OAAO,IAAI,EAAE,EAClC,QAAQ,EAAE,sBAAsB,CAAC,UAAU,EAAE,GAAG,CAAC,EAAE,QAAQ,EAC3D,SAAS,EAAE,+BAA+B,CAAC,OAAO,EAClD,cAAc,EAAE,cAAc,KAC1B,KAAK,GACX,IACqB,CAC9B,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/code/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/code/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/code/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/code/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC"}
|