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

package/src_old/Input/Input.types.ts

@@ -0,0 +1,26 @@
+import React, {
+  ChangeEvent,
+  ComponentPropsWithoutRef,
+  HTMLAttributes,
+  ReactNode,
+} from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { inputVariants } from './inputVariants';
+import { BaseInput } from './Input';
+
+export interface InputSlotInputProps
+  extends ComponentPropsWithoutRef<typeof BaseInput> {
+  startAdornment?: ReactNode;
+}
+
+export interface InputSlotProps {
+  input?: InputSlotInputProps;
+  wrapper?: HTMLAttributes<HTMLDivElement>;
+}
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
+  slotProps?: InputSlotProps;
+  /** func transform event.target.value before onChange event call*/
+  onTransform?: (value: string, event: ChangeEvent<HTMLInputElement>) => string;
+}

package/src_old/Input/index.ts

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

package/src_old/Input/inputVariants.tsx

@@ -0,0 +1,22 @@
+import { cva } from 'class-variance-authority';
+
+export const inputVariants = cva(
+  [
+    'flex h-10 w-full rounded-md border border-input px-3 py-2',
+    'text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground',
+    'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    'group-data-[state=invalid]/form-control:border-destructive',
+    'group-data-[state=valid]/form-control:border-input',
+  ],
+  {
+    variants: {
+      variant: {
+        default: 'bg-background',
+        grey: 'bg-slate-200',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);

package/src_old/InputOTP/InputOTP.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { Minus } from "lucide-react"
+
+import { cn } from "@oneplatformdev/utils";
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-disabled:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-1 ring-ring",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Minus />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

package/src_old/Label/Label.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@oneplatformdev/utils';
+import { labelVariants } from './labelVariants';
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

package/src_old/Label/index.ts

@@ -0,0 +1,2 @@
+export * from './Label';
+export * from './labelVariants'

package/src_old/Label/labelVariants.ts

@@ -0,0 +1,8 @@
+import { cva } from 'class-variance-authority';
+
+export const labelVariants = cva([
+  'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+  'text-md font-medium leading-[150%]',
+  'group-data-[state=valid]/form-control:text-[#363B4E]',
+  'group-data-[state=invalid]/form-control:text-destructive',
+]);

package/src_old/LazyLoader/LazyLoader.tsx

@@ -0,0 +1,30 @@
+import React, { JSX, Suspense } from 'react';
+
+import { LoadingMask } from '../LoadingMask';
+
+// TODO: types any
+/**
+ * Component lazy load component.
+ * @public
+ * @see [Documentation](#)
+ * @example
+ * ```tsx
+ * import { lazy } from 'react';
+ * import { LazyLoader } from '@oneplatformdev/ui/LazyLoader';
+ *
+ * const ModuleComponentViewLazy = LazyLoader(
+ *  lazy(() => import('path/to/module').then(module => ({
+ *      default: module.ModuleComponentView,
+ *    })),
+ *  ),
+ * );
+ * ```
+ */
+export const LazyLoader =
+  (Component: React.LazyExoticComponent<any>, showLoader = true) =>
+  (props: any): JSX.Element =>
+    (
+      <Suspense fallback={showLoader ? <LoadingMask /> : null}>
+        <Component {...props} />
+      </Suspense>
+    );

package/src_old/LoadedIcon/LoadedIcon.tsx

@@ -0,0 +1,36 @@
+import { cva, VariantProps } from 'class-variance-authority';
+import { LoaderCircleIcon } from 'lucide-react';
+import { FC, HTMLAttributes, PropsWithChildren } from 'react';
+
+import { cn } from '@oneplatformdev/utils';
+
+const loadedIconVariants = cva([], {
+  variants: {
+    size: {
+      sm: '[&_svg]:size-[18px]!',
+      md: '[&_svg]:size-5!',
+      lg: '[&_svg]:size-5!',
+    },
+  },
+  defaultVariants: { size: 'md' },
+});
+
+interface ILoadedIconProps
+	extends HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof loadedIconVariants> {
+	loading?: boolean;
+}
+
+export const LoadedIcon: FC<PropsWithChildren<ILoadedIconProps>> = (props) => {
+	const { loading, children, size = 'md', className, ...rest } = props;
+	return (
+		<div
+			{...rest}
+			className={cn(loadedIconVariants({size , className}))}
+		>
+			{loading
+				? <LoaderCircleIcon className="animate-spin"/>
+				: children}
+		</div>
+	);
+};

package/src_old/LoadedIcon/index.ts

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

package/src_old/LoadingMask/LoadingMask.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { ILoadingMaskProps } from './LoadingMask.types';
+import { RenderLoadingMask } from './RenderLoadingMask';
+import { cn } from '@oneplatformdev/utils';
+
+export const LoadingMask: FC<ILoadingMaskProps> = (props) => {
+  const { fullWidth = false, className, ...rest } = props;
+  if (!fullWidth) return <RenderLoadingMask />;
+  return (
+    <div
+      {...rest}
+      className={cn(
+        'absolute inset-0',
+        'flex items-center justify-center',
+        className
+      )}
+    >
+      <RenderLoadingMask />
+    </div>
+  );
+};

package/src_old/LoadingMask/LoadingMask.types.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+
+export interface ILoadingMaskProps extends HTMLAttributes<HTMLDivElement> {
+  fullWidth?: boolean;
+}

package/src_old/LoadingMask/RenderLoadingMask.tsx

@@ -0,0 +1,80 @@
+import { forwardRef, HTMLAttributes } from 'react';
+import { cn } from '@oneplatformdev/utils';
+
+export const RenderLoadingMask = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>((props, ref) => {
+  const { className, ...rest } = props;
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      className={cn('flex flex-1 items-center justify-center', className)}
+    >
+      <svg
+        className="h-8 w-8 animate-spin text-gray-900 dark:text-gray-50"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 4.75V6.25"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M17.1475 6.8525L16.0625 7.9375"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M19.25 12H17.75"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M17.1475 17.1475L16.0625 16.0625"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12 17.75V19.25"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M6.8525 17.1475L7.9375 16.0625"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M4.75 12H6.25"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M6.8525 6.8525L7.9375 7.9375"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </div>
+  );
+});

package/src_old/LoadingProgress/LoadingProgress.tsx

@@ -0,0 +1,36 @@
+import { FC } from "react";
+
+import { cn } from "@oneplatformdev/utils";
+import { loadingProgressVariants } from './loadingProgressVariants';
+import { ILoadingProgressProps } from './LoadingProgress.types';
+
+// TODO: progress loading for art-metal. remove or refactor
+export const LoadingProgress: FC<ILoadingProgressProps> = (props) => {
+  const { className, fullWidth = false, size, color, wrapClassName } = props;
+  return (
+    <div
+      className={cn(
+        wrapClassName,
+        'w-fit h-auto',
+        Boolean(fullWidth) && 'flex grow w-full h-full items-center justify-center'
+      )}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={cn(
+          loadingProgressVariants({ size, color, className }),
+        )}
+      >
+        <path d="M21 12a9 9 0 1 1-6.219-8.56"/>
+      </svg>
+    </div>
+  );
+};

package/src_old/LoadingProgress/LoadingProgress.types.tsx

@@ -0,0 +1,8 @@
+import { type VariantProps } from "class-variance-authority";
+import { loadingProgressVariants } from './loadingProgressVariants';
+
+export interface ILoadingProgressProps extends VariantProps<typeof loadingProgressVariants> {
+  wrapClassName?: string;
+  className?: string;
+  fullWidth?: boolean;
+};

package/src_old/LoadingProgress/index.ts

@@ -0,0 +1,3 @@
+export * from './LoadingProgress'
+export * from './loadingProgressVariants'
+export type * from './LoadingProgress.types'

package/src_old/LoadingProgress/loadingProgressVariants.ts

@@ -0,0 +1,22 @@
+import { cva } from 'class-variance-authority';
+
+export const loadingProgressVariants = cva(
+  "animate-spin",
+  {
+    variants: {
+      color: {
+        primary: 'text-primary',
+        default: ''
+      },
+      size: {
+        default: "",
+        sm: "",
+        lg: "w-20 h-20",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      color: "default",
+    },
+  }
+);

package/src_old/Menubar/Menubar.tsx

@@ -0,0 +1,232 @@
+"use client"
+
+import * as React from "react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@oneplatformdev/utils"
+
+const MenubarMenu: typeof MenubarPrimitive.Menu = MenubarPrimitive.Menu;
+const MenubarGroup: typeof MenubarPrimitive.Group = MenubarPrimitive.Group;
+const MenubarPortal: typeof MenubarPrimitive.Portal = MenubarPrimitive.Portal;
+const MenubarSub: typeof MenubarPrimitive.Sub = MenubarPrimitive.Sub;
+const MenubarRadioGroup: typeof MenubarPrimitive.RadioGroup = MenubarPrimitive.RadioGroup;
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-xs",
+      className
+    )}
+    {...props}
+  />
+))
+Menubar.displayName = MenubarPrimitive.Root.displayName
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  )
+)
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarItem.displayName = MenubarPrimitive.Item.displayName
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 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 left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-4 w-4 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+MenubarShortcut.displayname = "MenubarShortcut"
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+}