@jtamptech/component-library v2.26.0
AMP Logic Component Library
Getting Started
First, install @jtamptech/component-library
npm install @jtamptech/component-library
Icons
Icons are imported and customized from @heroicons/react
.
Hero Icons
Buttons
There will be several variations of buttons that serve as subcomponents for the larger components in this library.
Widget Button
<WidgetBtn />
with props:
interface WidgetBtnProps {
icon: any;
active: boolean;
onClick?: () => void;
}
- Icon: Pass a string to render specific Icon for Widget Button
- Active: Pass a boolean value to render the active or inactive state of a Widget Button
- onClick?: Pass a callback function that will handle a specific action for the Widget Button
Widget Menu
The Widget Menu component consists of Widget Buttons <WidgetBtn />
and Icon <Icons />
subcomponents. The Widget Menu will be nested in the left hand side of the Navigation Bar and File System and allow the users to be able to have access to quick action widgets in their notebook.
<WidgetMenu />
with props:
interface WidgetMenuProps {
colormode: string;
}
- Colormode: Pass a string ("light" / "dark") to choose between light/dark mode CSS
Navigation Bar
Navigation Bar component that consists of widgets that allow for quick actions. Some current widgets include workspace, pipeline, notification, and settings.
<NavBar />
with props:
interface NavBarProps {
colormode: string;
}
- Colormode: Pass a string ("light" / "dark") to choose between light/dark mode CSS
Search Bar
Search Bar subcomponent is used in the Inspector and Dataspace Widget Components in two different variations.
<DataspaceSearchBar />
with props:
interface DataspaceSearchBarProps {
data: Array<any>;
placeholder: string;
errorMsg: string;
colormode: string;
}
- Data: Passes an array of data that will be queried by the SearchBar
- Placeholder: Passes a string to render as the placeholder of the SearchBar
- ErrorMsg: Passes a string to display the unique error handling message if no results are found
- Colormode: Pass a string ("light" / "dark") to choose between light/dark mode CSS
<InspectorSearchBar />
with props:
interface InspectorSearchBarProps {
data: Array<any>;
placeholder: string;
errorMsg: string;
colormode: string;
}
- Data: Passes an array of data that will be queried by the SearchBar
- Placeholder: Passes a string to render as the placeholder of the SearchBar
- ErrorMsg: Passes a string to display the unique error handling message if no results are found
- Colormode: Pass a string ("light" / "dark") to choose between light/dark mode CSS
Tag
Tag is a key/value pair identifier component that allows for users to label specific files/logs/data within the Inspector widget.
<Tag />
with props:
interface TagProps {
tag: Tagtype;
remove:() => void;
}
type TagType = {
key: string;
value: string;
}
- Tag:Passes an object that the Tag component will use the value of to display the Tag identifiers
- Remove: A callback function that will remove thet associated to the file/card
Card
Card component is a sub-component of the Dataspace and Inspector widget. Information such as from logs and its descriptiona & time of creation is displayed within the card to be selected by the user.
<DataspaceCard />
with props:
interface DSCardProps {
data: SignalType;
status: StatusType;
group?: string;
colormode: string;
}
interface SignalType {
log: {
node_id: string;
name: string;
};
timestamp: null | string;
metadata: {
name: string;
datatype: SignalDatatype;
properties: SignalTimestampProperties | SignalProperties;
};
chunks: {
summary: SignalChunkSummary | SignalTimestampChunkSummary;
oid: string;
}[];
}
type StatusType =
| "success"
| "open"
| "open2"
| "loading"
| "loading2"
| "error";
- Data: Signal Data that is passed and parsed from the backend
- Status: Passes a string that signifies the status of the data being uploaded
- Colormode: Pass a string ("light" / "dark") to choose between light/dark mode CSS
<DataspaceCard />
with props:
interface DSCardProps {
heading: string;
description: string;
created: string;
filetags?: any;
colormode: string;
}
- Heading: Passes a string that will display the name of the log
- Description: Passes a string that wil display the info of the log
- Created: Passes a string that will display the time of upload of log
- Colormode: Pass a string ("light" / "dark") to choose between light/dark mode CSS
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago