docs: ✏️ add examples and docs for UX components

ArrayKnight · Oct 15, 2020 · 5694488 · 5694488
1 parent 879754c
commit 5694488
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -118,6 +118,18 @@ You can find parameters document as [HeadlessParameters](https://github.com/Arra
 
 Due to the way a `DocumentNode` is converted to JSON, to maintain the original source query use the `pack` utility method.
 
+#### [Components](https://storybook-addon-headless.netlify.com/?path=/story/components--page)
+
+To help provide a better user experience, there are Prompt and Loader helper components provided.
+
+These components are entirely optional, but will help to direct users to the Headless tab if necessary and provide feedback about the state of active API requests.
+
+You can find basic usage in the [examples](https://github.com/ArrayKnight/storybook-addon-headless/tree/master/src/examples).
+
+**Experimental** _(read: untested)_:
+
+There are also two methods for those of you not using React, but wanting to use these helper components. `useHeadlessPrompt` and `useHeadlessLoader` will render the React components as standalone apps, but you must provide an HTML element reference that has been rendered and mounted by your framework of choice.
+
 ### Produced @ [GenUI](https://www.genui.com/)
 
 This addon was developed while I was employed at GenUI, a software product development firm in Seattle, WA, USA. Interested in knowing more, starting a new project or working with us? Come check us out at [https://www.genui.com/](https://www.genui.com/)
diff --git a/src/examples/graphql.stories.tsx b/src/examples/graphql.stories.tsx
@@ -94,21 +94,23 @@ export const Artworks = (
         data,
     }: HeadlessStoryContext<{ Artworks?: { artworks?: ArtworkProps[] } }>,
 ): ReactElement | null => {
-    if (status?.Artworks === FetchStatus.Loading) {
-        return <Loader />
-    }
+    switch (status?.Artworks) {
+        case FetchStatus.Inactive:
+        case FetchStatus.Rejected:
+            return <Prompt />
 
-    if (Array.isArray(data?.Artworks?.artworks)) {
-        return (
-            <>
-                {data.Artworks.artworks.map((artwork, index) => (
-                    <ArtworkCard key={index} {...artwork} />
-                ))}
-            </>
-        )
-    }
+        case FetchStatus.Loading:
+            return <Loader />
 
-    return null
+        default:
+            return Array.isArray(data?.Artworks?.artworks) ? (
+                <>
+                    {data.Artworks.artworks.map((artwork, index) => (
+                        <ArtworkCard key={index} {...artwork} />
+                    ))}
+                </>
+            ) : null
+    }
 }
 
 export const Shows = (
@@ -122,23 +124,21 @@ export const Shows = (
         }
     }>,
 ): ReactElement | null => {
-    if (status?.Shows === FetchStatus.Inactive) {
-        return <Prompt />
-    }
+    switch (status?.Shows) {
+        case FetchStatus.Inactive:
+        case FetchStatus.Rejected:
+            return <Prompt />
 
-    if (status?.Shows === FetchStatus.Loading) {
-        return <Loader />
-    }
+        case FetchStatus.Loading:
+            return <Loader />
 
-    if (Array.isArray(data?.Shows?.partner_shows)) {
-        return (
-            <>
-                {data.Shows.partner_shows.map((show, index) => (
-                    <ShowCard key={index} {...show} />
-                ))}
-            </>
-        )
+        default:
+            return Array.isArray(data?.Shows?.partner_shows) ? (
+                <>
+                    {data.Shows.partner_shows.map((show, index) => (
+                        <ShowCard key={index} {...show} />
+                    ))}
+                </>
+            ) : null
     }
-
-    return null
 }
diff --git a/src/examples/restful.stories.tsx b/src/examples/restful.stories.tsx
@@ -43,21 +43,23 @@ export const Users = (
     args: Args,
     { status, data }: HeadlessStoryContext<{ Users?: UserProps[] }>,
 ): ReactElement | null => {
-    if (status?.Users === FetchStatus.Loading) {
-        return <Loader />
-    }
+    switch (status?.Users) {
+        case FetchStatus.Inactive:
+        case FetchStatus.Rejected:
+            return <Prompt />
 
-    if (Array.isArray(data?.Users)) {
-        return (
-            <>
-                {data.Users.map((user) => (
-                    <UserCard key={user.id} {...user} />
-                ))}
-            </>
-        )
-    }
+        case FetchStatus.Loading:
+            return <Loader />
 
-    return null
+        default:
+            return Array.isArray(data?.Users) ? (
+                <>
+                    {data.Users.map((user) => (
+                        <UserCard key={user.id} {...user} />
+                    ))}
+                </>
+            ) : null
+    }
 }
 
 export const User = (
@@ -67,17 +69,15 @@ export const User = (
         data,
     }: HeadlessStoryContext<{ Users?: UserProps[]; User?: UserProps }>,
 ): ReactElement | null => {
-    if (status?.User === FetchStatus.Inactive) {
-        return <Prompt />
-    }
+    switch (status?.User) {
+        case FetchStatus.Inactive:
+        case FetchStatus.Rejected:
+            return <Prompt />
 
-    if (status?.User === FetchStatus.Loading) {
-        return <Loader />
-    }
+        case FetchStatus.Loading:
+            return <Loader />
 
-    if (data?.User) {
-        return <UserCard {...data.User} />
+        default:
+            return data?.User ? <UserCard {...data.User} /> : null
     }
-
-    return null
 }