Fixing storybooks

Author: 4lejandrito

packages/creepyface-custom-element/src/stories.js

@@ -7,19 +7,18 @@ export default {
 }
 
 export const CustomizedBuiltInElement = () => {
-  const id = number('Picture number', 0)
   return `
     <img is="creepy-face"
-      src="https://creepyface.io/img/${id}/serious"
-      data-src-hover="https://creepyface.io/img/${id}/hover"
-      data-src-look-0="https://creepyface.io/img/${id}/0"
-      data-src-look-45="https://creepyface.io/img/${id}/45"
-      data-src-look-90="https://creepyface.io/img/${id}/90"
-      data-src-look-135="https://creepyface.io/img/${id}/135"
-      data-src-look-180="https://creepyface.io/img/${id}/180"
-      data-src-look-225="https://creepyface.io/img/${id}/225"
-      data-src-look-270="https://creepyface.io/img/${id}/270"
-      data-src-look-315="https://creepyface.io/img/${id}/315"
+      src="https://creepyface.io/img/nala/serious"
+      data-src-hover="https://creepyface.io/img/nala/hover"
+      data-src-look-0="https://creepyface.io/img/nala/0"
+      data-src-look-45="https://creepyface.io/img/nala/45"
+      data-src-look-90="https://creepyface.io/img/nala/90"
+      data-src-look-135="https://creepyface.io/img/nala/135"
+      data-src-look-180="https://creepyface.io/img/nala/180"
+      data-src-look-225="https://creepyface.io/img/nala/225"
+      data-src-look-270="https://creepyface.io/img/nala/270"
+      data-src-look-315="https://creepyface.io/img/nala/315"
       data-timeToDefault=${number('Time to default', 1000)}
     />
   `

packages/react-creepyface/package.json

@@ -28,8 +28,8 @@
   "devDependencies": {
     "@babel/core": "^7.18.13",
     "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addons": "^6.5.10",
-    "@storybook/react": "^6.5.10",
+    "@storybook/addons": "^6.5.16",
+    "@storybook/react": "^6.5.16",
     "@types/events": "^3.0.0",
     "@types/react": "^18.0.18",
     "babel-loader": "^8.2.5",

packages/react-creepyface/src/stories.tsx

@@ -8,22 +8,21 @@ export default {
 }
 
 export const WithOptions = () => {
-  const id = number('Picture number', 0)
   return (
     <Creepyface
       disabled={boolean('Disabled', false)}
-      src={`https://creepyface.io/img/${id}/serious`}
+      src={`https://creepyface.io/img/nala/serious`}
       options={{
-        hover: `https://creepyface.io/img/${id}/hover`,
+        hover: `https://creepyface.io/img/nala/hover`,
         looks: [
-          { angle: 0, src: `https://creepyface.io/img/${id}/0` },
-          { angle: 45, src: `https://creepyface.io/img/${id}/45` },
-          { angle: 90, src: `https://creepyface.io/img/${id}/90` },
-          { angle: 135, src: `https://creepyface.io/img/${id}/135` },
-          { angle: 180, src: `https://creepyface.io/img/${id}/180` },
-          { angle: 225, src: `https://creepyface.io/img/${id}/225` },
-          { angle: 270, src: `https://creepyface.io/img/${id}/270` },
-          { angle: 315, src: `https://creepyface.io/img/${id}/315` },
+          { angle: 0, src: `https://creepyface.io/img/nala/0` },
+          { angle: 45, src: `https://creepyface.io/img/nala/45` },
+          { angle: 90, src: `https://creepyface.io/img/nala/90` },
+          { angle: 135, src: `https://creepyface.io/img/nala/135` },
+          { angle: 180, src: `https://creepyface.io/img/nala/180` },
+          { angle: 225, src: `https://creepyface.io/img/nala/225` },
+          { angle: 270, src: `https://creepyface.io/img/nala/270` },
+          { angle: 315, src: `https://creepyface.io/img/nala/315` },
         ],
         timeToDefault: number('Time to default', 1000),
       }}
@@ -32,21 +31,20 @@ export const WithOptions = () => {
 }
 
 export const WithDataAttributes = () => {
-  const id = number('Picture number', 0)
   return (
     <Creepyface
       disabled={boolean('Disabled', false)}
-      src={`https://creepyface.io/img/${id}/serious`}
-      data-src-hover={`https://creepyface.io/img/${id}/hover`}
-      data-src-look-0={`https://creepyface.io/img/${id}/0`}
-      data-src-look-45={`https://creepyface.io/img/${id}/45`}
-      data-src-look-90={`https://creepyface.io/img/${id}/90`}
-      data-src-look-135={`https://creepyface.io/img/${id}/135`}
-      data-src-look-180={`https://creepyface.io/img/${id}/180`}
-      data-src-look-225={`https://creepyface.io/img/${id}/225`}
-      data-src-look-270={`https://creepyface.io/img/${id}/270`}
-      data-src-look-315={`https://creepyface.io/img/${id}/315`}
-      data-timeToDefault={number('Time to default', 1000)}
+      src={`https://creepyface.io/img/nala/serious`}
+      data-src-hover={`https://creepyface.io/img/nala/hover`}
+      data-src-look-0={`https://creepyface.io/img/nala/0`}
+      data-src-look-45={`https://creepyface.io/img/nala/45`}
+      data-src-look-90={`https://creepyface.io/img/nala/90`}
+      data-src-look-135={`https://creepyface.io/img/nala/135`}
+      data-src-look-180={`https://creepyface.io/img/nala/180`}
+      data-src-look-225={`https://creepyface.io/img/nala/225`}
+      data-src-look-270={`https://creepyface.io/img/nala/270`}
+      data-src-look-315={`https://creepyface.io/img/nala/315`}
+      data-timetodefault={number('Time to default', 1000)}
     />
   )
 }