Merge pull request #24540 from halitiince/halitiince/docs_update_new_…

…react_ts_snippet

Docs: add new snippet to CodeSnippets paths

docs/snippets/react/document-screen-fetch-ts.mdx

@@ -0,0 +1,56 @@
+```ts
+// YourPage.tsx
+
+import React, { useState, useEffect } from 'react';
+
+import { PageLayout } from './PageLayout';
+import { DocumentHeader } from './DocumentHeader';
+import { DocumentList } from './DocumentList';
+
+// Example hook to retrieve data from an external endpoint
+function useFetchData() {
+  const [status, setStatus] = useState<string>('idle');
+  const [data, setData] = useState<any[]>([]);
+  useEffect(() => {
+    setStatus('loading');
+    fetch('https://your-restful-endpoint')
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error(res.statusText);
+        }
+        return res;
+      })
+      .then((res) => res.json())
+      .then((data) => {
+        setStatus('success');
+        setData(data);
+      })
+      .catch(() => {
+        setStatus('error');
+      });
+  }, []);
+
+  return {
+    status,
+    data,
+  };
+}
+
+export function DocumentScreen() {
+  const { status, data } = useFetchData();
+
+  const { user, document, subdocuments } = data;
+
+  if (status === 'loading') {
+    return <p>Loading...</p>;
+  }
+  if (status === 'error') {
+    return <p>There was an error fetching the data!</p>;
+  }
+  return (
+    <PageLayout user={user}>
+      <DocumentHeader document={document} />
+      <DocumentList documents={subdocuments} />
+    </PageLayout>
+  );
+}

docs/writing-stories/build-pages-with-storybook.md

@@ -141,6 +141,7 @@ If you're working with pure presentational screens, adding stories through [args
 <CodeSnippets
   paths={[
     'react/document-screen-fetch.js.mdx',
+    'react/document-screen-fetch.ts.mdx',
     'vue/document-screen-fetch.3.js.mdx',
     'vue/document-screen-fetch.3.ts.mdx',
     'angular/document-screen-fetch.ts.mdx',