feat(react): add DropDownTree component

js/react/lib/components/dropdown-tree/dropdown-tree.end.tsx

@@ -0,0 +1,21 @@
+import { ArrowRight } from "@/icons";
+import { withAs } from "@/utils/hoc";
+import { PropsWithChildren } from "react";
+
+type DropdownTreeEndProps = {
+  title: string;
+} & PropsWithChildren;
+
+export const DropdownTreeEnd = withAs(
+  (Component, props: DropdownTreeEndProps) => {
+    const { title, children, ...rest } = props;
+    return (
+      <Component className="dropdown-tree-end" {...rest}>
+        <span className="text-h5">
+          {title} <ArrowRight width={24} height={24} />
+        </span>
+        <span className="text-paragraph-1">{children}</span>
+      </Component>
+    );
+  }
+);

js/react/lib/components/dropdown-tree/dropdown-tree.start.tsx

@@ -0,0 +1,43 @@
+import { PropsWithChildren } from "react";
+import { ArrowDown } from "@/icons";
+import { Badge } from "../badge";
+import { Level } from "../level";
+import { TopicElement } from "./dropdown-tree.types";
+import { cn } from "@/utils/tw-merge";
+
+const DROPDOWN_TREE_START_VARIANT = {
+  default: "rustlanges-dropdown-tree-start--default",
+  extended: "rustlanges-dropdown-tree-start--extended",
+};
+
+type StartProps = {
+  variant: keyof typeof DROPDOWN_TREE_START_VARIANT;
+} & PropsWithChildren &
+  TopicElement;
+
+export const DropdownTreeStart = ({
+  level,
+  variant,
+  title,
+  state,
+  children,
+}: StartProps) => {
+  return (
+    <details
+      className={cn([
+        "rustlanges-dropdown-tree-start",
+        DROPDOWN_TREE_START_VARIANT[variant],
+      ])}
+    >
+      <summary>
+        <Badge type="text" variant={state} />
+        <Level as="span" variant={level} />
+        <span className="text-h5 rustlanges-dropdown-tree-start__title">
+          {title}
+        </span>
+        <ArrowDown width={24} height={24} />
+      </summary>
+      <div>{children}</div>
+    </details>
+  );
+};

js/react/lib/components/dropdown-tree/dropdown-tree.subject.tsx

@@ -0,0 +1,33 @@
+import { InputHTMLAttributes, PropsWithChildren } from "react";
+import { ArrowDown } from "@/icons";
+import { Badge } from "../badge";
+import { Level } from "../level";
+import { TopicElement } from "./dropdown-tree.types";
+import { Radio } from "../radio";
+
+type SubjectProps = PropsWithChildren &
+  TopicElement &
+  InputHTMLAttributes<HTMLInputElement>;
+export const DropdownTreeSubject = ({
+  level,
+  title,
+  state,
+  children,
+  ...rest
+}: SubjectProps) => {
+  return (
+    <details className="rustlanges-dropdown-tree-subject">
+      <summary>
+        <Badge type="text" variant={state} />
+        <Level as="span" variant={level} />
+        <span className="text-h5 rustlanges-dropdown-tree-subject__title">
+          {title}
+        </span>
+        <ArrowDown width={24} height={24} />
+        <Radio {...rest} />
+      </summary>
+
+      <div>{children}</div>
+    </details>
+  );
+};

js/react/lib/components/dropdown-tree/dropdown-tree.subtopic.tsx

@@ -0,0 +1,22 @@
+import { Badge } from "../badge";
+import { Level } from "../level";
+import { withAs } from "@/utils/hoc";
+import { TopicElement } from "./dropdown-tree.types";
+
+export const DropdownTreeSubTopic = withAs(
+  (Component, { level, state, title, ...rest }: TopicElement) => {
+    return (
+      <Component
+        {...rest}
+        tabIndex={0}
+        className="rustlanges-dropdown-tree-subtopic"
+      >
+        <Level variant={level} />
+        <span className="rustlanges-dropdown-tree-subtopic__title">
+          {title}
+        </span>
+        <Badge type="default" variant={state} />
+      </Component>
+    );
+  }
+);

js/react/lib/components/dropdown-tree/dropdown-tree.topic.tsx

@@ -0,0 +1,28 @@
+import { PropsWithChildren } from "react";
+import { ArrowDown } from "@/icons";
+import { Badge } from "../badge";
+import { Level } from "../level";
+import { TopicElement } from "./dropdown-tree.types";
+
+type DropdownTreeTopicProps = PropsWithChildren & TopicElement;
+
+export const DropdownTreeTopic = ({
+  level,
+  title,
+  state,
+  children,
+}: DropdownTreeTopicProps) => {
+  return (
+    <details className="rustlanges-dropdown-tree-topic">
+      <summary>
+        <Level as="span" variant={level} />
+        <span className="text-h6 rustlanges-dropdown-tree-topic__title">
+          {title}
+        </span>
+        <Badge type="default" variant={state} />
+        <ArrowDown width={24} height={24} />
+      </summary>
+      <div>{children}</div>
+    </details>
+  );
+};

js/react/lib/components/dropdown-tree/index.ts

@@ -0,0 +1,13 @@
+import { DropdownTreeStart } from "./dropdown-tree.start";
+import { DropdownTreeSubject } from "./dropdown-tree.subject";
+import { DropdownTreeTopic } from "./dropdown-tree.topic";
+import { DropdownTreeSubTopic } from "./dropdown-tree.subtopic";
+import { DropdownTreeEnd } from "./dropdown-tree.end";
+
+export const DropdownTree = {
+  Start: DropdownTreeStart,
+  Subject: DropdownTreeSubject,
+  Topic: DropdownTreeTopic,
+  SubTopic: DropdownTreeSubTopic,
+  End: DropdownTreeEnd,
+};

js/react/lib/index.ts

@@ -11,5 +11,5 @@ export * from "./components/radio";
 export * from "./components/badge";
 export * from "./components/dropdown";
 export * from "./components/calendar";
-export * from "./components/topic";
+export * from "./components/dropdown-tree";
 export * from "./icons";