{
- return (
-
- );
- },
- },
- ]}
- />
-
-
-
-
- );
-};
diff --git a/storybook/src/docs/components/EditDialog/stories/FormInEditDialog.stories.tsx b/storybook/src/docs/components/EditDialog/stories/FormInEditDialog.stories.tsx
deleted file mode 100644
index ddcff61866..0000000000
--- a/storybook/src/docs/components/EditDialog/stories/FormInEditDialog.stories.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Field, FinalForm, FinalFormSelect, useEditDialog } from "@comet/admin";
-import { Button, MenuItem } from "@mui/material";
-import * as React from "react";
-
-import { editDialogDecorator } from "../editDialog.decorator";
-
-export default {
- title: "stories/components/EditDialog/Form in EditDialog",
- decorators: [editDialogDecorator()],
-};
-
-export const EditDialogAndFormStates = {
- render: () => {
- const [EditDialog, , editDialogApi] = useEditDialog();
-
- return (
- <>
- Loading and Error State of EditDialog:
-
-
- {
- return new Promise((resolve, reject) => {
- setTimeout(() => {
- if (desiredOutcome === "success") {
- resolve();
- } else {
- reject("This is an Error Message");
- }
- }, 3000);
- });
- }}
- initialValues={{
- desiredOutcome: "success",
- }}
- >
-
- {(props) => (
-
-
-
-
- )}
-
-
-
-
- );
- },
-
- name: "Edit Dialog and Form States",
-};
diff --git a/storybook/src/docs/components/EditDialog/stories/useEditDialog.stories.tsx b/storybook/src/docs/components/EditDialog/stories/useEditDialog.stories.tsx
deleted file mode 100644
index 39f77eac74..0000000000
--- a/storybook/src/docs/components/EditDialog/stories/useEditDialog.stories.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Field, FinalForm, FinalFormInput, useEditDialog } from "@comet/admin";
-import { Button } from "@mui/material";
-import * as React from "react";
-
-import { editDialogDecorator } from "../editDialog.decorator";
-
-export default {
- title: "stories/components/EditDialog/useEditDialog",
- decorators: [editDialogDecorator()],
-};
-
-export const UseEditDialog = {
- render: () => {
- const [EditDialog, , editDialogApi] = useEditDialog();
-
- return (
- <>
- useEditDialog Variant:
-
-
- {
- window.alert(`Name: ${name}`);
- }}
- >
-
-
-
-
- );
- },
-
- name: "useEditDialog",
-};
diff --git a/storybook/src/docs/components/EditDialog/stories/useEditDialogApi.stories.tsx b/storybook/src/docs/components/EditDialog/stories/useEditDialogApi.stories.tsx
deleted file mode 100644
index b89a80eb4b..0000000000
--- a/storybook/src/docs/components/EditDialog/stories/useEditDialogApi.stories.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { EditDialogApiContext, Field, FinalForm, FinalFormInput, useEditDialog, useEditDialogApi } from "@comet/admin";
-import { Button } from "@mui/material";
-import * as React from "react";
-
-import { editDialogDecorator } from "../editDialog.decorator";
-
-export default {
- title: "stories/components/EditDialog/useEditDialogApi",
- decorators: [editDialogDecorator()],
-};
-
-export const UseEditDialogApi = {
- render: () => {
- const ChildComponentWithOpenButton: React.VoidFunctionComponent = () => {
- const editDialogApi = useEditDialogApi();
-
- return (
-
- );
- };
-
- const [EditDialog, , editDialogApi] = useEditDialog();
-
- return (
-
-
-
- {
- window.alert(`Name: ${name}`);
- }}
- >
-
-
-
-
- );
- },
-
- name: "useEditDialogApi",
-};
diff --git a/storybook/src/docs/components/ErrorHandling/ErrorBoundaries.stories.mdx b/storybook/src/docs/components/ErrorHandling/ErrorBoundaries.mdx
similarity index 100%
rename from storybook/src/docs/components/ErrorHandling/ErrorBoundaries.stories.mdx
rename to storybook/src/docs/components/ErrorHandling/ErrorBoundaries.mdx
diff --git a/storybook/src/docs/components/ErrorHandling/ErrorDialog/ErrorDialog.stories.mdx b/storybook/src/docs/components/ErrorHandling/ErrorDialog/ErrorDialog.mdx
similarity index 80%
rename from storybook/src/docs/components/ErrorHandling/ErrorDialog/ErrorDialog.stories.mdx
rename to storybook/src/docs/components/ErrorHandling/ErrorDialog/ErrorDialog.mdx
index 2fed1aa6ef..7910dd1eb0 100644
--- a/storybook/src/docs/components/ErrorHandling/ErrorDialog/ErrorDialog.stories.mdx
+++ b/storybook/src/docs/components/ErrorHandling/ErrorDialog/ErrorDialog.mdx
@@ -1,6 +1,8 @@
import { Meta, Canvas, Story } from "@storybook/addon-docs";
-
+import * as ErrorDialogStories from "./ErrorDialog.stories";
+
+
# Error Dialog
@@ -49,11 +51,11 @@ return new ApolloClient({
Error Dialog can be used to display an error in a dialog. Try it out by simply pressing the Button below. You can also use the errorDialog with the `useErrorDialog` Hook
### Automatic Error Dialog on GraphQL Error
diff --git a/storybook/src/docs/components/ErrorHandling/ErrorDialog/stories/AutomaticGraphqlErrorDialog.stories.tsx b/storybook/src/docs/components/ErrorHandling/ErrorDialog/ErrorDialog.stories.tsx
similarity index 62%
rename from storybook/src/docs/components/ErrorHandling/ErrorDialog/stories/AutomaticGraphqlErrorDialog.stories.tsx
rename to storybook/src/docs/components/ErrorHandling/ErrorDialog/ErrorDialog.stories.tsx
index 43d52a9360..71b51ba764 100644
--- a/storybook/src/docs/components/ErrorHandling/ErrorDialog/stories/AutomaticGraphqlErrorDialog.stories.tsx
+++ b/storybook/src/docs/components/ErrorHandling/ErrorDialog/ErrorDialog.stories.tsx
@@ -1,16 +1,42 @@
-import { useQuery } from "@apollo/client";
+import { gql, useQuery } from "@apollo/client";
+import { useErrorDialog } from "@comet/admin";
import { Button, Typography } from "@mui/material";
-import gql from "graphql-tag";
import * as React from "react";
-import { apolloSwapiStoryDecorator } from "../../../../../apollo-story.decorator";
-import { errorDialogStoryProviderDecorator } from "../error-dialog-provider.decorator";
+import { apolloSwapiStoryDecorator } from "../../../../apollo-story.decorator";
+import { errorDialogStoryProviderDecorator } from "./error-dialog-provider.decorator";
export default {
- title: "stories/components/Error Handling/Error Dialog/Automatic Graphql Error Dialog",
+ title: "Docs/Components/Error Handling/Error Dialog",
decorators: [apolloSwapiStoryDecorator(), errorDialogStoryProviderDecorator()],
};
+export const ManualErrorDialog = {
+ render: () => {
+ const Story = () => {
+ const errorDialog = useErrorDialog();
+ return (
+
+
+
+ );
+ };
+ return ;
+ },
+};
+
export const AutomaticErrorOnGraphqlError = {
render: () => {
const Story = () => {
@@ -56,6 +82,5 @@ export const AutomaticErrorOnGraphqlError = {
};
return ;
},
-
name: "Automatic Error on Graphql Error",
};
diff --git a/storybook/src/docs/components/ErrorHandling/ErrorDialog/stories/ManualErrorDialog.stories.tsx b/storybook/src/docs/components/ErrorHandling/ErrorDialog/stories/ManualErrorDialog.stories.tsx
deleted file mode 100644
index 6cae3dabec..0000000000
--- a/storybook/src/docs/components/ErrorHandling/ErrorDialog/stories/ManualErrorDialog.stories.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useErrorDialog } from "@comet/admin";
-import { Button } from "@mui/material";
-import * as React from "react";
-
-import { apolloSwapiStoryDecorator } from "../../../../../apollo-story.decorator";
-import { errorDialogStoryProviderDecorator } from "../error-dialog-provider.decorator";
-
-export default {
- title: "stories/components/Error Handling/Error Dialog/Automatic Graphql Error Dialog",
- decorators: [apolloSwapiStoryDecorator(), errorDialogStoryProviderDecorator()],
-};
-
-export const ManualErrorDialog = () => {
- const Story = () => {
- const errorDialog = useErrorDialog();
- return (
-
-
-
- );
- };
- return ;
-};
diff --git a/storybook/src/docs/components/FileDropzone/FileDropzone.stories.mdx b/storybook/src/docs/components/FileDropzone/FileDropzone.mdx
similarity index 72%
rename from storybook/src/docs/components/FileDropzone/FileDropzone.stories.mdx
rename to storybook/src/docs/components/FileDropzone/FileDropzone.mdx
index 1d2d27949f..653037520e 100644
--- a/storybook/src/docs/components/FileDropzone/FileDropzone.stories.mdx
+++ b/storybook/src/docs/components/FileDropzone/FileDropzone.mdx
@@ -1,6 +1,8 @@
import { Meta, Canvas, Story } from "@storybook/addon-docs";
-
+import * as FileDropzoneStories from "./FileDropzone.stories";
+
+
# FileDropzone
@@ -13,11 +15,11 @@ A wrapper around [react-dropzone](https://www.npmjs.com/package/react-dropzone)
- Use the `hideDroppableArea` and `hideButton` props to hide the droppable area and button, respectively.
### Example of disabled and error states
diff --git a/storybook/src/docs/components/FileDropzone/FileDropzone.stories.tsx b/storybook/src/docs/components/FileDropzone/FileDropzone.stories.tsx
index b8593006b2..f2634e7d81 100644
--- a/storybook/src/docs/components/FileDropzone/FileDropzone.stories.tsx
+++ b/storybook/src/docs/components/FileDropzone/FileDropzone.stories.tsx
@@ -4,8 +4,7 @@ import { Meta } from "@storybook/react";
import * as React from "react";
export default {
- title: "stories/components/FileDropzone",
-
+ title: "Docs/Components/FileDropzone",
decorators: [
(story) => (
@@ -19,14 +18,16 @@ export default {
],
} as Meta;
-export const Default = () => {
- return (
- {
- // Handle what happens with the dropped files
- }}
- />
- );
+export const Default = {
+ render: () => {
+ return (
+ {
+ // Handle what happens with the dropped files
+ }}
+ />
+ );
+ },
};
export const DisabledAndErrorStates = {
@@ -48,6 +49,5 @@ export const DisabledAndErrorStates = {
);
},
-
name: "Disabled and error states",
};
diff --git a/storybook/src/docs/components/FileSelect/FileSelect.stories.mdx b/storybook/src/docs/components/FileSelect/FileSelect.mdx
similarity index 80%
rename from storybook/src/docs/components/FileSelect/FileSelect.stories.mdx
rename to storybook/src/docs/components/FileSelect/FileSelect.mdx
index fd52d87c0a..591820d36c 100644
--- a/storybook/src/docs/components/FileSelect/FileSelect.stories.mdx
+++ b/storybook/src/docs/components/FileSelect/FileSelect.mdx
@@ -1,7 +1,9 @@
import { Meta, Canvas, Story } from "@storybook/addon-docs";
import { components } from "@storybook/components";
-
+import * as FileSelectStories from "./FileSelect.stories";
+
+
# FileSelect
@@ -16,17 +18,17 @@ Used to combine `FileDropzone` and `FileSelectListItem` to handle the user's sel
- Limit the amount of files and the size of the individual files with the `maxFiles` and `maxFileSize` props.
### ReadOnly FileSelect
### ReadOnly FileSelect (Grid with preview)
diff --git a/storybook/src/docs/components/FileSelect/FileSelect.stories.tsx b/storybook/src/docs/components/FileSelect/FileSelect.stories.tsx
index 9e6cb912d4..5d9eb5bbf9 100644
--- a/storybook/src/docs/components/FileSelect/FileSelect.stories.tsx
+++ b/storybook/src/docs/components/FileSelect/FileSelect.stories.tsx
@@ -4,8 +4,7 @@ import { Meta } from "@storybook/react";
import * as React from "react";
export default {
- title: "stories/components/FileSelect",
-
+ title: "Docs/Components/FileSelect",
decorators: [
(story) => (
@@ -15,7 +14,7 @@ export default {
],
} as Meta;
-export const _FileSelect = {
+export const Basic = {
render: () => {
const value: FileSelectItem[] = [
{
@@ -54,11 +53,10 @@ export const _FileSelect = {
/>
);
},
-
name: "FileSelect",
};
-export const ReadOnlyFileSelect = {
+export const Readonly = {
render: () => {
const value: FileSelectItem[] = [
{
@@ -81,7 +79,6 @@ export const ReadOnlyFileSelect = {
/>
);
},
-
name: "ReadOnly FileSelect",
};
@@ -125,6 +122,5 @@ export const GridWithPreview = {
/>
);
},
-
name: "Grid with preview",
};
diff --git a/storybook/src/docs/components/FileSelectListItem/FileSelectListItem.stories.mdx b/storybook/src/docs/components/FileSelectListItem/FileSelectListItem.mdx
similarity index 82%
rename from storybook/src/docs/components/FileSelectListItem/FileSelectListItem.stories.mdx
rename to storybook/src/docs/components/FileSelectListItem/FileSelectListItem.mdx
index aedebbc7b3..686f2a6be6 100644
--- a/storybook/src/docs/components/FileSelectListItem/FileSelectListItem.stories.mdx
+++ b/storybook/src/docs/components/FileSelectListItem/FileSelectListItem.mdx
@@ -1,6 +1,8 @@
import { Meta, Canvas, Story } from "@storybook/addon-docs";
-
+import * as FileSelectListItemStories from "./FileSelectListItem.stories";
+
+
# FileSelectListItem
@@ -17,11 +19,11 @@ Used to display a list of files, including loading, skeleton, and error states a
- Set the `filePreview` prop to `true` or pass in a image url to display the item as a card with a preview.
### File preview card
diff --git a/storybook/src/docs/components/FileSelectListItem/FileSelectListItem.stories.tsx b/storybook/src/docs/components/FileSelectListItem/FileSelectListItem.stories.tsx
index fa7ea91e96..882afc6fdf 100644
--- a/storybook/src/docs/components/FileSelectListItem/FileSelectListItem.stories.tsx
+++ b/storybook/src/docs/components/FileSelectListItem/FileSelectListItem.stories.tsx
@@ -4,8 +4,7 @@ import { Meta } from "@storybook/react";
import * as React from "react";
export default {
- title: "stories/components/FileSelectListItem",
-
+ title: "Docs/Components/FileSelectListItem",
decorators: [
(story) => (
@@ -15,7 +14,7 @@ export default {
],
} as Meta;
-export const _FileSelectListItem = {
+export const Basic = {
render: () => {
return (
<>
@@ -77,66 +76,68 @@ export const _FileSelectListItem = {
name: "FileSelectListItem",
};
-export const Preview = () => {
- return (
-
-
- {
- // Handle download
- }}
- onClickDelete={() => {
- // Handle delete
- }}
- filePreview
- />
- {
- // Handle download
- }}
- onClickDelete={() => {
- // Handle delete
- }}
- filePreview="https://picsum.photos/528/528"
- />
-
-
- {
- // Handle delete
- }}
- filePreview
- />
-
- );
+export const Preview = {
+ render: () => {
+ return (
+
+
+ {
+ // Handle download
+ }}
+ onClickDelete={() => {
+ // Handle delete
+ }}
+ filePreview
+ />
+ {
+ // Handle download
+ }}
+ onClickDelete={() => {
+ // Handle delete
+ }}
+ filePreview="https://picsum.photos/528/528"
+ />
+
+
+ {
+ // Handle delete
+ }}
+ filePreview
+ />
+
+ );
+ },
};