@samjurnio_/gc-ui

A lightweight, GoCardless-flavoured React component kit for interview practice. Tokens (colours, type, radii) are sampled from the real dashboard at manage.gocardless.com, so what you build in practice looks like what you'll build in the interview.

Zero build step. The components are authored with React.createElement, so the package runs as-is in Vite, Vitest and Sandpack — no JSX transform or bundler config needed. React is a peer dependency; nothing else.

Unofficial. This is a personal practice kit. It is not affiliated with, endorsed by, or produced by GoCardless; it only mirrors the general look-and-feel. "GoCardless" is a trademark of its owner.

Install

Once published:

npm install @samjurnio_/gc-ui

Or install the local tarball / source without publishing:

npm install ./gc-ui-0.1.0.tgz
npm install ./gc-ui

Then import the stylesheet once in your app entry (e.g. main.jsx):

import '@samjurnio_/gc-ui/styles.css'

Quick start

import { PageHeader, Button, DataTable, StatusBadge, formatMoney, PlusIcon } from '@samjurnio_/gc-ui'
import '@samjurnio_/gc-ui/styles.css'

const columns = [
  { key: 'reference', header: 'Reference' },
  { key: 'customer',  header: 'Customer' },
  { key: 'amount',    header: 'Amount', align: 'right', render: (p) => formatMoney(p.amount, p.currency) },
  { key: 'status',    header: 'Status', render: (p) => <StatusBadge status={p.status} /> },
]

export default function App({ payments }) {
  return (
    <>
      <PageHeader title="Payments" actions={<Button iconRight={<PlusIcon />}>Create payment</Button>} />
      <DataTable columns={columns} rows={payments} rowKey="id" />
    </>
  )
}

Full composed examples: a payments dashboard (sidebar + tabs + search + table + pagination + empty state) in example/PaymentsDashboard.jsx; the Events list (skeleton loading → table → cursor pagination) in example/EventsPage.jsx; and an event detail page in example/EventDetail.jsx.

Components

| Component | Key props | |---|---| | Button | variant (primary | accent | secondary | ghost | link), size (md | sm), iconLeft, iconRight, fullWidth, plus all <button> props | | Badge | tone (success | warning | info | danger | neutral), dot | | StatusBadge | status — maps a raw payment/mandate status to a labelled, coloured pill | | FilterTabs | items: [{ key, label, count? }], value, onChange(key) | | SearchInput | value, onChange(string), placeholder | | PageHeader | title, subtitle, actions | | Toolbar | left, right (the filter/actions row) | | DataTable | columns: [{ key, header, align?, width?, render?(row) }], rows, rowKey, onRowClick(row), empty | | TableSkeleton | columns, rows — the loading state for a DataTable (shimmer rows, matches the Events page) | | Pagination | pageSize, pageSizeOptions, onPageSizeChange(n), hasPrev, hasNext, onPrev, onNext — cursor-style prev/next + "Items per page" (matches the dashboard footer) | | DetailList | items: [{ label, value }], columns — key/value grid for detail pages (event / payment detail) | | Card | pad | | Skeleton | width, height, radius — shimmer placeholder | | LoadingState / ErrorState / EmptyState / Spinner | see below | | AppShell / Sidebar / NavItem | dashboard chrome | | Icons | SearchIcon, FunnelIcon, PlusIcon, ChevronDown, ChevronLeft, ChevronRight, MoreVertical, DownloadIcon, UploadIcon, BellIcon, GearIcon, HomeIcon, CardIcon, UsersIcon, CoinIcon | | Utils | formatMoney(minor, currency), toMinorUnits(str), statusMeta(status) |

ErrorState takes { title?, message?, onRetry? }; EmptyState takes { icon?, title, description?, action? }.

Theming

Everything is driven by CSS variables in gc-ui/tokens.css. Override any of them in your own :root to re-skin — e.g. to shift the accent:

:root { --gc-accent: #d8f24a; --gc-radius: 10px; }

Using it in your tests

The pure helpers ship with unit tests (npm test in this package). In your project (which already has the React plugin), test components against the kit with React Testing Library:

import { render, screen } from '@testing-library/react'
import { StatusBadge, DataTable } from '@samjurnio_/gc-ui'

test('renders a status pill', () => {
  render(<StatusBadge status="paid_out" />)
  expect(screen.getByText('Paid out')).toBeInTheDocument()
})

test('renders a row per payment', () => {
  render(<DataTable rowKey="id"
    columns={[{ key: 'reference', header: 'Ref' }]}
    rows={[{ id: '1', reference: 'INV-1' }, { id: '2', reference: 'INV-2' }]} />)
  expect(screen.getAllByRole('row')).toHaveLength(3) // header + 2
})

Note: styles aren't needed for tests (assert on roles/text, not colours). If your Vitest config sets css: false, importing gc-ui/styles.css in a component is simply ignored during tests.

Why plain React.createElement?

Publishing raw .jsx inside node_modules breaks in some setups (Vitest externalises node_modules and Node can't parse JSX). Authoring with createElement sidesteps all of that: the package is valid JavaScript that any React runtime accepts, so it "just works" wherever you install it. The public API you write is still ordinary JSX.

Publishing (maintainer)

The manifest is set up to publish a public, scoped package (@samjurnio_/gc-ui, publishConfig.access = public). If your npm username/org isn't samjunior, change the scope in package.json ("name": "@<your-scope>/gc-ui") first.

npm login                       # authenticate to your npm account
npm publish --access public     # first publish (scoped packages need --access public)

For later releases, bump the version (npm version patch|minor|major) then npm publish again — npm rejects re-publishing an existing version. Preview exactly what will ship with npm publish --dry-run or npm pack.