@algorithm-shift/design-system 1.2.10 → 1.2.12

package/src/components/Navigation/Profile/Profile.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { ProfileProps } from "@/types/global";
+
+const Profile = ({ profileType, showName, userName, className, style }: ProfileProps) => {
+  return (
+    <div className={className} style={style}>
+      <div className='flex gap-2 items-center justify-between w-30 cursor-pointer'>
+        {showName && (
+          <h4 className='text-[#000000] dark:text-[#fff] text-[13px] font-[500] mb-0'>{userName}</h4>
+        )}
+        {profileType === 'avatar' ? (
+          <img
+            src='https://builder.development.algorithmshift.ai/images/toolset/profile.svg' alt="auto" width={24} height={24}
+          />
+        ) : (
+          <div className='w-6 h-6 bg-[#12715b] rounded-full text-[#fff] text-center text-[11px] flex items-center justify-center'>A</div>
+        )}
+
+      </div>
+    </div>
+  );
+};
+
+export default Profile;

package/src/components/Navigation/Spacer/Spacer.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import Spacer from './Spacer';
+
+const meta = {
+  component: Spacer,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Spacer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    className: 'mt-[20px] mb-[20px] border-[1px] border-[#E0E0E0] border-solid group relative w-full',
+  },
+};

package/src/components/Navigation/Spacer/Spacer.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { ElementProps } from "@/types/global";
+
+const Spacer = ({ className, style }: ElementProps) => {
+  return (
+    <div className={`${className}`} style={style} />
+  );
+};
+
+export default Spacer;

package/src/components/Navigation/Stages/Stages.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import Stages from './Stages';
+
+const meta = {
+  component: Stages,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Stages>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    stages: [
+      { id: 1, header: 'Stage 1', isActive: true },
+      { id: 2, header: 'Stage 2', isActive: false },
+      { id: 3, header: 'Stage 3', isActive: false },
+    ],
+    isShowBtn: true,
+    buttonText: 'Next',
+  },
+};

package/src/components/Navigation/Stages/Stages.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { StagesProps } from '@/types/global';
+import React from 'react';
+
+const StagesComponent = ({ stages, isShowBtn, buttonText, className, style }: StagesProps) => {
+
+  return (
+    <div className={className} style={style}>
+      <div className="flex items-center justify-between bg-gray-50 p-2 rounded-lg border border-gray-200 w-full">
+        <div className="flex items-center">
+          <button className="p-2 hover:bg-gray-100 rounded">
+            <svg className="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="flex items-center flex-1 px-2">
+          {stages?.length > 0 && stages?.map((stage: any, index: number) => (
+            <React.Fragment key={stage.id}>
+              <button
+                className={`
+                  min-w-[120px] px-4 py-2 rounded-full text-sm font-medium transition-colors duration-200 whitespace-nowrap ${stage.isActive ? 'bg-[#034486] text-white shadow-md' : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-200'}`}
+              >
+                {stage.header}
+              </button>
+
+              {index < stages.length - 1 && (
+                <div className="flex-shrink-0 w-3 h-px bg-gray-300"></div>
+              )}
+            </React.Fragment>
+          ))}
+        </div>
+
+        {isShowBtn && (
+          <div className="flex items-center">
+            <button className="bg-[#034486] text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors duration-200 shadow-sm">
+              {buttonText}
+            </button>
+          </div>
+        )}
+
+      </div>
+    </div>
+  );
+};
+
+export default StagesComponent;

package/src/components/Navigation/Tabs/Tabs.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import Tabs from './Tabs';
+
+const meta = {
+  component: Tabs,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    tabs: [
+      { header: 'Home', isActive: true },
+      { header: 'Profile' },
+      {
+        header: 'Settings',
+        isDropDown: true,
+        children: [
+          { id: 1, header: 'Account' },
+          { id: 2, header: 'Privacy' },
+          { id: 3, header: 'Notifications' },
+        ],
+      },
+      { header: 'Help' },
+    ],
+    className: 'flex col-span-12 col-start-1 items-center h-50 visible bg-[#12715b] p-auto pr-[10px] pt-[10px] pb-[10px] pl-[10px] sm:flex sm:grid-cols-12 sm:col-span-12 sm:col-start-1 sm:items-center sm:h-50 sm:visible sm:bg-[#12715b] sm:p-auto sm:pr-[10px] sm:pt-[10px] sm:pb-[10px] sm:pl-[10px] md:flex md:grid-cols-12 md:col-span-12 md:col-start-1 md:items-center md:h-50 md:visible md:bg-[#12715b] md:p-auto md:pr-[10px] md:pt-[10px] md:pb-[10px] md:pl-[10px] group relative w-full transition-opacity duration:300 pointer-events-none grid-cols-12',
+    style: {
+      'height': '50px',
+      'width': 'auto',
+      'backgroundColor': 'rgb(18, 113, 91)',
+      'pointerEvents': 'none',
+    }
+  },
+};

package/src/components/Navigation/Tabs/Tabs.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { ChevronDown } from 'lucide-react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { TabsProps } from '@/types/global';
+
+
+const Tabs = ({ tabs, className, style }: TabsProps) => {
+  const rawTabs = Array.isArray(tabs) ? tabs : [];
+  const baseClasses =
+    'text-[12px] text-[#E9E9E9] p-2 text-center rounded-md transition-colors border-none outline-none focus:outline-none focus:ring-0 focus:ring-offset-0 cursor-pointer select-none ';
+  const activeClasses = 'bg-white/10 text-white';
+  const hoverClasses = 'hover:bg-white/5';
+
+  return (
+    <div className={className} style={style}>
+      {rawTabs.map((tab: any, index: number) => {
+        const finalClasses = [
+          baseClasses,
+          tab.isActive ? activeClasses : hoverClasses,
+          tab.className || '',
+        ].join(' ');
+
+        const hasDropdown = Array.isArray(tab.children) && tab.children.length > 0 && tab.isDropDown;
+
+        if (hasDropdown) {
+          return (
+            <DropdownMenu key={index}>
+              <DropdownMenuTrigger
+                className={`${finalClasses} inline-flex items-center gap-1`}
+              >
+                {tab.header}
+                <ChevronDown className="h-4 w-4 opacity-80" />
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent
+                align="start"
+                sideOffset={6}
+                className="z-50 min-w-[160px] rounded-md border border-gray-200 bg-white p-1 shadow-lg"
+              >
+                {tab.children.map((item: any) => (
+                  <DropdownMenuItem
+                    key={item.id}
+                    asChild
+                    className="cursor-pointer rounded-sm px-3 py-2 text-[12px] text-gray-800 hover:bg-gray-100 focus:bg-gray-100"
+                  >
+                    {item.header}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          );
+        }
+
+        return (
+          <div key={index} className={finalClasses} style={{ backgroundColor: 'transparent', border: 'none', ...tab.style }} role="button" tabIndex={0}>
+            {tab.header}
+          </div>
+        );
+      })}
+
+    </div>
+  );
+};
+
+export default Tabs;

package/src/components/Navigation/index.ts

@@ -0,0 +1,6 @@
+export { default as Tabs } from './Tabs/Tabs';
+export { default as Stages } from './Stages/Stages';
+export { default as Spacer } from './Spacer/Spacer';
+export { default as Profile } from './Profile/Profile';
+export { default as Notification } from './Notification/Notification';
+export { default as Logo } from './Logo/Logo';

package/src/components/index.ts

@@ -0,0 +1,27 @@
+export * from './ui/button'
+
+export { default as FlexLayout } from './Layout/Flex'
+export { default as GridLayout } from './Layout/Grid'
+
+export { default as Typography } from './Basic/Typography/Typography'
+export { default as Shape } from './Basic/Shape/Shape'
+export { default as Image } from './Basic/Image/Image'
+export * from './Inputs/TextInput/TextInput'
+export * from './Inputs/NumberInput/NumberInput'
+export * from './Inputs/EmailInput/EmailInput'
+export * from './Inputs/PasswordInput/PasswordInput'
+export * from './Inputs/Textarea/Textarea'
+export * from './Inputs/UrlInput/UrlInput'
+export * from './Inputs/Checkbox/Checkbox'
+export * from './Inputs/RadioInput/RadioInput'
+export * from './Inputs/MultiCheckbox/MultiCheckbox'
+export { default as RichText } from './Inputs/RichText/RichText'
+export * from './Inputs/Dropdown/Dropdown'
+export * from './Inputs/SwitchToggle/SwitchToggle'
+export * from './Inputs/PhoneInput/PhoneInput'
+export * from './Inputs/SearchInput/SearchInput'
+export * from './Inputs/FileInput/FileInput'
+export { default as DatePicker } from './Inputs/DatePicker/DatePicker'
+export { default as DateRange } from './Inputs/DateRange/DateRange'
+export { Table } from './DataDisplay';
+export { Stages, Tabs, Spacer, Profile, Notification, Logo } from './Navigation';

package/src/components/ui/button.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Button } from './button';
+
+const meta = {
+  component: Button,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { children: "Default" } };
+
+export const Outline: Story = { args: { variant: "outline", children: "Outline" } };
+
+export const Destructive: Story = { args: { variant: "destructive", children: "Destructive" } };
+
+export const Secondary: Story = { args: { variant: "secondary", children: "Secondary" } };
+
+export const Ghost: Story = { args: { variant: "ghost", children: "Ghost" } };
+
+export const Link: Story = { args: { variant: "link", children: "Link" } };

package/src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/ui/calendar.tsx

@@ -0,0 +1,211 @@
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute bg-popover inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }