si-dx-ui

A React UI component library from Shoemate Interactive.

Developer Getting Started

• Clone this repository with either:
  • HTTPS: git clone https://github.com/codyburleson/si-dx-ui.git
  • SSH: [email protected]:codyburleson/si-dx-ui.git
  • GitHub CLI: gh repo clone codyburleson/si-dx-ui
• Change into the project directory:
  • cd si-dx-ui
• Launch VS Code from within the project directory:
  • code .
• In VS Code, open an integrated terminal with Terminal > New Terminal
• Switch to the preview branch (that's our active work branch). In the integrated terminal, execute:
  • git checkout preview
• Install package dependencies with:
  • npm install or npm i
• Run storybook
  • npm run storybook
  • Access at: http://localhost:6006/
  • Storybook helps you build UI components in isolation from your app's business logic, data, and context. That makes it easy to develop hard-to-reach states. Save these UI states as stories to revisit during development testing, or QA. Browse example stories now by navigating to them in the sidebar. View their code in the src/stories directory to learn how they work. We recommend building UIs with a component-driven process starting with atomic components and ending with pages.

Create and Update Components

• Components are created and modified under src/components, with each unique component having its own directory.
• When you create a new component, you must add an export * from ... line in src/index.js so that rollup will include it when bundling.

Adding a story (quick and simple)

• Create a file under src/stories using the following naming convention: Component.stories.jsx
• Here is a very simple story example:

import React from 'react'
import { storiesOf } from '@storybook/react'

// Use this to work with local package (not yet published to NPM)
import { Alert } from '../components/Alert/Alert'

// Use this to work with published package from NPM...
// import { Alert }  from 'si-dx-ui'

const stories = storiesOf('Components', module)

stories.add('Alert', () => {
    return ( <Alert/> )
})

Build and Deploy to NPM for Production Use

• Update version number in package.json
• npm run build
  • This executes the "build" script target defined in package.json, which in turn, kicks off the rollup.js module bundler. After this build, you can deploy to NPM...
• npm login
• npm publish si-dx-ui