codex-storage
/
codex-marketplace-ui-components
mirror of https://github.com/codex-storage/codex-marketplace-ui-components.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adjust table story

This commit is contained in:
Arnaud 2024-08-28 10:03:35 +02:00
parent dfde40f3b4
commit 5a24e36519
No known key found for this signature in database
GPG Key ID: 69D6CE281FCAE663
1 changed files with 40 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
stories/Table.stories.tsx
View File

@ -1,14 +1,9 @@
import type { Meta, StoryObj } from "@storybook/react"; import type { Meta, StoryObj } from "@storybook/react";
import { Table } from "../src/components/Table/Table"; import { Table } from "../src/components/Table/Table";
import { DefaultCellRender } from "../src/components/Table/CellRender";
import { ActionCellRender } from "../src/components/Table/ActionCellRender";
import { BreakCellRender } from "../src/components/Table/BreakCellRender";
import "./Table.stories.css"; import "./Table.stories.css";
import { StateCellRender } from "../src/components/Table/StateCellRender"; import { StateCell } from "../src/components/Table/StateCell";
import prettyMilliseconds from "pretty-ms"; import { ActionCell } from "../src/components/Table/ActionCell";
import { DurationCellRender } from "../src/components/Table/DurationCellRender"; import { BreakCell } from "../src/components/Table/BreakCell";
console.info(prettyMilliseconds(1337000000n, { compact: true }));
const meta = { const meta = {
title: "Components/Table", title: "Components/Table",
@ -26,12 +21,16 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = { export const Default: Story = {
args: { args: {
cells: [ cells: [
DefaultCellRender, [
DefaultCellRender, <span>Ox45678FDGHJKLBSA21</span>,
DefaultCellRender, <span>My file</span>,
ActionCellRender("Action", (row) => console.info(row)), <span>Some data</span>,
<ActionCell
action="Action"
onClick={() => console.info("Hello")}
></ActionCell>,
],
], ],
data: [["Ox45678FDGHJKL", "My file", "Some data"]],
headers: ["id", "title", "other", "actions"], headers: ["id", "title", "other", "actions"],
}, },
}; };
@ -40,12 +39,16 @@ export const Scroll: Story = {
args: { args: {
className: "tableSmall", className: "tableSmall",
cells: [ cells: [
DefaultCellRender, [
DefaultCellRender, <span>Ox45678FDGHJKLBSA21</span>,
DefaultCellRender, <span>My file</span>,
ActionCellRender("Action", (row) => console.info(row)), <span>Some data</span>,
<ActionCell
action="Action"
onClick={() => console.info("Hello")}
></ActionCell>,
],
], ],
data: [["Ox45678FDGHJKLBSA21", "My file", "Some data"]],
headers: ["id", "title", "other", "actions"], headers: ["id", "title", "other", "actions"],
}, },
}; };
@ -53,39 +56,34 @@ export const Scroll: Story = {
export const BreakableCell: Story = { export const BreakableCell: Story = {
args: { args: {
cells: [ cells: [
BreakCellRender, [
DefaultCellRender, <BreakCell value="veryverylongvaluetobreak"></BreakCell>,
DefaultCellRender, <span>My file</span>,
ActionCellRender("Action", (row) => console.info(row)), <span>Some data</span>,
<ActionCell
action="Action"
onClick={() => console.info("Hello")}
></ActionCell>,
],
], ],
data: [["veryverylongvaluetobreak", "My file", "Some data"]],
headers: ["break", "title", "other", "actions"], headers: ["break", "title", "other", "actions"],
className: "tableSmall", className: "tableSmall",
}, },
}; };
export const StateCell: Story = { export const State: Story = {
args: { args: {
cells: [ cells: [
DefaultCellRender, [
DefaultCellRender, <BreakCell value="veryverylongvaluetobreak"></BreakCell>,
StateCellRender({ cancelled: "error" }), <span>My file</span>,
ActionCellRender("Action", (row) => console.info(row)), <StateCell type="error" value="cancelled"></StateCell>,
<ActionCell
action="Action"
onClick={() => console.info("Hello")}
></ActionCell>,
],
], ],
data: [["Ox45678FDGHJKL", "My file", "cancelled", "Action"]],
headers: ["id", "title", "state", "actions"], headers: ["id", "title", "state", "actions"],
}, },
}; };
export const DurationCell: Story = {
args: {
cells: [
DefaultCellRender,
DefaultCellRender,
DurationCellRender,
ActionCellRender("Action", (row) => console.info(row)),
],
data: [["Ox45678FDGHJKL", "My file", "3600000", "Action"]],
headers: ["id", "title", "duration", "actions"],
},
};