@baton8/general-components 1.0.0

package/.babelrc.json

@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

package/.eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "extends": [
+    "@baton8"
+  ],
+  "rules": {
+    "camelcase": "off",
+    "react/jsx-closing-bracket-location": "off",
+    "@typescript-eslint/naming-convention": "off",
+    "@typescript-eslint/no-namespace": "off"
+  }
+}

package/.github/workflows/chromatic.yml

@@ -0,0 +1,43 @@
+name: Deploy to Chromatic
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+jobs:
+  release:
+    name: Create document
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - name: Setup FontAwesome registry
+        uses: healthplace/npmrc-registry-login-action@v1.0
+        with:
+          scope: "@fortawesome"
+          registry: https://npm.fontawesome.com
+          auth-token: ${{ secrets.FONTAWESOME_KEY }}
+
+      - name: Install
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+        env: 
+          ENV: "development"
+          IS_DEPLOY: "true"
+
+      - name: Deploy
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          storybookBuildDir: "./docs"

package/.github/workflows/doc.yml

@@ -0,0 +1,53 @@
+name: Deploy to GitHub
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pages: write
+  deployments: write
+  id-token: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - name: Setup FontAwesome registry
+        uses: healthplace/npmrc-registry-login-action@v1.0
+        with:
+          scope: "@fortawesome"
+          registry: https://npm.fontawesome.com
+          auth-token: ${{ secrets.FONTAWESOME_KEY }}
+
+      - name: Install
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Build documentation
+        run: npm run doc
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: "./docs-api"
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

package/.github/workflows/review.yml

@@ -0,0 +1,18 @@
+name: Auto approve
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - ready_for_review
+
+jobs:
+  approve:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.pull_request.user.login == 'Ziphil' && !github.event.pull_request.draft }}
+    permissions:
+      pull-requests: write
+    steps:
+      - uses: hmarr/auto-approve-action@v3

package/README.md

@@ -0,0 +1,11 @@
+## ドキュメント
+以下のページでこのパッケージが提供する UI キットを一覧することができます。
+
+- [UI キットカタログ](https://main--64d3296966610668e0c453cf.chromatic.com)
+- [その他の API ドキュメント](https://baton8.github.io/Quizium-Components) (準備中)
+
+実際に触ってみて UI を組んでみたい場合は、Playground を用意してあるのでそちらを利用してください。
+詳しい利用方法は、以下のドキュメントを参照してください。
+
+- [環境構築](https://www.notion.so/baton8/Playground-a37a4bf64e2049a9ad338ca34c5bff6b)
+- [使い方](https://www.notion.so/baton8/Playground-f4fe544b2bd44823a1dfbd1e2d007f5c)

package/dist/components/atoms/asyncSelect/asyncSelect.d.ts

@@ -0,0 +1,67 @@
+import { ReactElement } from "react";
+import { GenericFunctionComponent } from "../../../utils/types";
+type AsyncSelectProps<V> = {
+    /**
+     * 選択されている値。
+     */
+    value?: V | null;
+    /**
+     * 初期値。
+     */
+    defaultValue?: V | null;
+    /**
+     *
+     */
+    searchOptions: (input: string) => Promise<Array<V>>;
+    /**
+     * 見た目のバリアント。
+     * 基本的には `"outline"` で利用してください。
+     * フォームの一部として使う場合など、省スペースで表示したいときには `"minimal"` にしてください。
+     * - `"outline"` — 通常
+     * - `"minimal"` — 背景や罫線がない
+     * @defaultValue `"outline"`
+     */
+    variant?: "outline" | "minimal";
+    /**
+     * 選択肢メニューをコントロール本体に対して揃える方向。
+     *
+     * 選択肢メニューは基本的にコントロール本体と同じ幅で表示されますが、選択肢メニューの幅には下限が設定されているため、コントロール本体の幅が非常に小さい場合は選択肢メニューの方が大きくなります。
+     * その場合に、選択肢メニューをコントロール本体に対してどちら側に揃えるかを設定できます。
+     * @defaultValue `"left"`
+     */
+    optionAlignment?: "left" | "right";
+    /**
+     * バリデーションエラーがあるかどうか。
+     * これが `true` のときは警告表示になります。
+     * @defaultValue `false`
+     */
+    isError?: boolean;
+    /**
+     * 選択しない状態に戻せるかどうか。
+     * これを `true` にすると、コントロール内部にクリアボタンが表示され、選択を解除できるようになります。
+     * @defaultValue `false`
+     */
+    isClearable?: boolean;
+    /**
+     * 無効にするかどうか。
+     */
+    isDisabled?: boolean;
+    /**
+     * 選択肢が選択されたときに呼ばれるコールバック関数。
+     */
+    onSet?: (value: V | null) => unknown;
+    /**
+     * 選択肢を描画する関数。
+     * `AsyncSelectItem` を返してください。
+     */
+    children: (value: V) => ReactElement;
+    /** */
+    className?: string;
+};
+type AsyncSelectComponent = GenericFunctionComponent<(<V>(props: AsyncSelectProps<V>) => ReactElement)>;
+/**
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const AsyncSelect: AsyncSelectComponent;
+export {};

package/dist/components/atoms/asyncSelect/asyncSelect.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
+import { AsyncSelect } from "../../../components";
+type Meta = RawMeta<typeof AsyncSelect>;
+declare const meta: Meta;
+export declare const Basic: RawStory<typeof AsyncSelect>;
+export default meta;

package/dist/components/atoms/asyncSelect/asyncSelectOption.d.ts

@@ -0,0 +1,26 @@
+import { FunctionComponent, ReactNode } from "react";
+import { CommonProps } from "../../../modules/data";
+type SelectOptionProps = CommonProps & {
+    /**
+     * この選択肢が選択されているときに、選択式メニュー本体の内部で表示する文字列。
+     */
+    label: string;
+    /**
+     * 無効にするかどうか。
+     * @defaultValue `false`
+     */
+    isDisabled?: boolean;
+    /**
+     * 選択肢メニューの選択肢が一覧される箇所で表示する内容。
+     * 省略した場合は、`label` に設定された文字列が表示されます。
+     */
+    children?: ReactNode;
+    /** */
+    className?: string;
+};
+/**
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const AsyncSelectOption: FunctionComponent<SelectOptionProps>;
+export {};

package/dist/components/atoms/asyncSelect/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./asyncSelect";
+export * from "./asyncSelectOption";

package/dist/components/atoms/avatar/avatar.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+/**
+ * ### アイコン
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const Avatar: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & {
+    /**
+     * 表示するアイコンの URL。
+     * `undefined` を指定した場合は、フォールバック要素を表示します。
+     */
+    src: string | undefined;
+    /**
+     * 代替テキスト。
+     */
+    alt?: string | undefined;
+    /**
+     * アイコンがない場合やアイコンの読み込み中に表示する内容。
+     */
+    children?: ReactNode;
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/atoms/avatar/avatar.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
+import { Avatar } from "../../../components";
+type Meta = RawMeta<typeof Avatar>;
+type Story = RawStory<typeof Avatar>;
+declare const meta: Meta;
+export declare const Basic: Story;
+export default meta;

package/dist/components/atoms/avatar/avatarFallbackIcon.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+/**
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const AvatarFallbackIcon: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & {
+    /** */
+    hue: number;
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/atoms/avatar/avatarFallbackLetter.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+/**
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const AvatarFallbackLetter: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & {
+    /**
+     * 名前。
+     * この文字列の先頭の文字が表示されます。
+     */
+    name: string;
+    /** */
+    hue: number;
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/atoms/avatar/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./avatar";
+export * from "./avatarFallbackIcon";
+export * from "./avatarFallbackLetter";

package/dist/components/atoms/badge/badge.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+/**
+ * ### バッジ
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const Badge: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined; /**
+     * カラースキーム。
+     * @defaultValue `"primary"`
+     */
+    style?: import("react").CSSProperties | undefined;
+} & {
+    /**
+     * カラースキーム。
+     * @defaultValue `"primary"`
+     */
+    scheme?: "primary" | "secondary" | "blue" | "red" | "green" | "pink" | "yellow" | "purple" | "orange" | "gray" | "gold" | "silver" | "bronze" | undefined;
+    /**
+     * 見た目のバリアント。
+     * @defaultValue `"solid"`
+     */
+    variant?: "outline" | "solid" | "light" | undefined;
+    /**
+     * サイズ。
+     * @defaultValue `"medium"`
+     */
+    size?: "small" | "medium" | undefined;
+    /** */
+    className?: string | undefined;
+    /** */
+    children?: ReactNode;
+} & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/atoms/badge/badge.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
+import { Badge } from "../../../components";
+type Meta = RawMeta<typeof Badge>;
+type Story = RawStory<typeof Badge>;
+declare const meta: Meta;
+export declare const Solid: Story;
+export declare const Light: Story;
+export declare const Outline: Story;
+export declare const Small: Story;
+export declare const WithIcon: Story;
+export default meta;

package/dist/components/atoms/badge/badgeIconContainer.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+/**
+ * ### バッジ内のアイコン
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const BadgeIconContainer: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & {
+    /** */
+    children?: ReactNode;
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/atoms/badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./badge";
+export * from "./badgeIconContainer";

package/dist/components/atoms/barMeter/barMeter.d.ts

@@ -0,0 +1,45 @@
+import { ReactElement } from "react";
+/**
+ * ### 色分けメーター
+ *
+ * #### 構成
+ * 以下のようなコンポーネント構成で利用してください。
+ * - **`BarMeter`**
+ *   - [`BarMeterValue`](/docs/atoms-BarMeter-BarMeterValue--ドキュメント) (複数個)
+ *
+ * #### 例
+ * 典型的には、以下のような形で使用します。
+ *
+ * ```tsx
+ * <BarMeter>
+ *   <BarMeterValue iconNode={<Icon name="quiz"/>} value={10} scheme="blue">項目1</BarMeterValue>
+ *   <BarMeterValue iconNode={<Icon name="deck"/>} value={30} scheme="red">項目2</BarMeterValue>
+ *   <BarMeterValue iconNode={<Icon name="member"/>} value={40} scheme="green">項目3</BarMeterValue>
+ * </BarMeter>
+ * ```
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const BarMeter: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    /**
+     * メーター部分の色を薄くするかどうか。
+     * `ItemPane` に表示する場合には、`true` を指定しておくと他の要素と馴染みます。
+     * メーターがメインになるような場所では、`false` を指定してください。
+     * @defaultValue `true`
+     */
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & {
+    /**
+     * メーター部分の色を薄くするかどうか。
+     * `ItemPane` に表示する場合には、`true` を指定しておくと他の要素と馴染みます。
+     * メーターがメインになるような場所では、`false` を指定してください。
+     * @defaultValue `true`
+     */
+    isPale?: boolean | undefined;
+    /** */
+    className?: string | undefined;
+    /** */
+    children: ReactElement | Array<ReactElement>;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/atoms/barMeter/barMeter.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
+import { BarMeter } from "../../../components";
+type Meta = RawMeta<typeof BarMeter>;
+type Story = RawStory<typeof BarMeter>;
+declare const meta: Meta;
+export declare const Basic: Story;
+export declare const Nonpale: Story;
+export declare const MoreOptions: Story;
+export declare const MoreOptionsGenre: Story;
+export default meta;

package/dist/components/atoms/barMeter/barMeterValue.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+/**
+ * ### 色分けメーターの項目
+ *
+ * #### 内部使用のみ
+ * このコンポーネントは [`BarMeter`](/docs/atoms-BarMeter-BarMeter--ドキュメント) の子要素に配置するものであり、単独では動作しません。
+ * 詳細は [`BarMeter`](/docs/atoms-BarMeter-BarMeter--ドキュメント) のドキュメントを参照してください。
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const BarMeterValue: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & {
+    /**
+     * カラースキーム。
+     * @defaultValue `"gray"`
+     */
+    scheme?: "primary" | "secondary" | "blue" | "red" | "green" | "pink" | "yellow" | "purple" | "orange" | "gray" | "gold" | "silver" | "bronze" | undefined;
+    /**
+     * この項目の値。
+     * この値に応じてバーの長さが変わります。
+     */
+    value: number;
+    /**
+     * メーターの下にキャプションとして表示する内容。
+     */
+    children?: ReactNode;
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/atoms/barMeter/barMeterValue.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
+import { BarMeterValue } from "../../../components";
+type Meta = RawMeta<typeof BarMeterValue>;
+type Story = RawStory<typeof BarMeterValue>;
+declare const meta: Meta;
+export declare const Basic: Story;
+export default meta;

package/dist/components/atoms/barMeter/barMeterValueIconContainer.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from "react";
+/**
+ * ### バッジ内のアイコン
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const BarMeterValueIconContainer: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    /** */
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & {
+    /** */
+    children?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/atoms/barMeter/context.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type ContextValue = {
+    isPale: boolean;
+    totalValue: number;
+};
+export declare const context: import("react").Context<ContextValue>;
+export declare const Provider: import("react").Provider<ContextValue>;
+export {};

package/dist/components/atoms/barMeter/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./barMeter";
+export * from "./barMeterValue";
+export * from "./barMeterValueIconContainer";

package/dist/components/atoms/barProgress/barProgress.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+/**
+ * @group React コンポーネント
+ * @category React コンポーネント
+ */
+export declare const BarProgress: import("react").ForwardRefExoticComponent<import("../../../modules/data").DataProps<string> & {
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+} & {
+    /**
+     * カラースキーム。
+     * @defaultValue `"primary"`
+     */
+    scheme?: "primary" | "secondary" | "blue" | "red" | "green" | "pink" | "yellow" | "purple" | "orange" | "gray" | "gold" | "silver" | "bronze" | undefined;
+    /**
+     * 表示する値。
+     * `minValue` から `maxValue` までの範囲で指定してください。
+     */
+    value: number;
+    /**
+     * バーの最小値。
+     */
+    minValue: number;
+    /**
+     * バーの最大値。
+     */
+    maxValue: number;
+    /**
+     * メーター部分の色を薄くするかどうか。
+     * `ItemPane` に表示する場合には、`true` を指定しておくと他の要素と馴染みます。
+     * メーターがメインになるような場所では、`false` を指定してください。
+     * @defaultValue `true`
+     */
+    isPale?: boolean | undefined;
+    /** */
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/atoms/barProgress/barProgress.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta as RawMeta, StoryObj as RawStory } from "@storybook/react";
+import { BarProgress } from "../../../components";
+type Meta = RawMeta<typeof BarProgress>;
+type Story = RawStory<typeof BarProgress>;
+declare const meta: Meta;
+export declare const Basic: Story;
+export declare const Nonpale: Story;
+export default meta;

package/dist/components/atoms/barProgress/index.d.ts

@@ -0,0 +1 @@
+export * from "./barProgress";