fix: Fonts and prettier formatting

.babelrc.json

@@ -12,4 +12,4 @@
     "@babel/preset-react"
   ],
   "plugins": []
-}
+}

.prettierignore

@@ -0,0 +1,4 @@
+.devcontainer
+.github
+node_modules
+.cache

.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

.storybook/main.js

@@ -1,13 +1,10 @@
 /** @type { import('@storybook/react-webpack5').StorybookConfig } */
 const config = {
-  stories: [
-    "../src/**/*.mdx", 
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
     '@storybook/addon-links',
     '../addons/addon-html/src',
     {
@@ -18,11 +15,11 @@ const config = {
     },
   ],
   framework: {
-    name: "@storybook/react-webpack5",
+    name: '@storybook/react-webpack5',
     options: {},
   },
   docs: {
-    autodocs: "tag",
+    autodocs: 'tag',
   },
 };
 export default config;

.storybook/manager.js

@@ -2,5 +2,5 @@ import { addons } from '@storybook/manager-api';
 import theme from './theme';
 
 addons.setConfig({
-  theme
-});
+  theme,
+});

.storybook/preview.js

@@ -1,10 +1,9 @@
-
 import '../src/css/tailwind.css';
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
-  matchers: {
+    matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
@@ -21,7 +20,7 @@ export const parameters = {
   },
   options: {
     storySort: {
-      order: ['Core',['Overview', 'Colours','Layout',],'Components'],
+      order: ['Core', ['Overview', 'Colours', 'Layout'], 'Components'],
     },
   },
-}
+};

.storybook/theme.js

@@ -4,7 +4,8 @@ export default create({
   base: 'light',
   brandTitle: 'iugu UX',
   brandUrl: '',
-  brandImage: 'https://s3-sa-east-1.amazonaws.com/prod-jobsite-files.kenoby.com/uploads/desativado-1617737004-logo-iugu-4-devs-novopng.png',
+  brandImage:
+    'https://s3-sa-east-1.amazonaws.com/prod-jobsite-files.kenoby.com/uploads/desativado-1617737004-logo-iugu-4-devs-novopng.png',
   brandTarget: '_self',
 
   // UI
@@ -28,6 +29,5 @@ export default create({
   inputBg: '#FFFFFF',
   inputBorder: '#CBCBCA',
   inputTextColor: '#333',
-  inputBorderRadius: 4
-
-});
+  inputBorderRadius: 4,
+});

addons/addon-html/src/components/Panel.jsx

@@ -1,10 +1,10 @@
-import React, { useMemo } from "react";
-import { useAddonState, useChannel, useParameter } from "@storybook/api";
-import { AddonPanel } from "@storybook/components";
-import { ADDON_ID, EVENTS, PARAM_KEY } from '../constants'
-import { format as prettierFormat } from "prettier/standalone";
-import prettierHtml from "prettier/parser-html";
-import { PanelContent } from "./PanelContent";
+import React, { useMemo } from 'react';
+import { useAddonState, useChannel, useParameter } from '@storybook/api';
+import { AddonPanel } from '@storybook/components';
+import { ADDON_ID, EVENTS, PARAM_KEY } from '../constants';
+import { format as prettierFormat } from 'prettier/standalone';
+import prettierHtml from 'prettier/parser-html';
+import { PanelContent } from './PanelContent';
 
 export const Panel = (props) => {
   // https://storybook.js.org/docs/react/addons/addons-api#useaddonstate
@@ -25,16 +25,16 @@ export const Panel = (props) => {
   } = parameters;
 
   const prettierConfig = {
-    htmlWhitespaceSensitivity: "ignore",
+    htmlWhitespaceSensitivity: 'ignore',
     ...prettier,
     // Ensure we always pick the html parser
-    parser: "html",
+    parser: 'html',
     plugins: [prettierHtml],
   };
 
   const formattedCode = useMemo(
     () => code && prettierFormat(code, prettierConfig),
-    [code, prettierConfig],
+    [code, prettierConfig]
   );
 
   return (
@@ -46,4 +46,4 @@ export const Panel = (props) => {
       />
     </AddonPanel>
   );
-};
+};

addons/addon-html/src/components/PanelContent.jsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React from 'react';
 
-import style from "react-syntax-highlighter/dist/esm/styles/hljs/github";
-import SyntaxHighlighter from "./SyntaxHighligher";
+import style from 'react-syntax-highlighter/dist/esm/styles/hljs/github';
+import SyntaxHighlighter from './SyntaxHighligher';
 
 /**
  * Checkout https://github.com/storybookjs/storybook/blob/next/code/addons/jest/src/components/Panel.tsx
@@ -10,14 +10,14 @@ import SyntaxHighlighter from "./SyntaxHighligher";
 export const PanelContent = ({ code, showLineNumbers, wrapLines }) => {
   return (
     <SyntaxHighlighter
-    language={"xml"}
-    copyable={true}
-    padded={true}
-    style={style}
-    showLineNumbers={showLineNumbers}
-    wrapLines={wrapLines}
-  >
-    {code}
-  </SyntaxHighlighter>
-  )
-}
+      language={'xml'}
+      copyable={true}
+      padded={true}
+      style={style}
+      showLineNumbers={showLineNumbers}
+      wrapLines={wrapLines}
+    >
+      {code}
+    </SyntaxHighlighter>
+  );
+};

addons/addon-html/src/components/SyntaxHighligher.jsx

@@ -1,16 +1,16 @@
-import React, { useState } from "react";
-import { styled } from "@storybook/theming";
+import React, { useState } from 'react';
+import { styled } from '@storybook/theming';
 
-import { ActionBar, ScrollArea } from "@storybook/components";
+import { ActionBar, ScrollArea } from '@storybook/components';
 
-import ReactSyntaxHighlighter from "react-syntax-highlighter";
+import ReactSyntaxHighlighter from 'react-syntax-highlighter';
 
 const Pre = styled.pre(({ theme, padded }) => ({
-  display: "flex !important",
-  justifyContent: "flex-start",
+  display: 'flex !important',
+  justifyContent: 'flex-start',
   margin: 0,
   padding: padded ? `${theme.layoutMargin}px !important` : 0,
-  tabSize: "2",
+  tabSize: '2',
 }));
 
 const Code = styled.code`
@@ -35,7 +35,7 @@ const Code = styled.code`
 `;
 
 export default function SyntaxHighlighter({
-  language = "jsx",
+  language = 'jsx',
   copyable = false,
   bordered = false,
   padded = false,
@@ -69,17 +69,17 @@ export default function SyntaxHighlighter({
           CodeTag={Code}
           showLineNumbers={showLineNumbers}
           wrapLines={wrapLines}
-          lineProps={{ className: "code-line" }}
+          lineProps={{ className: 'code-line' }}
           {...rest}
         >
           {children.trim()}
         </ReactSyntaxHighlighter>
       </ScrollArea>
       {copyable && (
         <ActionBar
-          actionItems={[{ title: copied ? "Copied" : "Copy", onClick }]}
+          actionItems={[{ title: copied ? 'Copied' : 'Copy', onClick }]}
         />
       )}
     </>
   );
-}
+}

addons/addon-html/src/constants.js

@@ -1,6 +1,6 @@
-export const ADDON_ID = "storybook/html";
+export const ADDON_ID = 'storybook/html';
 export const PANEL_ID = `${ADDON_ID}/panel`;
 export const PARAM_KEY = `html`;
 export const EVENTS = {
   CODE_UPDATE: `${ADDON_ID}/codeUpdate`,
-};
+};

addons/addon-html/src/index.js

@@ -1,5 +1,5 @@
 if (module && module.hot && module.hot.decline) {
-    module.hot.decline();
-  } // make it work with --isolatedModules
-  
-  export default {};
+  module.hot.decline();
+} // make it work with --isolatedModules
+
+export default {};

addons/addon-html/src/manager.js

@@ -1,5 +1,3 @@
-
-
 import { addons, types } from '@storybook/manager-api';
 import { Panel } from './components/Panel';
 import { ADDON_ID, PANEL_ID } from './constants';
@@ -8,7 +6,7 @@ addons.register(ADDON_ID, () => {
   addons.add(PANEL_ID, {
     title: 'Html',
     type: types.PANEL,
-    match: ({ viewMode }) => viewMode === "story",
-    render: Panel
+    match: ({ viewMode }) => viewMode === 'story',
+    render: Panel,
   });
-});
+});

addons/addon-html/src/preset.js

@@ -1,14 +1,14 @@
 // /my-addon/src/preset.js
 
 function config(entry = []) {
-  return [...entry, require.resolve("./preview")];
+  return [...entry, require.resolve('./preview')];
 }
 
 function managerEntries(entry = []) {
-  return [...entry, require.resolve("./manager")];
+  return [...entry, require.resolve('./manager')];
 }
 
 module.exports = {
   managerEntries,
   config,
-};
+};

addons/addon-html/src/preview.js

@@ -1,2 +1,2 @@
-import { withHTML } from "./withHTML";
-export const decorators = [withHTML];
+import { withHTML } from './withHTML';
+export const decorators = [withHTML];

addons/addon-html/src/withHTML.js

@@ -1,32 +1,31 @@
-import { makeDecorator, useChannel } from "@storybook/addons";
-import { EVENTS } from "./constants";
+import { makeDecorator, useChannel } from '@storybook/addons';
+import { EVENTS } from './constants';
 
-
-console.log('with html loading...')
+console.log('with html loading...');
 
 export const withHTML = makeDecorator({
-  name: "withHTML",
-  parameterName: "html",
+  name: 'withHTML',
+  parameterName: 'html',
   skipIfNoParametersOrOptions: false,
   wrapper: (storyFn, context, { parameters = {} }) => {
     const emit = useChannel({});
     setTimeout(() => {
-      const rootSelector = parameters.root || "#storybook-root, #root";
+      const rootSelector = parameters.root || '#storybook-root, #root';
       const root = document.querySelector(rootSelector);
       let code = root ? root.innerHTML : `${rootSelector} not found.`;
-      console.log(code)
+      console.log(code);
       const { removeEmptyComments, removeComments, transform } = parameters;
       if (removeEmptyComments) {
-        code = code.replace(/<!--\s*-->/g, "");
+        code = code.replace(/<!--\s*-->/g, '');
       }
       if (removeComments === true) {
-        code = code.replace(/<!--[\S\s]*?-->/g, "");
+        code = code.replace(/<!--[\S\s]*?-->/g, '');
       } else if (removeComments instanceof RegExp) {
         code = code.replace(/<!--([\S\s]*?)-->/g, (match, p1) =>
-          removeComments.test(p1) ? "" : match,
+          removeComments.test(p1) ? '' : match
         );
       }
-      if (typeof transform === "function") {
+      if (typeof transform === 'function') {
         try {
           code = transform(code);
         } catch (e) {
@@ -41,4 +40,4 @@ export const withHTML = makeDecorator({
 
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
-}
+}

package.json

@@ -9,7 +9,8 @@
     "build-storybook": "storybook build",
     "chromatic": "chromatic --exit-zero-on-changes",
     "test-storybook": "test-storybook",
-    "semantic-release": "semantic-release"
+    "semantic-release": "semantic-release",
+    "prettier": "prettier --write ."
   },
   "release": {
     "branches": [
@@ -50,7 +51,7 @@
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "postcss": "^8.4.23",
-    "prettier": "^2.8.8",
+    "prettier": "2.8.8",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
-    plugins: {
-      tailwindcss: {},
-      autoprefixer: {},
-    },
-  };
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};