added semicolon to prettier configuration

Vizzuality · Jun 8, 2021 · 8b12064 · 8b12064
1 parent 92b2597
commit 8b12064
Show file tree

Hide file tree

Showing 93 changed files with 893 additions and 1,121 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -16,15 +16,25 @@ module.exports = {
   },
   plugins: ['@typescript-eslint', 'prettier'],
   rules: {
+    'prettier/prettier': [
+      'error',
+      {},
+      {
+        usePrettierrc: true,
+      },
+    ],
     // https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#eslint
     'react/react-in-jsx-scope': 'off',
     // NextJs specific fix: allow jsx syntax in js and ts files
     'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
-    'react/jsx-props-no-spreading': ['error', {
-      html: 'ignore',
-      custom: 'ignore',
-      exceptions: [''],
-    }],
+    'react/jsx-props-no-spreading': [
+      'error',
+      {
+        html: 'ignore',
+        custom: 'ignore',
+        exceptions: [''],
+      },
+    ],
     'import/no-named-as-default': 0,
     'import/extensions': [
       'error',
@@ -48,4 +58,4 @@ module.exports = {
       typescript: {},
     },
   },
-}
+};
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,5 +1,5 @@
 {
-  "semi": false,
+  "semi": true,
   "tabWidth": 2,
   "printWidth": 100,
   "singleQuote": true

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,26 +1,30 @@
-const path = require("path");
+const path = require('path');
 
 module.exports = {
-  stories: ["../docs/**/*.stories.@(js|jsx|ts|tsx|mdx)", "../components/**/*.stories.@(js|jsx|ts|tsx)", "../containers/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  stories: [
+    '../docs/**/*.stories.@(js|jsx|ts|tsx|mdx)',
+    '../components/**/*.stories.@(js|jsx|ts|tsx)',
+    '../containers/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   /* nextjs -> no need to import React and can use alias modules */
   webpackFinal: async (config) => {
     // *************************
     // RESOLVE node_modules
     // If you want to add a directory to search in that takes precedence over node_modules/:
     // https://webpack.js.org/configuration/resolve/#resolvemodules
-    config.resolve.modules = [path.resolve(__dirname, ".."), "node_modules"];
+    config.resolve.modules = [path.resolve(__dirname, '..'), 'node_modules'];
 
     // *************************
     // SVGS
     // Remove how storybook is handling the svgs. They are using file-loader
     // https://github.com/JetBrains/svg-sprite-loader/issues/267
-    config.module.rules = config.module.rules.map(rule => {
+    config.module.rules = config.module.rules.map((rule) => {
       if (rule.test.toString().includes('svg')) {
-        const test = rule.test.toString().replace('svg|', '').replace(/\//g, '')
-        return { ...rule, test: new RegExp(test) }
+        const test = rule.test.toString().replace('svg|', '').replace(/\//g, '');
+        return { ...rule, test: new RegExp(test) };
       } else {
-        return rule
+        return rule;
       }
     });
 
@@ -32,20 +36,21 @@ module.exports = {
           loader: 'svg-sprite-loader',
           options: {
             extract: false,
-          }
+          },
         },
         {
           loader: 'svgo-loader',
           options: {
             plugins: [
               { removeTitle: true },
               { convertColors: { shorthex: false } },
-              { convertPathData: false }
-            ]
-          }
-        }]
+              { convertPathData: false },
+            ],
+          },
+        },
+      ],
     });
 
     return config;
   },
-}
+};
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -2,7 +2,7 @@
 <link rel="stylesheet" href="/styles/tailwind.storybook.css" />
 
 <style>
-.sbdocs.sbdocs-content {
-  max-width: 1280px;
-}
+  .sbdocs.sbdocs-content {
+    max-width: 1280px;
+  }
 </style>
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -9,8 +9,9 @@ export const parameters = {
     storySort: {
       order: [
         'Intro',
-        'Docs', ['Install', 'Deploy', 'Authentication', 'Fetching', 'Media', 'Tests'],
-        'Components'
+        'Docs',
+        ['Install', 'Deploy', 'Authentication', 'Fetching', 'Media', 'Tests'],
+        'Components',
       ],
     },
   },

diff --git a/README.md b/README.md
@@ -2,16 +2,16 @@
 
 This is a project template which could be used to the creation of new projects. Some of the features included are:
 
-* Based on [Next.js](https://nextjs.org/)
-* [Tailwind](https://tailwindcss.com/) as CSS Framework
-* Reusable components such as forms, modals, icons, and other most use components
-* Authentication based on [Next-Auth](https://next-auth.js.org/) already implemented
-* [Redux](https://redux.js.org/) and [Redux-Toolkit](https://redux-toolkit.js.org/)
-* [Typescript](https://www.typescriptlang.org/) already configured
-* [Cypress](https://www.cypress.io/) as testing client
-* git workflow and hooks
-* editorconfig and code style based on [Airbnb](https://github.com/airbnb/javascript)
-* [Storybook](https://storybook.js.org/) also available and configured
+- Based on [Next.js](https://nextjs.org/)
+- [Tailwind](https://tailwindcss.com/) as CSS Framework
+- Reusable components such as forms, modals, icons, and other most use components
+- Authentication based on [Next-Auth](https://next-auth.js.org/) already implemented
+- [Redux](https://redux.js.org/) and [Redux-Toolkit](https://redux-toolkit.js.org/)
+- [Typescript](https://www.typescriptlang.org/) already configured
+- [Cypress](https://www.cypress.io/) as testing client
+- git workflow and hooks
+- editorconfig and code style based on [Airbnb](https://github.com/airbnb/javascript)
+- [Storybook](https://storybook.js.org/) also available and configured
 
 ## Getting Started
 

diff --git a/components/avatar/component.stories.tsx b/components/avatar/component.stories.tsx
@@ -21,32 +21,22 @@ Default.args = {
   bgImage: '/images/avatar.png',
 };
 
-export const Groups = ():ReactNode => (
+export const Groups = (): ReactNode => (
   <ul className="flex">
     <li>
-      <Avatar
-        bgImage="/images/avatar.png"
-      />
+      <Avatar bgImage="/images/avatar.png" />
     </li>
     <li className="-ml-3">
-      <Avatar
-        bgImage="/images/avatar.png"
-      />
+      <Avatar bgImage="/images/avatar.png" />
     </li>
     <li className="-ml-3">
-      <Avatar
-        bgImage="/images/avatar.png"
-      />
+      <Avatar bgImage="/images/avatar.png" />
     </li>
     <li className="-ml-3">
-      <Avatar
-        bgImage="/images/avatar.png"
-      />
+      <Avatar bgImage="/images/avatar.png" />
     </li>
     <li className="ml-3">
-      <Avatar
-        className="bg-white"
-      >
+      <Avatar className="bg-white">
         <Icon icon={HELP_SVG} className="w-5 h-5" />
       </Avatar>
     </li>

diff --git a/components/avatar/component.tsx b/components/avatar/component.tsx
@@ -7,18 +7,15 @@ export interface AvatarProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   bgImage?: string;
 }
 
-export const Avatar: FC<AvatarProps> = ({
-  children,
-  className,
-  bgImage,
-}: AvatarProps) => (
+export const Avatar: FC<AvatarProps> = ({ children, className, bgImage }: AvatarProps) => (
   <div
     className={cx({
-      'relative z-0 hover:z-10 flex items-center justify-center bg-transparent bg-cover bg-no-repeat bg-center border-2 border-gray-700 w-10 h-10 rounded-full': true,
+      'relative z-0 hover:z-10 flex items-center justify-center bg-transparent bg-cover bg-no-repeat bg-center border-2 border-gray-700 w-10 h-10 rounded-full':
+        true,
       [className]: !!className,
     })}
     style={{
-      ...bgImage && { backgroundImage: `url(${bgImage})` },
+      ...(bgImage && { backgroundImage: `url(${bgImage})` }),
     }}
   >
     {children}

diff --git a/components/button/component.tsx b/components/button/component.tsx
@@ -1,19 +1,23 @@
-import {
-  ButtonHTMLAttributes, AnchorHTMLAttributes, FC,
-} from 'react';
+import { ButtonHTMLAttributes, AnchorHTMLAttributes, FC } from 'react';
 import Link, { LinkProps } from 'next/link';
 import cx from 'classnames';
 
 const THEME = {
-  primary: 'text-black bg-blue-500 hover:bg-blue-400 active:bg-blue-300 border border-blue-500 hover:border-blue-400 active:border-blue-300',
-  'primary-alt': 'text-blue-500 bg-transparent hover:bg-transparent active:bg-transparent border border-blue-500 hover:border-blue-400 active:border-blue-300',
+  primary:
+    'text-black bg-blue-500 hover:bg-blue-400 active:bg-blue-300 border border-blue-500 hover:border-blue-400 active:border-blue-300',
+  'primary-alt':
+    'text-blue-500 bg-transparent hover:bg-transparent active:bg-transparent border border-blue-500 hover:border-blue-400 active:border-blue-300',
 
-  secondary: 'text-white bg-gray-500 hover:bg-gray-400 active:bg-gray-300 border border-gray-500 hover:border-gray-400 active:border-gray-300',
-  'secondary-alt': 'text-gray-300 bg-transparent hover:bg-transparent active:bg-transparent border border-gray-400 hover:border-gray-300 active:border-gray-200',
+  secondary:
+    'text-white bg-gray-500 hover:bg-gray-400 active:bg-gray-300 border border-gray-500 hover:border-gray-400 active:border-gray-300',
+  'secondary-alt':
+    'text-gray-300 bg-transparent hover:bg-transparent active:bg-transparent border border-gray-400 hover:border-gray-300 active:border-gray-200',
 
-  white: 'text-gray-700 bg-white hover:text-white hover:bg-transparent active:bg-transparent border border-gray-400 hover:border-gray-300 active:border-gray-200',
+  white:
+    'text-gray-700 bg-white hover:text-white hover:bg-transparent active:bg-transparent border border-gray-400 hover:border-gray-300 active:border-gray-200',
 
-  danger: 'text-red-700 bg-transparent hover:text-white hover:bg-red-700 active:bg-red-600 border border-red-700 hover:border-red-600 active:border-red-500',
+  danger:
+    'text-red-700 bg-transparent hover:text-white hover:bg-red-700 active:bg-red-600 border border-red-700 hover:border-red-600 active:border-red-500',
 };
 
 const SIZE = {
@@ -31,16 +35,18 @@ export interface AnchorButtonProps {
 }
 
 // Button props
-export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & AnchorButtonProps & {
-  href?: undefined;
-};
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
+  AnchorButtonProps & {
+    href?: undefined;
+  };
 
 // Anchor props
-export type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & AnchorButtonProps & {
-  href?: string;
-  disabled?: boolean;
-  anchorLinkProps?: LinkProps
-};
+export type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> &
+  AnchorButtonProps & {
+    href?: string;
+    disabled?: boolean;
+    anchorLinkProps?: LinkProps;
+  };
 
 // Input/output options
 type Overload = {
@@ -51,12 +57,7 @@ type Overload = {
 // Guard to check if href exists in props
 const hasHref = (props: ButtonProps | AnchorProps): props is AnchorProps => 'href' in props;
 
-function buildClassName({
-  className,
-  disabled,
-  size,
-  theme,
-}) {
+function buildClassName({ className, disabled, size, theme }) {
   return cx({
     'flex items-center justify-center rounded-3xl': true,
     [THEME[theme]]: true,
@@ -79,7 +80,10 @@ export const LinkAnchor: FC<AnchorProps> = ({
   <Link href={href} {...anchorLinkProps}>
     <a
       className={buildClassName({
-        className, disabled, size, theme,
+        className,
+        disabled,
+        size,
+        theme,
       })}
       {...restProps}
     >
@@ -100,15 +104,16 @@ export const Anchor: FC<AnchorProps> = ({
   // Anchor element doesn't support disabled attribute
   // https://www.w3.org/TR/2014/REC-html5-20141028/disabled-elements.html
   if (disabled) {
-    return (
-      <span {...restProps}>{children}</span>
-    );
+    return <span {...restProps}>{children}</span>;
   }
   return (
     <a
       href={href}
       className={buildClassName({
-        className, disabled, size, theme,
+        className,
+        disabled,
+        size,
+        theme,
       })}
       {...restProps}
     >
@@ -128,7 +133,10 @@ export const Button: FC<ButtonProps> = ({
   <button
     type="button"
     className={buildClassName({
-      className, disabled, size, theme,
+      className,
+      disabled,
+      size,
+      theme,
     })}
     disabled={disabled}
     {...restProps}
@@ -141,17 +149,11 @@ export const LinkButton: Overload = (props: ButtonProps | AnchorProps) => {
   // We consider a link button when href attribute exits
   if (hasHref(props)) {
     if (props.href.startsWith('http')) {
-      return (
-        <Anchor {...props} />
-      );
+      return <Anchor {...props} />;
     }
-    return (
-      <LinkAnchor {...props} />
-    );
+    return <LinkAnchor {...props} />;
   }
-  return (
-    <Button {...props} />
-  );
+  return <Button {...props} />;
 };
 
 export default LinkButton;