JeffersonCarvalh0 / bolt

Pismo Styleguide & UI Components

Bolt

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

---

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

Technologies used

• React
• Typescript
• Styled Components
• Docz
• Jest
• React Testing Library

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		Button Documentation
bolt-core		Core Documentation
bolt-form		Form Documentation
bolt-form-buttons		FormButtons Documentation
bolt-form-section		FormSection Documentation
bolt-loader		Loader Documentation
bolt-search-field		SearchField Documentation
bolt-search-list		SearchList Documentation
bolt-select-field		SelectField Documentation
bolt-table		Table Documentation
bolt-table-item		TableItem Documentation
bolt-text-field		TextField Documentation
bolt-timer		Timer Documentation
bolt-toast		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.