Converting FxA Storybook from storiesOf to Meta.

README.md

fxa-payments-server

FILE	METHOD	CODE
src/components/AlertBar	storiesOf	import { storiesOf } from '@storybook/react'
src/components/AppLayout	storiesOf	import { storiesOf } from '@storybook/react'
src/components/CouponForm	storiesOf	import { storiesOf } from '@storybook/react'
src/components/DialogMessage	storiesOf	import { storiesOf } from '@storybook/react'
src/components/Header	storiesOf	import { storiesOf } from '@storybook/react'
src/components/LoadingOverlay	Meta	import { Meta } from '@storybook/react'
src/components/NewUserEmailForm	Meta	import { Meta } from '@storybook/react'
src/components/PayPalButton	Meta	import { Meta } from '@storybook/react'
src/components/PaymentConfirmation	Meta	import { Meta } from '@storybook/react'
src/components/PaymentConsentCheckbox	Meta	import { Meta } from '@storybook/react'
src/components/PaymentErrorView	Meta	import { Meta } from '@storybook/react'
src/components/PaymentForm	storiesOf	import { storiesOf } from '@storybook/react'
src/components/PaymentLegalBlurb	Meta	import { Meta } from '@storybook/react'
src/components/PaymentMethodHeader	Meta	import { Meta } from '@storybook/react'
src/components/PaymentProcessing	Meta	import { Meta } from '@storybook/react'
src/components/PlanDetails	Meta	import { Meta } from '@storybook/react'
src/components/PlanErrorDialog	Meta	import { Meta } from '@storybook/react'
src/components/SubscriptionTitle	Meta	import { Meta } from '@storybook/react'
src/components/TermsAndPrivacy	Meta	import { Meta } from '@storybook/react'
src/components/Tooltip	Meta	import { Meta } from '@storybook/react'
src/routes/Checkout	Meta	import { Meta } from '@storybook/react'
src/routes/Product/AcceptedCards	Meta	import { Meta } from '@storybook/react'
src/routes/Product/IapRoadblock	storiesOf	import { storiesOf } from '@storybook/react'
src/routes/Product/SubscriptionChangeRoadblock	storiesOf	import { storiesOf } from '@storybook/react'
src/routes/Product/SubscriptionCreate	storiesOf	import { storiesOf } from '@storybook/react'
src/routes/Product/SubscriptionUpgrade	storiesOf	import { storiesOf } from '@storybook/react'
src/routes/Product	storiesOf	import { storiesOf } from '@storybook/react'
src/routes/Subscriptions	storiesOf	import { storiesOf } from '@storybook/react'

Meta = 16/28 (57.1%)

fxa-react

FILE	METHOD	CODE
components/AppErrorDialog	storiesOf	import { storiesOf } from '@storybook/react'
components/Footer	storiesOf	import { storiesOf } from '@storybook/react'
components/Head	storiesOf	import { storiesOf } from '@storybook/react'
components/Header	storiesOf	import { storiesOf } from '@storybook/react'
components/LinkExternal	storiesOf	import { storiesOf } from '@storybook/react'
components/LoadingSpinner	storiesOf	import { storiesOf } from '@storybook/react'
lib/hooks.stories.tsx	storiesOf	import { storiesOf } from '@storybook/react'

Meta = 0/7 (0.0%)

fxa-settings

FILE	METHOD	CODE
.storybook/design-guide/main.stories.tsx	storiesOf	import { storiesOf } from '@storybook/react'
src/components/AppLayout	storiesOf	import { storiesOf } from '@storybook/react'
src/components/Avatar	Meta	import { Meta } from '@storybook/react'
src/components/BentoMenu	storiesOf	import { storiesOf } from '@storybook/react'
src/components/ButtonIcon	storiesOf	import { storiesOf } from '@storybook/react'
src/components/Checkbox	storiesOf	import { storiesOf } from '@storybook/react'
src/components/ConnectAnotherDevicePromo	storiesOf	import { storiesOf } from '@storybook/react'
src/components/ConnectedServices	storiesOf	import { storiesOf } from '@storybook/react'
src/components/DataBlock	storiesOf	import { storiesOf } from '@storybook/react'
src/components/DataCollection	storiesOf	import { storiesOf } from '@storybook/react'
src/components/DropDownAvatarMenu	storiesOf	import { storiesOf } from '@storybook/react'
src/components/FlowContainer	storiesOf	import { storiesOf } from '@storybook/react'
src/components/FormPassword	Meta	import { Meta } from '@storybook/react'
src/components/GetDataTrio	storiesOf	import { storiesOf } from '@storybook/react'
src/components/HeaderLockup	storiesOf	import { storiesOf } from '@storybook/react'
src/components/InputPassword	storiesOf	import { storiesOf } from '@storybook/react'
src/components/InputText	storiesOf	import { storiesOf } from '@storybook/react'
src/components/LinkedAccounts	storiesOf	import { storiesOf } from '@storybook/react'
src/components/Modal	storiesOf	import { storiesOf } from '@storybook/react'
src/components/ModalVerifySession	storiesOf	import { storiesOf } from '@storybook/react'
src/components/Nav	Meta	import { Meta } from '@storybook/react'
src/components/Page2faReplaceRecoveryCodes	storiesOf	import { storiesOf } from '@storybook/react'
src/components/PageAvatar	storiesOf	import { storiesOf } from '@storybook/react'
src/components/PageCreatePassword	Meta	import { Meta } from '@storybook/react'
src/components/PageDeleteAccount	storiesOf	import { storiesOf } from '@storybook/react'
src/components/PageDisplayName	storiesOf	import { storiesOf } from '@storybook/react'
src/components/PageRecoveryKeyAdd	storiesOf	import { storiesOf } from '@storybook/react'
src/components/PageSecondaryEmailAdd	storiesOf	import { storiesOf } from '@storybook/react'
src/components/PageSecondaryEmailVerify	storiesOf	import { storiesOf } from '@storybook/react'
src/components/PageSettings	Meta	import { Meta } from '@storybook/react'
src/components/PageTwoStepAuthentication	storiesOf	import { storiesOf } from '@storybook/react'
src/components/Profile	Meta	import { Meta } from '@storybook/react'
src/components/Security	Meta	import { Meta } from '@storybook/react'
src/components/Switch	storiesOf	import { storiesOf } from '@storybook/react'
src/components/Tooltip	storiesOf	import { storiesOf } from '@storybook/react'
src/components/UnitRow	storiesOf	import { storiesOf } from '@storybook/react'
src/components/UnitRowRecoveryKey	storiesOf	import { storiesOf } from '@storybook/react'
src/components/UnitRowSecondaryEmail	storiesOf	import { storiesOf } from '@storybook/react'
src/components/UnitRowTwoStepAuth	storiesOf	import { storiesOf } from '@storybook/react'

Meta = 7/39 (17.9%)

storybook-meta-refactor.mjs

import cp from "node:child_process";
import path from "node:path";

const rows = cp.execSync(`git grep -n " from '@storybook/react'" packages/`)
  .toString()
  .trim()
  .split("\n");

const res = rows.reduce((acc, row) => {
  const [ file, line, code ] = row.split(":");
  let [, packageName, ...filepath] = (file).split("/");

  if (!acc[packageName]) {
    acc[packageName] = [];
  }
  filepath = filepath.join("/");
  acc[packageName].push({
    filepath: path.basename(filepath) === "index.stories.tsx" ? path.dirname(filepath) : filepath,
    filename: path.join(packageName, `${filepath}:${line}`),
    code
  });
  return acc;
}, {});

for (const [packageName, stories] of Object.entries(res)) {
  console.log(`\n### ${packageName}`);
  console.log("FILE | METHOD | CODE\n-----|--------|-----");
  let converted = 0;
  for (const story of stories) {
    const { imported } = story.code.match(/\{(?<imported>.*?)\}/)?.groups;
    const isMeta = story.code.includes("Meta");
    if (isMeta) converted += 1;
    console.log([
      strike(story.filepath, isMeta),
      `\`${imported?.trim()}\``,
      `\`${story.code.replace(/;$/, '')}\``
    ].join(" | "));
  }
  console.log(`\nMeta = ${converted}/${stories.length} (${Number(converted/stories.length*100).toFixed(1)}%)`);
}

function strike(text = "", bool = false) {
  const _ = bool ? "~" : "";
  return `${_}${text}${_}`;
}