Digit Tally Component Library

Introduction

The Digit Tally Component Library is a collection of reusable React components designed to simplify the development of user interfaces. This library provides a set of well-crafted components that can be easily integrated into your projects, ensuring a consistent look and feel while saving development time. Whether you're building a small application or a large-scale project, these components are flexible, customizable, and ready to use.

Key Features

• Customizable Components: Each component comes with a variety of props for customization, allowing you to tailor styles and behavior to your needs.
• Accessibility: Designed with accessibility in mind to ensure your applications are usable by everyone.
• Lightweight: The library is lightweight and optimized for performance, ensuring a smooth user experience.
• Responsive Design: Components are built to be responsive, adapting to different screen sizes seamlessly.

Installation

To install the library, you can use npm or yarn:

npm install @candour-ui/react

or

yarn add @candour-ui/react

Button Component

Usage

<Button
  type="submit"
  variant="solid"
  disabled
  plusIcon
  className="submitButton"
  onClick={() => console.log('Button clicked!')}
>
  Submit
</Button>

Dropdown Component

DropdownItem

| Prop | Type | Default | Description | | ---------- | ----------- | ------- | --------------------------- | | children | ReactNode | - | Dropdown item to display. | | itemKey | string | - | Unique key for the item. | | padding | string | - | Padding style for the item. | | font | string | - | Font style for the item. | | color | string | - | Text color for the item. |

DropDownMenu

| Prop | Type | Default | Description | | ---------- | ----------------------- | ------- | -------------------------------- | | children | ReactNode | - | Dropdown items to display. | | bg | string | - | Background color for the menu. | | padding | string | - | Padding style for the menu. | | size | string | - | Size of the menu. | | radius | string | - | border radius of the DropDown. | | shadow | string | - | box shadow of the DropDown. | | onAction | (key: string) => void | - | Called when an item is selected. |

DropdownTrigger

| Prop | Type | Default | Description | | ---------- | ----------- | ------- | --------------------------- | | children | ReactNode | - | Content inside the trigger. |

DropdownWrapper

| Prop | Type | Default | Description | | ------------ | ----------- | ------- | ----------------------------- | | children | ReactNode | - | Trigger and menu items. | | position | string | - | Positioning of the menu. | | otherProps | object | - | Additional props for context. |

Usage

<DropdownWrapper>
  <DropdownTrigger>
    <Button type="button" variant="solid" onClick={() => {}}>
      Trigger Drop Down
    </Button>
  </DropdownTrigger>

  <DropDownMenu
    onAction={handleDropDownAction}
    size="lg"
    radius="md"
    shadow="xl"
  >
    <DropdownItem itemKey="new" text="New file" />
    <DropdownItem itemKey="old" text="Old file" />
  </DropDownMenu>
</DropdownWrapper>

Popover Component

Popover

| Prop | Type | Default | Description | | ---------------------- | ----------- | ------- | --------------------------------- | | popoverId | string | - | Unique ID for the popover. | | children | ReactNode | - | Content inside the popover. | | closeOnBackdropClick | boolean | true | Closes popover on backdrop click. | | position | string | - | Positioning of the popover. |

PopoverTrigger

| Prop | Type | Default | Description | | ---------- | ----------- | ------- | --------------------------- | | children | ReactNode | - | Content inside the trigger. |

PopoverContent

| Prop | Type | Default | Description | | ---------- | ----------- | ------- | --------------------------------- | | children | ReactNode | - | Content inside the popover. | | bg | string | - | Background color for the content. | | padding | string | - | Padding style for the content. | | size | string | - | Size of the content. |

Usage

<Popover>
  <PopoverTrigger>
    <button>Open Popover</button>
  </PopoverTrigger>
  <PopoverContent variant="solid" position="bottom">
    <p>Popover content (bottom)!</p>
  </PopoverContent>
</Popover>

Modal

| Prop | Type | Default | Description | | ---------------------- | ----------- | ------- | ------------------------------- | | modalId | string | - | Unique ID for the modal. | | children | ReactNode | - | Content inside the modal. | | closeOnBackdropClick | boolean | true | Closes modal on backdrop click. |

Usage

<Modal modalId="modalId" closeOnBackdropClick>
  <div>This is the modal content</div>
</Modal>

Toast

| Prop Name | Type | Default | Description | | ------------- | ----------------------------------------------------------------------- | ------------- | ----------------------------------------------------------- | | action | string | - | Title or label of the toast. | | toastId | string | - | Unique ID for the toast. | | message | string | - | Content displayed in the toast. | | closeButton | boolean | false | Shows a close button if true. | | duration | number | 5000 | Time in milliseconds before the toast automatically closes. | | position | 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' | 'top-right' | Defines the corner of the screen where toasts appear. | | variant | 'default' \| 'success' \| 'error' \| 'info' \| 'warning' \| 'promise' | 'default' | Sets the visual style of the toast based on its type. |

Usage

<Toast
  action="Success"
  toastId="toastId"
  message="Item deleted successfully."
  variant="info"
  position="top-right"
  closeButton
/>

Toast Container

Usage

Place the ToastContainer at the root of your app or in a specific component

<ToastContainer />

ToggleTheme

-

<ToggleTheme />

Filter Component

Filter

| Prop | Type | Default | Description | | ---------- | ---------------------- | ----------- | ------------------------------------------------ | | children | ReactNode | - | The trigger and menu items of the filter button. | | variant | 'solid' or 'outline' | 'outline' | Style variant of the filter button. |

FilterTrigger

| Prop | Type | Default | Description | | -------------- | ------------------- | --------- | -------------------------------------------------- | | label | string | - | The text label for the filter button. | | arrowDown | boolean | false | If true, shows an arrow-down icon in the button. | | filterIcon | boolean | false | If true, displays a filter icon in the button. | | iconPosition | 'left' or 'right' | 'right' | Determines the position of the icon in the button. | | className | string | - | Additional class names for custom styling. | | disabled | boolean | false | If true, the button is disabled. |

FilterMenu

| Prop | Type | Default | Description | | ------------------- | ------------------------- | ------- | -------------------------------------------- | | children | ReactNode | - | List of filter items to display in the menu. | | onSelectionChange | (value: string) => void | - | Callback when a filter item is selected. | | selectedKey | string | - | Key of the currently selected filter item. | | className | string | - | Additional class names for custom styling. |

FilterItem

| Prop | Type | Default | Description | | ---------- | ----------- | ------- | ------------------------------------------ | | value | string | - | The value that represents the filter item. | | children | ReactNode | - | The content to be displayed in the item. |

Usage

<Filter>
  <FilterTrigger
    label="Filter"
    arrowDown
    iconPosition="right"
    variant="solid"
  />

  <FilterMenu onSelectionChange={handleFilterChange} selectedKey={selectedKey}>
    <FilterItem value="new">New Item</FilterItem>
    <FilterItem value="popular">Popular Item</FilterItem>
    <FilterItem value="old">Old Item</FilterItem>
  </FilterMenu>
</Filter>

Sort Component

Sort

| Prop | Type | Default | Description | | ---------- | ------------------------- | ------- | --------------------------------------------------------- | | children | ReactNode | - | The trigger and menu items of the sort component. | | | | onChange | (value: string) => void | - | Callback function triggered when a sort item is selected. |

SortTrigger

| Prop | Type | Default | Description | | ----------- | --------- | ------- | -------------------------------------------------- | | label | string | - | The text label for the sort button. | | arrowDown | boolean | false | If true, shows an arrow-down icon in the button. | | sortIcon | boolean | false | If true, displays a sort icon in the button. | | className | string | - | Additional class names for custom styling. | | disabled | boolean | false | If true, the button is disabled. |

SortMenu

| Prop | Type | Default | Description | | ------------------- | ------------------------- | ------- | ------------------------------------------ | | children | ReactNode | - | List of sort items to display in the menu. | | onSelectionChange | (value: string) => void | - | Callback when a sort item is selected. | | selectedKey | string | - | Key of the currently selected sort item. | | className | string | - | Additional class names for custom styling. |

SortItem

| Prop | Type | Default | Description | | ---------- | ---------------------------------- | ------- | ---------------------------------------- | | value | string | - | The value that represents the sort item. | | onClick | MouseEventHandler<HTMLLIElement> | - | Handler called when the item is clicked. | | children | ReactNode | - | The content to be displayed in the item. |

Usage

<Sort onChange={handleChange}>
  <SortTrigger sortIcon arrowDown label="Sort" />
  <SortMenu selectedKey={selected} onSelectionChange={handleChange}>
    {data.map((item) => (
      <SortItem value={item.value} key={item.label}>
        {item.label}
      </SortItem>
    ))}
  </SortMenu>
</Sort>