https://github.com/TheMightyPenguin/dessert-box
An utility to create a Box component from your vanilla-extract + sprinkles tokens.
https://github.com/TheMightyPenguin/dessert-box
Last synced: 9 months ago
JSON representation
An utility to create a Box component from your vanilla-extract + sprinkles tokens.
- Host: GitHub
- URL: https://github.com/TheMightyPenguin/dessert-box
- Owner: TheMightyPenguin
- License: mit
- Created: 2021-05-03T03:25:17.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-07-26T19:34:31.000Z (over 2 years ago)
- Last Synced: 2025-04-19T12:24:19.371Z (9 months ago)
- Language: TypeScript
- Homepage:
- Size: 42.2 MB
- Stars: 349
- Watchers: 2
- Forks: 20
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - dessert-box
README
# 🍰 Dessert Box
A set of utilities to build UI and components with [vanilla-extract][vanilla-extract].
- [🍰 Dessert Box](#-dessert-box)
- [Installation](#installation)
- [Styled](#styled)
- [Box](#box)
- [Usage](#usage)
- [Escape Hatch](#escape-hatch)
- [Variants](#variants)
- [API](#api)
- [createBox(options: { atoms: AtomsFn, defaultClassName?: string })](#createboxoptions--atoms-atomsfn-defaultclassname-string-)
- [createBoxWithAtomsProp(options: { atoms: AtomsFn, defaultClassName?: string })](#createboxwithatomspropoptions--atoms-atomsfn-defaultclassname-string-)
- [Running the example app](#running-the-example-app)
- [How does it work?](#how-does-it-work)
- [Thanks](#thanks)
- [FAQ](#faq)
## Installation
:warning: If you are not familiar with [vanilla-extract][vanilla-extract], we recommend going trough their docs first and have a working setup before trying any of the dessert box packages.
```sh
$ npm install @dessert-box/react
```
## Styled
A `styled-components`-like API to create components in your `*.css.ts` files. To use this, you can define your components
```ts
// styledComponents.css.ts
import { styled } from '@dessert-box/react';
export const StyledHeadline = styled('h1', {
color: 'white',
fontSize: '16px',
fontWeight: 'bold'
});
```
```ts
import { StyledHeadline } from './styledComponents.css.ts';
function App() {
return (
I have 0 runtime styles 🤯
)
}
```
## Box
A box component that will make consuming your [sprinkles][sprinkles] from a breeze. It provides a zero-CSS-runtime `` component (similar to the one in [Braid](https://seek-oss.github.io/braid-design-system/components/Box) or [Chakra](https://chakra-ui.com/docs/layout/box)).
[Try it on CodeSandbox!](https://codesandbox.io/s/dessert-box-demo-wxgy8?file=/src/App.tsx)
It works by consuming `atoms` created with [`vanilla-extract`][vanilla-extract]) and [`sprinkles`][sprinkles]. Shout out to the team at Seek for making these awesome libraries!
1. Step 1, create your Box with your `atoms` created with sprinkles:
```tsx
// Box.tsx
import { createBox } from '@dessert-box/react';
import { atoms } from './sprinkles.css';
const Box = createBox({
atoms,
// optional: pass your CSS reset className here
// useful if you want to scope your reset to your Box element
defaultClassName: 'resetClassName',
});
export default Box;
```
2. Step 2, import it enjoy the sweetness:
```tsx
// OtherFileOrComponent.tsx
import Box from './Box';
const MyComponent = () => {
return What a sweet treat!;
};
```
**Wondering why using a Box component may be a good idea? or what is a Box component? Check the [FAQ](#FAQ).**
> Wondering how to use `variants` with this library? Check out the [variants](#variants) section.
[Try it on CodeSandbox!](https://codesandbox.io/s/dessert-box-demo-wxgy8?file=/src/App.tsx)
### Usage
Install the package:
```
$ npm install @dessert-box/react
```
Configure [vanilla-extract](https://github.com/seek-oss/vanilla-extract) and [`sprinkles`](https://github.com/seek-oss/vanilla-extract/tree/master/packages/sprinkles) and have your atoms ready:
```js
// atoms.css.ts
import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
const space = {
none: 0,
small: 4,
medium: 8,
large: 16,
};
const colors = {
primary: 'blue',
// ...
};
const atomicStyles = defineProperties({
conditions: {
mobile: {},
tablet: { '@media': 'screen and (min-width: 768px)' },
desktop: { '@media': 'screen and (min-width: 1024px)' },
},
properties: {
padding: space,
backgroundColor: colors,
// ...
},
// ...
});
export const atoms = createSprinkles(atomicStyles);
```
> Check `sprinkles` [docs](https://github.com/seek-oss/vanilla-extract/tree/3360bdfc9220024e7ffa49b3b198b72743d4e264/packages/sprinkles#setup) for more context into how to create these atoms.
Now let's create our `` using these atoms:
```tsx
// Box.ts
import { createBox } from '@dessert-box/react';
import { atoms } from './sprinkles.css';
const { Box } = createBox({ atoms });
export default Box;
```
```tsx
// otherFile.tsx
import Box from './Box';
const App = () => {
return Hello;
};
```
Notice we can pass every property, shorthand, or condition we can normally pass to our `atomsFn` function. For example, we could leverage the conditions for responsive design we have here:
```jsx
```
If you need to render a tag different than a `div`, you can use the `as` prop:
```jsx
Link to example
```
### Escape Hatch
We have a way of specifying an arbitrary value (non design token) for any of your atoms properties like the following:
```jsx
Link to example
```
This is useful for those cases where we need to exit our system to accomplish something.
[Try it on CodeSandbox!](https://codesandbox.io/s/dessert-box-demo-wxgy8?file=/src/App.tsx)
### Variants
The official [@vanilla-extract/recipes][recipes] package has an excelent API for dealing with variants, this can be combined with our `Box` component to create [variant-based components](https://ped.ro/blog/variant-driven-components):
NOTE: (Assuming you already have created your `Box` component following the example above).
1. First define your recipe using the `recipe` function:
```tsx
// Button.css.ts
import { recipe } from '@vanilla-extract/recipes';
import { atoms } from '../atoms.css';
export const buttonRecipe = recipe({
variants: {
kind: {
primary: atoms({ background: 'blue50' }),
secondary: atoms({ background: 'yellow' }),
},
size: {
md: atoms({ fontSize: 'large' }),
lg: atoms({ fontSize: 'extraLarge' }),
},
},
});
export type ButtonVariants = Parameters[0];
```
2. Then use the `recipes` function to create variants and apply them to your `Box`:
```tsx
// Button.tsx
import { Box } from './Box';
import { buttonRecipe, ButtonVariants } from './Button.css';
type Props = {
children: React.ReactNode;
} & ButtonVariants;
export const Button = ({
children,
size = 'md',
kind = 'secondary',
}: Props) => {
return (
{children}
);
};
export default Button;
```
For more context, refer to [@vanilla-extract/recipe][recipes] or feel free [to open an issue in this project](https://github.com/TheMightyPenguin/dessert-box/issues/new) if the integration is not working as you'd expect!
## API
### createBox(options: { atoms: AtomsFn, defaultClassName?: string })
Creates a `` component that takes atoms at the root level.
```jsx
import { createBox } from '@dessert-box/react';
import { atoms } from './atoms.css';
const Box = createBox({ atoms });
;
```
### createBoxWithAtomsProp(options: { atoms: AtomsFn, defaultClassName?: string })
Creates a `` component that takes atoms as a prop called `atoms`.
```jsx
import { createBoxWithAtomsProp } from '@dessert-box/react';
import { atoms } from './atoms.css';
const Box = createBoxWithAtomsProp({ atoms });
;
```
## Running the example app
Run `npm install` then `npm run build` in the root folder (the one with this README file).
Then move into the example folder `cd example` and run `npm install` and `npm start`.
## How does it work?
This works by depending on build-time generated CSS by [sprinkles](https://github.com/seek-oss/vanilla-extract/tree/3360bdfc9220024e7ffa49b3b198b72743d4e264/packages/sprinkles), and then using the `atomsFn` function to lookup classNames in runtime. So it does have a runtime footprint, but should be pretty minimal. I'm still experimenting to see if it's possible to remove that, but other approaches may lead to other constraints or similar runtime.
## Thanks
- Thanks to the team at Seek for [vanilla-extract](https://github.com/seek-oss/vanilla-extract) and [`sprinkles`](https://github.com/seek-oss/vanilla-extract/tree/master/packages/sprinkles), this would not be possible without these great libs and the technical feats they accomplish.
## FAQ
- What is a Box component?
> It's a generic element that allows you to prototype fast and takes a variety of styling props (think of exposing a lot of CSS attributes as props on a component).
- Why should I use a Box component?
> There are many versions and flavors of a Box component, some are more [flexible](https://chakra-ui.com/docs/layout/box), while others are more [restrictive](https://seek-oss.github.io/braid-design-system/components/Box). The Box in this library falls into the latter category (restrictive), and it's more geared towards being the a lower level API of your Design System (or serving as inspiration for it).
This Box component is meant to be used as a primitive for consuming design tokens, giving you a nice balance between flexibility and constraints. You can use it as an lower level API to implement your other components (Buttons, Card, Layout components, ...), and also as a prototyping and general usage component:
- As a prototyping tool, it allows you to use all of your design tokens to generate new designs and evaluate if you need to iterate on your foundations, or to validate if they work for your use cases.
- For general usage you can still have the guarantee that users of your system won't do anything impossible (e.g.: using a value that is not part of the design tokens) but still have a productive experience working on UI.
[sprinkles]: https://github.com/seek-oss/vanilla-extract/tree/master/packages/sprinkles
[vanilla-extract]: https://github.com/seek-oss/vanilla-extract
[recipes]: https://github.com/seek-oss/vanilla-extract#recipes-api