@candourorg/components v1.0.49

Candour Component Library

Introduction

The Candour 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 @candourorg/ui

or

yarn add @candourorg/ui

or

bun install @candourorg/ui

Button Component

Usage

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

Dropdown Component

DropdownItem

DropDownMenu

DropdownTrigger

DropdownWrapper

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

PopoverTrigger

PopoverContent

Usage

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

Modal

Usage

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

Toast

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

FilterTrigger

FilterMenu

FilterItem

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

SortTrigger

SortMenu

SortItem

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>

DatePicker Component

RegularDatePicker

The RegularDatePicker component is a flexible and customizable. It allows users to select a single date or a date range, with support for various configurations such as date format, display options, and accessibility features.

Features

• Supports both single-date and range selection.
• Customizable date format for display and input.
• Optional footer and shortcut options to improve usability.
• Min and Max date restrictions to ensure valid date selection.

Example Usage

Below are two examples demonstrating how to use the RegularDatePicker component in a React application: one in range mode and the other in single-date mode.

Example 1: Date Range Selection (Range Mode)

In this example, the RegularDatePicker allows users to select a range of dates. The useRange prop is set to true, and asSingle is set to false.

import React, { useState } from 'react';
import { RegularDatePicker } from '@candour-ui/react';

const DateRangePickerExample: React.FC = () => {
  const [value, setValue] = useState<DateRange>({
    startDate: null,
    endDate: null,
  });

  console.log(value);

  return (
    <RegularDatePicker
      useRange={true}
      label="Select a Date Range"
      placeholder="Select date range"
      asSingle={false}
      value={value}
      displayFormat={'DD/MM/YYYY'}
      onChange={(newValue: DateValueType) => setValue(newValue as DateRange)}
    />
  );
};

Example 2: Single-Date Selection (Single Mode)

In this example, the RegularDatePicker is configured for selecting a single date. The useRange prop is set to false, and asSingle is set to true.

import React, { useState } from 'react';
import { RegularDatePicker } from '@candour-ui/react';

const DateRangePickerExample: React.FC = () => {
  const [value, setValue] = useState<DateRange>({
    startDate: null,
    endDate: null,
  });

  console.log(value);

  return (
    <RegularDatePicker
      useRange={false}
      label="Select a Date Range"
      placeholder="Select date range"
      asSingle={true}
      value={value}
      displayFormat={'DD/MM/YYYY'}
      onChange={(newValue: DateValueType) => setValue(newValue as DateRange)}
    />
  );
};

Key Differences Between Range Mode and Single-Date Mode

The RegularDatePicker component can be used in two distinct modes: Range Mode and Single-Date Mode. Below is a comparison of the key differences between these modes:

By toggling the useRange and asSingle props, you can easily switch between range and single-date selection modes to fit your specific use case.

Regular Date Comprehensive Props Guide

FormikDatePicker

FormikDatePicker is a React component designed for use with Formik to handle single-date input fields in forms. It supports selecting only one date.

Key Features:

• Single-Date Selection: For selecting one date.
• Formik Integration: Seamlessly works with Formik for form state and validation.
• Customizable: Easily configure label, error messages, and more.

Example Usage

The following example demonstrates how to use FormikDatePicker with Formik, including form validation using Yup.

import { Button, FormikDatePicker } from '@candour-ui/react';

const DatePickerFormik: React.FC = () => {
  const validationSchema = Yup.object().shape({
    startDate: Yup.string().required('Start Date is required').nullable(),
  });

  const companyTaxFormvalues = {
    startDate: '',
  };

  return (
    <Formik
      initialValues={companyTaxFormvalues}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      {(formikProps: FormikProps<any>) => {
        const { values, errors } = formikProps;

        return (
          <Form className="flex flex-col h-[calc(100vh-48px)]">
            <div className="flex items-center gap-5">
              <div className="grow">
                <Field
                  type="date"
                  id="startDate"
                  name="startDate"
                  label="Start Date"
                  placeholder="Choose a date"
                  value={values.startDate}
                  component={FormikDatePicker}
                  showError={!!errors.startDate}
                  errorMessage={errors.startDate}
                  form={formikProps}
                />
              </div>
            </div>
            <div className="flex-none">
              <Button
                type="submit"
                disabled={false}
                isSubmitting={false}
                className="w-full mt-3"
              >
                Submit
              </Button>
            </div>
          </Form>
        );
      }}
    </Formik>
  );
};

Formik Date Picker Comprehensive Props Guide