orcs-design-system/es/components/Table/Table.stories.js

TeamForm's Design System, aka: ORCS

import React, { useMemo } from "react";
import Table from ".";
import Card from "../Card/index";
import Box from "../Box";
import Badge from "../Badge";
import PropTypes from "prop-types";
import { jsx as _jsx } from "react/jsx-runtime";
export default {
  title: "Components/Table",
  component: Table
};
export const Default = () => {
  const columns = useMemo(() => [{
    accessorKey: "name",
    header: "Name",
    enableHiding: false
  }, {
    accessorFn: originalRow => parseInt(originalRow.age),
    id: "age",
    header: "Age",
    Header: /*#__PURE__*/_jsx("i", {
      children: "Age"
    }),
    Cell: Cell
  }], []);
  const data = useMemo(() => [{
    name: "John",
    age: 30
  }, {
    name: "Sara",
    age: 25
  }], []);
  return /*#__PURE__*/_jsx(Card, {
    children: /*#__PURE__*/_jsx(Table, {
      columns: columns,
      data: data
    })
  });
};
function Cell(_ref) {
  let {
    cell
  } = _ref;
  return /*#__PURE__*/_jsx("i", {
    children: cell.getValue().toLocaleString()
  });
}
Cell.propTypes = {
  cell: PropTypes.shape({
    getValue: PropTypes.func.isRequired
  }).isRequired
};
const types = {
  strat_outcome: {
    variant: "primaryDark",
    label: "Strategic Outcome"
  },
  okr: {
    variant: "primary",
    label: "Objective Key & result"
  },
  epic: {
    variant: "secondary",
    label: "Epic"
  },
  work_item: {
    variant: "warning",
    label: "Work Item"
  }
};
export const NestedTreeStructure = () => {
  const columns = useMemo(() => [{
    accessorKey: "name",
    id: "name",
    header: "Strategy"
  }, {
    accessorKey: "workForce",
    id: "workForce",
    header: "Work force"
  }, {
    accessorKey: "type",
    id: "type",
    header: "Type",
    Cell: TypeCell
  }], []);
  const data = useMemo(() => [{
    name: "Never gonna give you up",
    workForce: 391,
    type: "strat_outcome",
    children: [{
      name: "Never gonna let you down",
      workForce: 25,
      type: "okr",
      children: [{
        name: "TPP-441 Never gonna run around and desert you",
        workForce: 30,
        type: "epic",
        children: [{
          name: "TPP-684 Never gonna make you cry",
          workForce: 25,
          type: "work_item"
        }, {
          name: "TPP-685 Never gonna say goodbye",
          workForce: 25,
          type: "work_item"
        }, {
          name: "TPP-685 Never gonna tell a lie and hurt you",
          workForce: 25,
          type: "work_item"
        }]
      }]
    }]
  }, {
    name: "Grow customer base by 5 mill",
    workForce: 391,
    type: "strat_outcome",
    children: [{
      name: "Launch our revolutionary HPLSF module",
      workForce: 25,
      type: "okr",
      children: [{
        name: "TPP-441 New space flight model test",
        workForce: 30,
        type: "epic",
        children: [{
          name: "TPP-684 Infra benchmarking",
          workForce: 25,
          type: "work_item"
        }]
      }]
    }]
  }], []);
  return /*#__PURE__*/_jsx(Card, {
    children: /*#__PURE__*/_jsx(Table, {
      columns: columns,
      data: data,
      enableExpanding: true,
      enableExpandAll: true,
      muiTableBodyCellProps: _ref2 => {
        let {
          row
        } = _ref2;
        return {
          sx: () => ({
            color: row.original.type === "work_item" ? "grey" : "",
            fontWeight: row.depth === 0 ? 600 : row.depth === 1 ? 500 : undefined
          })
        };
      }
    })
  });
};
function TypeCell(_ref3) {
  let {
    cell
  } = _ref3;
  const type = types[cell.getValue()];
  return /*#__PURE__*/_jsx(Box, {
    children: /*#__PURE__*/_jsx(Badge, {
      variant: type === null || type === void 0 ? void 0 : type.variant,
      children: type === null || type === void 0 ? void 0 : type.label
    })
  });
}
TypeCell.propTypes = {
  cell: PropTypes.shape({
    getValue: PropTypes.func.isRequired
  }).isRequired
};
Default.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Default"
};
NestedTreeStructure.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "NestedTreeStructure"
};