@oneplatformdev/ui 0.0.1-beta.99 → 0.1.0-8

package/src_old/Skeleton/Skeleton.tsx

@@ -0,0 +1,17 @@
+import { cn } from '@oneplatformdev/utils';
+import React from 'react';
+
+// TODO: ??
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src_old/Slider/Slider.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@oneplatformdev/utils";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow-sm transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

package/src_old/Sonner/Sonner.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as SonnerToaster } from "sonner"
+
+type SonnerProps = React.ComponentProps<typeof SonnerToaster>
+
+const Sonner = ({ ...props }: SonnerProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <SonnerToaster
+      theme={theme as SonnerProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Sonner }

package/src_old/Switch/Switch.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@oneplatformdev/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

package/src_old/Table/Table.tsx

@@ -0,0 +1,120 @@
+import * as React from "react"
+
+import { cn } from "@oneplatformdev/utils";
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src_old/TablePagination/TablePagination.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { Button } from '../Button';
+import { Select } from '../Select';
+import { FC } from 'react';
+
+interface IProps {
+  limit: number;
+  offset: number;
+  totalRows: number;
+  setLimit: (limit: number) => void;
+  setOffset: (offset: number) => void;
+  tRowsPerPage?: string;
+  tPrevious?: string;
+  tPage?:string;
+  tNext?:string;
+  tOf?:string
+}
+
+export const TablePagination: FC<IProps> = ({
+  offset,
+  limit,
+  totalRows,
+  setLimit,
+  setOffset,
+  tRowsPerPage= "Rows per page",
+  tPrevious= "Previous",
+  tPage= "Page",
+  tNext= "Next",
+  tOf= "Of",
+}) => {
+  const currentPage = Math.ceil(offset / limit) + 1;
+  const totalPages = Math.ceil(totalRows / limit);
+  const isLastPage = currentPage === totalPages;
+
+  const onChangeLimit = (value: string) => {
+    setOffset(0);
+    setLimit(parseInt(value));
+  };
+
+  const onPrevious = () => {
+    let nextOffset = offset - limit;
+    if (nextOffset < 0) {
+      nextOffset = 0;
+    }
+    setOffset(nextOffset);
+  };
+
+  const onNext = () => {
+    let nextOffset = offset + limit;
+    if (nextOffset > totalRows) {
+      nextOffset = totalRows - limit;
+    }
+    setOffset(nextOffset);
+  };
+
+  return (
+    <div className="flex items-center justify-end space-x-2 py-4">
+      <div className="flex items-center space-x-2">
+        <span className="text-sm text-nowrap">{tRowsPerPage}</span>
+        <Select
+          value={limit?.toString()}
+          options={[
+            { value: '5', label: '5' },
+            { value: '10', label: '10' },
+            { value: '20', label: '20' },
+            { value: '30', label: '30' },
+            { value: '50', label: '50' },
+          ]}
+          onChange={onChangeLimit}
+          placeholder="6"
+          nullable={false}
+        />
+      </div>
+      <div className="space-x-2">
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={!offset}
+          onClick={onPrevious}
+        >
+          {tPrevious}
+        </Button>
+        <span className="text-sm">{`${tPage} ${currentPage} ${tOf} ${totalPages}`}</span>
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={isLastPage}
+          onClick={onNext}
+        >
+          {tNext}
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src_old/Tabs/Tabs.tsx

@@ -0,0 +1,35 @@
+import { Children, FC, PropsWithChildren } from 'react';
+
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from './TabsRoot';
+import { TabsProps } from './Tabs.types';
+
+export const TabRender: FC<TabsProps> = (props) => {
+  const { tabs = [], contents } = props;
+  return Children.map(contents, (child, index) => {
+    if (!child || !tabs[index]) return null;
+    const value = tabs[index]?.value;
+    const props = child.props || {};
+    return (
+      <TabsContent key={value} value={value} {...props}>
+        {child}
+      </TabsContent>
+    );
+  });
+};
+
+export const Tabs: FC<PropsWithChildren<TabsProps>> = (props) => {
+  const { tab, tabs = [], onChange, children } = props;
+  return (
+    <TabsRoot value={tab} onValueChange={onChange}>
+      <TabsList className="px-2 py-6 bg-[#E0E7FF] rounded-[6px]">
+        {tabs.map((tab) => (
+          <TabsTrigger key={tab.value} value={tab.value} className="h-8">
+            {tab.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {children}
+      {!children && <TabRender {...props}/>}
+    </TabsRoot>
+  );
+};

package/src_old/Tabs/Tabs.types.tsx

@@ -0,0 +1,13 @@
+import { ReactElement } from 'react';
+
+export interface TabItemProps {
+  value: string;
+  label: string;
+};
+
+export interface TabsProps{
+    tabs: TabItemProps[];
+    tab?: string;
+    onChange?: (value: string) => void;
+    contents?: ReactElement[];
+};

package/src_old/Tabs/TabsRoot.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@oneplatformdev/utils";
+
+const TabsRoot = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { TabsRoot, TabsList, TabsTrigger, TabsContent }

package/src_old/Tabs/index.ts

@@ -0,0 +1,2 @@
+export * from './TabsRoot';
+export * from './Tabs'

package/src_old/Textarea/Textarea.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
+import { cn } from '@oneplatformdev/utils';
+
+import { TextareaProps } from './Textarea.types';
+import { useAutosizeTextArea } from './useAutosizeTextArea';
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (textareaProps, ref) => {
+    const {
+      className,
+      value = '',
+      maxHeight = Number.MAX_SAFE_INTEGER,
+      minHeight = 0,
+      resizeble = true,
+      counter = false,
+      id: customId = '',
+      ...props
+    } = textareaProps;
+    const id = useId();
+    const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
+    const [triggerAutoSize, setTriggerAutoSize] = useState('');
+
+    useAutosizeTextArea({
+      textAreaRef,
+      triggerAutoSize: triggerAutoSize,
+      maxHeight,
+      minHeight,
+    });
+
+    useImperativeHandle(ref, () => ({
+      ...((textAreaRef.current ?? {}) as HTMLTextAreaElement),
+      textArea: textAreaRef.current as HTMLTextAreaElement,
+      focus: () => textAreaRef?.current?.focus(),
+      maxHeight,
+      minHeight,
+    }));
+
+    useEffect(() => {
+      setTriggerAutoSize(value as string);
+    }, [props?.defaultValue, value]);
+
+    return (
+      <>
+        <textarea
+          id={customId || id}
+          {...props}
+          ref={textAreaRef}
+          value={value}
+          className={cn(
+            'flex min-h-10 w-full px-3 py-2 text-base relative md:text-sm',
+            'rounded-[12px] border border-input bg-[#FCFCFC] shadow-none',
+            'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+            'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring',
+            resizeble ? 'resize' : 'resize-none overflow-hidden!',
+            counter && 'pb-2',
+            className
+          )}
+        />
+        {counter && (
+          <label
+            htmlFor={customId || id}
+            className={cn(
+              'w-full text-right inline-flex items-center justify-end',
+              'text-sm font-normal text-muted-foreground',
+              'leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+            )}
+          >
+            {String(value || '').length} / {props?.maxLength}
+          </label>
+        )}
+      </>
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package/src_old/Textarea/Textarea.types.tsx

@@ -0,0 +1,21 @@
+import { ComponentProps, RefObject } from 'react';
+
+export interface IUseAutosizeTextAreaProps {
+  textAreaRef: RefObject<HTMLTextAreaElement | null>;
+  triggerAutoSize: string;
+  /**
+   * The minimum height of the textarea.
+   */
+  minHeight?: number;
+  /**
+   * The maximum height of the textarea.
+   */
+  maxHeight?: number;
+}
+
+export interface TextareaProps
+  extends ComponentProps<'textarea'>,
+    Pick<IUseAutosizeTextAreaProps, 'minHeight' | 'maxHeight'> {
+  resizeble?: boolean;
+  counter?: boolean;
+}

package/src_old/Textarea/useAutosizeTextArea.ts

@@ -0,0 +1,33 @@
+'use client';
+
+import * as React from 'react';
+import { IUseAutosizeTextAreaProps } from '@oneplatformdev/ui';
+
+export const useAutosizeTextArea = ({
+  textAreaRef,
+  triggerAutoSize,
+  maxHeight = Number.MAX_SAFE_INTEGER,
+  minHeight = 0,
+}: IUseAutosizeTextAreaProps) => {
+  const [init, setInit] = React.useState(true);
+  React.useEffect(() => {
+    const offsetBorder = 0;
+    const textAreaElement = textAreaRef.current;
+    if (textAreaElement) {
+      if (init) {
+        textAreaElement.style.minHeight = `${minHeight + offsetBorder}px`;
+        if (maxHeight > minHeight) {
+          textAreaElement.style.maxHeight = `${maxHeight}px`;
+        }
+        setInit(false);
+      }
+      textAreaElement.style.height = `${minHeight + offsetBorder}px`;
+      const scrollHeight = textAreaElement.scrollHeight;
+      if (scrollHeight > maxHeight) {
+        textAreaElement.style.height = `${maxHeight}px`;
+      } else {
+        textAreaElement.style.height = `${scrollHeight + offsetBorder}px`;
+      }
+    }
+  }, [textAreaRef.current, triggerAutoSize]);
+};

package/src_old/Theme/ThemeModeToggle.tsx

@@ -0,0 +1,71 @@
+import * as React from "react"
+import { Moon, Sun, SunMoon, LucideIcon } from "lucide-react"
+import { useTheme } from "next-themes"
+
+import { Button } from "../Button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../DropdownMenu";
+
+const iconByTheme: Record<'system' | 'light' | 'dark', LucideIcon> = {
+  'system': SunMoon,
+  'light': Sun,
+  'dark': Moon,
+}
+
+const RenderThemeIcon: React.FC = () => {
+  const { theme = 'system' } = useTheme()
+  const ThemeIcon  = React.useMemo(() => iconByTheme[theme as 'system' | 'light' | 'dark'], [theme])
+  return (
+    <>
+      <ThemeIcon
+        className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 text-[currentColor] dar:fill-current"
+      />
+      <span className="sr-only">Toggle theme</span>
+    </>
+  )
+}
+
+export interface ThemeModeToggleProps {
+  lightLabel?: string;
+  darkLabel?: string;
+  systemLabel?: string;
+}
+
+export const ThemeModeToggle: React.FC<ThemeModeToggleProps> = (props) => {
+  const {
+    lightLabel = 'Light',
+    darkLabel = 'Dark',
+    systemLabel = 'System',
+  } = props;
+  const { setTheme } = useTheme()
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <RenderThemeIcon/>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {[
+          {value: 'system', label: systemLabel},
+          {value: 'light', label: lightLabel},
+          {value: 'dark', label: darkLabel},
+        ].map(({ value, label }) => (
+          <DropdownMenuItem
+            key={value}
+            onClick={() => setTheme(value)}
+          >
+            {label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+export default ThemeModeToggle

package/src_old/Theme/ThemeProvider.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+export function ThemeProvider(props: React.ComponentProps<typeof NextThemesProvider>) {
+  const {
+    children,
+    attribute="class",
+    defaultTheme="system",
+    enableSystem = true,
+    disableTransitionOnChange = true,
+    ...rest
+  } = props;
+
+  return (
+    <NextThemesProvider
+      attribute={attribute}
+      defaultTheme={defaultTheme}
+      enableSystem={enableSystem}
+      disableTransitionOnChange={disableTransitionOnChange}
+      {...rest}
+    >
+      {children}
+    </NextThemesProvider>
+  );
+}
+
+export default ThemeProvider;