oddsgate-ds 1.0.168 → 1.0.171

package/src/components/organisms/Slider/Slider.stories.tsx

@@ -1,146 +1,146 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { ISlider } from './Slider.interface'
-import React from 'react'
-import Slider from './Slider.component'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/Slider',
-  component: Slider,
-  tags: ['autodocs'],
-  argTypes: {
-    slidesToShow: {
-      control: { type: 'number' }
-    },
-    arrows: {
-      control: { type: 'boolean' }
-    },
-    dots: {
-      control: { type: 'boolean' }
-    }
-  }
-} as Meta
-
-const image = (
-  <img
-    width="100%"
-    height="100%"
-    sizes="100vw"
-    decoding="async"
-    src="/assets/placeholder.png"
-    alt="Empty state"
-  />
-)
-
-export const Simple: StoryObj<ISlider> = {
-  render: args => (
-    <div
-      style={{
-        maxWidth: '750px',
-        margin: 'auto'
-      }}
-    >
-      <Slider
-        slidesToShow={2}
-        slidesToScroll={1}
-        infinite={false}
-        spacing={'1rem'}
-        mediaQueries={{
-          900: {
-            slidesToShow: 2
-          },
-          500: {
-            slidesToShow: 1
-          }
-        }}
-        {...args}
-      >
-        <div>{image}</div>
-        <div>{image}</div>
-        <div>{image}</div>
-        <div>{image}</div>
-        <div>{image}</div>
-        <div>{image}</div>
-      </Slider>
-    </div>
-  ),
-  args: {
-    slidesToShow: 3,
-    arrows: true,
-    dots: true
-  }
-}
-
-
-
-export const LessSliders: StoryObj<ISlider> = {
-  render: args => (
-    <div
-      style={{
-        margin: 'auto'
-      }}
-    >
-      <Slider
-        slidesToShow={4}
-        slidesToScroll={1}
-        infinite={false}
-        spacing={'1rem'}
-        mediaQueries={{
-          900: {
-            slidesToShow: 2
-          },
-          500: {
-            slidesToShow: 1
-          }
-        }}
-        {...args}
-      >
-        <div>{image}</div>
-        <div>{image}</div>
-      </Slider>
-    </div>
-  ),
-}
-
-
-export const MobileOnly: StoryObj<ISlider> = {
-  render: args => (
-    <div
-      style={{
-        maxWidth: '750px',
-        margin: 'auto'
-      }}
-    >
-      <Slider
-        slidesToShow={2}
-        slidesToScroll={1}
-        infinite={false}
-        spacing={'1rem'}
-        autoplay={false}
-        mediaQueries={{
-          900: {
-            slidesToShow: 2,
-            autoplay: true,
-          },
-          500: {
-            slidesToShow: 1
-          }
-        }}
-        {...args}
-      >
-        <div style={{ maxWidth: "100%" }}>{image}</div>
-        <div style={{ maxWidth: "25%" }}>{image}</div>
-        <div style={{ maxWidth: "25%" }}>{image}</div>
-        <div style={{ maxWidth: "25%" }}>{image}</div>
-        <div style={{ maxWidth: "25%" }}>{image}</div>
-        <div style={{ maxWidth: "25%" }}>{image}</div>
-      </Slider>
-    </div>
-  ),
-  args: {
-    ...Simple.args,
-    mobileOnly: true
-  }
-}
-
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ISlider } from './Slider.interface'
+import React from 'react'
+import Slider from './Slider.component'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Slider',
+  component: Slider,
+  tags: ['autodocs'],
+  argTypes: {
+    slidesToShow: {
+      control: { type: 'number' }
+    },
+    arrows: {
+      control: { type: 'boolean' }
+    },
+    dots: {
+      control: { type: 'boolean' }
+    }
+  }
+} as Meta
+
+const image = (
+  <img
+    width="100%"
+    height="100%"
+    sizes="100vw"
+    decoding="async"
+    src="/assets/placeholder.png"
+    alt="Empty state"
+  />
+)
+
+export const Simple: StoryObj<ISlider> = {
+  render: args => (
+    <div
+      style={{
+        maxWidth: '750px',
+        margin: 'auto'
+      }}
+    >
+      <Slider
+        slidesToShow={2}
+        slidesToScroll={1}
+        infinite={false}
+        spacing={'1rem'}
+        mediaQueries={{
+          900: {
+            slidesToShow: 2
+          },
+          500: {
+            slidesToShow: 1
+          }
+        }}
+        {...args}
+      >
+        <div>{image}</div>
+        <div>{image}</div>
+        <div>{image}</div>
+        <div>{image}</div>
+        <div>{image}</div>
+        <div>{image}</div>
+      </Slider>
+    </div>
+  ),
+  args: {
+    slidesToShow: 3,
+    arrows: true,
+    dots: true
+  }
+}
+
+
+
+export const LessSliders: StoryObj<ISlider> = {
+  render: args => (
+    <div
+      style={{
+        margin: 'auto'
+      }}
+    >
+      <Slider
+        slidesToShow={4}
+        slidesToScroll={1}
+        infinite={false}
+        spacing={'1rem'}
+        mediaQueries={{
+          900: {
+            slidesToShow: 2
+          },
+          500: {
+            slidesToShow: 1
+          }
+        }}
+        {...args}
+      >
+        <div>{image}</div>
+        <div>{image}</div>
+      </Slider>
+    </div>
+  ),
+}
+
+
+export const MobileOnly: StoryObj<ISlider> = {
+  render: args => (
+    <div
+      style={{
+        maxWidth: '750px',
+        margin: 'auto'
+      }}
+    >
+      <Slider
+        slidesToShow={2}
+        slidesToScroll={1}
+        infinite={false}
+        spacing={'1rem'}
+        autoplay={false}
+        mediaQueries={{
+          900: {
+            slidesToShow: 2,
+            autoplay: true,
+          },
+          500: {
+            slidesToShow: 1
+          }
+        }}
+        {...args}
+      >
+        <div style={{ maxWidth: "100%" }}>{image}</div>
+        <div style={{ maxWidth: "25%" }}>{image}</div>
+        <div style={{ maxWidth: "25%" }}>{image}</div>
+        <div style={{ maxWidth: "25%" }}>{image}</div>
+        <div style={{ maxWidth: "25%" }}>{image}</div>
+        <div style={{ maxWidth: "25%" }}>{image}</div>
+      </Slider>
+    </div>
+  ),
+  args: {
+    ...Simple.args,
+    mobileOnly: true
+  }
+}
+

package/src/components/organisms/Slider/Slider.theme.ts

@@ -1,145 +1,145 @@
-import { colors, gutter, radius, responsiveMedia, responsiveMediaMax, shadows, spaces } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-import { ISlider } from './Slider.interface';
-
-const SliderStyles = `
-    .blaze-slider {
-    /* default config */
-    --slides-to-show: 1;
-    --slide-gap: 1rem;
-    /* force ltr - slider does not work in rtl mode */
-    direction: ltr;
-  }
-
-  .blaze-container {
-    position: relative;
-  }
-
-  .blaze-track-container {
-    overflow: hidden;
-  }
-
-  .blaze-track {
-    will-change: transform;
-    touch-action: pan-y;
-    display: flex;
-    gap: var(--slide-gap);
-
-    --slide-width: calc(
-      (100% - (var(--slides-to-show) - 1) * var(--slide-gap)) /
-        var(--slides-to-show)
-    );
-  }
-
-  .blaze-track > div {
-    width: var(--slide-width);
-    max-width: unset !important;
-    flex-shrink: 0;
-  }
-
-
-  /* Custom styles */
-  .blaze-slider{
-    position:relative;
-
-    &.dragging .blaze-track{
-      cursor:grabbing;
-    }
-
-    .blaze-controls{
-      display:flex;
-      align-items:center;
-      justify-content: center;
-      gap:16px;
-      width: 100%;
-      margin-top:1rem;
-    }
-
-      /* pagination buttons */
-    .blaze-pagination{
-      display:flex;
-      justify-content: center;
-      gap:10px;
-
-      button{
-        width:14px;
-        height:14px;
-        background:${colors.third10};
-        border-radius:100%;
-        font-size: 0;
-        padding:0;
-        transition:all 0.3s ease;
-
-        outline:none;
-        border:none;
-        cursor:pointer;
-
-        &.hover{
-          background-color: ${colors.primary50}
-        }
-        &.active{
-          background-color: ${colors.primary50}
-        }
-      }
-    }
-
-    /* arrows */
-    .blaze-arrows{
-      position:absolute;
-      top: 50%;
-      right: 0;
-      transform: translateY(-50%);
-    }
-    .blaze-next,
-    .blaze-prev{
-      cursor:pointer;
-
-      i{
-        margin:auto;
-      }
-    }
-
-    &.start .blaze-prev,
-    &.end .blaze-next{
-      opacity: 0.5;
-      cursor:not-allowed;
-    }
-  }
-`;
-
-export const StyledSlider = styled.div<ISlider>`
-  position:relative;
-  width: 100%;
-
-  ${({ $mobileOnly }) => $mobileOnly ? (`
-      @media only screen and (max-width: ${responsiveMediaMax}) {
-        ${SliderStyles}
-      }
-      @media only screen and (min-width: ${responsiveMedia}) {
-        .blaze-track{
-          display: flex;
-          flex-direction: row;
-          align-items: stretch;
-          justify-content: flex-start;
-          flex-wrap: wrap;
-
-          margin-right: -${gutter};
-          margin-left: -${gutter};
-        }
-        .blaze-controls{
-          display:none;
-        }
-      }
-    `)
-    : (`
-
-      ${SliderStyles}
-    `)}
-
-  ${({ $responsiveCSS }) => $responsiveCSS && `
-    .blaze-slider {
-      ${$responsiveCSS};
-    }
-  `}
-`;
+import { colors, gutter, radius, responsiveMedia, responsiveMediaMax, shadows, spaces } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { ISlider } from './Slider.interface';
+
+const SliderStyles = `
+    .blaze-slider {
+    /* default config */
+    --slides-to-show: 1;
+    --slide-gap: 1rem;
+    /* force ltr - slider does not work in rtl mode */
+    direction: ltr;
+  }
+
+  .blaze-container {
+    position: relative;
+  }
+
+  .blaze-track-container {
+    overflow: hidden;
+  }
+
+  .blaze-track {
+    will-change: transform;
+    touch-action: pan-y;
+    display: flex;
+    gap: var(--slide-gap);
+
+    --slide-width: calc(
+      (100% - (var(--slides-to-show) - 1) * var(--slide-gap)) /
+        var(--slides-to-show)
+    );
+  }
+
+  .blaze-track > div {
+    width: var(--slide-width);
+    max-width: unset !important;
+    flex-shrink: 0;
+  }
+
+
+  /* Custom styles */
+  .blaze-slider{
+    position:relative;
+
+    &.dragging .blaze-track{
+      cursor:grabbing;
+    }
+
+    .blaze-controls{
+      display:flex;
+      align-items:center;
+      justify-content: center;
+      gap:16px;
+      width: 100%;
+      margin-top:1rem;
+    }
+
+      /* pagination buttons */
+    .blaze-pagination{
+      display:flex;
+      justify-content: center;
+      gap:10px;
+
+      button{
+        width:14px;
+        height:14px;
+        background:${colors.third10};
+        border-radius:100%;
+        font-size: 0;
+        padding:0;
+        transition:all 0.3s ease;
+
+        outline:none;
+        border:none;
+        cursor:pointer;
+
+        &.hover{
+          background-color: ${colors.primary50}
+        }
+        &.active{
+          background-color: ${colors.primary50}
+        }
+      }
+    }
+
+    /* arrows */
+    .blaze-arrows{
+      position:absolute;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+    }
+    .blaze-next,
+    .blaze-prev{
+      cursor:pointer;
+
+      i{
+        margin:auto;
+      }
+    }
+
+    &.start .blaze-prev,
+    &.end .blaze-next{
+      opacity: 0.5;
+      cursor:not-allowed;
+    }
+  }
+`;
+
+export const StyledSlider = styled.div<ISlider>`
+  position:relative;
+  width: 100%;
+
+  ${({ $mobileOnly }) => $mobileOnly ? (`
+      @media only screen and (max-width: ${responsiveMediaMax}) {
+        ${SliderStyles}
+      }
+      @media only screen and (min-width: ${responsiveMedia}) {
+        .blaze-track{
+          display: flex;
+          flex-direction: row;
+          align-items: stretch;
+          justify-content: flex-start;
+          flex-wrap: wrap;
+
+          margin-right: -${gutter};
+          margin-left: -${gutter};
+        }
+        .blaze-controls{
+          display:none;
+        }
+      }
+    `)
+    : (`
+
+      ${SliderStyles}
+    `)}
+
+  ${({ $responsiveCSS }) => $responsiveCSS && `
+    .blaze-slider {
+      ${$responsiveCSS};
+    }
+  `}
+`;

package/src/components/organisms/Slider/Slider.utils.tsx

@@ -1,19 +1,19 @@
-import BlazeSlider, { BlazeConfig } from 'blaze-slider';
-import { useEffect, useRef } from 'react';
-
-export function useBlazeSlider(config: BlazeConfig | undefined): {
-  elRef: React.RefObject<any>;
-  sliderRef: React.RefObject<BlazeSlider | undefined>;
-} {
-  const sliderRef = useRef<BlazeSlider | undefined>();
-  const elRef = useRef<any>();
-
-  useEffect(() => {
-    // if not already initialized
-    if (!sliderRef.current) {
-      sliderRef.current = new BlazeSlider(elRef?.current, config) || '';
-    }
-  }, []);
-
-  return { elRef, sliderRef };
-}
+import BlazeSlider, { BlazeConfig } from 'blaze-slider';
+import { useEffect, useRef } from 'react';
+
+export function useBlazeSlider(config: BlazeConfig | undefined): {
+  elRef: React.RefObject<any>;
+  sliderRef: React.RefObject<BlazeSlider | undefined>;
+} {
+  const sliderRef = useRef<BlazeSlider | undefined>();
+  const elRef = useRef<any>();
+
+  useEffect(() => {
+    // if not already initialized
+    if (!sliderRef.current) {
+      sliderRef.current = new BlazeSlider(elRef?.current, config) || '';
+    }
+  }, []);
+
+  return { elRef, sliderRef };
+}

package/src/components/organisms/Slider/index.ts

@@ -1 +1 @@
-export { default } from "./Slider.component";
+export { default } from "./Slider.component";