brandeur-primitives v2.0.2

brandeur-primitives

Installation

# npm
npm i --save brandeur-primitives
# yarn
yarn add brandeur-primitives
# pnpm
pnpm add brandeur-primitives

Usage

import { createSystem, createBox, createText } from 'brandeur-primitives'

const system = createSystem({
  // brandeur config here
  baselineGrid: 1,
})

const Box = createBox(system)
const Text = createText(system, {
  heading: {
    fontSize: 28,
    fontWeight: 700,
  },
  body: {
    fontSize: 16,
  },
})

const App = (
  <>
    <style dangerouslySetInnerHTML={{ __html: system.styleSheet }} />
    <Box padding={5} gap={2}>
      <Text as="h1" variant="heading" color="red">
        Headline
      </Text>
      <Text variant="body">Some body text</Text>
    </Box>
  </>
)

API Reference

• createSystem
• createBox
• createText
• createClick
• createGrid
• createOverlay
• createSpacer
• createVisuallyHidden

createSystem

Arguments

Accepts an object including all of brandeur's createHooks configuration. Additionally, also accepts the following properties:

Returns

An object containing the styleSheet from createHooks and an generic El component.

El

Props

Note: All other props are passed down to the rendered component.

Example

function Button(props) {
  return <button {...props} />
}

const Example = (
  <El style={{ padding: 10 }}>
    <El as="h1" style={{ fontSize: 20 }}>
      Title
    </El>
    <El
      as={Button}
      type="button"
      style={{ backgroundColor: 'blue' }}
      onClick={() => alert('CLICKED')}>
      Click me
    </El>
  </El>
)

createBox

Takes the system object and returns Box component with first-class flexbox layout props.

Important: It uses different default values for some flexbox properties to align more closely with the React Native defaults.

Props

Box renders a El component and thus also accepts the as and style props mentioned above.

Example

import { createBox } from 'brandeur-primitives'

const Box = createBox(system)

const Example = (
  <Box padding={10} gap={4}>
    <Box direction="row" gap={2}>
      <Box bg="red" width={50} height={50} />
      <Box bg="blue" width={50} height={50} />
    </Box>
    <Box direction="row" gap={2}>
      <Box bg="green" width={50} height={50} />
      <Box bg="yellow" width={50} height={50} />
    </Box>
  </Box>
)

createText

Takes the system object and a typography map and returns Text component with first-class text props and typography variants. The typography map takes pairs of string variants and style objects.

The first instance of Text renders display: block while all child instances render display: inline-block.

Props

Box renders a El component and thus also accepts the as and style props mentioned above.

Example

import { createText } from 'brandeur-primitives'

const Text = createBox(system, {
  title: {
    fontSize: 32,
    fontWeight: 700,
    fontFamily: 'Inter',
  },
  body: {
    fontSize: 16,
  },
})

const Example = (
  <>
    <Text variant="title">Hello</Text>
    <Text variant="body">
      Hello{' '}
      <Text color="red" weight={700}>
        World
      </Text>
    </Text>
  </>
)

createClick

Takes the system object and an optional link component and returns a universal Click component that accepts an action that can be both a href string as well as an onClick event function. It can be used to wrap framework-specific link components such as next/link.

By default it renders a plain HTML <a> element for links. If onClick is passed, it renders a HTML <button> element.

Props

Click renders a El component and thus also accepts the as and style props mentioned above.

Action

string | (e: React.MouseEvent<HTMLElement>) => void

If the passed link component takes a different href type, Click will also inherit that type.

Example

import Link from 'next/link'
import { createClick } from 'brandeur-primitives'

const Click = createClick(system, Link)

const Example = (
  <>
    <Click action={() => alert('CLICKED')}>Clickable Button</Click>
    <Click href="/subpage">Just a link</Click>
    <Click href={{ pathname: '/subpage', query: { name: 'test' } }}>
      next/link href options
    </Click>
  </>
)

createGrid

Takes the system object and returns Box component with first-class grid layout props.

Props

Grid renders a El component and thus also accepts the as and style props mentioned above.

Example

import { createGrid } from 'brandeur-primitives'

const Grid = createGrid(system)

const Example = (
  <Grid columns="1fr 1fr 1fr" gap={4}>
    <div>Hello</div>
    <div>World</div>
    <div>!</div>
  </Grid>
)

createOverlay

Takes the system object and returns an Overlay component with position: fixed and padding-*: safe-area-inset-*.

Props

Grid renders a El component and thus also accepts the as and style props mentioned above.

Example

import { createOverlay } from 'brandeur-primitives'

const Grid = createOverlay(system)

const Example = <Overlay>Fixed overlay</Overlay>

createSpacer

Takes the system object and returns a Spacer component.

Props

Spacer takes a single size prop that accepts a length value. If a number is passed and respects the baselineGrid.

Example

import { createSpacer } from 'brandeur-primitives'

const Spacer = createSpacer(system)

const Example = (
  <>
    <div>Hello</div>
    <Spacer size={10} />
    <div>World</div>
  </>
)

createVisuallyHidden

Takes the system object and returns a component that visually hides its children while keeping them visible to screen readers.

Example

import { createVisuallyHidden } from 'brandeur-primitives'

const VisuallyHidden = createVisuallyHidden(system)

const Example = <VisuallyHidden>I am visually hidden</VisuallyHidden>

License

Brandeur is licensed under the MIT License. Documentation is licensed under Creative Commons License. Created with ♥ by @robinweser.