refactor: config with scss to tailwind (#42)

* fix: update deps and devDeps
* refactor(prettier): remove unwritten file names from formatter
* styles: remove stylelint & scss
* refactor: replace scss styles to tailwind
* feat: implement tailwind config
* refactor: update eslint config
* refactor(locales): replace autho's github url with repo itself
* refactor: change author's name license
* refactor(code): update code settings
* refactor: improve file components generators
* fix(code): add sharable config
* fix(linter): resolve bad parserConfig and linting itself
* refactor: bad imports
* refactor: update workflow with its scripts

.eslintignore

@@ -1,4 +0,0 @@
-node_modules
-.next
-out
-next-env.d.ts

.eslintrc

@@ -1,10 +1,20 @@
 {
-  "extends": ["conventions", "next/core-web-vitals", "prettier"],
+  "plugins": ["prettier", "simple-import-sort"],
-  "plugins": ["prettier"],
+  "extends": ["standard-with-typescript", "prettier"],
-  "parserOptions": { "project": "./tsconfig.json" },
+  "env": {
+    "node": true,
+    "browser": true,
+    "jest": true
+  },
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "project": ["./tsconfig.json"]
+  },
+  "ignorePatterns": ["out", "**/*.config.js", "**/*.d.ts", "plopfile.js"],
   "rules": {
-    "@next/next/no-img-element": "off",
     "prettier/prettier": "error",
-    "no-console": "off"
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "@next/next/no-img-element": "off"
   }
 }

.github/workflows/build.yml

@@ -1,26 +0,0 @@
-name: 'Build tests'
-
-on:
-  push:
-    branches: [develop]
-  pull_request:
-    branches: [master, develop]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3.0.0
-
-      - name: Use Node.js
-        uses: actions/setup-node@v3.1.1
-        with:
-          node-version: 16.x
-
-      - name: Install packages
-        run: yarn --frozen-lockfile
-
-      - name: Build project
-        run: yarn build

.github/workflows/ci.yml

@@ -1,11 +1,11 @@
-name: 'Release version'
+name: 'Build & Release'
 
 on:
   push:
     branches: [master]
 
 jobs:
-  release:
+  ci:
     runs-on: ubuntu-latest
     if: ${{ github.ref == 'refs/heads/master' }}
     needs: [quality]
@@ -21,6 +21,9 @@ jobs:
       - name: Install packages
         run: yarn --frozen-lockfile
 
+      - name: Building project
+        run: yarn build
+
       - name: Release project
         run: yarn release
         env:

.github/workflows/lint.yml

@@ -1,4 +1,4 @@
-name: 'Lint tests'
+name: 'Lint'
 
 on:
   push:
@@ -22,14 +22,17 @@ jobs:
       - name: Install packages
         run: yarn --frozen-lockfile
 
-      - name: Commit linting
-        run: yarn lint:commit -- --to '${{ github.sha }}'
-
       - name: Next.js linting
         run: yarn lint:next
 
+      - name: Check types
+        run: yarn check-types
+
       - name: Prettier linting
         run: yarn lint:prettier
 
-      - name: Stylelint linting
+      - name: Checking editorconfig
-        run: yarn lint:scss
+        run: yarn lint:editorconfig
+
+      - name: Commit linting
+        run: yarn lint:commit -- --to '${{ github.sha }}'

.prettierignore

@@ -1,5 +1,2 @@
-node_modules
 .next
-out
-package-lock.json
 *.hbs

.stylelintrc

@@ -1,20 +0,0 @@
-{
-  "plugins": ["stylelint-scss"],
-  "extends": [
-    "stylelint-config-standard-scss",
-    "stylelint-config-prettier-scss"
-  ],
-  "rules": {
-    "property-no-vendor-prefix": null,
-    "comment-no-empty": null,
-    "color-no-invalid-hex": true,
-    "font-family-name-quotes": "always-where-recommended",
-    "max-empty-lines": 1,
-    "selector-pseudo-class-no-unknown": [
-      true,
-      {
-        "ignorePseudoClasses": ["export", "global"]
-      }
-    ]
-  }
-}

.vscode/extensions.json

@@ -2,8 +2,7 @@
   "recommendations": [
     "EditorConfig.EditorConfig",
     "esbenp.prettier-vscode",
-    "stylelint.vscode-stylelint",
+    "bradlc.vscode-tailwindcss",
-    "clinyong.vscode-css-modules",
     "dbaeumer.vscode-eslint"
   ]
 }

.vscode/settings.json

@@ -1,19 +1,11 @@
 {
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "typescript.tsdk": "node_modules/typescript/lib",
   "prettier.configPath": ".prettierrc",
-
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.bracketPairColorization.enabled": true,
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.fixAll": true
-  },
-
-  "typescript.enablePromptUseWorkspaceTsdk": true,
-  "typescript.tsdk": "node_modules/typescript/lib",
-
-  "stylelint.validate": ["css", "less", "postcss", "sass", "scss"],
-  "stylelint.snippet": ["css", "less", "postcss", "sass", "scss"],
-  "scss.lint.float": "error",
-  "[scss]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Walid
+Copyright (c) 2022 Walid Korchi
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

components/NextHead.tsx

@@ -1,5 +1,4 @@
 import Head from 'next/head'
-
 import { projectConfig } from 'utils/config'
 
 interface HeadProps {

generators/Component/Component.tsx.hbs

@@ -1,17 +1,13 @@
 import classNames from 'classnames'
 
-import styles from './{{ properCase name }}.module.scss'
-
 interface {{ properCase name }}Props {
   className?: string
-  children?: string
 }
 
 export const {{ properCase name }}: React.FC<{{ properCase name }}Props> = ({
-  className,
+  className
-  children
 }) => {
   return (
-    <div className={classNames(className, styles.container)}>{children}</div>
+    <div className={classNames(className, '')}></div>
   )
 }

generators/Component/index.ts.hbs

@@ -0,0 +1 @@
+export * from './{{ properCase name }}'

locales/en/common.json

@@ -1,3 +1,3 @@
 {
-  "walidoux-github": "Walidoux's Github"
+  "repo-github": "Github Repository"
 }

locales/fr/common.json

@@ -1,3 +1,3 @@
 {
-  "walidoux-github": "Github de Walidoux"
+  "repo-github": "Dépôt Github"
 }

package.json

@@ -1,63 +1,81 @@
 {
   "name": "next-app-boilerplate",
-  "version": "0.0.0-development",
+  "version": "0.0.0",
   "license": "MIT",
-  "private": true,
+  "keywords": [
+    "template",
+    "tailwindcss",
+    "tsx",
+    "jsx",
+    "plopjs",
+    "fontsource",
+    "next-translate",
+    "nextjs",
+    "react",
+    "semantic-release",
+    "husky"
+  ],
+  "author": {
+    "name": "Walid",
+    "url": "https://walidkorchi.com"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
+    "check-types": "tsc --noemit",
     "lint:next": "next lint",
-    "lint:scss": "stylelint \"**/*.scss\"",
+    "lint:editorconfig": "editorconfig-checker",
     "lint:prettier": "prettier \".\" --check",
     "lint:commit": "commitlint",
     "release": "semantic-release",
-    "gen": "plop"
+    "generate": "plop"
   },
   "dependencies": {
-    "@fontsource/open-sans": "^4.5.10",
+    "@fontsource/open-sans": "^4.5.11",
     "classnames": "^2.3.1",
     "js-cookie": "^3.0.1",
-    "next": "^12.1.6",
+    "next": "^12.2.5",
-    "next-translate": "^1.4.0",
+    "next-translate": "^1.5.0",
-    "react": "^18.1.0",
+    "react": "^18.2.0",
-    "react-dom": "^18.1.0",
+    "react-dom": "^18.2.0"
-    "sass": "^1.52.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.0.1",
+    "@commitlint/cli": "^17.0.3",
-    "@commitlint/config-conventional": "^17.0.0",
+    "@commitlint/config-conventional": "^17.0.3",
     "@types/js-cookie": "^3.0.2",
-    "@types/node": "17.0.36",
+    "@types/node": "18.7.2",
-    "@types/react": "18.0.9",
+    "@types/react": "18.0.17",
-    "@typescript-eslint/eslint-plugin": "^5.26.0",
+    "@typescript-eslint/eslint-plugin": "^5.33.0",
-    "@typescript-eslint/parser": "^5.26.0",
+    "@typescript-eslint/parser": "^5.33.0",
-    "eslint": "^8.16.0",
+    "autoprefixer": "^10.4.8",
-    "eslint-config-conventions": "^2.0.0",
+    "editorconfig-checker": "^4.0.2",
-    "eslint-config-next": "12.1.6",
+    "eslint": "^8.21.0",
+    "eslint-config-next": "12.2.5",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-config-standard-with-typescript": "^22.0.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-n": "^15.2.4",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-unicorn": "^42.0.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "eslint-plugin-unicorn": "^43.0.2",
     "husky": "^8.0.1",
-    "plop": "^3.1.0",
+    "plop": "^3.1.1",
-    "postcss": "^8.4.14",
+    "postcss": "^8.4.16",
-    "postcss-scss": "^4.0.4",
+    "prettier": "^2.7.1",
-    "prettier": "^2.6.2",
+    "prettier-plugin-tailwindcss": "^0.1.13",
-    "react-icons": "^4.3.1",
+    "react-icons": "^4.4.0",
-    "semantic-release": "^19.0.2",
+    "semantic-release": "^19.0.3",
-    "stylelint": "^14.8.5",
+    "tailwindcss": "^3.1.8",
-    "stylelint-config-prettier": "^9.0.3",
+    "typescript": "^4.7.4"
-    "stylelint-config-prettier-scss": "^0.0.1",
-    "stylelint-config-standard": "^25.0.0",
-    "stylelint-config-standard-scss": "^4.0.0",
-    "stylelint-scss": "^4.2.0",
-    "typed-scss-modules": "^6.4.1",
-    "typescript": "^4.7.2"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/Walidoux/next-app-boilerplate.git"
+    "url": "https://github.com/Walidoux/next-app-boilerplate"
-  }
+  },
+  "bugs": {
+    "url": "https://github.com/Walidoux/next-app-boilerplate/issues"
+  },
+  "homepage": "https://next-app-boilerplate.vercel.app"
 }

pages/_app.tsx

@@ -1,9 +1,11 @@
-import { useEffect } from 'react'
+import '../styles/main.css'
+import '@fontsource/open-sans'
+import '@fontsource/open-sans/600.css'
+
+import Cookies from 'js-cookie'
 import type { AppProps } from 'next/app'
 import useTranslation from 'next-translate/useTranslation'
-import Cookies from 'js-cookie'
+import { useEffect } from 'react'
-
-import '../styles/main.scss'
 
 const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
   const { lang } = useTranslation()

pages/index.tsx

@@ -1,27 +1,27 @@
+import NextHead from 'components/NextHead'
 import type { NextPage } from 'next'
-import { FiGithub } from 'react-icons/fi'
 import Link from 'next/link'
 import useTranslation from 'next-translate/useTranslation'
-
+import { FiGithub } from 'react-icons/fi'
-import NextHead from 'components/NextHead'
-
-import styles from '../styles/pages/home.module.scss'
 
 const Home: NextPage = () => {
   const { t } = useTranslation()
 
   return (
-    <main className={styles.application}>
+    <main className='flex min-h-screen max-w-full flex-col items-center justify-center bg-gradient-to-br from-primary to-secondary'>
       <NextHead />
 
-      <p className={styles.title}>
+      <p className='px-3 text-center text-4xl italic text-white'>
         {t('home:title')} <br />
-        <span className={styles.subtitle}>{t('home:subtitle')}</span>
+        <span className='px-3 text-center text-lg italic text-white opacity-90'>
+          {t('home:subtitle')}
+        </span>
       </p>
-      <Link href='https://github.com/Walidoux'>
+
-        <a className={styles['redirect-link']} target='_blank'>
+      <Link href='https://github.com/Walidoux/next-app-boilerplate'>
+        <a className='mt-7 flex cursor-pointer items-center justify-center rounded-xl border-none bg-white bg-none py-[10px] px-6 font-semibold text-black no-underline outline-none transition duration-300 hover:bg-black hover:text-white'>
           <FiGithub fontSize={20} />
-          <span className={styles.text}>{t('common:walidoux-github')}</span>
+          <span className='ml-3'>{t('common:walidoux-github')}</span>
         </a>
       </Link>
     </main>

plopfile.js

@@ -1,27 +1,31 @@
 module.exports = (
   /** @type {import('plop').NodePlopAPI} */
   plop
-) => {
+) =>
   plop.setGenerator('component', {
     description: 'Generate a component',
     prompts: [
       {
         type: 'input',
         name: 'name',
-        message: 'Component name'
+        message: "What's the component's name ?"
+      },
+      {
+        type: 'input',
+        name: 'folder',
+        message: "What's the folder's name ?"
       }
     ],
     actions: [
       {
         type: 'add',
-        path: 'components/{{properCase name}}/{{properCase name}}.tsx',
+        path: 'components/{{folder}}/{{properCase name}}/{{properCase name}}.tsx',
-        templateFile: 'templates/Component/Component.tsx.hbs'
+        templateFile: 'generators/Component/Component.tsx.hbs'
       },
       {
         type: 'add',
-        path: 'components/{{properCase name}}/{{properCase name}}.module.scss',
+        path: 'components/{{folder}}/{{properCase name}}/index.ts',
-        templateFile: 'templates/Component/component.module.scss.hbs'
+        templateFile: 'generators/Component/index.ts.hbs'
       }
     ]
   })
-}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

styles/main.css

@@ -0,0 +1,9 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    font-family: 'Open Sans', sans-serif;
+  }
+}

styles/main.scss

@@ -1,2 +0,0 @@
-@use 'base/root' as *;
-@use 'vendors/normalize' as *;

styles/pages/home.scss

@@ -39,11 +39,4 @@
       margin-left: 10px;
     }
   }
-
-  .video {
-    position: fixed;
-    min-height: 200vh;
-    min-width: 100vw;
-    z-index: -100;
-  }
 }

styles/vendors/_normalize.scss

@@ -1,292 +0,0 @@
-// 1. Correct the line height in all browsers.
-// 2. Prevent adjustments of font size after orientation changes in iOS.
-
-html {
-  line-height: 1.15; // 1
-  -webkit-text-size-adjust: 100%; // 2
-}
-
-// Sections
-// ==========================================================================
-
-// Remove the margin in all browsers.
-
-body {
-  margin: 0;
-}
-
-// Correct the font size and margin on `h1` elements within `section` and
-// `article` contexts in Chrome, Firefox, and Safari.
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-// Grouping content
-// ==========================================================================
-
-// 1. Add the correct box sizing in Firefox.
-// 2. Show the overflow in Edge and IE.
-
-hr {
-  box-sizing: content-box; // 1
-  height: 0; // 1
-  overflow: visible; // 2
-}
-
-// 1. Correct the inheritance and scaling of font size in all browsers.
-// 2. Correct the odd `em` font sizing in all browsers.
-
-pre {
-  font-family: monospace, sans-serif; // 1
-  font-size: 1em; // 2
-}
-
-// Text-level semantics
-// ==========================================================================
-
-// Remove the gray background on active links in IE 10.
-
-a {
-  background-color: transparent;
-}
-
-// 1. Remove the bottom border in Chrome 57-
-// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
-
-abbr[title] {
-  border-bottom: 0; // 1
-  text-decoration: underline dotted; // 2
-}
-
-// Add the correct font weight in Chrome, Edge, and Safari.
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-// 1. Correct the inheritance and scaling of font size in all browsers.
-// 2. Correct the odd `em` font sizing in all browsers.
-
-code,
-kbd,
-samp {
-  font-family: monospace, sans-serif; // 1
-  font-size: 1em; // 2
-}
-
-// Add the correct font size in all browsers.
-
-small {
-  font-size: 80%;
-}
-
-// Prevent `sub` and `sup` elements from affecting the line height in
-// all browsers.
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-// Embedded content
-// ==========================================================================
-
-// Remove the border on images inside links in IE 10.
-
-img {
-  border-style: none;
-}
-
-// Forms
-// ==========================================================================
-
-// 1. Change the font styles in all browsers.
-// 2. Remove the margin in Firefox and Safari.
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; // 1
-  font-size: 100%; // 1
-  line-height: 1.15; // 1
-  margin: 0; // 2
-}
-
-// Show the overflow in IE.
-// 1. Show the overflow in Edge.
-
-button,
-input {
-  // 1
-  overflow: visible;
-}
-
-// Remove the inheritance of text transform in Edge, Firefox, and IE.
-// 1. Remove the inheritance of text transform in Firefox.
-
-button,
-select {
-  // 1
-  text-transform: none;
-}
-
-// Correct the inability to style clickable types in iOS and Safari.
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-  -webkit-appearance: button;
-}
-
-// Remove the inner border and padding in Firefox.
-
-button::-moz-focus-inner,
-[type='button']::-moz-focus-inner,
-[type='reset']::-moz-focus-inner,
-[type='submit']::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-// Restore the focus styles unset by the previous rule.
-
-button:-moz-focusring,
-[type='button']:-moz-focusring,
-[type='reset']:-moz-focusring,
-[type='submit']:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-// Correct the padding in Firefox.
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-// 1. Correct the text wrapping in Edge and IE.
-// 2. Correct the color inheritance from `fieldset` elements in IE.
-// 3. Remove the padding so developers are not caught out when they zero out
-//    `fieldset` elements in all browsers.
-
-legend {
-  box-sizing: border-box; // 1
-  color: inherit; // 2
-  display: table; // 1
-  max-width: 100%; // 1
-  padding: 0; // 3
-  white-space: normal; // 1
-}
-
-// Add the correct vertical alignment in Chrome, Firefox, and Opera.
-
-progress {
-  vertical-align: baseline;
-}
-
-// Remove the default vertical scrollbar in IE 10+.
-
-textarea {
-  overflow: auto;
-}
-
-// 1. Add the correct box sizing in IE 10.
-// 2. Remove the padding in IE 10.
-
-[type='checkbox'],
-[type='radio'] {
-  box-sizing: border-box; // 1
-  padding: 0; // 2
-}
-
-// Correct the cursor style of increment and decrement buttons in Chrome.
-
-[type='number']::-webkit-inner-spin-button,
-[type='number']::-webkit-outer-spin-button {
-  height: auto;
-}
-
-// 1. Correct the odd appearance in Chrome and Safari.
-// 2. Correct the outline style in Safari.
-
-[type='search'] {
-  -webkit-appearance: textfield; // 1
-  outline-offset: -2px; // 2
-}
-
-// Remove the inner padding in Chrome and Safari on macOS.
-
-[type='search']::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-// 1. Correct the inability to style clickable types in iOS and Safari.
-// 2. Change font properties to `inherit` in Safari.
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; // 1
-  font: inherit; // 2
-}
-
-// Interactive
-// ==========================================================================
-
-// Add the correct display in Edge, IE 10+, and Firefox.
-
-details {
-  display: block;
-}
-
-// Add the correct display in all browsers.
-
-summary {
-  display: list-item;
-}
-
-// Misc
-// ==========================================================================
-
-// Add the correct display in IE 10+.
-
-template {
-  display: none;
-}
-
-// Add the correct display in IE 10.
-
-[hidden] {
-  display: none;
-}
-
-// Disable outline when intent is clearly mouse and touch
-[data-whatintent='mouse'],
-[data-whatintent='touch'],
-[data-whatinput='mouse'],
-[data-whatinput='touch'] {
-  *,
-  *:focus {
-    outline: none;
-  }
-}
-
-// Disable iOS callouts when draggable is false
-[draggable='false'] {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-}

tailwind.config.js

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}'
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: '#775aaa',
+        secondary: '#393ecc'
+      }
+    }
+  },
+  plugins: []
+}

templates/Component/Component.module.scss.hbs

@@ -1,9 +0,0 @@
-@import 'mixins';
-@import 'helpers';
-
-.container {
-  @include display-flex(center, center, row);
-  @extend %container;
-
-  position: relative;
-}