@clement_lores/admin-design-system 1.0.0

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

@@ -0,0 +1,12 @@
+/// <reference types="react" resolution-mode="require"/>
+export declare const ModalStyled: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, {
+    children?: import("react").ReactNode;
+} & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderRadiusProps<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>>> & Omit<import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "flex"> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<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> & {
+    flex?: boolean | import("styled-system").ResponsiveValue<import("csstype").Property.Flex<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: "grey" | "white" | "transparent" | "card" | "container" | undefined;
+    animate?: boolean | undefined;
+    className?: string | undefined;
+}, never>;
+export default ModalStyled;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ModalProps } from './modal-props.js';
+export declare const ModalWrapper: React.FC<ModalProps>;
+export default ModalWrapper;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ModalProps } from './modal-props.js';
+/**
+ * @load ./modal.doc.md
+ * @component
+ * @subcategory Molecules
+ * @section design-system
+ * @hideconstructor
+ * @new In version 3.3
+ */
+export declare const Modal: React.FC<ModalProps>;
+export default Modal;

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

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Modal, ModalProps } from './index.js';
+export declare const Default: StoryObj<ModalProps>;
+declare const meta: Meta<typeof Modal>;
+export default meta;

package/types/src/molecules/navigation-element/index.d.ts

@@ -0,0 +1,3 @@
+export * from './navigation-element.jsx';
+export * from './navigation-element-styled.js';
+export * from './navigation-element-props.js';

package/types/src/molecules/navigation-element/navigation-element-props.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { IconProps } from '../../atoms/icon/index.js';
+/**
+ * Prop Types of a NavigationElement component.
+ *
+ * @memberof NavigationElement
+ * @alias NavigationElementProps
+ */
+export type NavigationElementProps = {
+    /** Link href property */
+    href?: string;
+    /** Icon name */
+    icon?: IconProps['icon'];
+    /**
+     * Indicates if navigation element should be open(able). If set to undefined: element wont be
+     * "openable". Tf set to either false or true - element will be open or close.
+     */
+    isOpen?: boolean;
+    /** If element should be selected */
+    isSelected?: boolean;
+    /** Label of the element */
+    label: string;
+    /** Element uniq ID  */
+    id?: string;
+    /** On Click handler */
+    onClick?: NavigationElementOnClickHandler;
+};
+/**
+ * Handler function for a NavigationElementProps['onClick']
+ *
+ * @memberof NavigationElement
+ * @alias NavigationElementOnClickHandler
+ */
+export type NavigationElementOnClickHandler = (
+/** React.MouseEvent */
+event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, 
+/** All props (along with the `id`) are also passed to the handler */
+props: NavigationElementProps) => void;

package/types/src/molecules/navigation-element/navigation-element-styled.d.ts

@@ -0,0 +1,3 @@
+import { NavigationElementProps } from './navigation-element-props.js';
+export type StyledNavigationElementProps = Pick<NavigationElementProps, 'isSelected' | 'isOpen'>;
+export declare const StyledNavigationElement: any;

package/types/src/molecules/navigation-element/navigation-element.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { NavigationElementProps } from './navigation-element-props.js';
+/**
+ * @load ./navigation-element.doc.md
+ * @component
+ * @subcategory Molecules
+ * @hideconstructor
+ * @see NavigationElementProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-navigation-element--default Storybook}
+ * @section design-system
+ * @new In version 3.3
+ */
+export declare const NavigationElement: React.FC<NavigationElementProps>;
+export default NavigationElement;

package/types/src/molecules/navigation-element/navigation-element.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { NavigationElement, NavigationElementProps } from './index.js';
+export declare const Default: StoryObj<NavigationElementProps>;
+declare const meta: Meta<typeof NavigationElement>;
+export default meta;

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

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

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

@@ -0,0 +1,64 @@
+import React from 'react';
+/**
+ * @alias PaginationProps
+ * @memberof Pagination
+ */
+export type PaginationProps = {
+    /**
+     * Current page
+     */
+    page: number;
+    /**
+     * Items per page
+     */
+    perPage: number;
+    /**
+     * Total number of items
+     */
+    total: number;
+    /**
+     * location. You can pass window.location or the location object
+     * given by ReactRouter
+     */
+    location?: Location;
+    /**
+     * Triggers when user clicks any of the button
+     */
+    onChange: (pageNumber: number) => void;
+};
+/**
+ * @classdesc
+ *
+ * <img src="components/pagination.png" />
+ *
+ * Pagination component
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Pagination, PaginationProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Molecules
+ * @hideconstructor
+ * @see PaginationProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-pagination--default Storybook}
+ * @example
+ * const location = { search: ''}
+ * return (
+ *   <Text py="xl" textAlign="center">
+ *     <Pagination
+ *      total={100}
+ *      page={4}
+ *      perPage={10}
+ *      location={location}
+ *      onChange={(item) => alert(`clicked ${item}`)}
+ *   />
+ *   </Text>
+ * )
+ * @section design-system
+ */
+declare const Pagination: React.FC<PaginationProps>;
+export { Pagination };
+export default Pagination;

package/types/src/molecules/pagination/pagination.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Pagination, PaginationProps } from './index.js';
+export declare const Default: StoryObj<PaginationProps>;
+declare const meta: Meta<typeof Pagination>;
+export default meta;

package/types/src/molecules/rich-text-editor/components/heading-select.d.ts

@@ -0,0 +1,7 @@
+import { Editor } from '@tiptap/react';
+import { FC } from 'react';
+interface HeadingSelectProps {
+    editor: Editor;
+}
+declare const HeadingSelect: FC<HeadingSelectProps>;
+export default HeadingSelect;

package/types/src/molecules/rich-text-editor/components/image-button.d.ts

@@ -0,0 +1,7 @@
+import { Editor } from '@tiptap/react';
+import { FC } from 'react';
+interface ImageButtonProps {
+    editor: Editor;
+}
+declare const ImageButton: FC<ImageButtonProps>;
+export default ImageButton;

package/types/src/molecules/rich-text-editor/components/menu-bar.d.ts

@@ -0,0 +1,7 @@
+import { Editor } from '@tiptap/react';
+import { FC } from 'react';
+interface MenuBarProps {
+    editor: Editor | null;
+}
+declare const MenuBar: FC<MenuBarProps>;
+export default MenuBar;

package/types/src/molecules/rich-text-editor/components/menu-button.d.ts

@@ -0,0 +1,12 @@
+import { Editor } from '@tiptap/react';
+import { FC } from 'react';
+interface MenuButtonProps {
+    editor: Editor;
+    name: string;
+    onClick: () => void;
+    icon?: string;
+    attributes?: Record<string, any>;
+    children?: any;
+}
+declare const MenuButton: FC<MenuButtonProps>;
+export default MenuButton;

package/types/src/molecules/rich-text-editor/icons/align-center.d.ts

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

package/types/src/molecules/rich-text-editor/icons/align-justify.d.ts

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

package/types/src/molecules/rich-text-editor/icons/align-left.d.ts

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

package/types/src/molecules/rich-text-editor/icons/align-right.d.ts

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

package/types/src/molecules/rich-text-editor/icons/bold.d.ts

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

package/types/src/molecules/rich-text-editor/icons/bullet-list.d.ts

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

package/types/src/molecules/rich-text-editor/icons/clear.d.ts

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

package/types/src/molecules/rich-text-editor/icons/code.d.ts

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

package/types/src/molecules/rich-text-editor/icons/font-size.d.ts

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

package/types/src/molecules/rich-text-editor/icons/image.d.ts

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

package/types/src/molecules/rich-text-editor/icons/index.d.ts

@@ -0,0 +1,19 @@
+export { default as AlignCenter } from './align-center.jsx';
+export { default as AlignJustify } from './align-justify.jsx';
+export { default as AlignLeft } from './align-left.jsx';
+export { default as AlignRight } from './align-right.jsx';
+export { default as Bold } from './bold.jsx';
+export { default as BulletList } from './bullet-list.jsx';
+export { default as Clear } from './clear.jsx';
+export { default as Code } from './code.jsx';
+export { default as FontSize } from './font-size.jsx';
+export { default as Image } from './image.jsx';
+export { default as Italic } from './italic.jsx';
+export { default as Link } from './link.jsx';
+export { default as OrderedList } from './ordered-list.jsx';
+export { default as Pagebreak } from './pagebreak.jsx';
+export { default as Paragraph } from './paragraph.jsx';
+export { default as Quote } from './quote.jsx';
+export { default as Redo } from './redo.jsx';
+export { default as Strikethrough } from './strikethrough.jsx';
+export { default as Undo } from './undo.jsx';

package/types/src/molecules/rich-text-editor/icons/italic.d.ts

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

package/types/src/molecules/rich-text-editor/icons/link.d.ts

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

package/types/src/molecules/rich-text-editor/icons/ordered-list.d.ts

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

package/types/src/molecules/rich-text-editor/icons/pagebreak.d.ts

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

package/types/src/molecules/rich-text-editor/icons/paragraph.d.ts

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

package/types/src/molecules/rich-text-editor/icons/quote.d.ts

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

package/types/src/molecules/rich-text-editor/icons/redo.d.ts

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

package/types/src/molecules/rich-text-editor/icons/strikethrough.d.ts

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

package/types/src/molecules/rich-text-editor/icons/undo.d.ts

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

package/types/src/molecules/rich-text-editor/index.d.ts

@@ -0,0 +1,2 @@
+export * from './rich-text-editor.jsx';
+export * from './rich-text-editor-props.js';

package/types/src/molecules/rich-text-editor/rich-text-editor-props.d.ts

@@ -0,0 +1 @@
+export type Option = string | number | boolean;

package/types/src/molecules/rich-text-editor/rich-text-editor.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+interface EditorOptions {
+    [key: string]: any;
+}
+interface RichTextEditorOptions extends Partial<EditorOptions> {
+    limit?: number;
+}
+interface RichTextEditorProps {
+    value: any;
+    onChange: (value: string) => void;
+    options?: RichTextEditorOptions;
+}
+declare const RichTextEditor: FC<RichTextEditorProps>;
+export { RichTextEditor };
+export default RichTextEditor;

package/types/src/molecules/rich-text-editor/rich-text-editor.stories.d.ts

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

package/types/src/molecules/rich-text-editor/rich-text-editor.styled.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" resolution-mode="require"/>
+import { BoxProps } from '../../atoms/box/index.js';
+import { InputProps } from '../../atoms/input/index.js';
+import { TextProps } from '../../atoms/text/index.js';
+export type EditorWrapperProps = TextProps & InputProps & BoxProps;
+export declare const EditorWrapper: 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;
+} & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    borderless?: boolean | undefined;
+    variant?: "default" | "sm" | "lg" | "xl" | "xxl" | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderRadiusProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "flex"> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<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> & {
+    flex?: boolean | import("styled-system").ResponsiveValue<import("csstype").Property.Flex<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: "grey" | "white" | "transparent" | "card" | "container" | undefined;
+    animate?: boolean | undefined;
+    className?: string | undefined;
+}, never>;
+export declare const MenuBarWrapper: any;

package/types/src/molecules/rich-text-editor/useTiptapCommands.d.ts

@@ -0,0 +1,12 @@
+import { Editor } from '@tiptap/react';
+interface TiptapCommand {
+    name: string;
+    onClick: () => void;
+    icon: string;
+    attributes?: Record<string, any>;
+}
+interface useTiptapCommandsProps {
+    editor: Editor | null;
+}
+declare const useTiptapCommands: (props: useTiptapCommandsProps) => TiptapCommand[];
+export default useTiptapCommands;

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

@@ -0,0 +1,2 @@
+export * from './select.jsx';
+export * from './select-async.jsx';

package/types/src/molecules/select/select-async.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { AsyncProps } from 'react-select/async';
+interface SelectProps<Option = unknown, IsMulti extends boolean = false> extends AsyncProps<Option, IsMulti, any> {
+    value: Option;
+    onChange?: (selected: any) => void;
+    variant?: 'default' | 'filter';
+}
+export declare const SelectAsync: FC<SelectProps>;
+export default SelectAsync;

package/types/src/molecules/select/select-theme.d.ts

@@ -0,0 +1,7 @@
+import type { ThemeConfig } from 'react-select';
+import type { DefaultTheme } from "../../utils/styled";
+declare const useSelectTheme: () => {
+    theme: DefaultTheme;
+    selectTheme: ThemeConfig;
+};
+export default useSelectTheme;

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

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { Props } from 'react-select';
+interface SelectProps extends Props {
+    value: any;
+    onChange?: (selected: any) => void;
+    variant?: 'default' | 'filter';
+}
+export declare const Select: FC<SelectProps>;
+export default Select;

package/types/src/molecules/select/select.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { PublicBaseSelectProps } from 'react-select/base';
+import { Select } from './index.js';
+export declare const Default: StoryFn<PublicBaseSelectProps<any, boolean, any>>;
+export declare const Async: StoryFn;
+declare const meta: Meta<typeof Select>;
+export default meta;

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

@@ -0,0 +1,2 @@
+export * from './step.jsx';
+export * from './stepper.jsx';

package/types/src/molecules/stepper/step.d.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+/**
+ * Handler which is invoked when user clicks given step
+ *
+ * @alias OnStepClickHandler
+ * @memberof Step
+ */
+export type OnStepClickHandler = (
+/**
+ * The same number what was passed to a {@link Step}
+ */
+number?: number | string) => boolean | void;
+/**
+ * @alias StepProps
+ * @memberof Step
+ */
+export type StepProps = {
+    /** number presented in a circle */
+    number?: number | string;
+    /** indicates if given step is done */
+    completed?: boolean;
+    /** indicates if given step is active */
+    active?: boolean;
+    /** turn off any  */
+    disabled?: boolean;
+    /** handler which passes a number of the step in an argument */
+    onClick?: OnStepClickHandler;
+    /** Optional className */
+    className?: string;
+    children?: React.ReactNode;
+};
+/**
+ * @classdesc
+ *
+ * <img src="components/step.png" />
+ *
+ * Step represents one of the tab in placed inside {@link Stepper} component.
+ * You can use it alone or with before-mentioned {@link Stepper}.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Step, StepProps } from '@adminjs/design-system'
+ * ```
+ *
+ *
+ * @hideconstructor
+ * @see Stepper
+ * @see StepProps
+ * @see OnStepClickHandler
+ * @subcategory Molecules
+ * @component
+ * @example <caption>Regular step</caption>
+ * return (
+ *   <Box p="default">
+ *     <Step number="1">Normal Step</Step>
+ *  </Box>
+ * )
+ *
+ * @example <caption>Active steps</caption>
+ * return (
+ *   <Box p="default">
+ *     <Step number="1" active>I am active</Step>
+ *  </Box>
+ * )
+ *
+ * @example <caption>Active steps</caption>
+ * return (
+ *   <Box p="default">
+ *     <Step number="1" completed>This was done !!!</Step>
+ *  </Box>
+ * )
+ *
+ * @example <caption>Clickable step</caption>
+ * const onClick = () => alert('Why did you click me?')
+ *
+ * return (
+ *   <Box p="default">
+ *     <Step number="1" onClick={onClick}>Click me if you dare</Step>
+ *  </Box>
+ * )
+ * @section design-system
+ */
+declare const Step: React.FC<StepProps>;
+export { Step };
+export default Step;