@plesk/ui-library 3.35.1 → 3.35.2

package/types/src/components/SwitchesPanelItem/SwitchesPanelItem.d.ts

@@ -0,0 +1,78 @@
+import { Component, ReactNode } from 'react';
+import { SwitchProps } from '../Switch';
+import '../../helpers/base.less';
+import './SwitchesPanelItem.less';
+export interface SwitchesPanelItemProps {
+    /**
+     * A callback function, can be executed when the checked state is changing.
+     * @since 0.3.0
+     */
+    onChange: (checked: boolean) => void;
+    /**
+     * Title of the `SwitchesPanelItem`. Must be no longer than two lines.
+     * @since 0.3.0
+     */
+    title: ReactNode;
+    /**
+     * @ignore
+     */
+    defaultChecked?: boolean;
+    /**
+     * Visual intent color to apply to component.
+     * @since 0.3.0
+     */
+    intent?: 'warning' | 'danger';
+    /**
+     * `SwitchesPanelItem` description. Must be no longer than three lines.
+     * @since 0.3.0
+     */
+    description?: ReactNode;
+    /**
+     * Rich full description of the `SwitchesPanelItem`.
+     * Adds control button with question mark that shows `Popover` on click.
+     * @since 0.3.0
+     */
+    fullDescription?: ReactNode;
+    /**
+     * Props of underlying [Switch](#!/Switch) component.
+     * @since 0.5.0
+     */
+    switchProps?: SwitchProps;
+    /**
+     * Content of the control actions.
+     * Don't place here more than three buttons (with the one from 'fullDescription' property) or one link and one button.
+     * @since 0.3.0
+     */
+    children: ReactNode;
+    /**
+     * @ignore
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    baseClassName?: string;
+}
+/**
+ * `SwitchesPanelItem` component is used for combining [Switch](#!/Switch) component with text title and description.
+ * Used in [SwitchesPanel](#!/SwitchesPanel).
+ * @since 0.3.0
+ */
+declare class SwitchesPanelItem extends Component<SwitchesPanelItemProps> {
+    static defaultProps: {
+        defaultChecked: boolean;
+        intent: null;
+        description: null;
+        fullDescription: null;
+        switchProps: {};
+        children: null;
+        className: null;
+        baseClassName: string;
+    };
+    state: {
+        checked: boolean | undefined;
+    };
+    handleChange: (checked: boolean) => void;
+    render(): JSX.Element;
+}
+export default SwitchesPanelItem;

package/types/src/components/SwitchesPanelItem/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './SwitchesPanelItem';
+export type { SwitchesPanelItemProps } from './SwitchesPanelItem';

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

@@ -11,6 +11,7 @@ export { default as Card } from './Card';
 export * from './Card';
 export { default as CardList } from './CardList';
 export { default as Carousel } from './Carousel';
+export type { CarouselProps } from './Carousel';
 export { default as Checkbox } from './Checkbox';
 export { default as Radio } from './Radio';
 export { default as CodeEditor } from './CodeEditor';
@@ -37,13 +38,16 @@ export type { FormProps, FormValues, FormInstanceHandles } from './Form';
 export * from './Form';
 export { default as FormField } from './FormField';
 export { default as FormFieldCheckbox } from './FormFieldCheckbox';
+export type { FormFieldCheckboxProps } from './FormFieldCheckbox';
 export { default as FormFieldPassword } from './FormFieldPassword';
 export * from './FormFieldPassword';
 export { default as FormFieldRadioButtons } from './FormFieldRadioButtons';
 export { default as FormFieldText } from './FormFieldText';
 export { default as FormFieldSelect } from './FormFieldSelect';
 export { default as Grid } from './Grid';
+export type { GridProps } from './Grid';
 export { default as GridCol } from './GridCol';
+export type { GridColProps } from './GridCol';
 export { default as Heading } from './Heading';
 export { default as Hint } from './Hint';
 export { default as Icon } from './Icon';
@@ -79,10 +83,12 @@ export { default as Progress } from './Progress';
 export type { ProgressProps } from './Progress';
 export { default as ProgressBar } from './ProgressBar';
 export { default as ProgressDialog } from './ProgressDialog';
+export type { ProgressDialogProps } from './ProgressDialog';
 export { default as ProgressDialogStep } from './ProgressDialogStep';
 export { default as ProgressStep } from './ProgressStep';
 export type { ProgressStepProps } from './ProgressStep';
 export { default as Rating } from './Rating';
+export type { RatingProps } from './Rating';
 export { default as Section } from './Section';
 export * from './Section';
 export { default as SegmentedControl } from './SegmentedControl';
@@ -96,7 +102,9 @@ export * from './Subnav';
 export { default as Switch } from './Switch';
 export type { SwitchProps } from './Switch';
 export { default as SwitchesPanel } from './SwitchesPanel';
+export type { SwitchesPanelProps } from './SwitchesPanel';
 export { default as SwitchesPanelItem } from './SwitchesPanelItem';
+export type { SwitchesPanelItemProps } from './SwitchesPanelItem';
 export { default as Tabs } from './Tabs';
 export * from './Tabs';
 export { default as Text } from './Text';
@@ -110,6 +118,6 @@ export { default as Translate } from './Translate';
 export type { TranslateProps } from './Translate';
 export { default as Link } from './Link';
 export type { LinkProps } from './Link';
-export { default as Skeleton } from './Skeleton';
-export * from './Skeleton';
+export { default as Skeleton, SkeletonTabs, SkeletonText } from './Skeleton';
+export type { SkeletonProps, SkeletonTabsProps, SkeletonTextProps } from './Skeleton';
 export { PortalContext } from './Layer';

package/types/src/components/utils.d.ts

@@ -27,5 +27,5 @@ export declare const createFocusManager: (containerRef: RefObject<HTMLElement>,
     focusLast: (attempt?: number) => boolean;
 };
 export declare const mergeRefs: <T>(...refs: Ref<T | null>[]) => (value: T | null) => void;
-export declare const normalizeSize: (value?: string | number | undefined) => string | number | undefined;
+export declare const normalizeSize: (value?: number | string) => string | number | undefined;
 export {};

package/cjs/components/Alert/Alert.stories.js

@@ -1,34 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Intents = exports.Basic = void 0;
-var _Alert = _interopRequireDefault(require("./Alert"));
-var _jsxRuntime = require("react/jsx-runtime");
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const Basic = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.default, {
-  ...args
-});
-exports.Basic = Basic;
-Basic.args = {
-  children: 'Content'
-};
-const Intents = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    intent: "info",
-    ...Basic.args
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    intent: "success",
-    ...Basic.args
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    intent: "warning",
-    ...Basic.args
-  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    intent: "danger",
-    ...Basic.args
-  })]
-});
-exports.Intents = Intents;

package/cjs/components/Button/Button.stories.js

@@ -1,109 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.States = exports.Intents = exports.Ghost = exports.Basic = exports.Arrows = void 0;
-var _Button = _interopRequireDefault(require("./Button"));
-var _jsxRuntime = require("react/jsx-runtime");
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const Basic = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-  ...args
-});
-exports.Basic = Basic;
-Basic.args = {
-  children: 'Click me'
-};
-const Ghost = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-  ghost: true,
-  ...args
-});
-exports.Ghost = Ghost;
-Ghost.args = {
-  icon: 'gear'
-};
-const Intents = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    intent: "info",
-    ...Basic.args
-  }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    intent: "success",
-    ...Basic.args
-  }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    intent: "warning",
-    ...Basic.args
-  }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    intent: "danger",
-    ...Basic.args
-  })]
-});
-exports.Intents = Intents;
-const Arrows = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-      arrow: "forward",
-      ...Basic.args
-    }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-      arrow: "forward",
-      size: "lg",
-      ...Basic.args
-    }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-      arrow: "forward",
-      icon: "cpu",
-      ...Basic.args
-    }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-      arrow: "forward",
-      intent: "danger",
-      ...Basic.args
-    })]
-  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-      arrow: "backward",
-      ...Basic.args
-    }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-      arrow: "backward",
-      size: "lg",
-      ...Basic.args
-    }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-      arrow: "backward",
-      icon: "cpu",
-      ...Basic.args
-    }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-      arrow: "backward",
-      intent: "danger",
-      ...Basic.args
-    })]
-  })]
-});
-exports.Arrows = Arrows;
-const States = () => [{
-  intent: 'primary'
-}, {
-  disabled: true
-}, {
-  ghost: true
-}].map((props, index) =>
-/*#__PURE__*/
-// eslint-disable-next-line react/no-array-index-key
-(0, _jsxRuntime.jsxs)("p", {
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    state: "hovered",
-    ...Basic.args,
-    ...props
-  }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    state: "active",
-    ...Basic.args,
-    ...props
-  }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    state: "loading",
-    ...Basic.args,
-    ...props
-  }), ` `, /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-    state: "focused",
-    ...Basic.args,
-    ...props
-  })]
-}, index.toString()));
-exports.States = States;

package/cjs/components/Cuttable/Cuttable.stories.js

@@ -1,46 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.WithItemList = exports.Basic = void 0;
-var _Cuttable = _interopRequireDefault(require("./Cuttable"));
-var _Paragraph = _interopRequireDefault(require("../Paragraph"));
-var _ItemList = require("../ItemList/ItemList.stories");
-var _jsxRuntime = require("react/jsx-runtime");
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const Basic = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Cuttable.default, {
-  ...args
-});
-exports.Basic = Basic;
-Basic.args = {
-  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Paragraph.default, {
-      children: 'Text 1'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paragraph.default, {
-      children: 'Text 2'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paragraph.default, {
-      children: 'Text 3'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paragraph.default, {
-      children: 'Text 4'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paragraph.default, {
-      children: 'Text 5'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paragraph.default, {
-      children: 'Text 6'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paragraph.default, {
-      children: 'Text 7'
-    })]
-  })
-};
-const WithItemList = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Cuttable.default, {
-  ...args
-});
-exports.WithItemList = WithItemList;
-WithItemList.args = {
-  maxHeight: 60,
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ItemList.Basic, {
-    ..._ItemList.Basic.args
-  })
-};

package/cjs/components/Dialog/Dialog.stories.js

@@ -1,49 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.WithSideBanner = exports.Basic = void 0;
-var _react = require("react");
-var _Button = _interopRequireDefault(require("../Button"));
-var _Dialog = _interopRequireDefault(require("./Dialog"));
-var _placeholder_400x = _interopRequireDefault(require("../../docs/public/placeholders/placeholder_400x400.svg"));
-var _jsxRuntime = require("react/jsx-runtime");
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const Basic = args => {
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-      onClick: () => setIsOpen(true),
-      "data-id": "trigger",
-      children: 'Open'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.default, {
-      ...args,
-      "data-type": "test",
-      isOpen: isOpen,
-      onClose: () => setIsOpen(false)
-    })]
-  });
-};
-exports.Basic = Basic;
-Basic.args = {
-  children: 'Dialog content.',
-  title: 'Title',
-  subtitle: 'Subtitle'
-};
-const WithSideBanner = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-  ...args
-});
-exports.WithSideBanner = WithSideBanner;
-WithSideBanner.args = {
-  ...Basic.args,
-  size: 'xs',
-  sideBanner: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-    src: _placeholder_400x.default
-  }),
-  sideBannerContainer: {
-    background: 'skyblue'
-  }
-};

package/cjs/components/Drawer/Drawer.stories.js

@@ -1,65 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.WithSideBanner = exports.WithForm = exports.WithClosingConfirmation = exports.Basic = void 0;
-var _react = require("react");
-var _Button = _interopRequireDefault(require("../Button"));
-var _Drawer = _interopRequireDefault(require("./Drawer"));
-var _placeholder_400x = _interopRequireDefault(require("../../docs/public/placeholders/placeholder_400x400.svg"));
-var _jsxRuntime = require("react/jsx-runtime");
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const Basic = args => {
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-      onClick: () => setIsOpen(true),
-      "data-id": "trigger",
-      children: 'Open'
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Drawer.default, {
-      ...args,
-      "data-type": "test",
-      isOpen: isOpen,
-      onClose: () => setIsOpen(false)
-    })]
-  });
-};
-exports.Basic = Basic;
-Basic.args = {
-  children: 'Drawer content.',
-  title: 'Title',
-  subtitle: 'Subtitle'
-};
-const WithForm = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-  ...args
-});
-exports.WithForm = WithForm;
-WithForm.args = {
-  ...Basic.args,
-  form: {}
-};
-const WithSideBanner = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-  ...args
-});
-exports.WithSideBanner = WithSideBanner;
-WithSideBanner.args = {
-  ...Basic.args,
-  size: 'xs',
-  sideBanner: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-    src: _placeholder_400x.default
-  }),
-  sideBannerContainer: {
-    background: 'skyblue'
-  }
-};
-const WithClosingConfirmation = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-  ...args
-});
-exports.WithClosingConfirmation = WithClosingConfirmation;
-WithClosingConfirmation.args = {
-  ...Basic.args,
-  closingConfirmation: true
-};

package/cjs/components/Form/Form.stories.js

@@ -1,35 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Basic = void 0;
-var _Form = _interopRequireDefault(require("./Form"));
-var _FormFieldText = _interopRequireDefault(require("../FormFieldText"));
-var _FormFieldPassword = _interopRequireDefault(require("../FormFieldPassword"));
-var _FormFieldCheckbox = _interopRequireDefault(require("../FormFieldCheckbox"));
-var _jsxRuntime = require("react/jsx-runtime");
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const Basic = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.default, {
-  ...args
-});
-exports.Basic = Basic;
-Basic.args = {
-  values: {
-    field1: 'Value 1',
-    field2: 'Value 2',
-    field3: true
-  },
-  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FormFieldText.default, {
-    label: "Field 1",
-    name: "field1"
-  }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormFieldPassword.default, {
-    label: "Field 2",
-    name: "field2"
-  }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormFieldCheckbox.default, {
-    label: "Field 3",
-    name: "field3"
-  }, "3")]
-};

package/cjs/components/FormFieldCheckbox/FormFieldCheckbox.stories.js

@@ -1,32 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.WithFullDescription = exports.Basic = void 0;
-var _Form = _interopRequireDefault(require("../Form"));
-var _FormFieldCheckbox = _interopRequireDefault(require("./FormFieldCheckbox"));
-var _jsxRuntime = require("react/jsx-runtime");
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const Basic = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Form.default, {
-  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FormFieldCheckbox.default, {
-    ...args
-  })
-});
-exports.Basic = Basic;
-Basic.args = {
-  name: 'name',
-  label: 'Lorem ipsum dolor sit amet.'
-};
-const WithFullDescription = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(Basic, {
-  ...args
-});
-exports.WithFullDescription = WithFullDescription;
-WithFullDescription.args = {
-  ...Basic.args,
-  label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac justo sed neque interdum varius. Aenean sollicitudin placerat orci, quis viverra libero mattis a. Morbi ac erat sed elit ullamcorper laoreet sed eget tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
-  fullDescription: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac justo sed neque interdum varius. Aenean sollicitudin placerat orci, quis viverra libero mattis a.',
-  required: true
-};

package/cjs/components/Icon/Icon.stories.js

@@ -1,32 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Basic = exports.All = void 0;
-var _Icon = _interopRequireDefault(require("./Icon"));
-var _constants = require("./constants");
-var _jsxRuntime = require("react/jsx-runtime");
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const Basic = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-  ...args
-});
-exports.Basic = Basic;
-Basic.args = {};
-const All = () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-  style: {
-    display: 'inline-block'
-  },
-  id: "icons",
-  children: _constants.NAMES_12.map(name => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: {
-      margin: 16
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      name: name
-    })
-  }, name))
-});
-exports.All = All;

package/cjs/components/ItemLink/ItemLink.stories.js

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Basic = void 0;
-var _ItemLink = _interopRequireDefault(require("./ItemLink"));
-var _jsxRuntime = require("react/jsx-runtime");
-// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
-
-const Basic = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ItemLink.default, {
-  ...args
-});
-exports.Basic = Basic;
-Basic.args = {
-  children: 'Add new item',
-  onClick: () => {},
-  'data-test': 'item-link'
-};