@oneplatformdev/ui 0.1.0-8 → 0.1.9-2

package/src_old/Resizable/Resizable.tsx

@@ -1,45 +0,0 @@
-"use client"
-
-import { GripVertical } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
-
-import { cn } from "@oneplatformdev/utils";
-
-const ResizablePanelGroup = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
-    className={cn(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
-    )}
-    {...props}
-  />
-)
-
-const ResizablePanel = ResizablePrimitive.Panel
-
-const ResizableHandle = ({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
-}) => (
-  <ResizablePrimitive.PanelResizeHandle
-    className={cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className
-    )}
-    {...props}
-  >
-    {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <GripVertical className="h-2.5 w-2.5" />
-      </div>
-    )}
-  </ResizablePrimitive.PanelResizeHandle>
-)
-
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

package/src_old/Resizable/index.ts

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

package/src_old/ScrollArea/ScrollArea.tsx

@@ -1,58 +0,0 @@
-'use client';
-
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-import * as React from 'react';
-
-import { cn } from '@oneplatformdev/utils';
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn(
-      'relative overflow-hidden pr-2',
-      // '[&:has([data-orientation=vertical])]:pr-2',
-      className
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      'p-px bg-[#DCDDE1] rounded-full',
-      orientation === "vertical" &&
-      "h-full w-1.5 border-l border-l-transparent",
-      orientation === "horizontal" &&
-      "h-1.5 flex-col border-t border-t-transparent",
-      className
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb
-      className={cn(
-        "relative flex-1 rounded-full bg-border",
-        'bg-[#FCFCFC]'
-      )}
-    />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };

package/src_old/ScrollArea/index.ts

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

package/src_old/Search/Search.tsx

@@ -1,57 +0,0 @@
-'use client';
-
-import { ChangeEvent, useState } from 'react';
-
-import { Input } from '../Input';
-import { SearchProps } from './Search.types';
-
-import { useDebounceCallback } from '@oneplatformdev/hooks';
-import { cn } from '@oneplatformdev/utils';
-import { SearchIcon } from 'lucide-react';
-import { LoadedIcon } from '../LoadedIcon';
-
-export const Search = (props: SearchProps) => {
-  const {
-    search: initialSearch,
-    onChange: handleChange,
-    onSearch,
-    placeholder = 'Search',
-    className,
-    loading = false,
-    slotProps,
-    name = 'search',
-    ...rest
-  } = props;
-  const [search, setSearch] = useState(initialSearch);
-  const debounced = useDebounceCallback(onSearch, 1000);
-
-  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const v = e.target.value;
-    setSearch(v);
-    handleChange?.(e);
-    debounced(e.target.value);
-  };
-
-  return (
-    <Input
-      name={name}
-      placeholder={placeholder}
-      value={search}
-      className={cn('min-w-[340px]', className)}
-      onChange={onChange}
-      {...rest}
-      {...(slotProps || {})}
-      slotProps={{
-        ...(slotProps || {}),
-        input: {
-          startAdornment: (
-            <LoadedIcon loading={loading} size="sm">
-              <SearchIcon />
-            </LoadedIcon>
-          ),
-          ...(slotProps?.input || {}),
-        },
-      }}
-    />
-  );
-};

package/src_old/Search/Search.types.tsx

@@ -1,9 +0,0 @@
-'use client';
-
-import { InputProps } from '../Input';
-
-export interface SearchProps extends InputProps {
-  search: string;
-  onSearch: (value?: string) => void;
-  loading?: boolean;
-}

package/src_old/Search/index.tsx

@@ -1,3 +0,0 @@
-export * from './Search';
-export { Search as default } from './Search';
-export type * from './Search.types';

package/src_old/Select/Select.stories.tsx

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Select } from './Select';
-
-const meta: Meta<typeof Select> = {
-  title: 'Select',
-  component: Select,
-  argTypes: {
-    value: { control: 'text' },
-    options: { control: 'object' },
-    onChange: { action: 'changed' },
-    nullable: { control: 'boolean' },
-    clearLabel: { control: 'text' },
-    disabled: { control: 'boolean' },
-  },
-  args: {
-    value: '',
-    options: [
-      { value: 'option-0', label: 'Option 0' },
-      { value: 'option-1', label: 'Option 1' },
-      { value: 'option-2', label: 'Option 2' },
-      { value: 'option-3', label: 'Option 3' },
-      { value: 'option-4', label: 'Option 4' },
-    ],
-    placeholder: 'Select placeholder text',
-    nullable: false,
-    clearLabel: 'Clear button label text',
-    disabled: false,
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    value: '',
-    nullable: false,
-    clearLabel: 'Clear',
-    disabled: false,
-    onChange: (v) => {
-      console.log(v)
-    },
-  },
-};

package/src_old/Select/Select.tsx

@@ -1,171 +0,0 @@
-import * as React from 'react';
-import { isValidElement, ReactNode } from 'react';
-
-import { Button } from '../Button';
-import {
-  SelectContent,
-  SelectItem,
-  SelectOption,
-  SelectProps,
-  SelectRoot,
-  SelectTrigger,
-  SelectValue,
-} from '../Select';
-import { isValidReactElement } from '@oneplatformdev/utils';
-
-const RenderSelectTrigger = <ExtendOptionData,>(
-  props: SelectProps<ExtendOptionData>
-) => {
-  const { placeholder, renderTrigger, slotProps } = props;
-  const defaultComponent = (
-    <SelectTrigger {...(slotProps?.triggerProps || {})}>
-      <SelectValue placeholder={placeholder} />
-    </SelectTrigger>
-  );
-
-  if (
-    Boolean(renderTrigger) &&
-    typeof renderTrigger === 'function' &&
-    isValidReactElement(renderTrigger(props, defaultComponent))
-  ) {
-    return renderTrigger(props, defaultComponent);
-  }
-
-  return defaultComponent;
-};
-
-const DefaultRenderSelectOption = <ExtendOptionData,>(
-  props: SelectProps<ExtendOptionData> & {
-    option: SelectOption<ExtendOptionData>;
-    index: number;
-    deep?: number;
-    children?: ((params: SelectProps<ExtendOptionData> & {
-      option: SelectOption<ExtendOptionData>;
-      index: number;
-    }) => ReactNode) | ReactNode;
-  }
-) => {
-  const { children, option, deep = 0 } = props;
-
-  return (
-    <SelectItem
-      key={option.value}
-      value={option.value}
-      disabled={option.disabled}
-      className='cursor-pointer'
-      style={{ paddingLeft: `calc(8px + ${(deep || 0) * 8}px)` }}
-    >
-      {!children && option.label}
-      {children && (
-        <>
-          {typeof children === 'function'
-            ? children({ ...props })
-            : children
-          }
-        </>
-      )}
-    </SelectItem>
-  )
-};
-
-const RenderSelectOption = <ExtendOptionData,>(
-  props: SelectProps<ExtendOptionData> & {
-    option: SelectOption<ExtendOptionData>;
-    index: number;
-    deep?: number;
-  }
-) => {
-  const { renderOption, option, index, options, deep = 0, ...rest } = props;
-
-  if (
-    Boolean(renderOption) &&
-    typeof renderOption === 'function' &&
-    isValidElement(
-      renderOption(
-        option,
-        index,
-        options,
-        { ...rest, options },
-        <DefaultRenderSelectOption {...props} />
-      )
-    )
-  ) {
-    return (
-      <SelectItem key={option.value} value={option.value}>
-        {renderOption(
-          option,
-          index,
-          options,
-          { ...rest, options },
-          <DefaultRenderSelectOption {...props} />
-        )}
-      </SelectItem>
-    );
-  }
-
-  if(!option.children?.length) {
-    return <DefaultRenderSelectOption {...props} />;
-  }
-
-  return (
-    <div
-      key={option.value}
-      className="flex flex-col gap-1 truncate line-clamp-2"
-    >
-      <DefaultRenderSelectOption {...props} />
-      {option.children?.map((child, idx, arr) => (
-        <RenderSelectOption
-          {...props}
-          key={child.value}
-          option={child}
-          options={arr}
-          index={idx}
-          deep={(deep || 0) + 1}
-        />
-      ))}
-    </div>
-  )
-};
-
-// TODO: add description
-export const Select = <ExtendOptionData,>(
-  props: SelectProps<ExtendOptionData>
-) => {
-  const {
-    value,
-    options,
-    onChange,
-    nullable = false,
-    clearLabel = 'Clear',
-    disabled,
-  } = props;
-
-  return (
-    <SelectRoot value={value} onValueChange={onChange} disabled={disabled}>
-      <RenderSelectTrigger {...props} />
-      <SelectContent>
-        {nullable && (
-          <Button
-            className="w-full px-2"
-            variant="secondary"
-            size="sm"
-            onClick={() => {
-              onChange?.('');
-            }}
-          >
-            {clearLabel}
-          </Button>
-        )}
-        {options.map((option, index) => (
-          <RenderSelectOption
-            {...props}
-            key={option.value}
-            option={option}
-            index={index}
-            deep={0}
-          />
-        ))}
-      </SelectContent>
-    </SelectRoot>
-  );
-};

package/src_old/Select/Select.types.ts

@@ -1,46 +0,0 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-
-export interface SelectOption<ExtendOptionData = unknown> {
-  value: string;
-  label?: ReactNode;
-  disabled?: boolean;
-  data?: ExtendOptionData;
-  children?: SelectOption<ExtendOptionData>[];
-}
-
-export type SelectRenderTrigger<ExtendOptionData> = (props: Omit<SelectProps<ExtendOptionData>, 'renderTrigger'>, defaultComponent: ReactNode) => ReactNode;
-
-export type SelectRenderOption<ExtendOptionData> = (
-  option: SelectOption<ExtendOptionData>,
-  index: number,
-  options: SelectOption<ExtendOptionData>[],
-  props: Omit<SelectProps<ExtendOptionData>, 'renderOption'>,
-  defaultComponent: ReactNode
-) => ReactNode;
-
-export interface SelectProps<ExtendOptionData> {
-  /** Render options. */
-  options: SelectOption<ExtendOptionData>[];
-  /** Current value. */
-  value?: SelectOption<ExtendOptionData>['value'];
-  /** Select placeholder string. */
-  placeholder?: string;
-  /** Select Root onValueChange handler. */
-  onChange?: (value: SelectOption<ExtendOptionData>['value']) => void;
-  /** Show reset select item button. */
-  disabled?: boolean;
-  /** Show reset select item button. */
-  nullable?: boolean;
-  /** label for nullable button. */
-  clearLabel?: string;
-  /** Render custom trigger. */
-  renderTrigger?: SelectRenderTrigger<ExtendOptionData>;
-  /** Render custom option. */
-  renderOption?: SelectRenderOption<ExtendOptionData>;
-  /** Select Slot props */
-  slotProps?: {
-    /** Select Default Trigger Props */
-    triggerProps?: ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>;
-  };
-}

package/src_old/Select/SelectRoot.tsx

@@ -1,164 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { Check, ChevronDown, ChevronUp } from 'lucide-react';
-
-import { cn } from '@oneplatformdev/utils';
-
-const SelectRoot = SelectPrimitive.Root;
-
-const SelectGroup = SelectPrimitive.Group
-
-const SelectValue = SelectPrimitive.Value
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      'disabled:[&>svg]:hidden',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", style, ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
-      )}
-      position={position}
-      style={{
-        pointerEvents: 'auto',
-        ...style,
-      }}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
-    {...props}
-  />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
-
-export {
-  SelectRoot,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-}

package/src_old/Select/index.ts

@@ -1,3 +0,0 @@
-export * from './SelectRoot';
-export * from './Select';
-export type * from './Select.types'

package/src_old/Separator/Separator.tsx

@@ -1,31 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-
-import { cn } from "@oneplatformdev/utils";
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
-
-export { Separator }

package/src_old/Separator/index.ts

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