@clement_lores/admin-design-system 1.0.0

package/types/src/molecules/drop-down/drop-down-trigger.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @component
+ * @private
+ */
+export declare const DropDownTrigger: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, {}, never>;
+export default DropDownTrigger;

package/types/src/molecules/drop-down/drop-down.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { BoxProps } from '../../atoms/box/index.js';
+export declare const DEFAULT_STICK = "left";
+/**
+ * Available values for {@link DropDown}.stick prop
+ * @memberof DropDown
+ */
+export type DropDownStickProp = 'left' | 'right';
+/**
+ * Props passed to DropDown element.
+ * @property {string} [...] Other props from {@link BoxProps}
+ * @memberof DropDown
+ * @extends BoxProps
+ */
+export type DropDownProps = {
+    /** Indicates if menu should stick to left or right */
+    stick?: DropDownStickProp;
+    children?: React.ReactNode;
+} & BoxProps;
+/**
+ * @load ./drop-down.doc.md
+ * @hideconstructor
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-dropdown--default Storybook}
+ * @component
+ * @subcategory Molecules
+ * @section design-system
+ */
+declare const DropDown: React.FC<DropDownProps>;
+export { DropDown };
+export default DropDown;

package/types/src/molecules/drop-down/drop-down.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DropDown, DropDownProps } from './index.js';
+export declare const Default: StoryObj<DropDownProps & {
+    onClick: (e: any) => void;
+}>;
+export declare const Custom: StoryObj<{
+    onClick: (e: any) => void;
+}>;
+declare const meta: Meta<typeof DropDown>;
+export default meta;

package/types/src/molecules/drop-down/index.d.ts

@@ -0,0 +1,5 @@
+export * from './drop-down.jsx';
+export * from './drop-down-item.jsx';
+export * from './drop-down-item-action.jsx';
+export * from './drop-down-menu.jsx';
+export * from './drop-down-trigger.jsx';

package/types/src/molecules/drop-zone/drop-zone-image.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const DropZoneImage: () => React.ReactElement;
+export default DropZoneImage;

package/types/src/molecules/drop-zone/drop-zone-item.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+/**
+ * @memberof DropZoneItem
+ * @alias DropZoneItemProps
+ */
+export type DropZoneItemProps = {
+    /**
+     * Actual file buffer
+     */
+    file?: File;
+    /**
+     * Handler function triggered after clicking remove
+     */
+    onRemove?: () => void;
+    /**
+     * Preview image. If `file` is given and it is a image then `src` will be
+     * overridden by this image.
+     */
+    src?: string;
+    /**
+     * filename. If 'file' is given it overrides what was given as a `filename`
+     */
+    filename?: string;
+};
+/**
+ * @classdesc
+ *
+ * <img src="components/drop-zone-item.png" />
+ *
+ * Single uploaded file. Usually it is used within {@link DropZone}, but it can also be
+ * reused anywhere
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { DropZoneItem, DropZoneItemProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @see DropZoneItem
+ * @hideconstructor
+ * @see DropZoneItemProps
+ * @example
+ * return (
+ *  <DropZoneItem
+ *    src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.npr.org%2F2019%2F05%2F17%2F724262019%2Fgrumpy-cat-dies-her-spirit-will-live-on-family-says&psig=AOvVaw2ZKtTEZr8N43fx9x-lTITa&ust=1581083274368000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKidqqyIvecCFQAAAAAdAAAAABAD"
+ *    filename="shut-up-it-works.png"
+ *  />
+ * )
+ * @component
+ * @subcategory Molecules
+ * @section design-system
+ */
+declare const DropZoneItem: React.FC<DropZoneItemProps>;
+export { DropZoneItem };
+export default DropZoneItem;

package/types/src/molecules/drop-zone/drop-zone.d.ts

@@ -0,0 +1,148 @@
+import React from 'react';
+import { DisplaySizeUnit } from '../../utils/human-file-size.js';
+/**
+ * @memberof DropZone
+ * @alias FileSizeUnit
+ */
+type FileSizeUnit = DisplaySizeUnit;
+export declare const DROPZONE_DEFAULT_TRANSLATIONS: {
+    placeholder: string;
+    acceptedSize: string;
+    acceptedType: string;
+    unsupportedSize: string;
+    unsupportedType: string;
+};
+/**
+ * @returns {void}
+ * @memberof DropZone
+ * @alias OnDropDownChange
+ */
+export type OnDropZoneChange = (files: Array<File>) => void;
+/**
+ * @memberof DropZone
+ * @alias DropZoneProps
+ */
+export type DropZoneProps = {
+    /**
+     * if drop zone should handle multiple uploads
+     */
+    multiple?: boolean;
+    /**
+     * Initial files collection (in case you want to hold files state)
+     */
+    files?: Array<File>;
+    /**
+     * Callback performed when the file is dropped/selected
+     */
+    onChange?: OnDropZoneChange;
+    /**
+     * Validate options
+     */
+    validate?: {
+        /**
+         * Maximum size of the uploaded file in bytes. If not defined - all files are allowed.
+         */
+        maxSize?: number;
+        /**
+         * Available mime types. When not defined - all mime types are allowed.
+         */
+        mimeTypes?: Array<string>;
+    };
+    /**
+     * Upload limit display e.g.: 'KB' (upper case)
+     */
+    uploadLimitIn?: FileSizeUnit;
+    /**
+     * Custom drop zone translations
+     * @default
+     * {
+     *   placeholder: 'Drop your image here, or click to browse',
+     *   acceptedSize: 'Max size: {{maxSize}}',
+     *   acceptedType: 'Supports: {{mimeTypes}}',
+     *   unsupportedSize: 'File {{fileName}} is too big',
+     *   unsupportedType: 'File {{fileName}} has unsupported type: {{fileType}}',
+     * }
+     */
+    translations?: Partial<typeof DROPZONE_DEFAULT_TRANSLATIONS>;
+};
+/**
+ * @classdesc
+ *
+ * <img src="components/drop-zone.png" />
+ *
+ * DropZone which can be used for uploading files.
+ *
+ * ### usage
+ *
+ * ```javascript
+ * import { DropZone, DropZoneProps } from '@adminjs/design-system'
+ * ```
+ *
+ * how to use it in your custom component.tsx (TypesScript):
+ * ```
+ * import React, { useState } from 'react'
+ * import { DropZone, Label, BasePropertyProps } from '@adminjs/design-system'
+ * import { unflatten } from 'flat'
+ *
+ * const UploadPhoto: React.FC<BasePropertyProps> = (props) => {
+ *   const { property, record, onChange } = props
+ *
+ *   const onUpload = (files: FileList) => {
+ *     const newRecord = {...record}
+ *     const file = files.length && files[0]
+ *
+ *     onChange({
+ *       ...newRecord,
+ *       params: {
+ *         ...newRecord.params,
+ *         [property.name]: file,
+ *       }
+ *     })
+ *     event.preventDefault()
+ *   }
+ *
+ *   return (
+ *     <Box>
+ *       <Label>{property.label}</Label>
+ *       <DropZone onChange={onUpload} />
+ *     </Box>
+ *   )
+ * }
+ * ```
+ * @hideconstructor
+ * @component
+ * @subcategory Molecules
+ * @see FileSizeUnit
+ * @see OnDropDownChange
+ * @see DropZoneProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-dropzone--default Storybook}
+ * @example <caption>Single file with validation</caption>
+ * const maxSize = 1024 * 100
+ * const mimeTypes = ['application/pdf']
+ * const onUpload = (files) => { alert(files,length ? files[0].name : 'no files' ) }
+ * return (
+ * <Box>
+ *   <DropZone
+ *     onChange={onUpload}
+ *     validate= { { maxSize, mimeTypes } }
+ *   />
+ * </Box>
+ * )
+ *
+ * @example <caption>Multi file of photos</caption>
+ * const mimeTypes = ['image/png']
+ * const onUpload = (files) => { alert(files.length ? files.length : 'no files' ) }
+ * return (
+ * <Box>
+ *   <DropZone
+ *     multiple
+ *     onChange={onUpload}
+ *     validate= { { mimeTypes } }
+ *   />
+ * </Box>
+ * )
+ * @section design-system
+ */
+declare const DropZone: React.FC<DropZoneProps>;
+export { DropZone };
+export default DropZone;

package/types/src/molecules/drop-zone/drop-zone.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DROPZONE_DEFAULT_TRANSLATIONS, DropZone, DropZoneProps } from './index.js';
+export declare const Default: StoryObj<DropZoneProps & {
+    maxSize: number;
+    mimeTypes: string[];
+} & typeof DROPZONE_DEFAULT_TRANSLATIONS>;
+declare const meta: Meta<typeof DropZone>;
+export default meta;

package/types/src/molecules/drop-zone/index.d.ts

@@ -0,0 +1,2 @@
+export * from './drop-zone.jsx';
+export * from './drop-zone-item.jsx';

package/types/src/molecules/form-group/form-group.d.ts

@@ -0,0 +1,119 @@
+import { SpaceProps } from 'styled-system';
+/**
+ * Props for FormGroup. Apart from props defined here FormGroup supports also all {@link SpaceProps}
+ * @alias FormGroupProps
+ * @memberof FormGroup
+ */
+export type FormGroupProps = SpaceProps & {
+    /**
+     * If given FormGroup has error
+     */
+    error?: boolean;
+    /**
+     * If given FormGroup should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * if given form group should be rendered in a filter
+     */
+    variant?: 'filter';
+};
+/**
+ * @classdesc
+ *
+ * <img src="components/form-group.png" />
+ *
+ * FormGroup comes with other, from-related components like: FormMessage and InputGroup.
+ * Together they allow you to build form elements.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { FormGroup, FormGroupProps, InputGroup, FormMessage } from '@adminjs/design-system'
+ * ```
+ *
+ * @hideconstructor
+ * @component
+ * @see FormGroupProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-formgroup--default Storybook}
+ * @subcategory Molecules
+ * @example <caption>Example 1: input with all sorts of buttons</caption>
+ * return (
+ * <Box py="xl">
+ *   <FormGroup>
+ *     <Label required>Name</Label>
+ *     <InputGroup>
+ *       <Button variant="contained" size="icon">
+ *         <Icon icon="ChevronRight" />
+ *       </Button>
+ *       <Input />
+ *       <Label>100 KM</Label>
+ *       <Button variant="contained" size="icon">
+ *         <Icon icon="ChevronRight" />
+ *       </Button>
+ *     </InputGroup>
+ *     <FormMessage>And the optional message</FormMessage>
+ *   </FormGroup>
+ * </Box>
+ * )
+ * @example <caption>Example 2: the same input with errors</caption>
+ * return (
+ * <Box py="xl">
+ *   <FormGroup error>
+ *     <Label required>Name</Label>
+ *     <InputGroup>
+ *       <Button variant="contained" size="icon">
+ *         <Icon icon="ChevronRight" />
+ *       </Button>
+ *       <Input />
+ *       <Label>100 KM</Label>
+ *       <Button variant="contained" size="icon">
+ *         <Icon icon="ChevronRight" />
+ *       </Button>
+ *     </InputGroup>
+ *     <FormMessage>And the optional message</FormMessage>
+ *   </FormGroup>
+ * </Box>
+ * )
+ * @example <caption>Example 3: disabled field</caption>
+ * return (
+ * <Box py="xl">
+ *   <FormGroup disabled>
+ *     <Label>Disabled field</Label>
+ *     <InputGroup>
+ *       <Input disabled />
+ *     </InputGroup>
+ *     <FormMessage />
+ *   </FormGroup>
+ * </Box>
+ * )
+ * @example <caption>Example 4: with a link</caption>
+ * return (
+ * <Box py="xl">
+ *   <FormGroup>
+ *     <Label>Some form data with button link</Label>
+ *     <InputGroup>
+ *       <Input />
+ *       <Link href="#someHref">This is link</Link>
+ *     </InputGroup>
+ *     <FormMessage />
+ *   </FormGroup>
+ * </Box>
+ * )
+ * @section design-system
+ */
+export declare const FormGroup: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
+    /**
+     * If given FormGroup has error
+     */
+    error?: boolean | undefined;
+    /**
+     * If given FormGroup should be disabled
+     */
+    disabled?: boolean | undefined;
+    /**
+     * if given form group should be rendered in a filter
+     */
+    variant?: "filter" | undefined;
+}, never>;
+export default FormGroup;

package/types/src/molecules/form-group/form-group.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { FormGroup } from './index.js';
+export declare const FullFeaturedFormGroup: StoryFn;
+export declare const Full: StoryFn;
+declare const meta: Meta<typeof FormGroup>;
+export default meta;

package/types/src/molecules/form-group/form-message.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @component
+ * @private
+ */
+declare const FormMessage: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    color?: string | undefined;
+} & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    variant?: "sm" | "lg" | "xs" | undefined;
+    as?: string | undefined;
+}, never>;
+export default FormMessage;

package/types/src/molecules/form-group/index.d.ts

@@ -0,0 +1,3 @@
+export * from './form-group.jsx';
+export { default as InputGroup } from './input-group.jsx';
+export { default as FormMessage } from './form-message.jsx';

package/types/src/molecules/form-group/input-group.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @component
+ * @private
+ */
+declare const InputGroup: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, {}, never>;
+export default InputGroup;

package/types/src/molecules/index.d.ts

@@ -0,0 +1,15 @@
+export * from './date-picker/index.js';
+export * from './drawer/index.js';
+export * from './drop-down/index.js';
+export * from './drop-zone/index.js';
+export * from './form-group/index.js';
+export * from './info-box/index.js';
+export * from './message-box/index.js';
+export * from './modal/index.js';
+export * from './navigation-element/index.js';
+export * from './pagination/index.js';
+export * from './rich-text-editor/index.js';
+export * from './tinymce-editor/index.js';
+export * from './select/index.js';
+export * from './stepper/index.js';
+export * from './value-group/index.js';

package/types/src/molecules/info-box/index.d.ts

@@ -0,0 +1 @@
+export * from './info-box.jsx';

package/types/src/molecules/info-box/info-box.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { IllustrationVariant } from '../../atoms/illustration/index.js';
+import { BoxProps } from '../../atoms/box/index.js';
+/**
+ * @memberof InfoBox
+ * @alias InfoBoxProps
+ */
+export type InfoBoxProps = {
+    /** Title of an InfoBox */
+    title?: string;
+    /** Inner content - usually couple of {@link Text} nodes */
+    children: React.ReactNode;
+    /** Infobox illustration {@link Illustration} or custom element above title */
+    illustration?: IllustrationVariant | React.ReactElement;
+    /** Optional testId */
+    testId?: string;
+    variant?: BoxProps['variant'];
+};
+/**
+ * @classdesc
+ *
+ * <img src="components/info-box.png" />
+ *
+ * Used for all type of information like:
+ *
+ * > you don't have x - please add first one"
+ *
+ * in the system.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { InfoBox, InfoBoxProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Molecules
+ * @hideconstructor
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-infobox--default Storybook}
+ * @see InfoBoxProps
+ * @example
+ * return (
+ * <InfoBox title="There are no cars in the system">
+ *   <Text>Currently there are no cars in the system</Text>
+ *   <Text>To create first click</Text>
+ *   <Button mt="lg"><Icon icon="Plus" />Create</Button>
+ * </InfoBox>
+ * )
+ * @section design-system
+ */
+declare const InfoBox: React.FC<InfoBoxProps>;
+export { InfoBox };
+export default InfoBox;

package/types/src/molecules/info-box/info-box.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/react';
+import { InfoBox } from './info-box.jsx';
+export declare const Default: StoryFn;
+declare const meta: Meta<typeof InfoBox>;
+export default meta;

package/types/src/molecules/message-box/index.d.ts

@@ -0,0 +1 @@
+export * from './message-box.jsx';

package/types/src/molecules/message-box/message-box.d.ts

@@ -0,0 +1,94 @@
+import React from 'react';
+import { SpaceProps } from 'styled-system';
+import { IconProps } from '../../atoms/icon/index.js';
+/**
+ * Prop Types of a MessageBox component.
+ * Apart from those defined below it extends all {@link SpaceProps}
+ *
+ * @memberof MessageBox
+ * @alias MessageBoxProps
+ */
+type MessageBoxProps = {
+    /** Triggered when user clicks close button. If not given close button won't be seen */
+    onCloseClick?: () => void;
+    /** Title content of a message */
+    message?: string;
+    /**
+     * Variant
+     * @default 'info'
+     */
+    variant?: 'danger' | 'warning' | 'success' | 'info';
+    /** Icon which will be seen in the title */
+    icon?: IconProps['icon'];
+    /** Size variant */
+    size?: 'sm';
+    /** Optional html style property */
+    style?: Record<string, string>;
+    /** Optional children, when given component will be expanded */
+    children?: React.ReactNode;
+};
+type Props = SpaceProps & MessageBoxProps;
+export { Props as MessageBoxProps };
+/**
+ * @classdesc
+ *
+ * <img src="components/message-box.png" />
+ *
+ * Component responsible for rendering standard danger/info/success
+ * messages.
+ *
+ * It has 2 size versions: default and small. Also it can either contain or
+ * don't contain children, which causes different look.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { MessageBox, MessageBoxProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Molecules
+ * @hideconstructor
+ * @see MessageBoxProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-messagebox--default Storybook}
+ * @example <caption>Different variants</caption>
+ * return (
+ *  <Box py="lg">
+ *   <MessageBox message="Some default message" onCloseClick={() => alert('close clicked')} />
+ *   <MessageBox message="Error message" mt="default" variant="danger" onCloseClick={() => alert('close clicked')} />
+ *   <MessageBox message="Info message" mt="default" variant="info" onCloseClick={() => alert('close clicked')} />
+ *  </Box>
+ * )
+ * @example <caption>Different variants with children</caption>
+ * return (
+ *  <Box py="lg">
+ *   <MessageBox message="Some default message" onCloseClick={() => alert('close clicked')}>
+ *     With inside text
+ *   </MessageBox>
+ *   <MessageBox message="Error message" mt="default" variant="danger" onCloseClick={() => alert('close clicked')}>
+ *     With inside text
+ *   </MessageBox>
+ *   <MessageBox message="Info message" mt="default" variant="info" onCloseClick={() => alert('close clicked')}>
+ *     With inside text
+ *   </MessageBox>
+ *  </Box>
+ * )
+ * @example <caption>Small with an icon and inside text</caption>
+ * return (
+ *  <Box py="lg">
+ *   <MessageBox
+ *     size="sm"
+ *     message="Info message"
+ *     mt="default"
+ *     variant="info"
+ *     icon="MessageCircle"
+ *     onCloseClick={() => alert('close clicked')}
+ *   >
+ *     With inside text
+ *   </MessageBox>
+ *  </Box>
+ * )
+ * @section design-system
+ */
+export declare const MessageBox: React.FC<Props>;
+export default MessageBox;

package/types/src/molecules/message-box/message-box.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MessageBox, MessageBoxProps } from './message-box.jsx';
+export declare const Default: StoryObj<MessageBoxProps & {
+    withInsideText: boolean;
+}>;
+declare const meta: Meta<typeof MessageBox>;
+export default meta;

package/types/src/molecules/modal/index.d.ts

@@ -0,0 +1,4 @@
+export * from './modal-inline.jsx';
+export * from './modal-props.js';
+export * from './modal-styled.jsx';
+export * from './modal.jsx';

package/types/src/molecules/modal/modal-inline.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { BoxProps } from '../../atoms/box/index.js';
+import { ModalProps } from './modal-props.js';
+/**
+ * Modal which can be rendered inline instead of a "modal"
+ *
+ * @memberof Modal
+ * @component
+ * @hideconstructor
+ * @private
+ * @section design-system
+ */
+export declare const ModalInline: React.FC<ModalProps & Omit<BoxProps, 'variant'>>;
+export default ModalInline;

package/types/src/molecules/modal/modal-props.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" resolution-mode="require"/>
+import type { ButtonProps } from '../../atoms/button/index.js';
+import type { IconProps } from '../../atoms/icon/index.js';
+import { VariantType } from '../../theme.js';
+/**
+ * Props passed to Modal Component
+ *
+ * @memberof Modal
+ * @alias ModalProps
+ */
+export type ModalProps = {
+    /**
+     * dialog title
+     */
+    title?: string;
+    /**
+     * optional subtitle
+     */
+    subTitle?: string;
+    /**
+     * color variant
+     */
+    variant?: VariantType;
+    /** Modal footer buttons */
+    buttons?: Array<ButtonProps>;
+    /** Label which is seen above the text */
+    label?: string;
+    /** Icon near the label */
+    icon?: IconProps['icon'];
+    /** Handler function triggered when overlay is clicked */
+    onOverlayClick?: () => any;
+    /**
+     * Function triggered when user clicks close button.
+     * If it is given - close button will appear.
+     */
+    onClose?: () => any;
+    children?: React.ReactNode;
+};