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:

• Node.js 9+
• Yarn

Steps to launch development environment:

1. Clone repository git clone [email protected]:MyBook/selfpub-ui.git
2. Go to project directory cd selfpub-ui
3. Install dependencies yarn install or yarn
4. Run developer environment (storybook)yarn run storybook:dev
5. 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.

Publish site to gh-pages

$ yarn "deploy-storybook"

Links

• Repository
• Components
• Change Log

Issues

Please use our publicly visible issues page to ask questions, report issues or submit feature requests.

License

@selfpub/selfpub-ui is MIT licensed.