@lism-css/ui 0.10.0 → 0.12.0

package/src/components/Accordion/react/{Accordion.jsx → Accordion.tsx}

@@ -1,21 +1,34 @@
 'use client';
 import { createContext, useRef, useId, useEffect, useContext } from 'react';
+import type { ElementType } from 'react';
 import getLismProps from 'lism-css/lib/getLismProps';
-import { Lism, Stack } from 'lism-css/react';
-import { getRootProps, getItemProps, getHeadingProps, getPanelProps, defaultProps } from '../getProps';
+import { Lism, Stack, type LismComponentProps } from 'lism-css/react';
+import {
+  getRootProps,
+  getItemProps,
+  getHeadingProps,
+  getPanelProps,
+  getButtonProps,
+  type AccordionRootProps,
+  type AccordionItemProps,
+  type AccordionHeadingProps,
+  type AccordionPanelProps,
+} from '../getProps';
 import { setEvent } from '../setAccordion';
 import AccIcon from './AccIcon';
 
 import '../_style.css';
 
+type AccordionContextType = { accID: string } | null;
+
 // Context: 純粋なReact環境で AccordionItem → Button / Panel へ accID を共有
 // Astro 環境では Context が使えないため null がフォールバック
-const AccordionContext = createContext(null);
+const AccordionContext = createContext<AccordionContextType>(null);
 
 /**
  * 複数の AccordionItem をラップするルート要素
  */
-export function AccordionRoot({ children, ...props }) {
+export function AccordionRoot({ children, ...props }: AccordionRootProps & LismComponentProps) {
   const rootProps = getRootProps(props);
   return <Stack {...rootProps}>{children}</Stack>;
 }
@@ -23,8 +36,8 @@ export function AccordionRoot({ children, ...props }) {
 /**
  * 個別のアコーディオンアイテム（<div> ベース、setEvent で開閉イベントを登録）
  */
-export function AccordionItem({ children, ...props }) {
-  const ref = useRef(null);
+export function AccordionItem({ children, ...props }: AccordionItemProps & LismComponentProps) {
+  const ref = useRef<HTMLDivElement>(null);
 
   // コンポーネント単位でユニークIDを生成
   const accID = useId();
@@ -50,20 +63,29 @@ export function AccordionItem({ children, ...props }) {
  * 見出しエリアのラッパー（デフォルトは <div role="heading">）
  * as に h2〜h6 を指定すると role は付与されない
  */
-export function Heading({ children, ...props }) {
-  return <Lism {...getHeadingProps(props)}>{children}</Lism>;
+export function Heading({ children, ...props }: AccordionHeadingProps & LismComponentProps) {
+  const { as: headingAs, ...headingProps } = getHeadingProps(props);
+  return (
+    <Lism as={headingAs as ElementType} {...headingProps}>
+      {children}
+    </Lism>
+  );
 }
 
+type ButtonProps<T extends ElementType = 'button'> = LismComponentProps<T> & {
+  accID?: string;
+};
+
 /**
  * 開閉トリガーボタン
  * accID: Context から取得できればそれを優先、なければ props / プレースホルダー
  */
-export function Button({ children, accID: _accID = '__LISM_ACC_ID__', ...props }) {
+export function Button<T extends ElementType = 'button'>({ children, accID: _accID = '__LISM_ACC_ID__', ...props }: ButtonProps<T>) {
   const ctx = useContext(AccordionContext);
   const accID = ctx?.accID || _accID;
 
   return (
-    <Lism {...defaultProps.button} {...props} aria-controls={accID} aria-expanded="false">
+    <Lism {...(getButtonProps(props as Record<string, unknown>) as object)} aria-controls={accID} aria-expanded="false">
       {children}
       <AccIcon />
     </Lism>
@@ -73,7 +95,7 @@ export function Button({ children, accID: _accID = '__LISM_ACC_ID__', ...props }
 /**
  * パネル
  */
-export function Panel({ children, ...props }) {
+export function Panel({ children, ...props }: AccordionPanelProps & LismComponentProps) {
   const ctx = useContext(AccordionContext);
   const { panelProps, contentProps } = getPanelProps({ _contextID: ctx?.accID, ...props });
 

package/src/components/Accordion/setAccordion.ts

@@ -0,0 +1,120 @@
+import { waitFrame, waitAnimation, maybePauseAnimation } from '../../helper/animation';
+
+// hidden を付け外しする時の値
+let ACCORDION_HIDDEN_VALUE = 'until-found';
+
+type AccordionElements = {
+  heading: HTMLElement;
+  button: HTMLButtonElement;
+  panel: HTMLElement;
+  content: HTMLElement;
+};
+
+// アコーディオン要素から必要な要素を取得
+const getAccordionElements = (accordionItem: HTMLElement): AccordionElements => {
+  const heading = accordionItem.querySelector<HTMLElement>('.c--accordion_heading')!;
+  const panel = accordionItem.querySelector<HTMLElement>('.c--accordion_panel')!;
+  return {
+    heading,
+    button: heading.querySelector('button')!,
+    panel,
+    content: panel.querySelector<HTMLElement>('.c--accordion_content')!,
+  };
+};
+
+// 親に data-allow-multiple がついていなければ、展開中のアコーディオンを閉じる
+const maybeCloseOpenedItems = (accordionItem: HTMLElement): void => {
+  const parent = accordionItem.parentNode as HTMLElement | null;
+  if (!parent) return;
+
+  if (parent.hasAttribute('data-allow-multiple')) return;
+
+  parent.querySelectorAll<HTMLElement>(':scope > [data-opened]').forEach((_a) => void closeAccordion(_a));
+};
+
+async function openAccordion(accordionItem: HTMLElement): Promise<void> {
+  const { panel, content, button } = getAccordionElements(accordionItem);
+
+  maybePauseAnimation(panel);
+  panel.removeAttribute('hidden');
+  await waitFrame();
+
+  accordionItem.style.setProperty('--_panel-h', `${content.offsetHeight}px`);
+  await waitFrame();
+
+  accordionItem.setAttribute('data-opened', '');
+  button.setAttribute('aria-expanded', 'true');
+
+  const status = await waitAnimation(panel);
+
+  if ('canceled' !== status) {
+    accordionItem.style.removeProperty('--_panel-h');
+  }
+}
+
+async function closeAccordion(accordionItem: HTMLElement): Promise<void> {
+  const { panel, button } = getAccordionElements(accordionItem);
+
+  maybePauseAnimation(panel);
+  accordionItem.style.setProperty('--_panel-h', `${panel.offsetHeight}px`);
+  await waitFrame();
+
+  accordionItem.removeAttribute('data-opened');
+  button.setAttribute('aria-expanded', 'false');
+  accordionItem.style.removeProperty('--_panel-h');
+
+  const status = await waitAnimation(panel);
+
+  if ('canceled' !== status) {
+    panel.setAttribute('hidden', ACCORDION_HIDDEN_VALUE);
+  }
+}
+
+function toggleAccordion(accordionItem: HTMLElement): void {
+  if (accordionItem.hasAttribute('data-opened')) {
+    void closeAccordion(accordionItem);
+  } else {
+    maybeCloseOpenedItems(accordionItem);
+    void openAccordion(accordionItem);
+  }
+}
+
+/**
+ * 個別のアコーディオンにイベントをセット（React用にクリーンアップ関数を返す）
+ */
+export const setEvent = (accordionItem: HTMLElement): (() => void) => {
+  const { button, panel } = getAccordionElements(accordionItem);
+
+  if (panel.hasAttribute('hidden')) {
+    ACCORDION_HIDDEN_VALUE = panel.getAttribute('hidden') ?? 'until-found';
+  }
+
+  const _clickEvent = (e: Event): void => {
+    e.preventDefault();
+    toggleAccordion(accordionItem);
+  };
+
+  const _beforematchEvent = (e: Event): void => {
+    e.preventDefault();
+    toggleAccordion(accordionItem);
+  };
+
+  button.addEventListener('click', _clickEvent);
+  panel.addEventListener('beforematch', _beforematchEvent);
+
+  return () => {
+    button.removeEventListener('click', _clickEvent);
+    panel.removeEventListener('beforematch', _beforematchEvent);
+  };
+};
+
+/**
+ * ページ内の全アコーディオンにイベントをセット（Astro用）
+ */
+const setAccordion = (): void => {
+  const accordionAll = document.querySelectorAll<HTMLElement>('.c--accordion_item');
+  accordionAll.forEach((accordionItem) => {
+    setEvent(accordionItem);
+  });
+};
+export default setAccordion;

package/src/components/Alert/Alert.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Alert from './react/Alert';
+import PRESETS from './presets';
+
+const presetTypes = Object.keys(PRESETS);
+
+const meta: Meta<typeof Alert> = {
+  title: 'UI/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  argTypes: {
+    children: { control: false },
+    type: { control: 'select', options: presetTypes },
+    layout: { control: 'select', options: ['flex', 'sideMain'] },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Alert>;
+
+export const Default: Story = {
+  args: {
+    type: 'alert',
+    children: 'アラートのメッセージです。',
+  },
+};
+
+export const Point: Story = {
+  args: { type: 'point', children: 'ポイントのメッセージです。' },
+};
+
+export const Warning: Story = {
+  args: { type: 'warning', children: '警告のメッセージです。' },
+};
+
+export const Check: Story = {
+  args: { type: 'check', children: 'チェックのメッセージです。' },
+};
+
+export const Help: Story = {
+  args: { type: 'help', children: 'ヘルプのメッセージです。' },
+};
+
+export const Info: Story = {
+  args: { type: 'info', children: '情報のメッセージです。' },
+};
+
+export const SideMain: Story = {
+  name: 'layout: sideMain',
+  args: {
+    type: 'alert',
+    layout: 'sideMain',
+    children: 'サイドメインレイアウトのアラートです。',
+  },
+};
+
+export const CustomIcon: Story = {
+  name: 'カスタムアイコン',
+  args: {
+    icon: 'star',
+    keycolor: 'purple',
+    children: 'カスタムアイコンとカラー指定。',
+  },
+};

package/src/components/Alert/getProps.ts

@@ -1,17 +1,19 @@
 import PRESETS from './presets';
+import type { LayoutType } from 'lism-css/lib/getLismProps';
+import type { IconProps } from 'lism-css/react';
 
 export type AlertProps = {
   type?: string;
   keycolor?: string;
-  layout?: string;
-  icon?: string;
+  layout?: LayoutType;
+  icon?: IconProps['icon'];
   flow?: string;
   [key: string]: unknown;
 };
 
 export default function getAlertProps({ type = 'alert', keycolor, layout = 'flex', icon, flow = 's', ...props }: AlertProps) {
   const presetData = type ? PRESETS[type] : null;
-  const _icon = icon || presetData?.icon || 'info';
+  const _icon = (icon || presetData?.icon || 'info') as IconProps['icon'];
   const _color = keycolor || presetData?.color || 'currentColor';
 
   return {

package/src/components/Alert/react/Alert.tsx

@@ -1,8 +1,8 @@
-import type { ReactNode } from 'react';
-import { Flow, Lism, Center, Icon } from 'lism-css/react';
+import type { ElementType } from 'react';
+import { Flow, Lism, Center, Icon, type LismComponentProps } from 'lism-css/react';
 import getAlertProps, { type AlertProps } from '../getProps';
 
-export default function Alert({ children, ...inputProps }: AlertProps & { children?: ReactNode }) {
+export default function Alert<T extends ElementType = 'div'>({ children, ...inputProps }: AlertProps & LismComponentProps<T>) {
   const { icon, layout, flow, ...alertProps } = getAlertProps(inputProps);
 
   return (

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Avatar from './react/Avatar';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'UI/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+  argTypes: {
+    src: { control: 'text' },
+    alt: { control: 'text' },
+    size: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: {
+    src: 'https://cdn.lism-css.com/dummy-image.jpg',
+    alt: 'ユーザーアバター',
+    size: '4rem',
+  },
+};
+
+export const Small: Story = {
+  name: '小サイズ',
+  args: {
+    src: 'https://cdn.lism-css.com/dummy-image.jpg',
+    alt: '',
+    size: '2rem',
+  },
+};
+
+export const Large: Story = {
+  name: '大サイズ',
+  args: {
+    src: 'https://cdn.lism-css.com/dummy-image.jpg',
+    alt: '',
+    size: '8rem',
+  },
+};

package/src/components/Avatar/react/Avatar.tsx

@@ -0,0 +1,17 @@
+import type { ElementType } from 'react';
+import { Frame, type LayoutComponentProps } from 'lism-css/react';
+import type { FrameProps } from 'lism-css/lib/types/LayoutProps';
+
+type AvatarProps<T extends ElementType = 'div'> = LayoutComponentProps<T, FrameProps> & {
+  size?: string;
+  src?: string;
+  alt?: string;
+};
+
+export default function Avatar<T extends ElementType = 'div'>({ size = '1.5em', src = '', alt = '', ...props }: AvatarProps<T>) {
+  return (
+    <Frame lismClass="c--avatar" ar="1/1" w={size} bdrs="99" {...(props as LayoutComponentProps<T, FrameProps>)}>
+      <img src={src} alt={alt} width="100%" height="100%" decoding="async" />
+    </Frame>
+  );
+}

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Badge from './react/Badge';
+
+const meta: Meta<typeof Badge> = {
+  title: 'UI/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  argTypes: {
+    children: { control: 'text' },
+    c: { control: 'text', description: 'テキストカラー（CSS変数キー）' },
+    bgc: { control: 'text', description: '背景カラー（CSS変数キー）' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+  args: {
+    children: 'Badge',
+  },
+};
+
+export const WithColor: Story = {
+  name: 'カラー指定',
+  args: {
+    children: 'New',
+    c: 'white',
+    bgc: 'red',
+  },
+};
+
+export const Secondary: Story = {
+  name: 'セカンダリカラー',
+  args: {
+    children: 'Info',
+    c: 'white',
+    bgc: 'blue',
+  },
+};

package/src/components/Badge/astro/Badge.astro

@@ -3,14 +3,8 @@ import { Lism } from 'lism-css/astro';
 import '../_style.css';
 
 const props = Astro.props;
-
-// c--badge では c, bgc は 変数で受け取る
-const _propConfig = {
-  c: { isVar: 1 },
-  bgc: { isVar: 1 },
-};
 ---
 
-<Lism lismClass="c--badge" as="span" d="inline-flex" fz="xs" lh="xs" py="5" px="10" bdrs="10" _propConfig={_propConfig} {...props}>
+<Lism lismClass="c--badge" as="span" d="inline-flex" fz="xs" lh="xs" py="5" px="10" bdrs="10" {...props}>
   <slot />
 </Lism>

package/src/components/Badge/react/Badge.tsx

@@ -0,0 +1,7 @@
+import type { ElementType } from 'react';
+import { Lism, type LismComponentProps } from 'lism-css/react';
+import '../_style.css';
+
+export default function Badge<T extends ElementType = 'span'>(props: LismComponentProps<T>) {
+  return <Lism lismClass="c--badge" as="span" d="inline-flex" fz="xs" lh="xs" py="5" px="10" bdrs="10" {...props} />;
+}

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Button from './react/Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'UI/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    children: { control: 'text' },
+    c: { control: 'text', description: 'テキストカラー（CSS変数キー）' },
+    bgc: { control: 'text', description: '背景カラー（CSS変数キー）' },
+    href: { control: 'text' },
+    as: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+  args: {
+    children: 'ボタン',
+    href: '#',
+  },
+};
+
+export const AsButton: Story = {
+  name: 'as="button"',
+  args: {
+    children: 'ボタン要素',
+    as: 'button',
+  },
+};
+
+export const WithColor: Story = {
+  name: 'カラー指定',
+  args: {
+    children: '送信する',
+    as: 'button',
+    c: 'white',
+    bgc: 'blue',
+    bdrs: '99',
+  },
+};

package/src/components/Button/astro/Button.astro

@@ -3,14 +3,8 @@ import { Flex } from 'lism-css/astro';
 import '../_style.css';
 
 const props = Astro.props;
-
-// c--button では c, bgc は 変数で受け取る
-const _propConfig = {
-  c: { isVar: 1 },
-  bgc: { isVar: 1 },
-};
 ---
 
-<Flex lismClass="c--button" as="a" lh="s" py="10" px="20" hov="o" _propConfig={_propConfig} {...props}>
+<Flex lismClass="c--button" as="a" lh="s" py="10" px="20" hov="o" {...props}>
   <slot />
 </Flex>

package/src/components/Button/react/Button.tsx

@@ -0,0 +1,7 @@
+import type { ElementType } from 'react';
+import { Flex, type LismComponentProps } from 'lism-css/react';
+import '../_style.css';
+
+export default function Button<T extends ElementType = 'a'>(props: LismComponentProps<T>) {
+  return <Flex lismClass="c--button" as="a" lh="s" py="10" px="20" hov="o" {...props} />;
+}

package/src/components/Callout/Callout.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Callout from './react/Callout';
+import PRESETS from './presets';
+
+const presetTypes = Object.keys(PRESETS);
+
+const meta: Meta<typeof Callout> = {
+  title: 'UI/Callout',
+  component: Callout,
+  tags: ['autodocs'],
+  argTypes: {
+    children: { control: false },
+    type: { control: 'select', options: presetTypes },
+    title: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Callout>;
+
+export const Default: Story = {
+  args: {
+    type: 'note',
+    children: 'コールアウトのメッセージです。',
+  },
+};
+
+export const WithTitle: Story = {
+  name: 'タイトルあり',
+  args: {
+    type: 'note',
+    title: 'メモ',
+    children: 'タイトル付きのコールアウトです。',
+  },
+};
+
+export const Alert: Story = {
+  args: { type: 'alert', title: '警告', children: '警告のメッセージです。' },
+};
+
+export const Point: Story = {
+  args: { type: 'point', title: 'ポイント', children: 'ポイントのメッセージです。' },
+};
+
+export const Warning: Story = {
+  args: { type: 'warning', title: '注意', children: '注意のメッセージです。' },
+};
+
+export const Check: Story = {
+  args: { type: 'check', title: 'OK', children: 'チェックのメッセージです。' },
+};
+
+export const Help: Story = {
+  args: { type: 'help', title: 'ヘルプ', children: 'ヘルプのメッセージです。' },
+};

package/src/components/Callout/getProps.ts

@@ -1,9 +1,10 @@
 import PRESETS from './presets';
+import type { IconProps } from 'lism-css/react';
 
 export type CalloutProps = {
   type?: string;
   keycolor?: string;
-  icon?: string;
+  icon?: IconProps['icon'];
   title?: string;
   flow?: string;
   [key: string]: unknown;
@@ -11,22 +12,21 @@ export type CalloutProps = {
 
 export default function getCalloutProps({ type = 'note', keycolor, icon, title, flow = 's', ...props }: CalloutProps) {
   const presetData = type ? PRESETS[type] : null;
-  const _icon = icon || presetData?.icon || 'note';
+  const _icon = (icon || presetData?.icon || 'note') as IconProps['icon'];
   const _keycolor = keycolor || presetData?.color || null;
 
   return {
     icon: _icon,
     title,
     flow,
-    lismClass: 'c--callout u--cbox',
+    lismClass: 'c--callout u--cbox set--shadow',
     keycolor: _keycolor,
     p: '20',
     g: '10',
     bdc: 'keycolor',
     'bd-x-s': '-',
-    bdw: '4px',
+    bdw: '3px',
     bxsh: '10',
-    bdrs: '5',
     ...props,
   };
 }

package/src/components/Callout/react/Callout.tsx

@@ -1,8 +1,8 @@
-import type { ReactNode } from 'react';
-import { Flow, Flex, Stack, Icon, Center } from 'lism-css/react';
+import type { ElementType } from 'react';
+import { Flow, Flex, Stack, Icon, Center, type LismComponentProps } from 'lism-css/react';
 import getCalloutProps, { type CalloutProps } from '../getProps';
 
-export default function Callout({ children, ...inputProps }: CalloutProps & { children?: ReactNode }) {
+export default function Callout<T extends ElementType = 'div'>({ children, ...inputProps }: CalloutProps & LismComponentProps<T>) {
   const { icon, title, flow, ...calloutProps } = getCalloutProps(inputProps);
 
   return (

package/src/components/Chat/Chat.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Chat from './react/Chat';
+
+const meta: Meta<typeof Chat> = {
+  title: 'UI/Chat',
+  component: Chat,
+  tags: ['autodocs'],
+  argTypes: {
+    children: { control: false },
+    name: { control: 'text' },
+    avatar: { control: 'text' },
+    direction: { control: 'select', options: ['start', 'end'] },
+    variant: { control: 'select', options: ['speak', 'think'] },
+    keycolor: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Chat>;
+
+const AVATAR_SRC = 'https://cdn.lism-css.com/dummy-image.jpg';
+
+export const Default: Story = {
+  args: {
+    name: 'ユーザー',
+    avatar: AVATAR_SRC,
+    children: 'こんにちは！チャットコンポーネントのデモです。',
+  },
+};
+
+export const End: Story = {
+  name: 'direction: end（右寄せ）',
+  args: {
+    name: '自分',
+    avatar: AVATAR_SRC,
+    direction: 'end',
+    keycolor: 'blue',
+    children: '右寄せのチャットメッセージです。',
+  },
+};
+
+export const NoAvatar: Story = {
+  name: 'アバターなし',
+  args: {
+    name: 'ゲスト',
+    children: 'アバターなしのチャットです。',
+  },
+};
+
+export const Think: Story = {
+  name: 'variant: think',
+  args: {
+    name: 'キャラ',
+    avatar: AVATAR_SRC,
+    variant: 'think',
+    children: '考え中のバリアントです。',
+  },
+};