JBX

The little component toolkit behind the tools on javier.xyz. Plain components with a class each, one stylesheet, no runtime dependencies.

pnpm add jbx

React is a peer dependency (17, 18 or 19), so it uses whichever copy you already have.

Styles

Either import the stylesheet and set your own accent color:

import 'jbx/main.css';

:root {
  --accent-color: #f1c40f;
}

Or let the JBX component do both:

<JBX accent="#f1c40f" />

JBX has no hooks and no dependencies, so it renders inside a React server component too. So does every component except Input, which holds the state behind onValueChange and is marked 'use client'.

Two more variables are worth knowing about. --control-height is how tall a Button, Input or Range stands on its own; --control-height-compact is what one shrinks to inside a Tabs row, where it matches the line box of the text beside it so the row is no taller than a row of plain tabs.

Use

import { JBX, MainHeader, Text, Space, Container } from 'jbx';

function App() {
  return (
    <Container>
      <JBX accent="#f1c40f" />
      <MainHeader>React Blur</MainHeader>
      <Space h={1} />
      <Text>React component for creating blurred backgrounds.</Text>
    </Container>
  );
}

Components

Layout: Container, Inline, Stack, Box, Space.

Type: MainHeader, HeaderH1--HeaderH4, Text, SmallText, A, Ul, Li, Bullet, HR.

Controls: Button, Input, Range, Checkbox, Tabs with Tab, Dropzone.

Code: CodeSnippet, CodeTextarea.

Plus JBX for the stylesheet, MoreExperiments for the footer that links the other tools, and Component and space for building your own.

Number inputs

Input is a plain controlled input until you hand it onValueChange, which switches it to numbers and takes over the awkward part: it holds what was typed and only calls you back once that parses and lands inside min/max. A half typed value never reaches your state, so nothing downstream jumps around mid-keystroke, and blurring a field you left half typed restores the live value.

<Input value={seconds} onValueChange={secondsSet} min={0.2} max={60} step="0.5" />

value and onChange on their own behave exactly as they always did.

Spacing

Everything is measured in units of --size (16px, 14px on smaller screens). <Space h={2} />, <Inline gap={1} />, <Box padding={[0.5, 1]} /> all speak the same scale, and space(n) gives you the raw css value if you need it somewhere else.

Making your own

Component is the whole idea — a class name, optional styles, optional element:

const Sprite = Component(
  `jbx-img`,
  ({ height, width }) => ({ height, width, imageRendering: 'pixelated' }),
  { element: 'img', styleProps: ['height', 'width'] }
);

styleProps lists the props the style function consumes so they don't end up as DOM attributes.

Develop

pnpm dev            # serve the interactive preview at localhost:3008/jbx
pnpm dev:lib        # rebuild the published library on change
pnpm preview:build  # make a production build of the preview
pnpm typecheck
pnpm test           # renders every export, fails on any React warning

Publish

New versions are published to npm automatically when they reach main. A push whose version is already on npm succeeds without publishing again.

1. Add the release notes to CHANGELOG.md.
2. Run pnpm version minor --no-git-tag-version to update package.json.
3. Run pnpm test.
4. Commit the changes and push them to main.
5. Confirm the Publish package workflow succeeds, then check the version with pnpm view jbx version.

Publishing uses npm trusted publishing through GitHub Actions. It does not require an npm token in the repository.