docs: Wrap stories with OrganizationContainer (#66323)

<img width="687" alt="SCR-20240305-ihne"
src="https://github.com/getsentry/sentry/assets/187460/e15745d8-ea24-4ce6-a2ec-858a6c50d1b8">

static/app/utils/useOrganization.stories.tsx

@@ -0,0 +1,16 @@
+import ObjectInspector from 'sentry/components/objectInspector';
+import StructuredEventData from 'sentry/components/structuredEventData';
+import storyBook from 'sentry/stories/storyBook';
+import useOrganization from 'sentry/utils/useOrganization';
+
+export default storyBook('useOrganization', story => {
+  story('useOrganization - via ObjectInspector', () => {
+    const org = useOrganization();
+    return <ObjectInspector data={org} expandLevel={3} />;
+  });
+
+  story('useOrganization - via StructuredEventData', () => {
+    const org = useOrganization();
+    return <StructuredEventData data={org} />;
+  });
+});

static/app/views/stories/index.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 
 import Input from 'sentry/components/input';
 import {space} from 'sentry/styles/space';
+import OrganizationContainer from 'sentry/views/organizationContainer';
 import EmptyStory from 'sentry/views/stories/emptyStory';
 import ErrorStory from 'sentry/views/stories/errorStory';
 import storiesContext from 'sentry/views/stories/storiesContext';
@@ -20,43 +21,45 @@ export default function Stories({location}: Props) {
   const [searchTerm, setSearchTerm] = useState('');
 
   return (
-    <Layout>
-      <div
-        style={{
-          gridArea: 'aside',
-          display: 'flex',
-          gap: `${space(2)}`,
-          flexDirection: 'column',
-        }}
-      >
-        <Input
-          placeholder="Search files by name"
-          onChange={e => setSearchTerm(e.target.value.toLowerCase())}
-        />
-        <Sidebar>
-          <StoryTree
-            files={storiesContext()
-              .files()
-              .filter(s => s.toLowerCase().includes(searchTerm))}
+    <OrganizationContainer>
+      <Layout>
+        <div
+          style={{
+            gridArea: 'aside',
+            display: 'flex',
+            gap: `${space(2)}`,
+            flexDirection: 'column',
+          }}
+        >
+          <Input
+            placeholder="Search files by name"
+            onChange={e => setSearchTerm(e.target.value.toLowerCase())}
           />
-        </Sidebar>
-      </div>
-      <StoryHeader style={{gridArea: 'head'}} />
+          <Sidebar>
+            <StoryTree
+              files={storiesContext()
+                .files()
+                .filter(s => s.toLowerCase().includes(searchTerm))}
+            />
+          </Sidebar>
+        </div>
+        <StoryHeader style={{gridArea: 'head'}} />
 
-      {story.error ? (
-        <VerticalScroll style={{gridArea: 'body'}}>
-          <ErrorStory error={story.error} />
-        </VerticalScroll>
-      ) : story.resolved ? (
-        <Main style={{gridArea: 'body'}}>
-          <StoryFile filename={story.filename} resolved={story.resolved} />
-        </Main>
-      ) : (
-        <VerticalScroll style={{gridArea: 'body'}}>
-          <EmptyStory />
-        </VerticalScroll>
-      )}
-    </Layout>
+        {story.error ? (
+          <VerticalScroll style={{gridArea: 'body'}}>
+            <ErrorStory error={story.error} />
+          </VerticalScroll>
+        ) : story.resolved ? (
+          <Main style={{gridArea: 'body'}}>
+            <StoryFile filename={story.filename} resolved={story.resolved} />
+          </Main>
+        ) : (
+          <VerticalScroll style={{gridArea: 'body'}}>
+            <EmptyStory />
+          </VerticalScroll>
+        )}
+      </Layout>
+    </OrganizationContainer>
   );
 }