@super_studio/ecforce_ui_albers v3.5.0

ecforce ui albers

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

albers は試験開発中のため、内容が大幅に変更される可能性があります。バージョンに関わらず破壊的変更が行われることがありますので、利用時にはご注意ください。

インストール

npm install @super_studio/ecforce_ui_albers

yarn add @super_studio/ecforce_ui_albers

使い方

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

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

プロジェクト側で 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>
  );
}

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

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

以下コンポーネントは Next.js 13 の Server Components で使用できません。

• Dropdown
• FlashMessage
• Header
• Modal
• Pagination
• Sidebar
• Table
• Tooltip
• DatePicker
• Dialog
• DropZone
• SearchSelect

カラートークンの導入方法

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

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

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

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

ライセンス

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