@modul/mbui 0.0.28-beta-pv-53496-934863d9 → 0.0.28

package/src/Select/SelectAccount.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react'
+import { CheckSmall } from '../../src/Icon'
+import Select, { components, OptionProps, SingleValueProps, GroupBase, Props } from 'react-select'
+import { cn } from '../@/lib/utils'
+import {
+	colourStyles,
+	Control,
+	DropdownIndicator,
+	IndicatorsContainer,
+	Input,
+	LoadingIndicator,
+	Menu,
+	optionClasses,
+	Placeholder,
+	ValueContainer,
+} from './components'
+
+const Option = ({ children, ...props }: OptionProps) => {
+	const {
+		isSelected,
+		isFocused,
+		isDisabled,
+		// @ts-ignore
+		data: { label, account, balance, cur },
+	} = props
+	return (
+		<components.Option
+			className={cn(optionClasses, 'items-start', { 'bg-light': isFocused }, { 'opacity-50 pointer-events-none': isDisabled })}
+			{...props}
+		>
+			<span className="flex basis-0 grow">
+				<span>
+					<span className="text-[16px`] leading-[1.375]">{label}</span>
+					<br />
+					<span className="text-[12px] text-light">{account}</span>
+				</span>
+				<span className="ml-auto shrink-0">{cur}</span>
+			</span>
+
+			<span className="ml-[16px] shrink-0 size-[24px]">
+				{isSelected && (
+					<CheckSmall
+						width="24"
+						height="24"
+						className="text-primary"
+					/>
+				)}
+			</span>
+		</components.Option>
+	)
+}
+
+const SingleValue = ({ children, ...props }: SingleValueProps) => {
+	const {
+		// @ts-ignore
+		data: { account, cur },
+	} = props
+	return (
+		<components.SingleValue
+			className="col-start-1 col-end-3 row-start-1 row-end-2"
+			{...props}
+		>
+			{account} ({cur})
+		</components.SingleValue>
+	)
+}
+
+type SelectAccountProps<
+	Option,
+	IsMulti extends boolean = false,
+	Group extends GroupBase<Option> = GroupBase<Option>
+> = Props<Option, IsMulti, Group>
+
+function SelectAccount<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
+	props: SelectAccountProps<Option, IsMulti, Group>
+) {
+	return (
+		<Select
+			components={{
+				Control,
+				Option,
+				SingleValue,
+				DropdownIndicator,
+				IndicatorSeparator: () => null,
+				Menu,
+				ValueContainer,
+				Placeholder,
+				Input,
+				LoadingIndicator,
+				IndicatorsContainer,
+			}}
+			styles={colourStyles}
+			unstyled={true}
+			{...props}
+		/>
+	)
+}
+
+SelectAccount.displayName = 'SelectAccount'
+
+export { SelectAccount }

package/src/Select/SelectAccountCard.tsx

@@ -0,0 +1,146 @@
+import * as React from 'react'
+import { DropdownSmallOld, CheckSmall } from '../../src/Icon'
+import Select, {
+	components,
+	ControlProps,
+	OptionProps,
+	DropdownIndicatorProps,
+	SingleValueProps,
+	Props,
+	GroupBase,
+} from 'react-select'
+import { cn } from '../@/lib/utils'
+import { colourStyles, Menu, optionClasses, ValueContainer } from './components'
+
+const selectTriggerClasses: string = `
+	flex
+	items-center
+	py-[8px]
+	px-[16px]
+	min-h-[80px]
+	border-none
+	rounded-md
+	text-left
+	text-white
+	bg-gradient-to-r
+	from-[--cl-blue-3]
+	to-primary
+	shadow-[0px_8px_18px_0px_rgba(73,113,208,0.38)]
+	cursor-pointer
+`
+const Control = ({ children, ...props }: ControlProps) => {
+	const { isFocused } = props
+	return (
+		<components.Control
+			className={cn(
+				selectTriggerClasses,
+				{ 'outline outline-primary outline-offset-2 outline-2': isFocused }
+			)}
+			{...props}
+		>
+			{children}
+		</components.Control>
+	)
+}
+
+const Option = ({ children, ...props }: OptionProps) => {
+	const {
+		isSelected,
+		isFocused,
+		isDisabled,
+		// @ts-ignore
+		data: { label, account, balance, cur },
+	} = props
+	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] shrink-0 size-[24px]">
+				{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 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>
+	)
+}
+
+type SelectAccountCardProps<
+	Option,
+	IsMulti extends boolean = false,
+	Group extends GroupBase<Option> = GroupBase<Option>
+> = Props<Option, IsMulti, Group>
+
+const SelectAccountCard = <
+	Option,
+	IsMulti extends boolean = false,
+	Group extends GroupBase<Option> = GroupBase<Option>
+>(props: SelectAccountCardProps<Option, IsMulti, Group>) => {
+	return (
+		<Select
+			isSearchable={false}
+			components={{
+				Control,
+				Option,
+				SingleValue,
+				DropdownIndicator,
+				IndicatorSeparator: () => null,
+				Menu,
+				ValueContainer,
+			}}
+			styles={colourStyles}
+			unstyled={true}
+			{...props}
+		/>
+	)
+}
+
+export { SelectAccountCard }

package/src/Select/SelectAsync.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import AsyncSelect from 'react-select/async'
+import { colourStyles, Control, DropdownIndicator, IndicatorsContainer, Input, LoadingIndicator, Menu, Option, Placeholder, SingleValue, ValueContainer } from './components'
+
+const SelectAsync = ({ ...props }) => (
+	<AsyncSelect
+		components={{
+			Control,
+			Option,
+			SingleValue,
+			DropdownIndicator,
+			IndicatorSeparator: () => null,
+			Menu,
+			ValueContainer,
+			Placeholder,
+			Input,
+			LoadingIndicator,
+			IndicatorsContainer
+		}}
+		styles={colourStyles}
+		unstyled={true}
+		{...props}
+	/>
+)
+
+SelectAsync.displayName = 'SelectAsync'
+
+export { SelectAsync }

package/src/Select/SelectBase.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+
+import Select, {
+	GroupBase,
+	Props,
+} from 'react-select'
+import {
+	colourStyles,
+	Control,
+	DropdownIndicator,
+	IndicatorsContainer,
+	Input,
+	LoadingIndicator,
+	Menu,
+	Placeholder,
+	SingleValue,
+	ValueContainer,
+	Option,
+} from './components'
+
+type SelectBaseProps<
+	Option,
+	IsMulti extends boolean = false,
+	Group extends GroupBase<Option> = GroupBase<Option>
+> = Props<Option, IsMulti, Group>
+
+function SelectBase<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
+	props: SelectBaseProps<Option, IsMulti, Group>
+) {
+	return (
+		<Select
+			components={{
+				Control,
+				Option,
+				SingleValue,
+				DropdownIndicator,
+				IndicatorSeparator: () => null,
+				Menu,
+				ValueContainer,
+				Placeholder,
+				Input,
+				LoadingIndicator,
+				IndicatorsContainer,
+			}}
+			styles={colourStyles}
+			unstyled={true}
+			{...props}
+		/>
+	)
+}
+
+SelectBase.displayName = 'SelectBase'
+
+export { SelectBase }

package/src/Select/components/components.tsx

@@ -0,0 +1,186 @@
+import React from 'react'
+import {
+	components,
+	ControlProps,
+	OptionProps,
+	DropdownIndicatorProps,
+	StylesConfig,
+	SingleValueProps,
+	MenuProps,
+	PlaceholderProps,
+	ValueContainerProps,
+	InputProps,
+	LoadingIndicatorProps,
+	IndicatorsContainerProps,
+} from 'react-select'
+import { cn } from '../../@/lib/utils'
+import { CheckSmall, DropdownSmallOld } from '../../Icon'
+
+const Input = ({ ...props }: InputProps) => {
+	return (
+		<components.Input
+			className="col-start-1 col-end-3 row-start-1 row-end-2"
+			{...props}
+		/>
+	)
+}
+
+const selectTriggerClasses: string = `
+	flex
+	items-center
+	py-[12px]
+	px-[16px]
+	h-[44px]
+	text-left
+	border-[1px]
+	border-input
+	rounded-sm
+	cursor-pointer
+`
+const Control = ({ children, ...props }: ControlProps) => {
+	const { isFocused } = props
+	return (
+		<components.Control
+			className={cn(selectTriggerClasses, { 'outline outline-primary outline-offset-2 outline-2': isFocused })}
+			{...props}
+		>
+			{children}
+		</components.Control>
+	)
+}
+
+const colourStyles: StylesConfig = {
+	control: () => ({}),
+	option: () => ({}),
+	input: () => ({}),
+	dropdownIndicator: () => ({}),
+	indicatorsContainer: () => ({}),
+	menu: () => ({}),
+	menuList: () => ({}),
+	singleValue: () => ({}),
+	valueContainer: () => ({}),
+}
+
+const optionClasses =
+	'flex items-center first:rounded-t-sm last:rounded-b-sm px-[16px] py-[12px] w-full cursor-default select-none outline-none'
+
+const Option = ({ children, ...props }: OptionProps) => {
+	const { isSelected, isFocused, isDisabled } = props
+	return (
+		<components.Option
+			className={cn(
+				optionClasses,
+				'items-start',
+				{ 'bg-light': isFocused },
+				{ 'opacity-50 pointer-events-none': isDisabled }
+			)}
+			{...props}
+		>
+			<span className="flex basis-0 grow">{children}</span>
+
+			<span className="ml-[16px] shrink-0 size-[24px]">
+				{isSelected && (
+					<CheckSmall
+						width="24"
+						height="24"
+						className="text-primary"
+					/>
+				)}
+			</span>
+		</components.Option>
+	)
+}
+
+const IndicatorsContainer = ({ children, ...props }: IndicatorsContainerProps) => {
+	return (
+		<components.IndicatorsContainer
+			className="flex items-center gap-x-[8px] shrink-0"
+			{...props}
+		>
+			{children}
+		</components.IndicatorsContainer>
+	)
+}
+
+const LoadingIndicator = ({ ...props }: LoadingIndicatorProps) => {
+	return (
+		<components.LoadingIndicator
+			className="text-light shrink-0"
+			{...props}
+		/>
+	)
+}
+
+const DropdownIndicator = ({ children, ...props }: DropdownIndicatorProps) => {
+	return (
+		<components.DropdownIndicator
+			className="shrink-0"
+			{...props}
+		>
+			<DropdownSmallOld
+				className="text-light"
+				width="12"
+				height="12"
+			/>
+		</components.DropdownIndicator>
+	)
+}
+
+const ValueContainer = ({ children, ...props }: ValueContainerProps) => {
+	return (
+		<components.ValueContainer
+			className="flex-1 grid"
+			{...props}
+		>
+			{children}
+		</components.ValueContainer>
+	)
+}
+
+const SingleValue = ({ children, ...props }: SingleValueProps) => {
+	return (
+		<components.SingleValue
+			className="col-start-1 col-end-3 row-start-1 row-end-2"
+			{...props}
+		>
+			{children}
+		</components.SingleValue>
+	)
+}
+
+const Menu = ({ children, ...props }: MenuProps) => {
+	return (
+		<components.Menu
+			className="z-[1] absolute inset-x-0 bg-page shadow-sm mt-[8px] rounded-sm"
+			{...props}
+		>
+			{children}
+		</components.Menu>
+	)
+}
+
+const Placeholder = ({ children, ...props }: PlaceholderProps) => {
+	return (
+		<components.Placeholder
+			className="col-start-1 col-end-3 row-start-1 row-end-2 text-[16px] text-light truncate"
+			{...props}
+		>
+			{children}
+		</components.Placeholder>
+	)
+}
+
+export {
+	Input,
+	Control,
+	colourStyles,
+	optionClasses,
+	Option,
+	IndicatorsContainer,
+	LoadingIndicator,
+	DropdownIndicator,
+	ValueContainer,
+	SingleValue,
+	Menu,
+	Placeholder,
+}

package/src/Select/components/index.tsx

@@ -0,0 +1,15 @@
+export {
+	Input,
+	Control,
+	colourStyles,
+	optionClasses,
+	Option,
+	IndicatorsContainer,
+	LoadingIndicator,
+	DropdownIndicator,
+	ValueContainer,
+	SingleValue,
+	Menu,
+	Placeholder,
+
+} from './components'

package/src/Select/index.ts

@@ -0,0 +1,5 @@
+export { SelectAccountCard } from './SelectAccountCard'
+export { SelectAccount } from './SelectAccount'
+export { SelectAsync } from './SelectAsync'
+export { SelectBase } from './SelectBase'
+export { Select } from './Select'

package/src/Skeleton/Skeleton.tsx

@@ -0,0 +1,25 @@
+import React, { FC, HTMLAttributes } from 'react'
+import { cn } from '../@/lib/utils'
+
+interface ISkeletonProps {
+	displayName: string
+	Item: typeof Item
+}
+
+const Skeleton: FC<HTMLAttributes<HTMLDivElement>> & ISkeletonProps = ({ className, children, ...props }) => {
+	return (
+		<div className={className} {...props} role="status">
+			{children}
+		</div>
+	)
+}
+
+const Item: FC<HTMLAttributes<HTMLDivElement>> = ({ className }) => (
+	<div className={cn('animate-pulse bg-[--skeleton-bg] rounded-sm', className)} />
+)
+Skeleton.displayName = 'Skeleton'
+
+Skeleton.Item = Item
+Skeleton.Item.displayName = 'Skeleton.Item'
+
+export { Skeleton }

package/src/Skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton } from "./Skeleton";

package/src/Slider/Slider.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+import cn from 'clsx'
+
+const sliderThumb = `
+	block
+	size-5
+	border-2
+	border-primary
+	bg-background
+	rounded-full
+	ring-offset-background
+	focus-visible:ring-2
+	focus-visible:ring-ring
+	focus-visible:ring-offset-2
+	focus-visible:outline-none
+	disabled:pointer-events-none
+	disabled:opacity-50
+	transition-colors
+`
+
+const Slider = React.forwardRef<
+	React.ElementRef<typeof SliderPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className = '', ...props }, ref) => (
+	<SliderPrimitive.Root
+		ref={ref}
+		className={cn('relative flex w-full touch-none select-none items-center', className)}
+		{...props}
+	>
+		<SliderPrimitive.Track className="relative bg-secondary rounded-full w-full h-2 overflow-hidden grow">
+			<SliderPrimitive.Range className="absolute bg-primary h-full" />
+		</SliderPrimitive.Track>
+		<SliderPrimitive.Thumb className={sliderThumb} />
+	</SliderPrimitive.Root>
+))
+
+export default Slider

package/src/Slider/index.ts

@@ -0,0 +1,4 @@
+import Slider from './Slider'
+
+export { Slider }
+export default Slider

package/src/Swipe2Show/Swipe2Show.tsx

@@ -0,0 +1,71 @@
+import React, { cloneElement, FC, useCallback, useEffect, useRef, useState } from 'react'
+import { useSwipeable } from 'react-swipeable'
+
+interface IProps extends React.PropsWithChildren {
+	contentToShowRight: React.ReactNode
+}
+
+const Swipe2Show: FC<IProps> = ({ children, contentToShowRight }) => {
+	const wrapperRef = useRef<HTMLDivElement>(null)
+	const actionRef = useRef<HTMLDivElement>(null)
+	const [showRight, setShowRight] = useState(false)
+	const translateX = actionRef.current?.offsetWidth
+
+	const handlers = useSwipeable({
+		onSwipedLeft: () => setShowRight(true),
+		onSwipedRight: () => setShowRight(false),
+		swipeDuration: 500,
+		preventScrollOnSwipe: true,
+		trackMouse: true,
+	})
+
+	const checkClickOutside = (evt) => {
+		if (showRight && wrapperRef.current && !wrapperRef.current.contains(evt.target)) {
+			setShowRight(false)
+		}
+	}
+
+	useEffect(() => {
+		document.addEventListener('mousedown', checkClickOutside)
+		document.addEventListener('touchstart', checkClickOutside)
+
+		return () => {
+			document.removeEventListener('mousedown', checkClickOutside)
+			document.removeEventListener('touchstart', checkClickOutside)
+		}
+	})
+
+	return (
+		<div
+			style={{ position: 'relative' }}
+			ref={wrapperRef}
+		>
+			{cloneElement(children as React.ReactElement<any>, {
+				style: {
+					position: 'relative',
+					transform: showRight && `translateX(-${translateX}px)`,
+					transition: 'transform .15s ease-in-out',
+					width: '100%',
+					zIndex: '1',
+					touchAction: 'pan-x',
+				},
+				...handlers,
+			})}
+			<div
+				ref={actionRef}
+				style={{
+					position: 'absolute',
+					top: '.5px',
+					right: '0',
+					bottom: '.5px',
+					opacity: `${showRight ? '1' : '0'}`,
+					transition: 'opacity .15s ease-in-out',
+				}}
+			>
+				{contentToShowRight}
+			</div>
+		</div>
+	)
+}
+
+export { Swipe2Show }

package/src/Swipe2Show/index.ts

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