ogticrd · isaacismaelx14 · Jan 4, 2024 · Jan 4, 2024 · Jan 4, 2024 · Jan 4, 2024
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,33 @@
+const { resolve } = require('node:path');
+
+const project = resolve(process.cwd(), 'tsconfig.json');
+
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: ['eslint:recommended', 'prettier', 'eslint-config-turbo'],
+  plugins: ['only-warn'],
+  globals: {
+    React: true,
+    JSX: true,
+  },
+  env: {
+    node: true,
+  },
+  settings: {
+    'import/resolver': {
+      typescript: {
+        project,
+      },
+    },
+  },
+  ignorePatterns: [
+    '.*.js',
+    'node_modules/',
+    'dist/',
+  ],
+  overrides: [
+    {
+      files: ['*.js?(x)', '*.ts?(x)'],
+    },
+  ],
+};
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,6 @@
+pnpm-lock.yaml
+.vscode
+pnpm-workspace.yaml
+*.js
+.prettierrc
+tailwind.config.ts
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "all"
+}
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,30 +1,30 @@
-import type { StorybookConfig } from "@storybook/nextjs";
+import type { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
   stories: [
-    "../stories/**/*.mdx",
-    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    '../stories/**/*.mdx',
+    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
     {
-      name: "@storybook/addon-styling",
+      name: '@storybook/addon-styling',
       options: {
         postCss: {
-          implementation: require.resolve("postcss"),
+          implementation: require.resolve('postcss'),
         },
       },
     },
   ],
   framework: {
-    name: "@storybook/nextjs",
+    name: '@storybook/nextjs',
     options: {},
   },
   docs: {
-    autodocs: "tag",
+    autodocs: 'tag',
   },
 };
 export default config;
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,13 +1,13 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from '@storybook/react';
 
-import { withThemeByClassName } from "@storybook/addon-styling";
+import { withThemeByClassName } from '@storybook/addon-styling';
 
-import "../theme/index.css";
-import "../index";
+import '../theme/index.css';
+import '../index';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -21,10 +21,10 @@ const preview: Preview = {
     // NOTE: requires setting "darkMode" to "class" in your tailwind config
     withThemeByClassName({
       themes: {
-        light: "light",
-        dark: "dark",
+        light: 'light',
+        dark: 'dark',
       },
-      defaultTheme: "light",
+      defaultTheme: 'light',
     }),
   ],
 };

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,4 @@
 {
-  "conventionalCommits.scopes": ["library", "configuration"]
+  "conventionalCommits.scopes": ["library", "configuration"],
+  "editor.formatOnSave": true,
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,22 +1,22 @@
-import './globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import React from 'react'
-const inter = Inter({ subsets: ['latin'] })
+import './globals.css';
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import React from 'react';
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
-}
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,5 +1,5 @@
-import Image from 'next/image'
-import React from 'react'
+import Image from 'next/image';
+import React from 'react';
 
 export default function Home() {
   return (
@@ -110,5 +110,5 @@ export default function Home() {
         </a>
       </div>
     </main>
-  )
+  );
 }
diff --git a/components/accordion/index.tsx b/components/accordion/index.tsx
@@ -5,18 +5,17 @@ import AccordionSummary from '@mui/material/AccordionSummary';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
-interface IAcordeonChildren {
+interface AccordionChildren {
   title: string;
   subtitle: string;
   content: string | React.ReactNode;
 }
 
-interface IAcordeonProps {
-  elements: IAcordeonChildren[];
+interface AccordionProps {
+  elements: AccordionChildren[];
 }
 
-
-export const Accordion = ({ elements }: IAcordeonProps) => {
+export const Accordion = ({ elements }: AccordionProps) => {
   const [expanded, setExpanded] = React.useState<string | false>(false);
 
   const handleChange =
@@ -26,8 +25,12 @@ export const Accordion = ({ elements }: IAcordeonProps) => {
 
   return (
     <div>
-      {(elements || []).map((child: IAcordeonChildren, index: number) => (
-        <MUIAccordion key={index} expanded={expanded === 'panel' + index} onChange={handleChange('panel' + index)}>
+      {(elements || []).map((child: AccordionChildren, index: number) => (
+        <MUIAccordion
+          key={index}
+          expanded={expanded === 'panel' + index}
+          onChange={handleChange('panel' + index)}
+        >
           <AccordionSummary
             expandIcon={<ExpandMoreIcon />}
             aria-controls="panel1bh-content"
@@ -36,20 +39,19 @@ export const Accordion = ({ elements }: IAcordeonProps) => {
             <Typography sx={{ width: '33%', flexShrink: 0 }}>
               {child?.title}
             </Typography>
-            <Typography sx={{ color: 'text.secondary' }}>{child?.subtitle}</Typography>
+            <Typography sx={{ color: 'text.secondary' }}>
+              {child?.subtitle}
+            </Typography>
           </AccordionSummary>
           <AccordionDetails>
             {typeof child.content === 'string' ? (
-              <Typography>
-                {child.content}
-              </Typography>
+              <Typography>{child.content}</Typography>
             ) : (
               child.content
             )}
-
           </AccordionDetails>
         </MUIAccordion>
       ))}
     </div>
   );
-}
+};
diff --git a/components/alert/index.tsx b/components/alert/index.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import MUIAlert from '@mui/material/Alert';
 import { AlertTitle } from '@mui/material';
 
-export interface IProps {
-  severity?: 'info' | 'success' | 'warning' | 'error'
+export interface AlertProps {
+  severity?: 'info' | 'success' | 'warning' | 'error';
   variant?: 'filled' | 'outlined' | 'standard';
   text: string;
   title?: string;
@@ -14,12 +14,11 @@ export const Alert = ({
   variant = 'filled',
   text,
   title,
-}: IProps) => {
-
+}: AlertProps) => {
   return (
     <MUIAlert variant={variant} severity={severity}>
       {title && <AlertTitle>{title}</AlertTitle>}
       {text}
     </MUIAlert>
   );
-}
+};
diff --git a/components/badge/index.tsx b/components/badge/index.tsx
@@ -2,22 +2,22 @@ import * as React from 'react';
 import Chip from '@mui/material/Chip';
 import Stack from '@mui/material/Stack';
 
-export interface IBadgeProps {
-  color?: 'info' | 'success' | 'warning' | 'error' | 'primary'
+export interface BadgeProps {
+  color?: 'info' | 'success' | 'warning' | 'error' | 'primary';
   variant?: 'outlined' | 'filled';
-  size?: 'small' | 'medium'
+  size?: 'small' | 'medium';
   label: string;
 }
 
 export const Badge = ({
   color = 'info',
   variant = 'outlined',
   size = 'medium',
-  label
-}: IBadgeProps) => {
+  label,
+}: BadgeProps) => {
   return (
     <Stack direction="row" spacing={1}>
       <Chip label={label} variant={variant} size={size} color={color} />
     </Stack>
   );
-}
+};
diff --git a/components/button/index.tsx b/components/button/index.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
+import React from 'react';
 import MUIButton from '@mui/material/Button';
 
-export interface IButtonProps {
+export interface ButtonProps {
   disabled?: boolean;
   submit?: boolean;
   onClick?: () => void;
@@ -11,13 +11,13 @@ export interface IButtonProps {
   endIcon?: any;
   size?: 'small' | 'medium' | 'large' | undefined;
   color?:
-  | 'inherit'
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'error'
-  | 'info'
-  | 'warning';
+    | 'inherit'
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'error'
+    | 'info'
+    | 'warning';
   variant?: 'text' | 'outlined' | 'contained';
 }
 
@@ -32,20 +32,18 @@ export const Button = ({
   startIcon = null,
   endIcon = null,
   color,
-}: IButtonProps) => {
-  return (
-    <MUIButton
-      size={size}
-      variant={variant}
-      disabled={disabled}
-      type={submit ? 'submit' : 'button'}
-      onClick={onClick}
-      color={color ? color : 'primary'}
-      fullWidth={notFullWidth ? false : true}
-      startIcon={startIcon}
-      endIcon={endIcon}
-    >
-      {children}
-    </MUIButton>
-  );
-};
+}: ButtonProps) => (
+  <MUIButton
+    size={size}
+    variant={variant}
+    disabled={disabled}
+    type={submit ? 'submit' : 'button'}
+    onClick={onClick}
+    color={color ? color : 'primary'}
+    fullWidth={notFullWidth ? false : true}
+    startIcon={startIcon}
+    endIcon={endIcon}
+  >
+    {children}
+  </MUIButton>
+);