Temaki

Getting started

使いたいプロジェクトから yarn もしくは npm でインストールします
インストールには Github へのアクセス権限が必要です

$ yarn add hrbrain/temaki # or use npm

Setup the theme

コンポーネント内のスタイル情報は styled-components の ThemeProvider によって提供されています

あなたのプロジェクトのルートコンポーネントに ThemeProvider を追加して下さい

import * as React from 'react'
import { render } from 'react-dom'
import { ThemeProvider } from 'styled-components'
import { ThemeRequiredProps, defaultTheme, Text } from 'hrb-temaki'

const myTheme: ThemeRequiredProps = {
    ...defaultTheme,
    text: '#000'
}

const App = () => {
    return (
        <ThemeProvider theme={myTheme}>
            <Text>Hello</Text>
        </ThemeProvider>
    )
}

render(<App />, document.querySelector('#app'))

Contribution guide

依存ファイルをインストールして Storybook を起動してください http://localhost:6006

$ yarn install
$ yarn start

以下のアドオンが使えます

knobs
storysource (Not working)
actions
a11y

Storybook 内ではtailwindを使うことが出来ます

フォルダールール

Basics

src/components
└── Text // <- Component name
    ├── __snapshots__ // <- jest で作成された snapshots
    ├── index.spec.tsx // <- テスト
    ├── index.tsx
    └── stories.tsx   // <- Storybook

Large size or Multiple exporting components

src/components
└── Datepicker
    ├── __snapshots__
    ├── conatiners/  // <- View logics
    ├── presentors/  // <- Pure jsx
    ├── index.spec.tsx
    ├── index.tsx    // <- ロジックとViewをconnectしてエクスポートする
    └── stories.tsx

Before your publishing

このプロジェクトでは dist フォルダを公開しているため、husky を使用して自動ビルドをかけるようにしています
git commit 毎にビルドと git add をしているので改めてビルドする必要はありません

手動でビルドしたい場合や lint を書けたい場合は以下のコマンドを用意しています

# Linter の起動
$ yarn lint
# 自動 Lint
$ yarn lint-fix

# ビルド
$ yarn build

hrbrain/temaki-archive