https://github.com/sparkpost/libby-react
A React component development & testing environment
https://github.com/sparkpost/libby-react
component-library design-systems react team-ux
Last synced: about 1 month ago
JSON representation
A React component development & testing environment
- Host: GitHub
- URL: https://github.com/sparkpost/libby-react
- Owner: SparkPost
- License: mit
- Created: 2021-02-01T18:36:52.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-04-12T14:11:29.000Z (about 2 years ago)
- Last Synced: 2025-02-14T22:08:07.479Z (over 1 year ago)
- Topics: component-library, design-systems, react, team-ux
- Language: JavaScript
- Homepage:
- Size: 5.93 MB
- Stars: 0
- Watchers: 16
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Libby
Libby is a focused, no-frills React component development tool, similar to Storybook but without the plugins or addons. Libby provides a standalone environment that can be used or deployed with your component or design system documentation.
##### Demos
- [matchbox-libby.netlify.app/](https://matchbox-libby.netlify.app/)
- [libby.netlify.app/](https://libby.netlify.app/)
### Motivation
Storybook is slow and ships with a lot of features that we don't need. We wanted something performant, lightweight, with slim dependencies. Benchmarking shown here was done with 1,000 stories with a single `
`, on a 2019 MBP i7 2.6GHz. Both setups are using default configs.
Libby is over **20x** faster than Storybook at starting up, and is **4x** faster at a production build.
Final bundled size is **492 KB** for Libby, compared to **5.6 MB** for Storybook.
---
### Getting Started
Install `libby` in your app:
```bash
npm i libby-react
```
Create a `libby.config.js` file to the root directory of your project:
```js
/**
* @type {import('@sparkpost/libby-react').Config}
*/
export default {
/**
* Reference to your entries, imported with a `require.context` function
* @see https://webpack.js.org/api/module-methods/#requirecontext
*/
entries: () => require.context('./src', true, /\.libby\.jsx$/),
/**
* Page title
* @default 'Libby'
*/
title: 'Libby',
/**
* Specifies the port for the dev server
* @default 9000
*/
port: 9000,
/**
* Output path for the build
* @default 'dist/libby'
*/
outputPath: 'dist/libby',
/**
* Opens the browser when running the dev server
*/
openBrowser: true,
/**
* Path to any JS you want to run before entries are mounted
* A function must be the default export
*/
preview: 'path/to/preview.jsx',
/**
* Path to a custom wrapper for all entries
* A react component must be the default export
*/
layout: 'path/to/layout.jsx',
/**
* Array of background colors for your stories
*/
backgrounds: ['#ffffff', '#FFCCD5', '#ebf0f5'],
/**
* Custom webpack config
*/
webpack?: ({ mode }) => ({
}),
};
```
Add the following scripts to your `package.json` file:
```js
// package.json
"scripts": {
"start": "libby start",
"build": "libby build"
}
```
Run libby:
```bash
npm run start
```
Create an entry:
```js
import React from 'react';
import { describe, add, it } from '@sparkpost/libby-react';
describe('My Component', () => {
add('Renders', () =>
This is a React component!);
});
```
---
### License
MIT