@ynput/ayon-react-components 0.2.1 → 0.3.1

package/README.md

@@ -0,0 +1,31 @@
+# AYON Component Library
+
+This is a collection of components for the AYON project. It is a work in progress.
+
+It can be used to create consistent and accessible AYON addons.
+
+For full documentation, see the [storybook](https://ayon.ynput.io/storybook).
+
+## Need a component or found a bug?
+
+Please open an github issue.
+
+## Contributing
+
+This is an open source project. We welcome contributions.
+
+## Community
+
+👪 Check out our community discussions forum.
+
+☎️ Want to know even more about AYON? Get in contact.
+
+🙋 Need some support or want something custom? Take a look at our services.
+
+## Get Started with Storybook
+
+Run locally: `yarn storybook`
+
+build: `yarn build-storybook`
+
+build-package: `yarn build`

package/dist/AssigneeSelect/AssigneeDropdownTemplate.d.ts

@@ -0,0 +1,9 @@
+export interface AssigneeDropdownProps {
+    name: string;
+    fullName?: string;
+    avatarUrl?: string;
+    isSelected?: boolean;
+    onClick?: () => void;
+    size?: number;
+}
+export declare const AssigneeDropdownTemplate: ({ name, avatarUrl, fullName, isSelected, onClick, size, }: AssigneeDropdownProps) => JSX.Element;

package/dist/AssigneeSelect/AssigneeField.d.ts

@@ -0,0 +1,15 @@
+export interface AssigneeFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: {
+        name: string;
+        fullName?: string;
+        avatarUrl?: string;
+    }[];
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    disabled?: boolean;
+    isMultiple?: boolean;
+    placeholder?: string;
+    emptyMessage?: string;
+    emptyIcon?: boolean;
+    size?: number;
+}
+export declare const AssigneeField: import("react").ForwardRefExoticComponent<AssigneeFieldProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/AssigneeSelect/AssigneeSelect.d.ts

@@ -0,0 +1,15 @@
+export interface AssigneeSelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    value: string[];
+    options: {
+        name: string;
+        fullName?: string;
+        avatarUrl?: string;
+    }[];
+    editor?: boolean;
+    onChange?: (names: string[]) => void;
+    widthExpand?: boolean;
+    disabled?: boolean;
+    align?: 'left' | 'right';
+    isMultiple?: boolean;
+}
+export declare const AssigneeSelect: import("react").ForwardRefExoticComponent<AssigneeSelectProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/AssigneeSelect/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AssigneeSelect';
+export * from './AssigneeField';
+export * from './AssigneeDropdownTemplate';

package/dist/Button/Button.d.ts

@@ -0,0 +1,11 @@
+import { ButtonHTMLAttributes } from 'react';
+import { IconType } from '../Icon';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    label?: string;
+    icon?: IconType;
+    tooltip?: string;
+    link?: boolean;
+    disabled?: boolean;
+    iconStyle?: React.CSSProperties;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/Button/index.d.ts

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

package/dist/Dropdown/Dropdown.d.ts

@@ -0,0 +1,32 @@
+import { CSSProperties } from 'react';
+export interface DropdownProps {
+    message?: string;
+    itemStyle?: CSSProperties;
+    valueStyle?: CSSProperties;
+    listStyle?: CSSProperties;
+    onOpen?: () => void;
+    onClose?: () => void;
+    value: Array<string | number>;
+    valueTemplate?: (value?: (string | number)[]) => React.ReactNode;
+    dataKey?: string;
+    dataLabel?: string;
+    options: Array<any>;
+    itemTemplate?: (option: any, isActive: boolean, isSelected: boolean) => React.ReactNode;
+    align?: 'left' | 'right';
+    multiSelect?: boolean;
+    search?: boolean;
+    disabled?: boolean;
+    valueIcon?: string;
+    emptyMessage?: string;
+    placeholder?: string;
+    isChanged?: boolean;
+    isMultiple?: boolean;
+    onChange?: (v: (string | number)[]) => void;
+    maxOptionsShown?: number;
+    style?: CSSProperties;
+    className?: string;
+    widthExpand?: boolean;
+    searchFields?: string[];
+    minSelected?: number;
+}
+export declare const Dropdown: import("react").ForwardRefExoticComponent<DropdownProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Dropdown/index.d.ts

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

package/dist/FileUpload/FileUpload.d.ts

@@ -0,0 +1,10 @@
+export interface FileUploadProps extends React.HTMLAttributes<HTMLFormElement> {
+    files: File[];
+    setFiles: React.Dispatch<React.SetStateAction<File[]>>;
+    mode?: 'single' | 'multiple' | 'sequence';
+    validExtensions?: string[];
+    showMaxFiles?: number;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const FileUpload: import("react").ForwardRefExoticComponent<FileUploadProps & import("react").RefAttributes<HTMLFormElement>>;

package/dist/FileUpload/index.d.ts

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

package/dist/Icon/Icon.d.ts

@@ -0,0 +1,6 @@
+import iconSet from './icons.json';
+export type IconType = keyof typeof iconSet;
+export interface IconProps extends React.HTMLAttributes<HTMLSpanElement> {
+    icon: IconType;
+}
+export declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/Icon/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Icon';
+import iconSet from './icons.json';
+export { iconSet };

package/dist/IconSelect/IconSelect.d.ts

@@ -0,0 +1,16 @@
+import { DropdownProps } from '../Dropdown';
+import { IconType } from '../Icon';
+export interface IconTemplateProps {
+    value: IconSelectProps['value'];
+    valueTemplate?: boolean;
+    isActive?: boolean;
+    isSelected?: boolean;
+}
+export interface IconSelectProps extends Omit<DropdownProps, 'options' | 'valueTemplate' | 'itemTemplate' | 'search' | 'ref'> {
+    value: DropdownProps['value'];
+    onChange?: DropdownProps['onChange'];
+    featured?: IconType[];
+    featuredOnly?: boolean;
+    multiSelect?: DropdownProps['multiSelect'];
+}
+export declare const IconSelect: import("react").ForwardRefExoticComponent<IconSelectProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/IconSelect/index.d.ts

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

package/dist/Inputs/InputColor/ColorPickerPreview.d.ts

@@ -0,0 +1,10 @@
+import { ChangeEvent, FocusEvent } from 'react';
+export interface ColorPickerPreviewProps {
+    onClick?: () => void;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    backgroundColor?: string;
+    value?: string;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+}
+declare const ColorPickerPreview: import("react").ForwardRefExoticComponent<ColorPickerPreviewProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ColorPickerPreview;

package/dist/Inputs/InputColor/InputColor.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from 'react';
+export interface InputColorProps {
+    value: string | number[];
+    onChange: (event: {
+        target: {
+            value: string | number[];
+        };
+    }) => void;
+    alpha?: boolean;
+    format?: 'hex' | 'float' | 'uint8' | 'uint16';
+    className?: string;
+    style?: HTMLAttributes<HTMLDivElement>['style'];
+}
+export declare const InputColor: import("react").ForwardRefExoticComponent<InputColorProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Inputs/InputColor/index.d.ts

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

package/dist/Inputs/InputNumber/InputNumber.d.ts

@@ -0,0 +1,2 @@
+import { InputHTMLAttributes } from 'react';
+export declare const InputNumber: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Inputs/InputNumber/index.d.ts

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

package/dist/Inputs/InputPassword/InputPassword.d.ts

@@ -0,0 +1,2 @@
+import { InputHTMLAttributes } from 'react';
+export declare const InputPassword: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Inputs/InputPassword/index.d.ts

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

package/dist/Inputs/InputSwitch/InputSwitch.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties, InputHTMLAttributes } from 'react';
+export interface InputSwitchProps extends InputHTMLAttributes<HTMLInputElement> {
+    switchClassName?: string;
+    switchStyle?: CSSProperties;
+}
+export declare const InputSwitch: import("react").ForwardRefExoticComponent<InputSwitchProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Inputs/InputSwitch/index.d.ts

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

package/dist/Inputs/InputText/InputText.d.ts

@@ -0,0 +1,2 @@
+import { InputHTMLAttributes } from 'react';
+export declare const InputText: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Inputs/InputText/index.d.ts

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

package/dist/Inputs/InputTextarea/InputTextarea.d.ts

@@ -0,0 +1,2 @@
+import { InputHTMLAttributes } from 'react';
+export declare const InputTextarea: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/Inputs/InputTextarea/index.d.ts

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

package/dist/Inputs/LockedInput/LockedInput.d.ts

@@ -0,0 +1,15 @@
+import { IconType } from '../../Icon';
+export interface LockedInputProps extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'onSubmit'> {
+    value: string;
+    onSubmit?: (value: string) => void;
+    onEdit?: () => void;
+    onCancel?: () => void;
+    label?: string;
+    disabled?: boolean;
+    saveLabel?: string;
+    cancelLabel?: string;
+    editIcon?: IconType;
+    fullUnlock?: boolean;
+    type?: React.HTMLInputTypeAttribute;
+}
+export declare const LockedInput: import("react").ForwardRefExoticComponent<LockedInputProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Inputs/LockedInput/index.d.ts

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

package/dist/Inputs/styles.d.ts

@@ -0,0 +1,2 @@
+declare const StyledInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export default StyledInput;

package/dist/Layout/Divider/Divider.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export declare const Divider: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Layout/Divider/index.d.ts

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

package/dist/Layout/FormLayout/FormLayout.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export declare const FormLayout: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Layout/FormLayout/index.d.ts

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

package/dist/Layout/FormRow/FormRow.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+export interface FormRowProps extends HTMLAttributes<HTMLDivElement> {
+    label: string;
+}
+export declare const FormRow: import("react").ForwardRefExoticComponent<FormRowProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Layout/FormRow/index.d.ts

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

package/dist/Layout/OverflowField/OverflowField.d.ts

@@ -0,0 +1,6 @@
+export interface OverflowFieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    value?: string | number | React.ReactNode;
+    align?: 'left' | 'right';
+    onClick?: (value: string) => void;
+}
+export declare const OverflowField: import("react").ForwardRefExoticComponent<OverflowFieldProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Layout/OverflowField/index.d.ts

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

package/dist/Layout/Section/Section.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export declare const Section: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;

package/dist/Layout/Section/index.d.ts

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

package/dist/Layout/Spacer/Spacer.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export declare const Spacer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Layout/Spacer/index.d.ts

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

package/dist/Layout/TableRow/TableRow.d.ts

@@ -0,0 +1,7 @@
+export interface TableRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onCopy'> {
+    name?: string;
+    value?: string | number | React.ReactNode;
+    tooltip?: string;
+    onCopy?: (value: string) => void;
+}
+export declare const TableRow: import("react").ForwardRefExoticComponent<TableRowProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Layout/TableRow/index.d.ts

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

package/dist/Layout/Toolbar/Toolbar.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export declare const Toolbar: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;

package/dist/Layout/Toolbar/index.d.ts

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

package/dist/Overlay/Dialog/Dialog.d.ts

@@ -0,0 +1,11 @@
+export interface DialogProps extends React.HTMLAttributes<HTMLDivElement> {
+    onHide?: () => void;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+    headerStyle?: React.CSSProperties;
+    bodyStyle?: React.CSSProperties;
+    footerStyle?: React.CSSProperties;
+    visible?: boolean;
+}
+export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Overlay/Dialog/index.d.ts

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

package/dist/Overlay/LoaderShade/LoaderShade.d.ts

@@ -0,0 +1,4 @@
+export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    message?: string;
+}
+export declare const LoaderShade: import("react").ForwardRefExoticComponent<LoaderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Overlay/LoaderShade/index.d.ts

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

package/dist/Panels/Panel/Panel.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export declare const PanelStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Panel: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Panels/Panel/index.d.ts

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

package/dist/Panels/ScrollPanel/ScrollPanel.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+export interface ScrollPanelProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    scrollStyle?: React.CSSProperties;
+}
+export declare const ScrollPanel: import("react").ForwardRefExoticComponent<ScrollPanelProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Panels/ScrollPanel/index.d.ts

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

package/dist/Panels/TablePanel/TablePanel.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+export interface ScrollPanelProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    scrollStyle?: React.CSSProperties;
+    loading?: boolean;
+}
+export declare const TablePanel: import("react").ForwardRefExoticComponent<ScrollPanelProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Panels/TablePanel/index.d.ts

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

package/dist/User/UserImage/UserImage.d.ts

@@ -0,0 +1,7 @@
+export interface UserImageProps extends React.HTMLAttributes<HTMLDivElement> {
+    src?: string;
+    fullName?: string;
+    size?: number;
+    highlight?: boolean;
+}
+export declare const UserImage: import("react").ForwardRefExoticComponent<UserImageProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/User/UserImage/index.d.ts

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

package/dist/User/UserImagesStacked/UserImagesStacked.d.ts

@@ -0,0 +1,12 @@
+export interface UserImagesStackedProps extends React.HTMLAttributes<HTMLDivElement> {
+    users: {
+        avatarUrl?: string;
+        fullName?: string;
+        self?: boolean;
+    }[];
+    size?: number;
+    gap?: number;
+    max?: number;
+    userStyle?: React.CSSProperties;
+}
+export declare const UserImagesStacked: import("react").ForwardRefExoticComponent<UserImagesStackedProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/User/UserImagesStacked/index.d.ts

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