feat(slides) add 06-COMPONENTS chapter (#66)

sfeir-open-source · Nov 5, 2023 · cc49a85 · cc49a85
1 parent 203e1ed
commit cc49a85
Show file tree

Hide file tree

Showing 44 changed files with 880 additions and 19 deletions.
diff --git a/.gitignore b/.gitignore
@@ -39,3 +39,6 @@ testem.log
 Thumbs.db
 
 .nx/cache
+
+__snapshots__
+
diff --git a/.prettierignore b/.prettierignore
@@ -2,5 +2,4 @@
 /dist
 /coverage
 /.nx/cache
-/docs/*
-!/docs/markdown
+/docs/**/*.md
diff --git a/02-wrap-solution/src/app/__snapshots__/app.spec.tsx.snap b/02-wrap-solution/src/app/__snapshots__/app.spec.tsx.snap
diff --git a/02-wrap-solution/src/app/app.spec.tsx b/02-wrap-solution/src/app/app.spec.tsx
@@ -2,16 +2,11 @@ import { render } from '@testing-library/react';
 import App from './app';
 describe('App', () => {
   let container: HTMLElement;
-  let asFragment: any;
 
   beforeEach(() => {
-    const { asFragment: snapshot, container: host } = render(<App />);
-    asFragment = snapshot;
-    container = host;
-  });
+    const { container: host } = render(<App />);
 
-  test('should display a snapshot of App', () => {
-    expect(asFragment(<App />)).toMatchSnapshot();
+    container = host;
   });
 
   test('should display in h1 tag the text "Hello Students', () => {

diff --git a/03-component-solution/.eslintrc.json b/03-component-solution/.eslintrc.json
@@ -0,0 +1,42 @@
+{
+  "extends": [
+    "plugin:@nx/react",
+    "../.eslintrc.json"
+  ],
+  "ignorePatterns": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts",
+        "*.tsx",
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.js",
+        "*.jsx"
+      ],
+      "rules": {}
+    },
+    {
+      "files": [
+        "*.spec.tsx"
+      ],
+      "rules": {
+        "@typescript-eslint/no-explicit-any": "off"
+      }
+    }
+  ]
+}
diff --git a/03-component-solution/index.html b/03-component-solution/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+
+  <head>
+    <meta charset="utf-8" />
+    <title>03-component-solution</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/src/styles.scss" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+
+</html>
diff --git a/03-component-solution/project.json b/03-component-solution/project.json
@@ -0,0 +1,80 @@
+{
+  "name": "03-component-solution",
+  "$schema": "../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "03-component-solution/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@nx/vite:build",
+      "outputs": [
+        "{options.outputPath}"
+      ],
+      "defaultConfiguration": "production",
+      "options": {
+        "outputPath": "dist/03-component-solution"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nx/vite:dev-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "03-component-solution:build"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "03-component-solution:build:development",
+          "hmr": true
+        },
+        "production": {
+          "buildTarget": "03-component-solution:build:production",
+          "hmr": false
+        }
+      }
+    },
+    "preview": {
+      "executor": "@nx/vite:preview-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "03-component-solution:build"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "03-component-solution:build:development"
+        },
+        "production": {
+          "buildTarget": "03-component-solution:build:production"
+        }
+      }
+    },
+    "test": {
+      "executor": "@nx/vite:test",
+      "outputs": [
+        "{options.reportsDirectory}"
+      ],
+      "options": {
+        "passWithNoTests": true,
+        "reportsDirectory": "../coverage/03-component-solution"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": [
+        "{options.outputFile}"
+      ],
+      "options": {
+        "lintFilePatterns": [
+          "03-component-solution/**/*.{ts,tsx,js,jsx}"
+        ]
+      }
+    }
+  },
+  "tags": []
+}
diff --git a/03-component-solution/public/favicon.ico b/03-component-solution/public/favicon.ico
diff --git a/03-component-solution/public/images/bg_right.png b/03-component-solution/public/images/bg_right.png
diff --git a/03-component-solution/public/images/logo-sfeir.svg b/03-component-solution/public/images/logo-sfeir.svg
diff --git a/03-component-solution/src/app/app.scss b/03-component-solution/src/app/app.scss
@@ -0,0 +1,6 @@
+.people-application {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
diff --git a/03-component-solution/src/app/app.spec.tsx b/03-component-solution/src/app/app.spec.tsx
@@ -0,0 +1,19 @@
+import { render } from '@testing-library/react';
+import App from './app';
+describe('App', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    const { container: host } = render(<App />);
+
+    container = host;
+  });
+  test('should display the main tag with the class people-application', () => {
+    const mainElement = container.querySelector('main.people-application') as HTMLElement;
+    expect(mainElement).toBeTruthy();
+  });
+  test('should display the component header into the main tag', () => {
+    const header = container.querySelector('Header') as HTMLElement;
+    expect(header).toBeTruthy();
+  });
+});
diff --git a/03-component-solution/src/app/app.tsx b/03-component-solution/src/app/app.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import './app.scss';
+import { Header } from './core/components/header';
+
+export default function App() {
+  return (
+    <StrictMode>
+      <main className="people-application">
+        <Header />
+      </main>
+    </StrictMode>
+  );
+}
diff --git a/03-component-solution/src/app/core/components/header.scss b/03-component-solution/src/app/core/components/header.scss
@@ -0,0 +1,28 @@
+.people-header {
+  height: 6rem;
+  width: 100%;
+
+  .MuiAppBar-positionStatic {
+    position: static;
+    height: 100%;
+    padding: 1rem;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    background-image: url('images/bg_right.png');
+  }
+
+  &__links {
+    width: calc(100% - 150px);
+    display: flex;
+    justify-content: flex-end;
+
+    .MuiLink-underlineHover {
+      &:first-child {
+        margin-right: 1rem;
+      }
+    }
+  }
+}
diff --git a/03-component-solution/src/app/core/components/header.tsx b/03-component-solution/src/app/core/components/header.tsx
@@ -0,0 +1,24 @@
+import AppBar from '@mui/material/AppBar';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import './header.scss';
+
+export function Header() {
+  return (
+    <header className="people-header">
+      <AppBar component="nav" position="static">
+        <img src="/images/logo-sfeir.svg" alt="sfeir-logo" height="150" width="150" />
+        <section className="people-header__links">
+          <Typography fontSize="20px">
+            <Link href="#/people" color="#ffffff" underline="hover">
+              List
+            </Link>
+            <Link href="#/home" color="#ffffff" underline="hover">
+              Home
+            </Link>
+          </Typography>
+        </section>
+      </AppBar>
+    </header>
+  );
+}
diff --git a/03-component-solution/src/assets/.gitkeep b/03-component-solution/src/assets/.gitkeep
diff --git a/03-component-solution/src/main.tsx b/03-component-solution/src/main.tsx
@@ -0,0 +1,8 @@
+import { createRoot } from 'react-dom/client';
+import App from './app/app';
+
+/**
+ * This is the entry point to the application. It is responsible for bootstrapping the application.
+ */
+const root = createRoot(document.getElementById('root') as HTMLDivElement);
+root.render(<App />);
diff --git a/03-component-solution/src/styles.scss b/03-component-solution/src/styles.scss
@@ -0,0 +1,13 @@
+html,
+body {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+
+  #root {
+    height: 100%;
+    width: 100%;
+  }
+}
diff --git a/03-component-solution/tsconfig.app.json b/03-component-solution/tsconfig.app.json
@@ -0,0 +1,18 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../dist/out-tsc",
+    "types": ["node", "@nx/react/typings/cssmodule.d.ts", "@nx/react/typings/image.d.ts", "vite/client"]
+  },
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/03-component-solution/tsconfig.json b/03-component-solution/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client", "vitest"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../tsconfig.base.json"
+}
diff --git a/03-component-solution/tsconfig.spec.json b/03-component-solution/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["vitest/globals", "vitest/importMeta", "vite/client", "node", "vitest"]
+  },
+  "include": [
+    "vite.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "types": ["@nx/react/typings/cssmodule.d.ts", "@nx/react/typings/image.d.ts"]
+}