@modul/mbui 0.0.13-beta-pv-53127-63b6a630 → 0.0.13-beta-pv-53036-3ecb0556

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modul/mbui",
-  "version": "0.0.13-beta-pv-53127-63b6a630",
+  "version": "0.0.13-beta-pv-53036-3ecb0556",
   "packageManager": "yarn@3.5.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -21,15 +21,17 @@
     "dist"
   ],
   "dependencies": {
+    "@hookform/resolvers": "3.9.0",
     "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-alert-dialog": "1.1.1",
     "@radix-ui/react-collapsible": "1.1.0",
     "@radix-ui/react-dropdown-menu": "2.1.1",
     "@radix-ui/react-label": "2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
-    "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-select": "2.1.1",
     "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "1.1.0",
+    "@radix-ui/react-switch": "1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@storybook/addon-storyshots": "latest",
@@ -39,11 +41,15 @@
     "input-otp": "1.2.4",
     "lodash": "4.17.5",
     "react-datepicker": "4.16.0",
-    "react-imask": "7.1.3",
+    "react-day-picker": "^9.0.8",
+    "react-hook-form": "7.53.0",
+    "react-imask": "7.6.1",
+    "react-select": "5.8.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.4",
     "tailwindcss-animate": "^1.0.7",
-    "vaul": "0.9.1"
+    "vaul": "0.9.1",
+    "zod": "3.23.8"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
@@ -54,6 +60,7 @@
     "@storybook/addon-essentials": "^8.2.8",
     "@storybook/addon-interactions": "^8.2.8",
     "@storybook/addon-links": "^8.2.8",
+    "@storybook/addon-onboarding": "^8.2.8",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@storybook/blocks": "^8.2.8",
     "@storybook/react": "^8.2.8",

package/src/{Info/Info.tsx → Alert/Alert.tsx}

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../@/lib/utils'
 // import { cn } from "@/lib/utils" порешать с алиасами
 
-const infoVariants = cva('px-[16px] py-[12px] rounded-1 text-[14px]', {
+const alertVariants = cva('px-[16px] py-[12px] rounded-sm text-[14px]', {
 	variants: {
 		variant: {
 			light: 'bg-[--cl-graphite-7]',
@@ -19,13 +19,13 @@ const infoVariants = cva('px-[16px] py-[12px] rounded-1 text-[14px]', {
 })
 
 
-export interface IProps	extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof infoVariants> {
+export interface IProps	extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
 }
 
-const Info = React.forwardRef<HTMLDivElement, IProps>(({ className, variant, children, ...props }, ref) => {
+const Alert = React.forwardRef<HTMLDivElement, IProps>(({ className, variant, children, ...props }, ref) => {
 	return (
 		<div
-			className={cn(infoVariants({ variant, className }))}
+			className={cn(alertVariants({ variant, className }))}
 			{...props}
 		>
 			{children}
@@ -33,6 +33,6 @@ const Info = React.forwardRef<HTMLDivElement, IProps>(({ className, variant, chi
 	)
 })
 
-Info.displayName = 'Info'
+Alert.displayName = 'Alert'
 
-export { Info }
+export { Alert }

package/src/Alert/index.ts

@@ -0,0 +1 @@
+export { Alert } from './Alert'

package/src/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,138 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "../@/lib/utils"
+import { buttonVariants } from "../Button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-input bg-dialog p-[16px] shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-md",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants({variant: 'primary', size: 'sm'}), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline", size: 'sm' }),
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

package/src/AlertDialog/index.ts

@@ -0,0 +1,13 @@
+export {
+	AlertDialog,
+	AlertDialogPortal,
+	AlertDialogOverlay,
+	AlertDialogTrigger,
+	AlertDialogContent,
+	AlertDialogHeader,
+	AlertDialogFooter,
+	AlertDialogTitle,
+	AlertDialogDescription,
+	AlertDialogAction,
+	AlertDialogCancel,
+} from './AlertDialog'

package/src/Calendar/Calendar.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react'
+import { DayPicker } from 'react-day-picker'
+import { cn } from '../@/lib/utils'
+import { ru } from 'date-fns/locale'
+
+const daySelectedClasses = 'bg-btn-primary text-btn-primary rounded-sm'
+const dayTodayClasses = 'bg-btn-secondary text-btn-secondary rounded-sm'
+const rangeMiddleClasses = 'date-range-middle aria-selected:bg-btn-primary/50 aria-selected:text-white'
+const btnNavClasses =
+	'opacity-50 hover:opacity-100 ring-offset-2 focus-visible:opacity-100 focus-visible:outline-primary border-input border rounded-sm shadow-sm'
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+	return (
+		<DayPicker
+			locale={ru}
+			showOutsideDays={showOutsideDays}
+			className={cn('inline-flex', className)}
+			classNames={{
+				months: 'relative',
+				month: 'flex flex-col space-y-[16px] items-center',
+				month_grid: 'w-full border-collapse',
+				month_caption: 'inline m-x-auto',
+				caption_label: 'text-sm font-medium capitalize',
+				nav: 'flex justify-between absolute start-0 end-0',
+				button_previous: btnNavClasses,
+				button_next: btnNavClasses,
+				weekdays: 'flex',
+				weekday: 'text-light w-[32px] font-normal text-[14px]',
+				week: 'flex w-full mt-2',
+				day_button: 'w-[32px] h-[32px] p-0',
+				day: cn(
+					'aria-selected:opacity-100 text-[14px] leading-[1]',
+					props.mode === 'range'
+						? '[&:(.day-range-middle)]:rounded-0 [&:has(>.day-range-end)]:rounded-r-sm [&:has(>.day-range-start)]:rounded-l-sm first:[&:has([aria-selected])]:rounded-l-sm last:[&:has([aria-selected])]:rounded-r-sm'
+						: '[&:([aria-selected])]:rounded-sm'
+				),
+				range_start: 'day-range-start',
+				range_end: 'day-range-end',
+				range_middle: rangeMiddleClasses,
+				selected: daySelectedClasses,
+				today: dayTodayClasses,
+				outside:
+					'day-outside opacity-50 aria-selected:bg-primary aria-selected:text-[white] aria-selected:opacity-30',
+				disabled: 'text-light opacity-50',
+				hidden: 'invisible',
+				...classNames,
+			}}
+			components={
+				{
+					// Chevron: () => <Left className="w-4 h-4" />,
+				}
+			}
+			{...props}
+		/>
+	)
+}
+
+Calendar.displayName = 'Calendar'
+
+export { Calendar }

package/src/Calendar/index.ts

@@ -0,0 +1 @@
+export { Calendar } from './Calendar'

package/src/DatePicker/DatePicker.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { format } from 'date-fns'
+import { cn } from '../@/lib/utils'
+import { Calendar } from '../Calendar'
+import { Calendar as CalendarIcon } from '../Icon'
+import { Popover } from '../Popover'
+import { ru } from 'date-fns/locale'
+
+const trigegrClasses = 'inline-flex items-center border-input px-[12px] border rounded-sm h-[44px] text-left'
+
+interface IProps {
+	placeholder?: string,
+	date: Date,
+	classTrigger?: string,
+	triggerDisabled: boolean,
+}
+
+const DatePicker: React.FC<IProps> = ({placeholder, triggerDisabled, date, classTrigger,  ...props}) => {
+
+	return (
+		<Popover>
+			<Popover.Trigger asChild>
+				<button className={cn(trigegrClasses, {'bg-light text-light':triggerDisabled}, classTrigger)} disabled={triggerDisabled}>
+					{date ? <span className='w-[calc(100%-26px)] truncate'>{format(date ,'PPP', {locale: ru})}</span> : <span className='w-[calc(100%-26px)] text-light truncate'>{placeholder}</span>}
+					<CalendarIcon width={18} height={18} className="ml-[8px] text-light shrink-0" />
+				</button>
+			</Popover.Trigger>
+			<Popover.Content
+				className="bg-page p-0 w-auto"
+				align="center"
+			>
+				<Calendar {...props}/>
+			</Popover.Content>
+		</Popover>
+	)
+}
+
+export { DatePicker }

package/src/DatePicker/index.ts

@@ -0,0 +1 @@
+export { DatePicker } from './DatePicker'

package/src/Drawer/Drawer.tsx

@@ -47,8 +47,8 @@ const DrawerContent = React.forwardRef<
 			<DrawerPrimitive.Content
 				ref={ref}
 				className={cn(
-					`z-50 fixed inset-x-0 flex flex-col bg-page drop-shadow-1 max-h-[94%] sm:container`,
-					direction === 'top' ? 'top-0 rounded-b-1 ' : 'bottom-0 rounded-t-1',
+					`z-50 fixed inset-x-0 flex flex-col bg-page shadow-sm max-h-[94%] sm:container`,
+					direction === 'top' ? 'top-0 rounded-b-sm ' : 'bottom-0 rounded-t-sm',
 					className
 				)}
 				{...props}

package/src/Form/Form.tsx

@@ -0,0 +1,152 @@
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
+import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from 'react-hook-form'
+
+import { cn } from '../@/lib/utils'
+import { Label } from '../Label'
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+	name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)
+
+const FormField = <
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+	...props
+}: ControllerProps<TFieldValues, TName>) => {
+	return (
+		<FormFieldContext.Provider value={{ name: props.name }}>
+			<Controller {...props} />
+		</FormFieldContext.Provider>
+	)
+}
+
+const useFormField = () => {
+	const fieldContext = React.useContext(FormFieldContext)
+	const itemContext = React.useContext(FormItemContext)
+	const { getFieldState, formState } = useFormContext()
+
+	const fieldState = getFieldState(fieldContext.name, formState)
+
+	if (!fieldContext) {
+		throw new Error('useFormField should be used within <FormField>')
+	}
+
+	const { id } = itemContext
+
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState,
+	}
+}
+
+type FormItemContextValue = {
+	id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => {
+		const id = React.useId()
+
+		return (
+			<FormItemContext.Provider value={{ id }}>
+				<div
+					ref={ref}
+					className={cn('space-y-2', className)}
+					{...props}
+				/>
+			</FormItemContext.Provider>
+		)
+	}
+)
+FormItem.displayName = 'FormItem'
+
+const FormLabel = React.forwardRef<
+	React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+	const { error, formItemId } = useFormField()
+
+	return (
+		<Label
+			ref={ref}
+			className={cn(error && 'text-destructive', className)}
+			htmlFor={formItemId}
+			{...props}
+		/>
+	)
+})
+FormLabel.displayName = 'FormLabel'
+
+const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
+	({ ...props }, ref) => {
+		const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+		return (
+			<Slot
+				ref={ref}
+				id={formItemId}
+				aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+				aria-invalid={!!error}
+				{...props}
+			/>
+		)
+	}
+)
+FormControl.displayName = 'FormControl'
+
+const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+	({ className, ...props }, ref) => {
+		const { formDescriptionId } = useFormField()
+
+		return (
+			<p
+				ref={ref}
+				id={formDescriptionId}
+				className={cn('text-[0.8rem] text-light', className)}
+				{...props}
+			/>
+		)
+	}
+)
+FormDescription.displayName = 'FormDescription'
+
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+	({ className, children, ...props }, ref) => {
+		const { error, formMessageId } = useFormField()
+		const body = error ? String(error?.message) : children
+
+		if (!body) {
+			return null
+		}
+
+		return (
+			<p
+				ref={ref}
+				id={formMessageId}
+				className={cn('text-[0.8rem] font-medium text-destructive', className)}
+				{...props}
+			>
+				{body}
+			</p>
+		)
+	}
+)
+FormMessage.displayName = 'FormMessage'
+
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField }

package/src/Form/index.ts

@@ -0,0 +1 @@
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField } from './Form'

package/src/Input/Input.tsx

@@ -21,7 +21,7 @@ const InputField = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<
 		<input
 			type={type}
 			className={cn(
-				'border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-1 focus-visible:ring-1 focus-visible:ring-ring w-full h-[44px] file:font-medium file:text-sm placeholder:text-muted-foreground leading-[1.17] transition-colors focus-visible:outline-none disabled:cursor-not-allowed',
+				'form-input px-[16px] border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-sm focus-visible:ring-1 focus-visible:ring-ring w-full h-[44px] file:font-medium file:text-sm placeholder:text-muted-foreground leading-[1.17] transition-colors focus-visible:outline-none disabled:cursor-not-allowed',
 				className
 			)}
 			ref={ref}

package/src/Input/InputMask.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import { IMaskInput } from 'react-imask'
+
+const inputClasses = 'form-input border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-sm focus-visible:ring-1 focus-visible:ring-ring w-full h-[44px] file:font-medium file:text-sm placeholder:text-muted-foreground leading-[1.17] transition-colors focus-visible:outline-none disabled:cursor-not-allowed'
+
+const InputMask: React.FC = ({ ...props }) => {
+	return (
+		<IMaskInput
+			className={inputClasses}
+			{...props}
+		/>
+	)
+}
+
+export { InputMask }

package/src/Input/index.ts

@@ -1 +1,2 @@
-export { InputField, InputLabel } from './Input'
+export { InputField, InputLabel } from './Input'
+export { InputMask } from './InputMask'

package/src/Label/Label.tsx

@@ -3,7 +3,7 @@ import * as LabelPrimitive from '@radix-ui/react-label'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../@/lib/utils'
 
-const labelVariants = cva('peer-disabled:opacity-70 font-medium text-[12px] leading-[1.33] peer-disabled:cursor-not-allowed')
+const labelVariants = cva('peer-disabled:opacity-70 peer-disabled:cursor-not-allowed')
 
 const Label = React.forwardRef<
 	React.ElementRef<typeof LabelPrimitive.Root>,

package/src/Page/Page.tsx

@@ -15,7 +15,7 @@ const Navbar: FC<IProps> = ({ children, className }) => {
 }
 
 const Content: FC<IProps> = ({ children, className }) => {
-	return <div className={cn('px-[20px] py-[16px]', className)}>{children}</div>
+	return <div className={cn('px-[20px] py-[16px] overflow-y-auto', className)}>{children}</div>
 }
 
 const Page: IPage = ({ children, className }: IProps) => {

package/src/Select/Select.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react'
+import { SelectBase } from './SelectBase'
+
+const Select: React.FC = (props) => {
+	return <SelectBase  {...props}/>
+}
+
+export { Select }