@cashub/ui 0.48.30 → 0.49.0-beta.0

package/src/table/__mock__/data.js

@@ -0,0 +1,456 @@
+const data = [
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+      { name: 'tag3', tag_id: 1003 },
+      { name: 'tag4', tag_id: 1004 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+      { name: 'tag3', tag_id: 1003 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [{ name: 'tag1', tag_id: 1001 }],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+      { name: 'tag3', tag_id: 1003 },
+      { name: 'tag4', tag_id: 1004 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+      { name: 'tag3', tag_id: 1003 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [{ name: 'tag1', tag_id: 1001 }],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+      { name: 'tag3', tag_id: 1003 },
+      { name: 'tag4', tag_id: 1004 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+      { name: 'tag3', tag_id: 1003 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [{ name: 'tag1', tag_id: 1001 }],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+      { name: 'tag3', tag_id: 1003 },
+      { name: 'tag4', tag_id: 1004 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+      { name: 'tag3', tag_id: 1003 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [{ name: 'tag1', tag_id: 1001 }],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+      { name: 'tag3', tag_id: 1003 },
+      { name: 'tag4', tag_id: 1004 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+      { name: 'tag3', tag_id: 1003 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [{ name: 'tag1', tag_id: 1001 }],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+      { name: 'tag3', tag_id: 1003 },
+      { name: 'tag4', tag_id: 1004 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+      { name: 'tag3', tag_id: 1003 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [{ name: 'tag1', tag_id: 1001 }],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+      { name: 'tag3', tag_id: 1003 },
+      { name: 'tag4', tag_id: 1004 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+      { name: 'tag3', tag_id: 1003 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+    ],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [{ name: 'tag1', tag_id: 1001 }],
+  },
+  {
+    logoUrl:
+      'http://localhost:10084/cashub/images/2022/04/20/9qxPfgv13Vd7HnDJVmFLOFocO4mb2CFMmQfXzo2L.png',
+    name: 'User A',
+    contact: 'Admin A',
+    contactEmail: 'user-a@mail.com',
+    active: 1,
+    relatedActive: 1,
+    telephone: '0912345678',
+    description: '',
+    tag: [
+      { name: 'tag1', tag_id: 1001 },
+      { name: 'tag2', tag_id: 1002 },
+      { name: 'tag3', tag_id: 1003 },
+      { name: 'tag4', tag_id: 1004 },
+    ],
+  },
+];
+
+export default data;

package/src/table/__stories__/GridTable.stories.js

@@ -0,0 +1,129 @@
+import { useState, useEffect } from 'react';
+import GridTable from '../GridTable';
+import columns from '../__mock__/columns';
+import data from '../__mock__/data';
+
+const metadata = {
+  title: 'Table / GridTable',
+  component: GridTable,
+  argTypes: {
+    columns: {
+      description: '',
+    },
+    data: {
+      description: '',
+    },
+    currentPage: {
+      description: '',
+    },
+    limit: {
+      description: '',
+    },
+    total: {
+      description: '',
+    },
+    onPageChange: {
+      description: '',
+    },
+    onLimitChange: {
+      description: '',
+    },
+    sortColumn: {
+      description: '',
+    },
+    sortType: {
+      description: '',
+    },
+    onSortChange: {
+      description: '',
+    },
+    backgroundReverse: {
+      description: '',
+    },
+    translation: {
+      description: '',
+    },
+  },
+};
+
+const Default = (args) => {
+  const { onPageChange, onLimitChange, onSortChange, ...restArgs } = args;
+  const [page, setPage] = useState(args.currentPage);
+  const [limit, setLimit] = useState(args.limit);
+  const [currentListData, setCurrentListData] = useState(data);
+  const [sort_Column, setSort_Column] = useState(args.sortColumn);
+  const [sort_Type, setSort_Type] = useState(args.sortType);
+
+  const handlePageChange = (page) => {
+    setPage(page);
+    onPageChange(page);
+  };
+
+  const handleLimitChange = (limit) => {
+    setPage(1);
+    setLimit(limit);
+    onLimitChange(limit);
+  };
+
+  const handleSortChange = (columnName) => {
+    let sortType = null;
+    if (columnName === sort_Column) {
+      sortType = sort_Type === 'asc' ? 'desc' : 'asc';
+    }
+    setPage(1);
+    setSort_Column(columnName);
+    setSort_Type(sortType ? sortType : sort_Type);
+    onSortChange(columnName);
+  };
+
+  useEffect(() => {
+    const start = (page - 1) * limit;
+    const end = page * limit;
+    const tmpListData = data.slice(start, end);
+
+    setCurrentListData(tmpListData);
+  }, [page, limit]);
+
+  useEffect(() => {
+    setPage(args.currentPage);
+  }, [args.currentPage]);
+
+  useEffect(() => {
+    setLimit(args.limit);
+  }, [args.limit]);
+
+  useEffect(() => {
+    setSort_Column(args.sortColumn);
+    setSort_Type(args.sortType);
+  }, [args.sortColumn, args.sortType]);
+
+  return (
+    <GridTable
+      {...restArgs}
+      columns={columns}
+      data={currentListData}
+      currentPage={page}
+      limit={limit}
+      onPageChange={handlePageChange}
+      onLimitChange={handleLimitChange}
+      onSortChange={handleSortChange}
+      sortColumn={sort_Column}
+      sortType={sort_Type}
+    />
+  );
+};
+Default.args = {
+  currentPage: 1,
+  limit: 10,
+  total: 30,
+  sortColumn: 'name',
+  sortType: 'asc',
+  backgroundReverse: false,
+  translation: {
+    info: '顯示 _START_ 到 _END_ 筆, 總共 _TOTAL_ 筆',
+    empty: '列表中無可用數據',
+  },
+};
+
+export default metadata;
+export { Default };

package/src/table/__stories__/ImageBox.stories.js

@@ -0,0 +1,27 @@
+import ImageBox from '../ImageBox';
+import Picture from '../../assets/images/default-user.jpg';
+
+const metadata = {
+  title: 'Table/ImageBox',
+  component: ImageBox,
+  decorators: [
+    (Story) => (
+      <div style={{ color: '#ffffff' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+const Template = (args) => {
+  return <ImageBox {...args} />;
+};
+
+const Default = Template.bind({});
+Default.args = {
+  text: 'avatar',
+  image: [`${Picture}`],
+};
+
+export default metadata;
+export { Default };