deps: update all dependencies to the latest major

.ncurc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  "reject": [],
+  filterResults: (name, { upgradedVersionSemver }) => {
+    if (
+      name === '@types/node' && parseInt(upgradedVersionSemver?.major) >= 22 ||
+      name === 'eslint' && parseInt(upgradedVersionSemver?.major) >= 9 ||
+      name === '@typescript-eslint/eslint-plugin' && parseInt(upgradedVersionSemver?.major) >= 8 ||
+      name === '@typescript-eslint/parser' && parseInt(upgradedVersionSemver?.major) >= 8 ||
+      name === 'nock' && parseInt(upgradedVersionSemver?.major) >= 14
+    ) {
+      return false
+    }
+
+    return true
+  }
+}

.yarnrc.yml

@@ -4,4 +4,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.4.1.cjs
+yarnPath: .yarn/releases/yarn-4.6.0.cjs

package.json

@@ -34,22 +34,22 @@
   },
   "author": "Marco Montalbano <[email protected]>",
   "devDependencies": {
-    "@types/node": "~20.16.3",
+    "@types/node": "~20.17.19",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "@vitest/coverage-istanbul": "^2.0.5",
-    "eslint": "^8.57.0",
+    "@vitest/coverage-istanbul": "^3.0.7",
+    "eslint": "^8.57.1",
     "eslint-config-airbnb": "~19.0.4",
-    "eslint-plugin-import": "~2.29.1",
-    "husky": "^9.1.5",
-    "lerna": "^8.1.8",
+    "eslint-plugin-import": "~2.31.0",
+    "husky": "^9.1.7",
+    "lerna": "^8.2.0",
     "lerna-changelog": "~2.2.0",
-    "lint-staged": "~15.2.10",
+    "lint-staged": "~15.4.3",
     "ls-engines": "^0.9.3",
-    "nock": "~13.5.5",
-    "npm-check-updates": "^17.1.1",
-    "typescript": "~5.5.4",
-    "vitest": "^2.0.5"
+    "nock": "v13.5.6",
+    "npm-check-updates": "^17.1.15",
+    "typescript": "~5.8.2",
+    "vitest": "^3.0.7"
   },
   "engines": {
     "node": ">= 18.17"
@@ -72,5 +72,5 @@
       "PR: New Feature :rocket:": ":rocket: New Feature"
     }
   },
-  "packageManager": "yarn@4.4.1"
+  "packageManager": "yarn@4.6.0"
 }

packages/cli/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@figma-export/core": "^6.0.2",
     "@figma-export/types": "^6.0.0",
-    "ora": "~8.1.0",
+    "ora": "~8.2.0",
     "sade": "~1.8.1"
   },
   "engines": {

packages/core/package.json

@@ -25,13 +25,13 @@
     },
     "dependencies": {
         "@figma-export/types": "^6.0.0",
-        "axios": "^1.7.7",
+        "axios": "^1.8.1",
         "figma-js": "~1.16.0",
-        "p-limit": "^6.1.0",
-        "p-retry": "^6.2.0"
+        "p-limit": "^6.2.0",
+        "p-retry": "^6.2.1"
     },
     "overrides": {
-        "axios": "^1.7.7"
+        "axios": "^1.8.1"
     },
     "resolutions": {
         "axios": "^1.6.8"

packages/output-components-as-es6/src/index.test.ts

@@ -189,7 +189,7 @@ describe('outputter as es6', () => {
         const document = figmaDocument.createDocument({ children: [page] });
         const pages: FigmaExport.PageNode[] = figma.getPagesWithComponents(document, getComponentsDefaultOptions);
 
-        expect(
+        await expect(
             () => outputter({
                 output: 'output',
             })(pages),
@@ -205,7 +205,7 @@ describe('outputter as es6', () => {
         const document = figmaDocument.createDocument({ children: [page] });
         const pages: FigmaExport.PageNode[] = figma.getPagesWithComponents(document, getComponentsDefaultOptions);
 
-        expect(
+        await expect(
             () => outputter({
                 output: 'output',
             })(pages),

packages/website/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

packages/website/package.json

@@ -26,19 +26,19 @@
   "devDependencies": {
     "@figma-export/cli": "^6.0.2",
     "@figma-export/utils": "^6.0.0",
-    "@types/react": "^18.3.5",
-    "eslint-config-next": "^14.2.7",
+    "@types/react": "^19.0.10",
+    "eslint-config-next": "^15.2.0",
     "npm-run-all": "~4.1.5",
     "rimraf": "~6.0.1",
-    "sass": "~1.77.8"
+    "sass": "~1.85.1"
   },
   "dependencies": {
     "@svgr/plugin-jsx": "^8.1.0",
-    "@types/prismjs": "^1.26.4",
-    "next": "^14.2.7",
+    "@types/prismjs": "^1.26.5",
+    "next": "^15.2.0",
     "prismjs": "^1.29.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "engines": {
     "node": ">= 18.17"

packages/website/scss/_figma-styles.scss

@@ -1,44 +1,46 @@
+@use "../output/figma-styles/variables";
+
 
 // just using variables from the exported Figma Styles
 
-.color-1 { background: $color-1 }
-.color-1-lighter { background: $color-1-lighter }
-.color-2 { background: $color-2 }
-.color-3 { background: $color-3 }
-.color-4 { background: $color-4 }
-.color-alpha-50 { background: $color-alpha-50 }
-.color-figma-gradient { background: $color-figma-gradient }
-.color-figma-gradient-10 { background: $color-figma-gradient-10 }
-.color-linear-gradient { background: $color-linear-gradient }
-.color-linear-gradient-alpha { background: $color-linear-gradient-alpha }
-.color-multi-gradient { background: $color-multi-gradient }
-.inner-shadow { box-shadow: $inner-shadow }
-.inner-shadow-bottom { box-shadow: $inner-shadow-bottom }
-.drop-shadow { box-shadow: $drop-shadow }
-.layer-blur { filter: $layer-blur; background: $color-1 }
-.multi-shadows { box-shadow: $multi-shadows }
-.mixed-effects { box-shadow: $mixed-effects }
+.color-1 { background: variables.$color-1 }
+.color-1-lighter { background: variables.$color-1-lighter }
+.color-2 { background: variables.$color-2 }
+.color-3 { background: variables.$color-3 }
+.color-4 { background: variables.$color-4 }
+.color-alpha-50 { background: variables.$color-alpha-50 }
+.color-figma-gradient { background: variables.$color-figma-gradient }
+.color-figma-gradient-10 { background: variables.$color-figma-gradient-10 }
+.color-linear-gradient { background: variables.$color-linear-gradient }
+.color-linear-gradient-alpha { background: variables.$color-linear-gradient-alpha }
+.color-multi-gradient { background: variables.$color-multi-gradient }
+.inner-shadow { box-shadow: variables.$inner-shadow }
+.inner-shadow-bottom { box-shadow: variables.$inner-shadow-bottom }
+.drop-shadow { box-shadow: variables.$drop-shadow }
+.layer-blur { filter: variables.$layer-blur; background: variables.$color-1 }
+.multi-shadows { box-shadow: variables.$multi-shadows }
+.mixed-effects { box-shadow: variables.$mixed-effects }
 
 .h1 {
-    @each $name, $value in $h1 {
+    @each $name, $value in variables.$h1 {
         #{$name}: $value;
     }
 }
 
 .h2 {
-    @each $name, $value in $h2 {
+    @each $name, $value in variables.$h2 {
         #{$name}: $value;
     }
 }
 
 .regular-text {
-    @each $name, $value in $regular-text {
+    @each $name, $value in variables.$regular-text {
         #{$name}: $value;
     }
 }
 
 .deleted-text {
-    @each $name, $value in $deleted-text {
+    @each $name, $value in variables.$deleted-text {
         #{$name}: $value;
     }
 }

packages/website/scss/_tooltip.scss

@@ -1,5 +1,7 @@
+@use "mixin";
+
 [data-tooltip] {
-    @include for-desktop-up {
+    @include mixin.for-desktop-up {
         position: relative;
     }
 }

packages/website/scss/index.scss

@@ -1,7 +1,7 @@
-@import "../output/figma-styles/variables";
-@import "./mixin";
-@import "./figma-styles";
-@import "./tooltip";
+@use "../output/figma-styles/variables";
+@use "mixin";
+@use "figma-styles";
+@use "tooltip";
 
 // $color-1: #f24e1e;
 // $color-2: #a259ff;
@@ -58,8 +58,8 @@ pre.Code {
 }
 
 .figma-gradient {
-    background: $color-1;
-    background: $color-figma-gradient;
+    background: variables.$color-1;
+    background: variables.$color-figma-gradient;
     line-height: 2em;
 
     @at-root code:not([class*=language-]) {
@@ -69,11 +69,11 @@ pre.Code {
     }
 
     &.with-opacity-05 {
-        background: $color-figma-gradient-05;
+        background: variables.$color-figma-gradient-05;
     }
 
     &.with-opacity-10 {
-        background: $color-figma-gradient-10;
+        background: variables.$color-figma-gradient-10;
     }
 
     &.text {
@@ -102,7 +102,7 @@ pre.Code {
         padding: 0;
     } 
 
-    @include for-desktop-up {
+    @include mixin.for-desktop-up {
         min-height: 635px;
         height: 100vh;
         display: flex;
@@ -122,7 +122,7 @@ pre.Code {
         justify-content: space-around;
         flex-wrap: wrap;
 
-        @include for-desktop-up {
+        @include mixin.for-desktop-up {
             flex-wrap: nowrap;
         }
 
@@ -135,7 +135,7 @@ pre.Code {
                 max-width: 100%;
             }
 
-            @include for-desktop-up {
+            @include mixin.for-desktop-up {
                 width: 35vw;
             }
         }
@@ -157,7 +157,7 @@ pre.Code {
             margin-top: 50px;
             display: none;
 
-            @include for-desktop-up {
+            @include mixin.for-desktop-up {
                 display: inline-block;
             }
         }
@@ -174,7 +174,7 @@ pre.Code {
             flex-wrap: wrap;
             justify-content: space-between;
 
-            @include for-desktop-up {
+            @include mixin.for-desktop-up {
                 width: 35vw;
                 height: calc(35vw - 170px);
             }
@@ -239,7 +239,7 @@ h2 {
     flex-direction: column;
     margin: 30px 0;
 
-    @include for-desktop-up {
+    @include mixin.for-desktop-up {
         align-items: center;
         flex-direction: row;
     }
@@ -274,7 +274,7 @@ h2 {
         }
     }
 
-    @include for-desktop-up {
+    @include mixin.for-desktop-up {
         &:nth-child(odd) > div.code-block--code {
             order: -1;
         }
@@ -291,7 +291,7 @@ h2 {
     display: block;
     text-align: right;
 
-    @include for-desktop-up {
+    @include mixin.for-desktop-up {
         @at-root .hero + .github-link {
             position: absolute;
         }
@@ -329,15 +329,15 @@ h2 {
         width: 40px;
         height: 40px;
 
-        @include for-desktop-up {
+        @include mixin.for-desktop-up {
             width: 50px;
             height: 50px;
         }
     }
 
     &:not(.no-margin) {
         margin: 8px;
-        @include for-desktop-up {
+        @include mixin.for-desktop-up {
             margin: 10px;
         }
     }

packages/website/src/components/CodeBlock.tsx

@@ -1,8 +1,9 @@
 import Code from '@/components/Code';
+import type React from 'react'
 
 type Props = {
-  title: JSX.Element
-  description: JSX.Element
+  title: React.JSX.Element
+  description: React.JSX.Element
   code: string
   children?: React.ReactNode
 }