@canonical/react-components 1.2.4 → 1.3.0

package/dist/components/TablePagination/TablePagination.stories.js

@@ -1,330 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.RenderBelow = exports.RenderAbove = exports.Default = exports.CustomPageLimit = exports.CustomDisplayTitle = exports.ControlsOnly = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _TablePagination = _interopRequireDefault(require("./TablePagination"));
-var _MainTable = _interopRequireDefault(require("../MainTable"));
-var _TablePaginationControls = _interopRequireDefault(require("./TablePaginationControls"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _TablePagination.default,
-  tags: ["autodocs"],
-  argTypes: {
-    totalItems: {
-      if: {
-        arg: "externallyControlled",
-        truthy: true
-      }
-    },
-    currentPage: {
-      if: {
-        arg: "externallyControlled",
-        truthy: true
-      }
-    },
-    pageSize: {
-      if: {
-        arg: "externallyControlled",
-        truthy: true
-      }
-    },
-    onPageChange: {
-      if: {
-        arg: "externallyControlled",
-        truthy: true
-      }
-    },
-    onPageSizeChange: {
-      if: {
-        arg: "externallyControlled",
-        truthy: true
-      }
-    }
-  }
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: "Default",
-  args: {
-    data: [{
-      id: "row-1"
-    }, {
-      id: "row-2"
-    }, {
-      id: "row-3"
-    }, {
-      id: "row-4"
-    }, {
-      id: "row-5"
-    }]
-  }
-};
-const CustomPageLimit = exports.CustomPageLimit = {
-  name: "CustomPageLimit",
-  args: {
-    data: [{
-      id: "row-1"
-    }, {
-      id: "row-2"
-    }, {
-      id: "row-3"
-    }, {
-      id: "row-4"
-    }, {
-      id: "row-5"
-    }],
-    pageLimits: [1, 2, 3]
-  }
-};
-const CustomDisplayTitle = exports.CustomDisplayTitle = {
-  name: "CustomDisplayTitle",
-  args: {
-    data: [{
-      id: "row-1"
-    }, {
-      id: "row-2"
-    }, {
-      id: "row-3"
-    }, {
-      id: "row-4"
-    }, {
-      id: "row-5"
-    }],
-    description: /*#__PURE__*/_react.default.createElement("b", null, "Hello there")
-  }
-};
-const RenderAbove = exports.RenderAbove = {
-  render: () => {
-    const data = [{
-      columns: [{
-        content: "Ready",
-        role: "rowheader"
-      }, {
-        content: 1,
-        className: "u-align--right"
-      }, {
-        content: "1 GiB",
-        className: "u-align--right"
-      }, {
-        content: 2,
-        className: "u-align--right"
-      }, {
-        content: 42,
-        className: "u-align--right"
-      }],
-      sortData: {
-        status: "ready",
-        cores: 2,
-        ram: 1,
-        disks: 2
-      }
-    }, {
-      columns: [{
-        content: "Idle",
-        role: "rowheader"
-      }, {
-        content: 1,
-        className: "u-align--right"
-      }, {
-        content: "1 GiB",
-        className: "u-align--right"
-      }, {
-        content: 2,
-        className: "u-align--right"
-      }, {
-        content: 23,
-        className: "u-align--right"
-      }],
-      sortData: {
-        status: "idle",
-        cores: 1,
-        ram: 1,
-        disks: 2
-      }
-    }, {
-      columns: [{
-        content: "Waiting",
-        role: "rowheader"
-      }, {
-        content: 8,
-        className: "u-align--right"
-      }, {
-        content: "3.9 GiB",
-        className: "u-align--right"
-      }, {
-        content: 3,
-        className: "u-align--right"
-      }, {
-        content: 0,
-        className: "u-align--right"
-      }],
-      sortData: {
-        status: "waiting",
-        cores: 8,
-        ram: 3.9,
-        disks: 3
-      }
-    }];
-    const headers = [{
-      content: "Status",
-      sortKey: "status"
-    }, {
-      content: "Cores",
-      sortKey: "cores",
-      className: "u-align--right"
-    }, {
-      content: "RAM",
-      sortKey: "ram",
-      className: "u-align--right"
-    }, {
-      content: "Disks",
-      sortKey: "disks",
-      className: "u-align--right"
-    }, {
-      content: "Networks",
-      className: "u-align--right"
-    }];
-    return /*#__PURE__*/_react.default.createElement(_TablePagination.default, {
-      data: data,
-      pageLimits: [1, 2, 3]
-    }, /*#__PURE__*/_react.default.createElement(_MainTable.default, {
-      headers: headers,
-      rows: data,
-      sortable: true
-    }));
-  },
-  name: "RenderAbove"
-};
-const RenderBelow = exports.RenderBelow = {
-  render: () => {
-    const data = [{
-      columns: [{
-        content: "Ready",
-        role: "rowheader"
-      }, {
-        content: 1,
-        className: "u-align--right"
-      }, {
-        content: "1 GiB",
-        className: "u-align--right"
-      }, {
-        content: 2,
-        className: "u-align--right"
-      }, {
-        content: 42,
-        className: "u-align--right"
-      }],
-      sortData: {
-        status: "ready",
-        cores: 2,
-        ram: 1,
-        disks: 2
-      }
-    }, {
-      columns: [{
-        content: "Idle",
-        role: "rowheader"
-      }, {
-        content: 1,
-        className: "u-align--right"
-      }, {
-        content: "1 GiB",
-        className: "u-align--right"
-      }, {
-        content: 2,
-        className: "u-align--right"
-      }, {
-        content: 23,
-        className: "u-align--right"
-      }],
-      sortData: {
-        status: "idle",
-        cores: 1,
-        ram: 1,
-        disks: 2
-      }
-    }, {
-      columns: [{
-        content: "Waiting",
-        role: "rowheader"
-      }, {
-        content: 8,
-        className: "u-align--right"
-      }, {
-        content: "3.9 GiB",
-        className: "u-align--right"
-      }, {
-        content: 3,
-        className: "u-align--right"
-      }, {
-        content: 0,
-        className: "u-align--right"
-      }],
-      sortData: {
-        status: "waiting",
-        cores: 8,
-        ram: 3.9,
-        disks: 3
-      }
-    }];
-    const headers = [{
-      content: "Status",
-      sortKey: "status"
-    }, {
-      content: "Cores",
-      sortKey: "cores",
-      className: "u-align--right"
-    }, {
-      content: "RAM",
-      sortKey: "ram",
-      className: "u-align--right"
-    }, {
-      content: "Disks",
-      sortKey: "disks",
-      className: "u-align--right"
-    }, {
-      content: "Networks",
-      className: "u-align--right"
-    }];
-    return /*#__PURE__*/_react.default.createElement(_TablePagination.default, {
-      data: data,
-      pageLimits: [1, 2, 3],
-      position: "below"
-    }, /*#__PURE__*/_react.default.createElement(_MainTable.default, {
-      headers: headers,
-      rows: data,
-      sortable: true
-    }));
-  },
-  name: "RenderBelow"
-};
-
-/** The table pagination controls can be used without wrapping MainTable by
- * using the `TablePaginationControls` component.
- */
-const ControlsOnly = exports.ControlsOnly = {
-  render: () => {
-    return /*#__PURE__*/_react.default.createElement(_TablePaginationControls.default, {
-      currentPage: 1,
-      itemName: "row",
-      nextButtonProps: {
-        disabled: false
-      },
-      onInputPageChange: console.log,
-      onNextPage: console.log,
-      onPageSizeChange: console.log,
-      onPreviousPage: console.log,
-      pageLimits: [10, 25, 50],
-      pageSize: 20,
-      previousButtonProps: {
-        disabled: false
-      },
-      showPageInput: true,
-      totalItems: 100,
-      visibleCount: 10
-    });
-  }
-};

package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.d.ts

@@ -1,24 +0,0 @@
-import { ButtonProps } from "../../Button";
-import { HTMLAttributes } from "react";
-import { BasePaginationProps, ExternalControlProps, InternalControlProps } from "../TablePagination";
-export declare enum Label {
-    NEXT_PAGE = "Next page",
-    PREVIOUS_PAGE = "Previous page",
-    PAGE_NUMBER = "Page number"
-}
-export type AllProps = BasePaginationProps & InternalControlProps & ExternalControlProps;
-export type Props = Omit<AllProps, "currentPage" | "data" | "dataForwardProp" | "externallyControlled" | "onPageChange" | "position" | "totalItems"> & {
-    currentPage?: AllProps["currentPage"];
-    displayDescription?: boolean;
-    onInputPageChange?: (page: number) => void;
-    nextButtonProps?: Partial<ButtonProps>;
-    onNextPage?: (page: number) => void;
-    onPageChange?: AllProps["onPageChange"];
-    onPreviousPage?: (page: number) => void;
-    previousButtonProps?: Partial<ButtonProps>;
-    totalItems?: AllProps["totalItems"];
-    visibleCount?: number;
-    showPageInput?: boolean;
-} & HTMLAttributes<HTMLDivElement>;
-declare const TablePaginationControls: ({ className, currentPage, description, displayDescription, onInputPageChange, itemName, nextButtonProps, onNextPage, onPageChange, onPageSizeChange, onPreviousPage, pageLimits, pageSize, previousButtonProps, showPageInput, totalItems, visibleCount, ...divProps }: Props) => JSX.Element;
-export default TablePaginationControls;

package/dist/components/TablePagination/TablePaginationControls/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./TablePaginationControls";
-export type { Props as TablePaginationControlsProps } from "./TablePaginationControls";

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

@@ -1,2 +0,0 @@
-export { default } from "./TablePagination";
-export type { Props as TablePaginationProps } from "./TablePagination";

package/dist/components/TablePagination/utils.d.ts

@@ -1,27 +0,0 @@
-import { ReactElement, ReactNode } from "react";
-/**
- * Determine if we are working with a small screen.
- * 'small screen' in this case is relative to the width of the description div
- */
-export declare const figureSmallScreen: () => boolean;
-/**
- * Iterate direct react child components and override the value of the prop specified by @param dataForwardProp
- * for those child components.
- * @param children - react node children to iterate
- * @param dataForwardProp - the name of the prop from the children components to override
- * @param data - actual data to be passed to the prop specified by @param dataForwardProp
- */
-export declare const renderChildren: (children: ReactNode, dataForwardProp: string, data: unknown[]) => ReactElement<any, string | import("react").JSXElementConstructor<any>>[];
-export declare const DEFAULT_PAGE_LIMITS: number[];
-export declare const generatePagingOptions: (pageLimits: number[]) => {
-    value: number;
-    label: string;
-}[];
-export declare const getDescription: ({ description, isSmallScreen, totalItems, itemName, visibleCount, }: {
-    description: ReactNode;
-    isSmallScreen: boolean;
-    totalItems: number;
-    itemName: string;
-    visibleCount: number;
-}) => string | number | true | ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode>;
-export declare const useFigureSmallScreen: () => boolean;

package/dist/components/TableRow/TableRow.d.ts

@@ -1,10 +0,0 @@
-import type { HTMLProps, ReactNode } from "react";
-import type { PropsWithSpread } from "../../types";
-export type Props = PropsWithSpread<{
-    /**
-     * The content of the table row.
-     */
-    children: ReactNode;
-}, HTMLProps<HTMLTableRowElement>>;
-declare const TableRow: ({ children, ...trProps }: Props) => JSX.Element;
-export default TableRow;

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

@@ -1,2 +0,0 @@
-export { default } from "./TableRow";
-export type { Props as TableRowProps } from "./TableRow";

package/dist/components/Tabs/Tabs.d.ts

@@ -1,45 +0,0 @@
-import type { HTMLProps, ElementType, ReactNode, ComponentType } from "react";
-import type { ClassName } from "../../types";
-export type TabLink<P = null> = {
-    /**
-     * Whether the tab link should have active styling.
-     */
-    active?: boolean;
-    /**
-     * Optional classes applied to the link element.
-     */
-    className?: ClassName;
-    /**
-     * Optional component to be used instead of the default "a" element.
-     */
-    component?: ElementType | ComponentType<P>;
-    /**
-     * Label to be displayed inside the tab link.
-     */
-    label: ReactNode;
-    /**
-     * Optional classes applied to the "li" element.
-     */
-    listItemClassName?: string;
-} & (HTMLProps<HTMLElement> | P);
-export type Props<P = null> = {
-    /**
-     * Optional classes applied to the parent "nav" element.
-     */
-    className?: ClassName;
-    /**
-     * An array of tab link objects.
-     */
-    links: TabLink<P>[];
-    /**
-     * Optional classes applied to the "ul" element.
-     */
-    listClassName?: string;
-};
-/**
- * This is the [React](https://reactjs.org/) component for Vanilla [Tabs](https://vanillaframework.io/docs/patterns/tabs).
-Tabs organise and allow navigation between groups of content that are related and at the same level
-of hierarchy.
- */
-declare const Tabs: <P>({ className, links, listClassName, }: Props<P>) => JSX.Element;
-export default Tabs;

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

@@ -1,11 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import Tabs from "./Tabs";
-declare const meta: Meta<typeof Tabs>;
-export default meta;
-type Story = StoryObj<typeof Tabs>;
-export declare const Default: Story;
-/**
- * To horizontally align the Tabs with other content, they can be contained within a Row component to
-provide correct gutters.
- */
-export declare const HorizontallyAligned: Story;

package/dist/components/Tabs/Tabs.stories.js

@@ -1,56 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.HorizontallyAligned = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Row = _interopRequireDefault(require("../Row"));
-var _Tabs = _interopRequireDefault(require("./Tabs"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _Tabs.default,
-  tags: ["autodocs"]
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: "Default",
-  args: {
-    links: [{
-      active: true,
-      label: "Summary"
-    }, {
-      active: false,
-      label: "Network"
-    }, {
-      active: false,
-      label: "Storage"
-    }, {
-      active: false,
-      label: "Settings"
-    }]
-  }
-};
-
-/**
- * To horizontally align the Tabs with other content, they can be contained within a Row component to
-provide correct gutters.
- */
-const HorizontallyAligned = exports.HorizontallyAligned = {
-  render: () => /*#__PURE__*/_react.default.createElement(_Row.default, null, /*#__PURE__*/_react.default.createElement(_Tabs.default, {
-    links: [{
-      active: true,
-      label: "Summary"
-    }, {
-      active: false,
-      label: "Network"
-    }, {
-      active: false,
-      label: "Storage"
-    }, {
-      active: false,
-      label: "Settings"
-    }]
-  }), /*#__PURE__*/_react.default.createElement("p", null, "There should be gutters and the text should be horizontally aligned")),
-  name: "Horizontally aligned"
-};

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

@@ -1,2 +0,0 @@
-export { default } from "./Tabs";
-export type { Props as TabsProps } from "./Tabs";

package/dist/components/Textarea/Textarea.d.ts

@@ -1,70 +0,0 @@
-import type { TextareaHTMLAttributes, ReactNode } from "react";
-import type { ClassName, PropsWithSpread } from "../../types";
-/**
- * The props for the Textarea component.
- */
-export type Props = PropsWithSpread<{
-    /**
-     * The content for caution validation.
-     */
-    caution?: ReactNode;
-    /**
-     * Optional class(es) to pass to the textarea element.
-     */
-    className?: ClassName;
-    /**
-     * The content for error validation.
-     */
-    error?: ReactNode;
-    /**
-     * Whether the textarea should grow to fit the content automatically.
-     */
-    grow?: boolean;
-    /**
-     * Help text to show below the field.
-     */
-    help?: ReactNode;
-    /**
-     * The id of the textarea.
-     */
-    id?: string;
-    /**
-     * The label for the field.
-     */
-    label?: ReactNode;
-    /**
-     * Optional class(es) to pass to the label component.
-     */
-    labelClassName?: string;
-    /**
-     * Whether the field is required.
-     */
-    required?: boolean;
-    /**
-     * Whether the form field should have a stacked appearance.
-     */
-    stacked?: boolean;
-    /**
-     * The content for success validation.
-     */
-    success?: ReactNode;
-    /**
-     * Whether to focus on the input on initial render.
-     */
-    takeFocus?: boolean;
-    /**
-     * Optional class(es) to pass to the wrapping Field component
-     */
-    wrapperClassName?: string;
-    /**
-     * Function to occur on keyboard event, 'CTRL + Enter'
-     */
-    onControlEnter?: () => void;
-}, TextareaHTMLAttributes<HTMLTextAreaElement>>;
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla [Textarea](https://docs.vanillaframework.io/base/forms/#textarea).
- *
- * The Textarea component defines a multi-line text input control.
- */
-declare const Textarea: ({ caution, className, error, grow, help, id, label, labelClassName, onKeyUp, onControlEnter, required, stacked, style, success, takeFocus, wrapperClassName, ...props }: Props) => JSX.Element;
-export default Textarea;

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

@@ -1,7 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import Textarea from "./Textarea";
-declare const meta: Meta<typeof Textarea>;
-export default meta;
-type Story = StoryObj<typeof Textarea>;
-export declare const Default: Story;
-export declare const DynamicHeight: Story;

package/dist/components/Textarea/Textarea.stories.js

@@ -1,62 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.DynamicHeight = exports.Default = void 0;
-var _Textarea = _interopRequireDefault(require("./Textarea"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const meta = {
-  component: _Textarea.default,
-  tags: ["autodocs"],
-  argTypes: {
-    caution: {
-      control: {
-        type: "text"
-      }
-    },
-    error: {
-      control: {
-        type: "text"
-      }
-    },
-    help: {
-      control: {
-        type: "text"
-      }
-    },
-    label: {
-      control: {
-        type: "text"
-      }
-    },
-    success: {
-      control: {
-        type: "text"
-      }
-    },
-    id: {
-      control: {
-        disable: true
-      }
-    }
-  }
-};
-var _default = exports.default = meta;
-const Default = exports.Default = {
-  name: "Default",
-  args: {
-    label: "Tell us about your project or interest",
-    id: "textarea2",
-    rows: 3,
-    defaultValue: "Ubuntu"
-  }
-};
-const DynamicHeight = exports.DynamicHeight = {
-  name: "Dynamic Height",
-  args: {
-    label: "Text area that will dynamically adjust its height based on content",
-    defaultValue: "Ubuntu",
-    grow: true
-  }
-};

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

@@ -1,2 +0,0 @@
-export { default } from "./Textarea";
-export type { Props as TextareaProps } from "./Textarea";