From 398bfa879e92319086bc5656ac4b8a3e538ad872 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 2 Feb 2023 20:23:47 -0600
Subject: [PATCH] Lint storybook sample code

---
 app/soapbox/utils/media.ts |  8 ++++----
 stories/Button.stories.tsx |  2 +-
 stories/Button.tsx         |  2 +-
 stories/Header.stories.tsx |  2 +-
 stories/Header.tsx         | 26 +++++++++++++-------------
 stories/Page.stories.tsx   |  3 ++-
 stories/Page.tsx           | 22 +++++++++++-----------
 stories/button.css         |  5 +++++
 8 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/app/soapbox/utils/media.ts b/app/soapbox/utils/media.ts
index a9ffb88a1..9143061ff 100644
--- a/app/soapbox/utils/media.ts
+++ b/app/soapbox/utils/media.ts
@@ -62,11 +62,11 @@ const addAutoPlay = (html: string): string => {
   try {
     const document = domParser.parseFromString(html, 'text/html').documentElement;
     const iframe = document.querySelector('iframe');
-  
+
     if (iframe) {
       const url = new URL(iframe.src);
       const provider = new URL(iframe.src).host;
-  
+
       if (provider === VideoProviders.RUMBLE) {
         url.searchParams.append('pub', '7a20');
         url.searchParams.append('autoplay', '2');
@@ -75,9 +75,9 @@ const addAutoPlay = (html: string): string => {
         url.searchParams.append('auto_play', '1');
         iframe.allow = 'autoplay';
       }
-  
+
       iframe.src = url.toString();
-  
+
       // DOM parser creates html/body elements around original HTML fragment,
       // so we need to get innerHTML out of the body and not the entire document
       return (document.querySelector('body') as HTMLBodyElement).innerHTML;
diff --git a/stories/Button.stories.tsx b/stories/Button.stories.tsx
index c331bd485..70d075835 100644
--- a/stories/Button.stories.tsx
+++ b/stories/Button.stories.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
 
 import { Button } from './Button';
 
diff --git a/stories/Button.tsx b/stories/Button.tsx
index c33be6ec5..7fcdd4f1e 100644
--- a/stories/Button.tsx
+++ b/stories/Button.tsx
@@ -37,7 +37,7 @@ export const Button = ({
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
   return (
     <button
-      type="button"
+      type='button'
       className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
       style={{ backgroundColor }}
       {...props}
diff --git a/stories/Header.stories.tsx b/stories/Header.stories.tsx
index 7e9283eaf..4e57e9981 100644
--- a/stories/Header.stories.tsx
+++ b/stories/Header.stories.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import React from 'react';
 
 import { Header } from './Header';
 
diff --git a/stories/Header.tsx b/stories/Header.tsx
index dc3f3c19c..99fd34d61 100644
--- a/stories/Header.tsx
+++ b/stories/Header.tsx
@@ -16,21 +16,21 @@ interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
   <header>
-    <div className="wrapper">
+    <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">
+        <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"
+              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"
+              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"
+              d='M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z'
+              fill='#91BAF8'
             />
           </g>
         </svg>
@@ -39,15 +39,15 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
       <div>
         {user ? (
           <>
-            <span className="welcome">
+            <span className='welcome'>
               Welcome, <b>{user.name}</b>!
             </span>
-            <Button size="small" onClick={onLogout} label="Log out" />
+            <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" />
+            <Button size='small' onClick={onLogin} label='Log in' />
+            <Button primary size='small' onClick={onCreateAccount} label='Sign up' />
           </>
         )}
       </div>
diff --git a/stories/Page.stories.tsx b/stories/Page.stories.tsx
index a0ea79fd6..f97a68714 100644
--- a/stories/Page.stories.tsx
+++ b/stories/Page.stories.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
+import React from 'react';
+
 import { Page } from './Page';
 
 export default {
diff --git a/stories/Page.tsx b/stories/Page.tsx
index 522d34294..b2bee0660 100644
--- a/stories/Page.tsx
+++ b/stories/Page.tsx
@@ -7,7 +7,7 @@ type User = {
   name: string;
 };
 
-export const Page: React.VFC = () => {
+export const Page: React.FC = () => {
   const [user, setUser] = React.useState<User>();
 
   return (
@@ -23,7 +23,7 @@ export const Page: React.VFC = () => {
         <h2>Pages in Storybook</h2>
         <p>
           We recommend building UIs with a{' '}
-          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+          <a href='https://componentdriven.org' target='_blank' rel='noopener noreferrer'>
             <strong>component-driven</strong>
           </a>{' '}
           process starting with atomic components and ending with pages.
@@ -45,23 +45,23 @@ export const Page: React.VFC = () => {
         </ul>
         <p>
           Get a guided tutorial on component-driven development at{' '}
-          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+          <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">
+          <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">
+        <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"
+                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>
diff --git a/stories/button.css b/stories/button.css
index dc91dc763..ce430e5a6 100644
--- a/stories/button.css
+++ b/stories/button.css
@@ -7,23 +7,28 @@
   display: inline-block;
   line-height: 1;
 }
+
 .storybook-button--primary {
   color: white;
   background-color: #1ea7fd;
 }
+
 .storybook-button--secondary {
   color: #333;
   background-color: transparent;
   box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
 }
+
 .storybook-button--small {
   font-size: 12px;
   padding: 10px 16px;
 }
+
 .storybook-button--medium {
   font-size: 14px;
   padding: 11px 20px;
 }
+
 .storybook-button--large {
   font-size: 16px;
   padding: 12px 24px;