@selfpub/selfpub-ui NPM

SelfPub UI design system language and React-based components implementation.

In project used styled-components must use in project same version styled-components

Browsers support

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Samsung	Android
IE10, IE11, Edge	last 5 versions	last 5 versions	last 2 versions	last 3 versions	last 3 versions	4.4+

Install

npm install @selfpub/selfpub-ui styled-components
---
yarn add @selfpub/selfpub-ui styled-components

Try it out

Here's an example of using the @selfpub/selfpub-ui "Button" component. First, import Button into your project:

import { Button } from '@selfpub/selfpub-ui'

Here's a minimal functional example:

// src/index.js
import React from 'react'
import { render } from 'react-dom'
import { ThemeProviderWrapper } from "@selfpub/selfpub-ui";
import App from './App'

const app = (
  <ThemeProviderWrapper>
    <App />
  </ThemeProviderWrapper>
)

render(app, document.getElementById('root'))

// src/App.js
import React from 'react'
import { Button } from '@selfpub/selfpub-ui'

export default class App extends React.Component {
  render() {
    return (
      <Button
        variation="primary"
        size="big"
        onClick={() => console.log("click")}
      >
        Перейти в услуги
      </Button>
    );
  }
}

Development

Required external dependencies of the system:

Steps to launch development environment:

Clone repository git clone git@github.com:MyBook/selfpub-ui.git
Go to project directory cd selfpub-ui
Install dependencies yarn install or yarn
Run developer environment (storybook)yarn run storybook:dev
open http://localhost:9001

Scripts

The following scripts are available via npm or yarn:

yarn start - Runs a build and run incremental build
yarn pub - Runs a build and prepare for publishing
yarn deploy-storybook - Runs a build and deploy stories at https://mybook.github.io/selfpub-ui
yarn storybook:build - Run build static version without watching
yarn storybook:dev - Run build static version with watching and hot reloading
yarn test - Runs a jest test
yarn test:watch - Runs a jest test with watch
yarn test:generate-output - Runs a build jest test for generate meta data in one test run
yarn build - Runs a build only (no server)

Structure

├── .out              # dir for build test
├── .storybook        # storybook configuration
├── .babelrc          # babelrc config
├── .editorconfig     # editoroconfig
├── .eslintrc.json    # eslint config
├── .gitignore        # git ignore
├── .npmignore        # ignore files and directories on publish
├── .nvmrc            # config for nvm
├── package.json
└── src
    ├── components    # react source code and stories
    ├── assets        # static file assets
    └── utils         # utils methods and class

Building components

All components inside should:

Be reuseable
Have tests (recomended)
Have stories (as per React Storybook)
Component styles, tests and stories should live along side their components. Tests and stories are automatically picked up by their respective modules via a strict naming convention:

// Description of components
README.md

// Re export file
index.js

// Component
link.js

// Styles
link.styled.js

// Tests
link.test.js

// Snapshots
__snapshots__/link.test.js.snap

// for many tests
__tests__/link.test.js

// Story
link.stories.js

// for many stories
__stories__

Example structure

 link
   ├── README.md
   ├── __stories__
   │   ├── all-in-one.js
   │   └── editable-props.js
   ├── index.js
   ├── link.js
   ├── link.stories.js
   └── link.styled.js

Literally speaking, components should live in their own directory with the same name as the component, e.g., components/link/link.js. In some cases, you may find it makes more sense to have multiple components live in the same directory.