@memori.ai/ui 1.0.0-alpha

package/README.md

@@ -0,0 +1,105 @@
+# MemoriAI UI
+
+This is the UI library for Memori AI and [AIsuru](https://www.aisuru.com).
+
+Used by AIsuru platform and [Client](https://github.com/memori-ai/memori-client) components.
+
+See [Storybook](https://memori-ai.github.io/ui/) for a showcase of all components and their usage.
+
+## Installation
+
+```bash
+bun add @memori.ai/ui
+# npm install @memori.ai/ui
+# or yarn or pnpm
+```
+
+## Usage
+
+Example usage for the Button component:
+
+```tsx
+import { Button } from '@memori.ai/ui'
+```
+
+```jsx
+<Button>Click me</Button>
+```
+
+To see all components, visit our [Storybook](https://memori-ai.github.io/ui/).
+
+## Development
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run Storybook:
+
+```bash
+bun run storybook # or bun sb
+```
+
+To run tests (in watch mode):
+
+```bash
+bun run test
+# this is not the same as `bun test` 
+# `bun test` runs the tests using Bun test runner and it's not compatible with our setup
+```
+
+Linting:
+
+```bash
+bun lint
+```
+
+Linting CSS:
+
+```bash
+bun lint:css
+```
+
+Formatting:
+
+```bash
+bun format
+```
+
+Formatting check:
+
+```bash
+bun format:check
+```
+
+Type checking:
+
+```bash
+bun typecheck
+```
+
+Building:
+
+```bash
+bun run build
+```
+
+Release:
+
+```bash
+bun run release
+```
+
+## Tech stack
+
+- [Bun](https://bun.com)
+- [React](https://react.dev)
+- [React Aria](https://react-spectrum.adobe.com/react-aria/index.html)
+- [Storybook](https://storybook.js.org)
+- [Vite](https://vitejs.dev)
+- [Vitest](https://vitest.dev)
+- [Playwright](https://playwright.dev)
+- [React Testing Library](https://testing-library.com/react)
+- [React I18next](https://react.i18next.com)

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,18 @@
+import { FC, JSX, default as React } from 'react';
+export type AlertType = 'success' | 'warning' | 'error' | 'info';
+export interface Props {
+    open?: boolean;
+    onClose: (value: boolean) => void;
+    className?: string;
+    title?: string | JSX.Element | React.ReactNode;
+    description?: string | JSX.Element | React.ReactNode;
+    children?: JSX.Element | React.ReactNode;
+    type?: AlertType;
+    icon?: JSX.Element | React.ReactNode;
+    closable?: boolean;
+    duration?: number | null;
+    action?: JSX.Element | React.ReactNode;
+    width?: string;
+}
+declare const Alert: FC<Props>;
+export default Alert;

package/dist/components/Alert/index.d.ts

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

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,27 @@
+import { FC, default as React } from 'react';
+export interface Props {
+    children?: React.ReactNode;
+    primary?: boolean;
+    outlined?: boolean;
+    ghost?: boolean;
+    padded?: boolean;
+    block?: boolean;
+    icon?: React.ReactNode;
+    shape?: 'square' | 'rounded' | 'circle';
+    danger?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    className?: string;
+    title?: string;
+    id?: string;
+    isActive?: boolean;
+    htmlType?: 'button' | 'submit' | 'reset';
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onMouseDown?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onMouseUp?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onTouchStart?: (event: React.TouchEvent<HTMLButtonElement> | React.MouseEvent) => void;
+    onTouchEnd?: (event: React.TouchEvent<HTMLButtonElement> | React.MouseEvent) => void;
+}
+declare const Button: FC<Props>;
+export default Button;

package/dist/components/Button/index.d.ts

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

package/dist/components/ButtonBase/ButtonBase.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { ButtonProps as BaseButtonProps } from '@base-ui/react/button';
+export interface ButtonProps extends Omit<BaseButtonProps, 'className'> {
+    /**
+     * Button variant
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'secondary' | 'outline';
+    /**
+     * Button size
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether the button should take full width
+     */
+    fullWidth?: boolean;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Button content
+     */
+    children?: React.ReactNode;
+}
+export declare const ButtonBase: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default ButtonBase;

package/dist/components/ButtonBase/index.d.ts

@@ -0,0 +1,3 @@
+export { ButtonBase } from './ButtonBase';
+export type { ButtonProps } from './ButtonBase';
+export { ButtonBase as default } from './ButtonBase';

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,13 @@
+import { FC, JSX, default as React } from 'react';
+export interface Props {
+    children?: React.ReactNode;
+    loading?: boolean;
+    className?: string;
+    title?: string;
+    description?: string;
+    cover?: JSX.Element | React.ReactNode | string;
+    hoverable?: boolean;
+    onClick?: () => void;
+}
+declare const Card: FC<Props>;
+export default Card;

package/dist/components/Card/index.d.ts

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

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+export interface Props extends React.HTMLAttributes<HTMLInputElement> {
+    label?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    name?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const Checkbox: FC<Props>;
+export default Checkbox;

package/dist/components/Checkbox/index.d.ts

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

package/dist/components/ConfirmDialog/ConfirmDialog.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    message: string;
+    confirmText: string;
+    cancelText: string;
+}
+declare const ConfirmDialog: React.FC<Props>;
+export default ConfirmDialog;

package/dist/components/ConfirmDialog/index.d.ts

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

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,32 @@
+import { FC, JSX, default as React } from 'react';
+export interface Props {
+    title?: string | React.ReactNode;
+    open?: boolean;
+    data?: any;
+    onClose?: () => void;
+    width?: number | string;
+    children?: React.ReactNode;
+    footer?: {
+        leftAction?: React.ReactNode;
+        leftActionClassName?: string;
+        onSubmit?: () => void;
+        loading?: boolean;
+    };
+    extra?: React.ReactNode;
+    className?: string;
+    placement?: 'left' | 'right';
+    description?: string | JSX.Element | React.ReactNode;
+    loading?: boolean;
+    animated?: boolean;
+    closable?: boolean;
+    widthMd?: string;
+    widthLg?: string;
+    confirmDialogTitle?: string;
+    confirmDialogMessage?: string;
+    showBackdrop?: boolean;
+    preventBackdropClose?: boolean;
+    enterDuration?: string;
+    leaveDuration?: string;
+}
+declare const Drawer: FC<Props>;
+export default Drawer;

package/dist/components/Drawer/index.d.ts

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

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface Props {
+    open?: boolean;
+    onClose?: () => void;
+    children?: React.ReactNode;
+    className?: string;
+    trigger?: React.ReactNode;
+    placement?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+}
+declare const Dropdown: React.FC<Props>;
+export default Dropdown;

package/dist/components/Dropdown/index.d.ts

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

package/dist/components/Expandable/Expandable.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+export interface Props {
+    rows?: number;
+    className?: string;
+    innerClassName?: string;
+    btnClassName?: string;
+    lineHeightMultiplier?: number;
+    defaultExpanded?: boolean;
+    expandSymbol?: (lang: string) => React.ReactNode;
+    collapseSymbol?: (lang: string) => React.ReactNode;
+    children: React.ReactNode;
+    mode?: 'rows' | 'characters';
+}
+declare const Expandable: ({ rows, className, innerClassName, btnClassName, lineHeightMultiplier, defaultExpanded, expandSymbol, collapseSymbol, children, mode, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Expandable;

package/dist/components/Expandable/helpers.d.ts

@@ -0,0 +1,3 @@
+export declare const MAX_MSG_CHARS = 4000;
+export declare const MAX_MSG_WORDS = 300;
+export declare const truncateMessage: (message: string) => string;

package/dist/components/Expandable/index.d.ts

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

package/dist/components/InputBase/InputBase.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+import { InputProps as BaseInputProps } from '@base-ui/react/input';
+export interface InputBaseProps extends Omit<BaseInputProps, 'className' | 'size'> {
+    /**
+     * Input variant
+     * @default 'default'
+     */
+    variant?: 'default' | 'error' | 'disabled';
+    /**
+     * Input size
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether the input should take full width
+     */
+    fullWidth?: boolean;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Input value
+     */
+    value?: string;
+    /**
+     * Default value for uncontrolled input
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when the value changes
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Input type
+     * @default 'text'
+     */
+    type?: string;
+}
+export declare const InputBase: React.ForwardRefExoticComponent<InputBaseProps & React.RefAttributes<HTMLInputElement>>;
+export default InputBase;

package/dist/components/InputBase/index.d.ts

@@ -0,0 +1,3 @@
+export { InputBase } from './InputBase';
+export type { InputBaseProps } from './InputBase';
+export { InputBase as default } from './InputBase';

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,16 @@
+import { FC, JSX, default as React } from 'react';
+export interface Props {
+    open?: boolean;
+    onClose: (value: boolean) => void;
+    className?: string;
+    title?: string | JSX.Element | React.ReactNode;
+    description?: string | JSX.Element | React.ReactNode;
+    children?: JSX.Element | React.ReactNode;
+    footer?: JSX.Element | React.ReactNode;
+    loading?: boolean;
+    closable?: boolean;
+    width?: string;
+    widthMd?: string;
+}
+declare const Modal: FC<Props>;
+export default Modal;

package/dist/components/Modal/index.d.ts

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

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,16 @@
+export interface Props<T = any> {
+    className?: string;
+    value?: T;
+    name?: string;
+    displayValue?: string;
+    onChange: (value: T) => void;
+    options: {
+        value: T;
+        label: any;
+    }[];
+    disabled?: boolean;
+    label?: string;
+    placeholder?: string;
+}
+declare const Select: ({ className, value, name, displayValue, options, onChange, disabled, label, placeholder, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Select;

package/dist/components/Select/index.d.ts

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

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface Props {
+    min?: number;
+    max?: number;
+    step?: number;
+    defaultValue?: number;
+    label?: string | React.ReactNode;
+    onChange?: (value: number) => void;
+    disabled?: boolean;
+}
+declare const CustomSlider: ({ min, max, step, defaultValue, label, onChange, disabled, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default CustomSlider;

package/dist/components/Slider/index.d.ts

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

package/dist/components/Spin/Spin.d.ts

@@ -0,0 +1,9 @@
+import { FC, JSX, default as React } from 'react';
+export interface Props {
+    spinning?: boolean;
+    className?: string;
+    primary?: boolean;
+    children?: JSX.Element | React.ReactNode;
+}
+declare const Spin: FC<Props>;
+export default Spin;

package/dist/components/Spin/index.d.ts

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

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import { FC, JSX, default as React } from 'react';
+export interface Props {
+    content: string | JSX.Element | React.ReactNode;
+    className?: string;
+    align?: 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+    disabled?: boolean;
+    children: React.ReactNode;
+    visible?: boolean;
+}
+declare const Tooltip: FC<Props>;
+export default Tooltip;

package/dist/components/Tooltip/index.d.ts

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

package/dist/i18n/I18nWrapper.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface Props {
+    children: React.ReactNode;
+}
+declare const I18nWrapper: ({ children }: Props) => import("react/jsx-runtime").JSX.Element;
+export default I18nWrapper;

package/dist/icons/AI.d.ts

@@ -0,0 +1,5 @@
+declare const AI: ({ className, title }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default AI;

package/dist/icons/Alert.d.ts

@@ -0,0 +1,5 @@
+declare const Alert: ({ className, title, }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Alert;

package/dist/icons/ArrowUp.d.ts

@@ -0,0 +1,5 @@
+declare const ArrowUp: ({ className, title, }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ArrowUp;

package/dist/icons/Bug.d.ts

@@ -0,0 +1,5 @@
+declare const Bug: ({ className, title }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Bug;

package/dist/icons/Chat.d.ts

@@ -0,0 +1,5 @@
+declare const ChatRound: ({ className, title, }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ChatRound;

package/dist/icons/ChevronDown.d.ts

@@ -0,0 +1,5 @@
+declare const ChevronDown: ({ className, title, }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ChevronDown;

package/dist/icons/ChevronLeft.d.ts

@@ -0,0 +1,5 @@
+declare const ChevronLeft: ({ className, title, }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ChevronLeft;

package/dist/icons/ChevronRight.d.ts

@@ -0,0 +1,5 @@
+declare const ChevronRight: ({ className, title, }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ChevronRight;

package/dist/icons/ChevronUp.d.ts

@@ -0,0 +1,5 @@
+declare const ChevronUp: ({ className, title, }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ChevronUp;

package/dist/icons/Clear.d.ts

@@ -0,0 +1,5 @@
+declare const Clear: ({ className, title, }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Clear;

package/dist/icons/Close.d.ts

@@ -0,0 +1,6 @@
+declare const Close: ({ className, title, bold, }: {
+    className?: string;
+    title?: string;
+    bold?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Close;

package/dist/icons/Code.d.ts

@@ -0,0 +1,5 @@
+declare const Code: ({ className, title }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Code;

package/dist/icons/Copy.d.ts

@@ -0,0 +1,5 @@
+declare const Copy: ({ className, title }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Copy;

package/dist/icons/DeepThought.d.ts

@@ -0,0 +1,5 @@
+declare const DeepThought: ({ className, title, }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DeepThought;

package/dist/icons/Delete.d.ts

@@ -0,0 +1,5 @@
+declare const Delete: ({ className, title, }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Delete;

package/dist/icons/Document.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export declare const DocumentIcon: React.FC<{
+    className?: string;
+}>;
+export default DocumentIcon;

package/dist/icons/Download.d.ts

@@ -0,0 +1,5 @@
+declare const Download: ({ className, title, }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Download;

package/dist/icons/Edit.d.ts

@@ -0,0 +1,5 @@
+declare const Edit: ({ className, title }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Edit;

package/dist/icons/Expand.d.ts

@@ -0,0 +1,5 @@
+declare const Expand: ({ className, title, }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Expand;

package/dist/icons/Eye.d.ts

@@ -0,0 +1,5 @@
+declare const Eye: ({ className, title }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Eye;

package/dist/icons/EyeInvisible.d.ts

@@ -0,0 +1,5 @@
+declare const EyeInvisible: ({ className, title, }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default EyeInvisible;

package/dist/icons/Facebook.d.ts

@@ -0,0 +1,5 @@
+declare const Facebook: ({ className, title, }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Facebook;

package/dist/icons/Feedback.d.ts

@@ -0,0 +1,5 @@
+declare const Feedback: ({ className, title, }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Feedback;

package/dist/icons/File.d.ts

@@ -0,0 +1,5 @@
+declare const File: ({ className, title }: {
+    className?: string;
+    title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default File;