ref(storybook) add useUser story (#83263)

Render the serialized user JSON value

---------

Co-authored-by: Nate Moore <[email protected]>
Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>

Author: 3 people

static/app/utils/useOrganization.stories.tsx

@@ -1,10 +1,32 @@
+import {Fragment} from 'react';
+
 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 StructuredEventData', () => {
+  story('Default', () => {
     const org = useOrganization();
-    return <StructuredEventData data={org} />;
+
+    // Sort features and access alphabetically for the story use case
+    org.features.sort((a, b) => a.localeCompare(b));
+    org.access.sort((a, b) => a.localeCompare(b));
+
+    return (
+      <Fragment>
+        <p>
+          <code>useOrganization</code> returns the currently selected organization.
+        </p>
+        In the context of the Sentry dashboard, only a single organization can be selected
+        at a time.
+        <p>
+          A common need to use <code>useOrganization</code> is to check for feature flags
+          via <code>organization.features.includes(feature)</code>. Note that our feature
+          names are currently not typed, so you need to make sure you pass in the correct
+          feature name.
+        </p>
+        <StructuredEventData data={org} />
+      </Fragment>
+    );
   });
 });

static/app/utils/useUser.stories.tsx

@@ -0,0 +1,21 @@
+import {Fragment} from 'react';
+
+import StructuredEventData from 'sentry/components/structuredEventData';
+import storyBook from 'sentry/stories/storyBook';
+
+import {useUser} from './useUser';
+
+export default storyBook('useUser', story => {
+  story('useUser', () => {
+    const user = useUser();
+
+    return (
+      <Fragment>
+        <p>
+          <code>useUser</code> returns the currently logged in user.
+        </p>
+        <StructuredEventData data={user} />
+      </Fragment>
+    );
+  });
+});