ref(keyvaluedata): Change names and exports for better autocomplete (#72939)

Adds an explicit export to help with autocomplete (from [a separate code
review](#72874 (comment))),
and changes `Group` -> `Container` since the former has a meaning at
Sentry.

Author: leeandher

static/app/components/events/contexts/contextCard.tsx

@@ -8,8 +8,12 @@ import {
   getContextTitle,
   getFormattedContextData,
 } from 'sentry/components/events/contexts/utils';
-import * as KeyValueData from 'sentry/components/keyValueData/card';
-import type {Event, Group, KeyValueListDataItem, Project} from 'sentry/types';
+import KeyValueData, {
+  type KeyValueDataContentProps,
+} from 'sentry/components/keyValueData';
+import type {Event} from 'sentry/types/event';
+import type {Group, KeyValueListDataItem} from 'sentry/types/group';
+import type {Project} from 'sentry/types/project';
 import {isEmptyObject} from 'sentry/utils/object/isEmptyObject';
 import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
@@ -90,9 +94,9 @@ export default function ContextCard({
     location,
   });
 
-  const contentItems = contextItems.map<KeyValueData.ContentProps>(item => {
-    const itemMeta: KeyValueData.ContentProps['meta'] = meta?.[item?.key];
-    const itemErrors: KeyValueData.ContentProps['errors'] = itemMeta?.['']?.err ?? [];
+  const contentItems = contextItems.map<KeyValueDataContentProps>(item => {
+    const itemMeta: KeyValueDataContentProps['meta'] = meta?.[item?.key];
+    const itemErrors: KeyValueDataContentProps['errors'] = itemMeta?.['']?.err ?? [];
     return {
       item,
       meta: itemMeta,

static/app/components/events/contexts/contextDataSection.tsx

@@ -3,10 +3,12 @@ import {getOrderedContextItems} from 'sentry/components/events/contexts';
 import ContextCard from 'sentry/components/events/contexts/contextCard';
 import {CONTEXT_DOCS_LINK} from 'sentry/components/events/contexts/utils';
 import {EventDataSection} from 'sentry/components/events/eventDataSection';
-import * as KeyValueData from 'sentry/components/keyValueData/card';
+import KeyValueData from 'sentry/components/keyValueData';
 import ExternalLink from 'sentry/components/links/externalLink';
 import {t, tct} from 'sentry/locale';
-import type {Event, Group, Project} from 'sentry/types';
+import type {Event} from 'sentry/types/event';
+import type {Group} from 'sentry/types/group';
+import type {Project} from 'sentry/types/project';
 
 interface ContextDataSectionProps {
   event: Event;
@@ -47,7 +49,7 @@ export default function ContextDataSection({
       isHelpHoverable
     >
       <ErrorBoundary mini message={t('There was a problem loading event context.')}>
-        <KeyValueData.Group>{cards}</KeyValueData.Group>
+        <KeyValueData.Container>{cards}</KeyValueData.Container>
       </ErrorBoundary>
     </EventDataSection>
   );

static/app/components/keyValueData/card.stories.tsx renamed to static/app/components/keyValueData/index.stories.tsx

@@ -2,18 +2,18 @@ import {Fragment} from 'react';
 
 import Alert from 'sentry/components/alert';
 import {CodeSnippet} from 'sentry/components/codeSnippet';
-import * as KeyValueData from 'sentry/components/keyValueData/card';
+import KeyValueData, {
+  type KeyValueDataContentProps,
+} from 'sentry/components/keyValueData';
 import {IconCodecov, IconSentry, IconSettings} from 'sentry/icons';
 import storyBook from 'sentry/stories/storyBook';
 import theme from 'sentry/utils/theme';
 
 export default storyBook('KeyValueData', story => {
   story('Usage', () => (
-    <Fragment>
-      <CodeSnippet language="js">
-        import * as KeyValueData from 'sentry/components/keyValueData/card';
-      </CodeSnippet>
-    </Fragment>
+    <CodeSnippet language="js">
+      import KeyValueData from 'sentry/components/keyValueData';
+    </CodeSnippet>
   ));
   story('<KeyValueData.Content />', () => (
     <Fragment>
@@ -57,7 +57,7 @@ export default storyBook('KeyValueData', story => {
         Display a set of key-value data as a card. Creates structured data for lists/dicts
         and changes format based on value type. Any of the customization from{' '}
         <code>KeyValueData.Content</code> is available here, and display many of these
-        cards using <code>KeyValueData.Group</code>.
+        cards using <code>KeyValueData.Container</code>.
       </p>
       <h4>Props</h4>
       <ul>
@@ -76,7 +76,7 @@ export default storyBook('KeyValueData', story => {
           <code>subject</code>
         </li>
       </ul>
-      <KeyValueData.Group>
+      <KeyValueData.Container>
         <KeyValueData.Card
           title="Dataset Title"
           contentItems={contentItems.slice(0, 3)}
@@ -99,43 +99,45 @@ export default storyBook('KeyValueData', story => {
           contentItems={contentItems}
           truncateLength={4}
         />
-      </KeyValueData.Group>
+      </KeyValueData.Container>
     </Fragment>
   ));
 
-  story('<KeyValueData.Group />', () => (
+  story('<KeyValueData.Container />', () => (
     <Fragment>
       <p>
-        <code>{'<KeyValueData.Group/>'}</code> can be used in combination with{' '}
+        <code>{'<KeyValueData.Container/>'}</code> can be used in combination with{' '}
         <code>{'<KeyValueData.Card/>'}</code> components to create a 'masonry' style
         layout for space efficiency. They leverage the{' '}
         <code>useIssueDetailsColumnCount</code> hook to distribute cards into the
         available space evenly. They don't accept any props, and just require{' '}
         <code>children</code>.
       </p>
-      <CodeSnippet language="jsx">
-        {`<KeyValueData.Group>
+      <p>
+        <CodeSnippet language="jsx">
+          {`<KeyValueData.Container>
   <KeyValueData.Card ... />
   <KeyValueData.Card ... />
   <KeyValueData.Card ... />
-</KeyValueData.Group>`}
-      </CodeSnippet>
+</KeyValueData.Container>`}
+        </CodeSnippet>
+      </p>
       <p>
         It should be noted that the number of items per card, or content size is not
         factored in, and can lead to some inconsistencies.
       </p>
-      <KeyValueData.Group>
+      <KeyValueData.Container>
         <KeyValueData.Card contentItems={contentItems.slice(0, 2)} />
         <KeyValueData.Card contentItems={contentItems.slice(4, 6)} />
         <KeyValueData.Card contentItems={contentItems.slice(1, 6)} />
         <KeyValueData.Card contentItems={contentItems.slice(0, 8)} />
         <KeyValueData.Card contentItems={contentItems.slice(2, 5)} />
-      </KeyValueData.Group>
+      </KeyValueData.Container>
     </Fragment>
   ));
 });
 
-const contentItems: KeyValueData.ContentProps[] = [
+const contentItems: KeyValueDataContentProps[] = [
   {
     item: {
       key: 'string',

static/app/components/keyValueData/card.tsx renamed to static/app/components/keyValueData/index.tsx

@@ -13,7 +13,7 @@ import {space} from 'sentry/styles/space';
 import type {KeyValueListDataItem, MetaError} from 'sentry/types/group';
 import {defined} from 'sentry/utils';
 
-export interface ContentProps {
+export interface KeyValueDataContentProps {
   /**
    * Specifies the item to display.
    * - If set, item.subjectNode will override displaying item.subject.
@@ -46,7 +46,7 @@ export function Content({
   disableLink = false,
   disableFormattedData = false,
   ...props
-}: ContentProps) {
+}: KeyValueDataContentProps) {
   const {subject, subjectNode, value: contextValue, action = {}} = item;
 
   const hasErrors = errors.length > 0;
@@ -89,11 +89,11 @@ export function Content({
   );
 }
 
-export interface CardProps {
+export interface KeyValueDataCardProps {
   /**
    * ContentProps items to be rendered in this card.
    */
-  contentItems: ContentProps[];
+  contentItems: KeyValueDataContentProps[];
   /**
    *  Flag to enable alphabetical sorting by item subject. Uses given item ordering if false.
    */
@@ -113,7 +113,7 @@ export function Card({
   title,
   truncateLength = Infinity,
   sortAlphabetically = false,
-}: CardProps) {
+}: KeyValueDataCardProps) {
   const [isTruncated, setIsTruncated] = useState(contentItems.length > truncateLength);
 
   if (contentItems.length === 0) {
@@ -145,7 +145,7 @@ export function Card({
   );
 }
 
-type ReactFCWithProps = React.FC<CardProps>;
+type ReactFCWithProps = React.FC<KeyValueDataCardProps>;
 
 const isReactComponent = (type): type is ReactFCWithProps => {
   return (
@@ -175,7 +175,7 @@ const filterChildren = (children: ReactNode): ReactNode[] => {
 // Note: When rendered children have hooks, we need to ensure that there are no hook count mismatches between renders.
 // Instead of rendering rendering {condition ? <Component/> : null}, we should render
 // if(!condition) return null inside Component itself, where Component renders a Card.
-export function Group({children}: {children: React.ReactNode}) {
+export function Container({children}: {children: React.ReactNode}) {
   const containerRef = useRef<HTMLDivElement>(null);
   const columnCount = useIssueDetailsColumnCount(containerRef);
 
@@ -272,3 +272,11 @@ const CardColumn = styled('div')`
 const ValueLink = styled(Link)`
   text-decoration: ${p => p.theme.linkUnderline} underline dotted;
 `;
+
+export const KeyValueData = {
+  Content,
+  Card,
+  Container,
+};
+
+export default KeyValueData;

static/app/views/performance/newTraceDetails/traceDrawer/details/styles.tsx

@@ -9,7 +9,9 @@ import {DropdownMenu, type MenuItemProps} from 'sentry/components/dropdownMenu';
 import Tags from 'sentry/components/events/eventTagsAndScreenshot/tags';
 import {DataSection} from 'sentry/components/events/styles';
 import FileSize from 'sentry/components/fileSize';
-import * as KeyValueData from 'sentry/components/keyValueData/card';
+import KeyValueData, {
+  type KeyValueDataContentProps,
+} from 'sentry/components/keyValueData';
 import {LazyRender, type LazyRenderProps} from 'sentry/components/lazyRender';
 import Link from 'sentry/components/links/link';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
@@ -528,7 +530,7 @@ function SectionCard({
   items: SectionCardKeyValueList;
   title: React.ReactNode;
   disableTruncate?: boolean;
-  itemProps?: Partial<KeyValueData.ContentProps>;
+  itemProps?: Partial<KeyValueDataContentProps>;
   sortAlphabetically?: boolean;
 }) {
   const contentItems = items.map(item => ({item, ...itemProps}));
@@ -544,7 +546,7 @@ function SectionCard({
 }
 
 function SectionCardGroup({children}: {children: React.ReactNode}) {
-  return <KeyValueData.Group>{children}</KeyValueData.Group>;
+  return <KeyValueData.Container>{children}</KeyValueData.Container>;
 }
 
 function CopyableCardValueWithLink({