/bolt

Pismo Styleguide & UI Components

Primary LanguageTypeScript

Bolt

Pismo's styleguide and design system with it's React components that compose most of the platform UI.

Build Status

This is a monorepo using lerna. Each package inside /packages is a completely decoupled project. They are individually published to npm.

Technologies used

To do

  • Toggle themes on docz

Goals

The @pismo/bolt-core:

  • export a styled component instance and their helpers already ready to use in typescript projects
  • export the app theme (to be used in ThemeProvider) and a GlobalStyle component to use in pismo front-ends

The @pismo/bolt-<component-name>:

  • export a component already ready to use.

Bolt usage in pismo applications

Setup

  • In your App.js or index.js use the ThemeProvider from styled-components to import the theme of your choice from @pismo/bolt-core.
  • Also in your App.js or index.js create a GlobalStyle component with the createGlobalStylePismo from @pismo/bolt-core and use it.
  • If there is a need you can also pass a string in createGlobalStylePismo to set your own globals.

Check a complete example below of an App.js:

import React from 'react'
import { ThemeProvider, withTheme } from 'styled-components'
import { createGlobalStylePismo, themePismo } from '@bolt/core'

import { setUser } from './hooks/userContext'
import { language } from './hooks/languageContext'

import { Wrapper } from '@pismo/bolt-wrapper'
import { Button } from '@pismo/bolt-button'

const GlobalStyle = withTheme(createGlobalStylePismo())

export const App = () => {
  return (
    <ThemeProvider theme={themePismo}>
      <Wrapper>
        <Button>
      </Wrapper>
      <GlobalStyle />
    </ThemeProvider>
  )
}

Components

  • Read the documentation to find the component you need and check props and examples
  • Install the component in your app yarn add @pismo/bolt-<component-name>
  • Use it!

Components

Package Version Documentation
bolt-button npm version Button Documentation
bolt-core npm version Core Documentation
bolt-form npm version Form Documentation
bolt-form-buttons npm version FormButtons Documentation
bolt-form-section npm version FormSection Documentation
bolt-loader npm version Loader Documentation
bolt-search-field npm version SearchField Documentation
bolt-search-list npm version SearchList Documentation
bolt-select-field npm version SelectField Documentation
bolt-table npm version Table Documentation
bolt-table-item npm version TableItem Documentation
bolt-text-field npm version TextField Documentation
bolt-timer npm version Timer Documentation
bolt-toast npm version Toast Documentation

Development flow

Core

If you need to change the creation method for GlobalStyle or create a new theme, core is the place to make those changes.

Change a Theme

  • Access the themeXXX.ts
  • Make your changes in the interface and also the theme object
  • Done!

Create a new Theme

  • Create a themeXXX.ts in the root folder. (Don't forget the interface)
  • Export it in index.js as export { themeXXX } from './themeXXX'

Components

Create new components is pretty easy. Follow the instructions below to start.

  • Git clone this monorepo
  • Create a new branch for this component feature/my-button
  • Make sure you installed all dependencies by running yarn
  • Run the command yarn template:component MyButton
  • Install any dependencies you need in this package by cd packages/my-button && yarn add other-dependency
  • Make your changes to MyButton.tsx create fns or whatever is necessary to finish the feature
  • Update the documentation on MyButton.mdx file inside packages/my-button
  • Git push and create a PR.

Documentation

We're using docz to document all the components. Jenkins is already set so on every merge to develop branch triggers a documentation change based on the .mdx files explained in the component development flow.

Just check https://bolt.pismolabs.io/

Distribution

First, make sure you are signed in to npm and is a team member of @pismo:developers.

> npm login

Then, simply run:

> lerna publish

Follow the steps, choose the proper version to be published and lerna will publish every package for you.

Templates

For now we just have the component template.

Important to check it to make sure we have the most updated templates.