Shared:Components:Tags Added test and README.md

packages/shared/components/tags/README.md

@@ -1,24 +1,82 @@
-# Room logo
+# Tags Component
 
-Tags allow you display virtual room tags
+The `Tags` component is used to display tags.
 
-### Usage
+## Properties
 
-```js
-import Tags from "@docspace/components/tags";
-```
+| Property      | Type                       | Required | Default | Description                                         |
+| ------------- | -------------------------- | -------- | ------- | --------------------------------------------------- |
+| `id`          | `string`                   | No       | -       | Accepts an id.                                      |
+| `tags`        | `Array<TagType \| string>` | Yes      | -       | Accepts the tags.                                   |
+| `className`   | `string`                   | No       | -       | Accepts a class.                                    |
+| `columnCount` | `number`                   | Yes      | -       | Accepts the tag column count.                       |
+| `style`       | `React.CSSProperties`      | No       | -       | Accepts CSS styles.                                 |
+| `onSelectTag` | `(tag?: string) => void`   | Yes      | -       | Accepts the function called when a tag is selected. |
+
+### Property `id`
+
+- Type: `string`
+- Required: No
+- Default: -
+- Description: Accepts an id.
+
+### Property `tags`
+
+- Type: `Array<TagType | string>`
+- Required: Yes
+- Default: -
+- Description: Accepts the tags.
+
+### Property `className`
+
+- Type: `string`
+- Required: No
+- Default: -
+- Description: Accepts a class.
+
+### Property `columnCount`
+
+- Type: `number`
+- Required: Yes
+- Default: -
+- Description: Accepts the tag column count.
+
+### Property `style`
+
+- Type: `React.CSSProperties`
+- Required: No
+- Default: -
+- Description: Accepts CSS styles.
+
+### Property `onSelectTag`
+
+- Type: `(tag?: string) => void`
+- Required: Yes
+- Default: -
+- Description: Accepts the function called when a tag is selected.
+
+## Usage Example
 
 ```jsx
-<Tags
-  tag=["tag1","tag2"]
-  onSelectTag={}
-/>
-```
+import React from "react";
+import Tags from "@docspace/shared/components";
 
-| Props         |      Type      | Required | Values | Default | Description                                        |
-| ------------- | :------------: | :------: | :----: | :-----: | -------------------------------------------------- |
-| `id`          |    `string`    |    -     |   -    |    -    | Accepts id                                         |
-| `className`   |    `string`    |    -     |   -    |    -    | Accepts class                                      |
-| `style`       | `obj`, `array` |    -     |   -    |    -    | Accepts css style                                  |
-| `tags`        |    `array`     |    -     |   -    |    -    | Accepts tags                                       |
-| `onSelectTag` |   `function`   |    -     |   -    |    -    | Accepts the function that called when tag selected |
+const MyComponent = () => {
+  const handleTagSelection = (selectedTag) => {
+    console.log("Selected tag:", selectedTag);
+  };
+
+  return (
+    <Tags
+      id="myTags"
+      tags={["tag1", "tag2", "tag3"]}
+      className="custom-tags"
+      columnCount={2}
+      style={{ color: "blue" }}
+      onSelectTag={handleTagSelection}
+    />
+  );
+};
+
+export default MyComponent;
+```

packages/shared/components/tags/Tags.test.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+import { Tags } from "./Tags";
+import type { TagsProps } from "./Tags.types";
+
+const baseProps: TagsProps = {
+  tags: ["tag1", "tag2"],
+  columnCount: 2,
+  onSelectTag: () => {},
+};
+
+describe("<Tags />", () => {
+  it("renders without error", () => {
+    render(<Tags {...baseProps} />);
+
+    expect(screen.getByTestId("tags"));
+  });
+});