dst-rg 1.0.0

package/src/components/developers/AmirHossein.tsx

@@ -0,0 +1,149 @@
+import { Input } from "@/components/Input";
+import { InputTags } from "@/components/InputTags";
+import { TextArea } from "@/components/TextArea";
+import Email from "@/icons/general/email";
+import React, { memo, useState } from "react";
+
+const MemoAmirHossein = () => {
+  const [inputValue, setInputValue] = useState<string>("");
+  const [textAreaValue, setTextAreaValue] = useState<string>("");
+
+  const inputHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  const textareaHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setTextAreaValue(e.target.value);
+  };
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
+      <Input
+        size="sm"
+        type="email"
+        label="Email"
+        required={true}
+        placeholder="Enter your password"
+        onChange={inputHandler}
+        className="w-full"
+        value={inputValue}
+        name="email"
+        icon={Email}
+        inputType="iconLeading"
+      />
+
+      <Input
+        size="sm"
+        type="password"
+        inputType="default"
+        label="Password"
+        required={true}
+        placeholder="Enter your password"
+        onChange={inputHandler}
+        className="w-full"
+        value={inputValue}
+        name="password"
+      />
+
+      <Input
+        tooltipProps={{
+          text: "This is a tooltip",
+          description:
+            "Tooltips are used to describe or identify an element. In most scenarios",
+          position: "top",
+          dir: "ltr",
+          descriptionClassName: "max-w-[260px] w-full",
+        }}
+        destructive={false}
+        destructiveText="error text"
+        size="sm"
+        type="text"
+        inputType="trailingDropdown"
+        icon={Email}
+        label="Email"
+        required={true}
+        hintText="This is a hint text to help user."
+        placeholder="Enter your email"
+        // disabled={true}
+        helpIcon={true}
+        leadingTextValue="http"
+        trailingDropdownOptions={[
+          { title: "usd", value: 1, icon: "$" },
+          { title: "pound", value: 2, icon: "£" },
+          { title: "euro", value: 3, icon: "€" },
+        ]}
+        trailingDropdownDefault={{ title: "usd", value: 1, icon: "$" }}
+        onChange={inputHandler}
+        className="w-full"
+        // className="min-w-[400px] max-w-[400px]"
+        // need this value when type is "trailingButton" to copy to clipboard
+        value={inputValue}
+        trailingButtonText="Copy"
+        name="Email"
+      />
+
+      <TextArea
+        row={3}
+        tooltipProps={{
+          text: "This is a tooltip",
+          description:
+            "Tooltips are used to describe or identify an element. In most scenarios",
+          position: "top",
+          dir: "ltr",
+          descriptionClassName: "max-w-[260px] w-full",
+        }}
+        // disabled={true}
+        // destructive={true}
+        destructiveText="This is an error message."
+        label="Description"
+        helpIcon={true}
+        required={true}
+        hintText="This is a hint text to help user."
+        placeholder="Enter a description..."
+        className="w-full"
+        onChange={textareaHandler}
+        value={textAreaValue}
+        name="description"
+        autoFocus
+      />
+
+      <InputTags
+        tooltipProps={{
+          text: "This is a tooltip",
+          description:
+            "Tooltips are used to describe or identify an element. In most scenarios",
+          position: "top",
+          dir: "ltr",
+          descriptionClassName: "max-w-[260px] w-full",
+        }}
+        destructive={false}
+        destructiveText="error text"
+        size="sm"
+        label="Tags"
+        required={true}
+        hintText="This is a hint text to help user."
+        placeholder="Enter your tag"
+        helpIcon={true}
+        onChange={(tags: string[]) => console.log("tags", tags)}
+        name="tags"
+      />
+
+      <Input
+        size="sm"
+        type="number"
+        inputType="shaba"
+        label="شماره شبا"
+        required={true}
+        placeholder="شماره شبا را وارد کنید"
+        onChange={inputHandler}
+        className="w-full"
+        value={inputValue}
+        name="shaba"
+      />
+    </div>
+  );
+};
+
+const AmirHossein = memo(MemoAmirHossein);
+
+export default AmirHossein;

package/src/components/developers/Fardin.tsx

@@ -0,0 +1,130 @@
+import { Pagination } from "@/components/Pagination";
+import { Progress } from "@/components/Progress/index";
+import CircleMinues from "@/icons/general/circle-minues";
+import CirclePlus from "@/icons/general/circle-plus";
+import { memo, useState } from "react";
+import { AccordionDemo } from "../Accordion";
+import { Breadcrumb } from "../Breadcrumbs";
+import { Button } from "../Button";
+import { PriceSlider } from "../PriceSlider";
+import { Switch } from "../Switch";
+import { TooltipWrapper } from "../Tooltip";
+
+const MemoFardin = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const totalPages = 10;
+
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+    console.log("صفحه تغییر کرد:", page);
+  };
+  const Breadcrumbs = [
+    { title: "دسته بندی", link: "/category" },
+    { title: "زیر دسته بندی ", link: "/subcategory" },
+    { title: "محصولات", link: "/product" },
+  ];
+  const faqItems = [
+    {
+      question: "How can I track my order?",
+      answer:
+        "You can track your order by logging into your account and navigating to the 'Orders' section where the order status will be displayed.",
+    },
+    {
+      question: "Can I return a product?",
+      answer:
+        "Yes, you can request a return within 7 days of receiving the product, as long as it is unused and in its original packaging.",
+    },
+    {
+      question: "How is the shipping cost calculated?",
+      answer:
+        "Shipping cost is calculated based on your location and the weight of your package. It will be shown during checkout.",
+    },
+    {
+      question: "What payment methods are available?",
+      answer:
+        "We accept online payments, bank transfers, and cash on delivery (COD) depending on your location.",
+    },
+    {
+      question: "How can I reset my password?",
+      answer:
+        "Click on the 'Forgot password?' link on the login page and follow the instructions to reset your password via email.",
+    },
+  ];
+
+  return (
+    <>
+      <Progress
+        value={90}
+        indicatorVariant="bg-rfg-brand-primary-600"
+        backgroundVariant="bg-rbg-quaternary"
+      />
+      <Progress
+        type="half-circle"
+        value={90}
+        label={70}
+        size="md"
+        strokeWidth={12}
+        indicatorVariant="stroke-rose-500"
+        svgClassName="rotate-[0deg]"
+      />
+
+      <Switch
+        id="switch"
+        label="مرا به خاطر بسپار"
+        description="جزئیات ورود من را برای دفعه بعد ذخیره کن."
+        onToggle={() => alert("تغییر وضعیت سوئیچ")}
+      />
+      <TooltipWrapper
+        content="This is a tooltip"
+        description="Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text."
+        position="top"
+        dir="ltr"
+        descriptionClassName="max-w-[260px] w-full"
+      >
+        <Button>نمایش TooltipWrapper</Button>
+      </TooltipWrapper>
+      <Breadcrumb breadCrumbLink={Breadcrumbs} dir="ltr" />
+      <div className="mt-6">
+        <AccordionDemo
+          items={faqItems}
+          accordionClassName="border border-white rounded-md bg-white p-6"
+          itemClassName="border-b border-gray-200"
+          questionClassName="text-lg font-bold text-blue-700"
+          answerClassName="text-sm text-gray-600"
+          type="single"
+          iconClosed={CirclePlus}
+          iconOpen={CircleMinues}
+          collapsible={true}
+        />
+        <div className="mt-6">
+          <PriceSlider
+            min={0}
+            max={10000000}
+            defaultValue={[1000000, 5000000]}
+            onValueChange={(range) => console.log("انتخاب شده:", range)}
+            showValue
+            className="w-[500px]"
+
+          />
+        </div>
+        <div className="mt-10">
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={handlePageChange}
+            activeClassName="bg-brand-700 border-brand-700 text-white"
+            hasText={false}
+            showFirstLast={false}
+          // dir="rtl"
+          // type="card-button-group-right-aligned"
+          // hasText={false}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+const Fardin = memo(MemoFardin);
+export default Fardin;

package/src/components/developers/Maryam.tsx

@@ -0,0 +1,260 @@
+import { memo, useState } from "react";
+
+import MasterCard from "@/icons/general/master-card";
+import { Checkbox } from "../Checkbox";
+import { PaymentCard } from "../CheckboxGroup/PaymentCard/index";
+import { PlanCard } from "../CheckboxGroup/PlanCard";
+import { UserCard } from "../CheckboxGroup/UserCard";
+import IconWrapper from "../ui/icon-wrapper";
+import { Radio } from "../Radio";
+
+const MemoMaryam = () => {
+  const [radio, setRadio] = useState("radio1");
+  const [simpleRadio, setSimpleRadio] = useState("radio1");
+  const [checkedValues, setChecked] = useState<string[]>([]);
+  const handleChangeCheckbox = (value: string) => {
+    setChecked((prev) =>
+      prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]
+    );
+  };
+  const handleChangeRadio = (value: string) => {
+    setRadio(value);
+  };
+
+  return (
+    <div className=" gap-2 grid grid-cols-4">
+      <div className="space-y-2 [&>*]:space-y-2">
+        <div className="space-x-2">
+          <Checkbox
+            id={"5"}
+            value={"value"}
+            label="چکباکس"
+            size={"md"}
+            name="checkbox-plan-card-8"
+            checkboxIndex={6}
+            checked={checkedValues.includes("checkbox-plan-card-8")}
+            onChange={() => handleChangeCheckbox("checkbox-plan-card-8")}
+          />
+        </div>
+        <div>
+          plan card radio
+          <PlanCard
+            type="radio"
+            checkboxIndex={20}
+            title={"Basic Plan"}
+            price={"$20"}
+            per={"month"}
+            size={"md"}
+            headerTitle={"Subscribe to newsletter"}
+            description={
+              "Get the latest updates} articles} and promotions delivered to your inbox."
+            }
+            badgeContent={"limited time only"}
+            value={"basic-plan2"}
+            checked={radio === "radio2"}
+            onChange={() => handleChangeRadio("radio2")}
+          />
+          <PlanCard
+            type="radio"
+            checkboxIndex={19}
+            title={"Basic Plan"}
+            price={"$20"}
+            per={"month"}
+            size={"md"}
+            headerTitle={"Subscribe to newsletter"}
+            description={
+              "Get the latest updates} articles} and promotions delivered to your inbox."
+            }
+            badgeContent={"limited time only"}
+            value={"basic-plan2"}
+            checked={radio === "radio3"}
+            onChange={() => handleChangeRadio("radio3")}
+          />
+        </div>
+        <div>
+          plan card basic checkbox
+          <PlanCard
+            checkboxIndex={18}
+            title={"Basic Plan"}
+            price={"$250"}
+            per={"month"}
+            hasHeader={true}
+            size={"md"}
+            headerTitle={"Subscribe to newsletter"}
+            description={
+              "Get the latest updates articles and promotions delivered to your inbox."
+            }
+            badgeContent={"limited time only"}
+            id={"checkbox-plan-card-1"}
+            value={"checkbox-plan-card-1"}
+            checked={checkedValues.includes("checkbox-plan-card-1")}
+            onChange={() => handleChangeCheckbox("checkbox-plan-card-1")}
+            onCardClick={() => handleChangeCheckbox("checkbox-plan-card-1")}
+          />
+          <PlanCard
+            checkboxIndex={8}
+            title={"Basic Plan"}
+            price={"$20"}
+            per={"month"}
+            hasHeader={true}
+            size={"md"}
+            headerTitle={"Subscribe to newsletter"}
+            description={
+              "Get the latest updates articles and promotions delivered to your inbox."
+            }
+            badgeContent={"limited time only"}
+            id={"checkbox-plan-card-2"}
+            value={"checkbox-plan-card-2"}
+            checked={checkedValues.includes("checkbox-plan-card-2")}
+            onChange={() => handleChangeCheckbox("checkbox-plan-card-2")}
+            onCardClick={() => handleChangeCheckbox("checkbox-plan-card-2")}
+          />
+        </div>
+        <div>
+          payment Card radio
+          <PaymentCard
+            type="radio"
+            size="sm"
+            value="radio2"
+            name="radio-group"
+            title="title"
+            checkboxIndex={16}
+            onChange={(e) => setRadio(e.target.value)}
+            cardOnclick={() => setRadio("radio2")}
+            checked={radio === "radio2"}
+            icon={
+              <IconWrapper
+                className="!h-8 !w-[46px]"
+                data-testid="icon-wrapper"
+              >
+                <MasterCard />
+              </IconWrapper>
+            }
+            description="Expiry 06/2024"
+            footer={
+              <div className="text-muted-foreground gap-3 text-sm font-semibold flex">
+                <span>set as default</span>
+                <span className="text-brand-700">Edit</span>
+              </div>
+            }
+          />
+          <PaymentCard
+            type="radio"
+            size="sm"
+            value="radio1"
+            name="radio-group"
+            title="title"
+            checkboxIndex={15}
+            onChange={(e) => setRadio(e.target.value)}
+            cardOnclick={() => setRadio("radio1")}
+            checked={radio === "radio1"}
+            // disabled
+            icon={
+              <IconWrapper
+                className="!h-8 !w-[46px]"
+                data-testid="icon-wrapper"
+              >
+                <MasterCard />
+              </IconWrapper>
+            }
+            description="Expiry 06/2024"
+            footer={
+              <div className="text-muted-foreground  gap-3 text-sm font-semibold flex">
+                <span>set as default</span>
+                <span className="text-brand-700">Edit</span>
+              </div>
+            }
+          />
+        </div>
+        <div>
+          user Card radio
+          <UserCard
+            size="sm"
+            checkboxIndex={14}
+            id="id"
+            name="card-group"
+            username="@maryam"
+            description="product manager,contacts"
+            type="radio"
+            userFullName="maria ebrahimi"
+            value="user-radio1"
+            checked={radio === "user-radio1"}
+            onChange={(e) => setRadio(e.target.value)}
+            cardOnclick={() => setRadio("user-radio1")}
+          />
+          <UserCard
+            size="sm"
+            checkboxIndex={60}
+            id="id2"
+            name="card-group"
+            userFullName="maria ebrahimi"
+            username="@maryam"
+            description="product manager,contacts"
+            type="radio"
+            value="user-radio2"
+            onChange={(e) => setRadio(e.target.value)}
+            checked={radio === "user-radio2"}
+            cardOnclick={() => setRadio("user-radio2")}
+          />
+        </div>
+        <div>
+          user Card checkbox
+          <UserCard
+            size="sm"
+            checkboxIndex={55}
+            id="salam"
+            name="card-group-5"
+            username="@maryam"
+            description="product manager,contacts"
+            userFullName="maria ebrahimi"
+            value="checkbox--user-card-2"
+            checked={checkedValues.includes("checkbox--user-card-2")}
+            onChange={(e) => handleChangeCheckbox(e.target.value)}
+            cardOnclick={() => handleChangeCheckbox("checkbox--user-card-2")}
+          />
+          <UserCard
+            size="sm"
+            checkboxIndex={65}
+            id="salame2"
+            name="card-group-5"
+            userFullName="maria ebrahimi"
+            username="@maryam"
+            description="product manager,contacts"
+            value="checkbox--user-card-1"
+            onChange={(e) => handleChangeCheckbox(e.target.value)}
+            checked={checkedValues.includes("checkbox--user-card-1")}
+            cardOnclick={() => handleChangeCheckbox("checkbox--user-card-1")}
+          />
+        </div>
+        this is radio
+        <div>
+          radio
+          <Radio
+            id="radio-option-1"
+            size="sm"
+            name="radio-group2"
+            value="radio1"
+            checked={simpleRadio === "radio1"}
+            onChange={(e) => setSimpleRadio(e.target.value)}
+          >
+            Option 1
+          </Radio>
+          <Radio
+            id="radio-option-2"
+            size="sm"
+            name="radio-group2"
+            value="radio2"
+            checked={simpleRadio === "radio2"}
+            onChange={(e) => setSimpleRadio(e.target.value)}
+          >
+            Option 2
+          </Radio>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const Maryam = memo(MemoMaryam);
+
+export default Maryam;