Zolastic-component-library-experiment NPM

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.

zolastic component library experiment

@radix-ui/react-icons @radix-ui/react-scroll-area @radix-ui/react-select @types/react-dom classnames clsx lucide-react react react-dom

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago