@wayke-se/components-react 3.0.0-beta.3 → 3.0.0-beta.5

package/esbuild/common.js

@@ -1,3 +1,5 @@
+const { sassPlugin } = require('esbuild-sass-plugin');
+
 module.exports = {
   entryPoints: ['src/index.ts', 'src/style.js'],
   bundle: true,
@@ -12,4 +14,6 @@ module.exports = {
     '.svg': 'dataurl',
     '.png': 'dataurl',
   },
+
+  plugins: [sassPlugin()],
 };

package/esbuild/lib.js

@@ -9,6 +9,7 @@ const shared = {
   bundle: true,
   minify: false,
   sourcemap: true,
+  splitting: false,
   logLevel: 'info',
   external: Object.keys(dependencies).concat(Object.keys(peerDependencies || {})),
   loader: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wayke-se/components-react",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.0-beta.5",
   "description": "Wayke Components React",
   "module": "dist/index.mjs",
   "main": "dist/index.js",
@@ -53,7 +53,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
-    "styled-components": "^5.3.3",
+    "styled-components": "^5.3.5",
     "typescript": "^4.4.4"
   },
   "dependencies": {
@@ -64,9 +64,8 @@
     "graphql": "^16.0.1",
     "libphonenumber-js": "^1.9.42",
     "marked": "^4.0.3",
-    "pannellum-react": "^1.2.4",
     "react-compound-slider": "^3.3.1",
-    "react-lazyload": "^3.2.0",
+    "react-lazy-load": "^4.0.1",
     "react-slick": "^0.29.0",
     "scroll-into-view-if-needed": "^2.2.28"
   }

package/src/components/Gallery/index.tsx

@@ -22,7 +22,6 @@ import { ButtonSecondary, ButtonContent } from '../Button/index';
 import Lightbox from '../Lightbox/index';
 import EmbededVideo from '../Video/EmbededVideo';
 import QuickNavEmbeded from '../Video/QuickNavEmbeded';
-import Sphere from '../Sphere/Sphere';
 import { notEmpty } from '../../utils/formats';
 import ThreeSixty from '../ThreeSixty/ThreeSixty';
 import { Media } from '../../@types/codegen';
@@ -132,36 +131,30 @@ const Gallery = ({ media, placeholderImage }: GalleryProps) => {
               beforeChange={beforeChange}
             >
               {!!media?.length ? (
-                media.map((m, i) => (
-                  <Item key={m.files[0].url || i}>
-                    {m.type === 'image' && (
-                      <Image
-                        src={
-                          m.files[0].formats.filter(notEmpty).find((x) => x.format === '1170x')?.url
-                        }
-                        alt={`Bild ${i + 1}`}
-                      />
-                    )}
-                    {m.type === 'threesixty' && (
-                      <ThreeSixty
-                        urls={m.files.map((x) => x.url)}
-                        visible={i === index}
-                        onDisableNavigation={onDisableNavigation}
-                        navigationDisabled={navigationDisabled}
-                      />
-                    )}
-                    {m.type === 'embedded' && <EmbededVideo src={m.files[0].url} index={i + 1} />}
-                    {m.type === 'sphere' && (
-                      <Sphere
-                        visible={i === index}
-                        url={m.files[0].url}
-                        preview={m.files[0].url}
-                        onDisableNavigation={onDisableNavigation}
-                        navigationDisabled={navigationDisabled}
-                      />
-                    )}
-                  </Item>
-                ))
+                media
+                  .filter((x) => x.type !== 'sphere')
+                  .map((m, i) => (
+                    <Item key={m.files[0].url || i}>
+                      {m.type === 'image' && (
+                        <Image
+                          src={
+                            m.files[0].formats.filter(notEmpty).find((x) => x.format === '1170x')
+                              ?.url
+                          }
+                          alt={`Bild ${i + 1}`}
+                        />
+                      )}
+                      {m.type === 'threesixty' && (
+                        <ThreeSixty
+                          urls={m.files.map((x) => x.url)}
+                          visible={i === index}
+                          onDisableNavigation={onDisableNavigation}
+                          navigationDisabled={navigationDisabled}
+                        />
+                      )}
+                      {m.type === 'embedded' && <EmbededVideo src={m.files[0].url} index={i + 1} />}
+                    </Item>
+                  ))
               ) : (
                 <Item key={placeholder}>
                   <Image src={placeholder} alt={`Bild 1`} />

package/src/components/Lightbox/index.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { Wrapper, UiBlock, Item, Img, CloseBtn } from './wrapper';
 import { IconCancel } from '../Icon/index';
 import EmbeddedVideoLightbox from '../Video/EmbeddedVideoLightbox';
-import SphereLightbox from '../Sphere/SphereLightbox';
 import ThreeSixtyLightbox from '../ThreeSixty/ThreeSixtLightbox';
 import { Media } from '../../@types/codegen';
 
@@ -31,16 +30,17 @@ const Lightbox = ({ index, media, onClose }: LightboxProps) => {
   return (
     <Wrapper ref={(ref) => ref?.focus()} onKeyDown={onKeyDown} tabIndex={0}>
       <UiBlock onClick={onClose} aria-hidden />
-      {media.map((m, i) => (
-        <Item key={i} ref={index === i ? onRef : undefined}>
-          {m.type === 'image' && (
-            <Img id={`lightbox-image-${i}`} src={m.files[0].url} alt={`Bild ${i + 1}`} />
-          )}
-          {m.type === 'threesixty' && <ThreeSixtyLightbox urls={m.files.map((x) => x.url)} />}
-          {m.type === 'sphere' && <SphereLightbox url={m.files[0].url} />}
-          {m.type === 'embedded' && <EmbeddedVideoLightbox url={m.files[0].url} />}
-        </Item>
-      ))}
+      {media
+        .filter((x) => x.type !== 'sphere')
+        .map((m, i) => (
+          <Item key={i} ref={index === i ? onRef : undefined}>
+            {m.type === 'image' && (
+              <Img id={`lightbox-image-${i}`} src={m.files[0].url} alt={`Bild ${i + 1}`} />
+            )}
+            {m.type === 'threesixty' && <ThreeSixtyLightbox urls={m.files.map((x) => x.url)} />}
+            {m.type === 'embedded' && <EmbeddedVideoLightbox url={m.files[0].url} />}
+          </Item>
+        ))}
       <CloseBtn onClick={onClose} title="Stäng">
         <IconCancel block />
       </CloseBtn>

package/src/components/ProductCard/index.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
+import LazyLoad from 'react-lazy-load';
 
 import {
   Wrapper,
@@ -68,27 +69,29 @@ const ProductCard = ({
   return (
     <Wrapper onClick={_onClick}>
       <Image>
-        {image ? (
-          <>
+        <LazyLoad>
+          {image ? (
+            <>
+              <Picture>
+                <Source
+                  type="image/webp"
+                  srcSet={`${image}?spec=822x548&format=webp 822w, ${image}?spec=750x500&format=webp 750w, ${image}?spec=411x274&format=webp 411w`}
+                  sizes="(min-width: 600px) calc(((100vw - 48px) / 2) - 8px), (min-width: 900px) calc(((100vw - 48px) / 3) - 10.666px), (min-width: 1312px) 410px, calc(100vw - 32px)"
+                />
+                <Img
+                  srcSet={`${image}?spec=822x548 822w, ${image}?spec=750x500 750w, ${image}?spec=411x274 411w`}
+                  sizes="(min-width: 600px) calc(((100vw - 48px) / 2) - 8px), (min-width: 900px) calc(((100vw - 48px) / 3) - 10.666px), (min-width: 1312px) 410px, calc(100vw - 32px)"
+                  src={`${image}?spec=411x274`}
+                  alt={title}
+                />
+              </Picture>
+            </>
+          ) : (
             <Picture>
-              <Source
-                type="image/webp"
-                srcSet={`${image}?spec=822x548&format=webp 822w, ${image}?spec=750x500&format=webp 750w, ${image}?spec=411x274&format=webp 411w`}
-                sizes="(min-width: 600px) calc(((100vw - 48px) / 2) - 8px), (min-width: 900px) calc(((100vw - 48px) / 3) - 10.666px), (min-width: 1312px) 410px, calc(100vw - 32px)"
-              />
-              <Img
-                srcSet={`${image}?spec=822x548 822w, ${image}?spec=750x500 750w, ${image}?spec=411x274 411w`}
-                sizes="(min-width: 600px) calc(((100vw - 48px) / 2) - 8px), (min-width: 900px) calc(((100vw - 48px) / 3) - 10.666px), (min-width: 1312px) 410px, calc(100vw - 32px)"
-                src={`${image}?spec=411x274`}
-                alt={title}
-              />
+              <Img src={placeholderImage || DEFAULT_PLACEHOLDER_IMAGE} />
             </Picture>
-          </>
-        ) : (
-          <Picture>
-            <Img src={placeholderImage || DEFAULT_PLACEHOLDER_IMAGE} />
-          </Picture>
-        )}
+          )}
+        </LazyLoad>
       </Image>
       <Content>
         <ContentBody>