oddsgate-ds 1.0.40 → 1.0.42

package/.storybook/main.ts

@@ -7,15 +7,15 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
+    '@storybook/addon-webpack5-compiler-swc',
+    '@chromatic-com/storybook'
   ],
   framework: {
     name: '@storybook/react-webpack5',
     options: {}
   },
   docs: {
-    //👇 See the table below for the list of supported options
-    autodocs: 'tag',
-    defaultName: 'Documentation',
+    defaultName: 'Documentation'
   },
   typescript: {
     check: false,

package/.storybook/preview.ts

@@ -1,24 +1,9 @@
 import GlobalStyles from './../src/styles/Global'
-import type { Preview } from "@storybook/react";
 import { withThemeFromJSXProvider } from '@storybook/addon-styling';
 
-const preview: Preview = {
-  parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-  },
-};
-
 export const decorators = [
   withThemeFromJSXProvider({
     GlobalStyles, // Adds your GlobalStyle component to all stories
   }),
 ];
 
-
-export default preview;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -28,19 +28,21 @@
   "author": "Rui Correia <rui.correia@miew.pt>",
   "license": "MIT",
   "devDependencies": {
+    "@chromatic-com/storybook": "^1",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-sucrase": "^5.0.1",
     "@rollup/plugin-typescript": "^11.1.1",
-    "@storybook/addon-essentials": "^7.0.18",
-    "@storybook/addon-interactions": "^7.0.18",
-    "@storybook/addon-links": "^7.0.18",
+    "@storybook/addon-essentials": "^8.1.5",
+    "@storybook/addon-interactions": "^8.1.5",
+    "@storybook/addon-links": "^8.1.5",
     "@storybook/addon-styling": "^1.3.2",
-    "@storybook/blocks": "^7.0.18",
-    "@storybook/react": "^7.0.18",
-    "@storybook/react-webpack5": "^7.0.18",
-    "@storybook/testing-library": "^0.1.1-future.2",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.3",
+    "@storybook/blocks": "^8.1.5",
+    "@storybook/react": "^8.1.5",
+    "@storybook/react-webpack5": "^8.1.5",
+    "@storybook/test": "^8.1.5",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "babel-plugin-styled-components": "^2.1.4",
@@ -62,8 +64,9 @@
     "rollup-plugin-terser": "^7.0.2",
     "sass": "^1.63.6",
     "sass-loader": "^13.3.1",
-    "storybook": "^7.0.18",
+    "storybook": "^8.1.5",
     "style-loader": "^3.3.3",
+    "styled-components": "^6.1.11",
     "stylelint": "^15.10.2",
     "stylelint-config-standard": "^34.0.0",
     "tslib": "^2.5.2",

package/rollup.config.js

@@ -35,12 +35,14 @@ export default [
         format: 'cjs',
         sourcemap: true,
         interop: 'compat',
+        // manualChunks: true,
       },
       {
         file: packageJson.module,
         format: 'esm',
         sourcemap: true,
         interop: 'compat',
+        // manualChunks: true,
       }
     ],
     plugins: [

package/src/components/atoms/Button/Button.stories.tsx

@@ -40,7 +40,7 @@ export default {
 export const Primary: StoryObj<IButton> = {
   render: args => <Button {...args} />,
   args: {
-    mode: "dark",
+    mode: 'dark',
     rightIcon: <Icon icon="icon-chevron-right"></Icon>
   }
 }

package/src/components/atoms/Counter/Counter.stories.tsx

@@ -16,15 +16,14 @@ export default {
 export const Example: StoryObj<ICounter> = {
   render: args => (
     <>
-      <div style={{ height: "2000px" }}>
-      </div>
+      <div style={{ height: '2000px' }}></div>
       <Counter {...args}></Counter>
     </>
   ),
   args: {
-    title: "lorem ipsum",
+    title: 'lorem ipsum',
     number: 30,
-    prefix: "+",
-    suffix: "%",
+    prefix: '+',
+    suffix: '%'
   }
 }

package/src/components/atoms/Separator/Separator.stories.tsx

@@ -14,7 +14,7 @@ export default {
       control: 'text'
     },
     color: {
-      control: 'colorpicker'
+      control: 'color'
     }
   }
 } as Meta

package/src/components/atoms/SocialLinks/SocialLinks.stories.tsx

@@ -12,7 +12,6 @@ export default {
   argTypes: {}
 } as Meta
 
-
 export const Example: StoryObj<ISocialLinks> = {
   args: {
     variant: 'text',
@@ -25,7 +24,6 @@ export const Example: StoryObj<ISocialLinks> = {
   }
 }
 
-
 export const Light: StoryObj<ISocialLinks> = {
   render: args => <SocialLinks {...args} />,
   args: {

package/src/components/atoms/Spacer/Spacer.stories.tsx

@@ -14,7 +14,7 @@ export default {
       control: 'text'
     },
     color: {
-      control: 'colorpicker'
+      control: 'color'
     }
   }
 } as Meta

package/src/components/molecules/EventsCard/EventsCard.stories.tsx

@@ -23,7 +23,9 @@ const image = (
 )
 
 export const Simple: StoryObj<IEventsCard> = {
-  render: args => <EventsCard {...args} style={{ maxWidth: '320px' }}></EventsCard>,
+  render: args => (
+    <EventsCard {...args} style={{ maxWidth: '320px' }}></EventsCard>
+  ),
   args: {
     date: '24 nov 23',
     category: 'Category name',

package/src/components/molecules/LogosCard/LogosCard.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { ILogosCard } from './LogosCard.interface';
-import LogosCard from './LogosCard.component';
-import React from 'react';
+import { ILogosCard } from './LogosCard.interface'
+import LogosCard from './LogosCard.component'
+import React from 'react'
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
@@ -33,6 +33,6 @@ export const Simple: StoryObj<ILogosCard> = {
   ),
   args: {
     imageElement: image,
-    title: "Logo Teste",
+    title: 'Logo Teste'
   }
 }

package/src/components/molecules/ProductCard/ProductCard.stories.tsx

@@ -23,15 +23,20 @@ const image = (
 )
 
 export const Simple: StoryObj<IProductCard> = {
-  render: args =>
+  render: args => (
     <>
-      <ProductCard {...args} title="Lorem" style={{ maxWidth: '320px' }}></ProductCard>
+      <ProductCard
+        {...args}
+        title="Lorem"
+        style={{ maxWidth: '320px' }}
+      ></ProductCard>
       <ProductCard {...args} style={{ maxWidth: '320px' }}></ProductCard>
-    </>,
+    </>
+  ),
   args: {
     title: 'Cras vel facilisis tellus',
     imageElement: image,
     description:
-      'Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique. Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique.',
+      'Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique. Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique.'
   }
 }

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

@@ -23,111 +23,107 @@ const image = (
 )
 
 export const Simple: StoryObj<ICircularSlider> = {
-  render: args => (
-    <CircularSlider {...args}>
-
-    </CircularSlider>
-  ),
+  render: args => <CircularSlider {...args}></CircularSlider>,
   args: {
     content: [
       {
-        name: "My name 1",
-        role: "My role",
+        name: 'My name 1',
+        role: 'My role',
         img: image
       },
       {
-        name: "My name 2",
-        role: "My role",
+        name: 'My name 2',
+        role: 'My role',
         img: image
       },
       {
-        name: "My name 3",
-        role: "My role",
+        name: 'My name 3',
+        role: 'My role',
         img: image
       },
       {
-        name: "My name 4",
-        role: "My role",
+        name: 'My name 4',
+        role: 'My role',
         img: image
       },
       {
-        name: "My name 5",
-        role: "My role",
+        name: 'My name 5',
+        role: 'My role',
         img: image
       },
       {
-        name: "My name 6",
-        role: "My role",
+        name: 'My name 6',
+        role: 'My role',
         img: image
       },
       {
-        name: "My name 7",
-        role: "My role",
+        name: 'My name 7',
+        role: 'My role',
         img: image
       },
       {
-        name: "My name 9",
-        role: "My role",
+        name: 'My name 9',
+        role: 'My role',
         img: image
       },
       {
-        name: "My name 9",
-        role: "My role",
+        name: 'My name 9',
+        role: 'My role',
         img: image
       },
       {
-        name: "My name 10",
-        role: "My role",
+        name: 'My name 10',
+        role: 'My role',
         img: image
       },
       {
-        name: "My name 11",
-        role: "My role",
+        name: 'My name 11',
+        role: 'My role',
         img: image
       },
       {
-        name: "My name 1§2",
-        role: "My role",
+        name: 'My name 1§2',
+        role: 'My role',
         img: image
       },
       {
-        name: "My name 13",
-        role: "My role",
+        name: 'My name 13',
+        role: 'My role',
         img: image
       },
       {
-        name: "My name 14",
-        role: "My role",
+        name: 'My name 14',
+        role: 'My role',
         img: image
       },
       {
-        name: "My name 15",
-        role: "My role",
+        name: 'My name 15',
+        role: 'My role',
         img: image
       },
       {
-        name: "My name 16",
-        role: "My role",
+        name: 'My name 16',
+        role: 'My role',
         img: image
       },
       {
-        name: "My name 17",
-        role: "My role",
+        name: 'My name 17',
+        role: 'My role',
         img: image
       },
       {
-        name: "My name 19",
-        role: "My role",
+        name: 'My name 19',
+        role: 'My role',
         img: image
       },
       {
-        name: "My name 19",
-        role: "My role",
+        name: 'My name 19',
+        role: 'My role',
         img: image
       },
       {
-        name: "My name 20",
-        role: "My role",
+        name: 'My name 20',
+        role: 'My role',
         img: image
       }
     ]

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

@@ -14,7 +14,7 @@ export default {
 export const Simple: StoryObj<ITabs> = {
   render: args => <Tabs {...args}></Tabs>,
   args: {
-    title: "Lorem ipsum dolor sit amet",
+    title: 'Lorem ipsum dolor sit amet',
     vertical: true,
     menu: [
       {
@@ -31,8 +31,8 @@ export const Simple: StoryObj<ITabs> = {
             culpa qui officia deserunt mollit anim id est laborum.
           </RichText>
         ),
-        onClick: () =>{
-          alert("Tab clicked")
+        onClick: () => {
+          alert('Tab clicked')
         }
       },
       {
@@ -46,12 +46,13 @@ export const Simple: StoryObj<ITabs> = {
             aliquip ex ea commodo consequat. Duis aute irure dolor in
             reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
             pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
+            culpa qui officia deserunt mollit anim id est eiusmod tempor
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat. Duis aute irure dolor in reprehenderit in
+            voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+            officia deserunt mollit anim id est laborum.
           </RichText>
         )
       },
@@ -112,6 +113,6 @@ export const Simple: StoryObj<ITabs> = {
           </RichText>
         )
       }
-    ],
+    ]
   }
 }