midudev · danielcgilibert · Jul 19, 2023 · Jul 20, 2023 · Jul 20, 2023 · Jul 20, 2023
diff --git a/pruebas/01-reading-list/danielcgilibert/.eslintrc.cjs b/pruebas/01-reading-list/danielcgilibert/.eslintrc.cjs
@@ -0,0 +1,30 @@
+/* eslint-env node */
+
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'plugin:react-hooks/recommended',
+    'plugin:react/recommended',
+    'plugin:jsx-a11y/recommended',
+    'eslint-config-prettier'
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: true,
+    tsconfigRootDir: __dirname
+  },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true }
+    ],
+    '@typescript-eslint/no-non-null-assertion': 'off'
+  }
+}
diff --git a/pruebas/01-reading-list/danielcgilibert/.gitignore b/pruebas/01-reading-list/danielcgilibert/.gitignore
@@ -0,0 +1,44 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+
+
+dist
+*-lock.yaml
+
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+/test-results/
+/playwright-report/
+/playwright/.cache/
diff --git a/pruebas/01-reading-list/danielcgilibert/.prettierrc b/pruebas/01-reading-list/danielcgilibert/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "jsxSingleQuote": true,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/pruebas/01-reading-list/danielcgilibert/README.md b/pruebas/01-reading-list/danielcgilibert/README.md
@@ -0,0 +1,51 @@
+<div align="center">
+
+<img src="public/project.png" alt="Screenshot" />
+
+[**🔗 link de la prueba**](https://danielcg-prueba-01-reading-list.vercel.app/)
+<br/>
+[**👍 Mi github**](https://github.com/danielcgilibert)
+
+</div>
+
+## ⚙️ Stack
+
+- [**React** + **Typescript**](https://react.dev/) - The library for web and native user interfaces.
+- [**Tailwind CSS** + **Tailwind-Merge** + **clsx**](https://tailwindcss.com/) - Tailwind CSS is a utility-first CSS framework.
+- [**Zustand**](https://zustand-demo.pmnd.rs/) - State management in React.
+
+## ✏️ Prerequisites
+
+- [Nodejs +16 (LTS recommended)](https://nodejs.org/en/)
+
+## 🚀 Getting Started
+
+**Recommended extensions for VSCode:**
+
+- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss).
+- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).
+
+1. Install dependencies:
+
+```bash
+npm install
+# or
+yarn install
+# or
+pnpm install
+```
+
+2. Run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+## ☁ Deploys
+
+- [Vercel](https://vercel.com/)
diff --git a/pruebas/01-reading-list/danielcgilibert/index.html b/pruebas/01-reading-list/danielcgilibert/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Prueba 01-reading-list - Danielcgilibert</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/pruebas/01-reading-list/danielcgilibert/package.json b/pruebas/01-reading-list/danielcgilibert/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "prueba",
+  "private": true,
+  "author": "Danielcgilbert",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "test": "playwright test",
+    "testUI": "playwright test --ui"
+  },
+  "dependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "wouter": "2.11.0",
+    "zustand": "4.3.9"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.36.1",
+    "@types/react": "18.2.14",
+    "@types/react-dom": "18.2.6",
+    "@typescript-eslint/eslint-plugin": "5.61.0",
+    "@typescript-eslint/parser": "5.61.0",
+    "@vitejs/plugin-react": "4.0.1",
+    "autoprefixer": "10.4.14",
+    "clsx": "2.0.0",
+    "eslint": "8.44.0",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-prettier": "5.0.0",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-refresh": "0.4.1",
+    "postcss": "8.4.26",
+    "prettier": "3.0.0",
+    "prettier-plugin-tailwindcss": "0.4.1",
+    "tailwind-merge": "1.14.0",
+    "tailwindcss": "3.3.3",
+    "tailwindcss-animated": "^1.0.1",
+    "typescript": "5.0.2",
+    "vite": "4.4.0"
+  }
+}
diff --git a/pruebas/01-reading-list/danielcgilibert/playwright.config.ts b/pruebas/01-reading-list/danielcgilibert/playwright.config.ts
@@ -0,0 +1,77 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});
diff --git a/pruebas/01-reading-list/danielcgilibert/postcss.config.js b/pruebas/01-reading-list/danielcgilibert/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/pruebas/01-reading-list/danielcgilibert/public/project.png b/pruebas/01-reading-list/danielcgilibert/public/project.png
diff --git a/pruebas/01-reading-list/danielcgilibert/public/vite.svg b/pruebas/01-reading-list/danielcgilibert/public/vite.svg
diff --git a/pruebas/01-reading-list/danielcgilibert/src/App.tsx b/pruebas/01-reading-list/danielcgilibert/src/App.tsx
@@ -0,0 +1,27 @@
+//DEPENDENCIES
+import { Route, Switch } from 'wouter'
+
+//PAGES
+import HomePage from './pages/home-page'
+import BookPage from './pages/book-page'
+
+function App() {
+  return (
+    <Switch>
+      <Route path='/'>
+        <HomePage />
+      </Route>
+
+      <Route path='/book/:isbn'>
+        {(params) => <BookPage isbn={params.isbn} />}
+      </Route>
+
+      <Route>
+        // Redirect to home page if route doesn't exist
+        <HomePage />
+      </Route>
+    </Switch>
+  )
+}
+
+export default App
diff --git a/pruebas/01-reading-list/danielcgilibert/src/assets/react.svg b/pruebas/01-reading-list/danielcgilibert/src/assets/react.svg
diff --git a/pruebas/01-reading-list/danielcgilibert/src/components/aside.tsx b/pruebas/01-reading-list/danielcgilibert/src/components/aside.tsx
@@ -0,0 +1,50 @@
+//COMPONENTS
+import Filters from './filters'
+
+//LIB
+import { getGenres } from '../lib/helpers'
+
+//TYPES
+import ReadingList from './reading-list'
+
+export default function Aside() {
+  const genres = getGenres()
+
+  return (
+    <aside className='fixed  left-0 top-0 z-40 mt-4 flex h-screen w-96 -translate-x-full flex-col gap-4 overflow-y-auto bg-white  px-12 py-20 font-light shadow-md shadow-neutral-200 transition-transform md:translate-x-0'>
+      <section className='flex items-center justify-start gap-8 pb-8'>
+        <div>
+          <img
+            src='https://c.files.bbci.co.uk/7727/production/_103330503_musk3.jpg'
+            className='h-28 w-28 rounded-full object-cover object-center drop-shadow'
+          />
+        </div>
+        <div className='flex flex-col'>
+          <span className='text-xl font-normal text-zinc-950'>Elon Musk</span>
+          <span className='text-sm  font-normal text-orange-400'>@Elon</span>
+          <span className='text-sm font-light text-neutral-400'>
+            Sevilla, España
+          </span>
+        </div>
+      </section>
+
+      {/* <nav className='flex flex-col gap-4 border-y-2 border-neutral-100 py-8'>
+        <span className='text-lg  font-light text-orange-400'>Recommendations</span>
+        <ul className='flex flex-col gap-2 text-[#353535] font-light'>
+          <li>My books</li>
+          <li>Want to read (35)</li>
+          <li>My books</li>
+
+        </ul>
+      </nav> */}
+
+      <div className='max-h-96 overflow-y-auto border-t-2 border-neutral-100 py-5'>
+        <ReadingList />
+      </div>
+
+      <div className=' border-t-2 border-neutral-100 py-5'>
+        <Filters genres={genres} />
+      </div>
+    </aside>
+  )
+}