Upgrade Storybook

Co-authored-by: Scott Nonnenberg <scott@signal.org>

ts/components/stickers/StickerButton.stories.tsx

@@ -1,11 +1,9 @@
 // Copyright 2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import type { DecoratorFunction } from '@storybook/addons';
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
-import { boolean } from '@storybook/addon-knobs';
-
+import type { Meta } from '@storybook/react';
 import { setupI18n } from '../../util/setupI18n';
 import enMessages from '../../../_locales/en/messages.json';
 import type { Props } from './StickerButton';
@@ -16,7 +14,7 @@ import {
   sticker2,
   tallSticker,
   wideSticker,
-} from './StickerPicker.stories';
+} from './mocks';
 
 const i18n = setupI18n('en', enMessages);
 
@@ -36,8 +34,27 @@ export default {
         {storyFn()}
       </div>
     ),
-  ] as Array<DecoratorFunction<JSX.Element>>,
-};
+  ],
+  argTypes: {
+    showIntroduction: { control: { type: 'boolean' } },
+    showPickerHint: { control: { type: 'boolean' } },
+  },
+  args: {
+    blessedPacks: [],
+    clearInstalledStickerPack: action('clearInstalledStickerPack'),
+    clearShowIntroduction: action('clearShowIntroduction'),
+    clearShowPickerHint: action('clearShowPickerHint'),
+    i18n,
+    installedPacks: [],
+    knownPacks: [],
+    onClickAddPack: action('onClickAddPack'),
+    onPickSticker: action('onPickSticker'),
+    receivedPacks: [],
+    recentStickers: [],
+    showIntroduction: false,
+    showPickerHint: false,
+  },
+} satisfies Meta<Props>;
 
 const receivedPacks = [
   createPack({ id: 'received-pack-1', status: 'downloaded' }, sticker1),
@@ -65,100 +82,61 @@ const knownPacks = [
   createPack({ id: 'known-pack-2', status: 'known' }, sticker2),
 ];
 
-const createProps = (overrideProps: Partial<Props> = {}): Props => ({
-  blessedPacks: overrideProps.blessedPacks || [],
-  clearInstalledStickerPack: action('clearInstalledStickerPack'),
-  clearShowIntroduction: action('clearShowIntroduction'),
-  clearShowPickerHint: action('clearShowPickerHint'),
-  i18n,
-  installedPack: overrideProps.installedPack,
-  installedPacks: overrideProps.installedPacks || [],
-  knownPacks: overrideProps.knownPacks || [],
-  onClickAddPack: action('onClickAddPack'),
-  onPickSticker: action('onPickSticker'),
-  receivedPacks: overrideProps.receivedPacks || [],
-  recentStickers: [],
-  showIntroduction: boolean(
-    'showIntroduction',
-    overrideProps.showIntroduction || false
-  ),
-  showPickerHint: boolean('showPickerHint', false),
-});
-
-export function OnlyInstalled(): JSX.Element {
-  const props = createProps({ installedPacks });
-
-  return <StickerButton {...props} />;
+export function OnlyInstalled(args: Props): JSX.Element {
+  return <StickerButton {...args} installedPacks={installedPacks} />;
 }
 
-export function OnlyReceived(): JSX.Element {
-  const props = createProps({ receivedPacks });
-
-  return <StickerButton {...props} />;
+export function OnlyReceived(args: Props): JSX.Element {
+  return <StickerButton {...args} receivedPacks={receivedPacks} />;
 }
 
-export function OnlyKnown(): JSX.Element {
-  const props = createProps({ knownPacks });
-
-  return <StickerButton {...props} />;
+export function OnlyKnown(args: Props): JSX.Element {
+  return <StickerButton {...args} knownPacks={knownPacks} />;
 }
 
-export function OnlyBlessed(): JSX.Element {
-  const props = createProps({ blessedPacks });
-
-  return <StickerButton {...props} />;
+export function OnlyBlessed(args: Props): JSX.Element {
+  return <StickerButton {...args} blessedPacks={blessedPacks} />;
 }
 
-export function NoPacks(): JSX.Element {
-  const props = createProps();
-
-  return <StickerButton {...props} />;
+export function NoPacks(args: Props): JSX.Element {
+  return <StickerButton {...args} />;
 }
 
-export function InstalledPackTooltip(): JSX.Element {
-  const props = createProps({
-    installedPacks,
-    installedPack: installedPacks[0],
-  });
-
-  return <StickerButton {...props} />;
+export function InstalledPackTooltip(args: Props): JSX.Element {
+  return (
+    <StickerButton
+      {...args}
+      installedPacks={installedPacks}
+      installedPack={installedPacks[0]}
+    />
+  );
 }
 
-export function InstalledPackTooltipWide(): JSX.Element {
+export function InstalledPackTooltipWide(args: Props): JSX.Element {
   const installedPack = createPack({ id: 'installed-pack-wide' }, wideSticker);
 
-  const props = createProps({
-    installedPacks: [installedPack],
-    installedPack,
-  });
-
-  return <StickerButton {...props} />;
+  return (
+    <StickerButton
+      {...args}
+      installedPacks={[installedPack]}
+      installedPack={installedPack}
+    />
+  );
 }
 
-InstalledPackTooltipWide.story = {
-  name: 'Installed Pack Tooltip (Wide)',
-};
-
-export function InstalledPackTooltipTall(): JSX.Element {
+export function InstalledPackTooltipTall(args: Props): JSX.Element {
   const installedPack = createPack({ id: 'installed-pack-tall' }, tallSticker);
-
-  const props = createProps({
-    installedPacks: [installedPack],
-    installedPack,
-  });
-
-  return <StickerButton {...props} />;
+  return (
+    <StickerButton
+      {...args}
+      installedPacks={[installedPack]}
+      installedPack={installedPack}
+    />
+  );
 }
 
-InstalledPackTooltipTall.story = {
-  name: 'Installed Pack Tooltip (Tall)',
-};
-
-export function NewInstallTooltip(): JSX.Element {
-  const props = createProps({
-    installedPacks,
-    showIntroduction: true,
-  });
-
-  return <StickerButton {...props} />;
+export function NewInstallTooltip(args: Props): JSX.Element {
+  return (
+    <StickerButton {...args} installedPacks={installedPacks} showIntroduction />
+  );
 }