@qred/ui-components v0.11.7

@qred/ui-components

Boilerplate Based on this tutorial by codewithbernard

Commands

Development

To develop locally either run:

yarn storybook

or:

yarn dev

storybook launches a local version of storybook using the .stories.js files in the components, while dev runs the app in the srctest/ folder, develop locally using the method you prefer.

Deploy storybook

First:

yarn build-storybook

Then:

yarn deploy-storybook

Deployment to npm

To deploy you need to change the package.json version first: ideally upwards using: (major/minor/hotfix)

First:

yarn build

Then:

npm publish

Storybooks

https://qred.github.io/ui-components

npm

https://www.npmjs.com/package/@qred/ui-components

Documentation

Deploy storybooks

Run the command:

yarn deploy-storybook

To start

yarn
yarn start

Edit src/index.js (your component)

Run local test client

yarn dev

Edit /srctest/app.js to change the parent environment, pass in props, etc.

Run locally as import into another project

Build this project:

yarn build

In this project's root directory, type:

yarn link

And then, in the project (root dir) you would like to use your component:

yarn link my-awesome-component

For this example I've used the package name my-awesome-component. This creates a symlink of your package in your project's node_modules/ dir. Now, you may import the component in your test project, as if it was a normally installed dependancy:

import MyAwesomeComponent from 'my-awesome-component'

If you're using a hot-reload system, you should be able to observe any changes you make to your component (as long as you build them)

To publish your component to npm

Update the package.json with correct information. Important things to set:

{
  "name": "cool-beans",
  "version": "4.2.0",
  "description": "My wizzbang gizmo",
  "author": "stevejobs",
  "license": "ISC"
}

If you have a git repo for the project, include the details:

"repository": {
    "type" : "git",
    "url" : "https://github.com/zxol/react-component-publish"
  },

Then, in the root directory, type:

npm publish

npm docs on publishing packages

A note on webpack configs and the dev server:

There are two webpack configs.

• One for building the published component webpack.publish.js
• One for viewing the component in the dev server. webpack.testServer.js

Note that they are separate, so any additions you make will have to be mirrored in both files, if you want to use the dev server. If anyone knows a better way to do this, please let me know.

Button

Props

Common props you may want to specify include:

• disabled - gives a disabled style to the button
• primary - use primary style for button
• secondary use secondary style for button
• tertiary - use tertiary style for button
• size - button size either: 'small', 'medium'
• style - passing css style to the button
• to - href link
• target - a tag html target=""
• onClick - on click of button do this
• icon - icon to display inside the button
• fullwidth - display with 100% width

Usage

import { Button } from '@qred/ui-components';
...
<Button> </Button>

Header

Props

Usage

  <Header
    logoUrl="htps://static.qred.com/sv-se/bilder/logo-desktop-se.svg"
  >
    // Inner node can be any valid jsx
    <div className="Menu">
      <ul>
        <li>
          <a href="https://google.com">Home</a>
        </li>
        <li>
          <a href="https://googleplus.com">Trash</a>
        </li>
      </ul>
    </div>
  </Header>

MobileDrawer

Mobile drawer component to store mobile navigation. Won't show above screen size desktop: (992px).

Props

Usage

children node will appear in the drawer content.

  <MobileDrawer
    open={drawerOpen}
    onClose={this.handleToggleDrawer}
  >
    <ul>
      <li><a href="https://qred.com/se/">Home</a></li>
      <li><a href="https://qred.com/se/om-oss">About us</a></li>
    </ul>
  </MobileDrawer>

Modal

The modal component uses a styled react-modal

import { Modal } from '@qred/ui-components';

...

  <Modal
    isOpen={isOpen}
    closeModal={() => setIsOpen(false)}
    screenReaderLabel=""
  >
    <>
      <input type="button" onClick={() => setIsOpen(false)} value="close modal" />
      <h1>This is a modal</h1>
      <p>This content also belongs to a modal</p>
    </>

  </Modal>

MultipleChoice

The multiple choice component

Props

Usage

import { MultipleChoice } from '@qred/ui-components';
...

<MultipleChoice
  choices={[
    {
      label: 'Choice 1',
      value: 1
    },
    {
      label: 'Choice 2',
      value: 2
    },
    {
      label: 'Choice 3',
      value: 3
    }
  ]}

  selected={this.state.selected}

  onChange={
    // onChange will have the object for the item clicked sent in choices
    (selected) => {
      this.setState({
        selected
      })
    }
  }

/>

Or in icon mode

import { MultipleChoice } from '@qred/ui-components';
...

<MultipleChoice
  icon
  choices={[
    {
      label: 'Choice 1',
      value: 1,
      iconUrl: 'https://static.qred.com/sv-se/bilder/icons8-trolley-500.svg'
    },
    {
      label: 'Choice 2',
      value: 2,
      iconUrl: 'https://static.qred.com/sv-se/bilder/icons8-trolley-500.svg'
    },
    {
      label: 'Choice 3',
      value: 3,
      iconUrl: 'https://static.qred.com/sv-se/bilder/icons8-trolley-500.svg'
    }
  ]}
  ...

Props

ProgressBar

Props

Usage

import { ProgressBar } from '@qred/ui-components'

...

return (
  <ProgressBar
    percent={10}
    label={"The progress:"}
    status={"warning"}
  />
)
...

ThemeProvider & theme

Implements styled-components Themeprovider

Usage:

import { ThemeProvider } from 'styled-components'
import { Button, themes } from '@qred/ui-components';
...
render() {
  return (
    <ThemeProvider theme={themes.swagnes}>
      <Button>Press me! </Button>
    <ThemeProvider>
  )
}

Current theme: swagnes

Then in css files usage of theme variables:

import styled from 'styled-components';

export const Container = styled.div`
  background-color: ${props => props.theme.colors.primary};
`

Available theme options:

swagnes theme

{
  colors: {
    primary: '#42D984',
    secondary: '#4C53FF',
    lightGreen: '#EAF9EE',
    grey: '#C4C4C4',
    greyText: '#989898',
    darkGrey: '#4E4E4E',
    white: '#fff',
    black: '#000',
    success: '#2EC185',
    warning: '#F5BB58',
    error: '#EB4C6A',
  },
  fontFamily: 'Poppins',
  maxContentWidth: '1080px',
}