`",
- type: { required: true },
- control: false,
- },
- "Table.Cell": {
- description:
- "Each cell for this table, equivalent to a `` HTML tag. This should be nested with a ``",
- type: { required: true },
- control: { type: "string" },
- },
- },
-};
-
-export const Default = () => {
- return (
-
-
-
- Name
- Title
- Email
- Role
- Edit
-
-
-
-
-
- Michael Scott
- Regional Manager
- michael.scott@dundermifflin.com
- Super Admin
- Edit
-
-
-
- Dwight Schrute
- Assistant to the Regisional Manager
- dwight.schrute@dundermifflin.com
- Admin
- Edit
-
-
-
- Jim
- Sales Manager
- jim@dundermifflin.com
- Manager
- Edit
-
-
-
- );
-};
-
-export const StripedTable = () => {
- return (
-
-
-
- Name
- Title
- Email
- Role
- Edit
-
-
-
-
-
- Michael Scott
- Regional Manager
- michael.scott@dundermifflin.com
- Super Admin
- Edit
-
-
-
- Dwight Schrute
- Assistant to the Regisional Manager
- dwight.schrute@dundermifflin.com
- Admin
- Edit
-
-
-
- Jim Halpert
- Sales Manager
- jim.halpert@dundermifflin.com
- Manager
- Edit
-
-
-
- Pam Beesly
- Office Manager
- pam.beesly@dundermifflin.com
- None
- Edit
-
-
-
- );
-};
-
-export default TableStories;
diff --git a/src/stories/DataDisplay/Table.stories.jsx b/src/stories/DataDisplay/Table.stories.jsx
new file mode 100644
index 000000000..da946e542
--- /dev/null
+++ b/src/stories/DataDisplay/Table.stories.jsx
@@ -0,0 +1,150 @@
+import React from "react";
+import { Table } from "../..";
+
+const TableStories = {
+ title: "Data Display/Table",
+ component: Table,
+ tags: ["autodocs"],
+ parameters: {
+ docs: {
+ description: {
+ component: "Your standard Table with a few bells and whistles",
+ },
+ },
+ design: {
+ name: "Figma",
+ type: "figma",
+ url: "https://www.figma.com/file/tL2vrxuBIzujkDfYvVjUhs/%E2%9A%99%EF%B8%8F-01---DS-Core?node-id=7839%3A479698&viewport=5709%2C-1661%2C0.26",
+ },
+ },
+ argTypes: {
+ "Table.Header": {
+ description:
+ "The header for this table, equivalent to a `` HTML tag. This should contain instances of ``",
+ type: { required: true },
+ control: false,
+ },
+ "Table.Head": {
+ description:
+ "The header for this table, equivalent to a `` HTML tag. This should contain instances of ``",
+ type: { required: true },
+ control: false,
+ },
+ "Table.Body": {
+ description:
+ "The body for this table, equivalent to a `` HTML tag. This should contain instances of ``",
+ type: { required: true },
+ control: false,
+ },
+ "Table.Row": {
+ description:
+ "Each row for this table, equivalent to a `` HTML tag. This should be nested with a `` or ``",
+ type: { required: true },
+ control: false,
+ },
+ "Table.Cell": {
+ description:
+ "Each cell for this table, equivalent to a `` HTML tag. This should be nested with a ``",
+ type: { required: true },
+ control: { type: "string" },
+ },
+ },
+};
+
+export const Default = {
+ render: () => {
+ return (
+
+
+
+ Name
+ Title
+ Email
+ Role
+ Edit
+
+
+
+
+
+ Michael Scott
+ Regional Manager
+ michael.scott@dundermifflin.com
+ Super Admin
+ Edit
+
+
+
+ Dwight Schrute
+ Assistant to the Regisional Manager
+ dwight.schrute@dundermifflin.com
+ Admin
+ Edit
+
+
+
+ Jim
+ Sales Manager
+ jim@dundermifflin.com
+ Manager
+ Edit
+
+
+
+ );
+ },
+};
+
+export const StripedTable = {
+ render: () => {
+ return (
+
+
+
+ Name
+ Title
+ Email
+ Role
+ Edit
+
+
+
+
+
+ Michael Scott
+ Regional Manager
+ michael.scott@dundermifflin.com
+ Super Admin
+ Edit
+
+
+
+ Dwight Schrute
+ Assistant to the Regisional Manager
+ dwight.schrute@dundermifflin.com
+ Admin
+ Edit
+
+
+
+ Jim Halpert
+ Sales Manager
+ jim.halpert@dundermifflin.com
+ Manager
+ Edit
+
+
+
+ Pam Beesly
+ Office Manager
+ pam.beesly@dundermifflin.com
+ None
+ Edit
+
+
+
+ );
+ },
+};
+
+export default TableStories;
diff --git a/src/stories/DataDisplay/Tag.stories.js b/src/stories/DataDisplay/Tag.stories.js
deleted file mode 100644
index 669bf4e3b..000000000
--- a/src/stories/DataDisplay/Tag.stories.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from "react";
-import { Tag } from "../..";
-
-const TagStories = {
- title: "Data Display/Tag",
- component: Tag,
- args: {
- color: "primary",
- size: "medium",
- text: "Listing: Kayaking in the Ganges",
- },
- parameters: {
- design: {
- name: "Figma",
- type: "figma",
- url: "https://www.figma.com/file/tL2vrxuBIzujkDfYvVjUhs/%E2%9A%99%EF%B8%8F-01---DS-Core?node-id=384%3A60",
- },
- },
- argTypes: {
- text: {
- type: { required: true },
- control: { type: "text" },
- },
- color: {
- options: ["primary", "secondary"],
- control: { type: "select" },
- },
- size: {
- options: ["small", "medium", "large"],
- control: { type: "radio" },
- },
- },
-};
-
-const onTagCloseClick = () => {
- console.log("Closed");
-};
-
-export const Default = ({ color, size, text }) => {
- return (
-
- {text}
-
- );
-};
-
-export const BookingTag = () => {
- return (
-
- Testing Tag
-
- );
-};
-
-export const SystemTag = () => {
- return (
-
- You cannot remove this tag
-
- );
-};
-
-export default TagStories;
diff --git a/src/stories/DataDisplay/Tag.stories.jsx b/src/stories/DataDisplay/Tag.stories.jsx
new file mode 100644
index 000000000..46bf4df80
--- /dev/null
+++ b/src/stories/DataDisplay/Tag.stories.jsx
@@ -0,0 +1,47 @@
+import { Tag } from "../..";
+import { selectOptions, sizeParams } from "../helpers";
+import { tagColors } from "../../components/Tag";
+
+const TagStories = {
+ title: "Data Display/Tag",
+ component: Tag,
+ tags: ["autodocs"],
+ parameters: {
+ design: {
+ name: "Figma",
+ type: "figma",
+ url: "https://www.figma.com/file/tL2vrxuBIzujkDfYvVjUhs/%E2%9A%99%EF%B8%8F-01---DS-Core?node-id=384%3A60",
+ },
+ },
+ argTypes: {
+ color: selectOptions(Object.keys(tagColors)),
+ size: sizeParams,
+ },
+ args: {
+ color: "primary",
+ size: "medium",
+ children: "Listing: Kayaking in the Ganges",
+ },
+};
+
+export const Default = {};
+
+export const BookingTag = {
+ args: {
+ color: "secondary",
+ size: "small",
+ children: "My tag",
+ onClose: () => console.log("Closed"),
+ },
+};
+
+export const SystemTag = {
+ args: {
+ color: "secondary",
+ size: "small",
+ children: "You cannot remove this tag",
+ onClose: undefined,
+ },
+};
+
+export default TagStories;
diff --git a/src/stories/Forms/Button.stories.js b/src/stories/Forms/Button.stories.js
deleted file mode 100644
index 2260ea2a1..000000000
--- a/src/stories/Forms/Button.stories.js
+++ /dev/null
@@ -1,200 +0,0 @@
-import React from "react";
-import { Button, EllipsisIcon, KeyIcon, PlusIcon, UserIcon, WaitlistIcon, WarningIcon } from "../..";
-
-const ButtonStories = {
- title: "Forms & Fields/Buttons/Button",
- component: Button,
- parameters: {
- design: {
- name: "Figma",
- type: "figma",
- url: "https://www.figma.com/file/EFmxLREOeGUse5zksD3iT4/%E2%9A%99%EF%B8%8F-02---DS-Application-UI?node-id=196%3A103411&viewport=-3086%2C515%2C0.36",
- },
- },
- args: {
- as: "button",
- size: "medium",
- color: "primary",
- variant: "standard",
- },
- argTypes: {
- size: {
- options: ["tiny", "small", "medium", "large"],
- control: { type: "select" },
- table: {
- defaultValue: { summary: "medium" },
- },
- },
- color: {
- options: ["primary", "secondary", "success", "warning", "caution", "danger"],
- control: { type: "select" },
- table: {
- defaultValue: { summary: "primary" },
- },
- },
- variant: {
- options: ["standard", "outline", "link"],
- control: { type: "radio" },
- table: {
- defaultValue: { summary: "standard" },
- },
- },
- },
-};
-
-export const Default = (props) => {
- return (
-
-
-
-
- );
-};
-
-export const Colors = () => {
- return (
-
-
-
-
-
-
-
-
- );
-};
-
-export const OutlineVariant = () => {
- return (
-
- Use variant="outline"
-
-
-
-
-
-
-
- );
-};
-
-export const LinkVariant = () => {
- return (
-
- Use variant="link"
-
-
-
-
-
-
-
- );
-};
-
-export const States = () => {
- return TODO: Disabled & Selected state ;
-};
-
-export const TextWithIcons = () => {
- return (
-
- } size="medium">
- Medium
-
-
- } iconPlacement="right" color="success" size="large">
- Large
-
-
- );
-};
-
-export const AsLink = () => {
- return (
-
- );
-};
-
-export const FullWidth = () => {
- return (
-
-
-
- } className="w-full">
- Icon
-
-
- );
-};
-
-export const IconOnly = () => {
- return (
-
- Most of our icon only buttons use the "variant=outline" prop
-
-
-
-
-
-
-
-
-
-
- Tiny is only used with icons
-
-
-
-
-
+
+
+
+
+
+
+
+ );
+ },
+};
+
+export const OutlineVariant = {
+ argTypes: { ...disableFields(["color", "variant", "children"]) },
+ render: (args) => {
+ return (
+
+
+
+
+
+
+
+
+ );
+ },
+};
+
+export const LinkVariant = {
+ argTypes: { ...disableFields(["color", "variant", "children"]) },
+ render: (args) => {
+ return (
+
+
+
+
+
+
+
+
+ );
+ },
+};
+
+export const AsLink = {
+ render: (args) => {
+ return (
+
+ );
+ },
+};
+
+export const FullWidth = () => {
+ return (
+
+
+
+ } className="w-full">
+ Icon
+
+
+ );
+};
+
+export const IconOnly = () => {
+ return (
+
+ Most of our icon only buttons use the "variant=outline" prop
+
+
+
+
+
+
+
+
+
+
+ Tiny is only used with icons
+
+
+
+
+
-
-
-
- );
+export const Disabled = {
+ render: () => {
+ return (
+
+
+
+
+ );
+ },
};
export default CheckboxStories;
diff --git a/src/stories/Forms/ComboBox.stories.js b/src/stories/Forms/ComboBox.stories.jsx
similarity index 99%
rename from src/stories/Forms/ComboBox.stories.js
rename to src/stories/Forms/ComboBox.stories.jsx
index 62ac38583..178d75a2d 100644
--- a/src/stories/Forms/ComboBox.stories.js
+++ b/src/stories/Forms/ComboBox.stories.jsx
@@ -5,6 +5,7 @@ import { ComboBox, Currency, FormGroup, Label } from "../..";
const ComboBoxStories = {
primary: true,
title: "Forms & Fields/ComboBox",
+ tags: ["autodocs"],
args: {
isCreatable: "boolean",
isMulti: "boolean",
diff --git a/src/stories/Forms/InlineValuePopover.stories.js b/src/stories/Forms/InlineValuePopover.stories.jsx
similarity index 99%
rename from src/stories/Forms/InlineValuePopover.stories.js
rename to src/stories/Forms/InlineValuePopover.stories.jsx
index 838c14da9..8d1ca8017 100644
--- a/src/stories/Forms/InlineValuePopover.stories.js
+++ b/src/stories/Forms/InlineValuePopover.stories.jsx
@@ -4,6 +4,7 @@ import { Button, FormGroup, InlineValuePopover, Input, Select } from "../..";
const InlineValuePopoverStories = {
title: "Forms & Fields/Inline Value Popover",
+ tags: ["autodocs"],
component: InlineValuePopover,
parameters: {
design: {
diff --git a/src/stories/Forms/Input.stories.js b/src/stories/Forms/Input.stories.jsx
similarity index 98%
rename from src/stories/Forms/Input.stories.js
rename to src/stories/Forms/Input.stories.jsx
index 163190907..1783ff175 100644
--- a/src/stories/Forms/Input.stories.js
+++ b/src/stories/Forms/Input.stories.jsx
@@ -4,6 +4,7 @@ import { FormGroup, Input, Label } from "../..";
const InputStories = {
primary: true,
title: "Forms & Fields/Input",
+ tags: ["autodocs"],
parameters: {
design: {
name: "Figma",
diff --git a/src/stories/Forms/RangeSlider.stories.js b/src/stories/Forms/RangeSlider.stories.jsx
similarity index 96%
rename from src/stories/Forms/RangeSlider.stories.js
rename to src/stories/Forms/RangeSlider.stories.jsx
index 7a71f1315..a7cbc6f43 100644
--- a/src/stories/Forms/RangeSlider.stories.js
+++ b/src/stories/Forms/RangeSlider.stories.jsx
@@ -4,6 +4,7 @@ import { FormGroup, Label, RangeSlider } from "../..";
const RangeSliderStories = {
primary: true,
title: "Forms & Fields/RangeSlider",
+ tags: ["autodocs"],
};
export const Default = () => {
diff --git a/src/stories/Forms/Select.stories.js b/src/stories/Forms/Select.stories.jsx
similarity index 99%
rename from src/stories/Forms/Select.stories.js
rename to src/stories/Forms/Select.stories.jsx
index 7d63db7bc..5f6331d80 100644
--- a/src/stories/Forms/Select.stories.js
+++ b/src/stories/Forms/Select.stories.jsx
@@ -3,6 +3,7 @@ import { FormGroup, Label, Select } from "../..";
const SelectStories = {
primary: true,
+ tags: ["autodocs"],
title: "Forms & Fields/Select",
};
diff --git a/src/stories/Forms/SubmitButton.stories.js b/src/stories/Forms/SubmitButton.stories.jsx
similarity index 83%
rename from src/stories/Forms/SubmitButton.stories.js
rename to src/stories/Forms/SubmitButton.stories.jsx
index 557a5c226..9a096648e 100644
--- a/src/stories/Forms/SubmitButton.stories.js
+++ b/src/stories/Forms/SubmitButton.stories.jsx
@@ -1,41 +1,33 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
import { SubmitButton } from "../..";
+import ButtonStories from "./Button.stories";
const SubmitButtonStories = {
- title: "Forms & Fields/Buttons/Submit Button",
+ title: "Forms & Fields/Submit Button",
component: SubmitButton,
+ tags: ["autodocs"],
args: {
isLoading: false,
+ isSuccess: false,
size: "medium",
color: "primary",
+ variant: "standard",
},
argTypes: {
+ ...ButtonStories.argTypes,
isLoading: {
control: { type: "boolean" },
table: {
defaultValue: { summary: false },
},
},
- size: {
- options: ["small", "medium", "large"],
- control: { type: "radio" },
- table: {
- defaultValue: { summary: "medium" },
- },
- },
- color: {
- options: ["primary", "secondary", "success", "warning", "danger"],
- control: { type: "select" },
- table: {
- defaultValue: { summary: "primary" },
- },
- },
},
};
export const Default = ({ isLoading, ...rest }) => {
const [showLoading, setShowLoading] = useState(isLoading);
const [showSuccess, setShowSuccess] = useState(false);
+ useEffect(() => setShowLoading(isLoading), [isLoading]);
const handleClick = () => {
setShowLoading(!showLoading);
diff --git a/src/stories/Forms/Switch.stories.js b/src/stories/Forms/Switch.stories.jsx
similarity index 80%
rename from src/stories/Forms/Switch.stories.js
rename to src/stories/Forms/Switch.stories.jsx
index dc0b70f5a..42d2d6742 100644
--- a/src/stories/Forms/Switch.stories.js
+++ b/src/stories/Forms/Switch.stories.jsx
@@ -1,10 +1,12 @@
import React, { useState } from "react";
import { Switch } from "../..";
+import { sizeParams } from "../helpers";
const SwitchStories = {
primary: true,
title: "Forms & Fields/Switch",
+ tags: ["autodocs"],
parameters: {
docs: {
description: {
@@ -21,19 +23,11 @@ const SwitchStories = {
size: "medium",
},
argTypes: {
- size: {
- description: "Switch Size",
- table: {
- type: { summary: null },
- defaultValue: { summary: "medium" },
- },
- options: ["small", "medium", "large"],
- control: { type: "radio" },
- },
+ size: sizeParams,
},
};
-export const Default = ({ size }) => {
+export const Default = ({ size = "a" }) => {
const [checked, setChecked] = useState(false);
return ;
};
diff --git a/src/stories/Forms/Textarea.stories.js b/src/stories/Forms/Textarea.stories.jsx
similarity index 98%
rename from src/stories/Forms/Textarea.stories.js
rename to src/stories/Forms/Textarea.stories.jsx
index dedd3c587..e50fee5f1 100644
--- a/src/stories/Forms/Textarea.stories.js
+++ b/src/stories/Forms/Textarea.stories.jsx
@@ -4,6 +4,7 @@ import { FormGroup, Label, Textarea } from "../..";
const TextareaStories = {
primary: true,
title: "Forms & Fields/Textarea",
+ tags: ["autodocs"],
parameters: {
design: {
name: "Figma",
diff --git a/src/stories/Forms/ToggleButton.stories.js b/src/stories/Forms/ToggleButton.stories.jsx
similarity index 53%
rename from src/stories/Forms/ToggleButton.stories.js
rename to src/stories/Forms/ToggleButton.stories.jsx
index 4c3a3377f..57f319208 100644
--- a/src/stories/Forms/ToggleButton.stories.js
+++ b/src/stories/Forms/ToggleButton.stories.jsx
@@ -1,43 +1,14 @@
import React, { useState } from "react";
import { CheckIcon, ToggleButton } from "../..";
-const ToggleButtonStories = {
- title: "Forms & Fields/Buttons/ToggleButton",
+export default {
+ title: "Forms & Fields/ToggleButton",
component: ToggleButton,
args: {
color: "success",
size: "medium",
isActive: false,
},
- parameters: {
- design: {
- name: "Figma",
- type: "figma",
- url: "https://www.figma.com/file/tL2vrxuBIzujkDfYvVjUhs/%E2%9A%99%EF%B8%8F-01---DS-Core?node-id=7505%3A475117",
- },
- },
- argTypes: {
- size: {
- options: ["small", "medium", "large"],
- control: { type: "radio" },
- table: {
- defaultValue: { summary: "medium" },
- },
- },
- color: {
- options: ["primary", "secondary", "success", "warning", "caution", "danger"],
- control: { type: "select" },
- table: {
- defaultValue: { summary: "primary" },
- },
- },
- isActive: {
- control: { type: "boolean" },
- table: {
- defaultValue: { summary: "false" },
- },
- },
- },
};
export const Default = ({ size, isActive }) => {
@@ -63,5 +34,3 @@ export const Default = ({ size, isActive }) => {
);
};
-
-export default ToggleButtonStories;
diff --git a/src/stories/Installation.stories.mdx b/src/stories/Installation.mdx
similarity index 65%
rename from src/stories/Installation.stories.mdx
rename to src/stories/Installation.mdx
index e7ec6dfab..12533be8c 100644
--- a/src/stories/Installation.stories.mdx
+++ b/src/stories/Installation.mdx
@@ -1,5 +1,5 @@
-import { Meta, Description } from "@storybook/addon-docs";
-import Readme from "../../README.md";
+import { Meta, Description } from "@storybook/addon-docs/blocks";
+import Readme from "../../README.mdx";
@@ -9,4 +9,4 @@ import Readme from "../../README.md";
README.md
-{Readme}
+
diff --git a/src/stories/Introduction.stories.mdx b/src/stories/Introduction.mdx
similarity index 100%
rename from src/stories/Introduction.stories.mdx
rename to src/stories/Introduction.mdx
diff --git a/src/stories/Media/Avatar.stories.js b/src/stories/Media/Avatar.stories.js
deleted file mode 100644
index b92f1acf0..000000000
--- a/src/stories/Media/Avatar.stories.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import React, { Fragment } from "react";
-import { Avatar } from "../..";
-
-const avatarColors = [
- "bg-primary-lighter",
- "bg-warning-lighter",
- "bg-success-lighter",
- "bg-secondary",
- "bg-caution-lighter",
- "bg-danger-lighter",
-];
-
-const AvatarStories = {
- title: "Media/Avatar",
- component: Avatar,
- parameters: {
- docs: {
- description: {
- component:
- "The avatar component is used to represent a user or seller. If the seller has a profile image that should be used instead",
- },
- },
- design: {
- name: "Figma",
- type: "figma",
- url: "https://www.figma.com/file/tL2vrxuBIzujkDfYvVjUhs/%E2%9A%99%EF%B8%8F-01---DS-Core?node-id=1848%3A51732",
- },
- },
- args: {
- size: "large",
- color: "bg-primary-lighter",
- },
- argTypes: {
- name: {
- description: "A user's full name",
- type: { required: true },
- control: { type: "text" },
- table: {
- type: { summary: "example: John Doe" },
- },
- },
- size: {
- description: "Avatar Size",
- table: {
- type: { summary: "one of the options" },
- defaultValue: { summary: "large" },
- },
- options: ["small", "medium", "large"],
- control: { type: "radio" },
- },
- color: {
- description: "Colors",
- table: {
- type: { summary: "one of the options" },
- defaultValue: { summary: "bg-primary-lighter" },
- },
- options: avatarColors,
- control: { type: "select" },
- },
- },
-};
-
-export const Default = ({ className, name = "John Doe", size, color }) => {
- return ;
-};
-
-export const OneNameLikeCher = ({ className, name = "Cher", size, color }) => {
- return ;
-};
-
-export const ThreeNames = ({ className, name = "James Scott Zimmerman", size, color }) => {
- return ;
-};
-
-export const SpecialChars = ({ className, name = "Rushi (Xola)", size, color }) => {
- return ;
-};
-
-export const AllColorsAndSizes = ({ className, name = "Barthélémy Chalvet" }) => {
- return (
-
- {["large", "medium", "small"].map((size) => (
-
- {avatarColors.map((color) => (
-
- ))}
-
- ))}
-
+ {Object.keys(avatarSizes).map((size) => (
+
+ {avatarColors.map((color) => (
+
+ ))}
+
+ ))}
+
-
- Settings
- Preferences
-
-
- );
-};
-
-export const MultipleLevels = () => {
- return (
-
-
- Settings
- Preferences
- Gifts
-
-
- );
-};
-
-export default BreadcrumbStories;
diff --git a/src/stories/Navigation/Breadcrumb.stories.jsx b/src/stories/Navigation/Breadcrumb.stories.jsx
new file mode 100644
index 000000000..675d3b7c6
--- /dev/null
+++ b/src/stories/Navigation/Breadcrumb.stories.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { Breadcrumb } from "../..";
+
+const BreadcrumbStories = {
+ title: "Navigation/Breadcrumb",
+ component: Breadcrumb,
+ tags: ["autodocs"],
+ args: {
+ separator: "/",
+ },
+};
+
+export const Default = ({ separator }) => {
+ return (
+
+
+ Settings
+ Preferences
+
+
+ );
+};
+
+export const MultipleLevels = () => {
+ return (
+
+
+ Settings
+ Preferences
+ Gifts
+
+
+ );
+};
+
+export default BreadcrumbStories;
diff --git a/src/stories/Navigation/Sidebar.stories.js b/src/stories/Navigation/Sidebar.stories.js
deleted file mode 100644
index 9cd12bae7..000000000
--- a/src/stories/Navigation/Sidebar.stories.js
+++ /dev/null
@@ -1,151 +0,0 @@
-import React from "react";
-import { AnnounceIcon, CheckIcon, HelpCenterIcon, LogoutIcon, PolicyIcon, Sidebar, StarIcon, UserIcon } from "../..";
-
-const SidebarStories = {
- title: "Navigation/Sidebar",
- component: Sidebar,
- parameters: {
- design: {
- name: "Figma",
- type: "figma",
- url: "https://www.figma.com/file/tL2vrxuBIzujkDfYvVjUhs/%E2%9A%99%EF%B8%8F-01---DS-Core?node-id=2725%3A91116&viewport=2302%2C256%2C0.11",
- },
- },
-};
-
-const SidebarFooter = () => {
- return (
-
-
-
- }
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
- }
- >
-
-
-
- );
-};
-
-const handleLogoClick = () => {
- window.location.reload();
-};
-
-export const Default = () => {
- return (
-
- } onLogoClick={handleLogoClick}>
-
- Sellers
-
-
- Favorites
-
-
-
-
-
- Abandoned Booking Recovery
-
- Conversion Tracking
- Coupons
- Partners
- XolaBot
-
- Global Settings
-
-  ;
-
- return (
-
- Pass in any component for the "logo" property
- } footer={} onLogoClick={handleLogoClick}>
-
- Sellers
-
- Favorites
- Marketing
-
-
- );
-};
-
-export const SidebarWithNotifications = () => {
- const notifications = {
- announcements: {
- count: 1,
- content: Some content ,
- title: "Announcements",
- onClose: () => console.log("Announcements closed"),
- },
- notices: {
- count: 32,
- content: Some content ,
- title: "Notifications & Pending items",
- },
- };
- return (
-
- } notifications={notifications} onLogoClick={handleLogoClick}>
-
- Sellers
-
-
- Favorites
-
-
-
-
-
- Abandoned Booking Recovery
-
- Conversion Tracking
- Coupons
- Partners
- XolaBot
-
-
+ }
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ }
+ >
+
+
+
+ );
+};
+
+const handleLogoClick = () => {
+ window.location.reload();
+};
+
+export const Default = {
+ render: (args) => {
+ return (
+
+ } onLogoClick={handleLogoClick}>
+
+ Sellers
+
+
+ Favorites
+
+
+
+
+
+ Abandoned Booking Recovery
+
+ Conversion Tracking
+ Coupons
+ Partners
+ XolaBot
+
+ Global Settings
+
+
+ Pass in any component for the "logo" property
+ } footer={} onLogoClick={handleLogoClick}>
+
+ Sellers
+
+ Favorites
+ Marketing
+
+
+ );
+ },
+};
+
+export const SidebarWithNotifications = {
+ render: (args) => {
+ const notifications = {
+ announcements: {
+ count: 1,
+ content: Some content ,
+ title: "Announcements",
+ onClose: () => console.log("Announcements closed"),
+ },
+ notices: {
+ count: 32,
+ content: Some content ,
+ title: "Notifications & Pending items",
+ },
+ };
+ return (
+
+ } notifications={notifications} onLogoClick={handleLogoClick}>
+
+ Sellers
+
+
+ Favorites
+
+
+
+
+
+ Abandoned Booking Recovery
+
+ Conversion Tracking
+ Coupons
+ Partners
+ XolaBot
+
+
-
- Line item caption
-
- Children
-
-
- Adults
-
- } info={}>
- Null Info
-
-
- VAT
-
-
-
-
-
-
-
-
- }>
- Payment
-
-
- }>
- Return Payment
-
-
- } value={0} methodIcon={}>
- This is a really long message that should wrap somehow
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default BreakdownStories;
diff --git a/src/stories/Other/Breakdown.stories.jsx b/src/stories/Other/Breakdown.stories.jsx
new file mode 100644
index 000000000..0797f9386
--- /dev/null
+++ b/src/stories/Other/Breakdown.stories.jsx
@@ -0,0 +1,78 @@
+import React from "react";
+import { Breakdown, Button, CardIcon } from "../..";
+
+const BreakdownStories = {
+ title: "Other/Breakdown",
+ component: Breakdown,
+ parameters: {
+ design: {
+ name: "Figma",
+ type: "figma",
+ url: "https://www.figma.com/file/EFmxLREOeGUse5zksD3iT4/%E2%9A%99%EF%B8%8F-02---DS-Application-UI?node-id=236%3A144618&viewport=-3895%2C-275%2C0.33",
+ },
+ },
+};
+
+export const Default = {
+ render: (props) => {
+ // Just for a basic showcase of when info is null
+ const EmptyComponent = () => null;
+
+ return (
+
+
+ Line item caption
+
+ Children
+
+
+ Adults
+
+ } info={}>
+ Null Info
+
+
+ VAT
+
+
+
+
+
+
+
+
+ }>
+ Payment
+
+
+ }>
+ Return Payment
+
+
+ }
+ value={0}
+ methodIcon={}
+ >
+ This is a really long message that should wrap somehow
+
+
+
+
+
+
+
+
+
+
+
+ );
+ },
+};
+
+export default BreakdownStories;
diff --git a/src/stories/Other/HeaderToolbar.stories.js b/src/stories/Other/HeaderToolbar.stories.js
deleted file mode 100644
index 0fefd9d43..000000000
--- a/src/stories/Other/HeaderToolbar.stories.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from "react";
-import { Breadcrumb, Button, HeaderToolbar } from "../..";
-
-const HeaderToolbarStories = {
- title: "Other/Header Toolbars",
- component: HeaderToolbar,
- parameters: {
- design: {
- name: "Figma",
- type: "figma",
- url: "https://www.figma.com/file/tL2vrxuBIzujkDfYvVjUhs/%E2%9A%99%EF%B8%8F-01---DS-Core?node-id=7839%3A479666&viewport=5274%2C-3037%2C0.55",
- },
- },
-};
-
-export const HeaderToolbars = () => {
- return (
-
-
- Seller
- Lasting Adventures
-
- {
- // eslint-disable-next-line no-alert
- alert("Search bar not implemented");
- }}
- />
-
-
-
- );
-};
-
-export default HeaderToolbarStories;
diff --git a/src/stories/Other/HeaderToolbar.stories.jsx b/src/stories/Other/HeaderToolbar.stories.jsx
new file mode 100644
index 000000000..09107fbd7
--- /dev/null
+++ b/src/stories/Other/HeaderToolbar.stories.jsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { Breadcrumb, Button, HeaderToolbar } from "../..";
+
+const HeaderToolbarStories = {
+ title: "Other/Header Toolbars",
+ component: HeaderToolbar,
+ parameters: {
+ design: {
+ name: "Figma",
+ type: "figma",
+ url: "https://www.figma.com/file/tL2vrxuBIzujkDfYvVjUhs/%E2%9A%99%EF%B8%8F-01---DS-Core?node-id=7839%3A479666&viewport=5274%2C-3037%2C0.55",
+ },
+ },
+};
+
+export const HeaderToolbars = {
+ render: (props) => {
+ return (
+
+
+ Seller
+ Lasting Adventures
+
+ {
+ // eslint-disable-next-line no-alert
+ alert("Search bar not implemented");
+ }}
+ />
+
+
+
+ );
+ },
+};
+
+export default HeaderToolbarStories;
diff --git a/src/stories/Other/Search.stories.js b/src/stories/Other/Search.stories.jsx
similarity index 90%
rename from src/stories/Other/Search.stories.js
rename to src/stories/Other/Search.stories.jsx
index 6bf59a078..a523c397c 100644
--- a/src/stories/Other/Search.stories.js
+++ b/src/stories/Other/Search.stories.jsx
@@ -4,7 +4,14 @@ import { Search } from "../..";
const SearchStories = {
title: "Other/Search",
+ tags: ["autodocs"],
parameters: {
+ docs: {
+ description: {
+ component:
+ "A generic search component. Props need manual documentation. Till then see the JSDocs in Search.jsx",
+ },
+ },
design: {
name: "Figma",
type: "figma",
@@ -22,7 +29,7 @@ const fetchUsers = async (search) => {
return response.data.filter((user) => JSON.stringify(user).toLowerCase().includes(search.toLowerCase()));
};
-export const Default = () => {
+export const Default = (props) => {
const [loading, setLoading] = useState(false);
const [items, setItems] = useState([]);
diff --git a/src/stories/Other/Spinner.stories.js b/src/stories/Other/Spinner.stories.js
deleted file mode 100644
index cbb887934..000000000
--- a/src/stories/Other/Spinner.stories.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from "react";
-import { Spinner } from "../..";
-
-const SpinnerStories = {
- title: "Other/Spinner",
- component: Spinner,
- args: {
- color: "secondary",
- size: "small",
- },
- argTypes: {
- color: {
- type: { required: true },
- options: ["primary", "secondary", "success", "warning", "danger", "caution", "current"],
- control: { type: "select" },
- table: {
- type: { summary: null },
- defaultValue: { summary: "secondary" },
- },
- },
- size: {
- options: ["small", "medium", "large", "current"],
- control: { type: "select" },
- table: {
- type: { summary: null },
- defaultValue: { summary: "small" },
- },
- },
- },
-};
-
-export const Default = (props) => {
- return ;
-};
-
-export const Sizes = () => {
- return (
-
-
-
-
-
- );
-};
-
-export default SpinnerStories;
diff --git a/src/stories/Other/Spinner.stories.jsx b/src/stories/Other/Spinner.stories.jsx
new file mode 100644
index 000000000..b1aa4ba43
--- /dev/null
+++ b/src/stories/Other/Spinner.stories.jsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { Spinner } from "../..";
+import { inlineRadioOptions, selectOptions } from "../helpers";
+import { spinnerColors, spinnerSizes } from "../../components/Spinner";
+
+const SpinnerStories = {
+ title: "Other/Spinner",
+ component: Spinner,
+ tags: ["autodocs"],
+ args: {
+ color: "secondary",
+ size: "small",
+ },
+ argTypes: {
+ color: selectOptions(Object.keys(spinnerColors)),
+ size: inlineRadioOptions(Object.keys(spinnerSizes)),
+ },
+};
+
+export const Default = (props) => {
+ return ;
+};
+
+export const Sizes = () => {
+ return (
+
+ {Object.keys(spinnerSizes).map((size) => (
+
+ ))}
+
+ );
+};
+
+export default SpinnerStories;
diff --git a/src/stories/Overlay/Drawer.stories.js b/src/stories/Overlay/Drawer.stories.js
deleted file mode 100644
index 6524e51d0..000000000
--- a/src/stories/Overlay/Drawer.stories.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { useState } from "react";
-import { Button, Drawer } from "../..";
-
-const DrawerStories = {
- title: "Overlay/Drawers",
- component: Drawer,
- parameters: {
- docs: {
- description: {
- component: "The Drawer component is a dynamic sidebar that is used to show data on the right side",
- },
- },
- design: {
- name: "Figma",
- type: "figma",
- url: "https://www.figma.com/file/YCbs6YcoYUNYGq9VhrEFQ0/13-Admin?node-id=960%3A27700&viewport=1028%2C673%2C0.38",
- },
- },
- argTypes: {
- isOpen: {
- description: "Open or close the sidebar",
- type: { required: true },
- control: { type: "boolean" },
- },
- title: {
- description: "The title of the Drawer",
- type: { required: true },
- control: { type: "text" },
- },
- content: {
- description: "The body of the Drawer",
- control: { type: "text" },
- },
- size: {
- description: "The width of the drawer when it opens",
- options: ["small", "medium", "large"],
- control: { type: "select" },
- },
- onClose: {
- description: "Function to callback to close the Drawer",
- control: { type: "function" },
- },
- },
-};
-
-export const Drawers = ({ title = "Hello World", size, content = "Lorem Ipsum. Click the X to close" }) => {
- const [open, setOpen] = useState(false);
- const onClose = () => setOpen(false);
-
- return (
-
-
-
-
- );
-};
-
-export default DrawerStories;
diff --git a/src/stories/Overlay/Drawer.stories.jsx b/src/stories/Overlay/Drawer.stories.jsx
new file mode 100644
index 000000000..92ed26880
--- /dev/null
+++ b/src/stories/Overlay/Drawer.stories.jsx
@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from "react";
+import { Button, Drawer } from "../..";
+import { inlineRadioOptions } from "../helpers";
+import { drawerSizes } from "../../components/Drawer";
+import { userEvent, within } from "@storybook/testing-library";
+
+const DrawerStories = {
+ title: "Overlay/Drawers",
+ component: Drawer,
+ parameters: {
+ docs: {
+ description: {
+ component: "The Drawer component is a dynamic sidebar that is used to show data on the right side",
+ },
+ },
+ design: {
+ name: "Figma",
+ type: "figma",
+ url: "https://www.figma.com/file/YCbs6YcoYUNYGq9VhrEFQ0/13-Admin?node-id=960%3A27700&viewport=1028%2C673%2C0.38",
+ },
+ },
+ args: {
+ isOpen: false,
+ size: "medium",
+ title: "Hello World",
+ position: "right",
+ content: "Lorem Ipsum. Click the X to close",
+ },
+ argTypes: {
+ title: {
+ description: "The title of the Drawer",
+ type: { required: true },
+ control: { type: "text" },
+ },
+ content: {
+ description: "The body of the Drawer",
+ control: { type: "text" },
+ },
+ size: inlineRadioOptions(Object.keys(drawerSizes).slice(0, -1)),
+ position: inlineRadioOptions(["left", "right"]),
+ onClose: {
+ description: "Function to callback to close the Drawer",
+ control: { type: "function" },
+ },
+ },
+};
+
+export const Default = {
+ // This will click the button when the canvas loads
+ // Docs: https://storybook.js.org/docs/react/writing-stories/play-function
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ await userEvent.click(canvas.getByRole("button"));
+ },
+ render: ({ isOpen, size, title, position, content }) => {
+ const [open, setOpen] = useState(isOpen);
+ useEffect(() => setOpen(isOpen), [isOpen]);
+ const onClose = () => setOpen(false);
+
+ return (
+
+
+
+
+ );
+ },
+};
+
+export default DrawerStories;
diff --git a/src/stories/Overlay/Modal.stories.js b/src/stories/Overlay/Modal.stories.jsx
similarity index 79%
rename from src/stories/Overlay/Modal.stories.js
rename to src/stories/Overlay/Modal.stories.jsx
index 2d23d5645..a36c493df 100644
--- a/src/stories/Overlay/Modal.stories.js
+++ b/src/stories/Overlay/Modal.stories.jsx
@@ -1,9 +1,12 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
import { Button, Input, Modal } from "../..";
+import { inlineRadioOptions, tableDefault } from "../helpers";
+import { modalSizes } from "../../components/Modal";
const ModalStories = {
title: "Overlay/Modal",
component: Modal,
+ tags: ["autodocs"],
args: {
size: "medium",
position: "center",
@@ -18,14 +21,7 @@ const ModalStories = {
},
},
argTypes: {
- size: {
- type: { required: false },
- options: ["small", "medium", "large", "huge"],
- control: { type: "select" },
- table: {
- defaultValue: { summary: "medium" },
- },
- },
+ size: inlineRadioOptions(Object.keys(modalSizes), tableDefault("medium")),
position: {
type: { required: false },
options: ["topLeft", "topRight", "center", "bottomLeft", "bottomRight"],
@@ -47,12 +43,10 @@ const ModalStories = {
},
};
-export const Default = ({ size, position, shouldCloseOnOutsideClick }) => {
- const [isOpen, setIsOpen] = useState(false);
-
- const toggle = () => {
- setIsOpen(!isOpen);
- };
+export const Default = ({ isOpen, size, position, shouldCloseOnOutsideClick }) => {
+ const [open, setOpen] = useState(false);
+ useEffect(() => setOpen(isOpen), [isOpen]);
+ const toggle = () => setOpen(!open);
return (
@@ -61,7 +55,7 @@ export const Default = ({ size, position, shouldCloseOnOutsideClick }) => {
@@ -85,12 +79,10 @@ export const Default = ({ size, position, shouldCloseOnOutsideClick }) => {
);
};
-export const CustomWidth = ({ size, position, shouldCloseOnOutsideClick }) => {
- const [isOpen, setIsOpen] = useState(false);
-
- const toggle = () => {
- setIsOpen(!isOpen);
- };
+export const CustomWidth = ({ isOpen, size, position, shouldCloseOnOutsideClick }) => {
+ const [open, setOpen] = useState(false);
+ useEffect(() => setOpen(isOpen), [isOpen]);
+ const toggle = () => setOpen(!open);
return (
@@ -100,7 +92,7 @@ export const CustomWidth = ({ size, position, shouldCloseOnOutsideClick }) => {
className="!max-w-200"
size={size}
position={position}
- isOpen={isOpen}
+ isOpen={open}
shouldCloseOnOutsideClick={shouldCloseOnOutsideClick}
onClose={toggle}
>
diff --git a/src/stories/Overlay/Popover.stories.js b/src/stories/Overlay/Popover.stories.jsx
similarity index 99%
rename from src/stories/Overlay/Popover.stories.js
rename to src/stories/Overlay/Popover.stories.jsx
index 00cf0ffa5..37361faa4 100644
--- a/src/stories/Overlay/Popover.stories.js
+++ b/src/stories/Overlay/Popover.stories.jsx
@@ -8,6 +8,7 @@ const PopoverStories = {
id: "Popover",
title: "Overlay/Popover",
component: Popover,
+ tags: ["autodocs"],
args: {
trigger: "mouseenter",
placement: "right",
diff --git a/src/stories/Overlay/PopoverList.stories.js b/src/stories/Overlay/PopoverList.stories.jsx
similarity index 99%
rename from src/stories/Overlay/PopoverList.stories.js
rename to src/stories/Overlay/PopoverList.stories.jsx
index 63d5355b8..802feb935 100644
--- a/src/stories/Overlay/PopoverList.stories.js
+++ b/src/stories/Overlay/PopoverList.stories.jsx
@@ -5,6 +5,7 @@ const PopoverStories = {
id: "PopoverList",
title: "Overlay/Popover List",
component: PopoverList,
+ tags: ["autodocs"],
args: {
placement: "bottom",
trigger: "mouseenter",
diff --git a/src/stories/Overlay/Tooltip.stories.js b/src/stories/Overlay/Tooltip.stories.jsx
similarity index 97%
rename from src/stories/Overlay/Tooltip.stories.js
rename to src/stories/Overlay/Tooltip.stories.jsx
index 600431160..98ab45a88 100644
--- a/src/stories/Overlay/Tooltip.stories.js
+++ b/src/stories/Overlay/Tooltip.stories.jsx
@@ -7,6 +7,7 @@ const documentationUrl = "https://atomiks.github.io/tippyjs/v6/all-props/";
const TooltipStories = {
title: "Overlay/Tooltip",
component: Tooltip,
+ tags: ["autodocs"],
args: {
content: "Hey there!",
trigger: "mouseenter",
@@ -84,7 +85,7 @@ export const Default = (config) => {
);
};
-export const WithHTMLContent = () => {
+export const WithHTMLContent = (config) => {
return (
<>
@@ -92,7 +93,7 @@ export const WithHTMLContent = () => {
content prop to show HTML content.
diff --git a/src/stories/Screens/Login.stories.js b/src/stories/Screens/Login.stories.jsx
similarity index 98%
rename from src/stories/Screens/Login.stories.js
rename to src/stories/Screens/Login.stories.jsx
index ff5f3df91..62b0b289f 100644
--- a/src/stories/Screens/Login.stories.js
+++ b/src/stories/Screens/Login.stories.jsx
@@ -4,6 +4,7 @@ import { Badge, Login } from "../..";
const LoginStories = {
title: "Screens/Login",
component: Login,
+ tags: ["autodocs"],
parameters: {
docs: {
description: {
diff --git a/src/stories/helpers.ts b/src/stories/helpers.ts
new file mode 100644
index 000000000..8a9ce8078
--- /dev/null
+++ b/src/stories/helpers.ts
@@ -0,0 +1,54 @@
+// https://storybook.js.org/docs/react/essentials/controls
+// Conditional controls: https://storybook.js.org/docs/react/essentials/controls#conditional-controls
+
+export const disableType = {
+ table: { disable: true },
+};
+
+export const disableFields = (fields: string[]) => {
+ const argTypes = fields.map((field) => ({ [field]: disableType }));
+ return Object.assign({}, ...argTypes);
+};
+
+const arrayOptions = (name: string, values: string[], ...rest: any) => {
+ return { control: name, options: values, ...rest[0] };
+};
+
+export const inlineRadioOptions = (values: string[], ...rest: any) => {
+ return arrayOptions("inline-radio", values, ...rest);
+};
+
+export const radioOptions = (values: string[], ...rest: any) => {
+ return arrayOptions("radio", values, ...rest);
+};
+
+export const selectOptions = (values: string[], ...rest: any) => {
+ return arrayOptions("select", values, ...rest);
+};
+
+export const tableDefault = (summary: string) => {
+ return {
+ table: { defaultValue: { summary } },
+ };
+};
+
+export const sizeParams = inlineRadioOptions(["small", "medium", "large"], tableDefault("medium"));
+
+// argTypes
+// {
+// [key: string]: {
+// control?: ControlType | { type: ControlType; /* See below for more */ };
+// description?: string;
+// if?: Conditional;
+// mapping?: { [key: string]: { [option: string]: any } };
+// name?: string;
+// options?: string[];
+// table?: {
+// category?: string;
+// defaultValue?: { summary: string; detail?: string };
+// subcategory?: string;
+// type?: { summary?: string; detail?: string };
+// },
+// type?: SBType | SBScalarType['name'];
+// }
+// }
diff --git a/tailwind.config.js b/tailwind.config.mjs
similarity index 93%
rename from tailwind.config.js
rename to tailwind.config.mjs
index 35d77a7b7..806683149 100644
--- a/tailwind.config.js
+++ b/tailwind.config.mjs
@@ -1,5 +1,8 @@
-const defaultTheme = require("tailwindcss/defaultTheme");
-const path = require("path");
+import defaultTheme from "tailwindcss/defaultTheme.js";
+import forms from "@tailwindcss/forms";
+import lineClamp from "@tailwindcss/line-clamp";
+
+const __dirname = import.meta.url.replace("tailwind.config.js", "").replace("file://", "");
const colors = {
transparent: "transparent",
@@ -121,13 +124,13 @@ const spacing = {
140: "560px",
200: "800px",
};
-module.exports = {
+export default {
content: [
"./src/**/*.js",
"./src/**/*.jsx",
"./src/**/*.ts",
"./src/**/*.tsx",
- path.join(__dirname, "build/ui-kit.umd.js"),
+ __dirname + "build/ui-kit.umd.js",
],
theme: {
@@ -221,5 +224,5 @@ module.exports = {
},
},
- plugins: [require("@tailwindcss/forms"), require("@tailwindcss/line-clamp")],
+ plugins: [forms, lineClamp],
};
diff --git a/vite.config.js b/vite.config.js
index 7dc53c750..396857db8 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,22 +1,62 @@
-import path from "path";
import { defineConfig } from "vite";
import pkg from "./package.json";
+import copy from "rollup-plugin-copy";
+import postcss from "./postcss.config.js";
+
+const __dirname = import.meta.url.replace("vite.config.js", "").replace("file://", "");
const dependencies = Object.keys(pkg.dependencies);
const devDependencies = Object.keys(pkg.devDependencies);
export default defineConfig({
+ css: {
+ postcss,
+ },
build: {
+ emptyOutDir: true,
outDir: "build",
lib: {
- entry: path.resolve(__dirname, "src/index.js"),
+ entry: __dirname + "src/index.js",
name: "XolaUIKit",
},
rollupOptions: {
// Make sure none of the dependencies are bundled.
external: [...dependencies, ...devDependencies],
+ output: {
+ // Provide global variables to use in the UMD build for externalized deps
+ globals: {
+ "@headlessui/react": "@headlessui/react",
+ "@tippyjs/react": "@tippyjs/react",
+ "get-user-locale": "get-user-locale",
+ "google-libphonenumber": "google-libphonenumber",
+ "nouislider-react": "nouislider-react",
+ "prop-types": "prop-types",
+ "react-day-picker": "react-day-picker",
+ "react-dom": "react-dom",
+ "react-hot-toast": "react-hot-toast",
+ "react-hotkeys-hook": "react-hotkeys-hook",
+ "react-select": "react-select",
+ "tailwind-merge": "tailwindMerge",
+ "tippy.js": "tippy.js",
+ clsx: "clsx",
+ dayjs: "dayjs",
+ downshift: "downshift",
+ lodash: "lodash",
+ react: "React",
+ },
+ plugins: [
+ copy({
+ hook: "writeBundle",
+ targets: [
+ { src: "tailwind.config.mjs", dest: "build" },
+ { src: "postcss.config.js", dest: "build" },
+ { src: "postcss.config.mjs", dest: "build" },
+ ],
+ }),
+ ],
+ },
},
},
});
| | | |