@keboola/design 1.0.0

package/src/components/Table/TableHeader.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../../utils';
+
+export const TableHeader = ({
+  withShadow = false,
+  className,
+  ...props
+}: { withShadow?: boolean } & ComponentProps<'thead'>) => {
+  return (
+    <thead
+      className={cn(
+        'tw-sticky tw-top-0 tw-z-10 [&_tr]:tw-bg-neutral-100 [&_tr]:tw-border-b [&_tr]:tw-border-neutral-150',
+        { 'tw-shadow-table': withShadow },
+        className,
+      )}
+      {...props}
+    />
+  );
+};

package/src/components/Table/TableRow.tsx

@@ -0,0 +1,11 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+
+import { cn } from '../../utils';
+
+export const TableRow = ({
+  ref,
+  className,
+  ...props
+}: ComponentProps<'tr'> & { ref?: Ref<ElementRef<'tr'>> }) => (
+  <tr ref={ref} className={cn('hover:tw-bg-neutral-100', className)} {...props} />
+);

package/src/components/Table/index.ts

@@ -0,0 +1 @@
+export * from './Table';

package/src/components/Tabs.stories.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Tabs, TabsContent } from './Tabs';
+
+const meta: Meta<typeof Tabs> = {
+  component: Tabs,
+  args: {
+    triggers: [
+      {
+        value: 'tab1',
+        title: 'Account',
+      },
+      {
+        value: 'tab2',
+        title: 'Password',
+      },
+      {
+        value: 'tab3',
+        title: 'Disabled',
+        disabled: true,
+      },
+    ],
+    children: (
+      <>
+        <TabsContent value="tab1">
+          <p>Account content</p>
+        </TabsContent>
+        <TabsContent value="tab2">
+          <p>Password content</p>
+        </TabsContent>
+      </>
+    ),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+
+export const Primary: Story = {};
+
+export const Compact: Story = {
+  args: { compact: true },
+};
+
+export const WithOnCloseTrigger: Story = {
+  args: {
+    triggers: [
+      {
+        value: 'tab1',
+        title: 'Closable Tab',
+        onClose: (value: string) => {
+          console.log('Closed tab:', value);
+        },
+      },
+      { value: 'tab2', title: 'Normal Tab' },
+    ],
+    children: (
+      <>
+        <TabsContent value="tab1">
+          <p>Closable tab content</p>
+        </TabsContent>
+        <TabsContent value="tab2">
+          <p>Normal tab content</p>
+        </TabsContent>
+      </>
+    ),
+  },
+};
+
+export const WithManyTabs: Story = {
+  args: {
+    triggers: [
+      { value: 'tab1', title: 'Project' },
+      { value: 'tab2', title: 'Users' },
+      { value: 'tab3', title: 'API Tokens' },
+      { value: 'tab4', title: 'CLI Sync' },
+      { value: 'tab5', title: 'Features' },
+      { value: 'tab6', title: 'AI Rules' },
+      { value: 'tab7', title: 'MCP Server' },
+      { value: 'tab8', title: 'Global Settings' },
+      { value: 'tab9', title: 'Accounts' },
+      { value: 'tab10', title: 'Passwords' },
+      { value: 'tab11', title: 'CI/CD' },
+    ],
+    children: (
+      <>
+        <TabsContent value="tab1">
+          <p>Content for Tab 1</p>
+        </TabsContent>
+        <TabsContent value="tab2">
+          <p>Content for Tab 2</p>
+        </TabsContent>
+        <TabsContent value="tab3">
+          <p>Content for Tab 3</p>
+        </TabsContent>
+        <TabsContent value="tab4">
+          <p>Content for Tab 4</p>
+        </TabsContent>
+        <TabsContent value="tab5">
+          <p>Content for Tab 5</p>
+        </TabsContent>
+        <TabsContent value="tab6">
+          <p>Content for Tab 6</p>
+        </TabsContent>
+        <TabsContent value="tab7">
+          <p>Content for Tab 7</p>
+        </TabsContent>
+        <TabsContent value="tab8">
+          <p>Content for Tab 8</p>
+        </TabsContent>
+        <TabsContent value="tab9">
+          <p>Content for Tab 9</p>
+        </TabsContent>
+        <TabsContent value="tab10">
+          <p>Content for Tab 10</p>
+        </TabsContent>
+        <TabsContent value="tab11">
+          <p>Content for Tab 11</p>
+        </TabsContent>
+      </>
+    ),
+  },
+};

package/src/components/Tabs.tsx

@@ -0,0 +1,111 @@
+import type { ReactNode } from 'react';
+import * as RadixTabs from '@radix-ui/react-tabs';
+
+import { cn } from '../utils';
+
+import { Button } from './Button';
+import { ScrollArea } from './ScrollArea';
+
+const TRIGGER_COMMON = {
+  main: 'tw-flex tw-justify-center tw-items-center tw-gap-1.5 tw-bg-transparent tw-group/tab-trigger tw-shrink-0',
+  border: 'tw-border-0 tw-border-b-[3px] tw-border-solid tw-border-transparent',
+  spacing: 'tw-pt-2.5 tw-pb-5 tw-px-0 tw-m-0',
+  font: 'tw-font-medium tw-leading-5 tw-text-neutral-400 tw-text-base',
+  active: 'data-[state=active]:tw-text-secondary-500 data-[state=active]:tw-border-secondary-500',
+  disabled:
+    'data-[disabled]:tw-text-neutral-400 data-[disabled]:tw-opacity-50 data-[disabled]:tw-cursor-not-allowed',
+  hover:
+    'hover:enabled:tw-text-secondary-500 hover:enabled:tw-border-secondary-500 hover:enabled:tw-cursor-pointer',
+};
+
+type Trigger<T extends string> = {
+  value: T;
+  title: ReactNode;
+  onClose?: (value: T) => void;
+} & Omit<RadixTabs.TabsTriggerProps, 'title'>;
+
+const Tabs = <T extends string>({
+  triggers,
+  compact = false,
+  children,
+  defaultValue,
+  onValueChange,
+  rootClassName,
+  listClassName,
+  triggerClassName,
+  ...rest
+}: {
+  triggers: Trigger<T>[];
+  compact?: boolean;
+  children: ReactNode;
+  defaultValue?: string;
+  onValueChange?: (value: T) => void;
+  rootClassName?: string;
+  listClassName?: string;
+  triggerClassName?: string;
+} & Omit<RadixTabs.TabsProps, 'onValueChange'>) => {
+  const triggerClasses = cn(
+    ...Object.values(TRIGGER_COMMON),
+    { 'tw-text-sm tw-pb-4': compact },
+    triggerClassName,
+  );
+
+  return (
+    <RadixTabs.Root
+      {...rest}
+      data-slot="tabs-root"
+      className={cn('tw-flex tw-flex-col tw-gap-6', rootClassName)}
+      defaultValue={defaultValue || triggers[0]?.value}
+      onValueChange={onValueChange as (value: string) => void}
+    >
+      <ScrollArea
+        orientation="horizontal"
+        className="tw-shrink-0 tw-border-0 tw-border-b tw-border-solid tw-border-neutral-200"
+      >
+        <RadixTabs.List className={cn('tw-flex tw-gap-8 tw-shrink-0', listClassName)}>
+          {triggers.map(({ value, title, onClose, ...rest }) => {
+            if (onClose) {
+              return (
+                <RadixTabs.Trigger
+                  asChild
+                  key={value}
+                  value={value}
+                  className={triggerClasses}
+                  {...rest}
+                >
+                  <div>
+                    {title}
+                    <Button
+                      icon="xmark"
+                      variant="inline"
+                      size="icon-3xs"
+                      disabled={rest.disabled}
+                      onClick={() => onClose(value)}
+                      // prevent focusing the tab when clicking the close button, keep focused other tab if any
+                      onMouseDown={(e) => e.preventDefault()}
+                      className="!tw-size-8 tw-opacity-0 tw-duration-200 group-hover/tab-trigger:tw-opacity-100"
+                      aria-label="Close tab"
+                    />
+                  </div>
+                </RadixTabs.Trigger>
+              );
+            }
+
+            return (
+              <RadixTabs.Trigger key={value} value={value} className={triggerClasses} {...rest}>
+                {title}
+              </RadixTabs.Trigger>
+            );
+          })}
+        </RadixTabs.List>
+      </ScrollArea>
+      {children}
+    </RadixTabs.Root>
+  );
+};
+
+const TabsContent = (props: RadixTabs.TabsContentProps) => (
+  <RadixTabs.Content tabIndex={-1} {...props} />
+);
+
+export { Tabs, TabsContent, type Trigger };

package/src/components/ThemeProvider/AIGradientSvg.tsx

@@ -0,0 +1,18 @@
+export const AIGradientsSvg = () => (
+  <svg width="0" height="0" style={{ position: 'absolute', visibility: 'hidden' }}>
+    <defs>
+      {/*aigradient-600*/}
+      <linearGradient id="aigradient-600" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stopColor="#61E4FF" />
+        <stop offset="50%" stopColor="#1F8FFF" />
+        <stop offset="100%" stopColor="#7C5CFF" />
+      </linearGradient>
+
+      {/*aigradient-700*/}
+      <linearGradient id="aigradient-700" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stopColor="#075fb8" />
+        <stop offset="100%" stopColor="#5b2cb8" />
+      </linearGradient>
+    </defs>
+  </svg>
+);

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import { all } from '@awesome.me/kit-be8bcf7e5e/icons';
+import { library } from '@fortawesome/fontawesome-svg-core';
+
+import { AIGradientsSvg } from './AIGradientSvg';
+
+library.add(...all);
+
+type Props = {
+  children: ReactNode;
+};
+
+/**
+ * Responsibilities:
+ * - Register svg gradients
+ * - Register fontawesome icons
+ */
+export const ThemeProvider = ({ children }: Props) => {
+  return (
+    <>
+      <AIGradientsSvg />
+      {children}
+    </>
+  );
+};

package/src/components/ThemeProvider/index.ts

@@ -0,0 +1 @@
+export * from './ThemeProvider';

package/src/components/TimePicker/TimePicker.tsx

@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+import type { PopoverContentProps, PopoverProps } from '@radix-ui/react-popover';
+
+import { Popover } from '../Popover';
+import { ScrollArea } from '../ScrollArea';
+
+import { TimePickerButton } from './TimePickerButton';
+import { pad, parseTime, scrollToSelected } from './utils';
+
+const HOURS = Array.from({ length: 24 }, (_, i) => i);
+const MINUTES = Array.from({ length: 60 }, (_, i) => i);
+
+type Props = {
+  children?: ReactNode;
+  defaultSelected?: string | null;
+  selected?: string | null;
+  onSelect?: (time: string) => void;
+} & Pick<PopoverProps, 'open' | 'onOpenChange' | 'defaultOpen'> &
+  Pick<PopoverContentProps, 'align' | 'alignOffset' | 'sideOffset'>;
+
+export const TimePicker = ({
+  align = 'end',
+  alignOffset = -18,
+  children,
+  defaultOpen,
+  defaultSelected,
+  onOpenChange,
+  onSelect,
+  open,
+  selected,
+  sideOffset = 12,
+}: Props) => {
+  const [internalSelected, setInternalSelected] = useState<string | null>(defaultSelected ?? null);
+
+  const isControlled = selected !== undefined;
+  const currentValue = isControlled ? selected : internalSelected;
+
+  const parsed = parseTime(currentValue);
+  const hour = parsed.hour ?? null;
+  const minute = parsed.minute ?? null;
+
+  const handleSelect = (time: string) => {
+    if (!isControlled) {
+      setInternalSelected(time);
+    }
+    onSelect?.(time);
+  };
+
+  const handleHourSelect = (h: number) => {
+    const m = minute ?? 0;
+    handleSelect(`${pad(h)}:${pad(m)}`);
+  };
+
+  const handleMinuteSelect = (m: number) => {
+    const h = hour ?? 0;
+    handleSelect(`${pad(h)}:${pad(m)}`);
+  };
+
+  return (
+    <Popover defaultOpen={defaultOpen} onOpenChange={onOpenChange} open={open}>
+      <Popover.Trigger asChild>{children}</Popover.Trigger>
+      <Popover.Content
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className="tw-flex tw-flex-row"
+      >
+        <ScrollArea type="always" ref={scrollToSelected} viewPortClassName="tw-h-60 tw-px-3">
+          {HOURS.map((value) => (
+            <TimePickerButton
+              key={value}
+              onClick={() => handleHourSelect(value)}
+              aria-selected={value === hour}
+            >
+              {pad(value)}
+            </TimePickerButton>
+          ))}
+        </ScrollArea>
+
+        <ScrollArea type="always" ref={scrollToSelected} viewPortClassName="tw-h-60 tw-px-3">
+          {MINUTES.map((value) => (
+            <TimePickerButton
+              key={value}
+              onClick={() => handleMinuteSelect(value)}
+              aria-selected={value === minute}
+            >
+              {pad(value)}
+            </TimePickerButton>
+          ))}
+        </ScrollArea>
+      </Popover.Content>
+    </Popover>
+  );
+};

package/src/components/TimePicker/TimePickerButton.tsx

@@ -0,0 +1,39 @@
+import type { ComponentProps, ElementRef, Ref } from 'react';
+
+import { cn } from '../../utils';
+
+type Props = ComponentProps<'button'>;
+
+export const TimePickerButton = ({
+  ref,
+  className,
+  children,
+  ...rest
+}: Props & { ref?: Ref<ElementRef<'button'>> }) => (
+  <button
+    {...rest}
+    ref={ref}
+    type="button"
+    className={cn(
+      'tailwindcss-preflight',
+
+      'tw-flex',
+      'tw-items-center',
+      'tw-justify-center',
+
+      'tw-size-10',
+      'tw-rounded',
+      'tw-transition-colors',
+      'tw-select-none',
+      'hover:tw-bg-secondary-200',
+      'focus-visible:tw-outline',
+      'focus-visible:tw-outline-2',
+      'focus-visible:tw-outline-secondary-500',
+      'aria-selected:tw-bg-secondary-500',
+      'aria-selected:tw-text-white',
+      className,
+    )}
+  >
+    {children}
+  </button>
+);

package/src/components/TimePicker/index.ts

@@ -0,0 +1 @@
+export { TimePicker } from './TimePicker';

package/src/components/TimePicker/utils.ts

@@ -0,0 +1,31 @@
+export const pad = (n: number) => n.toString().padStart(2, '0');
+
+export const parseTime = (time?: string | null) => {
+  if (!time) return { hour: null, minute: null };
+
+  const match = /^(\d{1,2}):(\d{1,2})$/.exec(time.trim());
+  if (!match) return { hour: null, minute: null };
+
+  const hour = Number(match[1]);
+  const minute = Number(match[2]);
+  if (
+    Number.isNaN(hour) ||
+    Number.isNaN(minute) ||
+    hour < 0 ||
+    hour > 23 ||
+    minute < 0 ||
+    minute > 59
+  )
+    return { hour: null, minute: null };
+
+  return { hour, minute };
+};
+
+export const scrollToSelected = (viewport: HTMLDivElement | null) => {
+  if (!viewport) return;
+  // Defer scroll until after the popover open animation completes and layout is calculated
+  requestAnimationFrame(() => {
+    const selected = viewport.querySelector('[aria-selected="true"]');
+    selected?.scrollIntoView({ block: 'center' });
+  });
+};