From c28a73ff28ee90a40278642126ef4dd024704d8d Mon Sep 17 00:00:00 2001 From: Giovanni Ravalico <15946771+suddenlyGiovanni@users.noreply.github.com> Date: Sun, 3 Mar 2024 05:16:29 +0100 Subject: [PATCH] suddenlyGiovanni.dev v2 (#541) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * clean slate for v2 * Add .nvmrc file A new .nvmrc file was created to specify the node version for the application. This version is set to v21.x, facilitating a more predictable development environment for all team members. * Add package.json and pnpm-lock.yaml This commit introduces a package.json file for the suddenlyGiovanni.dev project. Additionally, a pnpm-lock.yaml file has been added for improved dependency management. These files are expected to help manage the project's dependencies and settings better. * Add .gitignore, README and Turbo repo setup This commit introduces a .gitignore file, a comprehensive README and establishes a Turbo monorepo setup. Scripts for build, development, and linting have been defined in the `package.json`. Also, the required dependencies for Turbo along with a `pnpm-workspace.yaml` for managing multiple packages. * Add Biome configuration and update package.json This commit includes the addition of the Biome configuration file (biome.xml and biome.json) to set the Biome settings for the project. A new script "format" has been added to package.json, and Biome has been added to the project dependencies. The package lock file has been updated to include the new Biome dependency. * introduce UI package * introduce ui development playground This commit includes several updates to package.json files and configuration files of the project. The scripts have been updated, the module paths and target in packages/ui/tsconfig.json and packages/ui/package.json have been modified. Also, the devDependencies have been updated in pnpm-lock.yaml. * Update TypeScript configurations for docs and UI packages The TypeScript configurations of both the 'docs' and 'UI' packages have been updated to extend '@tsconfig/vite-react' and '@tsconfig/strictest'. Furthermore, these new dependencies have also been added in their respective package.json files, and reflected in the 'pnpm-lock.yaml' file. This change simplifies and standardizes the TypeScript configuration across packages. * Add new Remix web application and update dependencies This commit contains the creation of a new web application using Remix. It entails the setup of several configurations like eslint, vite, typescript, and others. Additionally, it adds files like `.gitignore`, `README.md`, and modifies the `pnpm-lock.yaml` to update dependencies. This commit will serve as the foundation for the web application development. * Refactor TypeScript configurations to use common one A common TypeScript configuration "@suddenly-giovanni/config-typescript" has been introduced. This removes the need for repeating TypeScript configuration in each package, making code cleaner and maintenance easier. The configuration changes are reflected across all apps and packages. * Configure Biome.js The `biome.json` configuration has been refactored and moved into multiple json files within the `config-biome` package. Code style and formatting rules are now more modular, allowing specific rules to be applied per package based on their function. Additionally, the `@suddenly-giovanni/config-biome` dependency has been added to the `ui` package. * Update turbo version from 1.12.2 to 1.12.3 This commit updates the turbo package in both package.json and pnpm-lock files. The newer version contains important bug fixes and performance improvements across all platforms. * Add Prettier and Tailwind CSS plugins to devDependencies The codebase has been updated to include the Prettier and Tailwind CSS plugins in the devDependencies. This should aid in development by providing additional tools and functionality. Additionally, changes have been made in the lock file to reflect the updates. * Implement Tailwind CSS configuration The commit introduces Tailwind CSS into the project along with required dependencies such as autoprefixer and postcss. Necessary files for Tailwind configuration like 'tailwind.config.ts' and 'postcss.config.mjs' are added. Changes also include the import of the Tailwind CSS in 'root.tsx' and the addition of skipLibCheck and reordering in 'tsconfig.json'. The local Tailwind CSS file has been removed and replaced with a CSS file in the '@suddenly-giovanni/ui' package. The 'tailwind.config.ts' file in the UI package no longer has a prefix set. Also, 'package.json' has been updated to output the produced CSS file in the correct directory, and a new CSS class has been added to the button component. * Refactor build process to remove tsup The tsup build dependency has been removed from the ui package. The import paths and build scripts have been updated accordingly, and unused configurations related to tsup are also removed. This simplifies the build process by using tailwindcss for both building and development. * Add eslint-config and update pnpm-lock file This update adds a new `eslint-config` package and updates the pnpm-lock file. This eslint-config package specifies linting settings for enhancing code quality and formatting. The pnpm-lock file has been updated to record eslint-config package information along with other dependencies. Update ESLint configuration and dependencies in apps/web Updated the ESLint configuration in .eslintrc.cjs to use the stricter '@typescript-eslint/strict' rule set instead of the '@typescript-eslint/recommended' one. Version numbers of ESLint and related dependencies have been pinned in package.json to eliminate potential inconsistencies due to minor version updates. Add ESLint and TypeScript compiler configurations This commit adds configurations for ESLint and TypeScript compiler. Additionally, it updates the project's dependencies in the lockfile, ensuring to include the workspace packages and eslint-plugin-tailwindcss. The commit also modifies the versions of some dependencies. Update ESLint configuration and dependencies This update replaces multiple ESLint plugins and parser with a custom configuration based on Vercel Engineering Style Guide. Dev dependencies in package.json have been modified accordingly. The configuration for the web app has been simplified and now extends the new custom configuration. Implement ESLint with custom configuration This update introduces ESLint with a custom configuration to improve code quality. Several scripts have been added to packages' and application's package.json files for practical usage. Furthermore, setup was completed by creating appropriate .eslintrc.cjs files in each directory and updating dependencies. * Add 'clean' script across multiple packages The 'clean' script, which removes the node_modules directory, has been added to several package.json files. This change applies to the config-typescript, config-tailwind, config-eslint packages, and also the web application. This script will help with clearing installed modules and creating a clean project slate. * Integrate Prettier with project packages The "prettier" dependency has been localized to individual project packages from the global space. A new package '@suddenly-giovanni/config-prettier' has been created to consolidate the configuration for Prettier. This change offers better control and customization of code formatting at the package level, improving development experience and code maintainability. The new 'format' scripts are added to apply formatting rules with Prettier in the respective packages. Add 'format' task to turbo.json pipeline This commit includes the introduction of a new 'format' task in the 'turbo.json' pipeline configuration. The task has been set to not use cache similar to the existing 'dev' and 'clean' tasks. * Add typecheck scripts and update project paths Added 'typecheck' scripts to 'package.json' files in multiple packages, ensuring TypeScript checking is comprehensive across the project. Also updated turbo.json and '.idea/webResources.xml' to reflect these changes. These updates help improve the robustness of the build process and facilitate type-checking in the development workflow. * Update Storybook version to 8.0.0-beta.1 The commit includes updates to various Storybook dependencies in the pnpm-lock.yaml file. The specified version for the Storybook addons and the main Storybook package have been changed from 7.6.13 to 8.0.0-beta.1. This update also includes the necessary removals and additions to the lockfile sections associated with these dependencies. * WIP * Update react and react-dom versions in pnpm-lock.yaml The versions of the react and react-dom dependencies have been upgraded to '18.3.0-canary-ba5e6a832-20240208' throughout the pnpm-lock.yaml file. This commit also updates the react and react-dom versions in the dependencies of other packages accordingly. * Add new dependencies and utilities function New dependencies 'class-variance-authority', 'tailwind-merge', and 'clsx' were added to the 'ui' package. Along with these, a utility function 'cn' was introduced in 'utils.ts', which utilizes the newly added dependencies. These changes help in enhancing the functionality of the 'ui' package. * Move tailwind.css to styles directory The tailwind.css file was moved to a new directory named styles. As a result, the reference to this file in root.tsx has been updated to reflect this change. This reorganization aims to make the project structure cleaner and more manageable. * Add NavLink component and update usage A new NavLink component has been created to handle the styling of links in the application. This component has been implemented in routes/_index.tsx, replacing the previous local Link component. This helps in reusing code and maintaining a consistent styling for navigation links across various locations in the application. * Add inspect-router script to package.json This commit introduces an 'inspect-router' script in the package.json file. It allows developers to inspect the routes in a formatted way, providing more insight into the TypeScriptReact files. * Refactor application structure and add new pages The application structure has been refactored, mainly focusing on the header/navigation. Header elements have been moved from the '_index.tsx' and into the 'app' component, which optimizes the loading process. In addition to the restructuring, new page components for 'blog', 'reading-journal', and 'resume' have been created as well. * Add 'exactOptionalPropertyTypes' to TypeScript config This update adds the "exactOptionalPropertyTypes" option to the TypeScript configuration in the 'base.json' file. This option can help to prevent unexpected behavior by enforcing stricter typing for properties that are declared optional. * Add 'cn' utility function to index exports The 'cn' utility function from './utils.ts' has been added to the main export file. This function is now accessible along with Button and Card components, making code more tidy and facilitating import operations. * Update navigation and add new component A new component, SuddenlyGiovanni, has been added and implemented into the navigation bar. Simultaneously, NavLink has been updated with prefetching. Navigation and content now centralize using a container style. * Update meta tags and add favicon This commit introduces updates to the meta tags across various pages for SEO optimization, including titles and descriptions. It also includes the addition of a favicon to the site. The updates provide more precise, relevant content descriptions and improve site identity with the favicon. * Add SocialIcon and social media link components This update adds 'SocialIcon' and social media link components ('Twitter', 'LinkedIn', 'GitHub') to the UI package. It also includes necessary dependencies, such as 'react-icons', to the 'package.json' file. The new social components provide easy-to-integrate social media links for any projects using this package. * Add Footer component to the application A new Footer component is created and added to the root file. The Footer includes copyright information and links to socials (Twitter, GitHub, LinkedIn). The component is also exported in the index file of the components directory. * Add '@total-typescript/ts-reset' to project dependencies The '@total-typescript/ts-reset' package has been added to the package.json dependencies in 'packages/ui', 'apps/web', and 'apps/docs'. It's also been included in pnpm-lock.yaml and imported in the index file of 'packages/ui', 'apps/web/app/root.tsx', and 'apps/docs/.storybook/main.ts'. * Fix react-icons version in dependencies The "^" in the version number of react-icons dependency has been removed. This has been done in both the 'pnpm-lock.yaml' and 'packages/ui/package.json' files. This change ensures that the exact version 5.0.1 is used, preventing unwanted updates that may cause compatibility issues. * Refactor UI package structure and paths The paths in `package.json` and source code files have been updated to reflect the newly organized structure in the UI package. Components, such as Button, Card, and Social, and utility functions are now placed under newly created 'components' and 'lib' directories, respectively. The 'styles.css' file has also been moved to a sub-directory. * Update UI components and add new storybook stories Enhanced the Button component in UI package and added two new components - Layout and Placeholder. These changes also include the creation of new Storybook stories for layout parts (header, body, main, and footer), as well as a placeholder. The button component has been refactored to improve its functionality. * Refactor layout elements from direct HTML to Layout component The changes include wrapping existing HTML elements like header, main, footer, and body into specific Layout components. This modification provides consistency and flexibility in managing user interface components and adheres to Modularity principle. Notable substitutions include the replacement of `