@lism-css/ui 0.11.0 → 0.13.0

package/src/components/DummyImage/DummyImage.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import DummyImage from './react/DummyImage';
+
+const meta: Meta<typeof DummyImage> = {
+  title: 'UI/DummyImage',
+  component: DummyImage,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof DummyImage>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithSize: Story = {
+  name: 'サイズ指定',
+  args: {
+    w: '300px',
+    h: '200px',
+  },
+};

package/src/components/DummyText/DummyText.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import DummyText from './react/DummyText';
+
+const meta: Meta<typeof DummyText> = {
+  title: 'UI/DummyText',
+  component: DummyText,
+  tags: ['autodocs'],
+  argTypes: {
+    lang: { control: 'select', options: ['en', 'ja', 'ar'] },
+    length: { control: 'select', options: ['s', 'm', 'l'] },
+    offset: { control: 'number' },
+    pre: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DummyText>;
+
+export const Default: Story = {
+  args: {
+    lang: 'en',
+    length: 'm',
+  },
+};
+
+export const Japanese: Story = {
+  name: '日本語',
+  args: {
+    lang: 'ja',
+    length: 'm',
+  },
+};
+
+export const Short: Story = {
+  name: '短い（length: s）',
+  args: {
+    lang: 'en',
+    length: 's',
+  },
+};
+
+export const Long: Story = {
+  name: '長い（length: l）',
+  args: {
+    lang: 'en',
+    length: 'l',
+  },
+};

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within, waitFor } from 'storybook/test';
+import Modal from './react';
+
+const meta: Meta = {
+  title: 'UI/Modal',
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => (
+    <>
+      <Modal.OpenBtn modalId="story-modal-1">モーダルを開く</Modal.OpenBtn>
+      <Modal.Root id="story-modal-1">
+        <Modal.Inner>
+          <Modal.Body>
+            <p>モーダルのコンテンツです。</p>
+          </Modal.Body>
+          <Modal.CloseBtn modalId="story-modal-1">閉じる</Modal.CloseBtn>
+        </Modal.Inner>
+      </Modal.Root>
+    </>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const dialog = canvas.getByRole('dialog', { hidden: true });
+    const openBtn = canvas.getByRole('button', { name: 'モーダルを開く' });
+
+    // 初期状態: モーダルは閉じている
+    await expect(dialog).not.toHaveAttribute('open');
+
+    // 開くボタンをクリック
+    await userEvent.click(openBtn);
+
+    // モーダルが開いている
+    await waitFor(() => expect(dialog).toHaveAttribute('open'));
+
+    // 閉じるボタンをクリック
+    const closeBtn = within(dialog).getByRole('button', { name: '閉じる' });
+    await userEvent.click(closeBtn);
+
+    // モーダルが閉じている（アニメーション完了待ち）
+    await waitFor(() => expect(dialog).not.toHaveAttribute('open'), { timeout: 2000 });
+  },
+};
+
+export const WithTitle: Story = {
+  name: 'タイトル付き',
+  render: () => (
+    <>
+      <Modal.OpenBtn modalId="story-modal-2">モーダルを開く</Modal.OpenBtn>
+      <Modal.Root id="story-modal-2">
+        <Modal.Inner>
+          <Modal.Body>
+            <h2>モーダルタイトル</h2>
+            <p>モーダルのコンテンツです。</p>
+          </Modal.Body>
+          <Modal.CloseBtn modalId="story-modal-2">閉じる</Modal.CloseBtn>
+        </Modal.Inner>
+      </Modal.Root>
+    </>
+  ),
+};

package/src/components/Modal/_style.css

@@ -2,7 +2,7 @@
  * dialog で実装.
  *   Memo: ::backdrop のアニメーションはFirefoxで動かない
  */
-@layer lism-modules {
+@layer lism-component {
   .c--modal {
     --flow: 0; /* flow直下にきても影響しないように */
     --duration: var(--modal-duration, 0.4s);

package/src/components/Modal/astro/CloseBtn.astro

@@ -1,12 +1,12 @@
 ---
 // import type { LismProps } from 'lism-css/types';
 import { Lism, Icon } from 'lism-css/astro';
-import { defaultProps } from '../getProps';
+import { getCloseBtnProps } from '../getProps';
 
 // Propsの定義
 // interface Props extends LismProps {}
 const { modalId = '', icon, srText = 'Close', ...props } = Astro.props || {};
-const btnProps = { ...defaultProps.closeBtn, ...props };
+const btnProps = getCloseBtnProps(props);
 ---
 
 {

package/src/components/Modal/astro/OpenBtn.astro

@@ -1,14 +1,13 @@
 ---
 // import type { LismProps } from 'lism-css/types';
 import { Lism } from 'lism-css/astro';
-import { defaultProps } from '../getProps';
+import { getOpenBtnProps } from '../getProps';
 
 // Propsの定義
 // interface Props extends LismProps {}
 const { modalId = '', ...props } = Astro.props || {};
-const btnProps = { ...defaultProps.openBtn, ...props };
 ---
 
-<Lism data-modal-open={modalId} {...btnProps}>
+<Lism data-modal-open={modalId} {...getOpenBtnProps(props)}>
   <slot />
 </Lism>

package/src/components/Modal/getProps.ts

@@ -0,0 +1,64 @@
+import atts from 'lism-css/lib/helper/atts';
+import mergeSet from 'lism-css/lib/helper/mergeSet';
+
+export type ModalRootProps = {
+  lismClass?: string;
+  set?: string;
+  duration?: string;
+  style?: Record<string, string>;
+  [key: string]: unknown;
+};
+
+export type ModalInnerProps = {
+  lismClass?: string;
+  offset?: string;
+  style?: Record<string, string>;
+  [key: string]: unknown;
+};
+
+export function getProps({ lismClass = '', set, duration, style = {}, ...props }: ModalRootProps) {
+  const theProps = {
+    lismClass: atts(lismClass, 'c--modal'),
+    set: mergeSet('plain', set),
+  };
+  if (duration) {
+    style['--duration'] = duration;
+  }
+
+  return { as: 'dialog', ...theProps, style, ...props };
+}
+
+export function getInnerProps({ lismClass = '', offset, style = {}, ...props }: ModalInnerProps) {
+  if (offset) {
+    style['--offset'] = offset;
+  }
+  return {
+    lismClass: atts(lismClass, 'c--modal_inner'),
+    style,
+    ...props,
+  };
+}
+
+export function getOpenBtnProps({ set, ...props }: Record<string, unknown>) {
+  return {
+    as: 'button',
+    set: mergeSet('plain', set),
+    hov: 'o',
+    d: 'inline-flex',
+    ...props,
+  };
+}
+
+export function getCloseBtnProps({ set, ...props }: Record<string, unknown>) {
+  return {
+    as: 'button',
+    set: mergeSet('plain', set),
+    hov: 'o',
+    d: 'inline-flex',
+    ...props,
+  };
+}
+
+export const defaultProps = {
+  body: { lismClass: 'c--modal_body' },
+};

package/src/components/Modal/react/Body.tsx

@@ -0,0 +1,10 @@
+import { Lism, type LismComponentProps } from 'lism-css/react';
+import { defaultProps } from '../getProps';
+
+export default function ModalBody({ children, ...props }: LismComponentProps) {
+  return (
+    <Lism {...defaultProps.body} {...props}>
+      {children}
+    </Lism>
+  );
+}

package/src/components/Modal/react/CloseBtn.tsx

@@ -0,0 +1,24 @@
+import type { ElementType } from 'react';
+import { Lism, Icon, type LismComponentProps, type IconProps } from 'lism-css/react';
+import { getCloseBtnProps } from '../getProps';
+
+type CloseBtnProps<T extends ElementType = 'button'> = LismComponentProps<T> & {
+  modalId?: string;
+  icon?: IconProps['icon'];
+  srText?: string;
+};
+
+export default function CloseBtn<T extends ElementType = 'button'>({ children, modalId = '', icon, srText = 'Close', ...props }: CloseBtnProps<T>) {
+  return (
+    <Lism data-modal-close={modalId} {...(getCloseBtnProps(props as Record<string, unknown>) as object)}>
+      {children ? (
+        children
+      ) : (
+        <>
+          <Icon icon={icon || 'x'} />
+          <span className="u--srOnly">{srText || 'Close'}</span>
+        </>
+      )}
+    </Lism>
+  );
+}

package/src/components/Modal/react/Inner.tsx

@@ -0,0 +1,6 @@
+import { Lism, type LismComponentProps } from 'lism-css/react';
+import { getInnerProps, type ModalInnerProps } from '../getProps';
+
+export default function ModalInner({ children, ...props }: ModalInnerProps & LismComponentProps) {
+  return <Lism {...getInnerProps(props)}>{children}</Lism>;
+}

package/src/components/Modal/react/Modal.tsx

@@ -0,0 +1,24 @@
+'use client';
+import { useRef, useEffect } from 'react';
+import type { ElementType } from 'react';
+import { Lism, type LismComponentProps } from 'lism-css/react';
+import { setEvent } from '../setModal';
+import { getProps, type ModalRootProps } from '../getProps';
+
+import '../_style.css';
+
+const Modal = <T extends ElementType = 'dialog'>({ children, ...props }: ModalRootProps & LismComponentProps<T>) => {
+  const ref = useRef<HTMLDialogElement>(null);
+  useEffect(() => {
+    if (!ref?.current) return;
+    return setEvent(ref?.current);
+  }, [ref]);
+
+  const { as: modalAs, ...modalProps } = getProps(props);
+  return (
+    <Lism as={modalAs as ElementType} forwardedRef={ref} {...modalProps}>
+      {children}
+    </Lism>
+  );
+};
+export default Modal;

package/src/components/Modal/react/OpenBtn.tsx

@@ -0,0 +1,15 @@
+import type { ElementType } from 'react';
+import { Lism, type LismComponentProps } from 'lism-css/react';
+import { getOpenBtnProps } from '../getProps';
+
+type OpenBtnProps<T extends ElementType = 'button'> = LismComponentProps<T> & {
+  modalId?: string;
+};
+
+export default function OpenBtn<T extends ElementType = 'button'>({ children, modalId = '', ...props }: OpenBtnProps<T>) {
+  return (
+    <Lism data-modal-open={modalId} {...(getOpenBtnProps(props as Record<string, unknown>) as object)}>
+      {children}
+    </Lism>
+  );
+}

package/src/components/Modal/{script.js → script.ts}

@@ -1,5 +1,5 @@
 /* Memo: この script は defer をつけて読み込む （DOMパース後に読み込まれます） */
-import setModal from './setModal.ts';
+import setModal from './setModal';
 
 document.addEventListener('DOMContentLoaded', function () {
   setModal();

package/src/components/NavMenu/NavMenu.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import NavMenu from './react';
+
+const meta: Meta = {
+  title: 'UI/NavMenu',
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => (
+    <NavMenu.Root>
+      <NavMenu.Item>
+        <NavMenu.Link href="#">ホーム</NavMenu.Link>
+      </NavMenu.Item>
+      <NavMenu.Item>
+        <NavMenu.Link href="#">ブログ</NavMenu.Link>
+      </NavMenu.Item>
+      <NavMenu.Item>
+        <NavMenu.Link href="#">お問い合わせ</NavMenu.Link>
+      </NavMenu.Item>
+    </NavMenu.Root>
+  ),
+};
+
+export const WithNest: Story = {
+  name: 'ネスト（サブメニュー）付き',
+  render: () => (
+    <NavMenu.Root>
+      <NavMenu.Item>
+        <NavMenu.Link href="#">ホーム</NavMenu.Link>
+      </NavMenu.Item>
+      <NavMenu.Item>
+        <NavMenu.Link>サービス</NavMenu.Link>
+        <NavMenu.Nest>
+          <NavMenu.Item>
+            <NavMenu.Link href="#">サービス A</NavMenu.Link>
+          </NavMenu.Item>
+          <NavMenu.Item>
+            <NavMenu.Link href="#">サービス B</NavMenu.Link>
+          </NavMenu.Item>
+        </NavMenu.Nest>
+      </NavMenu.Item>
+      <NavMenu.Item>
+        <NavMenu.Link href="#">お問い合わせ</NavMenu.Link>
+      </NavMenu.Item>
+    </NavMenu.Root>
+  ),
+};
+
+export const WithHoverColor: Story = {
+  name: 'ホバーカラー指定',
+  render: () => (
+    <NavMenu.Root hovBgc="base-2" itemP="10">
+      <NavMenu.Item>
+        <NavMenu.Link href="#">ホーム</NavMenu.Link>
+      </NavMenu.Item>
+      <NavMenu.Item>
+        <NavMenu.Link href="#">ブログ</NavMenu.Link>
+      </NavMenu.Item>
+      <NavMenu.Item>
+        <NavMenu.Link href="#">お問い合わせ</NavMenu.Link>
+      </NavMenu.Item>
+    </NavMenu.Root>
+  ),
+};

package/src/components/NavMenu/_style.css

@@ -1,4 +1,4 @@
-@layer lism-modules {
+@layer lism-component {
   .c--navMenu {
     --link-td: none;
     --hl: var(--hl--s);

package/src/components/NavMenu/getProps.ts

@@ -0,0 +1,60 @@
+/**
+ * NavMenu コンポーネントの共通プロパティ処理
+ */
+import getMaybeCssVar from 'lism-css/lib/getMaybeCssVar';
+
+export type NavMenuRootProps = {
+  hovC?: string;
+  hovBgc?: string;
+  itemP?: string;
+  style?: Record<string, string>;
+  [key: string]: unknown;
+};
+
+export type NavMenuLinkProps = {
+  href?: string;
+  as?: string;
+  [key: string]: unknown;
+};
+
+export function getRootProps({ hovC, hovBgc, itemP, style = {}, ...props }: NavMenuRootProps) {
+  const computedStyle = { ...style };
+
+  if (hovBgc) computedStyle['--hov-bgc'] = getMaybeCssVar(hovBgc, 'color');
+  if (hovC) computedStyle['--hov-c'] = getMaybeCssVar(hovC, 'color');
+  if (itemP) computedStyle['--_item-p'] = getMaybeCssVar(itemP, 'space');
+
+  return {
+    lismClass: 'c--navMenu',
+    as: 'ul',
+    style: computedStyle,
+    ...props,
+  };
+}
+
+export function getNestProps(props: Record<string, unknown>) {
+  return {
+    lismClass: 'c--navMenu_nest',
+    as: 'ul',
+    'px-s': '20',
+    ...props,
+  };
+}
+
+export function getItemProps(props: Record<string, unknown>) {
+  return {
+    lismClass: 'c--navMenu_item',
+    as: 'li',
+    ...props,
+  };
+}
+
+export function getLinkProps({ href, as = 'span', ...props }: NavMenuLinkProps) {
+  return {
+    lismClass: 'c--navMenu_link',
+    as: href ? 'a' : as,
+    href,
+    c: 'inherit',
+    ...props,
+  };
+}

package/src/components/NavMenu/react/NavMenu.tsx

@@ -0,0 +1,40 @@
+import type { ElementType } from 'react';
+import { Lism, Stack, Flex, type LismComponentProps } from 'lism-css/react';
+import { getRootProps, getNestProps, getItemProps, getLinkProps, type NavMenuRootProps, type NavMenuLinkProps } from '../getProps';
+import '../_style.css';
+
+export function Root({ children, ...props }: NavMenuRootProps & LismComponentProps) {
+  const { as: rootAs, ...rootProps } = getRootProps(props);
+  return (
+    <Stack as={rootAs as ElementType} {...rootProps}>
+      {children}
+    </Stack>
+  );
+}
+
+export function Nest({ children, ...props }: LismComponentProps) {
+  const { as: nestAs, ...nestProps } = getNestProps(props);
+  return (
+    <Stack as={nestAs as ElementType} {...nestProps}>
+      {children}
+    </Stack>
+  );
+}
+
+export function Item({ children, ...props }: LismComponentProps) {
+  const { as: itemAs, ...itemProps } = getItemProps(props);
+  return (
+    <Lism as={itemAs as ElementType} {...itemProps}>
+      {children}
+    </Lism>
+  );
+}
+
+export function Link({ children, ...props }: NavMenuLinkProps & LismComponentProps) {
+  const { as: linkAs, ...linkProps } = getLinkProps(props);
+  return (
+    <Flex as={linkAs as ElementType} {...linkProps}>
+      {children}
+    </Flex>
+  );
+}

package/src/components/ShapeDivider/ShapeDivider.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import ShapeDivider from './react/ShapeDivider';
+
+const WAVE_PATH =
+  'M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z';
+
+const meta: Meta<typeof ShapeDivider> = {
+  title: 'UI/ShapeDivider',
+  component: ShapeDivider,
+  tags: ['autodocs'],
+  argTypes: {
+    children: { control: false },
+    level: { control: 'number' },
+    flip: { control: 'select', options: [undefined, 'X', 'Y', 'XY'] },
+    isAnimation: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ShapeDivider>;
+
+export const Default: Story = {
+  args: {
+    viewBox: '0 0 1200 120',
+    level: 5,
+  },
+  render: (args) => (
+    <ShapeDivider {...args}>
+      <path d={WAVE_PATH} />
+    </ShapeDivider>
+  ),
+};
+
+export const FlipX: Story = {
+  name: 'flip: X（左右反転）',
+  args: {
+    viewBox: '0 0 1200 120',
+    level: 5,
+    flip: 'X',
+  },
+  render: (args) => (
+    <ShapeDivider {...args}>
+      <path d={WAVE_PATH} />
+    </ShapeDivider>
+  ),
+};
+
+export const FlipY: Story = {
+  name: 'flip: Y（上下反転）',
+  args: {
+    viewBox: '0 0 1200 120',
+    level: 5,
+    flip: 'Y',
+  },
+  render: (args) => (
+    <ShapeDivider {...args}>
+      <path d={WAVE_PATH} />
+    </ShapeDivider>
+  ),
+};
+
+export const HighLevel: Story = {
+  name: 'level: 10',
+  args: {
+    viewBox: '0 0 1200 120',
+    level: 10,
+  },
+  render: (args) => (
+    <ShapeDivider {...args}>
+      <path d={WAVE_PATH} />
+    </ShapeDivider>
+  ),
+};
+
+export const Animation: Story = {
+  name: 'animation',
+  args: {
+    viewBox: '0 0 1200 120',
+    level: 10,
+    isAnimation: true,
+  },
+  render: (args) => (
+    <ShapeDivider {...args}>
+      <path d={WAVE_PATH} />
+    </ShapeDivider>
+  ),
+};

package/src/components/ShapeDivider/_style.css

@@ -1,5 +1,5 @@
 /* Note: scale 反転は、__inner に対して行う。shapeDivider自身を反転させると、X方向に隙間ができてしまう。 */
-@layer lism-modules {
+@layer lism-component {
   .c--shapeDivider {
     --level: 0;
 

package/src/components/ShapeDivider/getProps.ts

@@ -0,0 +1,36 @@
+export type ShapeDividerProps = {
+  viewBox?: string;
+  isAnimation?: boolean;
+  isEmpty?: boolean;
+  level?: number;
+  stretch?: string;
+  offset?: string;
+  flip?: string;
+  style?: Record<string, string>;
+  [key: string]: unknown;
+};
+
+export default function getProps({ viewBox, isAnimation, isEmpty, level = 5, stretch, offset, flip, style = {}, ...restProps }: ShapeDividerProps) {
+  if (level === 0) return null;
+
+  const computedStyle: Record<string, string | undefined> = { ...style };
+  computedStyle['--level'] = level != null ? String(level) : undefined;
+  computedStyle['--_inner-offset'] = offset ?? undefined;
+  computedStyle['--_inner-stretch'] = stretch ?? undefined;
+
+  const _props: Record<string, unknown> = {
+    lismClass: 'c--shapeDivider',
+    'max-sz': 'full',
+    'aria-hidden': 'true',
+  };
+  if (flip) _props['data-flip'] = flip;
+  if (isAnimation) _props['data-has-animation'] = 'true';
+
+  return {
+    ..._props,
+    style: computedStyle,
+    viewBox,
+    isEmpty,
+    ...restProps,
+  };
+}

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

@@ -1,14 +1,14 @@
-import { Lism } from 'lism-css/react';
-import getProps from '../getProps';
+import { Lism, type LismComponentProps } from 'lism-css/react';
+import getProps, { type ShapeDividerProps } from '../getProps';
 import '../_style.css';
 
-export default function ShapeDivider({ children, ...props }) {
+export default function ShapeDivider({ children, ...props }: ShapeDividerProps & LismComponentProps) {
   const componentProps = getProps(props);
 
   // level が 0 の場合は非表示
   if (!componentProps) return null;
 
-  const { viewBox, isAnimation, isEmpty, ...lismProps } = componentProps;
+  const { viewBox, isEmpty, ...lismProps } = componentProps;
 
   return (
     <Lism {...lismProps}>