zolastic-component-library-experiment

v1.2.2

Published

5 months ago

Learning how to make a component library

Downloads

0High
0Medium
0Low

zolastic

zolastic component library experiment

Zolastic Component Library Experiment

This is a component library created for learning purposes. It includes a variety of reusable components that can be used in your React projects.

NPM

You can find this package on npm here.

GitHub

You can find the source code for this package on GitHub here.

Installation

To install the library, you can use npm:

npm install zolastic-component-library-experiment

Usage

After installation, you can import the components from the library like this:

import { Button } from 'zolastic-component-library-experiment';

Then, you can use the components in your React components:

const MyComponent = () => {
  return <Button label="Click me" />;
};

Importing Component Styles

To ensure the styling of the components in Zolastic Component Library Experiment works correctly, you need to import the provided CSS file into your project.

import "zolastic-component-library-experiment/dist/index.css";

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import "zolastic-component-library-experiment/dist/index.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

Components

Currently, the library includes the following components:

Button
Select
More components will be added in the future.

Select Component

Select

import React from "react";

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "zolastic-component-library-experiment";

const SelectDemo = () => {
  return (
    <Select>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Theme" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="light">Light</SelectItem>
        <SelectItem value="dark">Dark</SelectItem>
        <SelectItem value="system">System</SelectItem>
      </SelectContent>
    </Select>
  );
};

export default SelectDemo;

| Component | Description | |-------------------|-------------------------------------------------------------------------------------------------------| | SelectTrigger | The trigger component of the <Select> dropdown. | | SelectValue | The component used to display the selected value. | | SelectContent | The content component of the <Select> dropdown, containing selectable options. | | SelectItem | Individual selectable item within the <SelectContent>. |

| Prop Name | Description | |-------------------|-------------------------------------------------------------------------------------------------------| | onValueChange | A callback function is invoked when the selected value changes. Receives the newly selected value as an argument. | | defaultValue | The default value of the <Select> component. | | disabled | A boolean indicating whether the <Select> component is disabled. | | placeholder | The placeholder text is displayed when no option is selected. (Used in the <SelectValue> component) |

Select with TanStack Virtual

import React from "react";

import {
  Select,
  SelectContentTanStackVirtual,
  SelectContentTanStackVirtualItem,
  SelectTrigger,
  SelectValue,
} from "zolastic-component-library-experiment";

const SelectTanStackVirtualDemo = () => {
  const data: SelectContentTanStackVirtualItem[] = Array.from(
    { length: 15 },
    (_, i) => ({
      label: `Option ${i + 1}`,
      value: `option-${i + 1}`,
    })
  );

  return (
    <Select>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Options" />
      </SelectTrigger>
      <SelectContentTanStackVirtual data={data} />
    </Select>
  );
};

export default SelectTanStackVirtualDemo;

| Component | Description | |-------------------|-------------------------------------------------------------------------------------------------------| | SelectTrigger | The trigger component of the <Select> dropdown. | | SelectValue | The component used to display the selected value. | | SelectContentTanStackVirtual | The content component of the <Select> dropdown, containing selectable options. |

| Prop Name | Description | |-----------|-----------------------------------------------------------------------------------------------------| | data | An array of objects representing the options to be displayed in the <SelectContentTanStackVirtual>. Each object should have label and value properties. |

MultiSelect

import React from "react";
import {
  MultiSelect,
  MultiSelectItem,
} from "zolastic-component-library-experiment";

type Props = {};

const MultiSelectDemo = (props: Props) => {
  const data: MultiSelectItem[] = Array.from({ length: 100 }, (_, i) => ({
    label: `Option ${i + 1}`,
    value: `option-${i + 1}`,
  }));

  return <MultiSelect items={data} />;
};

export default MultiSelectDemo;

| Prop Name | Description | |-------------------------|------------------------------------------------------------------------------------------------------| | items | An array of objects representing the selectable items in the dropdown. Each object should have label and value properties. | | selectedItems | An optional array of objects representing the initially selected items in the dropdown. | | placeholderText | The text to display as a placeholder when no item is selected. | | notFoundText | Optional text to display when no items are found in the dropdown. | | badgeVariant | The variant of the badge used to display selected items. Can be one of "default", "primary", or "secondary". | | badgeClassName | Optional class name to be applied to the badge component. | | width | The width of the MultiSelect component. | | inputHeight | The height of the input field. | | selectContentMaxHeight | The maximum height of the dropdown content. | | inputScrollable | A boolean indicating whether the input field should be scrollable if the content exceeds its height. | | maxSelectedItems | The maximum number of items that can be selected. | | hidePlaceholderWhenSelected | A boolean indicating whether to hide the placeholder text when items are selected. | | disabled | A boolean indicating whether the MultiSelect component is disabled. | | defaultOpen | A boolean indicating whether the dropdown should be open by default. | | onMaxSelected | An optional callback function invoked when the maximum number of items is selected. | | onSelect | A callback function is invoked when an item is selected. | | onUnselect | A callback function is invoked when an item is unselected. | | onOpen | A callback function is invoked when the dropdown is opened or closed. |

Tag Component

Tag

import React from "react";
import { Tag } from "zolastic-component-library-experiment";

const TagDemo = () => {
  return <Tag>Tag</Tag>;
};

export default TagDemo;

| Prop Name | Description | |-----------|--------------------------------------------------------------------------------------------------| | className | Additional CSS classes to apply to the tag container. | | variant | The variant of the tag. Can be one of "default", "primary", or "secondary". | | closeable | Whether the Tag can be closed. Default is false. If true, a close button will be displayed. | | onClose | Callback when the Tag is closed. | | icon | Icon to display alongside the Tag text. Default is null. | | disabled | Whether the Tag is disabled. Default is false. | | border | Whether the Tag has a border. Default is true. |

Checkable Tag

import React from "react";
import { CheckableTag } from "zolastic-component-library-experiment";

const CheckableTagDemo = () => {
  return <CheckableTag>CheckableTag</CheckableTag>;
};

export default CheckableTagDemo;

| Prop Name | Description | |----------------------|----------------------------------------------------------------------------------------------------------------------| | className | Additional CSS classes to apply to the tag container. | | variant | The variant of the tag. Can be one of "default", "primary", or "secondary". | | checked | Whether the Tag is checked by default. Default is false. | | checkedBackgroundColor | Background color when Tag is checked. Default is "#DDD2F0". | | checkedTextColor | Text color when Tag is checked. Default is "#482384". | | onClickTag | Callback when the Tag is clicked. | | closeable | Whether the Tag can be closed. Default is false. If true, a close button will be displayed. | | onClose | Callback when the Tag is closed. | | icon | Icon to display alongside the Tag text. Default is null. | | disabled | Whether the Tag is disabled. Default is false. | | border | Whether the Tag has a border. Default is true. |

Contributing

As this is a learning project, contributions are not currently being accepted. However, you're welcome to fork the project and make your own modifications.