drover-ui v5.0.0

permalink: /index.html

This project was bootstrapped with Create React App. It uses styled-components for customization.

Installation

• yarn add drover-ui

Use

Wrap the project with the ThemeProvider, ideally, right in App.js, or uppermost component in the project, e.g:

import { ThemeProvider } from 'drover-ui'

const theme = {
  button: {
    ...
  },
  input: {
    ...
  },
  ...
}

const App = () => (
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>
)

export default App

The components of this library can be used by importing them with the object deconstruction pattern, e.g:

import { Button } from 'drover-ui'

Customization

Customizing the style of each of the framework's component relies in, React's context API. This means that each component offers a specific set of customizable properties that completely change the components appearance without the user having to understand the structure of the component's Markup and CSS.

In addition to each component-specific theme, there is a general theme that is used as a dependency by most of the components. This is on purpose, as it represents a solution to maintain consistency in style while deeply changing the appearance of an whole app.

To customize a component's theme, you could do:

import React from "react"
import { Button } from "drover-ui"

const customTheme = {
  primary: {
    backgroundColor: 'red',
  },
  secondary: {
    focus: {
      backgroundColor: 'green',
    }
  }
  fontFamily: 'Helvetica'
}

const ButtonWrapper () => (
  <Button customTheme={customTheme} label={"Dummy Button"} />
)

export default ButtonWrapper

Every customizable component of this framework supports a customTheme prop as a way to override its own theme. The available properties to customize are different from component to component. To see which are available you should go to the drover-ui site. You should pick which ones you want to change and create an object with the same structure, but only with the "key-value" pairs of the properties to change.

For customizing the base theme, you should do, e.g:

import { ThemeProvider } from 'drover-ui'

const App = () => (
  <ThemeProvider theme={customTheme}>
    <App />
  </ThemeProvider>
)

export default App

generateBaseTheme receives as argument an object representing the base theme and returns a theme complete with each component's theme updated in order to respect these base rules. The generated theme should be passed down through a ThemeProvider component, but can actually be passed whenever the user uses one of the framework's component, by providing it to the customTheme prop.

Addons

Info

This addon acts as documentation for PropType usage for each component.

To include in a component story please follow those steps:

Import the withInfo method from @storybook/addon-info:

import { withInfo } from '@storybook/addon-info'

The PropTable component is passed a propTableData array of objects as its only argument. Create a stories folder in your component directory and add a storiesPropTableData.js file in your component folder. Then populate the propTableData array with an object for each prop you give to your component. Each object must have the propName, propType, required, defaultValue and description keys respectively. Fill out each object property with their corresponding values, like in the below example:

  export default [
  {
    propName: 'trigger',
    propType: 'any',
    required: true,
    defaultValue: '-',
    description: 'A component to interact with to show trigger an event',
  },
  {
    propName: 'id',
    propType: 'string',
    required: true,
    defaultValue: '-',
    description: 'A required unique ID to assign to the component.',
  },
  {
    propName: 'content',
    propType: 'any',
    required: false,
    defaultValue: '-',
    description: 'Content to display inside of the component.',
  }
]

In your component's .stories.js file, import the array from storiesPropTableData.js like so:

import propTableData from './storiesPropTableData'

Finally, after your storiesOf('MyComponentName', module) method, add the .addDecorator() and .addParameters() methods, to look exactly like the following:

storiesOf('Tooltip', module)
  .addDecorator(withInfo)
  .addParameters({
    info: {
      TableComponent: () => PropTable(propTableData),
      header: false,
    },
  })

Utils

generateBaseTheme(customTheme: BaseTheme): BaseTheme

A function that gets a base theme and generates a complete theme object ready to provide to a ThemeProvider component.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode. Open http://localhost:9009 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm run build

Builds the lib for production to the dist folder. It correctly bundles React in production mode and optimizes the build for the best performance, and is ready to distribute to NPM.

npm run build-storybook

Builds a static web page for production to the storybook-static folder.

npm run deploy-storybook

Push storybook to gh-pages branch site

npm run bump-version:patch

npm run bump-version:minor

npm run bump-version:major

npm run release

Builds the lib and publish to NPM registry

npm test

Launches the test runner in the interactive watch mode and generate snapshots for new stories See the section about running tests for more information.