update deps

Author: j0nezz

.eslintrc.json

@@ -13,15 +13,8 @@
     "react/jsx-curly-brace-presence": "off",
     "require-atomic-updates": "off",
     "10x/no-full-import": "error",
-    "10x/react-in-scope": "off",
-    "10x/auto-import": [
-      "error",
-      {
-        "imports": {
-          "styled": "import styled from 'styled-components'",
-          "lighten": "import {lighten} from 'polished'",
-          "format": "import {format} from 'date-fns'"
-        }
-      }]
+    "no-unused-vars": "off",
+    "react/display-name": "off",
+    "@typescript-eslint/no-unused-vars": ["error"]
   }
 }

.prettierrc

@@ -5,5 +5,6 @@
   "trailingComma": "none",
   "tabWidth": 2,
   "useTabs": false,
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "plugins": ["prettier-plugin-organize-imports"]
 }

.stylelintrc

@@ -1,8 +1,7 @@
 {
-  "processors": ["stylelint-processor-styled-components"],
+  "customSyntax": "postcss-styled-syntax",
   "extends": [
-    "stylelint-config-recommended",
-    "stylelint-config-styled-components"
+    "stylelint-config-recommended"
   ],
   "rules": {
     "at-rule-no-unknown": [
@@ -21,11 +20,9 @@
     "no-duplicate-at-import-rules": true,
     "no-duplicate-selectors": true,
     "no-empty-source": null,
-    "no-extra-semicolons": true,
     "no-invalid-double-slash-comments": true,
     "property-no-unknown": true,
     "color-no-invalid-hex": true,
-    "color-hex-case": "lower",
     "color-named": "never",
     "color-hex-length": "long",
     "color-no-hex": null,
@@ -37,11 +34,8 @@
     "block-no-empty": null,
     "font-weight-notation": "named-where-possible",
     "font-family-name-quotes": "always-unless-keyword",
-    "number-leading-zero": "always",
-    "number-no-trailing-zeros": true,
     "value-no-vendor-prefix": true,
     "shorthand-property-no-redundant-values": true,
-    "string-quotes": "single",
     "number-max-precision": 2,
     "unit-allowed-list": ["px", "%", "s", "fr", "rem", "vw", "vh", "deg"]
 

README.md

@@ -1,5 +1,5 @@
 # Next.js typescript styled-components starter
-This is a starter template for Next.js giving you a head start when building with **typescript** and **styled-components**.
+This is a starter template for Next.js giving you a headstart when building with **typescript** and **styled-components**.
 
 ## What's inside
 - Typescript

next.config.js

@@ -1,4 +1,7 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
-  reactStrictMode: true
+  reactStrictMode: true,
+  compiler: {
+    styledComponents: true
+  }
 };

package.json

@@ -7,37 +7,35 @@
     "build": "next build",
     "start": "next start",
     "test": "next lint && yarn lint:css",
-    "lint:css":"stylelint './src/**/*.{tsx,js,ts}'"
-
+    "lint:css": "stylelint './src/**/*.{tsx,js,ts}'"
   },
   "dependencies": {
-    "axelra-react-utilities": "^0.1.0",
-    "dotenv": "^10.0.0",
-    "next": "^12.2.3",
-    "next-seo": "^5.4.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "styled-components": "^5.3.5"
+    "axelra-react-utilities": "^0.2.3",
+    "next": "^14.0.4",
+    "next-seo": "^6.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.2"
   },
   "devDependencies": {
-    "@types/node": "16.11.12",
-    "@types/react": "^18.0.14",
-    "@types/styled-components": "^5.1.25",
+    "@types/node": "^18.16.0",
+    "@types/react": "^18.2.8",
+    "@types/react-dom": "^18.2.4",
+    "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
-    "eslint": "^8.8.0",
-    "eslint-config-next": "^12.1.6",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-10x": "^1.5.2",
+    "eslint": "^8.54.0",
+    "eslint-config-next": "^14.0.3",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-10x": "^1.5.0",
     "eslint-plugin-no-inline-styles": "^1.0.5",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.30.0",
-    "prettier": "^2.7.1",
-    "prettier-plugin-organize-imports": "^3.0.0",
-    "stylelint": "^14.9.1",
-    "stylelint-config-recommended": "^8.0.0",
-    "stylelint-config-standard": "^26.0.0",
-    "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-processor-styled-components": "^1.10.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "postcss-styled-syntax": "^0.5.0",
+    "prettier": "^3.1.1",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "stylelint": "^16.0.2",
+    "stylelint-config-recommended": "^14.0.0",
+    "stylelint-config-standard": "^35.0.0",
     "typescript": "^4.7.4"
   }
 }

src/pages/index.tsx

@@ -43,16 +43,11 @@ const Home = () => {
       </H2>
       <Text block center>
         Axelra-React-Utilities can be configured differently using the{' '}
-        <a href={'https://nextjs.org/docs/basic-features/layouts'}>
+        <Link href={'https://nextjs.org/docs/basic-features/layouts'}>
           layout pattern
-        </a>
-        .<br /> Check out this{' '}
-        <Link href={'/other'} passHref>
-          <Text weight={'Bold'} as={'a'}>
-            Other Page
-          </Text>
-        </Link>{' '}
-        to see it in action
+        </Link>
+        .<br /> Check out this <Link href={'/other'}>Other Page</Link> to see it
+        in action
       </Text>
     </Container>
   );

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,