lint fixes

alampros · Dec 27, 2024 · 7ad17c5 · 7ad17c5
1 parent 01aa6bc
commit 7ad17c5
Show file tree

Hide file tree

Showing 11 changed files with 370 additions and 78 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,12 +1,12 @@
-import type { StorybookConfig } from "@storybook/react-vite";
+import type { StorybookConfig } from '@storybook/react-vite'
 
 const config: StorybookConfig = {
-	stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
-	addons: ["@storybook/addon-essentials"],
-	framework: {
-		name: "@storybook/react-vite",
-		options: {},
-	},
-	staticDirs: ["./public"],
-};
-export default config;
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  staticDirs: ['./public'],
+}
+export default config
diff --git a/biome.json b/biome.json
@@ -18,7 +18,7 @@
     "indentStyle": "space",
     "indentWidth": 2,
     "formatWithErrors": true,
-    "lineWidth": 100
+    "lineWidth": 80
   },
   "linter": {
     "enabled": true,
@@ -49,7 +49,7 @@
       "semicolons": "asNeeded",
       "quoteStyle": "single",
       "indentStyle": "space",
-      "lineWidth": 100,
+      "lineWidth": 80,
       "trailingCommas": "all"
     },
     "parser": {
@@ -61,4 +61,4 @@
       "enabled": true
     }
   }
-}
+}
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
   "scripts": {
     "clean": "git clean -xfd dist/",
     "build": "rollup -c --configPlugin @rollup/plugin-typescript",
+    "lint": "biome check .",
     "prepare": "npm run build",
     "develop": "npm run storybook",
     "storybook": "storybook dev -p 3000",
@@ -80,4 +81,4 @@
   "engines": {
     "node": ">=16"
   }
-}
+}
diff --git a/src/Confetti.ts b/src/Confetti.ts
@@ -86,7 +86,13 @@ export interface IConfettiOptions {
    * Controls the rate at which confetti is spawned.
    * @default easeInOutQuad
    */
-  tweenFunction: (currentTime: number, currentValue: number, targetValue: number, duration: number, s?: number) => number
+  tweenFunction: (
+    currentTime: number,
+    currentValue: number,
+    targetValue: number,
+    duration: number,
+    s?: number,
+  ) => number
   /**
    * Number of milliseconds it should take to spawn numberOfPieces.
    * @default 5000
@@ -102,7 +108,10 @@ export interface IConfettiOptions {
   onConfettiComplete?: (confettiInstance?: Confetti) => void
 }
 
-export const confettiDefaults: Pick<IConfettiOptions, Exclude<keyof IConfettiOptions, 'confettiSource'>> = {
+export const confettiDefaults: Pick<
+  IConfettiOptions,
+  Exclude<keyof IConfettiOptions, 'confettiSource'>
+> = {
   width: typeof window !== 'undefined' ? window.innerWidth : 300,
   height: typeof window !== 'undefined' ? window.innerHeight : 200,
   numberOfPieces: 200,
@@ -147,7 +156,10 @@ export class Confetti {
     }
     this.context = ctx
 
-    this.generator = new ParticleGenerator(this.canvas, () => this.options as IConfettiOptions)
+    this.generator = new ParticleGenerator(
+      this.canvas,
+      () => this.options as IConfettiOptions,
+    )
     this.options = opts
     this.update()
   }
@@ -174,7 +186,11 @@ export class Confetti {
     this.setOptionsWithDefaults(opts)
     if (this.generator) {
       Object.assign(this.generator, this.options.confettiSource)
-      if (typeof opts.recycle === 'boolean' && opts.recycle && lastRecycleState === false) {
+      if (
+        typeof opts.recycle === 'boolean' &&
+        opts.recycle &&
+        lastRecycleState === false
+      ) {
         this.generator.lastNumberOfPieces = this.generator.particles.length
       }
     }
@@ -192,7 +208,11 @@ export class Confetti {
         h: 0,
       },
     }
-    this._options = { ...computedConfettiDefaults, ...confettiDefaults, ...opts }
+    this._options = {
+      ...computedConfettiDefaults,
+      ...confettiDefaults,
+      ...opts,
+    }
     Object.assign(this, opts.confettiSource)
   }
 
@@ -220,7 +240,11 @@ export class Confetti {
     if (this.generator.animate()) {
       this.rafId = requestAnimationFrame(this.update)
     } else {
-      if (onConfettiComplete && typeof onConfettiComplete === 'function' && this.generator.particlesGenerated > 0) {
+      if (
+        onConfettiComplete &&
+        typeof onConfettiComplete === 'function' &&
+        this.generator.particlesGenerated > 0
+      ) {
         onConfettiComplete.call(this, this)
       }
       this._options.run = false

diff --git a/src/Particle.ts b/src/Particle.ts
@@ -13,7 +13,12 @@ enum RotationDirection {
 }
 
 export default class Particle {
-  constructor(context: CanvasRenderingContext2D, getOptions: () => IConfettiOptions, x: number, y: number) {
+  constructor(
+    context: CanvasRenderingContext2D,
+    getOptions: () => IConfettiOptions,
+    x: number,
+    y: number,
+  ) {
     this.getOptions = getOptions
     const { colors, initialVelocityX, initialVelocityY } = this.getOptions()
     this.context = context
@@ -22,14 +27,22 @@ export default class Particle {
     this.w = randomRange(5, 20)
     this.h = randomRange(5, 20)
     this.radius = randomRange(5, 10)
-    this.vx = typeof initialVelocityX === 'number' ? randomRange(-initialVelocityX, initialVelocityX) : randomRange(initialVelocityX.min, initialVelocityX.max)
-    this.vy = typeof initialVelocityY === 'number' ? randomRange(-initialVelocityY, 0) : randomRange(initialVelocityY.min, initialVelocityY.max)
+    this.vx =
+      typeof initialVelocityX === 'number'
+        ? randomRange(-initialVelocityX, initialVelocityX)
+        : randomRange(initialVelocityX.min, initialVelocityX.max)
+    this.vy =
+      typeof initialVelocityY === 'number'
+        ? randomRange(-initialVelocityY, 0)
+        : randomRange(initialVelocityY.min, initialVelocityY.max)
     this.shape = randomInt(0, 2)
     this.angle = degreesToRads(randomRange(0, 360))
     this.angularSpin = randomRange(-0.2, 0.2)
     this.color = colors[Math.floor(Math.random() * colors.length)]
     this.rotateY = randomRange(0, 1)
-    this.rotationDirection = randomRange(0, 1) ? RotationDirection.Positive : RotationDirection.Negative
+    this.rotationDirection = randomRange(0, 1)
+      ? RotationDirection.Positive
+      : RotationDirection.Negative
   }
 
   context: CanvasRenderingContext2D
@@ -71,9 +84,15 @@ export default class Particle {
     this.vx += wind
     this.vx *= friction
     this.vy *= friction
-    if (this.rotateY >= 1 && this.rotationDirection === RotationDirection.Positive) {
+    if (
+      this.rotateY >= 1 &&
+      this.rotationDirection === RotationDirection.Positive
+    ) {
       this.rotationDirection = RotationDirection.Negative
-    } else if (this.rotateY <= -1 && this.rotationDirection === RotationDirection.Negative) {
+    } else if (
+      this.rotateY <= -1 &&
+      this.rotationDirection === RotationDirection.Negative
+    ) {
       this.rotationDirection = RotationDirection.Positive
     }
 

diff --git a/src/ParticleGenerator.ts b/src/ParticleGenerator.ts
@@ -51,12 +51,24 @@ export default class ParticleGenerator implements IParticleGenerator {
   getParticle = () => {
     const newParticleX = randomRange(this.x, this.w + this.x)
     const newParticleY = randomRange(this.y, this.h + this.y)
-    return new Particle(this.context, this.getOptions, newParticleX, newParticleY)
+    return new Particle(
+      this.context,
+      this.getOptions,
+      newParticleX,
+      newParticleY,
+    )
   }
 
   animate = (): boolean => {
     const { canvas, context, particlesGenerated, lastNumberOfPieces } = this
-    const { run, recycle, numberOfPieces, debug, tweenFunction, tweenDuration } = this.getOptions()
+    const {
+      run,
+      recycle,
+      numberOfPieces,
+      debug,
+      tweenFunction,
+      tweenDuration,
+    } = this.getOptions()
     if (!run) {
       return false
     }
@@ -76,8 +88,16 @@ export default class ParticleGenerator implements IParticleGenerator {
       const { tweenInitTime } = this
       // Add more than one piece per loop, otherwise the number of pieces would
       // be limitted by the RAF framerate
-      const progressTime = now - tweenInitTime > tweenDuration ? tweenDuration : Math.max(0, now - tweenInitTime)
-      const tweenedVal = tweenFunction(progressTime, activeCount, numberOfPieces, tweenDuration)
+      const progressTime =
+        now - tweenInitTime > tweenDuration
+          ? tweenDuration
+          : Math.max(0, now - tweenInitTime)
+      const tweenedVal = tweenFunction(
+        progressTime,
+        activeCount,
+        numberOfPieces,
+        tweenDuration,
+      )
       const numToAdd = Math.round(tweenedVal - activeCount)
       for (let i = 0; i < numToAdd; i++) {
         this.particles.push(this.getParticle())
@@ -89,15 +109,24 @@ export default class ParticleGenerator implements IParticleGenerator {
       context.font = '12px sans-serif'
       context.fillStyle = '#333'
       context.textAlign = 'right'
-      context.fillText(`Particles: ${nP}`, canvas.width - 10, canvas.height - 20)
+      context.fillText(
+        `Particles: ${nP}`,
+        canvas.width - 10,
+        canvas.height - 20,
+      )
     }
 
     // Maintain the population
     this.particles.forEach((p, i) => {
       // Update each particle's position
       p.update()
       // Prune the off-canvas particles
-      if (p.y > canvas.height || p.y < -100 || p.x > canvas.width + 100 || p.x < -100) {
+      if (
+        p.y > canvas.height ||
+        p.y < -100 ||
+        p.x > canvas.width + 100 ||
+        p.x < -100
+      ) {
         if (recycle && activeCount <= numberOfPieces) {
           // Replace the particle with a brand new one
           this.particles[i] = this.getParticle()

diff --git a/src/ReactConfetti.tsx b/src/ReactConfetti.tsx
@@ -3,7 +3,10 @@ import Confetti, { IConfettiOptions, confettiDefaults } from './Confetti'
 
 const ref = React.createRef<HTMLCanvasElement>()
 
-export type Props = Partial<IConfettiOptions> & React.CanvasHTMLAttributes<HTMLCanvasElement> & { canvasRef?: React.Ref<HTMLCanvasElement> }
+export type Props = Partial<IConfettiOptions> &
+  React.CanvasHTMLAttributes<HTMLCanvasElement> & {
+    canvasRef?: React.Ref<HTMLCanvasElement>
+  }
 
 class ReactConfettiInternal extends React.Component<Props> {
   static readonly defaultProps = {
@@ -54,18 +57,38 @@ class ReactConfettiInternal extends React.Component<Props> {
       right: 0,
       ...passedProps.style,
     }
-    return <canvas width={confettiOptions.width} height={confettiOptions.height} ref={this.canvas} {...passedProps} style={canvasStyles} />
+    return (
+      <canvas
+        width={confettiOptions.width}
+        height={confettiOptions.height}
+        ref={this.canvas}
+        {...passedProps}
+        style={canvasStyles}
+      />
+    )
   }
 }
 
 interface Refs {
   [key: string]: React.Ref<HTMLElement>
 }
-function extractCanvasProps(props: Partial<IConfettiOptions> | any): [Partial<IConfettiOptions>, Partial<React.CanvasHTMLAttributes<HTMLCanvasElement>>, Refs] {
+function extractCanvasProps(
+  props: Partial<IConfettiOptions> | any,
+): [
+  Partial<IConfettiOptions>,
+  Partial<React.CanvasHTMLAttributes<HTMLCanvasElement>>,
+  Refs,
+] {
   const confettiOptions: Partial<IConfettiOptions> = {}
   const refs: Refs = {}
   const rest: any = {}
-  const confettiOptionKeys = [...Object.keys(confettiDefaults), 'confettiSource', 'drawShape', 'onConfettiComplete', 'frameRate']
+  const confettiOptionKeys = [
+    ...Object.keys(confettiDefaults),
+    'confettiSource',
+    'drawShape',
+    'onConfettiComplete',
+    'frameRate',
+  ]
   const refProps = ['canvasRef']
   for (const prop in props) {
     const val = props[prop as string]
@@ -80,6 +103,8 @@ function extractCanvasProps(props: Partial<IConfettiOptions> | any): [Partial<IC
   return [confettiOptions, rest, refs]
 }
 
-export const ReactConfetti = React.forwardRef<HTMLCanvasElement, Props>((props, ref) => <ReactConfettiInternal canvasRef={ref} {...props} />)
+export const ReactConfetti = React.forwardRef<HTMLCanvasElement, Props>(
+  (props, ref) => <ReactConfettiInternal canvasRef={ref} {...props} />,
+)
 
 export default ReactConfetti
diff --git a/src/stories/MouseRain.tsx b/src/stories/MouseRain.tsx
@@ -22,7 +22,14 @@ export const MouseRain = (args: any) => {
       }
   return (
     <div style={{ minHeight: 200, width: '100%' }}>
-      <p style={{ textAlign: 'center', fontFamily: 'sans-serif', color: '#999', margin: '20%' }}>
+      <p
+        style={{
+          textAlign: 'center',
+          fontFamily: 'sans-serif',
+          color: '#999',
+          margin: '20%',
+        }}
+      >
         Move your mouse
       </p>
       <ReactConfetti

diff --git a/src/stories/SizedConfetti.tsx b/src/stories/SizedConfetti.tsx
@@ -3,7 +3,16 @@ import { useWindowSize } from 'react-use'
 
 import ReactConfetti from '../ReactConfetti'
 
-export default React.forwardRef((passedProps: React.ComponentProps<typeof ReactConfetti>, ref) => {
-  const { width, height } = useWindowSize()
-  return <ReactConfetti {...passedProps} ref={ref as any} width={width} height={height} />
-})
+export default React.forwardRef(
+  (passedProps: React.ComponentProps<typeof ReactConfetti>, ref) => {
+    const { width, height } = useWindowSize()
+    return (
+      <ReactConfetti
+        {...passedProps}
+        ref={ref as any}
+        width={width}
+        height={height}
+      />
+    )
+  },
+)