@vivakits/react-components v0.4.14

Vivakit React Tailwind Component Library

A component library for React

Installation

• Install the package

 npm i @vivakits/react-components

• Go to the tailwind.config.js file and update the content and add vivakitPreset as presets :

import { vivakitPreset } from "@vivakits/react-components";

 /** @type {import('tailwindcss').Config} */
export default {
  content: [
    ...,
    "./node_modules/@vivakits/react-components/dist/**/*.{js,ts,jsx,tsx}", // add this line
  ],
  theme: {},
  presets: [vivakitPreset],  // add the preset
  plugins: [],
};

• Paste the following into your index.css file and change the colors according to your needs

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: #fff;
    --foreground: #090909;
    --primary: #f97316;
    --primary-foreground: #fafaf9;
    --primary-light: #fef1e8;
    --secondary: #9b59b6;
    --secondary-foreground: #fafaf9;
    --secondary-light: #f5eef8;
    --accent: #3498db;
    --accent-foreground: #fafaf9;
    --accent-light: #ebf5fb;
    --success: #45d483;
    --success-foreground: #fafaf9;
    --success-light: #ecfbf3;
    --warning: #fab005;
    --warning-foreground: #fafaf9;
    --warning-light: #fff7e6;
    --danger: #fa5252;
    --danger-foreground: #fafaf9;
    --danger-light: #ffeeee;
    --neutral: #e4e4e7;
    --muted: #f4f4f5;
    --placeholder: #00000066;
    --black: #262626;
    --ring: #f97316;
    --divider: #00000066;
    --disabled: #f2f2f2;

    --vk_radius: 8px;
    --vk_height: 40px;
    --vk_padding: 0px 16px;
  }
}

Congrats! Now your are good to go 🥳

Available Components (till now)

AsyncDatatable

• breadcrumbs
• Button
• datatable
• dataVisualizer
• Checkbox
• Dropdown
• Input
• Modal
• pagination
• Label
• Radio
• Select
• Textarea
• spinner
• Switch
• Notification
• Avatar
• Chip
• Badge
• Group
• Title

Usage/Examples

Button Component

import { Button } from "@vivakits/react-components";

function App() {
  return (
    <Button variant="solid" color="primary" size="lg" rounded="md">
      Click me!
    </Button>
  );
}

Asynchronous Datatable Component

import { AsyncDatatable } from "@vivakits/react-components";

function App() {
  return (
    <AsyncDatatable
      columnDefinitions={dataTableColumns}
      dataSource={dataTableDataSource}
      headerComponents={searchComponents} // optional
      isLoading={true} //optional. to show loader
      customLoadingComponent={<></>} //optional. If loading true then table shows a default Spinner. If you want to customize it, then pass a ReactNode through this attribute
      customEmptyDataComponent={} //optional. IF no data found then table shows a default React node. If you want to customize it, then pass a ReactNode through this attribute
      entriesHeader="" // optional. for customizing entries header
      entriesArray={[5, 10, 20]} // optional
      defaultEntries={10} //optional. to set default entries no initially
      entriesDropdownPosition="top" //optional. value is "top" or "bottom"
      entriesShowingSpaceText="" //optional. for customizing no of entries default 'of' text
      totalPages={20} // optional. mandatory for rendering pagination
      currentPage={currentPage} // optional. mandatory for rendering pagination
      noOfEntries={10} //optional. mandatory for showing no of entries value
      totalRecord={300} //optional. mandatory for showing no of entries value. This value defines total number of data in a table
      dynamicPreviousText="" // optional. for customizing previous btn label
      dynamicNextText="" // optional. for customizing next btn label
      previousIcon={<AnyIcon />} // optional. for customizing previous icon in pagination
      nextIcon={<AnyIcon />} // optional. for customizing next icon in pagination
      stripped // optional. It will show stripped rows.
      stripeColor="#c1c1c1" //optional. this color wll be override by default stripe color. It can take hex code or rgb() as well.
      horizontalBorder // optional. For adding horizontal border across all cells
      verticalBorder // optional. For adding vertical border across all cells
      isSelectableMulti // optional. mandatory for rendering selectable checkbox
      selectedRows={selectedRows} // optional. mandatory for rendering selectable checkbox. We have to pass the selectedRows array in this attribute
      handleOnSelectChange={handleOnSelectChange} // optional. mandatory for rendering selectable checkbox. callback function for selected rows
      handleOnSort={handleOnSort} // optional. callback function for getting the sorting dataIndex and sortOrder
      scroll={{ x: 2000, y: 500 }} // optional. x means horizontal width of table, y means height of the table.
      fixedHeader // optional. this attribute fixes our table header.
      rtl={true} //optional. for rtl support

      handleSearchInputChange={handleDataTableSearchInputChange} // optional. callback function for default search input
      handlePageChange={handlePageChange} // optional. However, mandatory for rendering pagination. callback function for pagination component
      handleNoOfEntriesChange={handleNoOfEntriesChange} // optional. However, mandatory for rendering entries. callback function for entries component
      datatableFooterWrapperClassName="" // optional. for custom styling
      paginationWrapperClassName="text-gray-600" // optional. for custom styling
      paginationNoOfEntriesWrapperClassName="text-gray-600" // optional. for customizing no of entries text styling
      paginationPrevBtnClassName="text-gray-600" // optional. for custom styling pagination
      paginationNextBtnClassName="text-gray-600" // optional. for custom styling pagination
      paginationButtonSelectedClassName="bg-gray-100 !text-black font-semibold" // optional. for custom styling
      headerWrapperClassName="bg-[#F2F5FF]" // optional. for custom styling
      headItemClassName="" // optional. for custom styling
      headItemLabelClass="text-xs font-semibold text-gray-600" // optional. for custom styling
      tableBodyWrapperClassName="" // optional. for custom styling
      rowWrapperClassName="" // optional. for custom styling
      rowItemClassName="text-gray-500" // optional. for custom styling
      rowItemLabelClass="text-sm" // optional. for custom styling
      entriesWrapperClassName="" // optional. for custom styling
      entriesHeaderClassName="" // optional. for custom styling
      selectEntriesWrapperClassName="" // optional. for custom styling
      selectEntryItemClassName="" // optional. for custom styling
    />
  );
}

Notification Component

import {
  VKNotifications,
  useVKNotifications,
} from "@vivakits/react-components";

function App() {
  const { notify, closeNotification, closeAllNotifications } =
    useVKNotifications();

  return (
    <>
      <VKNotifications />
      <button
        onClick={() => {
          notify({
            id: "", // optional. for uniquely identifying each notification
            icon: <InfoIcon />, // optional. custom icon shown beside title
            closeIcon: <CloseIcon />, // optional. custom close icon for the notification
            title: "", // optional. title shown for the notification
            description: "", // mandatory. for showing notification text
            onClose: onClose, // optional. for what to do after closing a notification
            className: "", // optional. for custom css for a notification
            autoClose: true, // optional. for enabling / disabling auto close for a notification
            duration: 4000, // optional. for the duration in milliseconds after which the notification will close
            variant: "success", // optional. for showing different type of notification.
            color: "default", // optional. for showing different color on notification.
            size: "lg", // optional. for showing different text size and notification size
            placement: "topRight", // optional. for placing the notification in different locations on the web view.
          });
        }}
      >
        Open Notification
      </button>
      <button
        onClick={
          closeAllNotifications // closes all notifications on the web view at all placements
        }
      >
        Close All Notifications
      </button>
      <button
        onClick={
          (id) => closeNotification(id) // closes the notification that matches with the id provided
        }
      >
        Close Single Notification
      </button>
    </>
  );
}

Time Range Picker Component

import { VKTimeRangePicker } from "@vivakits/react-components";

function App() {
  return (
    <VKTimeRangePicker
      defaultValue={["10:00 AM", "12:00 PM"]} // Optional. Default value for the time range picker. if range is true then pass an array of two strings. Otherwise, pass a single string. string format should be "hh:mm AM/PM"
      callback={(params: any) => console.log(params)} // A callback function for getting the selected time range.
      range={true} // Optional. Determines if the time range picker should be a range picker or not.
      size="sm" // Optional. Size of the time range picker.
      rounded="lg" // Optional. Border radius of the time range picker.
      color="primary" // Optional. Theme color of the time range picker.
      fromPlaceholder="" // Optional. Placeholder for the from input.
      toPlaceholder="" // Optional. Placeholder for the to input.
      containerClassName="" // Optional. Custom class for the time range picker container.
      inputWrapperClassName="" // Optional. Custom class for the input wrapper.
      inputClassName="" // Optional. Custom class for the input.
      modalWrapperClassName="" // Optional. Custom class for the modal wrapper.
      buttonClassName="" // Optional. Custom class for the button.
      onReset={(params: any) => console.log(params)} // Optional. Callback function for resetting the time range picker.
      isClearable={true} // Optional. Determines if the reset button show or not. value is true or false.
      customResetLabel="" // Optional. Custom label for the reset button.
      customNowLabel="" // Optional. Custom label for the now button.
    />
  );
}

Avatar Component

import { VKAvatar } from "@vivakits/react-components";

function App() {
  return (
    <VKAvatar
      variant="image" // optional. for showing different type of avatar
      shape="rounded" // optional. for rounded shape on the avatar
      color="primary" // optional. for showing different background color on avatar
      borderColor="primary" //optional. for border color if border is available
      size="lg" // optional. for different size of avatar
      fontSize="md" // optional. for showing different font size on "text" variant avatar
      src="" // optional. for image source of avatar
      alt="" // optional. for alternate text for image of avatar
      className="" // optional. for custom css on avatar
      textValue="" // optional. for text that shows in "text" variant avatar. The textValue is shortened and only the first word of first two letters is used with Capitalization.
      // example: "john doe" will show JD in the avatar
      fontColor="default" // optional. for font color on "text" variant avatar
      fontFamily="sans-serif" // optional. for applying font family on "text" variant avatar
      withBorder // optional adds border to the avatar. mandatory for borderColor 
    />
  );
}

Chip Component

import { VKChip } from "@vivakits/react-components";

function App() {
  return (
    <VKChip
      variant="outlined" // optional. for determining the style of Chip. Currently "outlined" | "filled" available
      color="primary" // optional. for determining the background and text color
      size="md" // optional. for different text size & chip size
      fontSize="md" // optional. for different font size
      state="disabled" // optional. for the current state of chip. Currently "selected" | "unselected" | "disabled" available
      leftIcon={<ProfileIcon />} // optional. for showing icon on the left
      rightIcon={<CloseIcon />} // optional. for showing icon on the right
      open={true} // optional. determines if the chip should be shown or hidden
      onClick={handleOnClick} // optional. when clicking on the chip the provided function would run
      onRightIconClick={handleRightIconClick} // optional. when clicking on the right icon the provided function would run
      onLeftIconClick={handleLeftIconClick} // optional. when clicking on the left icon the provided function would run
      className="" // optional. for custom css for a chip
      iconClassName="" // optional. for custom css for icons on the chip
      leftIconClassName="" // optional. for custom css for left icon on the chip
      rightIconClassName="" // optional. for custom css for the right icon on the chip
      labelClassName="" // optional. for custom css for the text label on the chip
      label="" // optional. for showing the text label on the chip
      rounded={true} // optional. determines if the chip should be rounded or curved square
    />
  );
}

Badge Component

import { VKBadge } from "@vivakits/react-components";

function App() {
  return (
    <VKBadge
      variant="circular" // optional. for determining the style of badge. Currently "circular" | "square" available
      color="primary" // optional. for determining the background color of the badge
      borderColor="primary" // optional. for determining the border color of badge when border is available
      size="md" // optional. for different size of badge
      placement="topRight" // optional. for different placement. Currently "topRight" | "topLeft" | "bottomLeft" | "bottomRight" available
      invisible={false} // optional. for changing the badge visibility
      className="" // optional. for custom css class on the badge
      content={<CameraIcon />} // optional. for showing content inside badge. Currently "JSX.Element" | "number" type available
      containerProps={{}} // optional. for applying props to the wrapper container which holds children and badge
      containerRef={containerRef} // optional. for referencing the wrapper container
      ref={badgeRef} // optional. for referencing the badge component
      withBorder // optional. determines if border should be shown
    >
      <button>Button with badge</button>
    </VKBadge>
  );
}

Group Component

import { VKGroup } from "@vivakits/react-components";

function App() {
  return (
    <VKGroup
      orientation="vertical" // optional. determines the orientation of the group. Currently "vertical" | "horizontal" available
      separatorColor="primary" // optional. for the separator color of the group
      color="primary" // optional. for the background color of the group
      border="sm" // optional. for the size of the border of the group
      borderColor="primary" // optional. for the border color of the group
      size="md" // optional. determines the size of the group. This is applied to all the children inside group
      rounded="none" // optional. for the border radius of the group
      className="" // optional. for the custom css style of the group
      maxCount={3} // optional. limits the number of elements shown on the group
      noSeparator={false} // optional. determines if separator should be shown or not
      shouldOverlapChildren={false} // optional. overlaps children to the left side inside the group. Often used with avatar components
      shouldWrap={true} // optional. determines if "flex-wrap" style should be applied
      truncatedElement={<TruncateElement />} // optional. when max count is available this element
      // shows the amount of children that are hidden
      // this element would receive a prop named "hiddenitems" which holds an array of hidden children from the group component
      shouldProvideHiddenChildren={true} // determines if "hiddenitems" should be passed on the truncated element
      childrenProps={{}} // optional. for applying common props to all children under the group component
    >
      <button>button 1</button>
      <button>button 1</button>
    </VKGroup>
  );
}

Label Component

import { VKLabel } from "@vivakits/react-components";

function App() {
  return (
    <VKLabel
      color="primary" // optional. for determining the text color for label
      decorationColor="secondary" // optional. for decoration color if decoration is available on label text
      align="start" // optional. applies "align-self" style to the label
      size="md" // optional. for different text sizes on label
      fontFamily="sansSerif" // optional. for applying different font family on the label
      decoration="underline" // optional. for applying different decorations on the label
      wordSpacing="normal" // optional. for different word spacing on the label
      weight="400" // optional. for applying different font weights on the label
      isRequired // optional. determines if the label is required. Puts a "*" after the label
      isDisabled // optional. determines if the label is disabled. Shown with "text-gray-600" color
      hasError // optional. determines if the label has error. Shown with "text-danger" color
      italic // optional. for applying italic text on the label
      bold // optional. for applying bold style on the label
      gutterBottom // optional. for applying extra margin at the bottom of the element
      gutterTop // optional.  for applying extra margin at the top of the element
      disableCopy // optional. for determining if the text can be copied
      className="" // optional. for applying custom css class on the label
      translationFn={translation} // optional. this accepts a translation function which is called with children as its parameter
      // if translationFn is available it would be called like "translationFn(children)" inside the label
    >
      Label
    </VKLabel>
  );
}

Title Component

import { VKTitle } from "@vivakits/react-components";

function App() {
  return (
    <VKTitle
      variant="h1" // optional. for determine the type of element to use for title. Currently "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "paragraph" available
      fontFamily="sansSerif" // optional. for applying different font family on the title
      color="primary" // optional. for determining the text color
      decorationColor="secondary" // optional. for decoration color if decoration is available
      size="lg" // optional. for different text sizes
      lineHeight="normal" // optional. for different line heights
      align="left" // optional. determines the text alignment property
      decoration="underline" // optional. for applying different decorations on the title
      overflow="truncate" // optional. for determining different text overflow on the title
      wordBreak="normal" // optional. for determining different word break on the title
      wordSpacing="normal" // optional. for different word spacing on the title
      weight="400" // optional. for applying different font weights on the title
      bold={true} // optional. for applying text bold on the title
      italic={true} // optional. for applying italic text on the title
      noWrap={true} // optional. determines if the text would wrap within the element
      gutterBottom={true} // optional. for applying extra margin at the bottom of the element
      disableCopy={true} // optional. for determining if the text can be copied
      className="" // optional. for custom css class on the title
      translationFn={translation} // optional. this accepts a translation function which is called with children as its parameter
      // if translationFn is available it would be called like "translationFn(children)" inside the title class
    >
      title
    </VKTitle>
  );
}