docs: Add Loading and TextArea to playgrounds

ntucker · ntucker · commit 47ad1734ecc2 · 2024-09-16T14:38:19.000-04:00
diff --git a/docs/core/api/useDLE.md b/docs/core/api/useDLE.md
@@ -50,7 +50,7 @@ import { ProfileResource } from './ProfileResource';
 function ProfileList(): JSX.Element {
   const { data, loading, error } = useDLE(ProfileResource.getList);
   if (error) return <div>Error {`${error.status}`}</div>;
-  if (loading || !data) return <>loading...</>;
+  if (loading || !data) return <Loading/>;
   return (
     <div>
       {data.map(profile => (
@@ -165,7 +165,7 @@ function ProfileDetail(): JSX.Element {
     error,
   } = useDLE(ProfileResource.get, { id: 1 });
   if (error) return <div>Error {`${error.status}`}</div>;
-  if (loading || !profile) return <>loading...</>;
+  if (loading || !profile) return <Loading/>;
   return (
     <div className="listItem">
       <Avatar src={profile.avatar} />
@@ -230,7 +230,7 @@ import { PostResource, UserResource } from './Resources';
 export default function PostWithAuthor({ id }: { id: string }) {
   const postDLE = useDLE(PostResource.get, { id });
   if (postDLE.error) return <div>Error {`${postDLE.error.status}`}</div>;
-  if (postDLE.loading || !postDLE.data) return <>loading...</>;
+  if (postDLE.loading || !postDLE.data) return <Loading/>;
   const authorDLE = useDLE(
     UserResource.get,
     postDLE.data.userId
@@ -240,7 +240,7 @@ export default function PostWithAuthor({ id }: { id: string }) {
       : null,
   );
   if (authorDLE.error) return <div>Error {`${authorDLE.error.status}`}</div>;
-  if (authorDLE.loading || !authorDLE.data) return <>loading...</>;
+  if (authorDLE.loading || !authorDLE.data) return <Loading/>;
 
   return <div>{authorDLE.data.username}</div>
 }
@@ -281,7 +281,7 @@ import { getPosts } from './api/Post';
 export default function ArticleList({ page }: { page: string }) {
   const { data, loading, error } = useDLE(getPosts, { page });
   if (error) return <div>Error {`${error.status}`}</div>;
-  if (loading || !data) return <>loading...</>;
+  if (loading || !data) return <Loading/>;
   const { results: posts, nextPage, lastPage } = data;
   return (
     <div>
diff --git a/docs/core/getting-started/data-dependency.md b/docs/core/getting-started/data-dependency.md
@@ -252,7 +252,7 @@ import { ProfileResource } from './ProfileResource';
 function ProfileList(): JSX.Element {
   const { data, loading, error } = useDLE(ProfileResource.getList);
   if (error) return <div>Error {`${error.status}`}</div>;
-  if (loading || !data) return <>loading...</>;
+  if (loading || !data) return <Loading/>;
   return (
     <div>
       {data.map(profile => (
diff --git a/docs/core/shared/_useLoading.mdx b/docs/core/shared/_useLoading.mdx
@@ -1,5 +1,8 @@
 import HooksPlayground from '@site/src/components/HooksPlayground';
-import { postFixtures,getInitialInterceptorData } from '@site/src/fixtures/posts';
+import {
+  postFixtures,
+  getInitialInterceptorData,
+} from '@site/src/fixtures/posts';
 
 <HooksPlayground fixtures={postFixtures} getInitialInterceptorData={getInitialInterceptorData} row>
 
@@ -54,18 +57,18 @@ export default function PostForm({ onSubmit, loading, error }) {
   };
   return (
     <form onSubmit={handleSubmit}>
-      <TextInput label="Title" name="title" defaultValue="My New Post"
-          required />
-      <label>
-        Body:
-        <br />
-        <textarea name="body" rows={12} required>
-          After clicking 'save', the button will be disabled until
-          the POST is completed. Upon completion the newly created
-          post is displayed immediately as Reactive Data Client is
-          able to use the fetch response to populate the store.
-        </textarea>
-      </label>
+      <TextInput
+        label="Title"
+        name="title"
+        defaultValue="My New Post"
+        required
+      />
+      <TextArea name="body" rows={12} label="Body" required>
+        After clicking 'save', the button will be disabled until the POST
+        is completed. Upon completion the newly created post is displayed
+        immediately as Reactive Data Client is able to use the fetch
+        response to populate the store.
+      </TextArea>
       {error ? (
         <div className="alert alert--danger">{error.message}</div>
       ) : null}
@@ -93,8 +96,9 @@ export default function PostCreate({ navigateToPost }) {
     },
     [ctrl],
   );
-  return <PostForm onSubmit={handleSubmit} loading={loading}
-    error={error} />;
+  return (
+    <PostForm onSubmit={handleSubmit} loading={loading} error={error} />
+  );
 }
 ```
 
@@ -119,4 +123,4 @@ function Navigation() {
 render(<Navigation />);
 ```
 
-</HooksPlayground>
+</HooksPlayground>
diff --git a/docs/rest/api/Collection.md b/docs/rest/api/Collection.md
@@ -121,7 +121,7 @@ export default function NewTodo({ userId }: { userId?: string }) {
   };
 
   return (
-    <div>
+    <div className="listItem nogap">
       <TextInput size="small" onKeyDown={handlePress} />
       <label>
         <input
diff --git a/website/src/components/Demo/code/profile-edit/graphql/PostList.tsx b/website/src/components/Demo/code/profile-edit/graphql/PostList.tsx
@@ -8,7 +8,6 @@ function PostList() {
   return (
     <div>
       <ProfileEdit id={userId} />
-      <br />
       {posts.map(post => (
         <PostItem key={post.pk()} post={post} />
       ))}
diff --git a/website/src/components/Demo/code/profile-edit/rest/PostList.tsx b/website/src/components/Demo/code/profile-edit/rest/PostList.tsx
@@ -8,7 +8,6 @@ function PostList() {
   return (
     <div>
       <ProfileEdit id={userId} />
-      <br />
       {posts.map(post => (
         <PostItem key={post.pk()} post={post} />
       ))}
diff --git a/website/src/components/Playground/DesignSystem/Loading.module.css b/website/src/components/Playground/DesignSystem/Loading.module.css
@@ -0,0 +1,11 @@
+.loading {
+  display:flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.loading img {
+  width:50px;
+  height:50px;
+}
diff --git a/website/src/components/Playground/DesignSystem/Loading.tsx b/website/src/components/Playground/DesignSystem/Loading.tsx
@@ -0,0 +1,12 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+import styles from './Loading.module.css';
+
+export function Loading() {
+  const loadingUrl = useBaseUrl('img/loading-logo.svg');
+  return (
+    <div className={styles.loading}>
+      <img src={loadingUrl} />
+    </div>
+  );
+}
diff --git a/website/src/components/Playground/DesignSystem/TextArea.tsx b/website/src/components/Playground/DesignSystem/TextArea.tsx
@@ -0,0 +1,18 @@
+import classnames from 'clsx';
+import React, { type InputHTMLAttributes } from 'react';
+
+export function TextArea({
+  label,
+  ...props
+}: InputHTMLAttributes<HTMLTextAreaElement> & {
+  label?: React.ReactNode;
+}) {
+  return (
+    <div className="rt-TextAreaRoot">
+      <textarea className="rt-TextAreaInput" {...props} />
+      <label className="rt-TextFieldLabel" htmlFor={props.name}>
+        {label}
+      </label>
+    </div>
+  );
+}
diff --git a/website/src/components/Playground/DesignSystem/design-system.css b/website/src/components/Playground/DesignSystem/design-system.css
@@ -15,8 +15,10 @@ html[data-theme='dark'] .playground-preview {
   border: 1px solid var(--ifm-color-emphasis-400);
   border-radius: 4px;
   position: relative;
+  margin-bottom:1ex;
 }
 html[data-theme='dark'] .rt-TextFieldRoot,
+html[data-theme='dark'] .rt-TextAreaRoot,
 html[data-theme='dark'] .small.rt-TextFieldRoot:hover,
 html[data-theme='dark'] .small.rt-TextFieldRoot:focus-within {
   background-color: var(--ifm-color-emphasis-100);
@@ -75,8 +77,7 @@ html[data-theme='dark'] .small.rt-TextFieldRoot:focus-within {
 }
 
 /* Focus state for the text field */
-.rt-TextFieldInput:focus + .rt-TextFieldLabel,
-.rt-TextFieldInput:not(:placeholder-shown) + .rt-TextFieldLabel {
+.rt-TextFieldInput:focus + .rt-TextFieldLabel {
   color: var(--ifm-color-formfield-active);
 }
 
@@ -108,6 +109,7 @@ html[data-theme='dark'] .small.rt-TextFieldRoot:focus-within {
   box-sizing: border-box;              /* Include padding and border in element's size */
   transition: all 0.2s ease-in-out;    /* Quick animation for transitions */
   border-radius: 0;
+  margin-bottom:0;
 }
 html[data-theme='dark'] .small.rt-TextFieldRoot {
   background: none;
@@ -124,4 +126,44 @@ html[data-theme='dark'] .small.rt-TextFieldRoot {
 
 .listItem .rt-TextFieldRoot {
   width: calc(100% - 21px);
-}
+}
+
+
+
+
+/* Root container for the textarea */
+.rt-TextAreaRoot {
+  position: relative;
+  width: 100%;
+  background-color: var(--ifm-color-emphasis-0);
+  border: 1px solid var(--ifm-color-emphasis-400);
+  border-radius: 4px;
+  padding-bottom:-5px;
+  /* overflow: hidden; */
+  margin: 1.5ex 0 .5ex;
+}
+
+/* The textarea element inside the component */
+.rt-TextAreaInput {
+  padding: 0.5em;
+  width: 100%;
+  border: none;
+  outline: none;
+  font-size: 14px;
+  color: var(--ifm-color-content);
+  background: transparent;
+  resize: vertical; /* Allow vertical resizing */
+  min-height: 4em; /* Set a minimum height */
+  box-sizing: border-box;
+  margin-bottom: -8px;
+}
+
+
+/* Focus state for the textarea */
+.rt-TextAreaInput:focus + .rt-TextFieldLabel {
+  color: var(--ifm-color-formfield-active);
+}
+
+.rt-TextAreaRoot:focus-within {
+  border-color: var(--ifm-color-formfield-active);
+}
diff --git a/website/src/components/Playground/DesignSystem/index.ts b/website/src/components/Playground/DesignSystem/index.ts
@@ -4,4 +4,6 @@ export { Avatar } from './Avatar';
 export { Formatted } from './Formatted';
 import './design-system.css';
 export { TextInput } from './TextInput';
+export { TextArea } from './TextArea';
 export { SearchIcon } from './SearchIcon';
+export { Loading } from './Loading';
diff --git a/website/src/components/Playground/PreviewBlock.tsx b/website/src/components/Playground/PreviewBlock.tsx
@@ -1,19 +1,19 @@
+import useBaseUrl from '@docusaurus/useBaseUrl';
 import React from 'react';
 import { LiveError, LivePreview } from 'react-live';
 
 import Boundary from './Boundary';
+import { Loading } from './DesignSystem/Loading';
 import styles from './styles.module.css';
 
 export default function PreviewBlock() {
   return (
     <>
-      <Boundary fallback={<LivePreviewLoader />}>
+      <Boundary fallback={<Loading />}>
         <LivePreview />
       </Boundary>
+      {/* <Loading /> */}
       <LiveError className={styles.playgroundError} />
     </>
   );
 }
-function LivePreviewLoader() {
-  return <div>Loading...</div>;
-}
diff --git a/website/src/components/Playground/monaco-init.ts b/website/src/components/Playground/monaco-init.ts
@@ -267,7 +267,9 @@ if (
         declare function Formatted({ downColor, formatter, formatterFn, timeout, transition, transitionLength, upColor, value, stylePrefix, }: NumberProps):JSX.Element
         declare function ResetableErrorBoundary(props: { children: React.ReactNode }):JSX.Element;
         declare function TextInput(props:Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & { label?: React.ReactNode; loading?: boolean; size?: 'large' | 'medium' | 'small'; }):JSX.Element;
+        declare function TextArea(props:InputHTMLAttributes<HTMLTextAreaElement> & { label?: React.ReactNode;}):JSX.Element;
         declare function SearchIcon():JSX.Element;
+        declare function Loading():JSX.Element;
         declare function randomFloatInRange(min: number, max: number, decimals?: number): number;
         declare interface NumberProps {
           /**
diff --git a/website/static/img/loading-logo.svg b/website/static/img/loading-logo.svg
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="128 224 744 611" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
+  <style type="text/css">
+    .st0 { fill: #3E96DB; }
+
+    /* Fade-in animation for the entire SVG */
+    svg {
+      animation: fadeIn 2s ease-in-out forwards;
+      opacity: 0;
+    }
+
+    /* Bounce animation for the circles */
+    @keyframes bounce {
+      0%, 100% {
+        transform: translateY(0);
+      }
+      50% {
+        transform: translateY(-30px);
+      }
+    }
+
+    /* Fade-in animation */
+    @keyframes fadeIn {
+      to {
+        opacity: 1;
+      }
+    }
+
+    /* Apply bounce animation with different delays */
+    .circle-1 {
+      animation: bounce 2s infinite ease-in-out;
+      transform-origin: center;
+    }
+
+    .circle-2 {
+      animation: bounce 2s infinite ease-in-out 0.5s;
+      transform-origin: center;
+    }
+
+    .circle-3 {
+      animation: bounce 2s infinite ease-in-out 1s;
+      transform-origin: center;
+    }
+  </style>
+
+  <g>
+    <path class="st0" d="M624.91,603.39c-65.19,163.18-200.95,262.34-303.24,221.47c-5.56-2.22-10.89-4.8-16.01-7.74
+      c93.63,23.35,205.58-55.38,257.33-184.93c55-137.67,21.15-280.6-75.58-319.25c-57.31-22.89-123.84-4.06-179.97,43.73
+      c71.08-101.69,170.8-154.49,250.29-122.74C660.02,274.8,690.1,440.21,624.91,603.39z"/>
+    <path class="st0" d="M447.15,736.08c-202.22-64.83-342.49-191.2-313.3-282.24c1.59-4.95,3.64-9.67,6.14-14.2
+      c-10.31,83.84,101.8,187.93,262.34,239.4c170.61,54.7,331.29,29.24,358.89-56.86c16.35-51.01-17.66-111.86-83.57-164.35
+      c131.53,67.95,211.18,160.04,188.49,230.79C836.96,779.66,649.37,800.91,447.15,736.08z"/>
+    <path class="st0" d="M286.25,539.88C396.78,459.25,515.81,434.24,552.11,484c1.97,2.7,3.65,5.57,5.06,8.59
+      c-39.72-37.2-136.46-18.38-224.21,45.63c-93.25,68.02-141.01,161.32-106.68,208.37c20.34,27.88,64.92,33.28,117.27,18.91
+      c-85.31,42.65-163.48,49.14-191.68,10.47C115.56,726.21,175.73,620.51,286.25,539.88z"/>
+    
+    <!-- Animated circles with bounce effect -->
+    <circle class="st0 circle-1" cx="438.64" cy="583.87" r="35.29"/>
+    <circle class="st0 circle-2" cx="232.95" cy="458.41" r="35.29"/>
+    <circle class="st0 circle-3" cx="752.98" cy="386.6" r="35.29"/>
+  </g>
+</svg>
