SelfPub UI-kit 📦

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

``bash
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:

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

Here's a minimal functional example:

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

const app = (



)

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 (
variation="primary"
size="big"
onClick={() => console.log("click")}
>
Перейти в услуги

);
}
}
`

Development

Required external dependencies of the system:

* Node.js 9+
* Yarn

Steps to launch development environment:

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

$3

`
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

`bash
$ 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.