@lism-css/ui 0.10.0 → 0.12.0

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/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/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}>

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
+import Tabs from './react';
+
+const meta: Meta = {
+  title: 'UI/Tabs',
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => (
+    <Tabs.Root>
+      <Tabs.Item>
+        <Tabs.Tab>タブ 1</Tabs.Tab>
+        <Tabs.Panel>タブ 1 のコンテンツです。</Tabs.Panel>
+      </Tabs.Item>
+      <Tabs.Item>
+        <Tabs.Tab>タブ 2</Tabs.Tab>
+        <Tabs.Panel>タブ 2 のコンテンツです。</Tabs.Panel>
+      </Tabs.Item>
+      <Tabs.Item>
+        <Tabs.Tab>タブ 3</Tabs.Tab>
+        <Tabs.Panel>タブ 3 のコンテンツです。</Tabs.Panel>
+      </Tabs.Item>
+    </Tabs.Root>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const tabs = canvas.getAllByRole('tab');
+    const [tab1, tab2, tab3] = tabs;
+
+    // 初期状態: タブ 1 が選択されている
+    await expect(tab1).toHaveAttribute('aria-selected', 'true');
+    await expect(tab2).toHaveAttribute('aria-selected', 'false');
+    await expect(tab3).toHaveAttribute('aria-selected', 'false');
+
+    // タブ 2 をクリック
+    await userEvent.click(tab2);
+    await expect(tab1).toHaveAttribute('aria-selected', 'false');
+    await expect(tab2).toHaveAttribute('aria-selected', 'true');
+
+    // タブ 3 をクリック
+    await userEvent.click(tab3);
+    await expect(tab2).toHaveAttribute('aria-selected', 'false');
+    await expect(tab3).toHaveAttribute('aria-selected', 'true');
+  },
+};
+
+export const DefaultIndex2: Story = {
+  name: 'defaultIndex: 2（2番目をデフォルト選択）',
+  render: () => (
+    <Tabs.Root defaultIndex={2}>
+      <Tabs.Item>
+        <Tabs.Tab>タブ 1</Tabs.Tab>
+        <Tabs.Panel>タブ 1 のコンテンツです。</Tabs.Panel>
+      </Tabs.Item>
+      <Tabs.Item>
+        <Tabs.Tab>タブ 2</Tabs.Tab>
+        <Tabs.Panel>タブ 2 がデフォルトで選択されています。</Tabs.Panel>
+      </Tabs.Item>
+      <Tabs.Item>
+        <Tabs.Tab>タブ 3</Tabs.Tab>
+        <Tabs.Panel>タブ 3 のコンテンツです。</Tabs.Panel>
+      </Tabs.Item>
+    </Tabs.Root>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const tabs = canvas.getAllByRole('tab');
+    const [tab1, tab2] = tabs;
+
+    // 初期状態: タブ 2 が選択されている
+    await expect(tab1).toHaveAttribute('aria-selected', 'false');
+    await expect(tab2).toHaveAttribute('aria-selected', 'true');
+  },
+};

package/src/components/Tabs/astro/Tab.astro

@@ -1,6 +1,7 @@
 ---
 // import type { LismProps } from 'lism-css/types';
 import { Lism } from 'lism-css/astro';
+import { getTabProps } from '../getProps';
 
 // export interface Props extends LismProps {
 // 	// controlId: string;
@@ -12,6 +13,6 @@ const { tabId = 'tab', index = 0, isActive, ...props } = Astro.props;
 const controlId = `${tabId}-${index}`;
 ---
 
-<Lism as="button" lismClass="c--tabs_tab" setPlain role="tab" aria-controls={controlId} aria-selected={isActive ? 'true' : 'false'} {...props}>
+<Lism {...getTabProps(props)} role="tab" aria-controls={controlId} aria-selected={isActive ? 'true' : 'false'}>
   <slot />
 </Lism>

package/src/components/Tabs/astro/{transformTabitems.js → transformTabitems.ts}

@@ -1,30 +1,30 @@
+type TransformResult = {
+  btns: string[];
+  panels: string[];
+};
+
 // <lism-placeholder-tabitem> → div.tabitem へ 変換
-export default function transformHTML(htmlString, tabID, defaultIndex) {
+export default function transformHTML(htmlString: string, tabID: string, defaultIndex: number): TransformResult {
   let index = 1; // 1スタート
-  let btns = [];
-  let panels = [];
+  const btns: string[] = [];
+  const panels: string[] = [];
 
-  // <lism-placeholder-tabitem>でコンテンツを囲んでいるので中身を解析する。
   const regex = /<lism-placeholder-tabitem(.*?)>(.*?)<\/lism-placeholder-tabitem>/gs;
   const matches = [...htmlString.matchAll(regex)];
 
-  // console.log(matches);
   matches.forEach((match) => {
-    // const tabItemAttrs = match[1]; // 使わないがdata-astro-source-file属性が自動でついてきたりするので、属性値があっても問題ないようにしている。
     const tabItemContent = match[2];
 
     const controlId = `${tabID}-${index}`;
     const isActive = index === defaultIndex;
     index++;
 
-    // <lism-placeholder-tabtbn>からタブボタンを生成
     const btnMatch = tabItemContent.match(/<button(.*?)>(.*?)<\/button>(.*)/s);
     if (!btnMatch) return;
     let btnAtts = btnMatch[1];
-    let btnContent = btnMatch[2];
+    const btnContent = btnMatch[2];
     let panel = btnMatch[3];
 
-    // btnContent = btnContent.replace(` slot="tab"`, '');
     btnAtts = btnAtts.replace(`aria-controls="tab-0"`, `aria-controls="${controlId}"`);
     panel = panel.replace(`id="tab-0"`, `id="${controlId}"`);
     if (isActive) {

package/src/components/Tabs/getProps.ts

@@ -0,0 +1,23 @@
+import atts from 'lism-css/lib/helper/atts';
+import mergeSet from 'lism-css/lib/helper/mergeSet';
+
+type TabsProps = {
+  lismClass?: string;
+  [key: string]: unknown;
+};
+
+export default function getTabsProps({ lismClass, ...props }: TabsProps) {
+  return {
+    lismClass: atts(lismClass, 'c--tabs'),
+    ...props,
+  };
+}
+
+export function getTabProps({ set, unset, ...props }: Record<string, unknown>) {
+  return {
+    as: 'button',
+    lismClass: 'c--tabs_tab',
+    set: mergeSet('plain', set, unset),
+    ...props,
+  };
+}

package/src/components/Tabs/react/Tab.tsx

@@ -0,0 +1,21 @@
+import { Lism, type LismComponentProps } from 'lism-css/react';
+import { getTabProps } from '../getProps';
+
+type TabProps = LismComponentProps & {
+  tabId?: string;
+  index?: number;
+  isActive?: boolean;
+};
+
+export default function Tab({ tabId = 'tab', index = 0, isActive = false, ...props }: TabProps) {
+  const controlId = `${tabId}-${index}`;
+
+  return (
+    <Lism
+      {...(getTabProps(props as Record<string, unknown>) as object)}
+      role="tab"
+      aria-controls={controlId}
+      aria-selected={isActive ? 'true' : 'false'}
+    />
+  );
+}

package/src/components/Tabs/react/TabItem.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+type TabItemProps = {
+  isTabItem?: boolean;
+  children?: ReactNode;
+};
+
+// Note: <Tabs>側でループして色々処理される。
+// 引数でちゃんと処理したいpropを書いておかないとだめ。
+export default function TabItem({ isTabItem = true, children }: TabItemProps) {
+  void isTabItem;
+  return <div>{children}</div>;
+}

package/src/components/Tabs/react/TabList.tsx

@@ -0,0 +1,5 @@
+import { Lism, type LismComponentProps } from 'lism-css/react';
+
+export default function TabList(props: LismComponentProps) {
+  return <Lism lismClass="c--tabs_list" role="tablist" {...props} />;
+}

package/src/components/Tabs/react/{TabPanel.jsx → TabPanel.tsx}

@@ -1,7 +1,12 @@
-// import React from 'react';
-import { Lism } from 'lism-css/react';
+import { Lism, type LismComponentProps } from 'lism-css/react';
 
-export default function TabPanel({ tabId = 'tab', isActive = false, index = 0, ...props }) {
+type TabPanelProps = LismComponentProps & {
+  tabId?: string;
+  isActive?: boolean;
+  index?: number;
+};
+
+export default function TabPanel({ tabId = 'tab', isActive = false, index = 0, ...props }: TabPanelProps) {
   const controlId = `${tabId}-${index}`;
 
   return <Lism id={controlId} role="tabpanel" aria-hidden={isActive ? 'false' : 'true'} lismClass="c--tabs_panel" {...props} />;

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

@@ -1,34 +1,41 @@
 'use client';
 import { useState, useId, Children, isValidElement } from 'react';
-import { Lism } from 'lism-css/react';
+import type { ElementType } from 'react';
+import { Lism, type LismComponentProps } from 'lism-css/react';
 import Tab from './Tab';
 import TabItem from './TabItem';
 import TabList from './TabList';
 import TabPanel from './TabPanel';
 import getTabsProps from '../getProps';
-// import { TabContext } from './context';
 
 import '../_style.css';
 
-export default function Tabs({ tabId = '', defaultIndex = 1, listProps = {}, children, ...props }) {
+type TabsProps<T extends ElementType = 'div'> = LismComponentProps<T> & {
+  tabId?: string;
+  defaultIndex?: number;
+  listProps?: LismComponentProps;
+};
+
+export default function Tabs<T extends ElementType = 'div'>({ tabId = '', defaultIndex = 1, listProps = {}, children, ...props }: TabsProps<T>) {
   const [activeIndex, setActiveIndex] = useState(defaultIndex);
-  const theTabId = tabId || useId();
-  const btns = [];
-  const panels = [];
+  const generatedId = useId();
+  const theTabId = tabId || generatedId;
+  const btns: React.ReactElement[] = [];
+  const panels: React.ReactElement[] = [];
 
   // Tabs.Item の処理
   Children.forEach(children, (child, index) => {
     const tabIndex = index + 1; // 1 はじまり
-    // console.log('child.type', isValidElement(child), child.type);
 
     if (isValidElement(child) && child.type === TabItem) {
-      Children.forEach(child.props.children, (nestedChild) => {
+      const childProps = child.props as { children?: React.ReactNode };
+      Children.forEach(childProps.children, (nestedChild) => {
         if (isValidElement(nestedChild)) {
           if (nestedChild.type === Tab) {
-            const tabProps = nestedChild.props;
+            const tabProps = nestedChild.props as Record<string, unknown>;
             btns.push(
               <Tab
-                {...tabProps}
+                {...(tabProps as LismComponentProps)}
                 tabId={theTabId}
                 index={tabIndex}
                 key={tabIndex}
@@ -37,8 +44,16 @@ export default function Tabs({ tabId = '', defaultIndex = 1, listProps = {}, chi
               />
             );
           } else if (nestedChild.type === TabPanel) {
-            const panelProps = nestedChild.props;
-            panels.push(<TabPanel {...panelProps} tabId={theTabId} index={tabIndex} key={tabIndex} isActive={tabIndex === activeIndex} />);
+            const panelProps = nestedChild.props as Record<string, unknown>;
+            panels.push(
+              <TabPanel
+                {...(panelProps as LismComponentProps)}
+                tabId={theTabId}
+                index={tabIndex}
+                key={tabIndex}
+                isActive={tabIndex === activeIndex}
+              />
+            );
           }
         }
       });

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

@@ -1,7 +1,7 @@
-import setTabs from './setTabs.js';
+import setTabs from './setTabs';
 
 document.addEventListener('DOMContentLoaded', function () {
-  const tabsAll = document.querySelectorAll('.c--tabs');
+  const tabsAll = document.querySelectorAll<HTMLElement>('.c--tabs');
   tabsAll.forEach((tabs) => {
     setTabs(tabs);
   });