import {
  Meta,
  Canvas,
  Story,
  ArgsTable,
  SourceState,
} from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Truncate } from "../Truncate";
import { SimpleTable } from "./SimpleTable";

<Meta title="Components/Data/Simple Table" component={SimpleTable} />

<ComponentHeading
  componentName="Simple Table"
  description="Basic HTML table with some opinionated styles"
  sourcePath="src/components/SimpleTable/SimpleTable.tsx"
/>

## Installation

```jsx
import { SimpleTable } from "@conveyorhq/arrow-ds";
```

export const mappingsData = [
  {
    id: "A.12.4.3",
    title: "Administrator and operator logs",
    desc:
      "System administrator and system operator activities shall be reviewed lorem ipsum dolor amet ramps irony synth tattooed flexitarian small batch. Slow-carb wolf tofu hell of organic occupy umami before they sold out literally.",
  },
  {
    id: "A.18.2.1",
    title: "Independent review of information security",
    desc:
      "The organization’s approach to managing information security charcoal polaroid before they sold out cred, disrupt shabby chic mumblecore jean shorts marfa snackwave. Wayfarers PBR&B bespoke, kinfolk plaid fashion axe actually.",
  },
  {
    id: "9.3",
    title: "Management review",
    desc:
      "Top management shall review the organization’s information prism cold-pressed, hell of poutine bicycle rights PBR&B lumbersexual brunch 8-bit raclette vinyl ethical dreamcatcher banh mi. Pitchfork cronut lo-fi street art.",
  },
];

export const nameData = [
  {
    name: "Chas Ballew",
    bio:
      "Before Aptible, Chas served on active duty in the Army for 4 years as a lawyer at the Pentagon, which is where he first learned regulatory law. Prior to that, Chas ran two small dev shops for beer money in high school and college. His dog's name is Dilla.",
  },
  {
    name: "Frank Macreery",
    bio:
      "Prior to Aptible, Frank led engineering teams at Give Real, XGraph (acquired by Clearspring / AddThis), and Artsy. He holds a B.S.E. in Computer Science from Princeton University.",
  },
];

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="SimpleTable">
    <SimpleTable>
      <SimpleTable.Caption>ISO 27001:2013</SimpleTable.Caption>
      <SimpleTable.Body>
        {mappingsData.map((row) => {
          return (
            <SimpleTable.Row key={row.id}>
              <SimpleTable.Cell className="font-medium text-gray-600">
                {row.id}
              </SimpleTable.Cell>
              <SimpleTable.Cell className="font-medium text-gray-800">
                {row.title}
              </SimpleTable.Cell>
              <SimpleTable.Cell>
                <Truncate>{row.desc}</Truncate>
              </SimpleTable.Cell>
            </SimpleTable.Row>
          );
        })}
      </SimpleTable.Body>
    </SimpleTable>
  </Story>
</Canvas>

## API

<ArgsTable of={SimpleTable} />

## Demos

### No heading

<Canvas withSource={SourceState.OPEN}>
  <Story name="No heading">
    <SimpleTable>
      <SimpleTable.Caption>ISO 27001:2013</SimpleTable.Caption>
      <SimpleTable.Body>
        {mappingsData.map((row) => {
          return (
            <SimpleTable.Row key={row.id}>
              <SimpleTable.Cell className="font-medium text-gray-600">
                {row.id}
              </SimpleTable.Cell>
              <SimpleTable.Cell className="font-medium text-gray-800">
                {row.title}
              </SimpleTable.Cell>
              <SimpleTable.Cell>
                <Truncate>{row.desc}</Truncate>
              </SimpleTable.Cell>
            </SimpleTable.Row>
          );
        })}
      </SimpleTable.Body>
    </SimpleTable>
  </Story>
</Canvas>

### With heading and wrapping text

<Canvas withSource={SourceState.OPEN}>
  <Story name="With heading and wrapping text">
    <SimpleTable>
      <SimpleTable.Caption>Aptible Chiefs</SimpleTable.Caption>
      <SimpleTable.Head>
        <SimpleTable.Row>
          <SimpleTable.HeaderCell>Name</SimpleTable.HeaderCell>
          <SimpleTable.HeaderCell>Bio</SimpleTable.HeaderCell>
        </SimpleTable.Row>
      </SimpleTable.Head>
      <SimpleTable.Body>
        {nameData.map((row) => {
          return (
            <SimpleTable.Row key={row.name}>
              <SimpleTable.Cell className="font-medium">
                {row.name}
              </SimpleTable.Cell>
              <SimpleTable.Cell wrapText>{row.bio}</SimpleTable.Cell>
            </SimpleTable.Row>
          );
        })}
      </SimpleTable.Body>
    </SimpleTable>
  </Story>
</Canvas>