@sqrzro/admin 1.0.0-beta.7 → 2.0.0-beta.0

package/.eslintrc

@@ -1,4 +1,8 @@
 {
+    "root": true,
     "plugins": ["@sqrzro"],
-    "extends": ["plugin:@sqrzro/typescript"]
+    "extends": ["plugin:@sqrzro/react"],
+    "parserOptions": {
+        "project": "tsconfig.eslint.json"
+    }
 }

package/.storybook/main.js

@@ -1,40 +1,12 @@
-const path = require('path');
-
 module.exports = {
     addons: [
-        {
-            name: '@storybook/addon-postcss',
-            options: {
-                cssLoaderOptions: {
-                    modules: true,
-                },
-                postcssLoaderOptions: {
-                    implementation: require('postcss'),
-                },
-            },
-        },
-        '@storybook/addon-docs',
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-interactions',
     ],
     core: {
-        builder: 'webpack5',
-    },
-    stories: [
-        '../docs/introduction.story.mdx',
-        '../docs/guides/*.story.mdx',
-        '../src/**/*.story.tsx',
-    ],
-    webpackFinal: async (config) => {
-        config.resolve.extensions = ['.ts', '.tsx', '.js'];
-
-        config.resolve.alias = {
-            '@components': path.resolve(__dirname, '../src', 'components'),
-            '@core': path.resolve(__dirname, '../src', 'core'),
-            '@filters': path.resolve(__dirname, '../src', 'filters'),
-            '@hooks': path.resolve(__dirname, '../src', 'hooks'),
-            '@services': path.resolve(__dirname, '../src', 'services'),
-            '@utility': path.resolve(__dirname, '../src', 'utility'),
-        };
-
-        return config;
+        builder: '@storybook/builder-webpack5',
     },
+    framework: '@storybook/react',
+    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 };

package/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

package/.storybook/preview.js

@@ -1,11 +1 @@
-import { DocsPage, DocsContainer } from '@storybook/addon-docs';
-
-import '../dist/index.css';
-
-export const parameters = {
-    docs: {
-        container: DocsContainer,
-        page: DocsPage,
-    },
-    viewMode: 'docs',
-};
+import '../dist/styles.css';

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright 2022 Richard Carter
+Copyright 2023 Richard Carter
 
 Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
 

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { Action, StyleVariant } from '../../utility/interfaces';
+export interface AlertProps {
+    actions?: Action[];
+    children: React.ReactNode;
+    icon?: string;
+    isOpen?: boolean;
+    onClose?: React.MouseEventHandler<HTMLButtonElement>;
+    title?: string;
+    variant?: StyleVariant;
+    width?: string;
+}
+declare function Alert({ actions, children, icon, isOpen, onClose, title, variant, width, }: AlertProps): React.ReactElement | null;
+declare namespace Alert {
+    var propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        actions: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{
+            label: PropTypes.Validator<string>;
+            onClick: PropTypes.Validator<(...args: any[]) => any>;
+        }>>[]>;
+        title: PropTypes.Requireable<string>;
+        variant: PropTypes.Requireable<string>;
+    };
+}
+export default Alert;

package/dist/components/Alert/index.js

@@ -0,0 +1,54 @@
+'use client';
+import React, { useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import Button from '../Button';
+import Icon from '../../core/Icon';
+import Panel from '../../core/Panel';
+import useVariant from '../../hooks/useVariant';
+/*
+.root {
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 10;
+}
+*/
+function Alert({ actions, children, icon, isOpen, onClose, title, variant, width, }) {
+    const ref = useRef(null);
+    const { applyVariantClassName } = useVariant(variant);
+    useEffect(() => {
+        if (isOpen) {
+            ref.current?.showModal();
+        }
+    }, [isOpen]);
+    useEffect(() => {
+        ref.current?.addEventListener('close', (event) => {
+            if (onClose) {
+                onClose(event);
+            }
+        });
+    }, []);
+    return (React.createElement("dialog", { ref: ref, className: "alert" },
+        React.createElement("aside", { className: "max-w-sm", role: "alert" },
+            React.createElement(Panel, { isPadded: true },
+                React.createElement("div", { className: clsx('bg-green-400 rounded-b-md flex flex-col h-24 justify-center w-16 mx-auto -mt-8', applyVariantClassName({ warning: 'bg-amber-400' })), "data-testid": "alert-component-logo" }, icon ? React.createElement(Icon, { icon: icon, size: 40 }) : null),
+                title ? (React.createElement("h3", { className: "/*styles.title*/", role: "heading" }, title)) : null,
+                React.createElement("div", { key: String(isOpen) }, children),
+                React.createElement("footer", { className: "/*styles.actions*/" },
+                    actions?.map((action) => (React.createElement(Button, { key: action.label, isDisabled: action.isDisabled, onClick: action.onClick, variant: action.variant }, action.label))),
+                    React.createElement("form", { method: "dialog" },
+                        React.createElement(Button, { type: "submit", variant: "link" }, "Close")))))));
+}
+Alert.propTypes = {
+    children: PropTypes.node.isRequired,
+    actions: PropTypes.arrayOf(PropTypes.shape({
+        label: PropTypes.string.isRequired,
+        onClick: PropTypes.func.isRequired,
+    }).isRequired),
+    title: PropTypes.string,
+    variant: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'warning', 'danger']),
+};
+export default Alert;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+interface AllowProps {
+    children: React.ReactNode;
+    permission?: string;
+}
+/**
+ * The `Allow` component is essentially a wrappy that lets a developer display or hide child content
+ * based on the permissions a particular user has.
+ *
+ * By default, the
+ */
+declare function Allow({ children, permission }: AllowProps): React.ReactElement | null;
+declare namespace Allow {
+    var propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        permission: PropTypes.Requireable<string>;
+    };
+}
+export default Allow;

package/dist/components/Allow/index.js

@@ -0,0 +1,29 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import useConfig from '../../hooks/useConfig';
+function hasPermission(me, permission) {
+    if (!me.permissions || !permission) {
+        return true;
+    }
+    return me.permissions.includes(permission);
+}
+/**
+ * The `Allow` component is essentially a wrappy that lets a developer display or hide child content
+ * based on the permissions a particular user has.
+ *
+ * By default, the
+ */
+function Allow({ children, permission }) {
+    const { me } = useConfig();
+    if (me && !hasPermission(me, permission)) {
+        return null;
+    }
+    // Use the `Fragment` here to get around TS complaining about FunctionComponent
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return React.createElement(Fragment, null, children);
+}
+Allow.propTypes = {
+    children: PropTypes.node.isRequired,
+    permission: PropTypes.string,
+};
+export default Allow;

package/dist/components/AppLayout/AppLayout.stories.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentMeta } from '@storybook/react';
+import AppLayout from './index';
+declare const _default: ComponentMeta<typeof AppLayout>;
+export default _default;
+export declare const Basic: any;

package/dist/components/AppLayout/AppLayout.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import AppLayout from './index';
+export default {
+    title: 'Components/AppLayout',
+    component: AppLayout,
+};
+const Template = (args) => (React.createElement(AppLayout, { ...args }));
+export const Basic = Template.bind({});
+Basic.args = {
+    children: 'Lorem Ipsum',
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface AppLayoutProps {
+    children: React.ReactNode;
+}
+declare function AppLayout({ children }: AppLayoutProps): React.ReactElement;
+export default AppLayout;

package/dist/components/AppLayout/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import AppHeader from '../../core/AppHeader';
+import Banner from '../../core/Banner';
+function AppLayout({ children }) {
+    return (React.createElement("div", { className: "flex flex-col min-h-full md:grid md:grid-cols-[22rem_1fr]" },
+        React.createElement(Banner, null),
+        React.createElement("main", { className: "block" },
+            React.createElement(AppHeader, null),
+            children)));
+}
+export default AppLayout;

package/dist/{types/components → components}/AutoSuggest/index.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import type { DropdownItem } from '../../core/DropdownPanel';
 import type { InputProps } from '../../utility/interfaces';
-interface AutoSuggestProps extends InputProps<string> {
+export interface AutoSuggestProps extends InputProps<string> {
     /**
      * An array of strings to filter for the suggestions. If a `remote` prop is specified, this is
      * ignored.
@@ -56,5 +57,18 @@ interface AutoSuggestProps extends InputProps<string> {
  * [{ id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'carrot' }]
  * ```
  */
-declare const AutoSuggest: React.FunctionComponent<AutoSuggestProps>;
+declare function AutoSuggest({ data, name, remote, value, hasError, onChange, }: AutoSuggestProps): React.ReactElement;
+declare namespace AutoSuggest {
+    var propTypes: {
+        name: PropTypes.Validator<string>;
+        data: PropTypes.Requireable<NonNullable<NonNullable<string | NonNullable<PropTypes.InferProps<{
+            id: PropTypes.Validator<string>;
+            name: PropTypes.Validator<string>;
+        }>>>>[]>;
+        hasError: PropTypes.Requireable<boolean>;
+        remote: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
 export default AutoSuggest;

package/dist/components/AutoSuggest/index.js

@@ -0,0 +1,143 @@
+'use client';
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useAccessiblePanel, useClickOutside } from '@sqrzro/hooks';
+import { ApiService } from '@sqrzro/utility';
+import ErrorMessage from '../ErrorMessage';
+import TextInput from '../TextInput';
+import DropdownPanel from '../../core/DropdownPanel';
+import InputPanel from '../../core/InputPanel';
+// Import styles from './AutoSuggest.module.css';
+function transformSuggestions(data) {
+    if (!data) {
+        return [];
+    }
+    return data.map((item) => (typeof item === 'object' ? item : { id: item, name: item }));
+}
+/**
+ * As a user types, suggestions based on they've typed are displayed in a panel below. When a user
+ * clicks a suggestion, the value is updated. Under the hood, it is more or less a combination of a
+ * `TextInput` and a `DropdownPanel`.
+ *
+ * ## Request Methods
+ *
+ * At its most basic, the suggestions are a predefined array of `data`. However,
+ * if the `remote` prop is specified, the AutoSuggest will `GET` that endpoint as the user types.
+ * The following will be appended onto the query:
+ *
+ * ````
+ * ?search={value}
+ * ```
+ *
+ * The endpoint should then handle filtering the data, and returning an array of the results. If the
+ * value of the input changes before the previous `GET` request has completed, that one is
+ * cancelled and a new one started, with the updated search query.
+ *
+ * ## Data Formats
+ *
+ * The data returned should be one of two formats. The choice of format has an impact on how the
+ * value is stored, and the label that is displayed.
+ *
+ * The most basic format is an array of strings. The value is stored as the string itself, and the
+ * label displays the same string. This is most useful for situations where no relationships are
+ * required on the backend, and the `AutoSuggest` is purely being used to assist the user in
+ * defining a value.
+ *
+ * An example of this data would be:
+ *
+ * ```
+ * ['apple', 'banana', 'carrot']
+ * ```
+ *
+ * The second format is an array of objects. The value is stored as the `id` of the object, and the
+ * label displays the `name` of the object. This is most useful for situations where a relationship
+ * is required on the backend, and the `AutoSuggest` is being used to assist the user in defining
+ * a value. With this format, the `AutoSuggest` works more like a `Dropdown`.
+ *
+ * For example:
+ *
+ * ```
+ * [{ id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'carrot' }]
+ * ```
+ */
+function AutoSuggest({ data, name, remote, value, hasError, onChange, }) {
+    const [suggestions, setSuggestions] = useState(null);
+    const [isOpen, setIsOpen, node] = useClickOutside({ shouldHandleEnterKey: true });
+    const [isError, setIsError] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    function getLocalData(search) {
+        if (!data?.length) {
+            return;
+        }
+        const rgx = new RegExp(`^${search}.*`, 'iu');
+        const response = data.filter((item) => rgx.exec(typeof item === 'string' ? item : item.name));
+        setIsOpen(Boolean(response.length));
+        setSuggestions(response);
+    }
+    async function getData(search) {
+        if (!remote) {
+            getLocalData(search);
+            return;
+        }
+        setIsLoading(true);
+        try {
+            const response = await ApiService.get([remote, { search }], {
+                isCancellable: true,
+            });
+            setSuggestions(response.data);
+        }
+        catch (err) {
+            setIsError(true);
+        }
+        setIsLoading(false);
+        setIsOpen(true);
+    }
+    function handleChange(event) {
+        if (onChange) {
+            onChange(event);
+        }
+        if (!event.target.value) {
+            setIsOpen(false);
+            return;
+        }
+        void getData(event.target.value);
+    }
+    function handleSuggest(item) {
+        const simpleEvent = {
+            target: { name, value: item.id },
+        };
+        if (onChange) {
+            onChange(simpleEvent);
+        }
+        setIsOpen(false);
+    }
+    if (isError) {
+        return React.createElement(ErrorMessage, { isMini: true });
+    }
+    const transformed = transformSuggestions(suggestions);
+    const { handleKeyboard } = useAccessiblePanel({
+        data: transformed,
+        name,
+        onChange,
+        value,
+    });
+    return (React.createElement("div", { ref: node, className: "/*clsx(styles.root, isOpen && styles.rootOpen)*/" },
+        React.createElement(TextInput, { hasError: hasError, isAutocomplete: false, isLoading: isLoading, name: name, onChange: handleChange, onKeyDown: handleKeyboard, value: value }),
+        isOpen && suggestions && suggestions.length ? (React.createElement(InputPanel, { isScrollable: true },
+            React.createElement(DropdownPanel, { data: transformed, name: name, onChange: ({ item }) => handleSuggest(item), value: value }))) : null));
+}
+AutoSuggest.propTypes = {
+    name: PropTypes.string.isRequired,
+    data: PropTypes.arrayOf(PropTypes.oneOfType([
+        PropTypes.string.isRequired,
+        PropTypes.shape({
+            id: PropTypes.string.isRequired,
+            name: PropTypes.string.isRequired,
+        }).isRequired,
+    ]).isRequired),
+    hasError: PropTypes.bool,
+    remote: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+};
+export default AutoSuggest;

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

@@ -0,0 +1,11 @@
+import type { ComponentMeta } from '@storybook/react';
+import Button from './index';
+declare const _default: ComponentMeta<typeof Button>;
+export default _default;
+export declare const Basic: any;
+export declare const Danger: any;
+export declare const Bordered: any;
+export declare const BorderedDanger: any;
+export declare const FullWidth: any;
+export declare const Disabled: any;
+export declare const Loading: any;

package/{src/components/Button/Button.story.tsx → dist/components/Button/Button.stories.js}

@@ -1,39 +1,41 @@
-import React from 'react';
-import type { Story } from '@storybook/react';
-
-import Button from './index';
-import type { ButtonProps } from './index';
-
-export default {
-    title: 'Components/Button',
-    component: Button,
-};
-
-const Template: Story<ButtonProps> = (props) => <Button {...props} />;
-
-export const Basic = Template.bind({});
-
-Basic.args = {
-    children: 'Lorem Ipsum',
-};
-
-export const Danger = Template.bind({});
-
-Danger.args = {
-    children: 'Lorem Ipsum',
-    variant: 'danger',
-};
-
-export const Bordered = Template.bind({});
-
-Bordered.args = {
-    children: 'Lorem Ipsum',
-    variant: 'bordered',
-};
-
-export const Disabled = Template.bind({});
-
-Disabled.args = {
-    children: 'Lorem Ipsum',
-    isDisabled: true,
-};
+import React from 'react';
+import Button from './index';
+export default {
+    title: 'Components/Button',
+    component: Button,
+};
+const Template = (args) => (React.createElement(Button, { ...args }));
+export const Basic = Template.bind({});
+Basic.args = {
+    children: 'Lorem Ipsum',
+};
+export const Danger = Template.bind({});
+Danger.args = {
+    children: 'Lorem Ipsum',
+    variant: 'danger',
+};
+export const Bordered = Template.bind({});
+Bordered.args = {
+    children: 'Lorem Ipsum',
+    variant: 'bordered',
+};
+export const BorderedDanger = Template.bind({});
+BorderedDanger.args = {
+    children: 'Lorem Ipsum',
+    variant: ['bordered', 'danger'],
+};
+export const FullWidth = Template.bind({});
+FullWidth.args = {
+    children: 'Lorem Ipsum',
+    isFullWidth: true,
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+    children: 'Lorem Ipsum',
+    isDisabled: true,
+};
+export const Loading = Template.bind({});
+Loading.args = {
+    children: 'Lorem Ipsum',
+    isLoading: true,
+};

package/dist/{types/components → components}/Button/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import type { ButtonVariant } from '../../utility/interfaces';
 export interface ButtonProps {
     /** Probably the button text, but could be any HTML element or React component */
@@ -6,11 +7,13 @@ export interface ButtonProps {
     /** If set to true, the Button will be greyed out and non-interactive */
     isDisabled?: boolean | null;
     isFullWidth?: boolean | null;
+    isLoading?: boolean | null;
     onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
     /** If specified, the Button will be created as a Link element. */
     to?: string;
     /** The type of button. Button's with a type of `submit` will submit a parent form */
     type?: 'button' | 'submit';
+    value?: string;
     /** With the exception of `bordered` these variants correspond to the theme colours */
     variant?: ButtonVariant | ButtonVariant[];
 }
@@ -32,5 +35,16 @@ export interface ButtonProps {
  * width, you can wrap it in a `div`, and then wrap that `div` in a component with a flex property.
  * Components like `ListActions` and `ModalActions` do this for you.
  */
-declare const Button: React.FunctionComponent<ButtonProps>;
+declare function Button({ to, children, type, variant, isDisabled, isFullWidth, isLoading, onClick, value, }: ButtonProps): React.ReactElement;
+declare namespace Button {
+    var propTypes: {
+        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        isDisabled: PropTypes.Requireable<boolean>;
+        isFullWidth: PropTypes.Requireable<boolean>;
+        to: PropTypes.Requireable<string>;
+        type: PropTypes.Requireable<string>;
+        variant: PropTypes.Requireable<NonNullable<NonNullable<ButtonVariant> | NonNullable<ButtonVariant>[] | null | undefined>>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
 export default Button;

package/dist/components/Button/index.js

@@ -0,0 +1,50 @@
+'use client';
+import React from 'react';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import Link from '../Link';
+import Loader from '../../core/Loader';
+import useVariant from '../../hooks/useVariant';
+import { ButtonVariantPropType } from '../../utility/prop-types';
+/**
+ * Either a `Link` component or a `button` element, depending on whether a `to` prop is specified.
+ *
+ * As a `Link`, it provides navigation between pages, and as a `button` it will handle the
+ * `onClick` function when clicked (if one is specified).
+ *
+ * ## to & onClick
+ *
+ * Although it is possible to omit both the `to` and `onClick` props, there will
+ * be nearly zero situations where this would be useful. It is also possible to include both props.
+ * This will create a `Link` component, and handle the `onClick` function before navigation.
+ *
+ * ## Styles
+ *
+ * The `Button` will stretch to the full width of its parent element. If you wish to have a smaller
+ * width, you can wrap it in a `div`, and then wrap that `div` in a component with a flex property.
+ * Components like `ListActions` and `ModalActions` do this for you.
+ */
+function Button({ to, children, type, variant, isDisabled, isFullWidth, isLoading, onClick, value, }) {
+    const { applyVariantClassName } = useVariant(variant);
+    const className = clsx('text-white bg-blue-500 focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-md text-sm px-5 py-2.5 text-center mr-2 mb-2', {
+        'opacity-30 pointer-events-none': isDisabled || isLoading,
+        'w-full': isFullWidth,
+    }, applyVariantClassName({ danger: 'bg-red-900' }));
+    if (to) {
+        return (React.createElement(Link, { className: className, onClick: onClick, to: to }, children));
+    }
+    return (React.createElement("button", { className: className, disabled: isDisabled || isLoading || false, onClick: onClick, type: type === 'submit' ? 'submit' : 'button', value: value },
+        isLoading ? (React.createElement("div", { className: "absolute left-1/2 top-1/2 -translate-x-2/4 -translate-y-2/4" },
+            React.createElement(Loader, { isMini: true }))) : null,
+        children));
+}
+Button.propTypes = {
+    children: PropTypes.node.isRequired,
+    isDisabled: PropTypes.bool,
+    isFullWidth: PropTypes.bool,
+    to: PropTypes.string,
+    type: PropTypes.oneOf(['button', 'submit']),
+    variant: ButtonVariantPropType,
+    onClick: PropTypes.func,
+};
+export default Button;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { InputProps } from '../../utility/interfaces';
+export interface CalendarInputProps extends InputProps<string> {
+    disabledDates?: string[] | ((date: string) => boolean);
+    isOptional?: boolean;
+    isPanelOnly?: boolean;
+    isRange?: boolean;
+}
+declare function CalendarInput({ disabledDates, hasError, isDisabled, isOptional, isPanelOnly, isRange, name, value, onChange, }: CalendarInputProps): React.ReactElement;
+declare namespace CalendarInput {
+    var propTypes: {
+        name: PropTypes.Validator<string>;
+        disabledDates: PropTypes.Requireable<NonNullable<string[] | ((...args: any[]) => any) | null | undefined>>;
+        hasError: PropTypes.Requireable<boolean>;
+        isDisabled: PropTypes.Requireable<boolean>;
+        isOptional: PropTypes.Requireable<boolean>;
+        isPanelOnly: PropTypes.Requireable<boolean>;
+        isRange: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export default CalendarInput;