@oneplatformdev/ui 0.1.0-8 → 0.1.9-2

package/src_old/Sidebar/index.ts

@@ -1 +0,0 @@
-export * from './Sidebar';

package/src_old/Skeleton/Skeleton.tsx

@@ -1,17 +0,0 @@
-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/Skeleton/index.ts

@@ -1 +0,0 @@
-export * from './Skeleton';

package/src_old/Slider/Slider.tsx

@@ -1,28 +0,0 @@
-"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/Slider/index.ts

@@ -1 +0,0 @@
-export * from './Slider';

package/src_old/Sonner/Sonner.tsx

@@ -1,31 +0,0 @@
-"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/Sonner/index.ts

@@ -1 +0,0 @@
-export * from './Sonner';

package/src_old/Switch/Switch.tsx

@@ -1,29 +0,0 @@
-"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/Switch/index.ts

@@ -1 +0,0 @@
-export * from './Switch';

package/src_old/Table/Table.tsx

@@ -1,120 +0,0 @@
-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/Table/index.ts

@@ -1 +0,0 @@
-export * from './Table';

package/src_old/TablePagination/TablePagination.tsx

@@ -1,96 +0,0 @@
-'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/TablePagination/index.ts

@@ -1 +0,0 @@
-export * from './TablePagination';

package/src_old/Tabs/Tabs.tsx

@@ -1,35 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,55 +0,0 @@
-"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

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

package/src_old/Textarea/Textarea.tsx

@@ -1,78 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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/index.ts

@@ -1,2 +0,0 @@
-export * from './Textarea';
-export type * from './Textarea.types';

package/src_old/Textarea/useAutosizeTextArea.ts

@@ -1,33 +0,0 @@
-'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

@@ -1,71 +0,0 @@
-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