@scality/core-ui 0.115.0

package/stories/tablev2.stories.tsx

@@ -0,0 +1,539 @@
+import React, { useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import {
+  Column,
+  EmptyCell,
+  Table,
+} from '../src/lib/components/tablev2/Tablev2.component';
+import { Wrapper, Title } from './common';
+import { BrowserRouter as Router, useLocation } from 'react-router-dom';
+import { CellProps, Row } from 'react-table';
+import { Box, Button } from '../src/lib/next';
+import styled from 'styled-components';
+
+const Flex = styled(Box)`
+  display: flex;
+`;
+
+const info = {
+  title: 'Components/Data Display/Table',
+  component: Table,
+};
+
+export default info;
+
+const data: Entry[] = [
+  {
+    id: 1,
+    firstName: 'Sotiria-long-long-long-long-long',
+    lastName: 'Agathangelou',
+    age: undefined,
+    health: 'healthy',
+  },
+  {
+    id: 2,
+    firstName: 'Stefania',
+    lastName: 'Evgenios',
+    age: 27,
+    health: 'warning',
+  },
+  {
+    id: 3,
+    firstName: 'Yohann',
+    lastName: 'Rodolph',
+    age: 27,
+    health: 'critical',
+  },
+  {
+    id: 4,
+    firstName: 'Ninette',
+    lastName: 'Caroline',
+    age: 31,
+    health: 'healthy',
+  },
+];
+
+type Entry = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  age?: number;
+  health: string;
+};
+
+export const SimpleContentTable = {
+  render: ({}) => {
+    const columns: Column<Entry>[] = [
+      {
+        Header: 'First Name',
+        accessor: 'firstName',
+        cellStyle: {
+          textAlign: 'left',
+        },
+        Cell: ({ value }) => {
+          if (value) return <>{value}</>;
+          return <EmptyCell />;
+        },
+      },
+      {
+        Header: 'Last Name',
+        accessor: 'lastName',
+        cellStyle: {
+          textAlign: 'left',
+        },
+        // disable the sorting on this column
+        disableSortBy: true,
+      },
+      {
+        Header: 'Age',
+        accessor: 'age',
+        cellStyle: {
+          width: '50px',
+          textAlign: 'left',
+        },
+      },
+      {
+        Header: 'Health',
+        accessor: 'health',
+        sortType: 'health',
+        cellStyle: {
+          textAlign: 'left',
+        },
+      },
+    ];
+
+    const getRowId = (row: Entry, relativeIndex: number) => {
+      return row.lastName + ' ' + row.firstName;
+    };
+
+    const TableWithQueryParams = ({}) => {
+      const location = useLocation();
+      return (
+        <>
+          <span
+            style={{
+              color: 'white',
+            }}
+          >
+            {location.search}
+          </span>
+          <Table columns={columns} data={data} defaultSortingKey={'health'}>
+            <div
+              style={{
+                margin: '16px 0',
+              }}
+            >
+              <Table.SearchWithQueryParams
+                displayedName={{
+                  singular: 'person',
+                  plural: 'persons',
+                }}
+              />
+            </div>
+            <Table.SingleSelectableContent
+              rowHeight="h40"
+              separationLineVariant="backgroundLevel3"
+              backgroundVariant="backgroundLevel1"
+              children={(Rows) => {
+                return <>{Rows}</>;
+              }}
+            ></Table.SingleSelectableContent>
+          </Table>
+        </>
+      );
+    };
+
+    return (
+      <Wrapper>
+        <Title>Non Selectable Table</Title>
+        <div
+          style={{
+            height: '300px',
+            paddingTop: '20px',
+          }}
+        >
+          <Table columns={columns} data={data} defaultSortingKey={'health'}>
+            <Table.SingleSelectableContent
+              rowHeight="h32"
+              separationLineVariant="backgroundLevel3"
+              backgroundVariant="backgroundLevel1"
+            />
+          </Table>
+        </div>
+        <Title>Single Selectable Table</Title>
+        <div
+          style={{
+            height: '300px',
+            paddingTop: '20px',
+          }}
+        >
+          <Table
+            columns={columns}
+            data={data}
+            defaultSortingKey={'health'}
+            getRowId={getRowId}
+          >
+            <Table.SingleSelectableContent
+              rowHeight="h40"
+              separationLineVariant="backgroundLevel3"
+              backgroundVariant="backgroundLevel1"
+              selectedId={'Rodolph Yohann'}
+              onRowSelected={action('Table Row Clicked')}
+            />
+          </Table>
+        </div>
+        <Title>Table with Search</Title>
+        <div
+          style={{
+            height: '300px',
+            paddingTop: '20px',
+          }}
+        >
+          <Router>
+            <TableWithQueryParams />
+          </Router>
+        </div>
+        <Title>Empty table</Title>
+        <div
+          style={{
+            height: '300px',
+            paddingTop: '20px',
+          }}
+        >
+          <Table
+            columns={columns}
+            data={[]}
+            defaultSortingKey={'health'}
+            getRowId={getRowId}
+          >
+            <Table.SingleSelectableContent
+              rowHeight="h40"
+              separationLineVariant="backgroundLevel3"
+              backgroundVariant="backgroundLevel1"
+              onRowSelected={action('Table Row Clicked')}
+            />
+          </Table>
+        </div>
+        <Title>MultiSelect</Title>
+        <div
+          style={{
+            height: '300px',
+            paddingTop: '20px',
+          }}
+        >
+          <Table
+            columns={columns}
+            data={data}
+            defaultSortingKey={'health'}
+            getRowId={getRowId}
+          >
+            <Table.MultiSelectableContent
+              rowHeight="h40"
+              separationLineVariant="backgroundLevel3"
+              backgroundVariant="backgroundLevel1"
+              onMultiSelectionChanged={(rows) => {
+                console.log('Table.MultiSelectableContent selected row', rows);
+              }}
+            />
+          </Table>
+        </div>
+      </Wrapper>
+    );
+  },
+};
+
+export const asyncTable = {
+  render: ({}) => {
+    function DataComponent({
+      data,
+      loading,
+      row,
+    }: {
+      row: Row<Entry>;
+      loading: boolean;
+      data: string;
+    }) {
+      return loading ? (
+        <span>loading ...</span>
+      ) : (
+        <span> {`${row.values.firstName} ${data}`} </span>
+      );
+    }
+
+    function RowAsync({ row }: { row: Row<Entry> }) {
+      const [loading, setLoading] = React.useState(true);
+      const [data, setData] = React.useState('');
+      React.useEffect(() => {
+        const timer = setTimeout(() => {
+          setData('loaded async');
+          setLoading(false);
+        }, 1000);
+        return () => {
+          clearTimeout(timer);
+        };
+      }, []);
+      return <DataComponent row={row} loading={loading} data={data} />;
+    }
+
+    const renderRowSubComponent = React.useCallback(
+      ({ row, ...rest }: CellProps<Entry>) => {
+        return <RowAsync row={row} />;
+      },
+      [],
+    );
+    const columnAsync: Column<Entry>[] = [
+      {
+        Header: 'First Name',
+        accessor: 'firstName',
+        cellStyle: {
+          textAlign: 'left',
+        },
+        Cell: renderRowSubComponent,
+      },
+      {
+        Header: 'Last Name',
+        accessor: 'lastName',
+        cellStyle: {
+          textAlign: 'left',
+        },
+      },
+      {
+        Header: 'Age',
+        accessor: 'age',
+        cellStyle: {
+          width: '50px',
+          textAlign: 'left',
+        },
+      },
+      {
+        Header: 'Health',
+        accessor: 'health',
+        sortType: 'health',
+        cellStyle: {
+          textAlign: 'left',
+        },
+      },
+    ];
+
+    return (
+      <Wrapper>
+        <Title>async cell Table</Title>
+        <div
+          style={{
+            height: '300px',
+            paddingTop: '20px',
+          }}
+        >
+          <Table columns={columnAsync} data={data} defaultSortingKey={'health'}>
+            <Table.SingleSelectableContent
+              rowHeight="h40"
+              separationLineVariant="backgroundLevel3"
+              backgroundVariant="backgroundLevel1"
+              selectedId={'Rodolph Yohann'}
+              onRowSelected={action('Table Row Clicked')}
+            />
+          </Table>
+        </div>
+      </Wrapper>
+    );
+  },
+};
+export const OnBottomCallback = {
+  render: ({}) => {
+    const columns: Column<{ index: number; value: number }>[] = [
+      {
+        Header: 'value',
+        accessor: 'value',
+        cellStyle: {
+          textAlign: 'left',
+        },
+      },
+    ];
+
+    const createData = (indexStart = 0) => {
+      const data: { index: number; value: number }[] = [];
+
+      for (let i = 0; i < 100; i++) {
+        data.push({
+          index: indexStart + i,
+          value: Math.floor(Math.random() * 1000),
+        });
+      }
+
+      return data;
+    };
+
+    const [randomData, setRandomData] = useState(createData());
+
+    const onBottom = () => {
+      action('onBottom');
+      setRandomData([...randomData, ...createData(randomData.length)]);
+    };
+
+    return (
+      <Wrapper>
+        <Title>async cell Table</Title>
+        <div
+          style={{
+            height: '300px',
+            paddingTop: '20px',
+          }}
+        >
+          <Table
+            columns={columns}
+            data={randomData}
+            onBottom={onBottom}
+            onBottomOffset={5}
+            defaultSortingKey={'value'}
+          >
+            <Table.SingleSelectableContent
+              rowHeight="h40"
+              separationLineVariant="backgroundLevel3"
+              backgroundVariant="backgroundLevel1"
+            />
+          </Table>
+        </div>
+      </Wrapper>
+    );
+  },
+};
+
+export const MultiTable = {
+  render: ({}) => {
+    const [data1, setData1] = useState([
+      {
+        name: 'test',
+        volume: 1,
+        capacity: '1Gi',
+      },
+      {
+        name: 'test',
+        volume: 1,
+        capacity: '1Gi',
+      },
+      {
+        name: 'test',
+        volume: 1,
+        capacity: '1Gi',
+      },
+    ]);
+
+    const [data2, setData2] = useState([
+      {
+        name: 'test',
+        volume: 1,
+        capacity: '1Gi',
+      },
+      {
+        name: 'test',
+        volume: 1,
+        capacity: '1Gi',
+      },
+      {
+        name: 'test',
+        volume: 1,
+        capacity: '1Gi',
+      },
+    ]);
+    const columns2: Column<(typeof data2)[number]>[] = [
+      {
+        Header: 'Name',
+        accessor: 'name',
+      },
+      {
+        Header: 'Volume',
+        accessor: 'volume',
+      },
+      {
+        Header: 'Capacity',
+        accessor: 'capacity',
+      },
+    ];
+
+    const demo = () => {
+      setData1([
+        {
+          name: 'test',
+          volume: 1,
+          capacity: '1Gi',
+        },
+        {
+          name: 'test',
+          volume: 1,
+          capacity: '1Gi',
+        },
+      ]);
+
+      setData2([
+        {
+          name: 'test',
+          volume: 1,
+          capacity: '2Gi',
+        },
+        {
+          name: 'test',
+          volume: 1,
+          capacity: '1Gi',
+        },
+      ]);
+    };
+
+    return (
+      <Wrapper>
+        <Title>Several Multiselect</Title>
+        <Flex justifyContent="center" gap="2rem">
+          <Box width="500px" height="200px">
+            <Table
+              columns={columns2}
+              data={data1}
+              defaultSortingKey="name"
+              initiallySelectedRowsIds={new Set([0, 2])}
+            >
+              <Table.MultiSelectableContent
+                onMultiSelectionChanged={(rows) => {
+                  console.log(
+                    'Table.MultiSelectableContent selected row',
+                    rows,
+                  );
+                }}
+              />
+            </Table>
+          </Box>
+          <Box
+            display="flex"
+            flexDirection="column"
+            justifyContent="center"
+            gap="1rem"
+          >
+            <Button
+              variant="secondary"
+              label=">"
+              onClick={() => {
+                demo();
+              }}
+            />
+            <Button
+              variant="secondary"
+              label="<"
+              onClick={() => {
+                demo();
+              }}
+            />
+          </Box>
+          <Box width="500px" height="200px">
+            <Table columns={columns2} data={data2} defaultSortingKey={'health'}>
+              <Table.MultiSelectableContent
+                onMultiSelectionChanged={(rows) => {
+                  console.log(
+                    'Table.MultiSelectableContent selected row',
+                    rows,
+                  );
+                }}
+              />
+            </Table>
+          </Box>
+        </Flex>
+      </Wrapper>
+    );
+  },
+};

package/stories/tabsv2.stories.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import { TextBadge } from '../src/lib/components/textbadge/TextBadge.component';
+import { Tabs, Tab } from '../src/lib/components/tabsv2/Tabsv2.component';
+import { Wrapper, Title } from './common';
+import { BrowserRouter } from 'react-router-dom';
+import { brand, spacing } from '../src/lib/style/theme';
+import styled from 'styled-components';
+import { useLocation } from 'react-router';
+const Content = styled.div`
+  padding: ${spacing.sp24};
+  color: ${(props) => props.theme.textPrimary};
+`;
+export default {
+  title: 'Components/Navigation/Tabs',
+  component: Tabs,
+  decorators: [(story) => <BrowserRouter>{story()}</BrowserRouter>],
+  argTypes: {
+    activeTabSeparator: {
+      control: {
+        type: 'color',
+      },
+    },
+  },
+};
+
+const messages = [
+  'Really long',
+  'Long',
+  'Really long long long long long',
+  'Hello',
+  'Metalk8s',
+  'ZENKO-UI',
+];
+
+const generateTab = (n = 10, selectedIndex = 0) => {
+  return Array.from(new Array(n)).map((_, index) => (
+    <Tab
+      key={index}
+      path={index === selectedIndex ? '/iframe.html' : `/path${index}`}
+      exact={index !== 0}
+      label={`Tab ${index}${
+        messages.length > index ? ` ${messages[index]}` : ''
+      }`}
+      textBadge={index % 3 === 0 ? <TextBadge text="0" /> : undefined}
+    >
+      <Content>Content {index}</Content>
+    </Tab>
+  ));
+};
+
+const customTabStyle = {
+  activeTabColor: brand.selectedActive,
+  activeTabSeparator: brand.statusHealthy,
+  tabLineColor: brand.backgroundLevel3,
+  inactiveTabColor: brand.highlight,
+  tabContentColor: brand.buttonPrimary,
+  separatorColor: brand.statusCritical,
+  tabHoverColor: brand.statusHealthy,
+};
+
+const DefaultTabsDetails = (props) => {
+  const location = useLocation();
+  const query = new URLSearchParams(location.search);
+
+  const details = () => {
+    const tabName = query.get('tab');
+
+    if (tabName === 'group') {
+      return <Content>Group Content</Content>;
+    } else if (tabName === 'role @') {
+      return <Content>Roles Content</Content>;
+    } else if (tabName === 'policies') {
+      return <Content>Policies Content</Content>;
+    }
+
+    return <Content>Some Content</Content>;
+  };
+
+  return (
+    <>
+      <Title>
+        {location.pathname} / {location.search}
+      </Title>
+      <Tabs {...props}>
+        <Tab path="/iframe.html" label="Users">
+          <Content>Users Content</Content>
+        </Tab>
+        <Tab
+          path="/path1"
+          query={{
+            tab: 'group',
+          }}
+          label="Groups"
+        >
+          {details()}
+        </Tab>
+        <Tab
+          path="/path1"
+          query={{
+            tab: 'role @',
+          }}
+          label="Roles"
+        >
+          {details()}
+        </Tab>
+        <Tab
+          path="/path1"
+          query={{
+            tab: 'policies',
+          }}
+          label="Policies"
+        >
+          {details()}
+        </Tab>
+        <Tab path="/path4" label="Storage Location">
+          <Content>Storage Location Content</Content>
+        </Tab>
+        <Tab path="/path5" label="Properties">
+          <Content>Properties Content</Content>
+        </Tab>
+      </Tabs>
+    </>
+  );
+};
+
+export const Default = {
+  render: (args) => <DefaultTabsDetails {...args} />,
+};
+
+export const CustomizedTabs = {
+  ...Default,
+  args: { ...customTabStyle },
+};
+
+export const ScrollableTabs = {
+  render: (args) => (
+    <>
+      <Title>Default Tabs - scrollable 10 tabs</Title>
+      <Tabs {...args}>{generateTab(10, 10)}</Tabs>
+      <Title>Default Tabs - scrollable 20 tabs</Title>
+      <Tabs {...args}>{generateTab(20, 10)}</Tabs>
+      <Title>Default Tabs - scrollable 35 tabs</Title>
+      <Tabs {...args}>{generateTab(35, 10)}</Tabs>
+    </>
+  ),
+};
+
+export const WithQueryParams = {
+  render: (args) => {
+    const obj = { search: 'test' };
+    return (
+      <Tabs {...args}>
+        <Tab
+          path={'/path'}
+          label={`Tab 1`}
+          query={{ ...obj, tab: '1' }}
+          textBadge={<TextBadge text="test" />}
+          icon={<i className="fas fa-hat-cowboy" />}
+        >
+          <Content>Tab 1 content</Content>
+        </Tab>
+        <Tab path={'/path'} label={`Tab 2`} query={{ ...obj, tab: '2' }}>
+          <Content>Tab 2 content</Content>
+        </Tab>
+      </Tabs>
+    );
+  },
+};