Alice 2.0. client

• ISComponentLibrary
• ISAxios

# npm
$ npm install client_alice

# yarn
$ yarn add client_alice

setting

# 各configファイル生成
$ npx alice-init

任意で config ファイルを変更する。

• ./alice-config/alice.config.json: alice 用 config.json 生成
  └ ファイルの入出力先定義
• ./alice-config/is-component.config.json: is-componentLibrary 用config.json 生成
  └ サイトカラー定義

// #alice.config.json
{
  // 読み込み対象プロトファイルのディレクトリパス
  "importProtocolBufferDirectoryPath": "./proto/",
  // 読み込み対象formJsonのディレクトリパス
  "importFormJsonDirectoryPath": "./formJson/",
  // 出力ファイルのルートディレクトリパス
  "exportRootDirectoryPath": "./alice",
  // 出力型ファイルのディレクトリパス
  "exportTypeDirectoryPath": "/@types/",

  /** import文生成 */
  // Nextページルートファイルのディレクトリパス
  "exportPageDirectoryPath": "/pages/",
  // Nextページコンポーネントファイルのディレクトリパス
  "exportPageComponentDirectoryPath": "/components/pages/"
}

// #is-component.config.json
{
  // 各カラーコード定義
  "primaryColor": "#3979b4",
  "secondaryColor": "#ecedf8",
  "accentColor": "#2db093",
  "infoColor": "#309794",
  "successColor": "#78af37",
  "warningColor": "#a8a435",
  "errorColor": "#b94549"
}

How to export file

# ページファイル出力, ISComponentLibraryに必要なファイルを作成
$ npx alice-create

Next プロジェクトの任意の場所にファイルを移動させる。

is-componentディレクトリ配下に ISComponentLibrary に必要な下記ファイルが生成される。 生成後、適切な場所にファイルを移動させる。

• muiTheme.ts
  └ MUI テーマファイル生成。is-component.config.jsonを元にカラーを定義。任意の場所に配置。
• tailwind.config.js
  └ tailwind の設定ファイル生成。is-component.config.jsonを元にカラーを定義。プロジェクトルートに配置。
• postcss.config.js
  └ tailwind で使用される postcss の設定ファイル生成。プロジェクトルートに配置。
• styles/globals.scss
  └ scss のルートファイル。_app.tsxで読み込む。
• styles/base.scss
  └ reset css。tailwind の base.css に問題があるので代用。
• styles/variable.scss
  └ scss の変数を管理。is-component.config.jsonを元にカラーも定義。

Requirement

• node v18.1.0
• nodenv
• React 18.2.0
• Next 12.2.5
• TypeScript 4.8.0

その他ライブラリ等package.jsonに記載

VSCode 推奨 Plugin

• ESLint
• Stylelint
• Prettier - Code formatter
• EditorConfig for VS Code

Installation

こちらを参考にnodenvをインストール

$ git clone https://git.alice.ventures/imagineering-studio/alice/v2/client.git

$ cd client

$ yarn install

# husky install
$ yarn prepare