Setup GitHub Actions for Pull request and main branch (#4)

* Setup GitHub Actions for Pull request and main branch

* Fix regression caused by typescript-eslint in combination with eslint@9.15.0
Details on: typescript-eslint/typescript-eslint#10339

* Resolve linter issues after updating packages

.github/workflows/pr-validation.yml

@@ -0,0 +1,25 @@
+name: Snap-component PR validation
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: "yarn"
+      - name: Install dependencies
+        run: yarn install --immutable
+      - name: Run lint
+        run: yarn lint
+      - name: Run tests
+        run: yarn test
+      - name: Run build
+        run: yarn build

.yarn/releases/yarn-4.5.1.cjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-/* eslint-disable */
+ 
 //prettier-ignore
 (()=>{var j3e=Object.create;var gT=Object.defineProperty;var G3e=Object.getOwnPropertyDescriptor;var Y3e=Object.getOwnPropertyNames;var W3e=Object.getPrototypeOf,K3e=Object.prototype.hasOwnProperty;var ve=(t=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(t,{get:(e,r)=>(typeof require<"u"?require:e)[r]}):t)(function(t){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+t+'" is not supported')});var wt=(t,e)=>()=>(t&&(e=t(t=0)),e);var _=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),Kt=(t,e)=>{for(var r in e)gT(t,r,{get:e[r],enumerable:!0})},V3e=(t,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of Y3e(e))!K3e.call(t,a)&&a!==r&&gT(t,a,{get:()=>e[a],enumerable:!(o=G3e(e,a))||o.enumerable});return t};var et=(t,e,r)=>(r=t!=null?j3e(W3e(t)):{},V3e(e||!t||!t.__esModule?gT(r,"default",{value:t,enumerable:!0}):r,t));var Pi={};Kt(Pi,{SAFE_TIME:()=>cY,S_IFDIR:()=>VD,S_IFLNK:()=>zD,S_IFMT:()=>Hu,S_IFREG:()=>oI});var Hu,VD,oI,zD,cY,uY=wt(()=>{Hu=61440,VD=16384,oI=32768,zD=40960,cY=456789e3});var sr={};Kt(sr,{EBADF:()=>ho,EBUSY:()=>z3e,EEXIST:()=>t_e,EINVAL:()=>X3e,EISDIR:()=>e_e,ENOENT:()=>Z3e,ENOSYS:()=>J3e,ENOTDIR:()=>$3e,ENOTEMPTY:()=>n_e,EOPNOTSUPP:()=>i_e,EROFS:()=>r_e,ERR_DIR_CLOSED:()=>dT});function Ll(t,e){return Object.assign(new Error(`${t}: ${e}`),{code:t})}function z3e(t){return Ll("EBUSY",t)}function J3e(t,e){return Ll("ENOSYS",`${t}, ${e}`)}function X3e(t){return Ll("EINVAL",`invalid argument, ${t}`)}function ho(t){return Ll("EBADF",`bad file descriptor, ${t}`)}function Z3e(t){return Ll("ENOENT",`no such file or directory, ${t}`)}function $3e(t){return Ll("ENOTDIR",`not a directory, ${t}`)}function e_e(t){return Ll("EISDIR",`illegal operation on a directory, ${t}`)}function t_e(t){return Ll("EEXIST",`file already exists, ${t}`)}function r_e(t){return Ll("EROFS",`read-only filesystem, ${t}`)}function n_e(t){return Ll("ENOTEMPTY",`directory not empty, ${t}`)}function i_e(t){return Ll("EOPNOTSUPP",`operation not supported, ${t}`)}function dT(){return Ll("ERR_DIR_CLOSED","Directory handle was closed")}var JD=wt(()=>{});var Ia={};Kt(Ia,{BigIntStatsEntry:()=>cm,DEFAULT_MODE:()=>ET,DirEntry:()=>mT,StatEntry:()=>lm,areStatsEqual:()=>CT,clearStats:()=>XD,convertToBigIntStats:()=>o_e,makeDefaultStats:()=>AY,makeEmptyStats:()=>s_e});function AY(){return new lm}function s_e(){return XD(AY())}function XD(t){for(let e in t)if(Object.hasOwn(t,e)){let r=t[e];typeof r=="number"?t[e]=0:typeof r=="bigint"?t[e]=BigInt(0):yT.types.isDate(r)&&(t[e]=new Date(0))}return t}function o_e(t){let e=new cm;for(let r in t)if(Object.hasOwn(t,r)){let o=t[r];typeof o=="number"?e[r]=BigInt(o):yT.types.isDate(o)&&(e[r]=new Date(o))}return e.atimeNs=e.atimeMs*BigInt(1e6),e.mtimeNs=e.mtimeMs*BigInt(1e6),e.ctimeNs=e.ctimeMs*BigInt(1e6),e.birthtimeNs=e.birthtimeMs*BigInt(1e6),e}function CT(t,e){if(t.atimeMs!==e.atimeMs||t.birthtimeMs!==e.birthtimeMs||t.blksize!==e.blksize||t.blocks!==e.blocks||t.ctimeMs!==e.ctimeMs||t.dev!==e.dev||t.gid!==e.gid||t.ino!==e.ino||t.isBlockDevice()!==e.isBlockDevice()||t.isCharacterDevice()!==e.isCharacterDevice()||t.isDirectory()!==e.isDirectory()||t.isFIFO()!==e.isFIFO()||t.isFile()!==e.isFile()||t.isSocket()!==e.isSocket()||t.isSymbolicLink()!==e.isSymbolicLink()||t.mode!==e.mode||t.mtimeMs!==e.mtimeMs||t.nlink!==e.nlink||t.rdev!==e.rdev||t.size!==e.size||t.uid!==e.uid)return!1;let r=t,o=e;return!(r.atimeNs!==o.atimeNs||r.mtimeNs!==o.mtimeNs||r.ctimeNs!==o.ctimeNs||r.birthtimeNs!==o.birthtimeNs)}var yT,ET,mT,lm,cm,wT=wt(()=>{yT=et(ve("util")),ET=33188,mT=class{constructor(){this.name="";this.path="";this.mode=0}isBlockDevice(){return!1}isCharacterDevice(){return!1}isDirectory(){return(this.mode&61440)===16384}isFIFO(){return!1}isFile(){return(this.mode&61440)===32768}isSocket(){return!1}isSymbolicLink(){return(this.mode&61440)===40960}},lm=class{constructor(){this.uid=0;this.gid=0;this.size=0;this.blksize=0;this.atimeMs=0;this.mtimeMs=0;this.ctimeMs=0;this.birthtimeMs=0;this.atime=new Date(0);this.mtime=new Date(0);this.ctime=new Date(0);this.birthtime=new Date(0);this.dev=0;this.ino=0;this.mode=ET;this.nlink=1;this.rdev=0;this.blocks=1}isBlockDevice(){return!1}isCharacterDevice(){return!1}isDirectory(){return(this.mode&61440)===16384}isFIFO(){return!1}isFile(){return(this.mode&61440)===32768}isSocket(){return!1}isSymbolicLink(){return(this.mode&61440)===40960}},cm=class{constructor(){this.uid=BigInt(0);this.gid=BigInt(0);this.size=BigInt(0);this.blksize=BigInt(0);this.atimeMs=BigInt(0);this.mtimeMs=BigInt(0);this.ctimeMs=BigInt(0);this.birthtimeMs=BigInt(0);this.atimeNs=BigInt(0);this.mtimeNs=BigInt(0);this.ctimeNs=BigInt(0);this.birthtimeNs=BigInt(0);this.atime=new Date(0);this.mtime=new Date(0);this.ctime=new Date(0);this.birthtime=new Date(0);this.dev=BigInt(0);this.ino=BigInt(0);this.mode=BigInt(ET);this.nlink=BigInt(1);this.rdev=BigInt(0);this.blocks=BigInt(1)}isBlockDevice(){return!1}isCharacterDevice(){return!1}isDirectory(){return(this.mode&BigInt(61440))===BigInt(16384)}isFIFO(){return!1}isFile(){return(this.mode&BigInt(61440))===BigInt(32768)}isSocket(){return!1}isSymbolicLink(){return(this.mode&BigInt(61440))===BigInt(40960)}}});function A_e(t){let e,r;if(e=t.match(c_e))t=e[1];else if(r=t.match(u_e))t=`\\\\${r[1]?".\\":""}${r[2]}`;else return t;return t.replace(/\//g,"\\")}function f_e(t){t=t.replace(/\\/g,"/");let e,r;return(e=t.match(a_e))?t=`/${e[1]}`:(r=t.match(l_e))&&(t=`/unc/${r[1]?".dot/":""}${r[2]}`),t}function ZD(t,e){return t===Ae?pY(e):IT(e)}var aI,Bt,mr,Ae,K,fY,a_e,l_e,c_e,u_e,IT,pY,Ba=wt(()=>{aI=et(ve("path")),Bt={root:"/",dot:".",parent:".."},mr={home:"~",nodeModules:"node_modules",manifest:"package.json",lockfile:"yarn.lock",virtual:"__virtual__",pnpJs:".pnp.js",pnpCjs:".pnp.cjs",pnpData:".pnp.data.json",pnpEsmLoader:".pnp.loader.mjs",rc:".yarnrc.yml",env:".env"},Ae=Object.create(aI.default),K=Object.create(aI.default.posix);Ae.cwd=()=>process.cwd();K.cwd=process.platform==="win32"?()=>IT(process.cwd()):process.cwd;process.platform==="win32"&&(K.resolve=(...t)=>t.length>0&&K.isAbsolute(t[0])?aI.default.posix.resolve(...t):aI.default.posix.resolve(K.cwd(),...t));fY=function(t,e,r){return e=t.normalize(e),r=t.normalize(r),e===r?".":(e.endsWith(t.sep)||(e=e+t.sep),r.startsWith(e)?r.slice(e.length):null)};Ae.contains=(t,e)=>fY(Ae,t,e);K.contains=(t,e)=>fY(K,t,e);a_e=/^([a-zA-Z]:.*)$/,l_e=/^\/\/(\.\/)?(.*)$/,c_e=/^\/([a-zA-Z]:.*)$/,u_e=/^\/unc\/(\.dot\/)?(.*)$/;IT=process.platform==="win32"?f_e:t=>t,pY=process.platform==="win32"?A_e:t=>t;Ae.fromPortablePath=pY;Ae.toPortablePath=IT});async function $D(t,e){let r="0123456789abcdef";await t.mkdirPromise(e.indexPath,{recursive:!0});let o=[];for(let a of r)for(let n of r)o.push(t.mkdirPromise(t.pathUtils.join(e.indexPath,`${a}${n}`),{recursive:!0}));return await Promise.all(o),e.indexPath}async function hY(t,e,r,o,a){let n=t.pathUtils.normalize(e),u=r.pathUtils.normalize(o),A=[],p=[],{atime:h,mtime:E}=a.stableTime?{atime:H0,mtime:H0}:await r.lstatPromise(u);await t.mkdirpPromise(t.pathUtils.dirname(e),{utimes:[h,E]}),await BT(A,p,t,n,r,u,{...a,didParentExist:!0});for(let I of A)await I();await Promise.all(p.map(I=>I()))}async function BT(t,e,r,o,a,n,u){let A=u.didParentExist?await gY(r,o):null,p=await a.lstatPromise(n),{atime:h,mtime:E}=u.stableTime?{atime:H0,mtime:H0}:p,I;switch(!0){case p.isDirectory():I=await h_e(t,e,r,o,A,a,n,p,u);break;case p.isFile():I=await m_e(t,e,r,o,A,a,n,p,u);break;case p.isSymbolicLink():I=await y_e(t,e,r,o,A,a,n,p,u);break;default:throw new Error(`Unsupported file type (${p.mode})`)}return(u.linkStrategy?.type!=="HardlinkFromIndex"||!p.isFile())&&((I||A?.mtime?.getTime()!==E.getTime()||A?.atime?.getTime()!==h.getTime())&&(e.push(()=>r.lutimesPromise(o,h,E)),I=!0),(A===null||(A.mode&511)!==(p.mode&511))&&(e.push(()=>r.chmodPromise(o,p.mode&511)),I=!0)),I}async function gY(t,e){try{return await t.lstatPromise(e)}catch{return null}}async function h_e(t,e,r,o,a,n,u,A,p){if(a!==null&&!a.isDirectory())if(p.overwrite)t.push(async()=>r.removePromise(o)),a=null;else return!1;let h=!1;a===null&&(t.push(async()=>{try{await r.mkdirPromise(o,{mode:A.mode})}catch(D){if(D.code!=="EEXIST")throw D}}),h=!0);let E=await n.readdirPromise(u),I=p.didParentExist&&!a?{...p,didParentExist:!1}:p;if(p.stableSort)for(let D of E.sort())await BT(t,e,r,r.pathUtils.join(o,D),n,n.pathUtils.join(u,D),I)&&(h=!0);else(await Promise.all(E.map(async x=>{await BT(t,e,r,r.pathUtils.join(o,x),n,n.pathUtils.join(u,x),I)}))).some(x=>x)&&(h=!0);return h}async function g_e(t,e,r,o,a,n,u,A,p,h){let E=await n.checksumFilePromise(u,{algorithm:"sha1"}),I=420,D=A.mode&511,x=`${E}${D!==I?D.toString(8):""}`,C=r.pathUtils.join(h.indexPath,E.slice(0,2),`${x}.dat`),T;(ue=>(ue[ue.Lock=0]="Lock",ue[ue.Rename=1]="Rename"))(T||={});let L=1,U=await gY(r,C);if(a){let le=U&&a.dev===U.dev&&a.ino===U.ino,ce=U?.mtimeMs!==p_e;if(le&&ce&&h.autoRepair&&(L=0,U=null),!le)if(p.overwrite)t.push(async()=>r.removePromise(o)),a=null;else return!1}let z=!U&&L===1?`${C}.${Math.floor(Math.random()*4294967296).toString(16).padStart(8,"0")}`:null,te=!1;return t.push(async()=>{if(!U&&(L===0&&await r.lockPromise(C,async()=>{let le=await n.readFilePromise(u);await r.writeFilePromise(C,le)}),L===1&&z)){let le=await n.readFilePromise(u);await r.writeFilePromise(z,le);try{await r.linkPromise(z,C)}catch(ce){if(ce.code==="EEXIST")te=!0,await r.unlinkPromise(z);else throw ce}}a||await r.linkPromise(C,o)}),e.push(async()=>{U||(await r.lutimesPromise(C,H0,H0),D!==I&&await r.chmodPromise(C,D)),z&&!te&&await r.unlinkPromise(z)}),!1}async function d_e(t,e,r,o,a,n,u,A,p){if(a!==null)if(p.overwrite)t.push(async()=>r.removePromise(o)),a=null;else return!1;return t.push(async()=>{let h=await n.readFilePromise(u);await r.writeFilePromise(o,h)}),!0}async function m_e(t,e,r,o,a,n,u,A,p){return p.linkStrategy?.type==="HardlinkFromIndex"?g_e(t,e,r,o,a,n,u,A,p,p.linkStrategy):d_e(t,e,r,o,a,n,u,A,p)}async function y_e(t,e,r,o,a,n,u,A,p){if(a!==null)if(p.overwrite)t.push(async()=>r.removePromise(o)),a=null;else return!1;return t.push(async()=>{await r.symlinkPromise(ZD(r.pathUtils,await n.readlinkPromise(u)),o)}),!0}var H0,p_e,vT=wt(()=>{Ba();H0=new Date(456789e3*1e3),p_e=H0.getTime()});function eP(t,e,r,o){let a=()=>{let n=r.shift();if(typeof n>"u")return null;let u=t.pathUtils.join(e,n);return Object.assign(t.statSync(u),{name:n,path:void 0})};return new lI(e,a,o)}var lI,dY=wt(()=>{JD();lI=class{constructor(e,r,o={}){this.path=e;this.nextDirent=r;this.opts=o;this.closed=!1}throwIfClosed(){if(this.closed)throw dT()}async*[Symbol.asyncIterator](){try{let e;for(;(e=await this.read())!==null;)yield e}finally{await this.close()}}read(e){let r=this.readSync();return typeof e<"u"?e(null,r):Promise.resolve(r)}readSync(){return this.throwIfClosed(),this.nextDirent()}close(e){return this.closeSync(),typeof e<"u"?e(null):Promise.resolve()}closeSync(){this.throwIfClosed(),this.opts.onClose?.(),this.closed=!0}}});function mY(t,e){if(t!==e)throw new Error(`Invalid StatWatcher status: expected '${e}', got '${t}'`)}var yY,tP,EY=wt(()=>{yY=ve("events");wT();tP=class t extends yY.EventEmitter{constructor(r,o,{bigint:a=!1}={}){super();this.status="ready";this.changeListeners=new Map;this.startTimeout=null;this.fakeFs=r,this.path=o,this.bigint=a,this.lastStats=this.stat()}static create(r,o,a){let n=new t(r,o,a);return n.start(),n}start(){mY(this.status,"ready"),this.status="running",this.startTimeout=setTimeout(()=>{this.startTimeout=null,this.fakeFs.existsSync(this.path)||this.emit("change",this.lastStats,this.lastStats)},3)}stop(){mY(this.status,"running"),this.status="stopped",this.startTimeout!==null&&(clearTimeout(this.startTimeout),this.startTimeout=null),this.emit("stop")}stat(){try{return this.fakeFs.statSync(this.path,{bigint:this.bigint})}catch{let o=this.bigint?new cm:new lm;return XD(o)}}makeInterval(r){let o=setInterval(()=>{let a=this.stat(),n=this.lastStats;CT(a,n)||(this.lastStats=a,this.emit("change",a,n))},r.interval);return r.persistent?o:o.unref()}registerChangeListener(r,o){this.addListener("change",r),this.changeListeners.set(r,this.makeInterval(o))}unregisterChangeListener(r){this.removeListener("change",r);let o=this.changeListeners.get(r);typeof o<"u"&&clearInterval(o),this.changeListeners.delete(r)}unregisterAllChangeListeners(){for(let r of this.changeListeners.keys())this.unregisterChangeListener(r)}hasChangeListeners(){return this.changeListeners.size>0}ref(){for(let r of this.changeListeners.values())r.ref();return this}unref(){for(let r of this.changeListeners.values())r.unref();return this}}});function um(t,e,r,o){let a,n,u,A;switch(typeof r){case"function":a=!1,n=!0,u=5007,A=r;break;default:({bigint:a=!1,persistent:n=!0,interval:u=5007}=r),A=o;break}let p=rP.get(t);typeof p>"u"&&rP.set(t,p=new Map);let h=p.get(e);return typeof h>"u"&&(h=tP.create(t,e,{bigint:a}),p.set(e,h)),h.registerChangeListener(A,{persistent:n,interval:u}),h}function q0(t,e,r){let o=rP.get(t);if(typeof o>"u")return;let a=o.get(e);typeof a>"u"||(typeof r>"u"?a.unregisterAllChangeListeners():a.unregisterChangeListener(r),a.hasChangeListeners()||(a.stop(),o.delete(e)))}function j0(t){let e=rP.get(t);if(!(typeof e>"u"))for(let r of e.keys())q0(t,r)}var rP,DT=wt(()=>{EY();rP=new WeakMap});function E_e(t){let e=t.match(/\r?\n/g);if(e===null)return wY.EOL;let r=e.filter(a=>a===`\r
 `).length,o=e.length-r;return r>o?`\r

eslint.config.js

@@ -1,28 +1,28 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist", "storybook-static"] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
     },
-  },
-)
+  }
+);

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "test": "node -v",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
@@ -17,7 +18,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "3.2.2",
-    "@eslint/js": "^9.13.0",
+    "@eslint/js": "^9.15.0",
     "@storybook/addon-essentials": "8.4.4",
     "@storybook/addon-interactions": "8.4.4",
     "@storybook/addon-onboarding": "8.4.4",
@@ -33,16 +34,16 @@
     "@vitejs/plugin-react": "^4.3.3",
     "chroma-js": "3.1.2",
     "chromatic": "^11.18.1",
-    "eslint": "^9.13.0",
+    "eslint": "9.14.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "eslint-plugin-storybook": "^0.11.0",
-    "globals": "^15.11.0",
+    "globals": "^15.12.0",
     "storybook": "8.4.4",
     "styled-components": "6.1.13",
-    "typescript": "~5.6.2",
-    "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10"
+    "typescript": "~5.6.3",
+    "typescript-eslint": "^8.14.0",
+    "vite": "^5.4.11"
   },
   "eslintConfig": {
     "extends": [

src/mixins/typography/typography.styles.ts

@@ -1,5 +1,6 @@
 import { Typography, TypographySchema } from "../../theme/types";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function objectEntries<T extends Record<string, any>>(obj: T) {
   return Object.entries(obj) as Array<[keyof T, T[keyof T]]>;
 }

src/theme/stories/colors.stories.tsx

@@ -10,6 +10,7 @@ export default meta;
 
 export const Default: StoryObj = {
   render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const theme = useTheme();
     return (
       <div

src/theme/stories/spacing.stories.tsx

@@ -9,6 +9,7 @@ export default meta;
 
 export const Default: StoryObj = {
   render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const theme = useTheme();
     const spacing = theme?.spacing;
     if (!spacing) {