Update Prettier Config (#187)

Following up from #81, I'm adding in the Prettier config updates

---------

Signed-off-by: francescoronel <[email protected]>

.github/ISSUE_TEMPLATE/Question.md

@@ -3,4 +3,4 @@ name: Question
 about: Ask a question about this project
 ---
 
-Share your question here. If you have a code snippet, please include it.
+Share your question here. If you have a code snippet, please include it.

.github/dependabot.yml

@@ -11,5 +11,4 @@ updates:
       interval: "monthly"
     ignore:
       - dependency-name: "*"
-        update-types:
-          ["version-update:semver-minor", "version-update:semver-patch"]
+        update-types: ["version-update:semver-minor", "version-update:semver-patch"]

.prettierrc

@@ -1,7 +1,14 @@
 {
-  "trailingComma": "none",
-  "tabWidth": 2,
+  "arrowParens": "always",
+  "bracketSameLine": true,
+  "bracketSpacing": true,
   "plugins": ["@ianvs/prettier-plugin-sort-imports"],
+  "printWidth": 100,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
   "importOrder": [
     "^react$",
     "^next/(.*)$",

.storybook/LatinaDevTheme.ts

@@ -5,8 +5,7 @@ export default create({
   base: "light",
 
   // Typography
-  fontBase:
-    '"Latina Light", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif',
+  fontBase: '"Latina Light", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif',
   fontCode:
     'ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace',
 
@@ -39,5 +38,5 @@ export default create({
   inputBg: "#ffffff",
   inputBorder: "#151515",
   inputTextColor: "#151515",
-  inputBorderRadius: 8
+  inputBorderRadius: 8,
 });

.storybook/main.ts

@@ -8,16 +8,16 @@ const config: StorybookConfig = {
       // 👇 Storybook will load all files that match this glob
       files: "**/*.mdx",
       // 👇 Used when generating automatic titles for your stories
-      titlePrefix: "Docs"
+      titlePrefix: "Docs",
     },
     {
       // 👇 Sets the directory containing your stories
       directory: "../components",
       // 👇 Storybook will load all files that match this glob
       files: "**/*.stories.@(js|jsx|ts|tsx)",
       // 👇 Used when generating automatic titles for your stories
-      titlePrefix: "Components"
-    }
+      titlePrefix: "Components",
+    },
   ],
 
   addons: [
@@ -32,7 +32,7 @@ const config: StorybookConfig = {
 
   framework: {
     name: "@storybook/nextjs",
-    options: {}
+    options: {},
   },
 
   staticDirs: ["../public"],

.storybook/manager.ts

@@ -3,5 +3,5 @@ import { addons } from "@storybook/manager-api";
 import LatinaDevTheme from "./LatinaDevTheme";
 
 addons.setConfig({
-  theme: LatinaDevTheme
+  theme: LatinaDevTheme,
 });

.storybook/preview.ts

@@ -7,17 +7,17 @@ const preview: Preview = {
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/
-      }
+        date: /Date$/,
+      },
     },
     layout: "centered",
     options: {
       storySort: {
         method: "alphabetical",
-        order: ["Docs", "Components"]
-      }
-    }
-  }
+        order: ["Docs", "Components"],
+      },
+    },
+  },
 };
 
 export default preview;

.vscode/settings.json

@@ -1,5 +1,27 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib",
+  "eslint.options": {
+    "overrideConfig": {
+      "rules": {
+        "no-debugger": "off"
+      }
+    }
+  },
+  "editor.codeActionsOnSave": {
+    "source.addMissingImports": "always",
+    "source.fixAll.eslint": "always",
+    "source.fixAll.stylelint": "explicit",
+    "source.removeUnusedImports": "always"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.detectIndentation": true,
+  "editor.fontVariations": false,
+  "editor.formatOnSave": true,
+  "editor.wordWrap": "on",
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  "prettier.withNodeModules": false,
+  "stylelint.validate": ["css", "less"],
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "editor.formatOnSave": true
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.updateImportsOnFileMove.enabled": "always"
 }

README.md

@@ -18,7 +18,7 @@ Our goal is to increase visibility and access to valuable opportunities.
 
 📚 [Documentation](https://docs.latina.dev)
 
-👾 [Slack](https://latinadev.slack.com) ([Request an invite](mailto:[email protected]))
+👾 [Slack](https://latinadev.slack.com) ([Request an invite via email](mailto:[email protected]))
 
 🎨 [Storybook](https://www.chromatic.com/library?appId=6472ce8643c60096810af8c0)
 

app/global-error.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import * as Sentry from "@sentry/nextjs";
-import NextError from "next/error";
 import { useEffect } from "react";
+import NextError from "next/error";
+
+import * as Sentry from "@sentry/nextjs";
 
 export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
   useEffect(() => {
@@ -20,4 +21,4 @@ export default function GlobalError({ error }: { error: Error & { digest?: strin
       </body>
     </html>
   );
-}
+}

app/layout.tsx

@@ -15,20 +15,16 @@ import "/styles/_styles.css";
 export const metadata = {
   title: {
     default: "Latina Dev",
-    template: "%s | Latina Dev"
+    template: "%s | Latina Dev",
   },
   description:
     "Latina Dev is an open-source directory of Latina software engineers at the student, IC, and leadership levels. Our goal is to increase visibility and access to valuable opportunities.",
   icons: {
-    shortcut: "/favicon.png"
-  }
+    shortcut: "/favicon.png",
+  },
 };
 
-export default function RootLayout({
-  children
-}: {
-  children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <MetaTags />

app/members/[slug]/page.tsx

@@ -40,12 +40,7 @@ export default async function Member({ params }: Props) {
           <h3>{affiliation}</h3>
           <h3 className={styles.affiliation}>{level}</h3>
           {countries && <CountryFlags countries={countries} />}
-          {bio && (
-            <div
-              className={styles.bio}
-              dangerouslySetInnerHTML={{ __html: bio }}
-            />
-          )}
+          {bio && <div className={styles.bio} dangerouslySetInnerHTML={{ __html: bio }} />}
         </div>
       </article>
     </div>
@@ -57,14 +52,14 @@ export async function generateStaticParams() {
   const members = await getMembers();
 
   return members.map((member) => ({
-    slug: member.slug
+    slug: member.slug,
   }));
 }
 
 // Set the title of the page to be the post title
 export async function generateMetadata({ params }: Props) {
   const member = await getMemberBySlug(params.slug);
   return {
-    title: `${member?.name} | Members`
+    title: `${member?.name} | Members`,
   };
 }

components/ButtonLink/ButtonLink.stories.ts

@@ -4,20 +4,20 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import ButtonLink from "./ButtonLink";
 
-const meta: Meta<typeof ButtonLink> = {
+const meta: Meta = {
   title: "ButtonLink",
   component: ButtonLink,
-  tags: ["autodocs"]
+  tags: ["autodocs"],
 };
 
 export default meta;
 
-type Story = StoryObj<typeof ButtonLink>;
+type Story = StoryObj;
 
 export const ViewAllMembers: Story = {
   args: {
     text: "View all members",
     url: "/members",
-    icon: faMagnifyingGlass
-  }
+    icon: faMagnifyingGlass,
+  },
 };

components/ButtonLink/ButtonLink.tsx

@@ -18,12 +18,7 @@ const ButtonLink = (props: Props) => {
   const target = external ? "_blank" : "_self";
 
   return (
-    <Link
-      href={url}
-      aria-label={text}
-      target={target}
-      className={styles.buttonLink}
-    >
+    <Link href={url} aria-label={text} target={target} className={styles.buttonLink}>
       {text} {icon && <FontAwesomeIcon icon={icon} />}
     </Link>
   );

components/CountryFlags/CountryFlags.stories.ts

@@ -2,24 +2,24 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import CountryFlags from "./CountryFlags";
 
-const meta: Meta<typeof CountryFlags> = {
+const meta: Meta = {
   title: "CountryFlags",
   component: CountryFlags,
-  tags: ["autodocs"]
+  tags: ["autodocs"],
 };
 
 export default meta;
 
-type Story = StoryObj<typeof CountryFlags>;
+type Story = StoryObj;
 
 export const SingleCountry: Story = {
   args: {
-    countries: ["Peru"]
-  }
+    countries: ["Peru"],
+  },
 };
 
 export const MultipleCountries: Story = {
   args: {
-    countries: ["Peru", "Brazil", "Argentina"]
-  }
+    countries: ["Peru", "Brazil", "Argentina"],
+  },
 };

components/CountryFlags/CountryFlags.tsx

@@ -24,7 +24,7 @@ const countryOptions: CountryOption[] = [
   { country: "Chile", flag: "🇨🇱" },
   { country: "Puerto Rico", flag: "🇵🇷" },
   { country: "Belize", flag: "🇧🇿" },
-  { country: "Haiti", flag: "🇭🇹" }
+  { country: "Haiti", flag: "🇭🇹" },
 ];
 
 interface Props {
@@ -36,9 +36,7 @@ const CountryFlags = (props: Props) => {
 
   // get flag based on country name given
   const getFlag = (country: string) => {
-    const countryOption = countryOptions.find(
-      (countryOption) => countryOption.country === country
-    );
+    const countryOption = countryOptions.find((countryOption) => countryOption.country === country);
     if (!countryOption) return null;
     return countryOption.flag;
   };

components/Footer/Footer.stories.ts

@@ -2,16 +2,16 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import Footer from "./Footer";
 
-const meta: Meta<typeof Footer> = {
+const meta: Meta = {
   title: "Footer",
   component: Footer,
-  tags: ["autodocs"]
+  tags: ["autodocs"],
 };
 
 export default meta;
 
-type Story = StoryObj<typeof Footer>;
+type Story = StoryObj;
 
 export const Default: Story = {
-  args: {}
+  args: {},
 };

components/Footer/Footer.tsx

@@ -1,11 +1,7 @@
 import Image from "next/image";
 import Link from "next/link";
 
-import {
-  faGithub,
-  faLinkedin,
-  faSlack
-} from "@fortawesome/free-brands-svg-icons";
+import { faGithub, faLinkedin, faSlack } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import styles from "./Footer.module.css";
@@ -17,37 +13,25 @@ const Footer = () => {
         <Link
           href="https://github.com/Latina-Dev/latina-dev"
           aria-label="Latina Dev GitHub"
-          target={"_blank"}
-        >
+          target={"_blank"}>
           <FontAwesomeIcon icon={faGithub} />
         </Link>
-        <Link
-          href="https://latinadev.slack.com"
-          aria-label="Latina Dev Slack"
-          target={"_blank"}
-        >
+        <Link href="https://latinadev.slack.com" aria-label="Latina Dev Slack" target={"_blank"}>
           <FontAwesomeIcon icon={faSlack} width={25} />
         </Link>
         <Link
           href="https://www.linkedin.com/company/latina-dev/"
           aria-label="Latina Dev LinkedIn"
-          target={"_blank"}
-        >
+          target={"_blank"}>
           <FontAwesomeIcon icon={faLinkedin} />
         </Link>
       </div>
       <div className={styles.vercel}>
         <Link
           href="https://vercel.com?utm_source=latina-dev&utm_campaign=oss"
           aria-label="Vercel"
-          target={"_blank"}
-        >
-          <Image
-            src="/img/logos/vercel.svg"
-            alt="Vercel"
-            width="212"
-            height="44"
-          ></Image>
+          target={"_blank"}>
+          <Image src="/img/logos/vercel.svg" alt="Vercel" width="212" height="44"></Image>
         </Link>
       </div>
     </footer>