Displaying 1 to 20 from 52 results

storybook - Interactive UI component dev & test: React, React Native, Vue, Angular

  •    Javascript

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.

arc - React starter kit based on Atomic Design

  •    Javascript

ARc (Atomic React) is a React starter kit based on the Atomic Design methodology. It's progressive, which means that you can start with the basic boilerplate and try the other features when you are comfortable. If you find this useful, please don't forget to star ⭐️ the repo, as this will help to promote the project. Follow me on Twitter and GitHub to keep updated about this project and others.

vue-play - 🍭 A minimalistic framework for demonstrating your Vue components

  •    Javascript

A minimalistic framework for demonstrating your Vue components, inspired by react-storybook. The only thing you really need to worry about is ./play/index.js, since you will write scenarios or dynamically load scenarios there.




loki - 👁 Visual Regression Testing for Storybook

  •    Javascript

There are a few visual regression tools for the web, but most either cannot be run headless or use phantomjs which is deprecated and a browser nobody is actually using. They usually also require you to maintain fixtures. With react-native it's now possible to target multiple platforms with a single code base, but there's no single tool to test all to my knowledge. Loki aims to have easy setup, no to low maintenance cost, reproducible tests independent of which OS they are run on, runnable on CI and support all platforms storybook does.

storybook-deployer - Deploy your storybook as a static site

  •    Javascript

Then you can run npm run deploy-storybook to deploy the Storybook to GitHub Pages. Make sure to set the output directory as .out.

jest-storybook - Generate Jest snapshots from existing storybooks (similar to storyshots).

  •    Javascript

Generate Jest snapshots from existing storybooks (similar to storyshots).Note: this isn't a library, but a set of instructions + code to do this yourself. If a wortwhile abstraction arises, I'll publish it accordingly.


react-storybook-decorator-background - Background colors for your React Storybook

  •    Javascript

Background colors for your React Storybook. When you call backgroundColor with a list of hex codes, it'll create the swatches in that order on the bottom right of the story preview. The first color in the list will be the default background color.

backpack-ui - All the tools you need to build the Lonely Planet UI experience.

  •    Javascript

Every adventurer needs a set of tools to take along the way! Backpack is the Lonely Planet toolset that we use to build front end apps. Open http://localhost:6006/ in your favorite web browser.

workflow-reactjs - My workflow with ReactJS + Webpack 3+

  •    Javascript

If you are on Windows, and try to run yarn lint, you'll get an error because spawn module does not work very well on Windows. You should install cross-spawn, and edit gulpfile.js, removing line 4 and uncomment line 7.

colors-show - Present your application colors with style.

  •    Javascript

Present your application colors with style. colors - object / required - Map of colors where key is a name and value is a color in CSS one of css formats.

buffer-components - Buffer's shared collection of React UI components 🤜🤛

  •    Javascript

A shared set of UI Components using React and CSS Modules. To use this in your project start at the usage section. If you'd like to add to this library skip to component development.

saiku-react-starter - A template for writing React based ECMAScript 2015 (ES6) + Redux + React Router + Webpack and more

  •    Javascript

A template for writing React based ECMAScript 2015 (ES6) + Redux + React Router + Webpack and more. If you want to help, please read the Contributing guide.

uikit-react - UIkit components built with React

  •    Javascript

React UI component built on top of the UIkit CSS. This library makes no assumptions on how you provide the CSS; load it in any way you like. For our Storybook we import the LESS file from UIkit directly. Check our Storybook to see docs and usage examples for each component in the library.

astraea - TypeScript + React + Redux Boilerplate

  •    TypeScript

This is a boilerplate project for developing a mid to large scale client-side application(s) using TypeScript, React, and Redux. For an example project, visit the example branch. Rather than group items by things like components/reducers/actions/etc., items are grouped by domain which can be a saner option as the project grows. Examples of domains can be things like resources (ex. blog/, users/) or other things. (ex. ui/) Domains may include things like components, actions, reducer, etc. but they don’t have to include all of them. In fact, you can think of app/ and common/ as domains. Other files may be present as well.

storybook-state - Manage component state in React storybook.

  •    Javascript

An extension for Storybook that manages the state of a stateless component. This makes it easier to write stories for stateless components. Register the extension in addons.js.

react-module-boilerplate - Sample React presentational components package.

  •    Javascript

Sample React components package. Showcase and document techniques and glued tools to build and maintain either single component or UI systems packages. Strive for keeping things simple and efficient.

storybook-addon-figma - Embed Figma designs in a storybook panel

  •    Javascript

If you find that the Figma panel at the bottom is not big enough to fit your designs, it is possible to move the panel to the right of the window instead, where it is possible to give it more space. This requires the @storybook/addons-options addon. Note however that it is only possible to do this for all stories at once, and will move all addon panels to the right. A simple setup is shown here.