@apify/ui-library 0.63.1 → 0.63.2-featcodeblockwithtabs-5a4360.31

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.63.1",
+    "version": "0.63.2-featcodeblockwithtabs-5a4360.31+71d988711ce",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -66,5 +66,5 @@
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "578d4492a2df2afbc48bb0fe0a2bffd11ba8a06f"
+    "gitHead": "71d988711ce0ad1fd229d4887d7ff538b4cc1bfc"
 }

package/src/components/code/code_block/code_block.tsx

@@ -32,7 +32,7 @@ type HeaderProps = {
 
 const LANGUAGES_WITHOUT_LINE_NUMBERS = ['json', 'jsonp', 'jsonp', 'rss', 'yaml', 'xml', 'html', 'bash', 'text', 'dockerfile', 'http'];
 
-function HeaderDots() {
+const HeaderDots = () => {
     return (
         <div className="CodeBlock-HederDotsWrapper">
             <div className="CodeBlock-HeaderDot" />
@@ -40,15 +40,15 @@ function HeaderDots() {
             <div className="CodeBlock-HeaderDot" />
         </div>
     );
-}
+};
 
-function Header({
+const Header = ({
     tabs,
     currentTab,
     showBashHeader,
     onTabChange,
     title,
-}: HeaderProps) {
+}: HeaderProps) => {
     return (
         <div className="CodeBlock-Header">
             {showBashHeader && <HeaderDots />}
@@ -87,9 +87,9 @@ function Header({
             </div>
         </div>
     );
-}
+};
 
-type CodeBlockProps = RegularBoxProps & {
+export type CodeBlockProps = RegularBoxProps & {
     content: string | CodeTab[]; // TODO: Try to make it work with children props
     size?: SharedTextSize;
     language?: string | undefined;
@@ -112,7 +112,7 @@ type CodeBlockProps = RegularBoxProps & {
     hideLineNumbers?: boolean | undefined;
 }
 
-export function CodeBlock({
+export const CodeBlock = ({
     content,
     size,
     language,
@@ -133,7 +133,7 @@ export function CodeBlock({
     hideBashPromptPrefixes,
     onActionButtonClick,
     ...rest
-}: CodeBlockProps) {
+}: CodeBlockProps) => {
     const isMultiTab = content instanceof Array;
     const defaultTab = isMultiTab
         ? content.find((tab) => tab.key === defaultTabKey) ?? content[0]
@@ -232,4 +232,4 @@ export function CodeBlock({
             )}
         </CodeBlockWrapper >
     );
-}
+};

package/src/components/code/code_block/code_block_with_tabs.tsx

@@ -0,0 +1,208 @@
+import clsx from 'clsx';
+import styled from 'styled-components';
+
+import { theme } from '../../../design_system/theme.js';
+import { Link, type RegularLinkProps } from '../../link.js';
+import { HeadingShared } from '../../text/heading_shared.js';
+import { CodeBlock, type CodeBlockProps } from './code_block.js';
+
+export type CodeBlockTabKey = 'cli' | 'http' | 'javascript' | 'mcp' | 'openapi' | 'python' | 'typescript';
+type CodeBlockTabConfig = {
+  label: string;
+  language: string;
+  src: string;
+};
+
+const CODE_BLOCK_TAB_CATALOG: Record<CodeBlockTabKey, CodeBlockTabConfig> = {
+    cli: {
+        label: 'CLI',
+        language: 'bash',
+        src: 'https://apify.com/img/icons/code.svg',
+    },
+    http: {
+        label: 'HTTP',
+        language: 'bash',
+        src: 'https://apify.com/img/icons/http.svg',
+    },
+    javascript: {
+        label: 'JavaScript',
+        language: 'javascript',
+        // TODO: duplicate icon from 'template-icons' to 'icons' folder on the web
+        src: 'https://apify.com/img/template-icons/javascript.svg',
+    },
+    mcp: {
+        label: 'MCP',
+        language: 'bash',
+        src: 'https://apify.com/img/icons/mcp.svg',
+    },
+    openapi: {
+        label: 'OpenAPI',
+        language: 'json',
+        src: 'https://apify.com/img/icons/openapi.svg',
+    },
+    python: {
+        label: 'Python',
+        language: 'python',
+        // TODO: duplicate icon from 'template-icons' to 'icons' folder on the web
+        src: 'https://apify.com/img/template-icons/python.svg',
+    },
+    typescript: {
+        label: 'TypeScript',
+        language: 'typescript',
+        // TODO: duplicate icon from 'template-icons' to 'icons' folder on the web
+        src: 'https://apify.com/img/template-icons/typescript.svg',
+    },
+};
+
+type SharedCodeBlockProps = Omit<CodeBlockProps, 'content' | 'language' | 'defaultTabKey' | 'onTabChange'>;
+type SharedLinkProps = Pick<RegularLinkProps, 'to' | 'rel' | 'target'>;
+
+type CodeBlockTabProps = {
+  key: CodeBlockTabKey;
+  content: string;
+  onClick?: (e: React.MouseEvent) => void;
+} & Partial<SharedLinkProps>;
+
+type CodeBlockWithTabsProps = SharedCodeBlockProps & {
+  currentTabKey: CodeBlockTabKey;
+  tabs: CodeBlockTabProps[];
+};
+
+export const CODE_BLOCK_WITH_TABS_CLASSNAMES = {
+    WRAPPER: 'CodeBlockWithTabsWrapper',
+    TABS: 'CodeBlockWithTabsTabs',
+    TAB: 'CodeBlockWithTabsTab',
+    CONTENT: 'CodeBlockWithTabsContent',
+};
+
+const CodeBlockWithTabsWrapper = styled.div`
+  .${CODE_BLOCK_WITH_TABS_CLASSNAMES.TABS} {
+    min-width: 266px;
+    height: 72px;
+    padding-inline: ${theme.space.space8};
+    display: flex;
+    gap: ${theme.space.space4};
+    overflow-x: auto;
+    background-color: ${theme.color.neutral.backgroundSubtle};
+    border: 1px solid ${theme.color.neutral.border};
+    border-bottom: none;
+    border-top-right-radius: ${theme.radius.radius12};
+    border-top-left-radius: ${theme.radius.radius12};
+
+    @media ${theme.device.tablet} {
+      height: 88px;
+      justify-content: center;
+      gap: ${theme.space.space24};
+      padding-inline: ${theme.space.space24};
+    }
+  }
+
+  .${CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB} {
+    min-width: 64px;
+    position: relative;
+    padding: ${theme.space.space12} ${theme.space.space8};
+    color: ${theme.color.neutral.textMuted};
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: flex-end;
+    gap: ${theme.space.space4};
+    cursor: pointer;
+
+    img {
+        width: 20px;
+        height: 20px;
+    }
+
+    [role="tabpanel"] {
+      bottom: 0;
+      width: 100%;
+      height: 2px;
+      color: ${theme.color.neutral.text};
+      background-color: ${theme.color.primaryBlack.action};
+      border-radius: ${theme.radius.radiusFull};
+      display: none;
+      position: absolute;
+      z-index: 2;
+    }
+
+    &.selected {
+      [role="tabpanel"] {
+        display: block;
+      }
+    }
+
+    &:hover {
+        color: ${theme.color.neutral.text};
+        text-decoration: none;
+    }
+  }
+
+  .${CODE_BLOCK_WITH_TABS_CLASSNAMES.CONTENT} {
+    max-width: initial;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+`;
+
+export const CodeBlockWithTabs = ({ currentTabKey, tabs, className, hideBashHeader = true, ...props }: CodeBlockWithTabsProps) => {
+    // Math.Max(0, ) ensures that the index is not negative, in case the currentTabKey is not found in the tabs array
+    const currentTabIndex = Math.max(0, tabs.findIndex((tab) => tab.key === currentTabKey));
+    const currentTab = tabs[currentTabIndex];
+
+    return (
+        <CodeBlockWithTabsWrapper className={clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.WRAPPER, className)}>
+            <div className={CODE_BLOCK_WITH_TABS_CLASSNAMES.TABS}>
+                {tabs.map((tab) => {
+                    const { label, src } = CODE_BLOCK_TAB_CATALOG[tab.key];
+                    const selected = tab.key === currentTab?.key;
+
+                    const children = (
+                        <>
+                            <img src={src} alt={label} />
+                            <HeadingShared type="titleS" as="p">
+                                {label}
+                            </HeadingShared>
+                            <div role="tabpanel" />
+                        </>
+                    );
+
+                    // if the tab has a 'to' prop, render a Link component
+                    if (tab.to) {
+                        return (
+                            <Link
+                                key={tab.key}
+                                className={clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB, { selected })}
+                                to={tab.to}
+                                rel={tab.rel}
+                                target={tab.target}
+                                onClick={tab.onClick}
+                            >
+                                {children}
+                            </Link>
+                        );
+                    }
+
+                    return (
+                        <div
+                            key={tab.key}
+                            className={clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB, { selected })}
+                            role="button"
+                            onClick={tab.onClick}
+                        >
+                            {children}
+                        </div>
+                    );
+                })}
+            </div>
+            <CodeBlock
+                content={currentTab?.content ?? ''}
+                language={CODE_BLOCK_TAB_CATALOG[currentTab?.key]?.language}
+                className={CODE_BLOCK_WITH_TABS_CLASSNAMES.CONTENT}
+                hideBashHeader={hideBashHeader}
+                {...props}
+            />
+        </CodeBlockWithTabsWrapper>
+    );
+};

package/src/components/code/index.ts

@@ -1,3 +1,4 @@
 export * from './code_block/code_block.js';
+export * from './code_block/code_block_with_tabs.js';
 export * from './one_line_code/one_line_code.js';
 export * from './inline_code/inline_code.js';