Merge pull request #19986 from storybookjs/kasper/sb-818-upgrade-to-ts-49-and-update-templates

CLI: Add TS 4.9 CLI templates
2025-03-18 05:02:24 +08:00 · 2022-11-29 17:17:49 +01:00 · 2022-11-29 17:17:49 +01:00 · f45afe4874
commit f45afe4874
parent 9b5532e4df 09dd5d7f73
39 changed files with 1241 additions and 201 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,5 +1,4 @@
 {
-  "deepscan.enable": true,
  "eslint.workingDirectories": ["./code", "./scripts"],
  "typescript.tsdk": "./code/node_modules/typescript/lib",
  "[javascript]": {
--- a/code/.vscode/settings.json
+++ b/code/.vscode/settings.json
@ -1,5 +1,4 @@
 {
-  "deepscan.enable": true,
  "eslint.workingDirectories": [".", "../scripts"],
  "typescript.tsdk": "node_modules/typescript/lib",
  "[javascript]": {
--- a/code/addons/interactions/src/components/InteractionsPanel.tsx
+++ b/code/addons/interactions/src/components/InteractionsPanel.tsx
@ -98,20 +98,21 @@ export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
    return (
      <AddonPanel {...panelProps}>
        <Container withException={!!caughtException}>
-          {controlStates.debugger && (interactions.length > 0 || hasException || isRerunAnimating) && (
-            <Subnav
-              controls={controls}
-              controlStates={controlStates}
-              status={
-                // eslint-disable-next-line no-nested-ternary
-                isPlaying ? CallStates.ACTIVE : hasException ? CallStates.ERROR : CallStates.DONE
-              }
-              storyFileName={fileName}
-              onScrollToEnd={onScrollToEnd}
-              isRerunAnimating={isRerunAnimating}
-              setIsRerunAnimating={setIsRerunAnimating}
-            />
-          )}
+          {controlStates.debugger &&
+            (interactions.length > 0 || hasException || isRerunAnimating) && (
+              <Subnav
+                controls={controls}
+                controlStates={controlStates}
+                status={
+                  // eslint-disable-next-line no-nested-ternary
+                  isPlaying ? CallStates.ACTIVE : hasException ? CallStates.ERROR : CallStates.DONE
+                }
+                storyFileName={fileName}
+                onScrollToEnd={onScrollToEnd}
+                isRerunAnimating={isRerunAnimating}
+                setIsRerunAnimating={setIsRerunAnimating}
+              />
+            )}
          <div>
            {interactions.map((call) => (
              <Interaction
--- a/code/frameworks/nextjs/template/cli/ts-legacy/Button.stories.ts
+++ b/code/frameworks/nextjs/template/cli/ts-legacy/Button.stories.ts
@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Button> = {
+  title: 'Example/Button',
+  component: Button,
+  tags: ['docsPage'],
+  argTypes: {
+    backgroundColor: {
+      control: 'color',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};
--- a/code/frameworks/nextjs/template/cli/ts-legacy/Button.tsx
+++ b/code/frameworks/nextjs/template/cli/ts-legacy/Button.tsx
@ -0,0 +1,52 @@
+import React from 'react';
+import './button.css';
+
+interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      {...props}
+    >
+      {label}
+      <style jsx>{`
+        button {
+          background-color: ${backgroundColor};
+        }
+      `}</style>
+    </button>
+  );
+};
--- a/code/frameworks/nextjs/template/cli/ts-legacy/Header.stories.ts
+++ b/code/frameworks/nextjs/template/cli/ts-legacy/Header.stories.ts
@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+
+const meta: Meta<typeof Header> = {
+  title: 'Example/Header',
+  component: Header,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ['docsPage'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Header>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut: Story = {};
--- a/code/frameworks/nextjs/template/cli/ts-legacy/Header.tsx
+++ b/code/frameworks/nextjs/template/cli/ts-legacy/Header.tsx
@ -0,0 +1,56 @@
+import React from 'react';
+
+import { Button } from './Button';
+import './header.css';
+
+type User = {
+  name: string;
+};
+
+interface HeaderProps {
+  user?: User;
+  onLogin: () => void;
+  onLogout: () => void;
+  onCreateAccount: () => void;
+}
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
+  <header>
+    <div className="wrapper">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        {user ? (
+          <>
+            <span className="welcome">
+              Welcome, <b>{user.name}</b>!
+            </span>
+            <Button size="small" onClick={onLogout} label="Log out" />
+          </>
+        ) : (
+          <>
+            <Button size="small" onClick={onLogin} label="Log in" />
+            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+          </>
+        )}
+      </div>
+    </div>
+  </header>
+);
--- a/code/frameworks/nextjs/template/cli/ts-legacy/Introduction.stories.mdx
+++ b/code/frameworks/nextjs/template/cli/ts-legacy/Introduction.stories.mdx
@ -0,0 +1,228 @@
+import { Meta } from '@storybook/addon-docs';
+import Image from 'next/image';
+
+import Code from './assets/code-brackets.svg';
+import Colors from './assets/colors.svg';
+import Comments from './assets/comments.svg';
+import Direction from './assets/direction.svg';
+import Flow from './assets/flow.svg';
+import Plugin from './assets/plugin.svg';
+import Repo from './assets/repo.svg';
+import StackAlt from './assets/stackalt.svg';
+
+<Meta title="Example/Introduction" />
+
+<style>
+  {`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 900;
+      font-size: 13px;
+      color: #999;
+      letter-spacing: 6px;
+      line-height: 24px;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+      margin-top: 40px;
+    }
+
+    .link-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 10px;
+    }
+
+    @media (min-width: 620px) {
+      .link-list {
+        row-gap: 20px;
+        column-gap: 20px;
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media all and (-ms-high-contrast:none) {
+    .link-list {
+        display: -ms-grid;
+        -ms-grid-columns: 1fr 1fr;
+        -ms-grid-rows: 1fr 1fr;
+      }
+    }
+
+    .link-item {
+      display: block;
+      padding: 20px 30px 20px 15px;
+      border: 1px solid #00000010;
+      border-radius: 5px;
+      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+      color: #333333;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .link-item:hover {
+      border-color: #1EA7FD50;
+      transform: translate3d(0, -3px, 0);
+      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+    }
+
+    .link-item:active {
+      border-color: #1EA7FD;
+      transform: translate3d(0, 0, 0);
+    }
+
+    .link-item strong {
+      font-weight: 700;
+      display: block;
+      margin-bottom: 2px;
+    }
+
+    .link-item-img-wrapper {
+      height: 40px;
+      width: 40px;
+      margin-right: 15px;
+      flex: none;
+    }
+
+    .link-item span {
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .tip {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #E7FDD8;
+      color: #66BF3C;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .tip-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+    .tip-wrapper code {
+      font-size: 12px;
+      display: inline-block;
+    }
+  `}
+</style>
+
+# Welcome to Storybook
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<div className="subheading">Configure</div>
+
+<div className="link-list">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/addons/addon-types"
+    target="_blank"
+  >
+    <div className="link-item-img-wrapper">
+      <Image src={Plugin} alt="plugin" />
+    </div>
+    <span>
+      <strong>Presets for popular tools</strong>
+      Easy setup for TypeScript, SCSS and more.
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/webpack"
+    target="_blank"
+  >
+    <div className="link-item-img-wrapper">
+      <Image src={StackAlt} alt="Build" />
+    </div>
+    <span>
+      <strong>Build configuration</strong>
+      How to customize webpack and Babel
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/styling-and-css"
+    target="_blank"
+  >
+    <div className="link-item-img-wrapper">
+      <Image src={Colors} alt="colors" />
+    </div>
+    <span>
+      <strong>Styling</strong>
+      How to load and configure CSS libraries
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+    target="_blank"
+  >
+    <div className="link-item-img-wrapper">
+      <Image src={Flow} alt="flow" />
+    </div>
+    <span>
+      <strong>Data</strong>
+      Providers and mocking for data libraries
+    </span>
+  </a>
+</div>
+
+<div className="subheading">Learn</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
+    <div className="link-item-img-wrapper">
+      <Image src={Repo} alt="repo" />
+    </div>
+    <span>
+      <strong>Storybook documentation</strong>
+      Configure, customize, and extend
+    </span>
+  </a>
+  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+    <div className="link-item-img-wrapper">
+      <Image src={Direction} alt="direction" />
+    </div>
+    <span>
+      <strong>In-depth guides</strong>
+      Best practices from leading teams
+    </span>
+  </a>
+  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+    <div className="link-item-img-wrapper">
+      <Image src={Code} alt="code" />
+    </div>
+    <span>
+      <strong>GitHub project</strong>
+      View the source and add issues
+    </span>
+  </a>
+  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
+    <div className="link-item-img-wrapper">
+      <Image src={Comments} alt="comments" />
+    </div>
+    <span>
+      <strong>Discord chat</strong>
+      Chat with maintainers and the community
+    </span>
+  </a>
+</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in <code>stories/Introduction.stories.mdx</code>
+</div>
--- a/code/frameworks/nextjs/template/cli/ts-legacy/Page.stories.ts
+++ b/code/frameworks/nextjs/template/cli/ts-legacy/Page.stories.ts
@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, userEvent } from '@storybook/testing-library';
+
+import { Page } from './Page';
+
+const meta: Meta<typeof Page> = {
+  title: 'Example/Page',
+  component: Page,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Page>;
+
+export const LoggedOut: Story = {};
+
+// More on interaction testing: https://storybook.js.org/docs/7.0/react/writing-tests/interaction-testing
+export const LoggedIn: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
+};
--- a/code/frameworks/nextjs/template/cli/ts-legacy/Page.tsx
+++ b/code/frameworks/nextjs/template/cli/ts-legacy/Page.tsx
@ -0,0 +1,73 @@
+import React from 'react';
+
+import { Header } from './Header';
+import './page.css';
+
+type User = {
+  name: string;
+};
+
+export const Page: React.VFC = () => {
+  const [user, setUser] = React.useState<User>();
+
+  return (
+    <article>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <section>
+        <h2>Pages in Storybook</h2>
+        <p>
+          We recommend building UIs with a{' '}
+          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+            <strong>component-driven</strong>
+          </a>{' '}
+          process starting with atomic components and ending with pages.
+        </p>
+        <p>
+          Render pages with mock data. This makes it easy to build and review page states without
+          needing to navigate to them in your app. Here are some handy patterns for managing page
+          data in Storybook:
+        </p>
+        <ul>
+          <li>
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
+          </li>
+          <li>
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
+          </li>
+        </ul>
+        <p>
+          Get a guided tutorial on component-driven development at{' '}
+          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+            Storybook tutorials
+          </a>
+          . Read more in the{' '}
+          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+            docs
+          </a>
+          .
+        </p>
+        <div className="tip-wrapper">
+          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
+          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none" fillRule="evenodd">
+              <path
+                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+                id="a"
+                fill="#999"
+              />
+            </g>
+          </svg>
+          Viewports addon in the toolbar
+        </div>
+      </section>
+    </article>
+  );
+};
--- a/code/frameworks/nextjs/template/cli/ts/Button.stories.ts
+++ b/code/frameworks/nextjs/template/cli/ts/Button.stories.ts
@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from './Button';

 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
-const meta: Meta<typeof Button> = {
+const meta = {
  title: 'Example/Button',
  component: Button,
  tags: ['docsPage'],
@ -12,10 +12,10 @@ const meta: Meta<typeof Button> = {
      control: 'color',
    },
  },
-};
+} satisfies Meta<typeof Button>;

 export default meta;
-type Story = StoryObj<typeof Button>;
+type Story = StoryObj<typeof meta>;

 // More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
 export const Primary: Story = {
--- a/code/frameworks/nextjs/template/cli/ts/Header.stories.ts
+++ b/code/frameworks/nextjs/template/cli/ts/Header.stories.ts
@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Header } from './Header';

-const meta: Meta<typeof Header> = {
+const meta = {
  title: 'Example/Header',
  component: Header,
  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
@ -10,10 +10,10 @@ const meta: Meta<typeof Header> = {
    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
    layout: 'fullscreen',
  },
-};
+} satisfies Meta<typeof Header>;

 export default meta;
-type Story = StoryObj<typeof Header>;
+type Story = StoryObj<typeof meta>;

 export const LoggedIn: Story = {
  args: {
--- a/code/frameworks/nextjs/template/cli/ts/Page.stories.ts
+++ b/code/frameworks/nextjs/template/cli/ts/Page.stories.ts
@ -3,17 +3,17 @@ import { within, userEvent } from '@storybook/testing-library';

 import { Page } from './Page';

-const meta: Meta<typeof Page> = {
+const meta = {
  title: 'Example/Page',
  component: Page,
  parameters: {
    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
    layout: 'fullscreen',
  },
-};
+} satisfies Meta<typeof Page>;

 export default meta;
-type Story = StoryObj<typeof Page>;
+type Story = StoryObj<typeof meta>;

 export const LoggedOut: Story = {};

--- a/code/lib/cli/src/detect.ts
+++ b/code/lib/cli/src/detect.ts
@ -151,18 +151,29 @@ export function isStorybookInstalled(
 export function detectLanguage(packageJson?: PackageJson) {
  let language = SupportedLanguage.JAVASCRIPT;

-  const bowerJson = getBowerJson();
-  if (!packageJson && !bowerJson) {
+  if (!packageJson) {
    return language;
  }

  if (
-    hasDependency(packageJson || bowerJson, 'typescript', (version) =>
+    hasDependency(packageJson, 'typescript', (version) =>
      semver.gte(semver.coerce(version), '4.9.0')
-    )
+    ) &&
+    (!hasDependency(packageJson, 'prettier') ||
+      hasDependency(packageJson, 'prettier', (version) =>
+        semver.gte(semver.coerce(version), '2.8.0')
+      )) &&
+    (!hasDependency(packageJson, '@babel/plugin-transform-typescript') ||
+      hasDependency(packageJson, '@babel/plugin-transform-typescript', (version) =>
+        semver.gte(semver.coerce(version), '7.20.0')
+      )) &&
+    (!hasDependency(packageJson, '@typescript-eslint/parser') ||
+      hasDependency(packageJson, '@typescript-eslint/parser', (version) =>
+        semver.gte(semver.coerce(version), '5.44.0')
+      ))
  ) {
    language = SupportedLanguage.TYPESCRIPT;
-  } else if (hasDependency(packageJson || bowerJson, 'typescript')) {
+  } else if (hasDependency(packageJson, 'typescript')) {
    language = SupportedLanguage.TYPESCRIPT_LEGACY;
  }

--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@ -46,7 +46,7 @@
    "globby": "^11.0.2",
    "jscodeshift": "^0.13.1",
    "lodash": "^4.17.21",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.0",
    "recast": "^0.19.0",
    "util": "^0.12.4"
  },
--- a/code/lib/source-loader/package.json
+++ b/code/lib/source-loader/package.json
@ -47,7 +47,7 @@
    "@storybook/types": "7.0.0-alpha.54",
    "estraverse": "^5.2.0",
    "lodash": "^4.17.21",
-    "prettier": "^2.7.1"
+    "prettier": "^2.8.0"
  },
  "devDependencies": {
    "jest-specific-snapshot": "^6.0.0",
--- a/code/package.json
+++ b/code/package.json
@ -110,12 +110,12 @@
  ],
  "resolutions": {
    "@nrwl/cli": "14.6.1",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/experimental-utils": "^5.43.0",
-    "@typescript-eslint/parser": "^5.43.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/experimental-utils": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
    "boxen": "^5.1.2",
    "esbuild": "^0.14.48",
-    "eslint": "^8.27.0",
+    "eslint": "^8.28.0",
    "serialize-javascript": "^3.1.0",
    "webpack": "5"
  },
@ -257,9 +257,9 @@
    "@types/shelljs": "^0.8.7",
    "@types/terser-webpack-plugin": "^5.2.0",
    "@types/webpack-dev-middleware": "^5.3.0",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/experimental-utils": "^5.43.0",
-    "@typescript-eslint/parser": "^5.43.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/experimental-utils": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
    "@vitejs/plugin-react": "^2.1.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
@ -282,7 +282,7 @@
    "esbuild": "^0.14.48",
    "esbuild-loader": "^2.19.0",
    "esbuild-plugin-alias": "^0.2.1",
-    "eslint": "^8.27.0",
+    "eslint": "^8.28.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-storybook": "^0.6.6",
@ -314,7 +314,7 @@
    "nx": "14.6.1",
    "p-limit": "^3.1.0",
    "playwright": "1.28.0",
-    "prettier": "2.7.1",
+    "prettier": "2.8.0",
    "process": "^0.11.10",
    "prompts": "^2.4.0",
    "raf": "^3.4.1",
--- a/code/renderers/react/template/cli/ts-legacy/Button.stories.ts
+++ b/code/renderers/react/template/cli/ts-legacy/Button.stories.ts
@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<typeof Button> = {
+  title: 'Example/Button',
+  component: Button,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Primary: Story = {
+  // More on args: https://storybook.js.org/docs/react/writing-stories/args
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};
--- a/code/renderers/react/template/cli/ts-legacy/Button.tsx
+++ b/code/renderers/react/template/cli/ts-legacy/Button.tsx
@ -0,0 +1,48 @@
+import React from 'react';
+import './button.css';
+
+interface ButtonProps {
+  /**
+   * Is this the principal call to action on the page?
+   */
+  primary?: boolean;
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label: string;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  ...props
+}: ButtonProps) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={{ backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};
--- a/code/renderers/react/template/cli/ts-legacy/Header.stories.ts
+++ b/code/renderers/react/template/cli/ts-legacy/Header.stories.ts
@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+
+const meta: Meta<typeof Header> = {
+  title: 'Example/Header',
+  component: Header,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Header>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut: Story = {};
--- a/code/renderers/react/template/cli/ts-legacy/Header.tsx
+++ b/code/renderers/react/template/cli/ts-legacy/Header.tsx
@ -0,0 +1,56 @@
+import React from 'react';
+
+import { Button } from './Button';
+import './header.css';
+
+type User = {
+  name: string;
+};
+
+interface HeaderProps {
+  user?: User;
+  onLogin: () => void;
+  onLogout: () => void;
+  onCreateAccount: () => void;
+}
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
+  <header>
+    <div className="wrapper">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fillRule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        {user ? (
+          <>
+            <span className="welcome">
+              Welcome, <b>{user.name}</b>!
+            </span>
+            <Button size="small" onClick={onLogout} label="Log out" />
+          </>
+        ) : (
+          <>
+            <Button size="small" onClick={onLogin} label="Log in" />
+            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+          </>
+        )}
+      </div>
+    </div>
+  </header>
+);
--- a/code/renderers/react/template/cli/ts-legacy/Page.stories.ts
+++ b/code/renderers/react/template/cli/ts-legacy/Page.stories.ts
@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, userEvent } from '@storybook/testing-library';
+
+import { Page } from './Page';
+
+const meta: Meta<typeof Page> = {
+  title: 'Example/Page',
+  component: Page,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Page>;
+
+export const LoggedOut: Story = {};
+
+// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+export const LoggedIn: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
+};
--- a/code/renderers/react/template/cli/ts-legacy/Page.tsx
+++ b/code/renderers/react/template/cli/ts-legacy/Page.tsx
@ -0,0 +1,73 @@
+import React from 'react';
+
+import { Header } from './Header';
+import './page.css';
+
+type User = {
+  name: string;
+};
+
+export const Page: React.VFC = () => {
+  const [user, setUser] = React.useState<User>();
+
+  return (
+    <article>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <section>
+        <h2>Pages in Storybook</h2>
+        <p>
+          We recommend building UIs with a{' '}
+          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+            <strong>component-driven</strong>
+          </a>{' '}
+          process starting with atomic components and ending with pages.
+        </p>
+        <p>
+          Render pages with mock data. This makes it easy to build and review page states without
+          needing to navigate to them in your app. Here are some handy patterns for managing page
+          data in Storybook:
+        </p>
+        <ul>
+          <li>
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
+          </li>
+          <li>
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
+          </li>
+        </ul>
+        <p>
+          Get a guided tutorial on component-driven development at{' '}
+          <a href="renderers/react/template/cli/ts/Page" target="_blank" rel="noopener noreferrer">
+            Storybook tutorials
+          </a>
+          . Read more in the{' '}
+          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+            docs
+          </a>
+          .
+        </p>
+        <div className="tip-wrapper">
+          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
+          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none" fillRule="evenodd">
+              <path
+                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+                id="a"
+                fill="#999"
+              />
+            </g>
+          </svg>
+          Viewports addon in the toolbar
+        </div>
+      </section>
+    </article>
+  );
+};
--- a/code/renderers/react/template/cli/ts/Button.stories.ts
+++ b/code/renderers/react/template/cli/ts/Button.stories.ts
@ -3,17 +3,17 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from './Button';

 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
-const meta: Meta<typeof Button> = {
+const meta = {
  title: 'Example/Button',
  component: Button,
  tags: ['docsPage'],
  argTypes: {
    backgroundColor: { control: 'color' },
  },
-};
+} satisfies Meta<typeof Button>;

 export default meta;
-type Story = StoryObj<typeof Button>;
+type Story = StoryObj<typeof meta>;

 // More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
 export const Primary: Story = {
--- a/code/renderers/react/template/cli/ts/Header.stories.ts
+++ b/code/renderers/react/template/cli/ts/Header.stories.ts
@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Header } from './Header';

-const meta: Meta<typeof Header> = {
+const meta = {
  title: 'Example/Header',
  component: Header,
  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
@ -10,10 +10,10 @@ const meta: Meta<typeof Header> = {
    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
    layout: 'fullscreen',
  },
-};
+} satisfies Meta<typeof Header>;

 export default meta;
-type Story = StoryObj<typeof Header>;
+type Story = StoryObj<typeof meta>;

 export const LoggedIn: Story = {
  args: {
--- a/code/renderers/react/template/cli/ts/Page.stories.ts
+++ b/code/renderers/react/template/cli/ts/Page.stories.ts
@ -3,17 +3,17 @@ import { within, userEvent } from '@storybook/testing-library';

 import { Page } from './Page';

-const meta: Meta<typeof Page> = {
+const meta = {
  title: 'Example/Page',
  component: Page,
  parameters: {
    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
    layout: 'fullscreen',
  },
-};
+} satisfies Meta<typeof Page>;

 export default meta;
-type Story = StoryObj<typeof Page>;
+type Story = StoryObj<typeof meta>;

 export const LoggedOut: Story = {};

--- a/code/renderers/svelte/template/cli/ts-legacy/Button.stories.ts
+++ b/code/renderers/svelte/template/cli/ts-legacy/Button.stories.ts
@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+// More on how to set up stories at: https://storybook.js.org/docs/svelte/writing-stories/introduction#default-export
+const meta: Meta<Button> = {
+  title: 'Example/Button',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<Button>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};
--- a/code/renderers/svelte/template/cli/ts-legacy/Button.svelte
+++ b/code/renderers/svelte/template/cli/ts-legacy/Button.svelte
@ -0,0 +1,34 @@
+<script lang="ts">
+  import './button.css';
+
+  /**
+   * Is this the principal call to action on the page?
+   */
+  export let primary = false;
+
+  /**
+   * What background color to use
+   */
+  export let backgroundColor: string | undefined = undefined;
+  /**
+   * How large should the button be?
+   */
+  export let size: 'small' | 'medium' | 'large' = 'medium';
+  /**
+   * Button contents
+   */
+  export let label = '';
+
+  $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+  $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+</script>
+
+<button
+  type="button"
+  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+  {style}
+  on:click
+>
+  {label}
+</button>
--- a/code/renderers/svelte/template/cli/ts-legacy/Header.stories.ts
+++ b/code/renderers/svelte/template/cli/ts-legacy/Header.stories.ts
@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import Header from './Header.svelte';
+
+const meta: Meta<Header> = {
+  title: 'Example/Header',
+  component: Header,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ['docsPage'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<Header>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut: Story = {};
--- a/code/renderers/svelte/template/cli/ts-legacy/Header.svelte
+++ b/code/renderers/svelte/template/cli/ts-legacy/Header.svelte
@ -0,0 +1,52 @@
+<script lang="ts">
+  import './header.css';
+  import Button from './Button.svelte';
+
+  import { createEventDispatcher } from 'svelte';
+
+  export let user: { name: string } | null = null;
+
+  const dispatch = createEventDispatcher();
+
+  function onLogin(event: MouseEvent) {
+    dispatch('login', event);
+  }
+  function onLogout(event: MouseEvent) {
+    dispatch('logout', event);
+  }
+  function onCreateAccount(event: MouseEvent) {
+    dispatch('createAccount', event);
+  }
+</script>
+
+<header>
+  <div class="wrapper">
+    <div>
+      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+            fill="#FFF"
+          />
+          <path
+            d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+            fill="#555AB9"
+          />
+          <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
+        </g>
+      </svg>
+      <h1>Acme</h1>
+    </div>
+    <div>
+      {#if user}
+        <span class="welcome">
+          Welcome, <b>{user.name}</b>!
+        </span>
+        <Button size="small" on:click={onLogout} label="Log out" />
+      {:else}
+        <Button size="small" on:click={onLogin} label="Log in" />
+        <Button primary size="small" on:click={onCreateAccount} label="Sign up" />
+      {/if}
+    </div>
+  </div>
+</header>
--- a/code/renderers/svelte/template/cli/ts-legacy/Page.stories.ts
+++ b/code/renderers/svelte/template/cli/ts-legacy/Page.stories.ts
@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { within, userEvent } from '@storybook/testing-library';
+
+import Page from './Page.svelte';
+
+const meta: Meta<Page> = {
+  title: 'Example/Page',
+  component: Page,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<Page>;
+
+export const LoggedOut: Story = {};
+
+// More on interaction testing: https://storybook.js.org/docs/7.0/svelte/writing-tests/interaction-testing
+export const LoggedIn: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
+};
--- a/code/renderers/svelte/template/cli/ts-legacy/Page.svelte
+++ b/code/renderers/svelte/template/cli/ts-legacy/Page.svelte
@ -0,0 +1,70 @@
+<script lang="ts">
+  import './page.css';
+  import Header from './Header.svelte';
+
+  let user: { name: string } | null = null;
+</script>
+
+<article>
+  <Header
+    {user}
+    on:login={() => (user = { name: 'Jane Doe' })}
+    on:logout={() => (user = null)}
+    on:createAccount={() => (user = { name: 'Jane Doe' })}
+  />
+
+  <section>
+    <h2>Pages in Storybook</h2>
+    <p>
+      We recommend building UIs with a
+      <a
+        href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <strong>component-driven</strong>
+      </a>
+      process starting with atomic components and ending with pages.
+    </p>
+    <p>
+      Render pages with mock data. This makes it easy to build and review page states without
+      needing to navigate to them in your app. Here are some handy patterns for managing page data
+      in Storybook:
+    </p>
+    <ul>
+      <li>
+        Use a higher-level connected component. Storybook helps you compose such data from the
+        "args" of child component stories
+      </li>
+      <li>
+        Assemble data in the page component from your services. You can mock these services out
+        using Storybook.
+      </li>
+    </ul>
+    <p>
+      Get a guided tutorial on component-driven development at
+      <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+        Storybook tutorials
+      </a>
+      . Read more in the
+      <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
+      .
+    </p>
+    <div class="tip-wrapper">
+      <span class="tip">Tip</span>
+      Adjust the width of the canvas with the
+      <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0
+            01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0
+            010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+            id="a"
+            fill="#999"
+          />
+        </g>
+      </svg>
+      Viewports addon in the toolbar
+    </div>
+  </section>
+</article>
--- a/code/renderers/svelte/template/cli/ts/Button.stories.ts
+++ b/code/renderers/svelte/template/cli/ts/Button.stories.ts
@ -3,17 +3,17 @@ import type { Meta, StoryObj } from '@storybook/svelte';
 import Button from './Button.svelte';

 // More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
-const meta: Meta<Button> = {
+const meta = {
  title: 'Example/Button',
  component: Button,
  tags: ['docsPage'],
  argTypes: {
    backgroundColor: { control: 'color' },
  },
-};
+} satisfies Meta<Button>;

 export default meta;
-type Story = StoryObj<Button>;
+type Story = StoryObj<typeof meta>;

 // More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
 export const Primary: Story = {
--- a/code/renderers/svelte/template/cli/ts/Header.stories.ts
+++ b/code/renderers/svelte/template/cli/ts/Header.stories.ts
@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/svelte';
 import Header from './Header.svelte';

-const meta: Meta<Header> = {
+const meta = {
  title: 'Example/Header',
  component: Header,
  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
@ -10,10 +10,10 @@ const meta: Meta<Header> = {
    // More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
    layout: 'fullscreen',
  },
-};
+} satisfies Meta<Header>;

 export default meta;
-type Story = StoryObj<Header>;
+type Story = StoryObj<typeof meta>;

 export const LoggedIn: Story = {
  args: {
--- a/code/renderers/svelte/template/cli/ts/Page.stories.ts
+++ b/code/renderers/svelte/template/cli/ts/Page.stories.ts
@ -3,17 +3,17 @@ import { within, userEvent } from '@storybook/testing-library';

 import Page from './Page.svelte';

-const meta: Meta<Page> = {
+const meta = {
  title: 'Example/Page',
  component: Page,
  parameters: {
    // More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
    layout: 'fullscreen',
  },
-};
+} satisfies Meta<Page>;

 export default meta;
-type Story = StoryObj<Page>;
+type Story = StoryObj<typeof meta>;

 export const LoggedOut: Story = {};

--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@ -67,7 +67,7 @@
    "global": "^4.4.0",
    "overlayscrollbars": "^1.13.1",
    "polished": "^4.2.2",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.0",
    "react-popper-tooltip": "^3.1.1",
    "react-syntax-highlighter": "^15.4.5",
    "react-textarea-autosize": "^8.3.0",
--- a/code/yarn.lock
+++ b/code/yarn.lock
@ -6110,7 +6110,7 @@ __metadata:
    jest-specific-snapshot: ^6.0.0
    jscodeshift: ^0.13.1
    lodash: ^4.17.21
-    prettier: ^2.7.1
+    prettier: ^2.8.0
    recast: ^0.19.0
    typescript: ^4.9.3
    util: ^0.12.4
@ -6134,7 +6134,7 @@ __metadata:
    memoizerific: ^1.11.3
    overlayscrollbars: ^1.13.1
    polished: ^4.2.2
-    prettier: ^2.7.1
+    prettier: ^2.8.0
    react-popper-tooltip: ^3.1.1
    react-syntax-highlighter: ^15.4.5
    react-textarea-autosize: ^8.3.0
@ -7209,9 +7209,9 @@ __metadata:
    "@types/shelljs": ^0.8.7
    "@types/terser-webpack-plugin": ^5.2.0
    "@types/webpack-dev-middleware": ^5.3.0
-    "@typescript-eslint/eslint-plugin": ^5.43.0
-    "@typescript-eslint/experimental-utils": ^5.43.0
-    "@typescript-eslint/parser": ^5.43.0
+    "@typescript-eslint/eslint-plugin": ^5.45.0
+    "@typescript-eslint/experimental-utils": ^5.45.0
+    "@typescript-eslint/parser": ^5.45.0
    "@vitejs/plugin-react": ^2.1.0
    babel-core: ^7.0.0-bridge.0
    babel-eslint: ^10.1.0
@ -7234,7 +7234,7 @@ __metadata:
    esbuild: ^0.14.48
    esbuild-loader: ^2.19.0
    esbuild-plugin-alias: ^0.2.1
-    eslint: ^8.27.0
+    eslint: ^8.28.0
    eslint-import-resolver-typescript: ^3.5.2
    eslint-plugin-import: ^2.26.0
    eslint-plugin-react: ^7.31.10
@ -7268,7 +7268,7 @@ __metadata:
    nx: 14.6.1
    p-limit: ^3.1.0
    playwright: 1.28.0
-    prettier: 2.7.1
+    prettier: 2.8.0
    process: ^0.11.10
    prompts: ^2.4.0
    puppeteer: ^2.1.1
@ -7419,7 +7419,7 @@ __metadata:
    estraverse: ^5.2.0
    jest-specific-snapshot: ^6.0.0
    lodash: ^4.17.21
-    prettier: ^2.7.1
+    prettier: ^2.8.0
    typescript: ^4.9.3
  peerDependencies:
    react: ^16.8.0 || ^17.0.0 || ^18.0.0
@ -8982,13 +8982,13 @@ __metadata:
  languageName: node
  linkType: hard

-"@typescript-eslint/eslint-plugin@npm:^5.43.0":
-  version: 5.44.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:5.44.0"
+"@typescript-eslint/eslint-plugin@npm:^5.45.0":
+  version: 5.45.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:5.45.0"
  dependencies:
-    "@typescript-eslint/scope-manager": 5.44.0
-    "@typescript-eslint/type-utils": 5.44.0
-    "@typescript-eslint/utils": 5.44.0
+    "@typescript-eslint/scope-manager": 5.45.0
+    "@typescript-eslint/type-utils": 5.45.0
+    "@typescript-eslint/utils": 5.45.0
    debug: ^4.3.4
    ignore: ^5.2.0
    natural-compare-lite: ^1.4.0
@ -9001,54 +9001,54 @@ __metadata:
  peerDependenciesMeta:
    typescript:
      optional: true
-  checksum: 1e8b19f7dae98ace600926d17d3317c5634a157d94831a2a83ab8d9cc973eb1c3769935a46b8885625e675f07e14efde195ef6a9beb33078a154c177a2da2d92
+  checksum: 14d5f591564b8688e8d99f69732f97955b7aeefa0893c2df95f9dee9c4105d5ca82bfcf819a4edab3110cd0aa0de234ecda254e41668b7bab1cd2992b805612c
  languageName: node
  linkType: hard

-"@typescript-eslint/experimental-utils@npm:^5.43.0":
-  version: 5.44.0
-  resolution: "@typescript-eslint/experimental-utils@npm:5.44.0"
+"@typescript-eslint/experimental-utils@npm:^5.45.0":
+  version: 5.45.0
+  resolution: "@typescript-eslint/experimental-utils@npm:5.45.0"
  dependencies:
-    "@typescript-eslint/utils": 5.44.0
+    "@typescript-eslint/utils": 5.45.0
  peerDependencies:
    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 1b1e72341be6faafaac30f3926934db84bf10f27398ef5529dbba0807c4a75d57418fc12f15d85a84ce6e6af1f09374ea34b058d59674c9d8a8ae2173cc8c9d2
+  checksum: 0e377cdc617f55ee4a1d58500acb67a38895e56cf3f6ce13a0d1190f97494f183ed28ae3a7a4621d82319ef7ae1a652e348ece2404b0205d5a19c0c8a23ad423
  languageName: node
  linkType: hard

-"@typescript-eslint/parser@npm:^5.43.0":
-  version: 5.44.0
-  resolution: "@typescript-eslint/parser@npm:5.44.0"
+"@typescript-eslint/parser@npm:^5.45.0":
+  version: 5.45.0
+  resolution: "@typescript-eslint/parser@npm:5.45.0"
  dependencies:
-    "@typescript-eslint/scope-manager": 5.44.0
-    "@typescript-eslint/types": 5.44.0
-    "@typescript-eslint/typescript-estree": 5.44.0
+    "@typescript-eslint/scope-manager": 5.45.0
+    "@typescript-eslint/types": 5.45.0
+    "@typescript-eslint/typescript-estree": 5.45.0
    debug: ^4.3.4
  peerDependencies:
    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
  peerDependenciesMeta:
    typescript:
      optional: true
-  checksum: fc43a15f956fbae7cd995240c1a5cb5fd00933e2fea34964240ad92aa32313b6edef56f10e0fe946fc40d8a42172c27d8b6406056db36d17f9191b24f449b2f3
+  checksum: 1a2be775577836436b59f8812ab6a58f208cdaf7a49a651461eb937b6afcc8ead14fd08c94664bba8708b277a4c7a2a5e32cb96a4f7cd8a40aab3ff7db46333d
  languageName: node
  linkType: hard

-"@typescript-eslint/scope-manager@npm:5.44.0":
-  version: 5.44.0
-  resolution: "@typescript-eslint/scope-manager@npm:5.44.0"
+"@typescript-eslint/scope-manager@npm:5.45.0":
+  version: 5.45.0
+  resolution: "@typescript-eslint/scope-manager@npm:5.45.0"
  dependencies:
-    "@typescript-eslint/types": 5.44.0
-    "@typescript-eslint/visitor-keys": 5.44.0
-  checksum: 5e8cc97ae8c0eefd8e399df9d34e1afc634f238b2e10a2bb10cdcd72fb186a06219f87b418dce6944c68cf24a279e526eb46c1d3f10f1c0a1b0c12a61c226f32
+    "@typescript-eslint/types": 5.45.0
+    "@typescript-eslint/visitor-keys": 5.45.0
+  checksum: 79ccc74424b015568e122239fbd1d395c6c9da6c3c1569455f4c81ee1a036f3c8cee30e8b68e4aefe580e09a1026de365a65bd2a257039a3e5d767f88b9ae0a0
  languageName: node
  linkType: hard

-"@typescript-eslint/type-utils@npm:5.44.0":
-  version: 5.44.0
-  resolution: "@typescript-eslint/type-utils@npm:5.44.0"
+"@typescript-eslint/type-utils@npm:5.45.0":
+  version: 5.45.0
+  resolution: "@typescript-eslint/type-utils@npm:5.45.0"
  dependencies:
-    "@typescript-eslint/typescript-estree": 5.44.0
-    "@typescript-eslint/utils": 5.44.0
+    "@typescript-eslint/typescript-estree": 5.45.0
+    "@typescript-eslint/utils": 5.45.0
    debug: ^4.3.4
    tsutils: ^3.21.0
  peerDependencies:
@ -9056,23 +9056,23 @@ __metadata:
  peerDependenciesMeta:
    typescript:
      optional: true
-  checksum: 8e97d82d8465224148a18852ca3e9beaa0213e18d7161246a64923cb12efcf20a0d588a5be9d3cf81e344c65234d90ede00f29679a49d4aeee92f7220bd47b55
+  checksum: 0e9ea982f622ae9bb705723a5434428f08a232303019e43e53b8008837cdd3f2e7a262dbab53967b5aa99fee00be87cd1ba118dc5ae682a836b0993fa296927a
  languageName: node
  linkType: hard

-"@typescript-eslint/types@npm:5.44.0":
-  version: 5.44.0
-  resolution: "@typescript-eslint/types@npm:5.44.0"
-  checksum: 2829523bd0b0d94266c7ad3f42de8091327596e950d589fb55b7f46887663f882094fd0c812bfb3892197e598a6bad565bf2abb92acaa9cda8d4814a1faac3be
+"@typescript-eslint/types@npm:5.45.0":
+  version: 5.45.0
+  resolution: "@typescript-eslint/types@npm:5.45.0"
+  checksum: ef23914e289415732194db747fbdfd88c04f6c1bf7d4b32d74c7d02078cab85492d14f2fc59dc95fe046abe26b4643243ffac927b9078d8fb1794cc7858876b5
  languageName: node
  linkType: hard

-"@typescript-eslint/typescript-estree@npm:5.44.0":
-  version: 5.44.0
-  resolution: "@typescript-eslint/typescript-estree@npm:5.44.0"
+"@typescript-eslint/typescript-estree@npm:5.45.0":
+  version: 5.45.0
+  resolution: "@typescript-eslint/typescript-estree@npm:5.45.0"
  dependencies:
-    "@typescript-eslint/types": 5.44.0
-    "@typescript-eslint/visitor-keys": 5.44.0
+    "@typescript-eslint/types": 5.45.0
+    "@typescript-eslint/visitor-keys": 5.45.0
    debug: ^4.3.4
    globby: ^11.1.0
    is-glob: ^4.0.3
@ -9081,35 +9081,35 @@ __metadata:
  peerDependenciesMeta:
    typescript:
      optional: true
-  checksum: ef82a0da1744af2cd61125bfa51cb667d28af519d4a0b14ada47345cc5de3f60ac12130bdadca84f12145deb5ec48596ff6bb9db77d5c131471a4b8b8e94922f
+  checksum: 1148d0491efc4eb180e205f52f62f8f6f5f204162de28eb122565a367aa61ad538c51b241d98e3c02019da9e03b93c6b3fd8c2fa10577c5831cd6f42abc3c7f6
  languageName: node
  linkType: hard

-"@typescript-eslint/utils@npm:5.44.0":
-  version: 5.44.0
-  resolution: "@typescript-eslint/utils@npm:5.44.0"
+"@typescript-eslint/utils@npm:5.45.0":
+  version: 5.45.0
+  resolution: "@typescript-eslint/utils@npm:5.45.0"
  dependencies:
    "@types/json-schema": ^7.0.9
    "@types/semver": ^7.3.12
-    "@typescript-eslint/scope-manager": 5.44.0
-    "@typescript-eslint/types": 5.44.0
-    "@typescript-eslint/typescript-estree": 5.44.0
+    "@typescript-eslint/scope-manager": 5.45.0
+    "@typescript-eslint/types": 5.45.0
+    "@typescript-eslint/typescript-estree": 5.45.0
    eslint-scope: ^5.1.1
    eslint-utils: ^3.0.0
    semver: ^7.3.7
  peerDependencies:
    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: d6a76a9579633c7f1c5a310a968b59c3aa865a358f98dbe3c42b57a307d1a1ffa01bb03df07dee6386400a5230e9f8dba70158c7d6f5f5f66bdc2df3c04ef37b
+  checksum: 022ef5c81b4986f87a186bdff384c7dcc6ff08884935401b6c05e82554e404bc8010a7fb2f6413c0e6aad01ced667a221ed8d115bca4f97c21a002bbfefb66f0
  languageName: node
  linkType: hard

-"@typescript-eslint/visitor-keys@npm:5.44.0":
-  version: 5.44.0
-  resolution: "@typescript-eslint/visitor-keys@npm:5.44.0"
+"@typescript-eslint/visitor-keys@npm:5.45.0":
+  version: 5.45.0
+  resolution: "@typescript-eslint/visitor-keys@npm:5.45.0"
  dependencies:
-    "@typescript-eslint/types": 5.44.0
+    "@typescript-eslint/types": 5.45.0
    eslint-visitor-keys: ^3.3.0
-  checksum: 8043ab4e229fb086d10a0819bc9f3a3f434c5d65ab34b363c54056329396f9116ffc8debf7cf4288b85d8c7e601e5ecfce47de20143a7158804302fbb47e26b9
+  checksum: 47cde8f55f41d73e3df205e7ba2de9ab83f36a2cf3fe9aa7f24605cddfc914d9f4af2f16a7e36b348d1d990b3200c4c8e2b623332bc5eaf0c337afd18f6bd775
  languageName: node
  linkType: hard

@ -16091,7 +16091,7 @@ __metadata:
  languageName: node
  linkType: hard

-"eslint@npm:^8.27.0":
+"eslint@npm:^8.28.0":
  version: 8.28.0
  resolution: "eslint@npm:8.28.0"
  dependencies:
@ -26661,16 +26661,7 @@ __metadata:
  languageName: node
  linkType: hard

-"prettier@npm:2.7.1":
-  version: 2.7.1
-  resolution: "prettier@npm:2.7.1"
-  bin:
-    prettier: bin-prettier.js
-  checksum: 359d2b7ecf36bd52924a48331cae506d335f18637fde6c686212f952b9ce678ce9f554a80571049b36ec2897a8a6c40094b776dea371cc5c04c481cf5b78504b
-  languageName: node
-  linkType: hard
-
-"prettier@npm:^1.18.2 || ^2.0.0, prettier@npm:^2.7.1":
+"prettier@npm:2.8.0, prettier@npm:^1.18.2 || ^2.0.0, prettier@npm:^2.8.0":
  version: 2.8.0
  resolution: "prettier@npm:2.8.0"
  bin:
--- a/scripts/package.json
+++ b/scripts/package.json
@ -29,12 +29,12 @@
  },
  "resolutions": {
    "@nrwl/cli": "14.6.1",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/experimental-utils": "^5.43.0",
-    "@typescript-eslint/parser": "^5.43.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/experimental-utils": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
    "boxen": "^5.1.2",
    "esbuild": "^0.14.48",
-    "eslint": "^8.27.0",
+    "eslint": "^8.28.0",
    "serialize-javascript": "^3.1.0"
  },
  "dependencies": {
@ -90,9 +90,9 @@
    "@types/semver": "^7.3.4",
    "@types/serve-static": "^1.13.8",
    "@types/shelljs": "^0.8.7",
-    "@typescript-eslint/eslint-plugin": "^5.43.0",
-    "@typescript-eslint/experimental-utils": "^5.43.0",
-    "@typescript-eslint/parser": "^5.43.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/experimental-utils": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^29.3.1",
@ -114,7 +114,7 @@
    "esbuild": "^0.14.48",
    "esbuild-plugin-alias": "^0.2.1",
    "esbuild-register": "^3.4.1",
-    "eslint": "^8.27.0",
+    "eslint": "^8.28.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-react": "^7.31.10",
    "eslint-plugin-storybook": "^0.6.6",
@ -145,7 +145,7 @@
    "npmlog": "^5.0.1",
    "nx": "14.6.1",
    "p-limit": "^3.1.0",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.0",
    "pretty-hrtime": "^1.0.0",
    "process": "^0.11.10",
    "prompts": "^2.4.0",
--- a/scripts/yarn.lock
+++ b/scripts/yarn.lock
@ -3247,9 +3247,9 @@ __metadata:
    "@types/semver": ^7.3.4
    "@types/serve-static": ^1.13.8
    "@types/shelljs": ^0.8.7
-    "@typescript-eslint/eslint-plugin": ^5.43.0
-    "@typescript-eslint/experimental-utils": ^5.43.0
-    "@typescript-eslint/parser": ^5.43.0
+    "@typescript-eslint/eslint-plugin": ^5.45.0
+    "@typescript-eslint/experimental-utils": ^5.45.0
+    "@typescript-eslint/parser": ^5.45.0
    babel-core: ^7.0.0-bridge.0
    babel-eslint: ^10.1.0
    babel-jest: ^29.3.1
@ -3271,7 +3271,7 @@ __metadata:
    esbuild: ^0.14.48
    esbuild-plugin-alias: ^0.2.1
    esbuild-register: ^3.4.1
-    eslint: ^8.27.0
+    eslint: ^8.28.0
    eslint-plugin-import: ^2.26.0
    eslint-plugin-react: ^7.31.10
    eslint-plugin-storybook: ^0.6.6
@ -3302,7 +3302,7 @@ __metadata:
    npmlog: ^5.0.1
    nx: 14.6.1
    p-limit: ^3.1.0
-    prettier: ^2.7.1
+    prettier: ^2.8.0
    pretty-hrtime: ^1.0.0
    process: ^0.11.10
    prompts: ^2.4.0
@ -4045,13 +4045,13 @@ __metadata:
  languageName: node
  linkType: hard

-"@typescript-eslint/eslint-plugin@npm:^5.43.0":
-  version: 5.44.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:5.44.0"
+"@typescript-eslint/eslint-plugin@npm:^5.45.0":
+  version: 5.45.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:5.45.0"
  dependencies:
-    "@typescript-eslint/scope-manager": 5.44.0
-    "@typescript-eslint/type-utils": 5.44.0
-    "@typescript-eslint/utils": 5.44.0
+    "@typescript-eslint/scope-manager": 5.45.0
+    "@typescript-eslint/type-utils": 5.45.0
+    "@typescript-eslint/utils": 5.45.0
    debug: ^4.3.4
    ignore: ^5.2.0
    natural-compare-lite: ^1.4.0
@ -4064,54 +4064,54 @@ __metadata:
  peerDependenciesMeta:
    typescript:
      optional: true
-  checksum: 1e8b19f7dae98ace600926d17d3317c5634a157d94831a2a83ab8d9cc973eb1c3769935a46b8885625e675f07e14efde195ef6a9beb33078a154c177a2da2d92
+  checksum: 14d5f591564b8688e8d99f69732f97955b7aeefa0893c2df95f9dee9c4105d5ca82bfcf819a4edab3110cd0aa0de234ecda254e41668b7bab1cd2992b805612c
  languageName: node
  linkType: hard

-"@typescript-eslint/experimental-utils@npm:^5.43.0":
-  version: 5.44.0
-  resolution: "@typescript-eslint/experimental-utils@npm:5.44.0"
+"@typescript-eslint/experimental-utils@npm:^5.45.0":
+  version: 5.45.0
+  resolution: "@typescript-eslint/experimental-utils@npm:5.45.0"
  dependencies:
-    "@typescript-eslint/utils": 5.44.0
+    "@typescript-eslint/utils": 5.45.0
  peerDependencies:
    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 1b1e72341be6faafaac30f3926934db84bf10f27398ef5529dbba0807c4a75d57418fc12f15d85a84ce6e6af1f09374ea34b058d59674c9d8a8ae2173cc8c9d2
+  checksum: 0e377cdc617f55ee4a1d58500acb67a38895e56cf3f6ce13a0d1190f97494f183ed28ae3a7a4621d82319ef7ae1a652e348ece2404b0205d5a19c0c8a23ad423
  languageName: node
  linkType: hard

-"@typescript-eslint/parser@npm:^5.43.0":
-  version: 5.44.0
-  resolution: "@typescript-eslint/parser@npm:5.44.0"
+"@typescript-eslint/parser@npm:^5.45.0":
+  version: 5.45.0
+  resolution: "@typescript-eslint/parser@npm:5.45.0"
  dependencies:
-    "@typescript-eslint/scope-manager": 5.44.0
-    "@typescript-eslint/types": 5.44.0
-    "@typescript-eslint/typescript-estree": 5.44.0
+    "@typescript-eslint/scope-manager": 5.45.0
+    "@typescript-eslint/types": 5.45.0
+    "@typescript-eslint/typescript-estree": 5.45.0
    debug: ^4.3.4
  peerDependencies:
    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
  peerDependenciesMeta:
    typescript:
      optional: true
-  checksum: fc43a15f956fbae7cd995240c1a5cb5fd00933e2fea34964240ad92aa32313b6edef56f10e0fe946fc40d8a42172c27d8b6406056db36d17f9191b24f449b2f3
+  checksum: 1a2be775577836436b59f8812ab6a58f208cdaf7a49a651461eb937b6afcc8ead14fd08c94664bba8708b277a4c7a2a5e32cb96a4f7cd8a40aab3ff7db46333d
  languageName: node
  linkType: hard

-"@typescript-eslint/scope-manager@npm:5.44.0":
-  version: 5.44.0
-  resolution: "@typescript-eslint/scope-manager@npm:5.44.0"
+"@typescript-eslint/scope-manager@npm:5.45.0":
+  version: 5.45.0
+  resolution: "@typescript-eslint/scope-manager@npm:5.45.0"
  dependencies:
-    "@typescript-eslint/types": 5.44.0
-    "@typescript-eslint/visitor-keys": 5.44.0
-  checksum: 5e8cc97ae8c0eefd8e399df9d34e1afc634f238b2e10a2bb10cdcd72fb186a06219f87b418dce6944c68cf24a279e526eb46c1d3f10f1c0a1b0c12a61c226f32
+    "@typescript-eslint/types": 5.45.0
+    "@typescript-eslint/visitor-keys": 5.45.0
+  checksum: 79ccc74424b015568e122239fbd1d395c6c9da6c3c1569455f4c81ee1a036f3c8cee30e8b68e4aefe580e09a1026de365a65bd2a257039a3e5d767f88b9ae0a0
  languageName: node
  linkType: hard

-"@typescript-eslint/type-utils@npm:5.44.0":
-  version: 5.44.0
-  resolution: "@typescript-eslint/type-utils@npm:5.44.0"
+"@typescript-eslint/type-utils@npm:5.45.0":
+  version: 5.45.0
+  resolution: "@typescript-eslint/type-utils@npm:5.45.0"
  dependencies:
-    "@typescript-eslint/typescript-estree": 5.44.0
-    "@typescript-eslint/utils": 5.44.0
+    "@typescript-eslint/typescript-estree": 5.45.0
+    "@typescript-eslint/utils": 5.45.0
    debug: ^4.3.4
    tsutils: ^3.21.0
  peerDependencies:
@ -4119,23 +4119,23 @@ __metadata:
  peerDependenciesMeta:
    typescript:
      optional: true
-  checksum: 8e97d82d8465224148a18852ca3e9beaa0213e18d7161246a64923cb12efcf20a0d588a5be9d3cf81e344c65234d90ede00f29679a49d4aeee92f7220bd47b55
+  checksum: 0e9ea982f622ae9bb705723a5434428f08a232303019e43e53b8008837cdd3f2e7a262dbab53967b5aa99fee00be87cd1ba118dc5ae682a836b0993fa296927a
  languageName: node
  linkType: hard

-"@typescript-eslint/types@npm:5.44.0":
-  version: 5.44.0
-  resolution: "@typescript-eslint/types@npm:5.44.0"
-  checksum: 2829523bd0b0d94266c7ad3f42de8091327596e950d589fb55b7f46887663f882094fd0c812bfb3892197e598a6bad565bf2abb92acaa9cda8d4814a1faac3be
+"@typescript-eslint/types@npm:5.45.0":
+  version: 5.45.0
+  resolution: "@typescript-eslint/types@npm:5.45.0"
+  checksum: ef23914e289415732194db747fbdfd88c04f6c1bf7d4b32d74c7d02078cab85492d14f2fc59dc95fe046abe26b4643243ffac927b9078d8fb1794cc7858876b5
  languageName: node
  linkType: hard

-"@typescript-eslint/typescript-estree@npm:5.44.0":
-  version: 5.44.0
-  resolution: "@typescript-eslint/typescript-estree@npm:5.44.0"
+"@typescript-eslint/typescript-estree@npm:5.45.0":
+  version: 5.45.0
+  resolution: "@typescript-eslint/typescript-estree@npm:5.45.0"
  dependencies:
-    "@typescript-eslint/types": 5.44.0
-    "@typescript-eslint/visitor-keys": 5.44.0
+    "@typescript-eslint/types": 5.45.0
+    "@typescript-eslint/visitor-keys": 5.45.0
    debug: ^4.3.4
    globby: ^11.1.0
    is-glob: ^4.0.3
@ -4144,35 +4144,35 @@ __metadata:
  peerDependenciesMeta:
    typescript:
      optional: true
-  checksum: ef82a0da1744af2cd61125bfa51cb667d28af519d4a0b14ada47345cc5de3f60ac12130bdadca84f12145deb5ec48596ff6bb9db77d5c131471a4b8b8e94922f
+  checksum: 1148d0491efc4eb180e205f52f62f8f6f5f204162de28eb122565a367aa61ad538c51b241d98e3c02019da9e03b93c6b3fd8c2fa10577c5831cd6f42abc3c7f6
  languageName: node
  linkType: hard

-"@typescript-eslint/utils@npm:5.44.0":
-  version: 5.44.0
-  resolution: "@typescript-eslint/utils@npm:5.44.0"
+"@typescript-eslint/utils@npm:5.45.0":
+  version: 5.45.0
+  resolution: "@typescript-eslint/utils@npm:5.45.0"
  dependencies:
    "@types/json-schema": ^7.0.9
    "@types/semver": ^7.3.12
-    "@typescript-eslint/scope-manager": 5.44.0
-    "@typescript-eslint/types": 5.44.0
-    "@typescript-eslint/typescript-estree": 5.44.0
+    "@typescript-eslint/scope-manager": 5.45.0
+    "@typescript-eslint/types": 5.45.0
+    "@typescript-eslint/typescript-estree": 5.45.0
    eslint-scope: ^5.1.1
    eslint-utils: ^3.0.0
    semver: ^7.3.7
  peerDependencies:
    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: d6a76a9579633c7f1c5a310a968b59c3aa865a358f98dbe3c42b57a307d1a1ffa01bb03df07dee6386400a5230e9f8dba70158c7d6f5f5f66bdc2df3c04ef37b
+  checksum: 022ef5c81b4986f87a186bdff384c7dcc6ff08884935401b6c05e82554e404bc8010a7fb2f6413c0e6aad01ced667a221ed8d115bca4f97c21a002bbfefb66f0
  languageName: node
  linkType: hard

-"@typescript-eslint/visitor-keys@npm:5.44.0":
-  version: 5.44.0
-  resolution: "@typescript-eslint/visitor-keys@npm:5.44.0"
+"@typescript-eslint/visitor-keys@npm:5.45.0":
+  version: 5.45.0
+  resolution: "@typescript-eslint/visitor-keys@npm:5.45.0"
  dependencies:
-    "@typescript-eslint/types": 5.44.0
+    "@typescript-eslint/types": 5.45.0
    eslint-visitor-keys: ^3.3.0
-  checksum: 8043ab4e229fb086d10a0819bc9f3a3f434c5d65ab34b363c54056329396f9116ffc8debf7cf4288b85d8c7e601e5ecfce47de20143a7158804302fbb47e26b9
+  checksum: 47cde8f55f41d73e3df205e7ba2de9ab83f36a2cf3fe9aa7f24605cddfc914d9f4af2f16a7e36b348d1d990b3200c4c8e2b623332bc5eaf0c337afd18f6bd775
  languageName: node
  linkType: hard

@ -8196,7 +8196,7 @@ __metadata:
  languageName: node
  linkType: hard

-"eslint@npm:^8.27.0":
+"eslint@npm:^8.28.0":
  version: 8.28.0
  resolution: "eslint@npm:8.28.0"
  dependencies:
@ -14507,7 +14507,7 @@ __metadata:
  languageName: node
  linkType: hard

-"prettier@npm:^2.7.1":
+"prettier@npm:^2.8.0":
  version: 2.8.0
  resolution: "prettier@npm:2.8.0"
  bin: