@1d/components 中文文档教程

Question

1D-Components

1D アプリで使用する共通の Component ライブラリ

install

private repository を install するための npm token を 1D メンバーから受け取ってある必要があります。

yarn add @1d/components

その他必要なセットアップ

1d-componentsを使うリポジトリでは追加で以下のpackageが必要になります

yarn add node-libs-react-native
yarn add @expo/react-native-action-sheet

また、使うリポジトリのrootディレクトリ（またはreact-nativeのプロジェクトがあるディレクトリ)に metro.config.js というファイルを作成し、以下の内容を入れてください。

module.exports = {
  resolver: {
    // nodeで使えるlibs (pathやprocess)をreact-nativeでも使えるようにする
    extraNodeModules: require('node-libs-react-native'),
  },
}

そして、アプリの entrance 部分 (App.tsx 等) に以下のコードを足してください。 1d-componentsの中のタイムライン機能の parser が node の path や process を使うため必要になります。

import 'node-libs-react-native/globals'

DarkMode の使用

Componentは一部、DarkModeに対応しているものがあります。 DarkModeを使用するには、使用するアプリのエントリーポイントにて、Providerを使う必要があります。 ComponentはデフォルトでLightModeになっているので、DarkModeの対応が必要無い場合は、Providerを使う必要はありません。

import { ThemeProvider } from '@1d/components'
import { App } from './app'

export const Main = () => {
  const theme = Appearance.getAppearance()
  return (
    <ThemeProvider theme={theme}>
      <App/>
    </ThemeProvider>
  )
}

開発手順

新しく Component を作成する為には、まずこのレポジトリを Clone します

git clone https://github.com/1d-dev/1D-Components.git
cd 1D-Components

そして、dependencies を install します

yarn

新規 Component の作成

yarn new

storybook

新しく Component を開発する際は、Storybook を使いながら開発します。

yarn storybook

publish

publish する前に、パッケージのバージョンを上げてください。

パッチバージョンを上げる（見た目の微量な変更など、props に変化が無い変更を加えたとき)

npm version patch

マイナーバージョンを上げる (新規 Component 作成時など、後方互換性のある変更を加えたとき)

npm version minor

メジャーバージョンを上げる（props などに変更があり、後方互換性が無い変更を加えたとき）

npm version major

package の Publish

npm publish