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

     1  import Card from "./index";
     2  import { PanelStoryDecorator } from "../../../utils/storybook";
     3  
     4  const story = {
     5    title: "Primitives/Card",
     6    component: Card,
     7  };
     8  
     9  export default story;
    10  
    11  const Template = (args) => (
    12    <PanelStoryDecorator definition={args} panelType="card" />
    13  );
    14  
    15  export const Loading = Template.bind({});
    16  Loading.args = {
    17    data: null,
    18  };
    19  
    20  export const LoadingCustomIcon = Template.bind({});
    21  LoadingCustomIcon.storyName = "Loading (Custom Icon)";
    22  LoadingCustomIcon.args = {
    23    data: null,
    24    properties: { icon: "heroicons-solid:question-mark-circle" },
    25  };
    26  
    27  export const LoadingOK = Template.bind({});
    28  LoadingOK.args = {
    29    data: null,
    30    display_type: "ok",
    31  };
    32  
    33  export const LoadingOKCustomIcon = Template.bind({});
    34  LoadingOKCustomIcon.storyName = "Loading OK (Custom Icon)";
    35  LoadingOKCustomIcon.args = {
    36    data: null,
    37    display_type: "ok",
    38    properties: { icon: "check-circle" },
    39  };
    40  
    41  export const LoadingAlert = Template.bind({});
    42  LoadingAlert.args = {
    43    data: null,
    44    display_type: "alert",
    45  };
    46  
    47  export const LoadingAlertCustomIcon = Template.bind({});
    48  LoadingAlertCustomIcon.storyName = "Loading Alert (Custom Icon)";
    49  LoadingAlertCustomIcon.args = {
    50    data: null,
    51    display_type: "alert",
    52    properties: { icon: "shield-exclamation" },
    53  };
    54  
    55  export const LoadingInfo = Template.bind({});
    56  LoadingInfo.args = {
    57    data: null,
    58    display_type: "info",
    59  };
    60  
    61  export const LoadingInfoCustomIcon = Template.bind({});
    62  LoadingInfoCustomIcon.storyName = "Loading Info (Custom Icon)";
    63  LoadingInfoCustomIcon.args = {
    64    data: null,
    65    display_type: "info",
    66    properties: { icon: "light-bulb" },
    67  };
    68  
    69  export const Error = Template.bind({});
    70  Error.args = {
    71    data: null,
    72    error: "Something went wrong!",
    73  };
    74  
    75  export const Empty = Template.bind({});
    76  Empty.args = {
    77    data: [],
    78  };
    79  
    80  export const EmptyOK = Template.bind({});
    81  EmptyOK.args = {
    82    data: [],
    83    display_type: "ok",
    84  };
    85  
    86  export const EmptyAlert = Template.bind({});
    87  EmptyAlert.args = {
    88    data: [],
    89    display_type: "alert",
    90  };
    91  
    92  export const EmptyInfo = Template.bind({});
    93  EmptyInfo.args = {
    94    data: [],
    95    display_type: "info",
    96  };
    97  
    98  export const StringValue = Template.bind({});
    99  StringValue.args = {
   100    data: {
   101      columns: [{ name: "Label", data_type: "TEXT" }],
   102      rows: [{ Label: "I am not a number" }],
   103    },
   104  };
   105  
   106  export const JSONValue = Template.bind({});
   107  JSONValue.args = {
   108    data: {
   109      columns: [{ name: "Label", data_type: "JSONB" }],
   110      rows: [{ Label: { complex: "object" } }],
   111    },
   112  };
   113  
   114  export const SimpleDataFormat = Template.bind({});
   115  SimpleDataFormat.args = {
   116    data: {
   117      columns: [{ name: "EC2 Instances", data_type: "INT8" }],
   118      rows: [{ "EC2 Instances": 106 }],
   119    },
   120  };
   121  
   122  export const SimpleDataFormatOK = Template.bind({});
   123  SimpleDataFormatOK.args = {
   124    data: {
   125      columns: [{ name: "Encrypted EC2 Instances", data_type: "INT8" }],
   126      rows: [{ "Encrypted EC2 Instances": 5 }],
   127    },
   128    display_type: "ok",
   129  };
   130  
   131  export const SimpleDataFormatOKCustomIcon = Template.bind({});
   132  SimpleDataFormatOKCustomIcon.storyName = "Simple Data Format OK (Custom Icon)";
   133  SimpleDataFormatOKCustomIcon.args = {
   134    data: {
   135      columns: [{ name: "Encrypted EC2 Instances", data_type: "INT8" }],
   136      rows: [{ "Encrypted EC2 Instances": 5 }],
   137    },
   138    display_type: "ok",
   139    properties: { icon: "check-circle" },
   140  };
   141  
   142  export const SimpleDataFormatAlert = Template.bind({});
   143  SimpleDataFormatAlert.args = {
   144    data: {
   145      columns: [{ name: "Public Buckets", data_type: "INT8" }],
   146      rows: [{ "Public Buckets": 5 }],
   147    },
   148    display_type: "alert",
   149  };
   150  
   151  export const SimpleDataFormatAlertCustomIcon = Template.bind({});
   152  SimpleDataFormatAlertCustomIcon.storyName =
   153    "Simple Data Format Alert (Custom Icon)";
   154  SimpleDataFormatAlertCustomIcon.args = {
   155    data: {
   156      columns: [{ name: "Public Buckets", data_type: "INT8" }],
   157      rows: [{ "Public Buckets": 5 }],
   158    },
   159    display_type: "alert",
   160    properties: { icon: "shield-exclamation" },
   161  };
   162  
   163  export const SimpleDataFormatInfo = Template.bind({});
   164  SimpleDataFormatInfo.args = {
   165    data: {
   166      columns: [{ name: "EC2 Instances", data_type: "INT8" }],
   167      rows: [{ "EC2 Instances": 106 }],
   168    },
   169    display_type: "info",
   170  };
   171  
   172  export const SimpleDataFormatInfoCustomIcon = Template.bind({});
   173  SimpleDataFormatInfoCustomIcon.storyName =
   174    "Simple Data Format Info (Custom Icon)";
   175  SimpleDataFormatInfoCustomIcon.args = {
   176    data: {
   177      columns: [{ name: "EC2 Instances", data_type: "INT8" }],
   178      rows: [{ "EC2 Instances": 106 }],
   179    },
   180    display_type: "info",
   181    properties: { icon: "light-bulb" },
   182  };
   183  
   184  export const SimpleDataFormatThousands = Template.bind({});
   185  SimpleDataFormatThousands.storyName = "Simple Data Format (thousands)";
   186  SimpleDataFormatThousands.args = {
   187    data: {
   188      columns: [{ name: "EC2 Instances", data_type: "INT8" }],
   189      rows: [{ "EC2 Instances": 1236 }],
   190    },
   191    display_type: "info",
   192  };
   193  
   194  export const SimpleDataFormatMillions = Template.bind({});
   195  SimpleDataFormatMillions.storyName = "Simple Data Format (millions)";
   196  SimpleDataFormatMillions.args = {
   197    data: {
   198      columns: [{ name: "Log Lines", data_type: "INT8" }],
   199      rows: [{ "Log Lines": 5236174 }],
   200    },
   201    display_type: "info",
   202  };
   203  
   204  export const FormalDataFormat = Template.bind({});
   205  FormalDataFormat.args = {
   206    data: {
   207      columns: [
   208        { name: "label", data_type: "TEXT" },
   209        { name: "value", data_type: "INT8" },
   210      ],
   211      rows: [{ label: "EC2 Instances", value: 106 }],
   212    },
   213  };
   214  
   215  export const FormalDataFormatOK = Template.bind({});
   216  FormalDataFormatOK.args = {
   217    data: {
   218      columns: [
   219        { name: "label", data_type: "TEXT" },
   220        { name: "value", data_type: "INT8" },
   221        { name: "type", data_type: "TEXT" },
   222      ],
   223      rows: [{ label: "Encrypted EC2 Instances", value: 5, type: "ok" }],
   224    },
   225  };
   226  
   227  export const FormalDataFormatOKCustomIcon = Template.bind({});
   228  FormalDataFormatOKCustomIcon.storyName = "Formal Data Format OK (Custom Icon)";
   229  FormalDataFormatOKCustomIcon.args = {
   230    data: {
   231      columns: [
   232        { name: "label", data_type: "TEXT" },
   233        { name: "value", data_type: "INT8" },
   234        { name: "type", data_type: "TEXT" },
   235      ],
   236      rows: [{ label: "Encrypted EC2 Instances", value: 5, type: "ok" }],
   237    },
   238    properties: { icon: "check-circle" },
   239  };
   240  
   241  export const FormalDataFormatOKCustomIconFromSQL = Template.bind({});
   242  FormalDataFormatOKCustomIconFromSQL.storyName =
   243    "Formal Data Format OK (Custom Icon from SQL)";
   244  FormalDataFormatOKCustomIconFromSQL.args = {
   245    data: {
   246      columns: [
   247        { name: "label", data_type: "TEXT" },
   248        { name: "value", data_type: "INT8" },
   249        { name: "type", data_type: "TEXT" },
   250        { name: "icon", data_type: "TEXT" },
   251      ],
   252      rows: [
   253        {
   254          label: "Encrypted EC2 Instances",
   255          value: 5,
   256          type: "ok",
   257          icon: "heroicons-solid:check-circle",
   258        },
   259      ],
   260    },
   261    properties: { icon: "check-circle" },
   262  };
   263  
   264  export const FormalDataFormatAlert = Template.bind({});
   265  FormalDataFormatAlert.args = {
   266    data: {
   267      columns: [
   268        { name: "label", data_type: "TEXT" },
   269        { name: "value", data_type: "INT8" },
   270        { name: "type", data_type: "TEXT" },
   271      ],
   272      rows: [{ label: "Public Buckets", value: 5, type: "alert" }],
   273    },
   274  };
   275  
   276  export const FormalDataFormatAlertCustomIcon = Template.bind({});
   277  FormalDataFormatAlertCustomIcon.storyName =
   278    "Formal Data Format Alert (Custom Icon)";
   279  FormalDataFormatAlertCustomIcon.args = {
   280    data: {
   281      columns: [
   282        { name: "label", data_type: "TEXT" },
   283        { name: "value", data_type: "INT8" },
   284        { name: "type", data_type: "TEXT" },
   285      ],
   286      rows: [{ label: "Public Buckets", value: 5, type: "alert" }],
   287    },
   288    properties: { icon: "shield-exclamation" },
   289  };
   290  
   291  export const FormalDataFormatAlertCustomIconFromSQL = Template.bind({});
   292  FormalDataFormatAlertCustomIconFromSQL.storyName =
   293    "Formal Data Format Alert (Custom Icon from SQL)";
   294  FormalDataFormatAlertCustomIconFromSQL.args = {
   295    data: {
   296      columns: [
   297        { name: "label", data_type: "TEXT" },
   298        { name: "value", data_type: "INT8" },
   299        { name: "type", data_type: "TEXT" },
   300        { name: "icon", data_type: "TEXT" },
   301      ],
   302      rows: [
   303        {
   304          label: "Public Buckets",
   305          value: 5,
   306          type: "alert",
   307          icon: "heroicons-solid:shield-exclamation",
   308        },
   309      ],
   310    },
   311    properties: { icon: "shield-exclamation" },
   312  };
   313  
   314  export const FormalDataFormatInfo = Template.bind({});
   315  FormalDataFormatInfo.args = {
   316    data: {
   317      columns: [
   318        { name: "label", data_type: "TEXT" },
   319        { name: "value", data_type: "INT8" },
   320        { name: "type", data_type: "TEXT" },
   321      ],
   322      rows: [{ label: "EC2 Instances", value: 106, type: "info" }],
   323    },
   324  };
   325  
   326  export const FormalDataFormatInfoCustomIcon = Template.bind({});
   327  FormalDataFormatInfoCustomIcon.storyName =
   328    "Formal Data Format Info (Custom Icon)";
   329  FormalDataFormatInfoCustomIcon.args = {
   330    data: {
   331      columns: [
   332        { name: "label", data_type: "TEXT" },
   333        { name: "value", data_type: "INT8" },
   334        { name: "type", data_type: "TEXT" },
   335      ],
   336      rows: [{ label: "EC2 Instances", value: 106, type: "info" }],
   337    },
   338    properties: { icon: "light-bulb" },
   339  };
   340  
   341  export const FormalDataFormatInfoCustomIconFromSQL = Template.bind({});
   342  FormalDataFormatInfoCustomIconFromSQL.storyName =
   343    "Formal Data Format Info (Custom Icon from SQL)";
   344  FormalDataFormatInfoCustomIconFromSQL.args = {
   345    data: {
   346      columns: [
   347        { name: "label", data_type: "TEXT" },
   348        { name: "value", data_type: "INT8" },
   349        { name: "type", data_type: "TEXT" },
   350        { name: "icon", data_type: "TEXT" },
   351      ],
   352      rows: [
   353        {
   354          label: "EC2 Instances",
   355          value: 106,
   356          type: "info",
   357          icon: "heroicons-solid:light-bulb",
   358        },
   359      ],
   360    },
   361    properties: { icon: "light-bulb" },
   362  };
   363  
   364  export const FormalDataFormatAsTable = Template.bind({});
   365  FormalDataFormatAsTable.args = {
   366    data: {
   367      columns: [
   368        { name: "label", data_type: "TEXT" },
   369        { name: "value", data_type: "INT8" },
   370        { name: "type", data_type: "TEXT" },
   371      ],
   372      rows: [
   373        {
   374          label: "Encrypted EC2 Instances",
   375          value: 5,
   376          type: "ok",
   377        },
   378      ],
   379    },
   380    properties: {
   381      type: "table",
   382    },
   383  };