@gnist/component-utils NPM

Component utilities for @moller/design-system

@gnist/component-utils currently contains a single utility function for easily creating React components from css classes (e.g. created with style(...) from @vanilla-extract/css) or recipes created with @vanilla-extract/recipes.

Overview

The function component has two overloads, for use with either a className string or a recipe function.

Using a className string

// Heading.css.ts
import { atoms } from "@moller/gnist-themes/atoms.css.js";
import { style } from "@vanilla-extract/css";

export const heading = style([
    { float: "left" },
    atoms({ margin: "none", typography: "subtitle-small" }),
]);

// Heading.tsx
import { component } from "@gnist/component-utils";
import { bannerHeading } from "./Heading.css.js";

export const Heading = component("Heading", heading, "h2");
//                                   │         │       │
// The display name of the component ┘         │       │
// The className to use for the element ───────┘       │
// The default HTML element or React component to use ─┘

// ...later...

<Heading $as="h4" href="#anchor">
    Now this is a h4
</Heading>;

Using a recipe function

// Box.css.ts
import { recipe } from "@vanilla-extract/recipes";
import { atoms } from "@moller/gnist-themes/atoms.css.js";

export const box = recipe({
    base: atoms({ display: "flex" }),
    variants: {
        density: {
            default: atoms({ padding: "s" }),
            compact: atoms({ padding: "xxs" }),
        },
    },
    defaultVariants: { density: "default" },
});

// Box.tsx
import { component } from "@gnist/component-utils";
import { box } from "./Box.css.js";

export const Box = component("Box", box, "div");
//                             │     │     │
// The display name ───────────┘     │     │
// The recipe function  ─────────────┘     │
// The default element or component ───────┘

// ...later...

<Box $as="span" density="compact">
    Now the box has xxs padding and is a span
</Box>;