From eb4621f77f44fefcb7da43285fda240b5bcfb1a5 Mon Sep 17 00:00:00 2001
From: Bervianto Leo Pratama <bervianto.leo@gmail.com>
Date: Sat, 6 May 2023 13:31:20 +0700
Subject: [PATCH] fix: ensure demo build (#1821)

* fix: ensure demo build

* fix: update style
---
 .github/workflows/test.yml                    |  5 +++++
 examples/demo/src/components/ActionButton.tsx |  2 +-
 examples/demo/src/components/Default.tsx      |  2 +-
 examples/demo/src/components/Readonly.tsx     | 10 +++++-----
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 95740aaf8..fd9ab28c2 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -46,6 +46,11 @@ jobs:
         run: |
           yarn docs
           yarn lerna run docs --scope @berviantoleo/react-multi-crop
+      - name: Try Build Demo
+        run: yarn lerna run build --scope @berviantoleo/react-multi-crop-demo
+        env:
+          SKIP_PREFLIGHT_CHECK: true
+          PUBLIC_URL: /
       # TODO; will give the docs to artifacts
       - name: Cypress run
         uses: cypress-io/github-action@v5
diff --git a/examples/demo/src/components/ActionButton.tsx b/examples/demo/src/components/ActionButton.tsx
index 4c62d973d..93644a2b2 100644
--- a/examples/demo/src/components/ActionButton.tsx
+++ b/examples/demo/src/components/ActionButton.tsx
@@ -24,7 +24,7 @@ export default function ActionButton(): JSX.Element {
           record={{
             clippings: [
               {
-                id: 1,
+                id: "1",
                 rect: { x1: 0.0, y1: 0.0, x2: 0.2, y2: 0.2 },
                 rectPx: {},
               },
diff --git a/examples/demo/src/components/Default.tsx b/examples/demo/src/components/Default.tsx
index 91af6e87a..f7fe81fbe 100644
--- a/examples/demo/src/components/Default.tsx
+++ b/examples/demo/src/components/Default.tsx
@@ -19,7 +19,7 @@ export default function Default(): JSX.Element {
           record={{
             clippings: [
               {
-                id: 1,
+                id: "1",
                 rect: { x1: 0.0, y1: 0.0, x2: 0.2, y2: 0.2 },
                 rectPx: {},
               },
diff --git a/examples/demo/src/components/Readonly.tsx b/examples/demo/src/components/Readonly.tsx
index 38c9ec0b1..31457e2f1 100644
--- a/examples/demo/src/components/Readonly.tsx
+++ b/examples/demo/src/components/Readonly.tsx
@@ -39,27 +39,27 @@ export default function Readonly(): JSX.Element {
           record={{
             clippings: [
               {
-                id: 1,
+                id: "1",
                 rect: { x1: 0.0, y1: 0.0, x2: 0.2, y2: 0.2 },
                 rectPx: {},
               },
               {
-                id: 2,
+                id: "2",
                 rect: { x1: 0.5, y1: 0.5, x2: 0.7, y2: 0.7 },
                 rectPx: {},
               },
               {
-                id: 3,
+                id: "3",
                 rect: { x1: 0.3, y1: 0.3, x2: 0.5, y2: 0.5 },
                 rectPx: {},
               },
               {
-                id: 4,
+                id: "4",
                 rect: { x1: 0.7, y1: 0.7, x2: 1.0, y2: 1.0 },
                 rectPx: {},
               },
               {
-                id: 5,
+                id: "5",
                 rect: { x1: 0.2, y1: 0.2, x2: 0.3, y2: 0.3 },
                 rectPx: {},
               },