refactor: format code

.github/workflows/release.yml

@@ -25,4 +25,4 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: yarn release
+        run: yarn release

.storybook/preview.ts

@@ -1,4 +1,4 @@
-import { Preview } from '@storybook/react';
+import { Preview } from "@storybook/react";
 
 const preview: Preview = {
   parameters: {
@@ -9,6 +9,6 @@ const preview: Preview = {
       },
     },
   },
-}
+};
 
-export default preview;
+export default preview;

CHANGELOG.md

@@ -97,8 +97,6 @@
 
 # v1.0.1 (Sun Dec 12 2021)
 
-
-
 ---
 
 # v1.0.0 (Sun Dec 12 2021)

README.md

@@ -21,10 +21,11 @@ It was slightly modified to generate bundles that can be imported for partial us
 
 ## What it's for
 
-Three things you can use this addon for:  
-1. Explore associated JSON Schema documentation, in a nicely organized fashion in the `JSON Schema Explorer`  
-2. Configure components through Controls, copy the resulting JSON as a starting point or template for API-usage / data generation purposes in the `JSON Code Editor`  
-3. Paste JSON to validate data or preview component state in the `JSON Code Editor`  
+Three things you can use this addon for:
+
+1. Explore associated JSON Schema documentation, in a nicely organized fashion in the `JSON Schema Explorer`
+2. Configure components through Controls, copy the resulting JSON as a starting point or template for API-usage / data generation purposes in the `JSON Code Editor`
+3. Paste JSON to validate data or preview component state in the `JSON Code Editor`
 
 ## Getting started
 
@@ -40,7 +41,7 @@ Second step, register the addon inside your `.storybook/main.js` (just add it to
 
 ```javascript
 module.exports = {
-  addons: ['@kickstartds/storybook-addon-jsonschema']
+  addons: ["@kickstartds/storybook-addon-jsonschema"],
 };
 ```
 
@@ -53,21 +54,21 @@ export default {
   parameters: {
     jsonschema: {
       schema: {
-        "$schema": "http://json-schema.org/draft-07/schema#",
-        "$id": "https://my-components/button.schema.json",
-        "type": "object",
-        "properties": {
-          "primary": {
-            "type": "boolean",
-            "default": false,
+        $schema: "http://json-schema.org/draft-07/schema#",
+        $id: "https://my-components/button.schema.json",
+        type: "object",
+        properties: {
+          primary: {
+            type: "boolean",
+            default: false,
+          },
+          label: {
+            type: "string",
           },
-          "label": {
-            "type": "string"
-          }
-        }
-      }
-    }
-  }
+        },
+      },
+    },
+  },
 };
 ```
 

manager.js

@@ -1 +1 @@
-export * from "./dist/esm/manager";
+export * from "./dist/esm/manager";

package.json

@@ -102,4 +102,4 @@
     ],
     "icon": "https://opencollective-production.s3.us-west-1.amazonaws.com/1e445ca0-fca9-11e9-a830-c36c137aded5.png"
   }
-}
+}

src/components/SchemaDoc.tsx

@@ -91,7 +91,7 @@ export const SchemaDoc: React.FC<SchemaDocProps> = ({
   const currentPathElement = path[path.length - 1];
   const currentSchema = getSchemaFromReference(
     currentPathElement.reference,
-    lookup
+    lookup,
   );
 
   if (currentSchema === undefined) {

src/components/SchemaView.tsx

@@ -45,10 +45,10 @@ const SchemaEditorContainerHeading = styled.h3`
 export const SchemaView: React.FC = () => {
   const { schema, fromArgs, toArgs } = useParameter<JsonSchemaParameter>(
     PARAM_KEY,
-    { schema: {} }
+    { schema: {} },
   );
   const [validationResults, setValidationResults] = useState<editor.IMarker[]>(
-    []
+    [],
   );
   const [selectedValidation, setSelectedValidation] = useState<IRange>();
   return (

src/constants.ts

@@ -4,8 +4,10 @@ import type { JsonSchema } from "@kickstartds/json-schema-viewer";
 export const ADDON_ID = "storybook/jsonschema";
 export const PANEL_ID = `${ADDON_ID}/panel`;
 export const PARAM_KEY = "jsonschema";
-export type JsonSchemaParameter = {
-  schema: JsonSchema;
-  fromArgs?: (args: Args) => Record<string, any>;
-  toArgs?: (obj: Record<string, any>) => Args;
-} | undefined;
+export type JsonSchemaParameter =
+  | {
+      schema: JsonSchema;
+      fromArgs?: (args: Args) => Record<string, any>;
+      toArgs?: (obj: Record<string, any>) => Args;
+    }
+  | undefined;

stories/button/Button.jsx

@@ -1,16 +1,20 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './button.css';
+import React from "react";
+import PropTypes from "prop-types";
+import "./button.css";
 
 /**
  * Primary UI component for user interaction
  */
 export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  const mode = primary
+    ? "storybook-button--primary"
+    : "storybook-button--secondary";
   return (
     <button
       type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      className={["storybook-button", `storybook-button--${size}`, mode].join(
+        " ",
+      )}
       style={backgroundColor && { backgroundColor }}
       {...props}
     >
@@ -31,7 +35,7 @@ Button.propTypes = {
   /**
    * How large should the button be?
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size: PropTypes.oneOf(["small", "medium", "large"]),
   /**
    * Button contents
    */
@@ -45,6 +49,6 @@ Button.propTypes = {
 Button.defaultProps = {
   backgroundColor: null,
   primary: false,
-  size: 'medium',
+  size: "medium",
   onClick: undefined,
 };

stories/button/button.css

@@ -1,5 +1,5 @@
 .storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 700;
   border: 0;
   border-radius: 3em;

stories/header/Header.jsx

@@ -1,13 +1,18 @@
-import React from 'react';
+import React from "react";
 
-import { Button } from '../button/Button';
-import './header.css';
+import { Button } from "../button/Button";
+import "./header.css";
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
   <header>
     <div className="storybook-header">
       <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <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"
@@ -36,7 +41,12 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
         ) : (
           <>
             <Button size="small" onClick={onLogin} label="Log in" />
-            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+            <Button
+              primary
+              size="small"
+              onClick={onCreateAccount}
+              label="Sign up"
+            />
           </>
         )}
       </div>

stories/header/header.css

@@ -1,5 +1,5 @@
 .storybook-header {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 15px 20px;
   display: flex;

stories/page/Page.jsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React from "react";
 
-import { Header } from '../header/Header';
-import './page.css';
+import { Header } from "../header/Header";
+import "./page.css";
 
 export const Page = () => {
   const [user, setUser] = React.useState();
@@ -10,49 +10,67 @@ export const Page = () => {
     <article>
       <Header
         user={user}
-        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogin={() => setUser({ name: "Jane Doe" })}
         onLogout={() => setUser(undefined)}
-        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+        onCreateAccount={() => setUser({ name: "Jane Doe" })}
       />
 
       <section className="storybook-page">
         <h2>Pages in Storybook</h2>
         <p>
-          We recommend building UIs with a{' '}
-          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+          We recommend building UIs with a{" "}
+          <a
+            href="https://componentdriven.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             <strong>component-driven</strong>
-          </a>{' '}
+          </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:
+          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
+            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.
+            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">
+          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">
+          . 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">
+          <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"

stories/page/page.css

@@ -1,5 +1,5 @@
 .storybook-page {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 24px;
   padding: 48px 20px;

tsconfig.json

@@ -15,7 +15,5 @@
     "skipLibCheck": true,
     "target": "es5"
   },
-  "include": [
-    "src/**/*"
-  ],
-}
+  "include": ["src/**/*"]
+}