S2 chromatic table (#7098)

snowystinger · web-flow · commit 766a5f04c644 · 2024-09-26T21:23:29.000Z
* S2 chromatic table

* fix cardview chromatic stories
diff --git a/packages/@react-spectrum/s2/chromatic/Card.stories.tsx b/packages/@react-spectrum/s2/chromatic/Card.stories.tsx
@@ -10,41 +10,19 @@
  * governing permissions and limitations under the License.
  */
 
-import {ActionMenu, AssetCard, Avatar, Badge, Button, Card, CardPreview, CardProps, CollectionCardPreview, Content, Divider, Footer, Image, MenuItem, Meter, ProductCard, Skeleton, StatusLight, Text, UserCard} from '../src';
+import {ActionMenu, AssetCard, Avatar, Badge, Button, Card, CardPreview, CardProps, CollectionCardPreview, Content, Divider, Footer, Image, MenuItem, Meter, ProductCard, StatusLight, Text, UserCard} from '../src';
 import Folder from '../s2wf-icons/S2_Icon_Folder_20_N.svg';
 import FolderGradient from 'illustration:../spectrum-illustrations/gradient/S2_fill_folderClose_generic2_160.svg';
 import type {Meta} from '@storybook/react';
 import Project from '../s2wf-icons/S2_Icon_Project_20_N.svg';
 import Select from '../s2wf-icons/S2_Icon_Select_20_N.svg';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 
-const meta: Meta<CardProps & {isLoading?: boolean}> = {
+const meta: Meta<CardProps> = {
   component: Card,
   parameters: {
-    layout: 'centered'
+    chromaticProvider: {disableAnimations: true}
   },
-  args: {
-    isLoading: false
-  },
-  argTypes: {
-    href: {table: {disable: true}},
-    download: {table: {disable: true}},
-    hrefLang: {table: {disable: true}},
-    referrerPolicy: {table: {disable: true}},
-    rel: {table: {disable: true}},
-    routerOptions: {table: {disable: true}},
-    ping: {table: {disable: true}},
-    target: {table: {disable: true}},
-    value: {table: {disable: true}},
-    textValue: {table: {disable: true}},
-    onAction: {table: {disable: true}},
-    isDisabled: {table: {disable: true}}
-  },
-  decorators: (children, {args}) => (
-    <Skeleton isLoading={args.isLoading || false}>
-      {children(args)}
-    </Skeleton>
-  ),
   title: 'S2 Chromatic/Card'
 };
 
@@ -162,7 +140,7 @@ export const Product = (args: any) => (
           slot="preview"
           src={new URL('assets/preview.png', import.meta.url).toString()} />
       </CardPreview>
-      <Image 
+      <Image
         slot="thumbnail"
         src={new URL('assets/placeholder.png', import.meta.url).toString()} />
       <Content>
@@ -260,14 +238,14 @@ export const Custom = (args: any) => (
   <div style={{display: 'flex', gap: 16, flexWrap: 'wrap', alignItems: 'end', justifyContent: 'center'}}>
     <Card {...args}>
       <CardPreview>
-        <Image 
+        <Image
           alt=""
           src="https://images.unsplash.com/photo-1671225137978-aa9a19071b9a?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
       </CardPreview>
       <Content>
         <div className={style({display: 'flex', alignItems: 'center', justifyContent: 'space-between'})}>
           <div className={style({display: 'flex', alignItems: 'center', gap: 4})}>
-            <Select /> 
+            <Select />
             <Text slot="description">Click through rate</Text>
           </div>
           <div className={style({display: 'flex', flexDirection: 'column'})}>
@@ -279,7 +257,7 @@ export const Custom = (args: any) => (
     </Card>
     <Card {...args}>
       <CardPreview>
-        <Image 
+        <Image
           alt=""
           src="https://images.unsplash.com/photo-1460306855393-0410f61241c7?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
       </CardPreview>
diff --git a/packages/@react-spectrum/s2/chromatic/CardView.stories.tsx b/packages/@react-spectrum/s2/chromatic/CardView.stories.tsx
@@ -10,13 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {ActionMenu, Avatar, Card, CardPreview, CardView, CardViewProps, Collection, CollectionCardPreview, Content, Heading, IllustratedMessage, Image, MenuItem, SkeletonCollection, Text} from '../src';
+import {CardView, CardViewProps, Content, Heading, IllustratedMessage} from '../src';
 import EmptyIcon from 'illustration:../spectrum-illustrations/gradient/S2_fill_image_generic1_160.svg';
-import ErrorIcon from '../spectrum-illustrations/linear/AlertNotice';
-import Folder from '../s2wf-icons/S2_Icon_Folder_20_N.svg';
 import type {Meta} from '@storybook/react';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
-import {useAsyncList} from 'react-stately';
 
 const meta: Meta<typeof CardView> = {
   component: CardView,
@@ -44,120 +41,6 @@ const cardViewStyles = style({
   }
 });
 
-type Item = {
-  id: number,
-  user: {
-    name: string,
-    profile_image: { small: string }
-  },
-  urls: { regular: string },
-  description: string,
-  alt_description: string,
-  width: number,
-  height: number
-};
-
-const avatarSize = {
-  XS: 16,
-  S: 20,
-  M: 24,
-  L: 28,
-  XL: 32
-} as const;
-
-function PhotoCard({item, layout}: {item: Item, layout: string}) {
-  return (
-    <Card id={item.id} textValue={item.description || item.alt_description}>
-      {({size}) => (<>
-        <CardPreview>
-          <Image
-            src={item.urls.regular}
-            styles={style({
-              width: 'full',
-              pointerEvents: 'none'
-            })}
-            // TODO - should we have a safe `dynamicStyles` or something for this?
-            UNSAFE_style={{
-              aspectRatio: layout === 'waterfall' ? `${item.width} / ${item.height}` : '4/3',
-              objectFit: layout === 'waterfall' ? 'contain' : 'cover'
-            }}
-            renderError={() => (
-              <div className={style({display: 'flex', alignItems: 'center', justifyContent: 'center', size: 'full'})}>
-                <ErrorIcon size="S" />
-              </div>
-            )} />
-        </CardPreview>
-        <Content>
-          <Text slot="title">{item.description || item.alt_description}</Text>
-          {size !== 'XS' && <ActionMenu>
-            <MenuItem>Test</MenuItem>
-          </ActionMenu>}
-          <div className={style({display: 'flex', alignItems: 'center', gap: 8, gridArea: 'description'})}>
-            <Avatar src={item.user.profile_image.small} size={avatarSize[size]} />
-            <Text slot="description">{item.user.name}</Text>
-          </div>
-        </Content>
-      </>)}
-    </Card>
-  );
-}
-
-export const Example = (args: CardViewProps<any>, {viewMode}) => {
-  let list = useAsyncList<Item, number | null>({
-    async load({signal, cursor, items}) {
-      let page = cursor || 1;
-      let res = await fetch(
-        `https://api.unsplash.com/topics/nature/photos?page=${page}&per_page=30&client_id=AJuU-FPh11hn7RuumUllp4ppT8kgiLS7LtOHp_sp4nc`,
-        {signal}
-      );
-      let nextItems = await res.json();
-      // Filter duplicates which might be returned by the API.
-      let existingKeys = new Set(items.map(i => i.id));
-      nextItems = nextItems.filter(i => !existingKeys.has(i.id) && (i.description || i.alt_description));
-      return {items: nextItems, cursor: nextItems.length ? page + 1 : null};
-    }
-  });
-
-  let loadingState = args.loadingState === 'idle' ? list.loadingState : args.loadingState;
-  let items = loadingState === 'loading' ? [] : list.items;
-
-  return (
-    <CardView
-      aria-label="Nature photos"
-      {...args}
-      loadingState={loadingState}
-      onLoadMore={args.loadingState === 'idle' ? list.loadMore : undefined}
-      styles={cardViewStyles({viewMode})}>
-      <Collection items={items} dependencies={[args.layout]}>
-        {item => <PhotoCard item={item} layout={args.layout || 'grid'} />}
-      </Collection>
-      {(loadingState === 'loading' || loadingState === 'loadingMore') && (
-        <SkeletonCollection>
-          {() => (
-            <PhotoCard
-              item={{
-                id: Math.random(),
-                user: {name: 'Devon Govett', profile_image: {small: ''}},
-                urls: {regular: ''},
-                description: 'This is a fake description. Kinda long so it wraps to a new line.',
-                alt_description: '',
-                width: 400,
-                height: 200 + Math.max(0, Math.round(Math.random() * 400))
-              }}
-              layout={args.layout || 'grid'} />
-          )}
-        </SkeletonCollection>
-      )}
-    </CardView>
-  );
-};
-
-Example.args = {
-  loadingState: 'idle',
-  onAction: null,
-  selectionMode: 'multiple'
-};
-
 export const Empty = (args: CardViewProps<any>, {viewMode}) => {
   return (
     <CardView
@@ -175,84 +58,3 @@ export const Empty = (args: CardViewProps<any>, {viewMode}) => {
     </CardView>
   );
 };
-
-interface Topic {
-  id: string,
-  title: string,
-  total_photos: number,
-  links: {html: string},
-  preview_photos: {id: string, urls: {small: string}}[]
-}
-
-function TopicCard({topic}: {topic: Topic}) {
-  return (
-    <Card href={topic.links.html} target="_blank" textValue={topic.title}>
-      <CollectionCardPreview>
-        {topic.preview_photos.slice(0, 4).map(photo => (
-          <Image key={photo.id} alt="" src={photo.urls.small} />
-        ))}
-      </CollectionCardPreview>
-      <Content>
-        <Text slot="title">{topic.title}</Text>
-        <div className={style({display: 'flex', alignItems: 'center', gap: 8})}>
-          <Folder />
-          <Text slot="description">{topic.total_photos.toLocaleString()} photos</Text>
-        </div>
-      </Content>
-    </Card>
-  );
-}
-
-export const CollectionCards = (args: CardViewProps<any>, {viewMode}) => {
-  let list = useAsyncList<Topic, number | null>({
-    async load({signal, cursor}) {
-      let page = cursor || 1;
-      let res = await fetch(
-        `https://api.unsplash.com/topics?page=${page}&per_page=30&client_id=AJuU-FPh11hn7RuumUllp4ppT8kgiLS7LtOHp_sp4nc`,
-        {signal}
-      );
-      let items = (await res.json()).filter((topic: Topic) => !!topic.preview_photos);
-      return {items, cursor: items.length ? page + 1 : null};
-    }
-  });
-
-  let loadingState = args.loadingState === 'idle' ? list.loadingState : args.loadingState;
-  let items = loadingState === 'loading' ? [] : list.items;
-
-  return (
-    <CardView
-      aria-label="Topics"
-      {...args}
-      loadingState={loadingState}
-      onLoadMore={args.loadingState === 'idle' ? list.loadMore : undefined}
-      styles={cardViewStyles({viewMode})}>
-      <Collection items={items}>
-        {topic => <TopicCard topic={topic} />}
-      </Collection>
-      {(loadingState === 'loading' || loadingState === 'loadingMore') && (
-        <SkeletonCollection>
-          {() => (
-            <TopicCard
-              topic={{
-                id: Math.random().toString(36),
-                title: 'Topic title',
-                total_photos: 80,
-                links: {html: ''},
-                preview_photos: [
-                  {id: 'a', urls: {small: ''}},
-                  {id: 'b', urls: {small: ''}},
-                  {id: 'c', urls: {small: ''}},
-                  {id: 'd', urls: {small: ''}}
-                ]
-              }} />
-          )}
-        </SkeletonCollection>
-      )}
-    </CardView>
-  );
-};
-
-CollectionCards.args = {
-  loadingState: 'idle',
-  onAction: null
-};
diff --git a/packages/@react-spectrum/s2/chromatic/Table.stories.tsx b/packages/@react-spectrum/s2/chromatic/Table.stories.tsx
