@oneplatformdev/ui 0.1.0-8 → 0.1.9-2

package/src_old/FormTextarea/FormTextarea.tsx

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

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

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

package/src_old/Header/Header.tsx

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

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

package/src_old/Header/index.ts

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

package/src_old/HoverCard/HoverCard.tsx

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

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

package/src_old/Input/Input.tsx

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

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

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

package/src_old/Input/inputVariants.tsx

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

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

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

package/src_old/Label/Label.tsx

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

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

package/src_old/Label/labelVariants.ts

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

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

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

package/src_old/LoadedIcon/LoadedIcon.tsx

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

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

package/src_old/LoadingMask/LoadingMask.tsx

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

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

package/src_old/LoadingMask/RenderLoadingMask.tsx

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

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

package/src_old/LoadingProgress/LoadingProgress.tsx

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

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

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

package/src_old/LoadingProgress/loadingProgressVariants.ts

@@ -1,22 +0,0 @@
-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",
-    },
-  }
-);