Merge branch 'refs/heads/master' into HEAD

kufu · Nov 26, 2024 · c49da0b · c49da0b
2 parents eee615f + 01c76fd
commit c49da0b
Show file tree

Hide file tree

Showing 94 changed files with 2,712 additions and 3,670 deletions.
diff --git a/package.json b/package.json
@@ -9,11 +9,11 @@
     "eslint": "^8.57.0",
     "eslint-config-smarthr": "^7.2.0",
     "eslint-plugin-storybook": "^0.11.1",
-    "husky": "^9.1.6",
+    "husky": "^9.1.7",
     "lint-staged": "^15.2.10",
     "prettier": "^3.3.3",
     "prettier-config-smarthr": "^1.0.0",
-    "prettier-plugin-tailwindcss": "^0.6.8",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "stylelint": "^16.10.0",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-smarthr": "^3.0.1",

diff --git a/packages/smarthr-ui/.eslintignore b/packages/smarthr-ui/.eslintignore
@@ -1,3 +1,4 @@
 node_modules
 esm
 lib
+*.stories.tsx
diff --git a/packages/smarthr-ui/package.json b/packages/smarthr-ui/package.json
@@ -21,30 +21,29 @@
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
-    "@storybook/addon-a11y": "^8.4.4",
-    "@storybook/addon-actions": "^8.4.4",
-    "@storybook/addon-essentials": "^8.4.4",
-    "@storybook/addon-interactions": "^8.4.4",
-    "@storybook/addon-storysource": "^8.4.4",
-    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/addon-a11y": "^8.4.5",
+    "@storybook/addon-actions": "^8.4.5",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-storysource": "^8.4.5",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-viewport": "^8.4.4",
+    "@storybook/addon-viewport": "^8.4.5",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.4.4",
-    "@storybook/cli": "^8.4.4",
-    "@storybook/manager-api": "^8.4.4",
-    "@storybook/react": "^8.4.4",
-    "@storybook/react-webpack5": "^8.4.4",
-    "@storybook/source-loader": "^8.4.4",
-    "@storybook/test": "^8.4.4",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/cli": "^8.4.5",
+    "@storybook/manager-api": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-webpack5": "^8.4.5",
+    "@storybook/source-loader": "^8.4.5",
+    "@storybook/test": "^8.4.5",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.4.4",
-    "@swc/core": "^1.9.2",
+    "@storybook/theming": "^8.4.5",
+    "@swc/core": "^1.9.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/lodash.merge": "^4.6.9",
     "@types/lodash.range": "^3.2.9",
-    "@types/node": "^20.17.6",
+    "@types/node": "^20.17.7",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/react-test-renderer": "^18.3.0",
@@ -55,8 +54,8 @@
     "babel-loader": "^9.2.1",
     "babel-plugin-polyfill-corejs2": "^0.4.12",
     "babel-plugin-polyfill-regenerator": "^0.6.3",
-    "css-loader": "^7.1.2",
     "chromatic": "^11.18.1",
+    "css-loader": "^7.1.2",
     "ecma-version-validator-webpack-plugin": "^1.2.1",
     "fs-extra": "^11.2.0",
     "glob": "11.0.0",
@@ -77,7 +76,7 @@
     "react-test-renderer": "^18.3.1",
     "rimraf": "^6.0.1",
     "standard-version": "^9.3.2",
-    "storybook": "^8.4.4",
+    "storybook": "^8.4.5",
     "storybook-addon-pseudo-states": "^4.0.2",
     "style-loader": "^4.0.0",
     "styled-components": "^5.3.11",

diff --git a/packages/smarthr-ui/src/components/AppNavi/AppNavi.stories.tsx b/packages/smarthr-ui/src/components/AppNavi/AppNavi.stories.tsx
diff --git a/packages/smarthr-ui/src/components/AppNavi/AppNavi.tsx b/packages/smarthr-ui/src/components/AppNavi/AppNavi.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef, FC, PropsWithChildren, ReactNode, useMemo } from 'react'
+import React, { ComponentPropsWithoutRef, FC, PropsWithChildren, ReactNode } from 'react'
 import { tv } from 'tailwind-variants'
 
 import { Nav } from '../SectioningContent'
@@ -20,8 +20,12 @@ type Props = PropsWithChildren<{
   buttons?: Array<
     AppNaviButtonProps | AppNaviAnchorProps | AppNaviDropdownProps | AppNaviCustomTagProps
   >
-  /** ドロップダウンにキャレットを表示するかどうか */
+  /** ドロップダウンにキャレットを表示するかどうか
+   * @deprecated キャレットの省略は非推奨です
+   */
   displayDropdownCaret?: boolean
+  /** 追加の領域 */
+  additionalArea?: ReactNode
 }>
 
 const appNavi = tv({
@@ -36,69 +40,74 @@ const appNavi = tv({
       'shr-flex shr-items-stretch shr-gap-1 shr-self-stretch',
     ],
     listItem: ['smarthr-ui-AppNavi-listItem', 'shr-list-none'],
+    additionalAreaEl: 'shr-ms-auto',
   },
 })
 
+const { wrapper, statusLabel, buttonsEl, listItem, additionalAreaEl } = appNavi()
+
 export const AppNavi: FC<Props & ElementProps> = ({
   label,
   buttons,
   className,
   children,
   displayDropdownCaret = false,
+  additionalArea,
   ...props
-}) => {
-  const { wrapperStyle, statusLabelStyle, buttonsStyle, listItemStyle } = useMemo(() => {
-    const { wrapper, statusLabel, buttonsEl, listItem } = appNavi()
-    return {
-      wrapperStyle: wrapper({ className }),
-      statusLabelStyle: statusLabel(),
-      buttonsStyle: buttonsEl(),
-      listItemStyle: listItem(),
-    }
-  }, [className])
-
-  return (
-    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content
-    <Nav {...props} className={wrapperStyle}>
-      {label && <StatusLabel className={statusLabelStyle}>{label}</StatusLabel>}
-
-      {buttons && (
-        <ul className={buttonsStyle}>
-          {buttons.map((button, i) => {
-            if ('tag' in button) {
-              return (
-                <li key={i} className={listItemStyle}>
-                  <AppNaviCustomTag {...button} />
-                </li>
-              )
-            }
+}) => (
+  // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content
+  <Nav {...props} className={wrapper({ className })}>
+    {label && <StatusLabel className={statusLabel()}>{label}</StatusLabel>}
 
-            if ('href' in button) {
-              return (
-                <li key={i} className={listItemStyle}>
-                  <AppNaviAnchor {...button} />
-                </li>
-              )
-            }
+    <ul className={buttonsEl()}>
+      {buttons &&
+        buttons.map((button, i) => {
+          if ('tag' in button) {
+            return (
+              <li key={i} className={listItem()}>
+                <AppNaviCustomTag {...button} />
+              </li>
+            )
+          }
 
-            if ('dropdownContent' in button) {
-              return (
-                <li key={i} className={listItemStyle}>
-                  <AppNaviDropdown {...button} displayCaret={displayDropdownCaret} />
-                </li>
-              )
-            }
+          if ('href' in button) {
+            return (
+              <li key={i} className={listItem()}>
+                <AppNaviAnchor {...button} />
+              </li>
+            )
+          }
 
+          if ('dropdownContent' in button) {
             return (
-              <li key={i} className={listItemStyle}>
-                <AppNaviButton {...button} />
+              <li key={i} className={listItem()}>
+                <AppNaviDropdown {...button} displayCaret={displayDropdownCaret} />
               </li>
             )
-          })}
-        </ul>
-      )}
+          }
+
+          return (
+            <li key={i} className={listItem()}>
+              <AppNaviButton {...button} />
+            </li>
+          )
+        })}
+      {renderButtons(children)}
+    </ul>
+
+    {additionalArea && <div className={additionalAreaEl()}>{additionalArea}</div>}
+  </Nav>
+)
+
+const renderButtons = (children: ReactNode) =>
+  React.Children.map(children, (child): ReactNode => {
+    if (!(child && React.isValidElement(child))) {
+      return null
+    }
+
+    if (child.type === React.Fragment) {
+      return renderButtons(child.props.children)
+    }
 
-      {children}
-    </Nav>
-  )
-}
+    return <li className={listItem()}>{child}</li>
+  })