Rewrite select

package.json

@@ -55,9 +55,10 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-tooltip": "^1.0.6",
-    "cmdk": "^0.2.0",
     "lodash": "^4.17.21",
-    "react-syntax-highlighter": "^15.5.0"
+    "react-sortablejs": "^6.1.4",
+    "react-syntax-highlighter": "^15.5.0",
+    "sortablejs": "^1.15.0"
   },
   "devDependencies": {
     "@radix-ui/react-switch": "^1.0.2",
@@ -81,6 +82,7 @@
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@types/react-syntax-highlighter": "^15.5.7",
+    "@types/sortablejs": "^1.15.2",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",

src/components/Badge/Badge.tsx

@@ -1,5 +1,7 @@
 import styled from "styled-components";
-import { Icon } from "@/components";
+import { HorizontalDirection, Icon, IconName } from "@/components";
+import { HTMLAttributes, MouseEvent, ReactNode } from "react";
+import { EllipsisContainer } from "../commonElement";
 export type BadgeState =
   | "default"
   | "success"
@@ -11,24 +13,26 @@ export type BadgeState =
 
 export type BadgeSize = "sm" | "md";
 
-export interface BadgeProps {
-  text: string;
+export interface CommonBadgeProps extends HTMLAttributes<HTMLDivElement> {
+  text: ReactNode;
   state?: BadgeState;
   size?: BadgeSize;
+  icon?: IconName;
+  iconDir?: HorizontalDirection;
 }
 
-export interface DismissibleBadge extends BadgeProps {
+export interface DismissibleBadge extends CommonBadgeProps {
   dismissible: true;
-  onClose: () => void;
+  onClose: (e: MouseEvent<HTMLOrSVGElement>) => void;
 }
 
-export interface NonDismissibleBadge extends BadgeProps {
+export interface NonDismissibleBadge extends CommonBadgeProps {
   dismissible?: never;
   onClose?: never;
 }
 
 const Wrapper = styled.div<{ $state?: BadgeState; $size?: BadgeSize }>`
-  display: inline-block;
+  display: inline-flex;
   ${({ $state = "default", $size = "md", theme }) => `
     background-color: ${theme.click.badge.color.background[$state]};
     color: ${theme.click.badge.color.text[$state]};
@@ -45,29 +49,65 @@ const Content = styled.div<{ $state?: BadgeState; $size?: BadgeSize }>`
   gap: ${({ $size = "md", theme }) => theme.click.badge.space[$size].gap};
 `;
 
-const CrossContainer = styled.svg<{ $state?: BadgeState; $size?: BadgeSize }>`
+const SvgContainer = styled.svg<{ $state?: BadgeState; $size?: BadgeSize }>`
   ${({ $state = "default", $size = "md", theme }) => `
     color: ${theme.click.badge.color.text[$state]};
     height: ${theme.click.badge.icon[$size].size.height};
     width: ${theme.click.badge.icon[$size].size.width};
   `}
 `;
+const BadgeContent = styled(EllipsisContainer)<{
+  $state?: BadgeState;
+  $size?: BadgeSize;
+}>`
+  svg {
+    ${({ $state = "default", $size = "md", theme }) => `
+    color: ${theme.click.badge.color.text[$state]};
+    height: ${theme.click.badge.icon[$size].size.height};
+    width: ${theme.click.badge.icon[$size].size.width};
+    gap: inherit;
+  `}
+  }
+`;
+
+export type BadgeProps = NonDismissibleBadge | DismissibleBadge;
 
 export const Badge = ({
+  icon,
+  iconDir,
   text,
   state = "default",
   size,
   dismissible,
   onClose,
-}: NonDismissibleBadge | DismissibleBadge) => (
+  ...props
+}: BadgeProps) => (
   <Wrapper
     $state={state}
     $size={size}
+    {...props}
   >
     <Content>
-      {text}
+      {icon && iconDir === "start" && (
+        <SvgContainer
+          as={Icon}
+          name={icon}
+          $state={state}
+          $size={size}
+        />
+      )}
+      <BadgeContent>{text}</BadgeContent>
+      {icon && iconDir === "end" && (
+        <SvgContainer
+          as={Icon}
+          name={icon}
+          $state={state}
+          $size={size}
+        />
+      )}
+
       {dismissible && (
-        <CrossContainer
+        <SvgContainer
           name="cross"
           $state={state}
           as={Icon}

src/components/GenericMenu.tsx

@@ -97,7 +97,7 @@ export const GenericMenuItem = styled.div`
       color:${theme.click.genericMenu.item.color.text.hover};
       cursor: pointer;
     }
-    &[data-state="open"] {
+    &[data-state="open"], &[data-state-"checked"] {
       background:${theme.click.genericMenu.item.color.background.active};
       color:${theme.click.genericMenu.item.color.text.active};
       font: ${theme.click.genericMenu.item.typography.label.active};
@@ -114,4 +114,7 @@ export const GenericMenuItem = styled.div`
   &[data-state="open"] .dropdown-arrow {
     left: 0.5rem;
   }
+  &[hidden] {
+    display: none;
+  }
 `;

src/components/IconWrapper/IconWrapper.tsx

@@ -0,0 +1,55 @@
+import { ReactNode } from "react";
+import { HorizontalDirection, Icon, IconName } from "@/components";
+import { IconSize } from "@/components/Icon/types";
+import styled from "styled-components";
+import { EllipsisContainer } from "../commonElement";
+
+const LabelContainer = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  gap: ${({ theme }) => theme.click.sidebar.navigation.item.default.space.gap};
+`;
+
+const IconWrapper = ({
+  icon,
+  iconDir = "start",
+  size = "sm",
+  width,
+  height,
+  children,
+}: {
+  icon?: IconName;
+  iconDir?: HorizontalDirection;
+  children: ReactNode;
+  size?: IconSize;
+  width?: number | string;
+  height?: number | string;
+}) => {
+  return (
+    <LabelContainer>
+      {icon && iconDir === "start" && (
+        <Icon
+          name={icon}
+          size={size}
+          width={width}
+          height={height}
+        />
+      )}
+      <EllipsisContainer>{children}</EllipsisContainer>
+      {icon && iconDir === "end" && (
+        <Icon
+          name={icon}
+          size={size}
+          width={width}
+          height={height}
+        />
+      )}
+    </LabelContainer>
+  );
+};
+export default IconWrapper;

src/components/Select/MultiSelect.stories.tsx

@@ -0,0 +1,137 @@
+import { Icon } from "@/components";
+import { MultiSelect, MultiSelectProps } from "./MultiSelect";
+import { selectOptions } from "./selectOptions";
+import { useEffect, useState } from "react";
+interface Props extends Omit<MultiSelectProps, "value"> {
+  clickableNoData?: boolean;
+  value: string;
+  childrenType: "children" | "options";
+}
+const MultiSelectExample = ({
+  clickableNoData,
+  childrenType,
+  value,
+  ...props
+}: Props) => {
+  const [selectedValues, setSelectedValues] = useState(
+    value ? value.split(",") : undefined
+  );
+  useEffect(() => {
+    setSelectedValues(value ? value.split(",") : undefined);
+  }, [value]);
+
+  if (childrenType === "options") {
+    return (
+      <MultiSelect
+        value={selectedValues}
+        onCreateOption={
+          clickableNoData ? search => console.log("Clicked ", search) : undefined
+        }
+        options={selectOptions}
+        onChange={value => setSelectedValues(value)}
+        {...props}
+      />
+    );
+  }
+  return (
+    <MultiSelect
+      value={value ? value.split(",") : undefined}
+      onCreateOption={
+        clickableNoData ? search => console.log("Clicked ", search) : undefined
+      }
+      {...props}
+    >
+      <MultiSelect.Group heading="Group label">
+        <MultiSelect.Item value="content0">
+          <Icon name="user" />
+          Content0
+        </MultiSelect.Item>
+      </MultiSelect.Group>
+      <div>
+        <MultiSelect.Item value="content1">Content1 long text content</MultiSelect.Item>
+      </div>
+      <MultiSelect.Item
+        value="content2"
+        label="Content2"
+      />
+      <MultiSelect.Item value="content3">Content3</MultiSelect.Item>
+    </MultiSelect>
+  );
+};
+export default {
+  component: MultiSelectExample,
+  title: "Forms/MultiSelect",
+  tags: ["form-field", "select", "autodocs"],
+  argTypes: {
+    label: { control: "text" },
+    disabled: { control: "boolean" },
+    sortable: { control: "boolean" },
+    error: { control: "text" },
+    value: { control: "text" },
+    defaultValue: { control: "text" },
+    name: { control: "text" },
+    required: { control: "boolean" },
+    showSearch: { control: "boolean" },
+    form: { control: "text" },
+    clickableNoData: { control: "boolean" },
+    showCheck: { control: "boolean" },
+    orientation: { control: "inline-radio", options: ["horizontal", "vertical"] },
+    dir: { control: "inline-radio", options: ["start", "end"] },
+  },
+};
+
+export const Playground = {
+  args: {
+    label: "Label",
+    value: "content1",
+    showSearch: true,
+    childrenType: "children",
+  },
+  parameters: {
+    docs: {
+      source: {
+        transform: (_: string, story: { args: Props; [x: string]: unknown }) => {
+          const { clickableNoData, childrenType, value, ...props } = story.args;
+          return `<MultiSelect\n  value={${JSON.stringify((value ?? "").split(","))}}\n${
+            clickableNoData
+              ? "  onCreateOption={search => console.log('Clicked ', search)}\n"
+              : ""
+          }
+          ${Object.entries(props)
+            .flatMap(([key, value]) =>
+              typeof value === "boolean"
+                ? value
+                  ? `  ${key}`
+                  : []
+                : `  ${key}=${typeof value == "string" ? `"${value}"` : `{${value}}`}`
+            )
+            .join("\n")}
+${childrenType === "options" ? "/" : ""}>
+${
+  childrenType !== "options"
+    ? `
+    <MultiSelect.Group heading="Group label">
+      <MultiSelect.Item value="content0">
+        <Icon name="user" />
+        Content0
+      </MultiSelect.Item>
+    </MultiSelect.Group>
+    <div>
+      <MultiSelect.Item value="content1">Content1 long text content</MultiSelect.Item>
+    </div>
+    <MultiSelect.Item
+      value="content2"
+      disabled
+    >
+      Content2
+    </MultiSelect.Item>
+    <MultiSelect.Item value="content3">Content3</MultiSelect.Item>
+</Select>
+`
+    : ""
+}`;
+        },
+      },
+    },
+  },
+};