fix lint, multiple copies of storybook, paths

Author: snowystinger

.storybook-s2/docs/Icons.jsx

@@ -1,4 +1,4 @@
-import icons from '@react-spectrum/s2/s2wf-icons/*.svg';
+import icons from '../../packages/@react-spectrum/s2/s2wf-icons/*.svg';
 import { style } from '../../packages/@react-spectrum/s2/style/spectrum-theme' with {type: 'macro'};
 import {ActionButton, Text} from '@react-spectrum/s2';
 import {H2, H3, P, Code, Pre, Link} from './typography';

.storybook-s2/main.ts

@@ -31,6 +31,9 @@ const config: StorybookConfig = {
   framework: {
     name: "storybook-react-parcel",
     options: {},
+  },
+  core: {
+    disableWhatsNewNotifications: true
   }
   // typescript: {
   //   reactDocgen: 'react-docgen-typescript',

.storybook/main.js

@@ -26,5 +26,9 @@ module.exports = {
   framework: {
     name: "storybook-react-parcel",
     options: {},
+  },
+
+  core: {
+    disableWhatsNewNotifications: true
   }
 };

packages/@react-spectrum/actionbar/stories/ActionBar.stories.tsx

@@ -12,8 +12,8 @@
 
 import {action} from '@storybook/addon-actions';
 import {ActionBar} from '../src';
-import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {Example} from './Example';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {useViewportSize} from '@react-aria/utils';
 
@@ -37,9 +37,9 @@ export default {
       options: ['show', 'hide', 'collapse']
     }
   }
-} as ComponentMeta<typeof ActionBar>;
+} as Meta<typeof ActionBar>;
 
-export type ActionBarStory = ComponentStoryObj<any>;
+export type ActionBarStory = StoryObj<any>;
 
 export const Default: ActionBarStory = {
   render: (args) => <Example {...args} />,

packages/@react-spectrum/actiongroup/stories/ActionGroup.stories.tsx

@@ -14,7 +14,6 @@ import {action} from '@storybook/addon-actions';
 import {ActionGroup} from '../';
 import BookIcon from '@spectrum-icons/workflow/Book';
 import Brush from '@spectrum-icons/workflow/Brush';
-import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import CopyIcon from '@spectrum-icons/workflow/Copy';
 import DeleteIcon from '@spectrum-icons/workflow/Delete';
 import DocumentIcon from '@spectrum-icons/workflow/Document';
@@ -24,6 +23,7 @@ import {Flex} from '@react-spectrum/layout';
 import Heal from '@spectrum-icons/workflow/Heal';
 import InfoIcon from '@spectrum-icons/workflow/Info';
 import {Item} from '@react-stately/collections';
+import {Meta, StoryObj} from '@storybook/react';
 import MoveIcon from '@spectrum-icons/workflow/MoveTo';
 import PropertiesIcon from '@spectrum-icons/workflow/Properties';
 import React from 'react';
@@ -126,9 +126,9 @@ export default {
       options: ['show', 'hide', 'collapse']
     }
   }
-} as ComponentMeta<typeof ActionGroup>;
+} as Meta<typeof ActionGroup>;
 
-export type ActionGroupStory = ComponentStoryObj<typeof ActionGroup>;
+export type ActionGroupStory = StoryObj<typeof ActionGroup>;
 
 export const Default: ActionGroupStory = {
   args: {items: viewItems},

packages/@react-spectrum/actiongroup/stories/Toolbar.stories.tsx

@@ -13,13 +13,13 @@
 import {ActionGroup} from '../';
 import {AriaLabelingProps, Orientation} from '@react-types/shared';
 import {classNames, SlotProvider, useSlotProps} from '@react-spectrum/utils';
-import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import CopyIcon from '@spectrum-icons/workflow/Copy';
 import DeleteIcon from '@spectrum-icons/workflow/Delete';
 import {Divider} from '@react-spectrum/divider';
 import DrawIcon from '@spectrum-icons/workflow/Draw';
 import InfoIcon from '@spectrum-icons/workflow/Info';
 import {Item} from '@react-stately/collections';
+import {Meta, StoryObj} from '@storybook/react';
 import PropertiesIcon from '@spectrum-icons/workflow/Properties';
 import {Toolbar as RACToolbar} from 'react-aria-components';
 import React, {ForwardedRef, forwardRef, ReactElement, ReactNode, useMemo} from 'react';
@@ -83,9 +83,9 @@ export default {
     }
   },
   excludeStories: ['Toolbar']
-} as ComponentMeta<typeof Toolbar>;
+} as Meta<typeof Toolbar>;
 
-export type ToolbarStory = ComponentStoryObj<typeof Toolbar>;
+export type ToolbarStory = StoryObj<typeof Toolbar>;
 
 let items1 = [
   {id: 'edit', textValue: 'Edit', icon: DrawIcon},

packages/@react-spectrum/autocomplete/stories/SearchAutocomplete.stories.tsx

@@ -13,17 +13,17 @@
 
 import {action} from '@storybook/addon-actions';
 import {Avatar} from '@react-spectrum/avatar';
-import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import Filter from '@spectrum-icons/workflow/Filter';
 import {Flex} from '@react-spectrum/layout';
 import {Item, SearchAutocomplete} from '@react-spectrum/autocomplete';
 import {mergeProps} from '@react-aria/utils';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {Text} from '@react-spectrum/text';
 import {useAsyncList} from '@react-stately/data';
 
 
-type SearchAutocompleteStory = ComponentStoryObj<typeof SearchAutocomplete>;
+type SearchAutocompleteStory = StoryObj<typeof SearchAutocomplete>;
 
 export default {
   title: 'SearchAutocomplete',
@@ -184,7 +184,7 @@ export default {
       }
     }
   }
-} as ComponentMeta<typeof SearchAutocomplete>;
+} as Meta<typeof SearchAutocomplete>;
 
 let items = [
   {id: 1, name: 'Aerospace'},

packages/@react-spectrum/badge/chromatic-fc/Badge.stories.tsx

@@ -11,19 +11,19 @@
  */
 
 import {Badge} from '..';
-import {BadgeStory, renderVariants} from '../chromatic/Badge.stories';
-import CheckmarkCircle from '@spectrum-icons/workflow/src/CheckmarkCircle';
-import {ComponentMeta} from '@storybook/react';
+import {BadgeStory, RenderVariants} from '../chromatic/Badge.stories';
+import CheckmarkCircle from '@spectrum-icons/workflow/CheckmarkCircle';
+import {Meta} from '@storybook/react';
 import React from 'react';
 import {Text} from '@react-spectrum/text';
 
 export default {
   title: 'Badge',
   component: Badge
-} as ComponentMeta<typeof Badge>;
+} as Meta<typeof Badge>;
 
 export const TextIcon: BadgeStory = {
   name: 'Text & icon',
   args: {children: <><Text>Badge text</Text><CheckmarkCircle /></>},
-  render: renderVariants
+  render: (args) => <RenderVariants {...args} />
 };

packages/@react-spectrum/badge/chromatic/Badge.stories.tsx

@@ -11,50 +11,50 @@
  */
 
 import {Badge} from '../';
-import CheckmarkCircle from '@spectrum-icons/workflow/src/CheckmarkCircle';
-import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
+import CheckmarkCircle from '@spectrum-icons/workflow/CheckmarkCircle';
 import {Flex} from '@react-spectrum/layout';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {SpectrumBadgeProps} from '@react-types/badge';
 import {Text} from '@react-spectrum/text';
 
 let variants: SpectrumBadgeProps['variant'][] =
   ['positive', 'info', 'negative', 'neutral', 'yellow', 'fuchsia', 'indigo', 'seafoam', 'magenta', 'purple'];
 
-export type BadgeStory = ComponentStoryObj<typeof Badge>;
+export type BadgeStory = StoryObj<typeof Badge>;
 
 export default {
   title: 'Badge',
   component: Badge,
   excludeStories: ['renderVariants']
-} as ComponentMeta<typeof Badge>;
+} as Meta<typeof Badge>;
 
-export const renderVariants = (args) => (
+export const RenderVariants = (args) => (
   <Flex wrap gap={8}>
-    {variants.map((variant) => <Badge {...args} variant={variant} />)}
+    {variants.map((variant) => <Badge key={variant} {...args} variant={variant} />)}
   </Flex>
 );
 
 export const TextOnly: BadgeStory = {
   args: {children: 'Badge text'},
-  render: renderVariants
+  render: (args) => <RenderVariants {...args} />
 };
 
 export const IconOnly: BadgeStory = {
   args: {children: <CheckmarkCircle />},
-  render: renderVariants
+  render: (args) => <RenderVariants {...args} />
 };
 
 export const IconText: BadgeStory = {
   name: 'Icon & text',
   args: {children: <><CheckmarkCircle /><Text>Badge text</Text></>},
-  render: renderVariants
+  render: (args) => <RenderVariants {...args} />
 };
 
 export const TextIcon: BadgeStory = {
   name: 'Text & icon',
   args: {children: <><Text>Badge text</Text><CheckmarkCircle /></>},
-  render: renderVariants
+  render: (args) => <RenderVariants {...args} />
 };
 
 export const Overflow: BadgeStory = {

packages/@react-spectrum/badge/stories/Badge.stories.tsx

@@ -12,11 +12,11 @@
 
 import {Badge} from '../';
 import CheckmarkCircle from '@spectrum-icons/workflow/CheckmarkCircle';
-import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 import {Text} from '@react-spectrum/text';
 
-type BadgeStory = ComponentStoryObj<typeof Badge>;
+type BadgeStory = StoryObj<typeof Badge>;
 
 export default {
   title: 'Badge',
@@ -29,7 +29,7 @@ export default {
       }
     }
   }
-} as ComponentMeta<typeof Badge>;
+} as Meta<typeof Badge>;
 
 export const Default: BadgeStory = {
   args: {children: 'Licensed', variant: 'positive'},