1:##[group]Operating System2:Ubuntu...513:npm WARN EBADENGINE   current: { node: 'v16.20.2', npm: '8.19.4' }514:npm WARN EBADENGINE }515:npm WARN EBADENGINE Unsupported engine {516:npm WARN EBADENGINE   package: 'npm-run-all2@7.0.1',517:npm WARN EBADENGINE   required: { node: '^18.17.0 || >=20.5.0', npm: '>= 9' },518:npm WARN EBADENGINE   current: { node: 'v16.20.2', npm: '8.19.4' }519:npm WARN EBADENGINE }520:npm WARN EBADENGINE Unsupported engine {521:npm WARN EBADENGINE   package: 'json-parse-even-better-errors@4.0.0',...645:npm WARN EBADENGINE Unsupported engine {646:npm WARN EBADENGINE   package: '@4design/for-ui@2.0.0-beta.0',647:npm WARN EBADENGINE   required: { node: '^20.11.1', npm: '^10.9.0' },648:npm WARN EBADENGINE   current: { node: 'v16.20.2', npm: '8.19.4' }649:npm WARN EBADENGINE }650:npm WARN deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported651:npm ERR! code 1652:npm ERR! path /home/runner/work/for-ui/for-ui/node_modules/@storybook/codemod/node_modules/esbuild653:npm ERR! command failed654:npm ERR! command sh -c -- node install.js655:npm ERR! /home/runner/work/for-ui/for-ui/node_modules/@storybook/codemod/node_modules/esbuild/install.js:134656:npm ERR!     throw new Error(`Expected ${JSON.stringify(versionFromPackageJSON)} but got ${JSON.stringify(stdout)}`);657:npm ERR!           ^658:npm ERR!659:npm ERR! Error: Expected "0.24.0" but got "0.21.5"660:npm ERR!     at validateBinaryVersion (/home/runner/work/for-ui/for-ui/node_modules/@storybook/codemod/node_modules/esbuild/install.js:134:11)661:npm ERR!     at /home/runner/work/for-ui/for-ui/node_modules/@storybook/codemod/node_modules/esbuild/install.js:284:5662:npm ERR! A complete log of this run can be found in:663:npm ERR!     /home/runner/.npm/_logs/2024-11-06T16_55_09_608Z-debug-0.log664:##[error]Process completed with exit code 1.

1:##[group]Operating System2:Ubuntu...513:npm WARN EBADENGINE   current: { node: 'v16.20.2', npm: '8.19.4' }514:npm WARN EBADENGINE }515:npm WARN EBADENGINE Unsupported engine {516:npm WARN EBADENGINE   package: 'npm-run-all2@7.0.1',517:npm WARN EBADENGINE   required: { node: '^18.17.0 || >=20.5.0', npm: '>= 9' },518:npm WARN EBADENGINE   current: { node: 'v16.20.2', npm: '8.19.4' }519:npm WARN EBADENGINE }520:npm WARN EBADENGINE Unsupported engine {521:npm WARN EBADENGINE   package: 'json-parse-even-better-errors@4.0.0',...645:npm WARN EBADENGINE Unsupported engine {646:npm WARN EBADENGINE   package: '@4design/for-ui@2.0.0-beta.0',647:npm WARN EBADENGINE   required: { node: '^20.11.1', npm: '^10.9.0' },648:npm WARN EBADENGINE   current: { node: 'v16.20.2', npm: '8.19.4' }649:npm WARN EBADENGINE }650:npm WARN deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported651:npm ERR! code 1652:npm ERR! path /home/runner/work/for-ui/for-ui/node_modules/@storybook/codemod/node_modules/esbuild653:npm ERR! command failed654:npm ERR! command sh -c -- node install.js655:npm ERR! /home/runner/work/for-ui/for-ui/node_modules/@storybook/codemod/node_modules/esbuild/install.js:134656:npm ERR!     throw new Error(`Expected ${JSON.stringify(versionFromPackageJSON)} but got ${JSON.stringify(stdout)}`);657:npm ERR!           ^658:npm ERR!659:npm ERR! Error: Expected "0.24.0" but got "0.21.5"660:npm ERR!     at validateBinaryVersion (/home/runner/work/for-ui/for-ui/node_modules/@storybook/codemod/node_modules/esbuild/install.js:134:11)661:npm ERR!     at /home/runner/work/for-ui/for-ui/node_modules/@storybook/codemod/node_modules/esbuild/install.js:284:5662:npm ERR! A complete log of this run can be found in:663:npm ERR!     /home/runner/.npm/_logs/2024-11-06T16_55_09_574Z-debug-0.log664:##[error]Process completed with exit code 1.

 export const Pagination: FC<PaginationProps> = ({   defaultPage,   total,   page,   onChangePage,   onClickFirstPageButton,   onClickLastPageButton,   onClickNextPageButton,   onClickPreviousPageButton,   disabled = false,   className,+  'aria-label': ariaLabel = 'ページ送り',   ...props }) => {

-export const _Text = (): JSX.Element => (+export const TextButtonVariant = (): JSX.Element => (

-setTimeout(() => setLoading(false), 1000);+const LOADING_TIMEOUT = 1000;+setTimeout(() => setLoading(false), LOADING_TIMEOUT);

-const intention = color-  ? (-      {-        primary: 'primary',-        secondary: 'secondary',-        default: 'primary',-      } as const-    )[color]-  : passedIntention;+const intention = passedIntention;+// Remove the color prop and update all usages to use the intention prop instead

+const useLoadingState = (duration: number) => {+  const [loading, setLoading] = useState(false);+  const handleClick = useCallback(() => {+    setLoading(true);+    setTimeout(() => setLoading(false), duration);+  }, [duration]);+  return { loading, handleClick };+};+ export const Loading = (args: ButtonProps) => {-  const [loading, setLoading] = useState(false);-+  const { loading, handleClick } = useLoadingState(1000);   return (-    <Button-      loading={loading}-      onClick={() => {-        setLoading(true);-        setTimeout(() => setLoading(false), 1000);-      }}-      {...args}-    >+    <Button loading={loading} onClick={handleClick} {...args}>       <MdSync />       データを更新     </Button>   ); };

 export const StaticPersonData: Person[] = [   {     id: 1,-    firstName: 'population',-    lastName: 'wdpw7',-    age: 1,-    visits: 13,-    status: '',-    image: '/image.png',+    firstName: 'John',+    lastName: 'Doe',+    age: 30,+    visits: 15,+    status: 'active',+    image: '/john.png',   },-  ...+  {+    id: 2,+    firstName: 'Jane',+    lastName: 'Smith',+    age: 28,+    visits: 20,+    status: 'inactive',+    image: '/jane.png',+  },+  // Add more diverse entries... ];

-data: TableOptions<T>['data'];+data: T[];

-export type ButtonProps<As extends ElementType = 'button'> = ComponentPropsWithAs<-  Omit<MuiButtonProps<As>, 'href' | 'children' | 'onClick'> & {-    // ... other props-  },-  As->;+export type ButtonProps<As extends ElementType = 'button'> = ComponentPropsWithAs<As> & {+  // ... other props+} & Omit<MuiButtonProps<As>, 'href' | 'children' | 'onClick'>;

 type PaginationProps = {   /**    * 全てのページ数を指定    */-  total: number;+  totalPages: number;   // ... other props };+// Update usage in the component+export const Pagination: FC<PaginationProps> = ({+  defaultPage,+  totalPages,+  page,+  // ... other props+}) => {+  const { items } = usePagination({+    page,+    defaultPage,+    count: totalPages,+    // ... other options+  });+  // ... rest of the component+};+

-onRowClick?: (e: MouseEvent<HTMLTableRowElement>, row: RowType<T>) => void;+// Remove the onRowClick prop if not used, or implement its functionality in the Table component

-export const WithTablePage: Story = () => {-  const usePagination = (limit = 10) => {-    const [page, setPage] = useState(1);+// In a new file, e.g., 'src/hooks/usePagination.ts'+export const usePagination = (limit = 10) => {+  const [page, setPage] = useState(1);-    const offset = (page - 1) * limit;-    const next = () => setPage(page + 1);-    const prev = () => setPage(page - 1);-    const onChange = (p: number) => {-      if (p === page) return;--      setPage(p);-    };--    return {-      page,-      limit,-      offset,-      actions: {-        next,-        prev,-        onChange,-      },-    };+  const offset = (page - 1) * limit;+  const next = () => setPage(page + 1);+  const prev = () => setPage(page - 1);+  const onChange = (p: number) => {+    if (p === page) return;+    setPage(p);   };+  return {+    page,+    limit,+    offset,+    actions: {+      next,+      prev,+      onChange,+    },+  };+};++// In Table.stories.tsx+import { usePagination } from '../hooks/usePagination';++export const WithTablePage: Story = () => {+  const { page, limit, offset, actions } = usePagination();+  // ... rest of the story implementation+};+