Merge remote-tracking branch 'origin/master' into fix/build-foundation/cjs-migrate-to-rollup

Author: Qs-F

.gitignore

@@ -78,4 +78,5 @@ reg_storybook
 smarthr-ui.css
 
 .idea
-.vscode
+.vscode
+packages/smarthr-ui/metadata.json

package.json

@@ -6,8 +6,8 @@
   "devDependencies": {
     "@commitlint/cli": "^20.3.1",
     "@commitlint/config-conventional": "^20.3.1",
-    "eslint": "^9.32.0",
-    "eslint-config-smarthr": "^12.0.0",
+    "eslint": "^9.39.2",
+    "eslint-config-smarthr": "^13.3.0",
     "eslint-plugin-storybook": "^9.0.18",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
@@ -21,26 +21,26 @@
     "stylelint-config-styled-components": "^0.1.1",
     "ts-node": "^10.9.2",
     "tsx": "^4.20.6",
-    "typescript": "^5.8.3"
+    "typescript": "^5.9.3"
   },
   "scripts": {
     "ui": "pnpm -F smarthr-ui",
     "charts": "pnpm -F @smarthr/smarthr-ui-charts",
     "commitmsg": "commitlint -e $GIT_PARAMS",
     "prepare": "husky"
   },
-  "packageManager": "pnpm@10.28.2",
+  "packageManager": "pnpm@10.29.3",
   "pnpm": {
     "overrides": {
       "@babel/helper-compilation-targets": "^7.28.6",
-      "@types/react": "^18.3.27",
+      "@types/react": "^18.3.28",
       "minimist": "1.2.8",
       "react": "^19.2.4",
       "react-dom": "^19.2.4",
       "micromatch@<4.0.8": ">=4.0.8",
       "cross-spawn@<7.0.5": ">=7.0.6",
       "nanoid": "3.3.11",
-      "esbuild@<=0.24.2": ">=0.27.2",
+      "esbuild@<=0.24.2": ">=0.27.3",
       "@babel/runtime@<7.26.10": ">=7.28.6",
       "@babel/helpers@<7.26.10": ">=7.28.6",
       "brace-expansion@<1.1.12": "^4.0.1",
@@ -49,7 +49,7 @@
       "tmp@<=0.2.3": ">=0.2.5",
       "vite@>=6.0.0 <=6.4.0": ">=6.4.1",
       "js-yaml@>=4.0.0 <4.1.1": ">=4.1.1",
-      "glob@>=11.0.0 <11.1.0": ">=11.1.0",
+      "glob@>=11.0.0 <11.1.0": ">=13.0.1",
       "diff@<8.0.3": ">=8.0.3",
       "lodash@>=4.0.0 <=4.17.22": ">=4.17.23"
     }

packages/charts/package.json

@@ -32,18 +32,21 @@
     "release": "standard-version -a",
     "release:dryrun": "standard-version --dry-run",
     "storybook": "storybook dev -p 6007",
+    "test": "vitest",
     "watch:css": "tailwindcss -i ./src/styles/index.css -o ./lib/styles.css --watch"
   },
   "peerDependencies": {
     "react": "^19.0.3",
     "react-dom": "^19.0.3",
-    "react-intl": "^7.0.4",
+    "react-intl": "^7.0.4 || ^8.0.0",
     "smarthr-ui": "^74.0.0",
     "styled-components": "^5.0.1"
   },
   "dependencies": {
-    "chart.js": "^4.5.1",
     "@smarthr/patternomaly": "^2.0.0",
+    "chart.js": "^4.5.1",
+    "chartjs-plugin-datalabels": "^2.2.0",
+    "deepmerge": "^4.3.1",
     "react-chartjs-2": "^5.3.1"
   },
   "devDependencies": {
@@ -56,25 +59,27 @@
     "@storybook/cli": "9.0.18",
     "@storybook/react": "9.0.18",
     "@storybook/react-vite": "9.0.18",
-    "@types/node": "^20.19.30",
-    "@types/react": "^18.3.27",
+    "@types/node": "^20.19.33",
+    "@types/react": "^18.3.28",
     "@types/react-dom": "^19.2.3",
     "@types/styled-components": "^5.1.36",
-    "autoprefixer": "^10.4.23",
-    "glob": "11.0.3",
+    "autoprefixer": "^10.4.24",
+    "glob": "13.0.3",
+    "jsdom": "^26.1.0",
     "npm-run-all2": "^8.0.4",
     "postcss": "^8.5.6",
-    "react": "^19.1.5",
-    "react-dom": "^19.1.5",
-    "react-intl": "^7.1.14",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-intl": "^8.1.3",
     "rimraf": "^6.0.1",
     "rollup": "^4.44.2",
     "standard-version": "^9.5.0",
     "storybook": "9.0.18",
     "styled-components": "^5.3.11",
     "tailwind-variants": "^0.3.1",
     "tailwindcss": "^3.4.19",
-    "typescript": "^5.8.3"
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
   },
   "keywords": [
     "react",

packages/charts/src/components/BarChart/BarChart.stories.tsx

@@ -55,3 +55,106 @@ export const MultipleDatasets: Story = {
     title: '複数データの棒グラフ',
   },
 }
+
+export const WithCustomOptions: Story = {
+  args: {
+    data: {
+      labels: [
+        'レベル1',
+        'レベル2',
+        'レベル3',
+        'レベル3',
+        'レベル3',
+        'レベル3',
+        'レベル3',
+        'レベル3',
+        'レベル3',
+        'レベル4',
+        'レベル5',
+      ],
+      datasets: [
+        {
+          label: '人数',
+          data: [95, 48, 138, 138, 138, 138, 138, 138, 138, 88, 42],
+        },
+      ],
+    },
+    title: 'レベル分布',
+    options: {
+      plugins: {
+        datalabels: {
+          display: true,
+          anchor: 'end',
+          align: 'end',
+          color: '#333',
+          font: {
+            weight: 'bold',
+            size: 12,
+          },
+        },
+      },
+      scales: {
+        y: {
+          ticks: {
+            stepSize: 50,
+          },
+          suggestedMax: 150,
+        },
+      },
+      datasets: {
+        bar: {
+          barPercentage: 0.8,
+          categoryPercentage: 0.9,
+        },
+      },
+    },
+  },
+}
+
+export const WithDataLabels: Story = {
+  args: {
+    data: sampleData,
+    title: 'データラベル付き棒グラフ',
+    options: {
+      plugins: {
+        datalabels: {
+          display: true,
+          anchor: 'end',
+          align: 'end',
+          color: '#333',
+          font: {
+            weight: 'bold',
+            size: 12,
+          },
+        },
+      },
+    },
+  },
+}
+
+export const WithoutTitle: Story = {
+  args: {
+    data: sampleData,
+  },
+}
+
+export const WithOverriddenTooltipAttempt: Story = {
+  name: 'Tooltip上書き試行（内部設定が保護される）',
+  args: {
+    data: sampleData,
+    title: 'Tooltip上書きテスト',
+    options: {
+      plugins: {
+        tooltip: {
+          // これらの設定は無視され、内部のスタイルが使われる
+          backgroundColor: '#ff0000',
+          titleColor: '#00ff00',
+          bodyColor: '#0000ff',
+          borderColor: '#ff00ff',
+          borderWidth: 10,
+          cornerRadius: 20,
+        },
+      },
+    },
+  },
+}

packages/charts/src/components/BarChart/BarChart.tsx

@@ -16,18 +16,20 @@ type Props = {
   // 色などはpropsで渡せないようにする
   // TODO:もっと簡単なデータの型を作る
   data: ChartData<'bar'>
-  title: string
+  title?: string
+  options?: Partial<ChartOptions<'bar'>>
 }
 
-export const BarChart: React.FC<Props> = ({ data, title }) => {
+export const BarChart: React.FC<Props> = ({ data, title, options: externalOptions }) => {
   const chartId = useId()
   const chartRef = useRef<Chart<'bar'>>(null)
   const chartColors = useMemo(() => getChartColors(data.datasets.length), [data.datasets.length])
 
   const ariaLabel = useMemo(() => {
     const datasetCount = data.datasets.length
     const barCount = data.datasets[0].data.length
-    return `${title} 棒グラフ ${datasetCount}個のデータ ${barCount}本の棒`
+    const prefix = title ? `${title} ` : ''
+    return `${prefix}棒グラフ ${datasetCount}個のデータ ${barCount}本の棒`
   }, [title, data])
 
   const enhancedData: ChartData<'bar'> = useMemo(
@@ -44,21 +46,27 @@ export const BarChart: React.FC<Props> = ({ data, title }) => {
   const chartOptions: ChartOptions<'bar'> = useMemo(
     () =>
       createBarChartOptions({
+        ...externalOptions,
         plugins: {
-          title: {
-            display: true,
-            text: title,
-          },
+          ...externalOptions?.plugins,
+          title: title
+            ? {
+                display: true,
+                text: title,
+              }
+            : {
+                display: false,
+              },
           keyboardNavigation: {
             liveRegionId: chartId,
           },
         },
       }),
-    [title, chartId],
+    [title, chartId, externalOptions],
   )
 
   return (
-    <div className="shr-relative">
+    <div className="shr-relative shr-h-full shr-w-full">
       <VisuallyHiddenText aria-live="polite" id={chartId}></VisuallyHiddenText>
       <Bar
         tabIndex={0}

packages/charts/src/components/Chart/Chart.stories.tsx

@@ -173,3 +173,81 @@ export const ManyDatasetsLine: Story = {
     },
   },
 }
+
+export const BarChartWithDataLabels: Story = {
+  args: {
+    type: 'bar',
+    title: 'データラベル付き棒グラフ',
+    data: {
+      labels: ['1月', '2月', '3月', '4月', '5月'],
+      datasets: [
+        {
+          label: '売上',
+          data: [65, 59, 80, 81, 56],
+        },
+      ],
+    },
+    options: {
+      plugins: {
+        datalabels: {
+          display: true,
+          anchor: 'end',
+          align: 'end',
+          color: '#333',
+          font: {
+            weight: 'bold',
+            size: 12,
+          },
+        },
+      },
+    },
+  },
+}
+
+export const LineChartWithDataLabels: Story = {
+  args: {
+    type: 'line',
+    title: 'データラベル付き線グラフ',
+    data: {
+      labels: ['1月', '2月', '3月', '4月', '5月'],
+      datasets: [
+        {
+          label: '売上',
+          data: [65, 59, 80, 81, 56],
+        },
+      ],
+    },
+    options: {
+      plugins: {
+        datalabels: {
+          display: true,
+          backgroundColor: '#fff',
+          borderColor: '#333',
+          borderWidth: 1,
+          borderRadius: 4,
+          color: '#333',
+          font: {
+            weight: 'bold',
+            size: 12,
+          },
+          padding: 4,
+        },
+      },
+    },
+  },
+}
+
+export const BarChartWithoutTitle: Story = {
+  args: {
+    type: 'bar',
+    data: {
+      labels: ['1月', '2月', '3月', '4月', '5月'],
+      datasets: [
+        {
+          label: '売上',
+          data: [65, 59, 80, 81, 56],
+        },
+      ],
+    },
+  },
+}