algotrading-react-components

v1.3.4

Published

3 months ago

A private library for internal use only. Explicit approval is required for any other use.

Downloads

0High
0Medium
0Low

maurizio-kraus

Algotrading React Components

This document provides an overview of the reusable components and utilities included in this library.

Index

Algotrading React Components

Components

BaseCustomModal

The BaseCustomModal component is a reusable modal component with a customizable title, content, and styling.

Props

| Prop Name | Type | Default Value | Description | | ----------- | --------------- | ------------- | ------------------------------------------------ | | title | string | '' | The title of the modal | | open | boolean | false | Determines whether the modal is open or closed | | handleClose | function | () => {} | The function to handle closing the modal | | children | React.ReactNode | null | The content to be rendered inside the modal | | sxProps | object | {} | Additional styling props for the modal container |

Usage

import { BaseCustomModal } from './Components/BaseCustomModal';

function MyComponent() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => {
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <button onClick={handleOpenModal}>Open Modal</button>
      <BaseCustomModal
        title="My Modal"
        open={isModalOpen}
        handleClose={handleCloseModal}
        sxProps={{ width: '400px' }}
      >
        <p>This is the content of the modal.</p>
      </BaseCustomModal>
    </div>
  );
}

Notes

The BaseCustomModal component uses the Modal component from the @mui/material library.
The open prop controls whether the modal is open or closed.
The handleClose prop is a function that is called when the modal is closed, either by clicking the close icon or - clicking outside the modal.
The children prop allows you to pass any React elements as the content of the modal.
The sxProps prop allows you to pass additional styling props to customize the appearance of the modal container.
The modal has a default width of 500px, but you can override it using the sxProps prop.
The modal has a blurred backdrop effect achieved using the backdropFilter CSS property.
The modal uses the CustomTypography component for rendering the title.
The modal has a divider separating the title from the content.
The close icon is positioned in the top-right corner of the modal and has a pointer cursor on hover.

CustomButton

The CustomButton component is a reusable button component with customizable text, variant, styling, and click behavior.

Props

TODO: add icons to remove the reactNode prop and replace it with a string that then selects the right icon

| Prop Name | Type | Default Value | Description | | --------- | ----------------------------------------- | ------------- | ---------------------------------------------------- | | message | string | '''' | The text to display on the button | | variant | 'text' | 'outlined' | 'contained' | 'text' | The variant of the button | | sxProps | object | {} | Additional styling props for the button | | startIcon | React.ReactNode | undefined | The icon to display at the start of the button | | onClick | function | undefined | The function to be called when the button is clicked |

Usage

import { CustomButton } from './Components/CustomButton';

function MyComponent() {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div>
      <CustomButton
        message="Click me"
        variant="contained"
        startIcon={<StarIcon />}
        onClick={handleClick}
        sxProps={{ marginTop: '16px' }}
      />
    </div>
  );
}

Notes

The CustomButton component uses the Button component from the @mui/material library.
The message prop specifies the text to be displayed on the button.
The variant prop determines the visual style of the button. It can be one of the following values:
- 'text': The button will have a text-only style without a background color.
- 'outlined': The button will have an outlined style with a transparent background and a border.
- 'contained': The button will have a solid background color.
The sxProps prop allows you to pass additional styling props to customize the appearance of the button.
The startIcon prop allows you to display an icon at the start of the button.
The onClick prop is a function that will be called when the button is clicked.
The button has a default border radius of 100px to give it a rounded appearance.
The button text is transformed to remove the default uppercase transformation using textTransform: 'none'.
The button text has a default font size of 16px and a bold font weight.
The colors object is imported from the colors module to access predefined color values.

CustomCheckbox

The CustomCheckbox component is a reusable checkbox component with customizable styling.

Props

| Prop Name | Type | Default Value | Description | | ------------ | -------- | ------------- | --------------------------------------------------------- | | checked | boolean | false | The checked state of the checkbox | | handleChange | function | () => {} | The function to be called when the checkbox state changes | | sxProps | object | {} | Additional styling props for the checkbox |

Usage

import { CustomCheckbox } from './Components/CustomCheckbox';

function MyComponent() {
  const [isChecked, setIsChecked] = useState(false);

  const handleCheckboxChange = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div>
      <CustomCheckbox
        checked={isChecked}
        handleChange={handleCheckboxChange}
        sxProps={{ marginRight: '8px' }}
      />
      <label>Remember me</label>
    </div>
  );
}

Notes

The CustomCheckbox component uses the Checkbox component from the @mui/material library.
The checked prop determines the checked state of the checkbox.
The handleChange prop is a function that will be called when the checkbox state changes. It can be either a function that takes no arguments or a function that takes an event object as an argument.
The sxProps prop allows you to pass additional styling props to customize the appearance of the checkbox.
The checkbox uses custom icons for the checked and unchecked states.
The unchecked state uses the CropSquareIcon component with a dark300 color and a font size of 28px.
The checked state uses the CheckBoxIcon component with a blue500 color and a font size of 28px.
The colors object is imported from the ./colors module to access predefined color values.

CustomSnackBar

The CustomSnackBar component is a reusable snackbar component that displays a message with an icon and a close button. It is built using Material-UI components and supports different types of messages.

Props

| Prop Name | Type | Default Value | Description | | --------------- | --------------------------------------------- | ------------- | ------------------------------------------------- | | message | string | '''' | The message to display in the snackbar | | type | 'success' | 'info' | 'success' | The type of the snackbar (determines color) | | openSnackbar | boolean | `false | Determines whether the snackbar is open or closed | | setOpenSnackbar | React.Dispatch<React.SetStateAction> | () => {} | The function to update the openSnackbar state |

Usage

import { CustomSnackBar } from './Components/CustomSnackBar';

function MyComponent() {
  const [isSnackbarOpen, setIsSnackbarOpen] = useState(false);

  const handleOpenSnackbar = () => {
    setIsSnackbarOpen(true);
  };

  return (
    <div>
      <button onClick={handleOpenSnackbar}>Open Snackbar</button>
      <CustomSnackBar
        message="Success message"
        type="success"
        openSnackbar={isSnackbarOpen}
        setOpenSnackbar={setIsSnackbarOpen}
      />
    </div>
  );
}

Notes

The CustomSnackBar component uses the Snackbar component from the @mui/material library.
The message prop specifies the message to be displayed in the snackbar.
The type prop determines the type of the snackbar, which affects the color and icon displayed. It can be one of the following values:
- 'success': The snackbar will have a green color and display a CheckCircleOutlineIcon.
- 'info': The snackbar will have a blue color and display an InfoOutlinedIcon.
The openSnackbar prop determines whether the snackbar is open or closed.
The setOpenSnackbar prop is a function that updates the openSnackbar state. It should be passed as a prop to control the visibility of the snackbar.
The snackbar automatically hides after 3 seconds (autoHideDuration prop).
The snackbar is positioned at the top-right corner of the screen (anchorOrigin prop).
The snackbar has a border radius of 12px and a bold font weight for the message.
The handleCloseSnackbar function is called when the close icon is clicked, which sets the openSnackbar state to false.

CustomTypography

The CustomTypography component is a reusable typography component with customizable text, type, color, and styling.

Props

| Prop Name | Type | Default Value | Description | | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------- | | type | 'h4' | 'h4Bold' | 'extraLarge' | 'extraLargeBold' | 'large' | 'largeBold' | 'medium' | 'mediumBold' | 'small' | 'smallBold' | 'extraSmall' | 'extraSmallBold' | 'outlined' | 'large' | The type of typography style to apply | | color | string | 'white' | The color of the text | | sxProps | object | {} | Additional styling props for the typography | | text | string | '''' | The text content to be rendered |

Usage

import { CustomTypography } from './Components/CustomTypography';

function MyComponent() {
  return (
    <div>
      <CustomTypography type="extraLargeBold" color="#ff0000" text="Welcome to my app!" />
      <CustomTypography type="medium" sxProp={{ marginTop: '16px' }} text="This is a paragraph." />
    </div>
  );
}

Notes

The CustomTypography component uses the Typography component from the @mui/material library.
The type prop determines the typography style to apply. It should be a key from the TypographyTypes object defined in the ./types module.
The color prop specifies the color of the text. It defaults to white if not provided.
The sxProp prop allows you to pass additional styling props to customize the appearance of the typography.
The text prop specifies the text content to be rendered.
The getTypographyStyles function from the ./getTypographyStyles module is used to retrieve the corresponding typography styles based on the type prop.
The colors object is imported from the ./colors module to access predefined color values.
The component is defined using the React.forwardRef function to allow passing a ref to the underlying Typography component.

CustomSwitch

The CustomSwitch component is a customized version of the Switch component from the @mui/material library with a specific styling.

Props

The CustomSwitch component is a styled component and does not have any additional props or functionality beyond what is provided by the Switch component from @mui/material. The main purpose of this component is to apply a custom styling to the switch.

Usage

import CustomSwitch from './Components/CustomSwitch';

function MyComponent() {
  const [isChecked, setIsChecked] = useState(false);

  const handleSwitchChange = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div>
      <CustomSwitch
        checked={isChecked}
        onChange={handleSwitchChange}
      />
      <label>Enable feature</label>
    </div>
  );
}

Notes

The CustomSwitch component is built using the Switch component from the @mui/material library and styled using the styled function.
The component inherits all the props and functionality of the Switch component, so you can use it in the same way as the regular Switch component.

CustomTextfield

The CustomTextField component is a customized version of the TextField component from the @mui/material library. It provides a consistent styling and additional props for customization.

Props

| Prop Name | Type | Default Value | Description | | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------- | | value | string | number | undefined | The value of the text field | | handleChange | (event: React.ChangeEvent) => void | - | The function to be called when the value of the text field changes | | type | string | undefined | The type of the text field (e.g., 'text', 'number', etc.) | | InputProps | object | undefined | Additional props to be passed to the underlying Input component | | sxProps | object | undefined | Additional styling props for the text field | | placeholder | string | undefined | The placeholder text for the text field | | error | boolean | undefined | Indicates if the text field has an error | | helperText | string | undefined | The helper text to be displayed below the text field | | stopPropagation | boolean | undefined | Indicates whether to stop the event propagation when the text field is clicked | | typographyType |'h4'\|'h4Bold'\|'extraLarge'\|'extraLargeBold'\|'large'\|'largeBold'\|'medium'\|'mediumBold'\|'small'\|'smallBold'\|'extraSmall'\|'extraSmallBold'\|'outlined'|'large'` | The typography type to be used for the text field (e.g., 'large', 'medium', etc.) | | ...otherProps | - | - | Any additional props to be passed to the underlying TextField component |

Usage

import { CustomTextField } from './Components/CustomTextField';

function MyComponent() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <CustomTextField
        value={value}
        handleChange={handleChange}
        placeholder="Enter your name"
        typographyType="medium"
        sxProps={{ marginBottom: '16px' }}
      />
    </div>
  );
}

Notes

The CustomTextField component is built using the TextField component from the @mui/material library and customized with specific styling.
The typography styles for the text field are determined by the typographyType prop.
The text field has a default width of 218px and a height of 48px.
The background color of the text field is set to dark800, and the text color is set to white.
The text field has a border radius of 8px.
If the helperText prop is provided or the error prop is set to true, the text field will have a red border color (red500).
The helper text is displayed below the text field with a red color (red500) and a font size of 12px.
The margin bottom of the text field is adjusted based on the length of the helper text.
The text field disables the default appearance of the number input spinners.
The ...otherProps allows passing any additional props to the underlying TextField component.

CustomToggleButton

The CustomToggleButton component is a customized version of the ToggleButtonGroup component from the @mui/material library. It provides a consistent styling and allows for easy creation of toggle buttons with customizable options.

Props

| Prop Name | Type | Default Value | Description | | ------------ | ---------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | options | { [key: string]: string } | undefined | An object representing the options for the toggle buttons. The keys are used as the values for the buttons, and the values are the labels. | | value | string | undefined | The currently selected value of the toggle button group. | | handleChange | (event: unknown, newInterface: string) => void | undefined | The function to be called when the selected value of the toggle button group changes. | | sxProps | object | {} | Additional styling props for the Stack component that wraps the toggle button group. |

Usage

import { CustomToggleButton } from './Components/CustomToggleButton';

function MyComponent() {
  const [selectedOption, setSelectedOption] = useState('option1');

  const handleChange = (event, newValue) => {
    setSelectedOption(newValue);
  };

  const options = {
    option1: 'Option 1',
    option2: 'Option 2',
    option3: 'Option 3',
  };

  return (
    <div>
      <CustomToggleButton
        options={options}
        value={selectedOption}
        handleChange={handleChange}
        sxProps={{ marginBottom: '16px' }}
      />
    </div>
  );
}

Notes

The CustomToggleButton component is built using the ToggleButtonGroup component from the @mui/material library and customized with specific styling.
The options prop is an object that defines the options for the toggle buttons. The keys of the object are used as the values for the buttons, and the corresponding values are used as the labels.
The value prop represents the currently selected value of the toggle button group.
The handleChange prop is a function that is called when the selected value of the toggle button group changes. It receives the event and the new value as arguments.
The sxProps prop allows passing additional styling props to the Stack component that wraps the toggle button group.
The toggle buttons have a default height of 40px and a width of 276px.
The background color of the toggle buttons is set to dark400, and the text color is set to white.
When a toggle button is selected, it has a background color of blue200 and a text color of black.
The toggle buttons have a border radius of 110px, giving them a rounded appearance.
The text inside the toggle buttons is displayed in bold with a font size of 16px and no text transformation.
The Stack component that wraps the toggle button group has a background color of dark400, a height of 48px, and a border radius of 110px.
The Stack component uses padding of 4px to create spacing between the toggle buttons.
The toggle buttons are rendered using the map function over the keys of the options object.

Utilities

Colors

The colors object is a collection of predefined color values used throughout the application. It provides a consistent color palette for various UI components.

Color Values

The colors object contains the following color values:

| Color Name | Hex Code | | ----------- | --------- | | white | #fff | | black | #000 | | dark50 | #e1e5ea | | dark100 | #b2b5bf | | dark200 | #8f939f | | dark300 | #5f6574 | | dark400 | #434959 | | dark500 | #1a202f | | dark600 | #161b29 | | dark700 | #151a26 | | dark800 | #0e1424 | | dark900 | #020716 | | red50 | #ffeded | | red100 | #ffc8c8 | | red200 | #ffadae | | red300 | #ff8889 | | red400 | #ff7172 | | red500 | #ff4d4f | | red600 | #e84648 | | red700 | #b53738 | | red800 | #8c2a2b | | red900 | #6b2021 | | yellow50 | #fff6e6 | | yellow100 | #ffe4b0 | | yellow200 | #ffd78a | | yellow300 | #ffc554 | | yellow400 | #ffb933 | | yellow500 | #ffa800 | | yellow600 | #e89900 | | yellow700 | #b57700 | | yellow800 | #8c5c00 | | yellow900 | #6b4700 | | green50 | #e9f8ef | | green100 | #bbebcc | | green200 | #9be1b4 | | green300 | #6dd391 | | green400 | #51ca7c | | green500 | #25bd5b | | green600 | #22ac53 | | green700 | #1a8641 | | green800 | #146832 | | green900 | #104f26 | | purple50 | #f4e6ff | | purple100 | #dcb0ff | | purple200 | #cb8aff | | purple300 | #b454ff | | purple400 | #a533ff | | purple500 | #8f00ff | | purple600 | #8200e8 | | purple700 | #6600b5 | | purple800 | #4f008c | | purple900 | #3c006b | | blue50 | #ecf4fe | | blue100 | #c5ddfd | | blue200 | #a9ccfb | | blue300 | #82b5fa | | blue400 | #69a6f9 | | blue500 | #4490f7 | | blue600 | #3e83e1 | | blue700 | #3066af | | blue800 | #254f88 | | blue900 | #1d3c68 |

Usage

To use the color values from the colors object, you can import it into your component files:

import colors from './colors';

function MyComponent() {
  return (
    <div style={{ backgroundColor: colors.blue500, color: colors.white }}>
      This is a blue background with white text.
    </div>
  );
}

You can also use object destructuring to access the color properties

import colors from './colors';

function MyComponent() {
  const { blue500, white } = colors;
  return (
    <div style={{ backgroundColor: blue500, color: white }}>
      This is a blue background with white text.
    </div>
  );
}

Notes

The colors object provides a centralized place to define and manage the color palette used in the application.
The color values are organized into different shades for each color, ranging from 50 (lightest) to 900 (darkest).
Using the predefined color values ensures consistency in the visual design of the application.
You can access the color values using object destructuring or dot notation, e.g., colors.red500, colors.dark200, etc.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Algotrading React Components

Index

Components

BaseCustomModal

Props

Usage

Notes

CustomButton

Props

Usage

Notes

CustomCheckbox

Props

Usage

Notes

CustomSnackBar

Props

Usage

Notes

CustomTypography

Props

Usage

Notes

CustomSwitch

Props

Usage

Notes

CustomTextfield

Props

Usage

Notes

CustomToggleButton

Props

Usage

Notes

Utilities

Colors

Color Values

Usage

Notes