@modul/mbui 0.0.12-beta-pv-53064-e5c99806 → 0.0.13-beta-pv-53036-bbe30888

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-muted-foreground', 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/Icon/icons/AddList.tsx

@@ -15,4 +15,5 @@ const SvgAddList = (props: SVGProps<SVGSVGElement>) => (
 		/>
 	</SvgIcon>
 )
+
 export default SvgAddList

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',
+				'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/Page/Page.tsx

@@ -5,27 +5,38 @@ type IProps = {
 	children?: React.ReactNode
 	className?: string
 }
-
-const Navbar: FC = ({ children, className }: IProps) => {
-	return <div className={cn('flex items-center h-[44px] px-[20px]', className)}>{children}</div>
-}
-
-const Content: FC = ({ children, className }: IProps) => {
-	return <div className={cn('px-[20px]', className)}>{children}</div>
-}
-
 interface IPage extends FC<IProps> {
 	displayName: string
 	Navbar: FC<IProps>
 	Content: FC<IProps>
 }
+const Navbar: FC<IProps> = ({ children, className }) => {
+	return <div className={cn('flex items-center h-[44px] px-[20px]', className)}>{children}</div>
+}
+
+const Content: FC<IProps> = ({ children, className }) => {
+	return <div className={cn('px-[20px] py-[16px] overflow-y-auto', className)}>{children}</div>
+}
 
 const Page: IPage = ({ children, className }: IProps) => {
-	return <div className={cn('sm:container grid grid-cols-[minmax(0,_1fr)] grid-rows-[min-content_1fr_min-content] bg-page h-screen', className)}>{children}</div>
+	return (
+		<div
+			className={cn(
+				'sm:container grid grid-cols-[minmax(0,_1fr)] grid-rows-[min-content_1fr_min-content] bg-page h-screen',
+				className
+			)}
+		>
+			{children}
+		</div>
+	)
 }
 
 Page.displayName = 'Page'
+
 Page.Navbar = Navbar
+Page.Navbar.displayName = 'Page.Navbar'
+
 Page.Content = Content
+Page.Content.displayName = "Page.Content"
 
-export { Page }
+export { Page }

package/src/Select/SelectAccountCard.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react'
+
+import { DropdownSmallOld, CheckSmall } from '../Icon'
+
+import Select, {
+	components,
+	ControlProps,
+	OptionProps,
+	DropdownIndicatorProps,
+	StylesConfig,
+	SingleValueProps,
+	MenuProps,
+	ValueContainerProps,
+} from 'react-select'
+
+import { cn } from '../@/lib/utils'
+
+const selectTriggerClasses: string =
+	'flex items-center bg-gradient-to-r from-[--cl-blue-3] to-primary shadow-[0px_8px_18px_0px_rgba(73,113,208,0.38)] px-[16px] py-[8px] border-none rounded-md min-h-[80px] text-left text-white'
+
+const colourStyles: StylesConfig = {
+	control: () => ({}),
+	option: () => ({}),
+	input: () => ({}),
+	dropdownIndicator: () => ({}),
+	indicatorsContainer: () => ({}),
+	menu: () => ({}),
+	menuList: () => ({}),
+	singleValue: () => ({}),
+	valueContainer: () => ({}),
+}
+
+const Control = ({ children, ...props }: ControlProps) => {
+	const style = { cursor: 'pointer' }
+	return (
+		<components.Control
+			className={selectTriggerClasses}
+			{...props}
+		>
+			{children}
+		</components.Control>
+	)
+}
+
+const optionClasses =
+	'flex items-center first:rounded-t-md last:rounded-b-md px-[12px] py-[16px] w-full cursor-default select-none outline-none'
+
+const Option = ({ children, ...props }: OptionProps) => {
+	const {
+		isSelected,
+		isFocused,
+		isDisabled,
+		// @ts-ignore
+		data : { label, account, balance, cur },
+	} = props
+	const style = { cursor: 'pointer' }
+	return (
+		<components.Option
+			className={cn(
+				optionClasses,
+				{ 'bg-light': isFocused },
+				{ 'opacity-50 pointer-events-none': isDisabled }
+			)}
+			{...props}
+		>
+			<span className="flex basis-0 grow">
+				<span>
+					<span>{label}</span><br/>
+					<span className='text-[14px] text-light'>{account}</span>
+				</span>
+				<span  className='ml-auto shrink-0'>
+					{balance}&nbsp;{cur}
+				</span>
+			</span>
+
+			<span className='ml-[16px] w-[24px] h-[24px] shrink-0'>
+				{isSelected && (
+					<CheckSmall
+						width="24"
+						height="24"
+						className="text-primary"
+					/>
+				)}
+			</span>
+
+		</components.Option>
+	)
+}
+
+const DropdownIndicator = ({ children, ...props }: DropdownIndicatorProps) => {
+	return (
+		<components.DropdownIndicator
+			className="shrink-0"
+			{...props}
+		>
+			<DropdownSmallOld
+				className="text-white"
+				width="16"
+				height="16"
+			/>
+		</components.DropdownIndicator>
+	)
+}
+
+const ValueContainer = ({ children, ...props }: ValueContainerProps) => {
+	return (
+		<components.ValueContainer
+			className="flex-1 grid"
+			{...props}
+		>
+			{children}
+		</components.ValueContainer>
+	)
+}
+
+const SingleValue = ({ children, ...props }: SingleValueProps) => {
+	// @ts-ignore
+	const { label, account, balance, cur } = props.data
+	return (
+		<components.SingleValue className='col-start-1 col-end-3 row-start-1 row-end-2' {...props}>
+			<span className="block max-w-full text-[16px] truncate leading-[1.5]">
+				{label} <span className="opacity-75 text-[14px] leading-[1.42]">{account}</span>
+			</span>
+			<span className="block mt-[8px] font-medium text-[24px] leading-[1.333]">
+				{balance} {cur}
+			</span>
+		</components.SingleValue>
+	)
+}
+
+const Menu = ({ children, ...props }: MenuProps) => {
+	return (
+		<components.Menu
+			className="bg-page drop-shadow-1 mt-[8px] rounded-md"
+			{...props}
+		>
+			{children}
+		</components.Menu>
+	)
+}
+
+const SelectAccountCard = React.forwardRef<Select, { className: string | undefined }>(({ className, ...props }, ref) => (
+	<Select
+		className={cn(className)}
+		classNamePrefix="super"
+		isDisabled={false}
+		isSearchable={false}
+		components={{
+			Control,
+			Option,
+			SingleValue,
+			DropdownIndicator,
+			IndicatorSeparator: () => null,
+			Menu,
+			ValueContainer,
+		}}
+		styles={colourStyles}
+		unstyled={true}
+		{...props}
+	/>
+))
+
+export { SelectAccountCard }

package/src/Select/index.ts

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

package/src/Switch/Switch.tsx

@@ -0,0 +1,28 @@
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "../@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer border-light items-center rounded-full border-2 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-light shadow-md ring-0 transition-transform  data-[state=checked]:bg-page data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

package/src/Switch/index.ts

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

package/src/Textarea/Textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "../@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 placeholder:text-light focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

package/src/Textarea/index.ts

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