# ske-12-ui

> UIKit for SKE-12 Site

Latest version **0.1.0** (published 2018-11-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install ske-12-ui
pnpm add ske-12-ui
yarn add ske-12-ui
bun add ske-12-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2018-11-07 |
| First published | 2018-11-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 10 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | SKE-12 |
| Maintainers | reiiyuki |
| Keywords | ui, ske, ske12, ske-12, styled |

## Links

- npm: https://www.npmjs.com/package/ske-12-ui
- Repository: https://github.com/ReiiYuki/ske-12-ui
- Homepage: https://github.com/ReiiYuki/ske-12-ui#readme
- Issues: https://github.com/ReiiYuki/ske-12-ui/issues
- npm.io page: https://npm.io/package/ske-12-ui

## Dependencies (4)

- [react](https://npm.io/package/react.md) ^16.6.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.6.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [styled-components](https://npm.io/package/styled-components.md) ^4.0.2

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2018-11-07

## README

# SKE 12 UI

[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com)
[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)
[![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg)](https://github.com/storybooks)

## Demo

https://reiiyuki.github.io/ske-12-ui/

## Design

https://www.figma.com/file/YM9lLAGmNJsrrmhCd7eQ0GpN/SKE12?node-id=16%3A2

## Developer Guide

### Command

Development

```
npm start
```

Deploy GH-Pages

```
npm run build:story
git add .
git commit -m "Update Docs"
git subtree push --prefix docs origin gh-pages
```

Build Library

```
npm run build:lib
```

### Write New Components

Write it in `src/components`. If they are the group of components, please categorize it into sub folder in `src/components`.

If you are completely done your job on it, please export it in `src/index.js` as the following example:

```js
export { default as Button } from 'components/button/Button'
```

Note: Please use mixins for develop components, if it doesn't exist in mixins please update mixins for the nice future of this library.

### Write Mixins

Write it in `src/mixins`.

Note: Don't export mixins in `src/index.js`! Because it's already nice, when you call `ske-12-ui/mixins/colors`.

### Write New Story

1. Create the story folder in `stories`.
2. Write `index.js` file with the following template:
  ```js
  import baseStory from 'stories/utils/baseStory'
  import SpaceEvenlyDecorator from 'stories/utils/decorators/SpaceEvenlyDecorator' // If you use decorator

  baseStory('Button', module) // baseStory(name of story)
  	.addDecorator(SpaceEvenlyDecorator) // If you want to wrap all of your sample in something please use decorator
  	.addWithJSX('Default Button', require('./DefaultButton').default) // .addWithJSX(Name of sample, require(sample component).default)
  ```
 3. Write your sample components
 4. Require it in `stories/index.js`

---
_Source: https://npm.io/package/ske-12-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._