Views

DataTable

Description

The DataTable component is a versatile and customizable table component designed for displaying tabular data. It supports features such as pagination, search functionality, and row click handling, making it suitable for a wide range of applications where data needs to be presented in a tabular format.

Use Case

This component is ideal for:

• Displaying lists of items in a tabular format.
• Providing search functionality to filter data.
• Enabling pagination to navigate through large datasets.
• Handling row clicks for interactive data tables.

Props Table

Prop Name	Type	Description	Default Value	Required
dataset	T[]	The array of data items to be displayed in the table. Each item should be an object with key-value pairs representing columns and their values.	N/A	Yes
headerLabels	string[]	An array of strings representing the labels for the table headers.	undefined	No
pagination	boolean	A boolean indicating whether pagination is enabled.	true	No
paginationType	"infinite-loading" | "default"	The type of pagination to be used ("infinite-loading" or "default").	"default"	No
onClickRow	(label: string, index: number) => void	Callback function to handle row clicks. Receives the label and index of the clicked row as parameters.	undefined	No
numberOfRows	number	The number of rows to display per page.	10	No
rowStyleTypes	"transparent" | "outline" | "alternative-fill"	The style type for rows.	"transparent"	No
searchBarPosition	"start" | "center" | "end"	The position of the search bar.	"end"	No

Example

import React from "react";
import DataTable from "./DataTable";
import { DataTableItemType } from "./datatable.types";

const dataset: DataTableItemType[] = [
  { name: "John Doe", age: 30, email: "john@example.com" },
  { name: "Jane Smith", age: 25, email: "jane@example.com" },
  // ...more data items
];

const headerLabels = ["Name", "Age", "Email"];

const App: React.FC = () => {
  const handleRowClick = (label: string, index: number) => {
    console.log(`Clicked row with label ${label} at index ${index}`);
  };

  return (
    <DataTable
      dataset={dataset}
      headerLabels={headerLabels}
      onClickRow={handleRowClick}
    />
  );
};

export default App;

Flex

Description

The Flex component is a versatile layout component that utilizes CSS flexbox to arrange its children. It supports various flex properties such as direction, wrapping, and flexible weights for child elements.

Use Case

This component is ideal for:

• Creating flexible and responsive layouts.
• Aligning and distributing space among items in a container.
• Building complex grid systems using flex properties.

Props Table

Prop Name	Type	Description	Default Value	Required
direction	"row" | "column" | "row-reverse" | "column-reverse"	Defines the direction of the flex container's main axis.	"row"	No
weight	number[]	An array of numbers defining the flex-grow values for each child element. The number of elements in the array must match the number of children.	undefined	No
wrap	boolean	Determines whether the flex container's children should wrap onto multiple lines.	false	No
maxRow	number	The maximum number of rows. (Not used in the current implementation but included for extensibility.)	undefined	No

Example

import React from "react";
import { Flex } from "./Flex";

const App: React.FC = () => {
  return (
    <Flex direction="row" weight={[1, 2, 1]} wrap={true} className="customClass">
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </Flex>
  );
};

export default App;

Image

Description

The Image component is a flexible and customizable image container that supports various properties such as overlay, aspect ratio, border radius, and object fit. It also allows for additional functionalities like update options and icons.

Use Case

This component is ideal for:

• Displaying images with specific styles and properties.
• Adding overlays and icons to images.
• Handling image updates with custom update UI options.

Props Table

Prop Name	Type	Description	Default Value	Required
title	string	The title of the image, used for accessibility.	"Image Component"	No
numberOfLinesForTitle	number	Number of lines for the title text.	undefined	No
description	string	The description of the image.	undefined	No
numberOfLinesForDescription	number	Number of lines for the description text.	undefined	No
overlay	boolean	Whether to display an overlay over the image.	undefined	No
overlayOpacity	number	The opacity of the overlay.	undefined	No
source	string	The source URL of the image.	undefined	Yes
icon	React.FC<AssetProps>	An optional icon to be displayed over the image.	undefined	No
aspectRatio	number	The aspect ratio of the image.	undefined	No
canUpdate	boolean	Whether the image can be updated.	undefined	No
updateUI	"overlay" | "pen"	The UI option for updating the image.	undefined	No
onUpdate	(url: string, file: Blob) => void	Callback function to handle image updates.	undefined	No
accepted	string	The accepted file types for image updates.	undefined	No
fit	"contain" | "cover" | "fill" | "scale-down" | "none"	How the image should fit within its container.	"cover"	No
borderRadius	number	The border radius of the image container.	spacing.borderRadius.r2	No

Example

import React from "react";
import { Image } from "./Image";

const App: React.FC = () => {
  return (
    <Image
      source="https://example.com/image.jpg"
      title="Sample Image"
      description="This is a sample image."
      overlay={true}
      overlayOpacity={0.5}
      borderRadius={10}
      fit="cover"
    />
  );
};

export default App;

ListView

Description

The ListView component is a flexible container for rendering lists of items. It supports horizontal and vertical orientations, and allows for custom headers and footers. The component utilizes a render prop pattern for rendering each item in the list, providing maximum flexibility.

Use Case

This component is ideal for:

• Rendering lists of data with custom item components.
• Displaying lists in either horizontal or vertical orientation.
• Adding custom headers and footers to lists.

Props Table

Prop Name	Type	Description	Default Value	Required
dataset	T[]	The array of data items to be displayed in the list.	N/A	Yes
renderItem	(item: T, index: number) => React.JSX.Element	A function that returns the JSX element for each item in the list.	undefined	No
header	React.JSX.Element	A custom header element to be displayed at the top of the list.	undefined	No
footer	React.JSX.Element	A custom footer element to be displayed at the bottom of the list.	undefined	No
horizontal	boolean	If true, the list is displayed horizontally.	false	No
ListHeaderComponentStyle	CSSProperties	Custom styles for the header component.	undefined	No
ListFooterComponentStyle	CSSProperties	Custom styles for the footer component.	undefined	No

Example

import React from "react";
import ListView from "./ListView";

const dataset = [
  { id: 1, name: "Item 1" },
  { id: 2, name: "Item 2" },
  { id: 3, name: "Item 3" },
];

const renderItem = (item: { id: number; name: string }, index: number) => (
  <div key={item.id}>
    {item.name}
  </div>
);

const App: React.FC = () => {
  return (
    <ListView
      dataset={dataset}
      renderItem={renderItem}
      header={<div>Header</div>}
      footer={<div>Footer</div>}
      horizontal={true}
    />
  );
};

export default App;

Row

Description

The Row component is a flexible row layout component that extends the Flex component to include additional styling options. It supports different style types for various use cases such as outlined borders and alternating row fills.

Use Case

This component is ideal for:

• Rendering rows within a table or list with specific styling needs.
• Applying alternating background colors or borders to rows.
• Creating structured row layouts with flexible weights for child elements.

Props Table

Prop Name	Type	Description	Default Value	Required
styleType	"transparent" | "outline" | "alternative-fill"	Defines the style type for the row.	"transparent"	No
weight	number[]	An array of numbers defining the flex-grow values for each child.	undefined	No
index	number	The index of the row, used for applying styles based on row position.	undefined	No

Example

import React from "react";
import { Row } from "./Row";

const dataset = [
  { id: 1, name: "Item 1" },
  { id: 2, name: "Item 2" },
  { id: 3, name: "Item 3" },
];

const App: React.FC = () => {
  return (
    <div>
      {dataset.map((item, index) => (
        <Row key={item.id} styleType="alternative-fill" index={index}>
          <div>{item.name}</div>
        </Row>
      ))}
    </div>
  );
};

export default App;

SplitPane