feature: ability to have multiple frames

.github/workflows/lint-and-build.yml

@@ -0,0 +1,32 @@
+name: Lint and Build
+
+on:
+  pull_request:
+    types: [opened, edited, reopened, synchronize]
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  lint:
+    name: Lint and build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Typecheck
+        run: npm run typecheck
+
+      - name: Build
+        run: npm run build

.gitignore

@@ -23,3 +23,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+tsconfig.tsbuildinfo

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wethegit/preact-stickerbook",
-  "version": "4.0.7",
+  "version": "5.0.0",
   "description": "Easily create collage apps that are accessible by default.",
   "files": [
     "dist/*"
@@ -23,6 +23,7 @@
     "lint:scripts": "eslint --fix --ext .jsx,.js,.ts,.tsx --ignore-path .gitignore .",
     "lint:styles": "stylelint src/**/*.{css,scss}",
     "lint": "npm run lint:scripts && npm run lint:styles",
+    "typecheck": "tsc --noEmit",
     "format": "prettier --write ."
   },
   "dependencies": {

src/app.tsx

@@ -29,7 +29,7 @@ export function App() {
     setStickers,
     backgrounds,
     foregrounds,
-    frame,
+    frames,
     onReorderSticker,
     onDeleteSticker,
     onPositionSticker,
@@ -43,9 +43,11 @@ export function App() {
         order: 0,
       },
     ],
-    initialFrame: {
-      image: frameImage,
-    },
+    initialFrames: [
+      {
+        image: frameImage,
+      },
+    ],
     initialBackgrounds: [
       {
         image: backgroundImage,
@@ -102,7 +104,7 @@ export function App() {
       outputHeight: CANVAS_SIZE.height,
       stickers,
       backgrounds,
-      frame,
+      frames,
       foregrounds,
       format: "image",
     })
@@ -128,7 +130,7 @@ export function App() {
           outputWidth={CANVAS_SIZE.width}
           outputHeight={CANVAS_SIZE.height}
           backgrounds={backgrounds}
-          frame={frame}
+          frames={frames}
           foregrounds={foregrounds}
         >
           {stickers.map((sticker) => (

src/lib/helpers/exportStickerbook.ts

@@ -17,7 +17,7 @@ interface ExportStickerbookOptions<T extends ExportFormat> {
    */
   canvas?: HTMLCanvasElement
   backgrounds?: BackgroundItem[]
-  frame?: Frame
+  frames?: Frame[]
   stickers?: StickerItem[]
   foregrounds?: ForegroundItem[]
   /**
@@ -51,7 +51,7 @@ type ExportReturn<K extends ExportFormat> =
 export async function exportStickerbook<T extends ExportFormat>({
   canvas,
   backgrounds,
-  frame,
+  frames,
   stickers,
   foregrounds,
   outputWidth,
@@ -88,13 +88,18 @@ export async function exportStickerbook<T extends ExportFormat>({
   }
 
   // draw frame
-  if (frame && frame.image)
-    await coverCanvas({
-      ctx: outputCtx,
-      img: frame.image,
-      width: outputWidth,
-      height: outputHeight,
-    })
+  if (frames && frames.length) {
+    for (const frame of frames) {
+      if (!frame.image) continue
+
+      await coverCanvas({
+        ctx: outputCtx,
+        img: frame.image,
+        width: outputWidth,
+        height: outputHeight,
+      })
+    }
+  }
 
   if (stickers && stickers.length > 0) {
     // sort by order

src/lib/stickerbook.tsx

@@ -25,7 +25,7 @@ import styles from "./stickerbook.module.scss"
 export function Stickerbook({
   backgrounds = [],
   foregrounds = [],
-  frame,
+  frames,
   outputHeight = 500,
   outputWidth = 500,
   children,
@@ -194,33 +194,41 @@ export function Stickerbook({
         }}
         data-stickerbook-container
       >
-        {backgrounds.length > 0 &&
-          backgrounds.map((bg, i) => {
-            if (!bg.image) return null
-
-            return (
-              <div
-                key={i}
-                role="img"
-                className={styles.Stickerbook__background}
-                style={{
-                  backgroundImage: `url(${bg.image})`,
-                  ...backgroundStyles[i],
-                }}
-                aria-label={bg.alt || ""}
-                data-stickerbook-background={i}
-              />
-            )
-          })}
-
-        {frame && frame.image && (
-          <img
-            src={frame.image}
-            alt={frame.alt || ""}
-            className={styles.Stickerbook__frame}
-            data-stickerbook-frame
-          />
-        )}
+        {backgrounds.length > 0
+          ? backgrounds.map((bg, i) => {
+              if (!bg.image) return null
+
+              return (
+                <div
+                  key={i}
+                  role="img"
+                  className={styles.Stickerbook__background}
+                  style={{
+                    backgroundImage: `url(${bg.image})`,
+                    ...backgroundStyles[i],
+                  }}
+                  aria-label={bg.alt || ""}
+                  data-stickerbook-background={i}
+                />
+              )
+            })
+          : null}
+
+        {frames && frames?.length > 0
+          ? frames.map(({ image, alt }, i) => {
+              if (!image) return null
+
+              return (
+                <img
+                  key={`frame-${image}-${i}`}
+                  src={image}
+                  alt={alt || ""}
+                  className={styles.Stickerbook__frame}
+                  data-stickerbook-frame
+                />
+              )
+            })
+          : null}
 
         <StickerbookContext.Provider
           value={{

src/lib/types.ts

@@ -2,7 +2,7 @@ import { ComponentChildren } from "preact"
 import type { Vec2 } from "wtc-math"
 
 import { EXPORT_FORMATS, ORDER_DIRECTIONS, OVERLAY_TYPES } from "./helpers"
-import { StateUpdater } from "preact/hooks"
+import type { Dispatch, StateUpdater } from "preact/hooks"
 
 export interface StickerItem {
   /**
@@ -69,7 +69,7 @@ export interface StickerbookProps {
   /**
    * The `frame` will appear on top of all the `background`s but behind all the `Sticker`s. Useful for borders.
    */
-  frame?: Frame
+  frames?: Frame[]
   /**
    * The height of your artboard.
    */
@@ -177,19 +177,19 @@ export interface StickerProps extends StickerItem {
 export interface UseStickerbookProps {
   initialStickers?: StickerItem[]
   initialBackgrounds?: BackgroundItem[]
-  initialFrame?: Frame
+  initialFrames?: Frame[]
   initialForegrounds?: ForegroundItem[]
 }
 
 export interface UseStickerbookReturn {
   stickers: StickerItem[]
-  setStickers: StateUpdater<StickerItem[]>
+  setStickers: Dispatch<StateUpdater<StickerItem[]>>
   backgrounds: BackgroundItem[]
-  setBackgrounds: StateUpdater<BackgroundItem[]>
-  frame: Frame | undefined
-  setFrame: StateUpdater<Overlay | undefined>
+  setBackgrounds: Dispatch<StateUpdater<BackgroundItem[]>>
+  frames: Frame[]
+  setFrames: Dispatch<StateUpdater<Frame[]>>
   foregrounds: ForegroundItem[]
-  setForegrounds: StateUpdater<ForegroundItem[]>
+  setForegrounds: Dispatch<StateUpdater<ForegroundItem[]>>
 
   onReorderSticker: OnReorderHandler
   onDeleteSticker: OnDeleteHandler

src/lib/use-stickerbook.ts

@@ -26,14 +26,14 @@ export function useStickerbook({
   initialStickers = [],
   initialBackgrounds = [],
   initialForegrounds = [],
-  initialFrame,
+  initialFrames = [],
 }: UseStickerbookProps): UseStickerbookReturn {
   const [stickers, setStickers] = useState<StickerItem[]>(initialStickers)
 
   const [backgrounds, setBackgrounds] =
     useState<BackgroundItem[]>(initialBackgrounds)
 
-  const [frame, setFrame] = useState<Frame | undefined>(initialFrame)
+  const [frames, setFrames] = useState<Frame[]>(initialFrames)
 
   const [foregrounds, setForegrounds] =
     useState<ForegroundItem[]>(initialForegrounds)
@@ -78,8 +78,8 @@ export function useStickerbook({
     setStickers,
     backgrounds,
     setBackgrounds,
-    frame,
-    setFrame,
+    frames,
+    setFrames,
     foregrounds,
     setForegrounds,