Walidoux/next-app-boilerplate
Walidoux/next-app-boilerplate
Template
1
1
Fork 0
Code Issues Pull Requests Actions Releases Activity

refactor: config with scss to tailwind (#42)

Browse Source 
* 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
This commit is contained in:
Walid 2022-08-13 14:12:53 +01:00 committed by GitHub
parent bfa765e80b
commit 8d066ed42f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 1182 additions and 1866 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.eslintignore
View File

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

20
.eslintrc
View File

@ -1,10 +1,20 @@
{
"extends": ["conventions", "next/core-web-vitals", "prettier"],
"plugins": ["prettier"],
"parserOptions": { "project": "./tsconfig.json" },
"plugins": ["prettier", "simple-import-sort"],
"extends": ["standard-with-typescript", "prettier"],
"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"
}
}

26
.github/workflows/build.yml vendored
View File

@ -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

7
.github/workflows/release.yml → .github/workflows/ci.yml vendored
View File

@ -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:

15
.github/workflows/lint.yml vendored
View File

@ -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
run: yarn lint:scss
- name: Checking editorconfig
run: yarn lint:editorconfig
- name: Commit linting
run: yarn lint:commit -- --to '${{ github.sha }}'

3
.prettierignore
View File

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

20
.stylelintrc
View File

@ -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"]
}
]
}
}

3
.vscode/extensions.json vendored
View File

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

14
.vscode/settings.json vendored
View File

@ -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"
}
}

2
LICENSE
View File

@ -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

1
components/NextHead.tsx
View File

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

8
templates/Component/Component.tsx.hbs → generators/Component/Component.tsx.hbs
View File

@ -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,
children
className
}) => {
return (
<div className={classNames(className, styles.container)}>{children}</div>
<div className={classNames(className, '')}></div>
)
}

1
generators/Component/index.ts.hbs Normal file
View File

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

2
locales/en/common.json
View File

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

2
locales/fr/common.json
View File

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

92
package.json
View File

@ -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-translate": "^1.4.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"sass": "^1.52.1"
"next": "^12.2.5",
"next-translate": "^1.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@commitlint/cli": "^17.0.1",
"@commitlint/config-conventional": "^17.0.0",
"@commitlint/cli": "^17.0.3",
"@commitlint/config-conventional": "^17.0.3",
"@types/js-cookie": "^3.0.2",
"@types/node": "17.0.36",
"@types/react": "18.0.9",
"@typescript-eslint/eslint-plugin": "^5.26.0",
"@typescript-eslint/parser": "^5.26.0",
"eslint": "^8.16.0",
"eslint-config-conventions": "^2.0.0",
"eslint-config-next": "12.1.6",
"@types/node": "18.7.2",
"@types/react": "18.0.17",
"@typescript-eslint/eslint-plugin": "^5.33.0",
"@typescript-eslint/parser": "^5.33.0",
"autoprefixer": "^10.4.8",
"editorconfig-checker": "^4.0.2",
"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",
"postcss": "^8.4.14",
"postcss-scss": "^4.0.4",
"prettier": "^2.6.2",
"react-icons": "^4.3.1",
"semantic-release": "^19.0.2",
"stylelint": "^14.8.5",
"stylelint-config-prettier": "^9.0.3",
"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"
"plop": "^3.1.1",
"postcss": "^8.4.16",
"prettier": "^2.7.1",
"prettier-plugin-tailwindcss": "^0.1.13",
"react-icons": "^4.4.0",
"semantic-release": "^19.0.3",
"tailwindcss": "^3.1.8",
"typescript": "^4.7.4"
},
"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"
}

10
pages/_app.tsx
View File

@ -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 '../styles/main.scss'
import { useEffect } from 'react'
const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
const { lang } = useTranslation()

22
pages/index.tsx
View File

@ -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 NextHead from 'components/NextHead'
import styles from '../styles/pages/home.module.scss'
import { FiGithub } from 'react-icons/fi'
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>

18
plopfile.js
View File

@ -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',
templateFile: 'templates/Component/Component.tsx.hbs'
path: 'components/{{folder}}/{{properCase name}}/{{properCase name}}.tsx',
templateFile: 'generators/Component/Component.tsx.hbs'
},
{
type: 'add',
path: 'components/{{properCase name}}/{{properCase name}}.module.scss',
templateFile: 'templates/Component/component.module.scss.hbs'
path: 'components/{{folder}}/{{properCase name}}/index.ts',
templateFile: 'generators/Component/index.ts.hbs'
}
]
})
}

6
postcss.config.js Normal file
View File

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

9
styles/main.css Normal file
View File

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

2
styles/main.scss
View File

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

7
styles/pages/home.module.scss → styles/pages/home.scss
View File

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

292
styles/vendors/_normalize.scss vendored
View File

@ -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;
}

16
tailwind.config.js Normal file
View File

@ -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: []
}

9
templates/Component/Component.module.scss.hbs
View File

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

2437
yarn.lock
View File

File diff suppressed because it is too large Load Diff