@adobe-commerce/elsie 2.0.0 → 2.0.1-alpha-20260728135101

package/bin/builders/storybook/index.js

@@ -1,5 +1,13 @@
 const cli = require('../../lib/cli');
 
 module.exports = function generateResourceBuilder() {
-  return cli('storybook dev -h localhost -p 6006 --disable-telemetry --quiet');
+  return cli('storybook', [
+    'dev',
+    '-h',
+    'localhost',
+    '-p',
+    '6006',
+    '--disable-telemetry',
+    '--quiet',
+  ]);
 };

package/bin/builders/types/index.js

@@ -27,8 +27,7 @@ module.exports = async function tscBuilder({ argv } = {}) {
     return;
   }
 
-  const tscBin = require.resolve('typescript/bin/tsc');
-  return cli(`node ${tscBin} --noEmit --project ${configPath}`);
+  return cli('typescript', ['--noEmit', '--project', configPath], 'tsc');
 };
 
 module.exports.builder = (yargs) =>

package/bin/builders/types/validate-tsconfig.js

@@ -2,9 +2,9 @@
  *  Copyright 2025 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 const fs = require('fs');
@@ -67,7 +67,7 @@ module.exports = function validateTsconfig(configPath) {
     if (value !== undefined && removedValues.includes(value.toLowerCase())) {
       errors.push(
         `compilerOptions.${key}: "${value}" was removed in TypeScript 6. ` +
-          `Use ${key === 'moduleResolution' ? '"nodenext" or "bundler"' : '"es2015" or later'} instead.`
+          `Use ${key === 'moduleResolution' ? '"nodenext" or "bundler"' : '"es2015" or later'} instead.`,
       );
     }
   }
@@ -78,7 +78,7 @@ module.exports = function validateTsconfig(configPath) {
       if (compilerOptions[key] !== undefined) {
         warnings.push(
           `compilerOptions.${key} is deprecated in TypeScript 6 and will be removed in TS7. ` +
-            `Add "ignoreDeprecations": "6.0" to silence, or migrate away from this option.`
+            `Add "ignoreDeprecations": "6.0" to silence, or migrate away from this option.`,
         );
       }
     }

package/bin/index.js

@@ -10,7 +10,7 @@ yargs
   .command(
     'gql',
     'Generates types or mocks for your API',
-    require('./builders/gql')
+    require('./builders/gql'),
   )
   .command('build', 'Build bundles', require('./builders/build'))
   .command('test', 'Run Jest tests', require('./builders/test'))
@@ -18,24 +18,30 @@ yargs
   .command(
     'concurrently',
     'Run multiple commands concurrently',
-    require('./builders/concurrently')
+    // Loaded lazily: concurrently is ESM-only and only needs to resolve when this
+    // command actually runs, not whenever this CLI module is merely required.
+    (...args) => require('./builders/concurrently')(...args),
   )
   .command(
     'wait-on',
     'Wait for files, ports, sockets, or http(s) resources',
-    require('./builders/wait-on')
+    require('./builders/wait-on'),
   )
   .command(
     'types',
     'Type-check with TypeScript and validate tsconfig for TS6 compatibility',
-    require('./builders/types')
+    require('./builders/types'),
   )
   .command(
     'generate',
     'Generate a new <resource>',
-    require('./builders/generate')
+    require('./builders/generate'),
+  )
+  .command(
+    'changeset',
+    'Run changeset commands',
+    require('./builders/changeset'),
   )
-  .command('changeset', 'Run changeset commands', require('./builders/changeset'))
 
   .help('help')
 

package/bin/lib/cli.js

@@ -1,13 +1,14 @@
 const { spawn } = require('child_process');
+const resolveBin = require('./resolve-bin');
+
+module.exports = function cli(packageName, args = [], binName) {
+  const scriptPath = resolveBin(packageName, binName);
+  const passthroughArgs = process.argv.slice(3);
+  const allArgs = [scriptPath, ...args, ...passthroughArgs];
 
-module.exports = function cli(command) {
-  let cmd = command;
-  const argvs = process.argv.slice(3).join(' ');
-  if (argvs) cmd += ` ${argvs}`;
-  
   return new Promise((resolve, reject) => {
-    const child = spawn(cmd, { shell: true, stdio: 'inherit' });
-    
+    const child = spawn(process.execPath, allArgs, { stdio: 'inherit' });
+
     child.on('close', (code) => {
       if (code !== 0) {
         reject(new Error(`Command failed with exit code ${code}`));
@@ -15,7 +16,7 @@ module.exports = function cli(command) {
         resolve(child);
       }
     });
-    
+
     child.on('error', (err) => {
       reject(err);
     });

package/bin/lib/resolve-bin.js

@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = function resolveBin(packageName, binName = packageName) {
+  const pkgJsonPath = require.resolve(`${packageName}/package.json`);
+  const pkgDir = path.dirname(pkgJsonPath);
+  const { bin } = require(pkgJsonPath);
+  const binRelativePath = typeof bin === 'string' ? bin : bin[binName];
+  return path.join(pkgDir, binRelativePath);
+};

package/bin/lib/validate-typeof.js

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 module.exports = function validateTypeOf(values, rules) {

package/bin/lib/write-file.js

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 const path = require('path');

package/bin/lib/write-parent-index.js

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 const path = require('path');
@@ -13,7 +13,7 @@ const m = require('./log-message');
 
 module.exports = function writeParentIndex(
   filePath,
-  { pathname, importAliasRoot = '.' }
+  { pathname, importAliasRoot = '.' },
 ) {
   const relativePath = path.relative('.', filePath);
 

package/config/eslint.mjs

@@ -122,7 +122,8 @@ export const sourceImportRestrictions = [
             },
             {
               group: ['preact-i18n'],
-              message: 'Please use "@adobe-commerce/elsie/i18n" instead of "preact-i18n".',
+              message:
+                'Please use "@adobe-commerce/elsie/i18n" instead of "preact-i18n".',
             },
           ],
         },

package/config/jest.mjs

@@ -14,7 +14,9 @@ import { createRequire } from 'module';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const require = createRequire(import.meta.url);
 
-const { compilerOptions } = require(path.resolve(process.cwd(), 'tsconfig.json'));
+const { compilerOptions } = require(
+  path.resolve(process.cwd(), 'tsconfig.json'),
+);
 
 const paths = { ...compilerOptions.paths };
 
@@ -46,7 +48,10 @@ export default {
     '^react-dom/test-utils$': 'preact/test-utils',
     '^react-dom$': 'preact/compat',
     '^react$': 'preact/compat',
-    '\\.(css|less|scss|sass)\\?inline$': path.resolve(__dirname, '../tests/__mocks__/cssMock.js'),
+    '\\.(css|less|scss|sass)\\?inline$': path.resolve(
+      __dirname,
+      '../tests/__mocks__/cssMock.js',
+    ),
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
     '\\.svg': '@adobe-commerce/elsie/__mocks__/svg.js',
     '^@adobe-commerce/elsie/(.*)$': path.resolve(__dirname, '../src/$1'),

package/config/plugins/dts-normalize-relative-replacer.cjs

@@ -42,6 +42,6 @@ exports.default = function normalizeRelativeReplacer({ orig, file }) {
   if (rel === importPath) return orig;
   return orig.replace(
     `${openQuote}${importPath}${closeQuote}`,
-    `${openQuote}${rel}${closeQuote}`
+    `${openQuote}${rel}${closeQuote}`,
   );
 };

package/config/plugins/dts.mjs

@@ -88,7 +88,7 @@ export function dtsPlugin({
       // truth — tsconfig files do not need to define declarationDir themselves.
       execSync(
         `"${tscBin}" -p "${tsconfigAbsPath}" --declarationDir "${absDeclDir}"`,
-        { stdio: 'inherit', cwd }
+        { stdio: 'inherit', cwd },
       );
 
       {
@@ -127,7 +127,8 @@ export function dtsPlugin({
       // receive the import *clause* (not the trailing ';'), so returning '' from
       // one leaves an invalid bare ';' (TS1036). Removing the whole statement in
       // a single pass avoids that.
-      const PURE_IMPORT = /^[ \t]*import\s+['"][^'"]+['"][^\S\r\n]*;?[^\S\r\n]*(?:\r?\n|$)/gm;
+      const PURE_IMPORT =
+        /^[ \t]*import\s+['"][^'"]+['"][^\S\r\n]*;?[^\S\r\n]*(?:\r?\n|$)/gm;
       for (const filePath of walkDts(absDeclDir)) {
         const content = readFileSync(filePath, 'utf-8');
         const cleaned = content.replace(PURE_IMPORT, '');
@@ -148,7 +149,7 @@ export function dtsPlugin({
         const isLocalFile =
           existsSync(absSrc) ||
           ['.ts', '.tsx', '.js', '.jsx'].some((ext) =>
-            existsSync(absSrc + ext)
+            existsSync(absSrc + ext),
           );
         if (!isLocalFile) {
           writeFileSync(barrelPath, `export * from '${srcPath}';\n`, 'utf-8');

package/config/prettier.json

@@ -1,7 +1,29 @@
 {
-  "tabWidth": 2,
+  "trailingComma": "all",
   "useTabs": false,
+  "semi": true,
+  "tabWidth": 2,
   "singleQuote": true,
-  "trailingComma": "es5",
-  "semi": true
+  "overrides": [
+    {
+      "files": ["*.json", "*.json5"],
+      "options": {
+        "parser": "json",
+        "trailingComma": "none"
+      }
+    },
+    {
+      "files": ["*.yaml", "*.yml"],
+      "options": {
+        "singleQuote": false
+      }
+    },
+    {
+      "files": ["*.md", "*.mdx"],
+      "options": {
+        "proseWrap": "always",
+        "printWidth": 80
+      }
+    }
+  ]
 }

package/config/setEnvVars.mjs

@@ -8,7 +8,7 @@
  *******************************************************************/
 
 // Used in the Price component to avoid using the system locale in tests, which can be different between computers
-process.env.LOCALE = "en-US";
+process.env.LOCALE = 'en-US';
 
 // Used mainly for the elsie generator to avoid issues with the system locale in tests
-process.env.LANG = "en_US.UTF-8";
+process.env.LANG = 'en_US.UTF-8';

package/config/storybook/addon.js

@@ -74,7 +74,7 @@ module.exports = (_storybookOptions, { dropinViteConfig = true } = {}) => ({
         Object.entries(env).map(([k, v]) => [
           `process.env.${k}`,
           JSON.stringify(v),
-        ])
+        ]),
       ),
     };
 
@@ -108,8 +108,8 @@ module.exports = (_storybookOptions, { dropinViteConfig = true } = {}) => ({
         ...(Array.isArray(config.resolve?.alias)
           ? config.resolve.alias
           : Object.entries(config.resolve?.alias ?? {}).map(
-            ([find, replacement]) => ({ find, replacement })
-          )),
+              ([find, replacement]) => ({ find, replacement }),
+            )),
         {
           find: /^@adobe-commerce\/elsie\/src(.*)$/,
           replacement: `${elsieRoot}/src$1`,
@@ -138,10 +138,10 @@ module.exports = (_storybookOptions, { dropinViteConfig = true } = {}) => ({
     const sbComponentEntries = fs
       .readdirSync(sbComponentsDir)
       .filter((entry) =>
-        fs.statSync(path.join(sbComponentsDir, entry)).isDirectory()
+        fs.statSync(path.join(sbComponentsDir, entry)).isDirectory(),
       )
       .map(
-        (name) => `@adobe-commerce/elsie/config/storybook/components/${name}`
+        (name) => `@adobe-commerce/elsie/config/storybook/components/${name}`,
       );
 
     config.optimizeDeps = {

package/config/storybook/components/FileTree/FileTree.jsx

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import { createContext, memo, useCallback, useContext, useState } from 'react';
@@ -136,7 +136,7 @@ const Folder = memo(
         )}
       </li>
     );
-  }
+  },
 );
 Folder.displayName = 'Folder';
 

package/config/storybook/components/FileTree/index.js

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
-export * from '@adobe-commerce/elsie/config/storybook/components/FileTree/FileTree';
+export * from '@adobe-commerce/elsie/config/storybook/components/FileTree/FileTree';

package/config/storybook/components/Flex/Flex.jsx

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import styles from './Flex.module.css';

package/config/storybook/components/Flex/index.js

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 export * from '@adobe-commerce/elsie/config/storybook/components/Flex/Flex';

package/config/storybook/components/OptionsTable/OptionsTable.jsx

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import React from 'react';

package/config/storybook/components/OptionsTable/index.js

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
-export * from '@adobe-commerce/elsie/config/storybook/components/OptionsTable/OptionsTable';
+export * from '@adobe-commerce/elsie/config/storybook/components/OptionsTable/OptionsTable';

package/config/storybook/components/Panel/Panel.tsx

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import { FunctionComponent, toChildArray } from 'preact';
@@ -31,10 +31,10 @@ export const Panel: FunctionComponent<PanelProps> = ({
     hasHeader && !hasFooter
       ? childrenArray.slice(1)
       : !hasHeader && hasFooter
-      ? childrenArray.slice(0, -1)
-      : hasHeader && hasFooter
-      ? childrenArray.slice(1, -1)
-      : childrenArray;
+        ? childrenArray.slice(0, -1)
+        : hasHeader && hasFooter
+          ? childrenArray.slice(1, -1)
+          : childrenArray;
 
   return (
     <div className={`${styles.panel}`}>

package/config/storybook/components/Panel/index.ts

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 export * from '@adobe-commerce/elsie/config/storybook/components/Panel/Panel';

package/config/storybook/components/Screenshot/Screenshot.jsx

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import styles from './Screenshot.module.css';

package/config/storybook/components/Screenshot/index.js

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
-export * from '@adobe-commerce/elsie/config/storybook/components/Screenshot/Screenshot';
+export * from '@adobe-commerce/elsie/config/storybook/components/Screenshot/Screenshot';

package/config/storybook/components/Steps/Steps.jsx

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import { Unstyled } from '@storybook/addon-docs/blocks';

package/config/storybook/components/Steps/index.js

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
-export * from '@adobe-commerce/elsie/config/storybook/components/Steps/Steps';
+export * from '@adobe-commerce/elsie/config/storybook/components/Steps/Steps';

package/config/storybook/components/StoryWrapper/StoryWrapper.jsx

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import styles from './StoryWrapper.module.css';

package/config/storybook/components/StoryWrapper/index.js

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 export * from '@adobe-commerce/elsie/config/storybook/components/StoryWrapper/StoryWrapper';

package/config/storybook/components/Summary/Summary.jsx

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import { Unstyled } from '@storybook/addon-docs/blocks';

package/config/storybook/components/Summary/index.js

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 export * from '@adobe-commerce/elsie/config/storybook/components/Summary/Summary';

package/config/storybook/components/Variants/Variants.jsx

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import { useState } from 'preact/hooks';
@@ -14,12 +14,12 @@ import './docs.css';
 export const Variants = ({ of, storyOrder = [] }) => {
   const info = useOf(of || 'story', ['story', 'meta', 'component']);
   const stories = Object.values(info.csfFile.stories).map(
-    (story) => story.moduleExport
+    (story) => story.moduleExport,
   );
   const [bgColor, setBgColor] = useState('#F5F5F5');
   const toggleBgColor = () => {
     setBgColor((prevColor) =>
-      prevColor === '#F5F5F5' ? '#222222' : '#F5F5F5'
+      prevColor === '#F5F5F5' ? '#222222' : '#F5F5F5',
     );
   };
 
@@ -42,10 +42,14 @@ export const Variants = ({ of, storyOrder = [] }) => {
             <div className="story__item story__item--left">
               <h3 className="docs__header3">{story.name}</h3>
               <p className="docs__paragraph">
-                {story.parameters.docs.description || `Add description to ${story.name}.stories.tsx.`}
+                {story.parameters.docs.description ||
+                  `Add description to ${story.name}.stories.tsx.`}
               </p>
             </div>
-            <div className="story__item story__item--right" style={{ backgroundColor: bgColor }}>
+            <div
+              className="story__item story__item--right"
+              style={{ backgroundColor: bgColor }}
+            >
               <Story of={story} />
               <Source of={story} />
             </div>