dst-rg 1.0.2 → 1.0.4

package/src/components/Input/_.types.ts

@@ -26,8 +26,7 @@ export type inputProps = {
   | "shaba";
   icon?: ComponentType<IconPropsType>;
   leadingTextValue?: string;
-  destructive?: boolean;
-  destructiveText?: string;
+  error?: string;
   dir?: "ltr" | "rtl";
   label?: string;
   required?: boolean;

package/src/components/Input/index.tsx

@@ -1,6 +1,6 @@
 import {
-  destructiveStyles,
   disableStyles,
+  errorStyles,
   iconShabaStyles,
   iconStyles,
   iconTrailingButtonStyles,
@@ -18,6 +18,7 @@ import { IconPropsType } from "@/icons/icons.type";
 import { cn } from "@/lib/utils";
 import { Copy, Eye, EyeOff } from "lucide-react";
 import React, { useState } from "react";
+import { twMerge } from "tailwind-merge";
 import { Button } from "../Button";
 import { Select } from "../Select";
 import { TooltipWrapper } from "../Tooltip";
@@ -30,8 +31,7 @@ export const Input = ({
   id,
   label,
   required = false,
-  destructive = false,
-  destructiveText,
+  error,
   hintText,
   placeholder,
   helpIcon = false,
@@ -90,7 +90,7 @@ export const Input = ({
             aria-label="leadingText"
             className={`${leadingTextValueStyles} ${size === "sm" ? "pt-2" : "pt-2.5"
               } 
-                        ${destructive === true
+                        ${Boolean(error) === true
                 ? "border-rborder-error"
                 : "border-rborder-primary"
               }`}
@@ -112,8 +112,8 @@ export const Input = ({
           className={cn(
             inputVariants({ size, inputType }),
             className,
-            destructive && "bg-rbg-disabled-subtle",
-            destructive && destructiveStyles,
+            Boolean(error) && "bg-rbg-disabled-subtle",
+            Boolean(error) && errorStyles,
             disabled && disableStyles
           )}
           type={type === "password" && showPassword ? "text" : type}
@@ -142,7 +142,7 @@ export const Input = ({
           </div>
         )}
 
-        {helpIcon && tooltipProps && destructive === false && (
+        {helpIcon && tooltipProps && Boolean(error) === false && (
           <TooltipWrapper
             content={tooltipProps?.text}
             description={tooltipProps?.description}
@@ -166,7 +166,7 @@ export const Input = ({
             </div>
           </TooltipWrapper>
         )}
-        {/* {destructive && type !== "password" && (
+        {/* {error && type !== "password" && (
           <div
             className={`w-fit absolute top-1/2 -translate-y-1/2 
                         ${inputType == "trailingButton"
@@ -183,7 +183,7 @@ export const Input = ({
           <button
             aria-label="copyButton"
             onClick={() => copyHandler(String(value))}
-            className={`${trailingButton} ${destructive === true
+            className={`${trailingButton} ${Boolean(error) === true
               ? "border-rborder-error"
               : "border-rborder-primary"
               }`}
@@ -200,7 +200,7 @@ export const Input = ({
               canSelectZero: true,
               name: "trailingDropdown",
             }}
-            className="w-fit absolute rtl:left-0 ltr:right-0 top-0"
+            className={twMerge("w-fit absolute rtl:left-0 ltr:right-0 top-0", Boolean(error) && "border-2 border-error-500 rounded-xl")}
           />
         )}
         {inputType == "shaba" && (
@@ -209,7 +209,7 @@ export const Input = ({
             className={cn(
               trailingShabaLabelBase,
               trailingShabaLabelSizes[shabaLabelSize],
-              destructive === true
+              Boolean(error) === true
                 ? "border-rborder-error"
                 : "border-rborder-primary"
             )}
@@ -218,12 +218,12 @@ export const Input = ({
           </div>
         )}
       </div>
-      {destructive === false && hintText && (
+      {Boolean(error) === false && hintText && (
         <p className="text-sm text-rtext-tertiary-600">{hintText}</p>
       )}
-      {destructive && destructiveText && (
+      {Boolean(error) && (
         <p className="text-sm text-rtext-error-primary-600">
-          {destructiveText}
+          {error}
         </p>
       )}
     </div>

package/src/components/InputTags/_.stories.tsx

@@ -20,10 +20,6 @@ export default {
             control: { type: "radio" },
             options: ["sm", "md"],
         },
-        destructive: {
-            control: { type: "radio" },
-            options: [true, false]
-        },
     },
     args: {
         disabled: false,
@@ -33,8 +29,6 @@ export default {
         required: true,
         hintText: "This is a hint text to help user.",
         placeholder: "Enter your email",
-        destructive: false,
-        destructiveText: "error text",
         helpIcon: true,
         tooltipProps: {
             text: "This is a tooltip",

package/src/components/InputTags/_.style.ts

@@ -1,4 +1,4 @@
-import {cva} from "class-variance-authority";
+import { cva } from "class-variance-authority";
 
 const baseStyles =
     "rounded-md px-2 shadow-xs bg-white border border-rborder-primary disabled:border-rborder-disabled flex flex-wrap " +
@@ -9,7 +9,7 @@ const sizeStyle = {
     md: "h-10 pt-2 pb-2.5",
 };
 
-const destructiveStyles = "!border-2 !border-rborder-error focus:!outline-0"
+const errorStyles = "!border-2 !border-rborder-error focus:!outline-0"
 
 const disableStyles = "bg-rbg-disabled-subtle border-rborder-disabled"
 
@@ -25,4 +25,4 @@ const inputTagsVariants = cva(
     }
 )
 
-export {baseStyles, sizeStyle, destructiveStyles,disableStyles, inputTagsVariants};
+export { baseStyles, disableStyles, errorStyles, inputTagsVariants, sizeStyle };

package/src/components/InputTags/_.test.tsx

@@ -8,7 +8,6 @@ const createInputTagsProps = (overrides: Partial<inputTagsProps> = {}): inputTag
     label: "Email",
     id: "email-input",
     size: "sm",
-    destructive: false,
     required: true,
     hintText: "This is a hint text to help user.",
     placeholder: "Enter your email",
@@ -76,16 +75,10 @@ describe("InputTags Component", () => {
         expect(screen.queryByText("tag1")).not.toBeInTheDocument();
     });
 
-    it("renders destructive state with destructive text", () => {
-        render(<InputTags {...createInputTagsProps({ destructive: true, destructiveText: "Destructive action" })} />);
-        const destructiveText = screen.getByText("Destructive action");
-        expect(destructiveText).toBeInTheDocument();
-    });
-
-    it("does not render destructive text when destructive is false", () => {
-        render(<InputTags {...createInputTagsProps({ destructive: false })} />);
-        const destructiveText = screen.queryByText("Destructive action");
-        expect(destructiveText).not.toBeInTheDocument();
+    it("does not render error text when error is false", () => {
+        render(<InputTags {...createInputTagsProps()} />);
+        const errorText = screen.queryByText("error action");
+        expect(errorText).not.toBeInTheDocument();
     });
 
     it("adds a tag when 'Enter' key is pressed", () => {

package/src/components/InputTags/_.types.ts

@@ -10,8 +10,7 @@ export type inputTagsProps = {
         descriptionClassName?: string,
     };
     size?: "sm" | "md";
-    destructive?: boolean;
-    destructiveText?: string;
+    error?: string;
     dir?: "ltr" | "rtl";
     label?: string;
     required?: boolean;

package/src/components/InputTags/index.tsx

@@ -1,4 +1,4 @@
-import { destructiveStyles, disableStyles, inputTagsVariants } from "@/components/InputTags/_.style";
+import { disableStyles, errorStyles, inputTagsVariants } from "@/components/InputTags/_.style";
 import { inputTagsProps } from "@/components/InputTags/_.types";
 import { InputLabel } from "@/components/ui/input-component/input-label";
 import AttentionMark from "@/icons/general/attention-mark";
@@ -15,8 +15,7 @@ export const InputTags = (
         id,
         label,
         required = false,
-        destructive = false,
-        destructiveText,
+        error,
         hintText,
         placeholder,
         helpIcon = false,
@@ -66,10 +65,10 @@ export const InputTags = (
                     className={cn(
                         inputTagsVariants({ size }),
                         className,
-                        destructive === true && destructiveStyles,
+                        Boolean(error) === true && errorStyles,
                         disabled && disableStyles,
                         "group-focus-within:outline-2 group-focus-within:outline-rborder-brand",
-                        destructive && "bg-rbg-disabled-subtle border-rborder-disabled"
+                        Boolean(error) && "bg-rbg-disabled-subtle border-rborder-disabled"
                     )}
                 >
                     {
@@ -101,7 +100,7 @@ export const InputTags = (
                         placeholder={tags?.length === 0 ? placeholder : ""}
                     />
 
-                    {helpIcon && tooltipProps && destructive === false && (
+                    {helpIcon && tooltipProps && Boolean(error) === false && (
                         <TooltipWrapper
                             content={tooltipProps?.text}
                             description={tooltipProps?.description}
@@ -119,7 +118,7 @@ export const InputTags = (
                     )}
 
                     {
-                        destructive === true &&
+                        Boolean(error) === true &&
                         <div className="absolute top-1/2 -translate-y-1/2 ltr:right-2 rtl:left-2 w-fit">
                             <AttentionMark />
                         </div>
@@ -128,12 +127,12 @@ export const InputTags = (
                 </div>
             </div>
             {
-                (destructive === false && hintText) &&
+                (Boolean(error) === false && hintText) &&
                 <p className="text-sm text-rtext-tertiary-600">{hintText}</p>
             }
             {
-                (destructive && destructiveText) &&
-                <p className="text-sm text-rtext-error-primary-600">{destructiveText}</p>
+                (Boolean(error)) &&
+                <p className="text-sm text-rtext-error-primary-600">{error}</p>
             }
         </div>
     );

package/src/components/Select/_.stories.tsx

@@ -127,7 +127,7 @@ export const WithError: Story = {
             name: "payment",
             isRequiredInput: true,
             canSelectZero: false,
-            errorText: "Please select a payment method",
+            error: "Please select a payment method",
         },
         selectedValueLabel: "Select payment method",
         options: [

package/src/components/Select/_.types.ts

@@ -1,7 +1,7 @@
 type configProps = {
     label?: string,
     name: string,
-    errorText?: string,
+    error?: string,
     hintText?: string,
     isRequiredInput?: boolean,
     canSelectZero?: boolean

package/src/components/Select/index.tsx

@@ -24,7 +24,7 @@ const Select = ({
   const {
     label,
     name,
-    errorText,
+    error,
     hintText,
     isRequiredInput = false,
     canSelectZero = false,
@@ -156,12 +156,12 @@ const Select = ({
           dangerouslySetInnerHTML={{ __html: tooltipTitle }}
         />
       )}
-      {!errorText && hintText && (
+      {!error && hintText && (
         <p className="text-sm text-rtext-tertiary-600">{hintText}</p>
       )}
-      {errorText && (
+      {error && (
         <p className="text-sm text-rtext-error-primary-600">
-          {errorText}
+          {error}
         </p>
       )}
     </div>

package/src/components/TextArea/_.stories.tsx

@@ -11,15 +11,7 @@ export default {
         disabled: {
             control: { type: "radio" },
             options: [true, false]
-        },
-        destructive: {
-            control: { type: "radio" },
-            options: [true, false]
-        },
-        helpIcon: {
-            control: { type: "radio" },
-            options: [true, false]
-        },
+        }
     },
     args: {
         row: 5,
@@ -28,8 +20,6 @@ export default {
         required: true,
         hintText: "This is a hint text to help user.",
         placeholder: "Enter a description...",
-        destructive: false,
-        destructiveText: "This is an error message.",
         helpIcon: true,
         tooltipProps: {
             text: "This is a tooltip",
@@ -57,6 +47,7 @@ export const InputAutoFocus: Story = {
     args: {
         label: "توضیحات",
         placeholder: "توضیحات را وارد کنید",
-        autoFocus: true
+        autoFocus: true,
+        error: "This is an error message.",
     },
 };

package/src/components/TextArea/_.style.ts

@@ -1,11 +1,11 @@
-import {cva} from "class-variance-authority";
+import { cva } from "class-variance-authority";
 
 const baseStyles =
     "rounded-md p-2 shadow-xs w-fit bg-white border border-rborder-primary" +
     " focus:outline-2 focus:outline-rborder-brand disabled:bg-rbg-disabled-subtle disabled:border-rborder-disabled w-full";
 
-const destructiveStyles = "!border-2 !border-rborder-error focus:!outline-0"
+const errorStyles = "!border-2 !border-rborder-error focus:!outline-0"
 
 const textAreaVariants = cva(baseStyles)
 
-export {baseStyles,destructiveStyles,textAreaVariants};
+export { baseStyles, errorStyles, textAreaVariants };

package/src/components/TextArea/_.test.tsx

@@ -4,16 +4,15 @@ import { TextArea } from "./index";
 
 describe("TextArea component", () => {
     const defaultProps = {
-        destructive: false,
         disabled: false,
-        destructiveText: "This is an error message.",
+        error: "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-fit",
-        name:"description"
+        name: "description"
     };
 
     it("calls onChange handler", () => {
@@ -30,11 +29,10 @@ describe("TextArea component", () => {
         expect(textarea).toBeDisabled();
     });
 
-    it("applies destructive styles when destructive is true", () => {
+    it("applies error styles when error is true", () => {
         render(
             <TextArea
                 {...defaultProps}
-                destructive={true}
             />
         );
         const textarea = screen.getByRole("textbox");

package/src/components/TextArea/_.types.ts

@@ -8,8 +8,7 @@ export type textAreaProps = {
     id?: string;
     value?: string;
     placeholder?: string;
-    destructive?: boolean;
-    destructiveText?: string;
+    error?: string;
     label?: string;
     required?: boolean;
     hintText?: string;

package/src/components/TextArea/index.tsx

@@ -1,5 +1,5 @@
 import {
-  destructiveStyles,
+  errorStyles,
   textAreaVariants,
 } from "@/components/TextArea/_.style";
 import { textAreaProps } from "@/components/TextArea/_.types";
@@ -12,9 +12,8 @@ const TextArea = ({
   row = 5,
   label,
   required = false,
-  destructive = false,
   disabled = false,
-  destructiveText,
+  error,
   hintText,
   placeholder,
   helpIcon = false,
@@ -61,18 +60,18 @@ const TextArea = ({
         className={cn(
           textAreaVariants(),
           className,
-          destructive && destructiveStyles,
-          destructive && "bg-rbg-disabled-subtle border-rborder-disabled"
+          Boolean(error) && errorStyles,
+          Boolean(error) && "bg-rbg-disabled-subtle border-rborder-disabled"
         )}
         autoFocus={autoFocus}
         {...props}
       />
-      {destructive === false && hintText && (
+      {Boolean(error) === false && hintText && (
         <p className="text-sm text-rtext-tertiary-600">{hintText}</p>
       )}
-      {destructive && destructiveText && (
+      {Boolean(error) && (
         <p className="text-sm text-rtext-error-primary-600">
-          {destructiveText}
+          {error}
         </p>
       )}
     </div>

package/src/components/developers/AmirHossein.tsx

@@ -54,8 +54,7 @@ const MemoAmirHossein = () => {
           dir: "ltr",
           descriptionClassName: "max-w-[260px] w-full",
         }}
-        destructive={false}
-        destructiveText="error text"
+        error="error text"
         size="sm"
         type="text"
         inputType="trailingDropdown"
@@ -93,8 +92,8 @@ const MemoAmirHossein = () => {
           descriptionClassName: "max-w-[260px] w-full",
         }}
         // disabled={true}
-        // destructive={true}
-        destructiveText="This is an error message."
+        // error={true}
+        error="This is an error message."
         label="Description"
         helpIcon={true}
         required={true}
@@ -116,8 +115,7 @@ const MemoAmirHossein = () => {
           dir: "ltr",
           descriptionClassName: "max-w-[260px] w-full",
         }}
-        destructive={false}
-        destructiveText="error text"
+        error="error text"
         size="sm"
         label="Tags"
         required={true}

package/src/components/developers/Rasoul.tsx

@@ -1,3 +1,4 @@
+import { Breadcrumb } from "@/components/Breadcrumbs";
 import Activity from "@/icons/general/activity";
 import XClose from "@/icons/general/x-close";
 import { ArrowRight } from "lucide-react";
@@ -24,9 +25,25 @@ const MemoRasoul = () => {
     { title: "g", value: 7 },
   ];
 
+  const Breadcrumbs = [
+    { title: "دسته بندی", link: "/category" },
+    { title: "زیر دسته بندی ", link: "/subcategory" },
+    { title: "محصولات", link: "/product" },
+  ];
+
   return (
     <div className="w-full flex flex-col gap-4">
       <ToastContainer />
+      <Breadcrumb
+        breadCrumbLink={Breadcrumbs}
+        dir="ltr"
+        linkClassName="text-blue-500 hover:underline"
+        listClassName="list-none flex gap-x-2"
+        listItemClassName="text-lg font-semibold"
+        navClassName="bg-gray-100 p-4"
+        separatorClassName="text-gray-500"
+        type="chevron"
+      />
       <Select
         isLoading={false}
         onChange={(val) => setSelectedValue(val?.value)}
@@ -41,7 +58,7 @@ const MemoRasoul = () => {
         config={{
           name: "gio",
           canSelectZero: true,
-          errorText: "gio error",
+          error: "gio error",
           isRequiredInput: true,
           label: "gio gio",
         }}

package/src/main.tsx

@@ -1,5 +1,6 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { ToastContainer } from "./components";
 import AmirHossein from "./components/developers/AmirHossein";
 import Fardin from "./components/developers/Fardin";
@@ -25,9 +26,8 @@ const App = () => {
             onToggle={darkModeToggler}
           />
         </div>
-
-        <AmirHossein />
         <Rasoul />
+        <AmirHossein />
         <Maryam />
         <Fardin />
         <Milad />
@@ -36,6 +36,13 @@ const App = () => {
   );
 };
 
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+  },
+]);
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <ToastContainer
@@ -45,6 +52,6 @@ createRoot(document.getElementById("root")!).render(
       animation="slide"
       showProgress={true}
     />
-    <App />
+    <RouterProvider router={router} />
   </StrictMode>
 );