create-keboola-app 0.0.0

package/dist/template/src/routes/tokens/-fixtures.ts

@@ -0,0 +1,91 @@
+import type { CreateTokenInput, Token } from './-types';
+
+// Hand-rolled in-memory store — replaces a real API until @keboola/api-client
+// gains a typed Tokens namespace. Swap fetchTokens / createToken for real API
+// calls (e.g. `api.tokens.list(signal)`) and delete this file when that lands.
+// Each call takes an optional AbortSignal and honors it, so the query hooks can
+// thread cancellation exactly as they would against a real client — see -hooks.ts.
+const INITIAL_TOKENS: Token[] = [
+  {
+    id: 'tok-1',
+    description: 'Master token',
+    isMasterToken: true,
+    created: '2025-01-10T08:00:00Z',
+    expiresAt: null,
+  },
+  {
+    id: 'tok-2',
+    description: 'Read-only token',
+    isMasterToken: false,
+    created: '2025-03-15T12:30:00Z',
+    expiresAt: '2026-03-15T12:30:00Z',
+  },
+  {
+    id: 'tok-3',
+    description: 'CI/CD pipeline token',
+    isMasterToken: false,
+    created: '2025-04-01T09:00:00Z',
+    expiresAt: '2025-10-01T09:00:00Z',
+  },
+];
+
+// Mutable in-memory store
+let tokens: Token[] = [...INITIAL_TOKENS];
+
+/** Resets the in-memory store to its initial seed — call from test `beforeEach`. */
+export const resetFixtures = (): void => {
+  tokens = [...INITIAL_TOKENS];
+};
+
+// Simulates a network round-trip that resolves after `ms`, or rejects the
+// moment an AbortSignal fires — mirroring how a real fetch-based client aborts
+// in-flight when TanStack Query cancels the query.
+const delay = (ms: number, signal?: AbortSignal): Promise<void> =>
+  new Promise((resolve, reject) => {
+    if (signal?.aborted) {
+      reject(signal.reason);
+      return;
+    }
+    const timer = setTimeout(() => {
+      signal?.removeEventListener('abort', onAbort);
+      resolve();
+    }, ms);
+    const onAbort = () => {
+      clearTimeout(timer);
+      reject(signal?.reason);
+    };
+    signal?.addEventListener('abort', onAbort, { once: true });
+  });
+
+/** Resolves with all tokens after a simulated round-trip; rejects if aborted. */
+export const fetchTokens = async (signal?: AbortSignal): Promise<Token[]> => {
+  await delay(200, signal);
+  return [...tokens];
+};
+
+/** Resolves to a single token by id; rejects if not found or aborted. */
+export const fetchToken = async (id: string, signal?: AbortSignal): Promise<Token> => {
+  await delay(200, signal);
+  const token = tokens.find((t) => t.id === id);
+  if (token === undefined) throw new Error(`Token \`${id}\` not found`);
+  return { ...token };
+};
+
+export const createToken = async (
+  input: CreateTokenInput,
+  signal?: AbortSignal,
+): Promise<Token> => {
+  await delay(200, signal);
+  const newToken: Token = {
+    id: `tok-${Date.now()}`,
+    description: input.description,
+    isMasterToken: false,
+    created: new Date().toISOString(),
+    expiresAt:
+      input.expiresIn === 'never'
+        ? null
+        : new Date(Date.now() + Number(input.expiresIn) * 1000).toISOString(),
+  };
+  tokens = [...tokens, newToken];
+  return newToken;
+};

package/dist/template/src/routes/tokens/-hooks.ts

@@ -0,0 +1,37 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { createToken, fetchToken, fetchTokens } from './-fixtures';
+import type { CreateTokenInput } from './-types';
+
+const queryKeys = {
+  all: ['tokens'] as const,
+  detail: (id: string) => ['tokens', id] as const,
+} as const;
+
+// Query keys are co-located with the module rather than in a central registry:
+// everything about `tokens/` lives under this directory. Larger apps may prefer a
+// shared `queryKeys.ts` — both are valid; keep keys `as const` tuples either way.
+export const useTokens = () =>
+  useQuery({
+    queryKey: queryKeys.all,
+    // Always thread the query's AbortSignal to the data call — TanStack Query
+    // aborts it on unmount / refetch. Swap `fetchTokens` for `api.tokens.list`.
+    queryFn: ({ signal }) => fetchTokens(signal),
+  });
+
+export const useToken = (id: string) =>
+  useQuery({
+    queryKey: queryKeys.detail(id),
+    queryFn: ({ signal }) => fetchToken(id, signal),
+  });
+
+export const useCreateToken = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (input: CreateTokenInput) => createToken(input),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: queryKeys.all, exact: false });
+    },
+  });
+};

package/dist/template/src/routes/tokens/-index.test.tsx

@@ -0,0 +1,75 @@
+import type { ReactNode } from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { Token } from './-types';
+
+// Render the page without a RouterProvider: mock the two router exports it uses
+// (`createFileRoute` returns the Route object; `Link` renders a plain anchor).
+vi.mock('@tanstack/react-router', () => ({
+  createFileRoute: () => (options: unknown) => ({ options }),
+  Link: ({ to, children }: { to: string; children: ReactNode }) => <a href={to}>{children}</a>,
+}));
+
+// Drive each async branch deterministically by mocking the query hook boundary.
+const { useTokensMock } = vi.hoisted(() => ({ useTokensMock: vi.fn() }));
+vi.mock('./-hooks', () => ({ useTokens: () => useTokensMock() }));
+
+import { Route } from './index';
+
+const TokensListPage = Route.options.component!;
+
+const TOKENS: Token[] = [
+  {
+    id: 'tok-1',
+    description: 'Master token',
+    isMasterToken: true,
+    created: '2025-01-10T08:00:00Z',
+    expiresAt: null,
+  },
+  {
+    id: 'tok-2',
+    description: 'Read-only token',
+    isMasterToken: false,
+    created: '2025-03-15T12:30:00Z',
+    expiresAt: '2026-03-15T12:30:00Z',
+  },
+];
+
+describe('TokensListPage', () => {
+  beforeEach(() => {
+    useTokensMock.mockReturnValue({ data: TOKENS, isLoading: false, isError: false, error: null });
+  });
+
+  it('renders a row per token when data loads', () => {
+    render(<TokensListPage />);
+    expect(screen.getByText('Master token')).toBeInTheDocument();
+    expect(screen.getByText('Read-only token')).toBeInTheDocument();
+  });
+
+  it('shows the empty state when there are no tokens', () => {
+    useTokensMock.mockReturnValue({ data: [], isLoading: false, isError: false, error: null });
+    render(<TokensListPage />);
+    expect(screen.getByText('No tokens yet')).toBeInTheDocument();
+  });
+
+  it('surfaces the error message when the query fails', () => {
+    useTokensMock.mockReturnValue({
+      data: undefined,
+      isLoading: false,
+      isError: true,
+      error: new Error('Network down'),
+    });
+    render(<TokensListPage />);
+    expect(screen.getByText('Failed to load tokens')).toBeInTheDocument();
+    expect(screen.getByText('Network down')).toBeInTheDocument();
+  });
+
+  it('shows a search-specific empty state when the filter matches nothing', async () => {
+    render(<TokensListPage />);
+    await userEvent.type(screen.getByPlaceholderText('Search tokens'), 'zzz');
+    expect(await screen.findByText('No matching tokens')).toBeInTheDocument();
+    expect(screen.queryByText('Master token')).not.toBeInTheDocument();
+  });
+});

package/dist/template/src/routes/tokens/-nav.ts

@@ -0,0 +1,17 @@
+import { KeyRound } from '@keboola/design/icons';
+
+import type { NavItem } from '../../nav';
+
+/**
+ * This module's entry in the rail.
+ *
+ * - `as const` keeps `to` a literal: `Link`'s `to` is typed against the generated route tree,
+ *   and a widened `string` fails type-check where `NAV` is rendered.
+ * - `satisfies` checks the shape without erasing that literal.
+ * - `-` prefix keeps the file out of `routeTree.gen.ts`.
+ */
+export const tokensNavItem = {
+  to: '/tokens',
+  label: 'Tokens',
+  icon: KeyRound,
+} as const satisfies NavItem;

package/dist/template/src/routes/tokens/-types.ts

@@ -0,0 +1,22 @@
+export const EXPIRY_OPTIONS = [
+  { value: 'never', label: 'Never' },
+  { value: '86400', label: '1 day' },
+  { value: '604800', label: '7 days' },
+  { value: '2592000', label: '30 days' },
+  { value: '31536000', label: '1 year' },
+] as const;
+
+export type TokenExpiry = (typeof EXPIRY_OPTIONS)[number]['value'];
+
+export type Token = {
+  id: string;
+  description: string;
+  isMasterToken: boolean;
+  created: string;
+  expiresAt: string | null;
+};
+
+export type CreateTokenInput = {
+  description: string;
+  expiresIn: TokenExpiry;
+};

package/dist/template/src/routes/tokens/index.tsx

@@ -0,0 +1,182 @@
+import { useMemo, useState } from 'react';
+import { createFileRoute, Link } from '@tanstack/react-router';
+
+import {
+  Button,
+  EmptyState,
+  ErrorState,
+  PageHeader,
+  PageLayout,
+  PageToolbar,
+  SearchInput,
+  Skeleton,
+  Table,
+} from '@keboola/design';
+
+import { useAppStore } from '../../store';
+
+import { useTokens } from './-hooks';
+import type { Token } from './-types';
+
+export const Route = createFileRoute('/tokens/')({
+  component: TokensListPage,
+});
+
+function TokensListPage() {
+  const { data: tokens, isLoading, isError, error } = useTokens();
+  const helpVisible = useAppStore((s) => s.helpVisible);
+  const [search, setSearch] = useState('');
+
+  const filteredTokens = useMemo(() => {
+    if (!tokens) return tokens;
+    const query = search.trim().toLowerCase();
+    if (!query) return tokens;
+    return tokens.filter((token) => token.description.toLowerCase().includes(query));
+  }, [tokens, search]);
+
+  return (
+    <PageLayout>
+      <PageLayout.Header>
+        <PageHeader.Index
+          title="Tokens"
+          description={helpVisible ? 'Manage API tokens for your project' : undefined}
+          action={
+            <Button asChild variant="primary">
+              <Link to="/tokens/new">New Token</Link>
+            </Button>
+          }
+        />
+      </PageLayout.Header>
+
+      <PageToolbar>
+        <PageToolbar.Search>
+          <SearchInput
+            allowClear
+            placeholder="Search tokens"
+            value={search}
+            onValueChange={setSearch}
+          />
+        </PageToolbar.Search>
+      </PageToolbar>
+
+      <PageLayout.Content>
+        {isLoading && <TokensListSkeleton />}
+        {isError && <TokensListError error={error} />}
+        {!isLoading && !isError && filteredTokens !== undefined && (
+          <>
+            {filteredTokens.length === 0 ? (
+              search.trim() ? (
+                <TokensSearchEmpty />
+              ) : (
+                <TokensListEmpty />
+              )
+            ) : (
+              <TokensTable tokens={filteredTokens} />
+            )}
+          </>
+        )}
+      </PageLayout.Content>
+    </PageLayout>
+  );
+}
+
+function TokensListSkeleton() {
+  return (
+    <div className="tw:flex tw:flex-col tw:gap-3">
+      <Skeleton className="tw:h-10 tw:w-full" />
+      <Skeleton className="tw:h-48 tw:w-full tw:rounded-card" />
+    </div>
+  );
+}
+
+function TokensListError({ error }: { error: Error }) {
+  return (
+    <ErrorState>
+      <ErrorState.Icon>⚠</ErrorState.Icon>
+      <ErrorState.Title>Failed to load tokens</ErrorState.Title>
+      <ErrorState.Description>{error.message}</ErrorState.Description>
+    </ErrorState>
+  );
+}
+
+function TokensListEmpty() {
+  return (
+    <EmptyState>
+      <EmptyState.Icon>🔑</EmptyState.Icon>
+      <EmptyState.Title>No tokens yet</EmptyState.Title>
+      <EmptyState.Description>Create your first API token to get started.</EmptyState.Description>
+      <EmptyState.Actions>
+        <Button asChild variant="primary">
+          <Link to="/tokens/new">New Token</Link>
+        </Button>
+      </EmptyState.Actions>
+    </EmptyState>
+  );
+}
+
+function TokensSearchEmpty() {
+  return (
+    <EmptyState>
+      <EmptyState.Icon>🔍</EmptyState.Icon>
+      <EmptyState.Title>No matching tokens</EmptyState.Title>
+      <EmptyState.Description>Try a different search term.</EmptyState.Description>
+    </EmptyState>
+  );
+}
+
+function TokensTable({ tokens }: { tokens: Token[] }) {
+  return (
+    <Table bordered>
+      <Table.Header>
+        <Table.Row>
+          <Table.Head>Description</Table.Head>
+          <Table.Head>Type</Table.Head>
+          <Table.Head>Created</Table.Head>
+          <Table.Head>Expires</Table.Head>
+          {/* `w-0` collapses the actions column to its content, but a visually empty
+              header still needs an accessible name — axe flags an empty <th>. */}
+          <Table.Head className="tw:w-0">
+            <span className="tw:sr-only">Actions</span>
+          </Table.Head>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {tokens.map((token) => (
+          <Table.Row key={token.id}>
+            <Table.Cell className="tw:font-medium tw:text-foreground">
+              {token.description}
+            </Table.Cell>
+            <Table.Cell>
+              <span
+                className={
+                  token.isMasterToken
+                    ? 'tw:text-xs tw:font-medium tw:text-warning-700'
+                    : 'tw:text-xs tw:text-muted-foreground'
+                }
+              >
+                {token.isMasterToken ? 'Master' : 'Limited'}
+              </span>
+            </Table.Cell>
+            <Table.Cell className="tw:text-sm tw:text-muted-foreground">
+              {new Date(token.created).toLocaleDateString('en-US')}
+            </Table.Cell>
+            <Table.Cell className="tw:text-sm tw:text-muted-foreground">
+              {token.expiresAt ? new Date(token.expiresAt).toLocaleDateString('en-US') : '—'}
+            </Table.Cell>
+            <Table.Cell className="tw:text-right">
+              <Link
+                to="/tokens/$id"
+                params={{ id: token.id }}
+                // `text-secondary-500` does not clear 4.5:1 on the row background; the
+                // semantic `text-primary` token is AA-safe under every registered brand.
+                className="tw:text-sm tw:text-primary tw:no-underline tw:hover:underline"
+              >
+                View
+              </Link>
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table>
+  );
+}

package/dist/template/src/routes/tokens/new.tsx

@@ -0,0 +1,163 @@
+import { useForm } from '@tanstack/react-form';
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
+import { z } from 'zod';
+
+import {
+  Alert,
+  Breadcrumb,
+  Button,
+  FormGroup,
+  Label,
+  PageHeader,
+  Select,
+  toast,
+} from '@keboola/design';
+
+import { useCreateToken } from './-hooks';
+import { type CreateTokenInput, EXPIRY_OPTIONS, type TokenExpiry } from './-types';
+
+export const Route = createFileRoute('/tokens/new')({
+  component: NewTokenPage,
+});
+
+const EXPIRY_VALUES = EXPIRY_OPTIONS.map((o) => o.value) as [TokenExpiry, ...TokenExpiry[]];
+
+const createTokenSchema = z.object({
+  description: z
+    .string()
+    .min(1, 'Description is required')
+    .max(255, 'Description must be 255 characters or fewer'),
+  // Zod v4: use `message` instead of `errorMap`
+  expiresIn: z.enum(EXPIRY_VALUES, {
+    message: 'Select an expiry option',
+  }),
+});
+
+const validateDescription = (value: string): string | undefined => {
+  const result = createTokenSchema.shape.description.safeParse(value);
+  if (result.success) return undefined;
+  return result.error.issues[0]?.message;
+};
+
+function NewTokenPage() {
+  const navigate = useNavigate();
+  const { mutateAsync: createToken, isError, error } = useCreateToken();
+
+  // Annotate `defaultValues` so TanStack Form preserves the full TokenExpiry
+  // union instead of narrowing to the literal `'never'`.
+  const defaultValues: CreateTokenInput = {
+    description: '',
+    expiresIn: 'never',
+  };
+
+  const form = useForm({
+    defaultValues,
+    onSubmit: async ({ value }) => {
+      await createToken(value);
+      toast.success('Token created');
+      void navigate({ to: '/tokens' });
+    },
+  });
+
+  return (
+    <div className="tw:mx-auto tw:flex tw:max-w-lg tw:flex-col tw:gap-6">
+      <PageHeader.Detail
+        breadcrumbs={
+          <Breadcrumb>
+            <Breadcrumb.List>
+              <Breadcrumb.Item>
+                <Breadcrumb.Link asChild>
+                  <Link to="/tokens">Tokens</Link>
+                </Breadcrumb.Link>
+              </Breadcrumb.Item>
+              <Breadcrumb.Separator />
+              <Breadcrumb.Item>
+                <Breadcrumb.Page>New Token</Breadcrumb.Page>
+              </Breadcrumb.Item>
+            </Breadcrumb.List>
+          </Breadcrumb>
+        }
+        title="New Token"
+        description="Create a new API token with optional expiry."
+      />
+
+      {isError && (
+        <Alert variant="error">
+          <span>{(error as Error)?.message ?? 'Failed to create token'}</span>
+        </Alert>
+      )}
+
+      <form
+        className="tw:flex tw:flex-col tw:gap-5"
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void form.handleSubmit();
+        }}
+      >
+        {/* Description field */}
+        <form.Field
+          name="description"
+          validators={{ onBlur: ({ value }) => validateDescription(value) }}
+        >
+          {(field) => {
+            const errorMsg =
+              field.state.meta.isTouched && field.state.meta.errors.length > 0
+                ? String(field.state.meta.errors[0])
+                : undefined;
+            return (
+              <FormGroup state={errorMsg ? 'error' : undefined}>
+                <Label htmlFor="token-description">
+                  Description <span className="tw:text-secondary-500">*</span>
+                </Label>
+                <FormGroup.TextInput
+                  id="token-description"
+                  placeholder="e.g. CI/CD pipeline token"
+                  value={field.state.value}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                  onBlur={field.handleBlur}
+                />
+                {errorMsg && <FormGroup.Help>{errorMsg}</FormGroup.Help>}
+              </FormGroup>
+            );
+          }}
+        </form.Field>
+
+        {/* Expiry field */}
+        <form.Field name="expiresIn">
+          {(field) => (
+            <FormGroup>
+              <Label htmlFor="token-expiresIn">Expiry</Label>
+              <Select
+                id="token-expiresIn"
+                className="tw:w-full"
+                placeholder="Select expiry"
+                value={field.state.value}
+                onValueChange={(v) => field.handleChange(v as TokenExpiry)}
+                items={EXPIRY_OPTIONS}
+              />
+            </FormGroup>
+          )}
+        </form.Field>
+
+        <form.Subscribe selector={(s) => [s.canSubmit, s.isSubmitting] as const}>
+          {([canSubmit, isSubmitting]) => (
+            <div className="tw:flex tw:gap-3">
+              <Button
+                type="submit"
+                variant="primary"
+                isLoading={isSubmitting}
+                disabled={!canSubmit}
+              >
+                Create Token
+              </Button>
+              <Button asChild variant="outline">
+                <Link to="/tokens">Cancel</Link>
+              </Button>
+            </div>
+          )}
+        </form.Subscribe>
+      </form>
+    </div>
+  );
+}

package/dist/template/src/sections/chart.tsx

@@ -0,0 +1,34 @@
+import { Skeleton } from '@keboola/design';
+
+import type { OverviewSection } from '../overview-sections';
+import { LineChartCard } from '../recipes/Chart';
+
+/**
+ * The overview's credit trend: used against budgeted, per month.
+ *
+ * - Both nodes sit inside a plain wrapper because `data-section` is the registry's
+ *   anchor and neither `LineChartCard` nor `Skeleton` takes DOM attributes.
+ * - Series colours are `--chart-N` palette slots, never literal colours, so the chart
+ *   re-themes with the active brand.
+ */
+export const chartSection: OverviewSection = {
+  id: 'chart',
+  render: (overview) => (
+    <div data-section="chart">
+      <LineChartCard
+        title="Credits: used vs budgeted"
+        xKey="month"
+        series={[
+          { key: 'used', label: 'Used', tokenVar: '--chart-1' },
+          { key: 'budgeted', label: 'Budgeted', tokenVar: '--chart-2' },
+        ]}
+        data={overview.credits}
+      />
+    </div>
+  ),
+  renderSkeleton: () => (
+    <div data-section-skeleton="chart">
+      <Skeleton className="tw:h-72 tw:w-full tw:rounded-card" />
+    </div>
+  ),
+};

package/dist/template/src/sections/grid.tsx

@@ -0,0 +1,21 @@
+import { Skeleton } from '@keboola/design';
+
+import type { OverviewSection } from '../overview-sections';
+import { CreditBudgetGrid } from '../recipes/DataGrid';
+
+/** The overview's per-component budget, editable in place. */
+export const gridSection: OverviewSection = {
+  id: 'grid',
+  // `max-w-full` + `overflow-x-auto` is what keeps a wide grid inside the column:
+  // without it the table widens the page and the whole layout scrolls sideways.
+  render: (overview) => (
+    <div data-section="grid" className="tw:max-w-full tw:overflow-x-auto">
+      <CreditBudgetGrid rows={overview.budget} />
+    </div>
+  ),
+  renderSkeleton: () => (
+    <div data-section-skeleton="grid">
+      <Skeleton className="tw:h-56 tw:w-full tw:rounded-card" />
+    </div>
+  ),
+};

package/dist/template/src/sections/kpi.tsx

@@ -0,0 +1,36 @@
+import { Skeleton } from '@keboola/design';
+
+import { KpiCard } from '../components/KpiCard';
+import type { OverviewSection } from '../overview-sections';
+
+/** The overview's KPI row: one card per figure. */
+export const kpiSection: OverviewSection = {
+  id: 'kpi',
+  // Reflows on this column's own width, not the viewport's. A `lg:grid-cols-4` here
+  // would keep four columns while the assistant rail squeezes the page to a third of
+  // it — the rail narrows content without changing the viewport, so viewport
+  // breakpoints lie. `auto-fit` + a `minmax` floor drops to three, two, then one
+  // column as room runs out.
+  render: (overview) => (
+    <div
+      data-section="kpi"
+      className="tw:grid tw:[grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))] tw:gap-4"
+    >
+      {overview.kpis.map((kpi) => (
+        <KpiCard key={kpi.label} label={kpi.label} value={kpi.value} deltaPct={kpi.deltaPct} />
+      ))}
+    </div>
+  ),
+  // Four placeholders because four KPIs are coming — a skeleton that does not match
+  // the shape it stands in for makes the page jump on load.
+  renderSkeleton: () => (
+    <div
+      data-section-skeleton="kpi"
+      className="tw:grid tw:[grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))] tw:gap-4"
+    >
+      {[0, 1, 2, 3].map((slot) => (
+        <Skeleton key={slot} className="tw:h-28 tw:w-full tw:rounded-card" />
+      ))}
+    </div>
+  ),
+};