fixes storybook tests

Author: benjamin_vialatou

package.json

@@ -12,7 +12,7 @@
     "build-storybook": "build-storybook",
     "build": "rollup -c --environment BUILD:production",
     "watch-build": "rollup -w -c --environment BUILD:production",
-    "lint": "eslint 'src/**/*.{js,ts,tsx}' --fix --quiet",
+    "lint": "eslint src/**/*.{js,ts,tsx} --fix --quiet",
     "prepare": "rollup -c --environment BUILD:production",
     "version": "auto-changelog -p && git add CHANGELOG.md",
     "test": "echo 'Tests coming soon ...'",

src/components/Card/Card.tsx

@@ -7,7 +7,7 @@ import React, {
 import { prop } from 'styled-tools';
 
 import { Button } from '../../TockContext';
-import 'styles/theme';
+import '../../styles/theme';
 
 export const CardOuter: StyledComponent<DetailedHTMLProps<
   HTMLAttributes<HTMLLIElement>,

src/components/Carousel/Carousel.tsx

@@ -1,12 +1,12 @@
 import styled, { StyledComponent } from '@emotion/styled';
 import React, { DetailedHTMLProps, HTMLAttributes, ReactElement } from 'react';
 import { ArrowLeftCircle, ArrowRightCircle } from 'react-feather';
-import { opacify } from 'polished';
 import { prop } from 'styled-tools';
 import { useTheme } from '@emotion/react';
 import useCarousel from './hooks/useCarousel';
 import useArrowVisibility from './hooks/useArrowVisibility';
 import TockAccessibility from 'TockAccessibility';
+import TockTheme from '../../styles/theme';
 
 const ButtonContainer: StyledComponent<DetailedHTMLProps<
   HTMLAttributes<HTMLLIElement>,
@@ -33,13 +33,13 @@ const ItemContainer: StyledComponent<DetailedHTMLProps<
     display: none;
   }
   scrollbar-width: none;
-  ${prop<any>('theme.overrides.carouselContainer', '')}
+  ${prop('theme.overrides.carouselContainer', '')}
 
   & > li, & > * {
     margin-left: 1em;
     margin-right: 1em;
 
-    ${prop<any>('theme.overrides.carouselItem', '')}
+    ${prop('theme.overrides.carouselItem', '')}
   }
 `;
 
@@ -53,7 +53,7 @@ const Previous: StyledComponent<DetailedHTMLProps<
   top: 0;
   bottom: 0;
   padding: 1em;
-  background: ${(props) => opacify(-0.8, props.theme.palette.background.bot)};
+  background: opacify(-0.8, ${prop('props.theme.palette.background.bot')});
   border: none;
   width: 4em;
   height: 4em;
@@ -63,17 +63,17 @@ const Previous: StyledComponent<DetailedHTMLProps<
   z-index: 5;
 
   & svg {
-    stroke: ${prop<any>('theme.palette.background.bot')};
+    stroke: ${prop('theme.palette.background.bot')};
   }
 
   &:hover,
   &:focus {
     svg {
-      stroke: ${prop<any>('theme.palette.text.bot')};
+      stroke: ${prop('theme.palette.text.bot')};
     }
   }
 
-  ${prop<any>('theme.overrides.carouselArrow', '')};
+  ${prop('theme.overrides.carouselArrow', '')};
 `;
 
 const Next: StyledComponent<DetailedHTMLProps<
@@ -86,7 +86,7 @@ const Next: StyledComponent<DetailedHTMLProps<
   top: 0;
   bottom: 0;
   padding: 1em;
-  background: ${(props) => opacify(-0.8, props.theme.palette.background.bot)};
+  background: opacify(-0.8, ${prop('props.theme.palette.background.bot')});
   border: none;
   width: 4em;
   height: 4em;
@@ -96,17 +96,17 @@ const Next: StyledComponent<DetailedHTMLProps<
   z-index: 5;
 
   & svg {
-    stroke: ${prop<any>('theme.palette.background.bot')};
+    stroke: ${prop('theme.palette.background.bot')};
   }
 
   &:hover,
   &:focus {
     svg {
-      stroke: ${prop<any>('theme.palette.text.bot')};
+      stroke: ${prop('theme.palette.text.bot')};
     }
   }
 
-  ${prop<any>('theme.overrides.carouselArrow', '')};
+  ${prop('theme.overrides.carouselArrow', '')};
 `;
 
 const Carousel: (props: {
@@ -119,7 +119,8 @@ const Carousel: (props: {
   children?: ReactElement[];
   accessibility?: TockAccessibility;
 }) => {
-  const theme: TockTheme = useTheme<TockTheme>();
+  const theme: TockTheme = useTheme();
+
   const [ref, previous, next] = useCarousel<HTMLUListElement>(children?.length);
   const [leftVisible, rightVisible] = useArrowVisibility(
     ref.container,

src/components/Conversation/Conversation.tsx

@@ -13,8 +13,8 @@ import InlineQuickReplyList from '../InlineQuickReplyList';
 import useIntervalCounter from './hooks/useIntervalCounter';
 import useScrollBehaviour from './hooks/useScrollBehaviour';
 import { useTheme } from '@emotion/react';
-import 'styles/theme';
-import TockTheme from 'styles/theme';
+import '../../styles/theme';
+import TockTheme from '../../styles/theme';
 
 import type {
   Button,

src/components/Image/Image.tsx

@@ -5,7 +5,7 @@ import React, {
   ImgHTMLAttributes,
 } from 'react';
 import { prop } from 'styled-tools';
-import 'styles/theme';
+import '../../styles/theme';
 
 export const CardOuter: StyledComponent<DetailedHTMLProps<
   HTMLAttributes<HTMLLIElement>,

src/components/InlineQuickReplyList/InlineQuickReplyList.tsx

@@ -3,9 +3,8 @@ import { ArrowLeftCircle, ArrowRightCircle } from 'react-feather';
 import styled, { StyledComponent } from '@emotion/styled';
 import { prop } from 'styled-tools';
 import { useTheme } from '@emotion/react';
-import 'styles/theme';
-import TockTheme from 'styles/theme';
-import { opacify } from 'polished';
+import '../../styles/theme';
+import TockTheme from '../../styles/theme';
 import { Button } from '../../TockContext';
 import useCarouselQuickReply from './hooks/useCarouselQuickReply';
 import useArrowVisibility from '../Carousel/hooks/useArrowVisibility';
@@ -45,7 +44,7 @@ const Previous: StyledComponent<DetailedHTMLProps<
   top: 0;
   bottom: 0;
   padding: 1em;
-  background: ${(props) => opacify(-0.8, props.theme.palette.background.bot)};
+  background: opacify(-0.8, ${prop('props.theme.palette.background.bot')});
   border: none;
   width: 3em;
   height: 3em;
@@ -55,17 +54,17 @@ const Previous: StyledComponent<DetailedHTMLProps<
   z-index: 5;
 
   & svg {
-    stroke: ${prop<any>('theme.palette.background.bot')};
+    stroke: ${prop('theme.palette.background.bot')};
   }
 
   &:hover,
   &:focus {
     svg {
-      stroke: ${prop<any>('theme.palette.text.bot')};
+      stroke: ${prop('theme.palette.text.bot')};
     }
   }
 
-  ${prop<any>('theme.overrides.quickReplyArrow', '')};
+  ${prop('theme.overrides.quickReplyArrow', '')};
 `;
 
 const Next: StyledComponent<DetailedHTMLProps<
@@ -78,7 +77,7 @@ const Next: StyledComponent<DetailedHTMLProps<
   top: 0;
   bottom: 0;
   padding: 1em;
-  background: ${(props) => opacify(-0.8, props.theme.palette.background.bot)};
+  background: opacify(-0.8, ${prop('props.theme.palette.background.bot')});
   border: none;
   width: 3em;
   height: 3em;
@@ -88,17 +87,17 @@ const Next: StyledComponent<DetailedHTMLProps<
   z-index: 5;
 
   & svg {
-    stroke: ${prop<any>('theme.palette.background.bot')};
+    stroke: ${prop('theme.palette.background.bot')};
   }
 
   &:hover,
   &:focus {
     svg {
-      stroke: ${prop<any>('theme.palette.text.bot')};
+      stroke: ${prop('theme.palette.text.bot')};
     }
   }
 
-  ${prop<any>('theme.overrides.quickReplyArrow', '')};
+  ${prop('theme.overrides.quickReplyArrow', '')};
 `;
 
 const InlineQuickReplyListOuterContainer: StyledComponent<DetailedHTMLProps<

src/components/MessageBot/MessageBot.tsx

@@ -7,7 +7,7 @@ import { prop } from 'styled-tools';
 import { Button, TextMessage } from '../../TockContext';
 import QuickReplyList from '../QuickReplyList';
 
-import 'styles/theme';
+import '../../styles/theme';
 
 export const MessageContainer: StyledComponent<{}> = styled.li`
   width: 100%;

src/components/QuickReplyList/QuickReplyList.tsx

@@ -4,7 +4,7 @@ import { prop } from 'styled-tools';
 
 import { Button } from '../../TockContext';
 import QuickReply from '../QuickReply/QuickReply';
-import 'styles/theme';
+import '../../styles/theme';
 
 const QuickReplyListContainer: StyledComponent<DetailedHTMLProps<
   HTMLAttributes<HTMLUListElement>,

src/styles/tockThemeProvider.ts

@@ -5,15 +5,15 @@ import TockTheme from './theme';
 import { default as createTheme } from './createTheme';
 
 export default function TockThemeProvider<Theme>(
-  props: ThemeProviderProps<Theme>,
+  props: ThemeProviderProps,
 ): React.ReactElement {
   const theme = props.theme as TockTheme;
   if (!theme.overrides) {
     console.warn(
       '[Theme deprecated] You seem providing a deprecated theme.\n Since version 20.3.4 you must provide a theme build by using "createTheme" function and the new TockTheme interface.',
     );
     return ThemeProvider(
-      deepmerge<ThemeProviderProps<Theme>>(
+      deepmerge<ThemeProviderProps>(
         { theme: createTheme({}) as Partial<Theme> },
         { ...props },
       ),