@canonical/react-components 1.5.0 → 1.7.0

package/dist/components/DoughnutChart/DoughnutChart.js

@@ -0,0 +1,163 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TestIds = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+require("./DoughnutChart.scss");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+let TestIds = exports.TestIds = /*#__PURE__*/function (TestIds) {
+  TestIds["Label"] = "label";
+  TestIds["Segment"] = "segment";
+  TestIds["Chart"] = "chart";
+  TestIds["Section"] = "Section";
+  return TestIds;
+}({});
+const DoughnutChart = _ref => {
+  let {
+    className,
+    label,
+    labelClassname,
+    segmentHoverWidth,
+    segmentThickness,
+    segments,
+    size,
+    chartID
+  } = _ref;
+  const [tooltipMessage, setTooltipMessage] = (0, _react.useState)(null);
+  const id = (0, _react.useRef)("doughnut-chart-".concat(chartID));
+  const hoverIncrease = segmentHoverWidth - segmentThickness;
+  const adjustedHoverWidth = segmentHoverWidth + hoverIncrease;
+  // The canvas needs enough space so that the hover state does not get cut off.
+  const canvasSize = size + adjustedHoverWidth - segmentThickness;
+  const diameter = size - segmentThickness;
+  const radius = diameter / 2;
+  const circumference = Math.round(diameter * Math.PI);
+  // Calculate the total value of all segments.
+  const total = segments.reduce((totalValue, segment) => totalValue += segment.value, 0);
+  let accumulatedLength = 0;
+  const segmentNodes = segments.map((_ref2, i) => {
+    let {
+      color,
+      tooltip,
+      value
+    } = _ref2;
+    // The start position is the value of all previous segments.
+    const startPosition = accumulatedLength;
+    // The length of the segment (as a portion of the doughnut circumference)
+    const segmentLength = value / total * circumference;
+    // The space left until the end of the circle.
+    const remainingSpace = circumference - (segmentLength + startPosition);
+    // Add this segment length to the running tally.
+    accumulatedLength += segmentLength;
+    return /*#__PURE__*/_react.default.createElement("circle", {
+      className: "doughnut-chart__segment",
+      cx: radius - segmentThickness / 2 - hoverIncrease,
+      cy: radius + segmentThickness / 2 + hoverIncrease,
+      "data-testid": TestIds.Segment,
+      key: i,
+      tabIndex: 0,
+      "aria-label": tooltip ? "".concat(tooltip, ": ").concat(value) : "".concat(value),
+      onMouseOut: tooltip ? () => {
+        // Hide the tooltip.
+        setTooltipMessage(null);
+      } : undefined,
+      onMouseOver: tooltip ? () => {
+        setTooltipMessage(tooltip);
+      } : undefined,
+      r: radius,
+      style: {
+        stroke: color,
+        strokeWidth: segmentThickness,
+        // The dash array used is:
+        // 1 - We want there to be a space before the first visible dash so
+        //     by setting this to 0 we can use the next dash for the space.
+        // 2 - This gap is the distance of all previous segments
+        //     so that the segment starts in the correct spot.
+        // 3 - A dash that is the length of the segment.
+        // 4 - A gap from the end of the segment to the start of the circle
+        //     so that the dash array doesn't repeat and be visible.
+        strokeDasharray: "0 ".concat(startPosition.toFixed(2), " ").concat(segmentLength.toFixed(2), " ").concat(remainingSpace.toFixed(2))
+      }
+      // Rotate the segment so that the segments start at the top of
+      // the chart.
+      ,
+      transform: "rotate(-90 ".concat(radius, ",").concat(radius, ")")
+    });
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("doughnut-chart", className),
+    style: {
+      maxWidth: "".concat(canvasSize, "px")
+    },
+    "data-testid": TestIds.Chart
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    className: "doughnut-chart__tooltip",
+    followMouse: true,
+    message: tooltipMessage,
+    position: "right"
+  }, /*#__PURE__*/_react.default.createElement("style", null, "#".concat(id.current, " .doughnut-chart__segment:hover {\n          stroke-width: ").concat(adjustedHoverWidth, " !important;\n        }")), /*#__PURE__*/_react.default.createElement("svg", {
+    className: "doughnut-chart__chart",
+    id: id.current,
+    viewBox: "0 0 ".concat(canvasSize, " ").concat(canvasSize),
+    "data-testid": TestIds.Section,
+    "aria-labelledby": "".concat(id.current, "-chart-title ").concat(id.current, "-chart-desc")
+  }, label && /*#__PURE__*/_react.default.createElement("title", {
+    id: "".concat(id.current, "-chart-title")
+  }, label), /*#__PURE__*/_react.default.createElement("desc", {
+    id: "".concat(id.current, "-chart-desc")
+  }, segments.map(segment => {
+    let description = "";
+    if (segment.tooltip) description += "".concat(segment.tooltip, ": ");
+    description += segment.value;
+    return description;
+  }).join(",")), /*#__PURE__*/_react.default.createElement("mask", {
+    id: "canvasMask"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    fill: "white",
+    height: canvasSize,
+    width: canvasSize,
+    x: "0",
+    y: "0"
+  }), /*#__PURE__*/_react.default.createElement("circle", {
+    cx: canvasSize / 2,
+    cy: canvasSize / 2,
+    fill: "black",
+    r: radius - segmentThickness / 2
+  })), /*#__PURE__*/_react.default.createElement("g", {
+    mask: "url(#canvasMask)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    fill: "transparent",
+    height: canvasSize,
+    width: canvasSize,
+    x: "0",
+    y: "0"
+  }), /*#__PURE__*/_react.default.createElement("g", null, segmentNodes)), label ? /*#__PURE__*/_react.default.createElement("text", {
+    x: radius + adjustedHoverWidth / 2,
+    y: radius + adjustedHoverWidth / 2
+  }, /*#__PURE__*/_react.default.createElement("tspan", {
+    className: (0, _classnames.default)("doughnut-chart__label", labelClassname),
+    "data-testid": TestIds.Label
+  }, label)) : null)));
+};
+DoughnutChart.propTypes = {
+  label: _propTypes.default.string,
+  labelClassname: _propTypes.default.string,
+  className: _propTypes.default.string,
+  segmentHoverWidth: _propTypes.default.number.isRequired,
+  segmentThickness: _propTypes.default.number.isRequired,
+  segments: _propTypes.default.arrayOf(_propTypes.default.shape({
+    color: _propTypes.default.string.isRequired,
+    tooltip: _propTypes.default.string,
+    value: _propTypes.default.number.isRequired
+  })).isRequired,
+  size: _propTypes.default.number.isRequired,
+  chartID: _propTypes.default.string.isRequired
+};
+var _default = exports.default = DoughnutChart;

package/dist/components/DoughnutChart/DoughnutChart.scss

@@ -0,0 +1,30 @@
+@import "vanilla-framework";
+
+.doughnut-chart {
+  width: 6.5rem;
+
+  .doughnut-chart__tooltip {
+    display: block;
+  }
+
+  .doughnut-chart__tooltip > :only-child {
+    // Override the tooltip wrapper.
+    display: block !important;
+  }
+
+  .doughnut-chart__chart {
+    // Restrict hover areas to the strokes.
+    pointer-events: stroke;
+  }
+
+  .doughnut-chart__segment {
+    fill: transparent;
+
+    // Animate stroke size changes on hover.
+    transition: stroke-width 0.3s ease;
+  }
+}
+
+.doughnut-chart__legend {
+  list-style-type: none;
+}

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import DoughnutChart from "./DoughnutChart";
+declare const meta: Meta<typeof DoughnutChart>;
+export default meta;
+type Story = StoryObj<typeof DoughnutChart>;
+/**
+ * The Doughnut Chart component visually represents data segments in a circular format, with tooltips that appear on hover, and segments that can be customized via props.
+ */
+export declare const Default: Story;

package/dist/components/DoughnutChart/DoughnutChart.stories.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _DoughnutChart = _interopRequireDefault(require("./DoughnutChart"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _DoughnutChart.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+/**
+ * The Doughnut Chart component visually represents data segments in a circular format, with tooltips that appear on hover, and segments that can be customized via props.
+ */
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    chartID: "default",
+    segmentHoverWidth: 45,
+    segmentThickness: 40,
+    segments: [{
+      color: "#0E8420",
+      tooltip: "Running",
+      value: 10
+    }, {
+      color: "#CC7900",
+      tooltip: "Stopped",
+      value: 15
+    }, {
+      color: "#C7162B",
+      tooltip: "Frozen",
+      value: 5
+    }, {
+      color: "#000",
+      tooltip: "Error",
+      value: 5
+    }],
+    size: 150
+  }
+};

package/dist/components/DoughnutChart/DoughnutChart.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+export { default } from "./DoughnutChart";
+export type { Props as DoughnutChartProps } from "./DoughnutChart";
+export type { Segment } from "./DoughnutChart";

package/dist/components/DoughnutChart/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _DoughnutChart.default;
+  }
+});
+var _DoughnutChart = _interopRequireDefault(require("./DoughnutChart"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

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

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

package/dist/components/EmptyState/EmptyState.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithContent = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _EmptyState = _interopRequireDefault(require("./EmptyState"));
+var _Icon = _interopRequireWildcard(require("../Icon"));
+var _Button = _interopRequireDefault(require("../Button"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const boxImage = /*#__PURE__*/_react.default.createElement("img", {
+  src: "https://assets.ubuntu.com/v1/c17e0d92-container.svg",
+  style: {
+    maxWidth: "10rem",
+    maxHeight: "10rem"
+  },
+  alt: "empty state"
+});
+const doNothing = () => {};
+const meta = {
+  component: _EmptyState.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/_react.default.createElement(_EmptyState.default, {
+    image: boxImage,
+    title: "This application doesn't have any configuration parameters"
+  }),
+  name: "Default"
+};
+const WithContent = exports.WithContent = {
+  render: () => /*#__PURE__*/_react.default.createElement(_EmptyState.default, {
+    image: boxImage,
+    title: "No instances found"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "There are no instances in this project. Spin up your first instance!"), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("a", {
+    href: "#todo",
+    target: "_blank"
+  }, "How to create instances", /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    name: _Icon.ICONS.externalLink
+  }))), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    appearance: "positive",
+    onClick: doNothing
+  }, "Create instance")),
+  name: "With content"
+};

package/dist/components/EmptyState/EmptyState.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Field/Field.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Form from "./Form";
+declare const meta: Meta<typeof Form>;
+export default meta;
+type Story = StoryObj<typeof Form>;
+export declare const Default: Story;
+export declare const Fieldset: Story;
+export declare const Inline: Story;
+export declare const Stacked: Story;
+export declare const Disabled: Story;
+export declare const Validation: Story;
+export declare const Required: Story;

package/dist/components/Form/Form.stories.js

@@ -0,0 +1,179 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Validation = exports.Stacked = exports.Required = exports.Inline = exports.Fieldset = exports.Disabled = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Form = _interopRequireDefault(require("./Form"));
+var _Input = _interopRequireDefault(require("../Input"));
+var _Select = _interopRequireDefault(require("../Select"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _Form.default,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: {
+        disable: true
+      }
+    }
+  }
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  name: "Default",
+  args: {
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+      type: "text",
+      id: "exampleInputEmail12",
+      placeholder: "example@canonical.com",
+      label: "Email address"
+    }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+      type: "password",
+      id: "exampleInputPassword12",
+      placeholder: "******",
+      label: "Password"
+    }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+      type: "file",
+      id: "exampleInputFile2",
+      label: "File input"
+    }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+      type: "checkbox",
+      id: "CheckMe2",
+      label: "I agree to receive information about Canonical’s products and services."
+    }))
+  }
+};
+const Fieldset = exports.Fieldset = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement("fieldset", null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    placeholder: "Joe",
+    id: "list-input-12",
+    type: "text",
+    label: "First name"
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    placeholder: "Bloggs",
+    id: "list-input-22",
+    type: "text",
+    label: "Last name"
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    placeholder: "example@canonical.com",
+    id: "list-input-32",
+    type: "text",
+    label: "Email address"
+  }))),
+  name: "Fieldset"
+};
+const Inline = exports.Inline = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, {
+    inline: true
+  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "username-inline2",
+    className: "p-form__control",
+    label: "Username",
+    help: "30 characters or fewer."
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "address-inline22",
+    "aria-invalid": "true",
+    label: "Email address",
+    error: "Please enter a valid email address."
+  })),
+  name: "Inline"
+};
+const Stacked = exports.Stacked = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, {
+    stacked: true
+  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "full-name-stacked2",
+    label: "Full name",
+    stacked: true
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "username-stacked2",
+    label: "Username",
+    stacked: true,
+    help: "30 characters or fewer."
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "username-stacked-error2",
+    label: "Email address",
+    stacked: true,
+    error: "This field is required"
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "address-optional-stacked2",
+    label: "Address line 1",
+    stacked: true
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "address-optional-stacked3",
+    label: "Address line 2",
+    stacked: true
+  })),
+  name: "Stacked"
+};
+const Disabled = exports.Disabled = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    label: "Email address",
+    type: "text",
+    id: "disabled-input2",
+    placeholder: "example@canonical.com",
+    disabled: true
+  })),
+  name: "Disabled"
+};
+const Validation = exports.Validation = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "exampleTextInputError2",
+    placeholder: "example@canonical.com",
+    label: "Email address",
+    error: "This field is required."
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "exampleTextInputCaution2",
+    placeholder: "14",
+    label: "Mail configuration ID",
+    caution: "No validation is performed in preview mode."
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "exampleTextInputSuccess2",
+    placeholder: "**** **** **** ****",
+    label: "Card number",
+    success: "Verified."
+  }), /*#__PURE__*/_react.default.createElement(_Select.default, {
+    id: "exampleSelectInputError3",
+    defaultValue: "",
+    options: [{
+      value: "",
+      disabled: true,
+      label: "--Select an option--"
+    }, {
+      value: "1",
+      label: "Cosmic Cuttlefish"
+    }, {
+      value: "2",
+      label: "Bionic Beaver"
+    }, {
+      value: "3",
+      label: "Xenial Xerus"
+    }],
+    label: "Ubuntu releases",
+    error: "You need to select an OS to complete your install."
+  })),
+  name: "Validation"
+};
+const Required = exports.Required = {
+  render: () => /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    type: "text",
+    id: "exampleTextInputError3",
+    placeholder: "e.g joe@bloggs.com",
+    error: "This field is required.",
+    label: "Email address",
+    required: true
+  })),
+  name: "Required"
+};

package/dist/components/Form/Form.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/FormikField/FormikField.stories.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Fields = exports.Errors = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _FormikField = _interopRequireDefault(require("./FormikField"));
+var _Select = _interopRequireDefault(require("../Select"));
+var _formik = require("formik");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  component: _FormikField.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    name: "username",
+    label: "Username",
+    type: "text"
+  },
+  render: args => /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+    initialValues: {
+      username: ""
+    },
+    onSubmit: () => {}
+  }, /*#__PURE__*/_react.default.createElement(_FormikField.default, args))
+};
+const Fields = exports.Fields = {
+  args: {
+    component: _Select.default,
+    name: "release",
+    label: "Release",
+    options: [{
+      value: "",
+      disabled: true,
+      label: "Select an option"
+    }, {
+      value: "1",
+      label: "Cosmic Cuttlefish"
+    }, {
+      value: "2",
+      label: "Bionic Beaver"
+    }, {
+      value: "3",
+      label: "Xenial Xerus"
+    }]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "\nAny React Components input can be provided to FormikField (e.g. Input, Textarea or Select) or you may provide a custom component.\n\nAny additional props that need to be passed can be given to FormikField.\n        "
+      }
+    }
+  },
+  render: args => /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+    initialValues: {
+      release: ""
+    },
+    onSubmit: () => {}
+  }, /*#__PURE__*/_react.default.createElement(_FormikField.default, args))
+};
+const Errors = exports.Errors = {
+  args: Default.args,
+  parameters: {
+    docs: {
+      description: {
+        story: "\nFormik parameters are passed to the field using Formik's `useField`. This means that validation and errors, state handlers etc. should all just work.\n        "
+      }
+    }
+  },
+  render: args => /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+    initialErrors: {
+      username: "This username has already been taken."
+    },
+    initialTouched: {
+      username: true
+    },
+    initialValues: {
+      username: ""
+    },
+    onSubmit: () => {}
+  }, /*#__PURE__*/_react.default.createElement(_FormikField.default, args))
+};

package/dist/components/FormikField/FormikField.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Icon from "./Icon";
+import "./Icon.stories.scss";
+declare const meta: Meta<typeof Icon>;
+export default meta;
+type Story = StoryObj<typeof Icon>;
+export declare const Base: Story;
+export declare const Default: Story;
+/**
+ * To use custom icons that are not included in Vanilla you need to provide your own icon styling following the `.p-icon--{name}` convention.
+ */
+export declare const Custom: Story;
+/**
+ * To use custom icons that provide the name of the social media icon following the `.p-icon--{name}` convention.
+ */
+export declare const Social: Story;