@oneplatformdev/ui 0.1.0-5 → 0.1.0-8

package/src_old/FormTextarea/FormTextarea.tsx

@@ -0,0 +1,28 @@
+import { FormControl, FormRenderControl } from '../Form';
+import { FormTextareaProps } from './FormTextarea.types';
+import { FieldValues } from 'react-hook-form';
+import { Textarea } from '../Textarea';
+
+// TODO: add description
+export const FormTextarea = <Data extends FieldValues>(
+  props: FormTextareaProps<Data>
+) => {
+const { form, label, name, containerProps, ...rest } = props;
+    return (
+        <FormRenderControl
+            form={form}
+            name={name}
+            label={label}
+            containerProps={containerProps}
+            render={({ field }) => (
+              <FormControl>
+                <Textarea
+                  {...field}
+                  value={field.value || ''}
+                  {...rest}
+                />
+              </FormControl>
+            )}
+        />
+    )
+};

package/src_old/FormTextarea/FormTextarea.types.tsx

@@ -0,0 +1,7 @@
+import { FieldValues } from 'react-hook-form';
+import { FormRenderControlExtendProps } from '../Form';
+import { TextareaProps } from '../Textarea';
+
+export interface FormTextareaProps<Data extends FieldValues>
+  extends FormRenderControlExtendProps<Data>,
+    Omit<TextareaProps, 'form' | 'name'> {}

package/src_old/FormTextarea/index.tsx

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

package/src_old/Header/Header.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+
+import { SidebarTrigger } from "../Sidebar";
+import { Separator } from "../Separator";
+import { HeaderProps } from "./Header.types";
+
+export const Header: React.FC<React.PropsWithChildren<HeaderProps>> = (props) => {
+  const {
+    children,
+    hideTrigger = false,
+  } = props;
+  return (
+    <header
+      className="flex h-16 shrink-0 items-center justify-between gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12"
+    >
+      {!hideTrigger && (
+        <div className="flex items-center gap-2">
+          <SidebarTrigger className="ml-1"/>
+          <Separator orientation="vertical" className="mr-2 h-4"/>
+        </div>
+      )}
+      {Boolean(hideTrigger)
+        ? children
+        : (
+          <div className="flex-1 text-right pr-6">
+            {children}
+          </div>
+        )
+      }
+    </header>
+  )
+}
+
+export default Header;

package/src_old/Header/Header.types.tsx

@@ -0,0 +1,3 @@
+export interface HeaderProps {
+  hideTrigger?: boolean;
+}

package/src_old/Header/index.ts

@@ -0,0 +1,2 @@
+export {Header, default} from './Header'
+export type * from './Header.types'

package/src_old/HoverCard/HoverCard.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@oneplatformdev/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

package/src_old/HoverCard/index.ts

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

package/src_old/Input/Input.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
+import { inputVariants } from './inputVariants';
+
+import { cn } from '@oneplatformdev/utils';
+import { InputProps } from './Input.types';
+
+export const BaseInput = React.forwardRef<HTMLInputElement, InputProps>(
+  (props, ref) => {
+    const {
+      className,
+      variant,
+      type,
+      slotProps: { input, wrapper } = {},
+      onChange,
+      onTransform,
+      ...rest
+    } = props;
+    const {
+      startAdornment,
+      className: classNameInputSlotProps,
+      ...restInputSlotProps
+    } = input || {};
+    return (
+      <div {...(wrapper || {})} className={cn('relative', wrapper?.className)}>
+        {Boolean(startAdornment) && (
+          <span className="absolute left-[10px] top-1/2 -translate-y-1/2">
+            {startAdornment}
+          </span>
+        )}
+        <input
+          type={type}
+          className={cn(
+            inputVariants({ variant, className }),
+            Boolean(startAdornment) && 'pl-8',
+            classNameInputSlotProps
+          )}
+          ref={ref}
+          {...restInputSlotProps}
+          {...rest}
+          onChange={(e) => {
+            if (typeof onTransform?.(e.target.value, e) === 'string') {
+              e.target.value = onTransform(e.target.value, e);
+            }
+            if (onChange) onChange(e);
+          }}
+        />
+      </div>
+    );
+  }
+);
+BaseInput.displayName = 'Input';
+
+export const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(
+  (props, ref) => {
+    const [isVisible, setIsVisible] = useState<boolean>(false);
+
+    const inputType = isVisible ? 'text' : 'password';
+
+    const toggleVisibility = () => {
+      setIsVisible(!isVisible);
+    };
+
+    return (
+      <div {...(props?.slotProps?.wrapper || {})} className={cn('relative', props?.slotProps?.wrapper?.className)}>
+        <BaseInput {...props} type={inputType} className="pr-8" ref={ref} />
+        <VisibilityButton isVisible={isVisible} onClick={toggleVisibility} />
+      </div>
+    );
+  }
+);
+PasswordInput.displayName = 'PasswordInput';
+
+type VisibilityButtonProps = {
+  isVisible: boolean
+  onClick: () => void
+}
+
+const VisibilityButton = ({ isVisible, onClick }:VisibilityButtonProps) => (
+  <button
+    type="button"
+    onClick={onClick}
+    className="absolute top-1/2 right-3 transform -translate-y-1/2"
+  >
+    {isVisible ? <Eye size={16} /> : <EyeOff size={16} />}
+  </button>
+);
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ type, ...props }, ref) => {
+    if (type === 'password') return <PasswordInput type={type} {...props} ref={ref} />;
+    return <BaseInput type={type} {...props} ref={ref} />;
+  }
+);
+Input.displayName = 'Input';

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/InputOTP/index.ts

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

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/LazyLoader/index.ts

@@ -0,0 +1 @@
+export { LazyLoader as default, LazyLoader } from './LazyLoader';

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/LoadingMask/index.ts

@@ -0,0 +1,3 @@
+export { LoadingMask } from './LoadingMask';
+export { RenderLoadingMask } from './RenderLoadingMask';
+export type * from './LoadingMask.types';

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",
+    },
+  }
+);