github.com/turbot/steampipe@v1.7.0-rc.0.0.20240517123944-7cef272d4458/ui/dashboard/src/components/dashboards/Table/index.stories.tsx (about)

     1  import Table from "./index";
     2  import { PanelStoryDecorator } from "../../../utils/storybook";
     3  import { ComponentMeta, ComponentStory } from "@storybook/react";
     4  
     5  export default {
     6    title: "Primitives/Table",
     7    component: Table,
     8  } as ComponentMeta<typeof Table>;
     9  
    10  const Template: ComponentStory<typeof Table> = (args) => (
    11    <PanelStoryDecorator definition={args} panelType="table" />
    12  );
    13  
    14  export const Loading = Template.bind({});
    15  Loading.args = {
    16    // @ts-ignore
    17    data: null,
    18  };
    19  
    20  export const NoData = Template.bind({});
    21  NoData.args = {
    22    // @ts-ignore
    23    data: {
    24      columns: [
    25        { name: "Region", data_type: "TEXT" },
    26        { name: "Resource Count", data_type: "INT8" },
    27      ],
    28    },
    29  };
    30  
    31  export const Basic = Template.bind({});
    32  Basic.args = {
    33    data: {
    34      columns: [
    35        { name: "Region", data_type: "TEXT" },
    36        { name: "Resource Count", data_type: "INT8" },
    37        { name: "Encrypted", data_type: "BOOL" },
    38        { name: "Info", data_type: "JSONB" },
    39      ],
    40      rows: [
    41        {
    42          Region: "us-east-1",
    43          "Resource Count": 246,
    44          Encrypted: true,
    45          Info: null,
    46        },
    47        {
    48          Region: "us-east-2",
    49          "Resource Count": 146,
    50          Encrypted: false,
    51          Info: { foo: "bar" },
    52        },
    53        {
    54          Region: "us-west-1",
    55          "Resource Count": 57,
    56          Encrypted: true,
    57          Info: { bar: "foo" },
    58        },
    59        {
    60          Region: "eu-west-1",
    61          "Resource Count": 290,
    62          Encrypted: false,
    63          Info: { foobar: "barfoo" },
    64        },
    65        {
    66          Region: "eu-west-2",
    67          "Resource Count": 198,
    68          Encrypted: true,
    69          Info: null,
    70        },
    71      ],
    72    },
    73  };
    74  
    75  export const Nulls = Template.bind({});
    76  Nulls.args = {
    77    data: {
    78      columns: [
    79        { name: "Color", data_type: "TEXT" },
    80        { name: "Value", data_type: "INT8" },
    81      ],
    82      rows: [
    83        { Color: "red", Value: 10 },
    84        { Color: "orange", Value: null },
    85        { Color: "yellow", Value: 5 },
    86        { Color: "green", Value: null },
    87        { Color: "blue", Value: 2 },
    88        { Color: "indigo", Value: null },
    89        { Color: "violet", Value: 0 },
    90      ],
    91    },
    92  };
    93  
    94  export const HideColumn = Template.bind({});
    95  HideColumn.args = {
    96    data: {
    97      columns: [
    98        { name: "Region", data_type: "TEXT" },
    99        { name: "Resource Count", data_type: "INT8" },
   100        { name: "Encrypted", data_type: "BOOL" },
   101        { name: "Info", data_type: "JSONB" },
   102      ],
   103      rows: [
   104        {
   105          Region: "us-east-1",
   106          "Resource Count": 246,
   107          Encrypted: true,
   108          Info: null,
   109        },
   110        {
   111          Region: "us-east-2",
   112          "Resource Count": 146,
   113          Encrypted: false,
   114          Info: { foo: "bar" },
   115        },
   116        {
   117          Region: "us-west-1",
   118          "Resource Count": 57,
   119          Encrypted: true,
   120          Info: { bar: "foo" },
   121        },
   122        {
   123          Region: "eu-west-1",
   124          "Resource Count": 290,
   125          Encrypted: false,
   126          Info: { foobar: "barfoo" },
   127        },
   128        {
   129          Region: "eu-west-2",
   130          "Resource Count": 198,
   131          Encrypted: true,
   132          Info: null,
   133        },
   134      ],
   135    },
   136    properties: {
   137      columns: {
   138        Info: {
   139          display: "none",
   140        },
   141      },
   142    },
   143  };
   144  
   145  export const WrapColumn = Template.bind({});
   146  WrapColumn.args = {
   147    data: {
   148      columns: [
   149        { name: "Region", data_type: "TEXT" },
   150        { name: "Resource Count", data_type: "INT8" },
   151        { name: "Encrypted", data_type: "BOOL" },
   152        { name: "Long", data_type: "TEXT" },
   153      ],
   154      rows: [
   155        {
   156          Region: "us-east-1",
   157          "Resource Count": 246,
   158          Encrypted: true,
   159          Long: "Some really, really, really, really, really, really, really, really, really, really, long text with the occasional realllllllllllllllllly, realllllllllllllllllly, realllllllllllllllllly, realllllllllllllllllly long word that we want to wrap in a better way.",
   160        },
   161        {
   162          Region: "us-east-2",
   163          "Resource Count": 146,
   164          Encrypted: false,
   165          Long: "Some really, really, really, really, really, really, really, really, really, really, long text with the occasional realllllllllllllllllly, realllllllllllllllllly, realllllllllllllllllly, realllllllllllllllllly long word that we want to wrap in a better way.",
   166        },
   167        {
   168          Region: "us-west-1",
   169          "Resource Count": 57,
   170          Encrypted: true,
   171          Long: "Some really, really, really, really, really, really, really, really, really, really, long text with the occasional realllllllllllllllllly, realllllllllllllllllly, realllllllllllllllllly, realllllllllllllllllly long word that we want to wrap in a better way.",
   172        },
   173        {
   174          Region: "eu-west-1",
   175          "Resource Count": 290,
   176          Encrypted: false,
   177          Long: "Some really, really, really, really, really, really, really, really, really, really, long text with the occasional realllllllllllllllllly, realllllllllllllllllly, realllllllllllllllllly, realllllllllllllllllly long word that we want to wrap in a better way.",
   178        },
   179        {
   180          Region: "eu-west-2",
   181          "Resource Count": 198,
   182          Encrypted: true,
   183          Long: "Some really, really, really, really, really, really, really, really, really, really, long text with the occasional realllllllllllllllllly, realllllllllllllllllly, realllllllllllllllllly, realllllllllllllllllly long word that we want to wrap in a better way.",
   184        },
   185      ],
   186    },
   187    properties: {
   188      columns: {
   189        Long: {
   190          wrap: "all",
   191        },
   192      },
   193    },
   194  };
   195  
   196  export const LineView = Template.bind({});
   197  LineView.args = {
   198    display_type: "line",
   199    data: {
   200      columns: [
   201        { name: "Region", data_type: "TEXT" },
   202        { name: "Resource Count", data_type: "INT8" },
   203        { name: "Encrypted", data_type: "BOOL" },
   204        { name: "Info", data_type: "JSONB" },
   205      ],
   206      rows: [
   207        {
   208          Region: "us-east-1",
   209          "Resource Count": 246,
   210          Encrypted: true,
   211          Info: null,
   212        },
   213      ],
   214    },
   215  };
   216  
   217  export const LineViewMultipleRows = Template.bind({});
   218  LineViewMultipleRows.args = {
   219    display_type: "line",
   220    data: {
   221      columns: [
   222        { name: "Region", data_type: "TEXT" },
   223        { name: "Resource Count", data_type: "INT8" },
   224        { name: "Encrypted", data_type: "BOOL" },
   225        { name: "Info", data_type: "JSONB" },
   226      ],
   227      rows: [
   228        {
   229          Region: "us-east-1",
   230          "Resource Count": 246,
   231          Encrypted: true,
   232          Info: null,
   233        },
   234        {
   235          Region: "us-east-2",
   236          "Resource Count": 146,
   237          Encrypted: false,
   238          Info: { foo: "bar" },
   239        },
   240      ],
   241    },
   242  };
   243  
   244  export const LineViewHideColumn = Template.bind({});
   245  LineViewHideColumn.args = {
   246    display_type: "line",
   247    data: {
   248      columns: [
   249        { name: "Region", data_type: "TEXT" },
   250        { name: "Resource Count", data_type: "INT8" },
   251        { name: "Encrypted", data_type: "BOOL" },
   252        { name: "Info", data_type: "JSONB" },
   253      ],
   254      rows: [
   255        {
   256          Region: "us-east-1",
   257          "Resource Count": 246,
   258          Encrypted: true,
   259          Info: null,
   260        },
   261      ],
   262    },
   263    properties: {
   264      columns: {
   265        Info: {
   266          display: "none",
   267        },
   268      },
   269    },
   270  };
   271  
   272  export const LineViewWrapColumn = Template.bind({});
   273  LineViewWrapColumn.args = {
   274    display_type: "line",
   275    data: {
   276      columns: [
   277        { name: "Region", data_type: "TEXT" },
   278        { name: "Resource Count", data_type: "INT8" },
   279        { name: "Encrypted", data_type: "BOOL" },
   280        { name: "Long", data_type: "TEXT" },
   281      ],
   282      rows: [
   283        {
   284          Region: "us-east-1",
   285          "Resource Count": 246,
   286          Encrypted: true,
   287          Long: "Some really, really, really, really, really, really, really, really, really, really, long text with the occasional realllllllllllllllllly, realllllllllllllllllly, realllllllllllllllllly, realllllllllllllllllly long word that we want to wrap in a better way.",
   288        },
   289      ],
   290    },
   291    properties: {
   292      columns: {
   293        Long: {
   294          wrap: "all",
   295        },
   296      },
   297    },
   298  };