Design system components. Selfpub command element library
npm install @selfpub/selfpub-uiSelfPub UI design system language and React-based components implementation.
> In project used styled-components must use in project same version styled-components
|
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+ |
``bash`
npm install @selfpub/selfpub-ui styled-components
---
yarn add @selfpub/selfpub-ui styled-components
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")}
>
ΠΠ΅ΡΠ΅ΠΉΡΠΈ Π² ΡΡΠ»ΡΠ³ΠΈ
);
}
}
`
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.gitcd selfpub-ui
2. Go to project directory yarn install
2. Install dependencies or yarnyarn run storybook:dev
3. Run developer environment (storybook)http://localhost:9001
4. open
The following scripts are available via npm or yarn:
* yarn start - Runs a build and run incremental buildyarn pub
* - Runs a build and prepare for publishingyarn deploy-storybook
* - Runs a build and deploy stories at https://mybook.github.io/selfpub-uiyarn storybook:build
* - Run build static version without watchingyarn storybook:dev
* - Run build static version with watching and hot reloadingyarn test
* - Runs a jest testyarn test:watch
* - Runs a jest test with watchyarn test:generate-output
* - Runs a build jest test for generate meta data in one test runyarn build
* - Runs a build only (no server)
``
βββ .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
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__
`
``
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.
`bash`
$ yarn "deploy-storybook"
- Repository
- Components
- Change Log
Please use our publicly visible issues page to ask questions, report issues or submit feature requests.
@selfpub/selfpub-ui` is MIT licensed.