ecforce ui albers

ecforce の design system albers のコンポーネントライブラリです。

インストール

npm install @super_studio/ecforce_ui_albers

yarn add @super_studio/ecforce_ui_albers

セットアップ

Tailwind v4 の場合

アプリのメインの CSS ファイルに以下を追記します。

@import 'tailwindcss';
@import '@super_studio/ecforce_ui_albers/theme/theme.css';
@import '@super_studio/ecforce_ui_albers/theme/shadcn.css'; /* <- 任意 */
@import '@super_studio/ecforce_ui_albers/theme/react-datepicker.css';
@import '@super_studio/ecforce_ui_albers/theme/react-datepicker-overrides.css';

@source "../../node_modules/@super_studio/ecforce_ui_albers";

[!NOTE] shadcn のプリセットを入れることで、テーマのエイリアスクラスを使用できるようになります。例えば、bg-primary、text-muted-foreground など。

Tailwind v3 の場合

CSS をプロジェクトにインポートします。

@import '@super_studio/ecforce_ui_albers/index.css';

カラートークンを導入

tailwind.configにcolorsをインポートします。

import { colors } from "@super_studio/ecforce_ui_albers/theme/colors";

theme内にcolosを追加して完了です。

const config: Config = {
  theme: {
    extend: {
      colors,
    }
  }
};

プロジェクト側で Tailwind CSS を導入し、Button コンポーネント等の背景色が反映されない場合は、プロジェクト側の tailwind.config.js に以下を追記してください。

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

使い方

簡単な使用例になります。

import React from "react";
import { Button } from "@super_studio/ecforce_ui_albers";
// サブディレクトリからもimportできます。
// import { Button } from "@super_studio/ecforce_ui_albers/Button";

function App() {
  return (
    <Button size="medium" variant="primary">
      albers
    </Button>
  );
}

Server Components 内で使用する場合は以下のようにサブディレクトリからコンポーネントをインポートしてください。

import { Button } from "@super_studio/ecforce_ui_albers/Button";

以下コンポーネントはイベントハンドラ等の関数 props が実運用上必要なため、Server Components 内では使用できません。Client Components 内でご利用ください。

• BlockPicker
• DatePicker
• Dialog
• DropdownContent
• DropZone
• FlashMessage
• Modal
• Notification
• Pagination
• SearchField
• SearchSelect
• SegmentedControl
• Tab
• TableSortLabel

追加の任意設定

Barrel インポートのサジェストを防ぐ

vscode の json 設定に追加してください。

{
  // ...
  "typescript.preferences.autoImportSpecifierExcludeRegexes": [
    // 子フォルダーからのインポートがサジェストされるように
    "^@super_studio/ecforce_ui_albers$"
  ]
}

Barrel インポートを linter エラーにする

eslint の設定に以下を追加してください。

{
  // ...
  "no-restricted-imports": [
    "error",
    {
      name: "@super_studio/ecforce_ui_albers",
      message:
        '個別のフォルダーからインポートしてください。e.g. `"@super_studio/ecforce_ui_albers/TextLink"`',
    },
  ],
}

ライセンス

albers は MIT ライセンスで公開されています。