Installation

pnpm i tags-ui-test

Usage

import { TagFilter, TagSelector, TagTable } from "tags-ui-test";

TagFilter Component

import { TagFilter } from "tags-ui-test";

function App() {
  const tags = [
    { id: "1", name: "React", color: "#61dafb" },
    { id: "2", name: "TypeScript", color: "#3178c6" },
    { id: "3", name: "JavaScript", color: "#f7df1e" },
  ];

  return (
    <TagFilter
      tags={tags}
      onChange={(tag) => console.log("Selected:", tag)}
      onManageTags={() => console.log("Manage tags clicked")}
      buttonLabel="Tags"
    />
  );
}

TagSelector Component

import { TagSelector } from "tags-ui-test";

function App() {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedTags, setSelectedTags] = useState([]);

  const availableTags = [
    { id: "1", name: "React", color: "#61dafb" },
    { id: "2", name: "TypeScript", color: "#3178c6" },
  ];

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Tag Selector</button>

      <TagSelector
        availableTags={availableTags}
        selectedTags={selectedTags}
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onTagsChange={(tags) => setSelectedTags(tags)}
        onManage={() => console.log("Manage clicked")}
        title="Add tags"
        description="Select tags to categorize items"
      />
    </>
  );
}

TagTable Component

import { TagTable } from "tags-ui-test";

function App() {
  const tags = [
    {
      id: "1",
      tag: { id: "1", name: "Urgent", color: "#ef4444" },
      entitiesTagged: 5,
      description: "Items that need immediate attention",
    },
    // ...
  ];

  return (
    <TagTable
      tags={tags}
      showAdminActions={true}
      onTagsChange={(newTags) => console.log("Tags updated:", newTags)}
      onReplace={(oldId, newId) => console.log("Replace:", oldId, newId)}
      onDelete={(id) => console.log("Delete:", id)}
    />
  );
}

DeleteTagModal Component

import { DeleteTagModal } from "tags-ui-test";

function App() {
  const [isOpen, setIsOpen] = useState(false);
  const tagToDelete = {
    id: "1",
    tag: { id: "1", name: "Urgent", color: "#ef4444" },
    entitiesTagged: 5,
    description: "Items that need immediate attention",
  };

  return (
    <DeleteTagModal
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
      tagToDelete={tagToDelete}
      availableTags={[]} // other tags for replacement
      onReplace={(oldId, newId) => console.log("Replace", oldId, newId)}
      onDelete={(id) => console.log("Delete", id)}
    />
  );
}

ColorPicker Component

import { ColorPicker } from "tags-ui-test";

function App() {
  const [color, setColor] = useState("#ef4444");
  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);

  return (
    <>
      <button onClick={(e) => setAnchorEl(e.currentTarget)}>Pick Color</button>
      {anchorEl && (
        <ColorPicker
          anchorEl={anchorEl}
          selectedColor={color}
          onColorSelect={(c) => setColor(c)}
          onClose={() => setAnchorEl(null)}
        />
      )}
    </>
  );
}

EmptyState Component

import { EmptyState } from "tags-ui-test";

function App() {
  return <EmptyState description="No tags found" />;
}