Update Components and Include New Icons

.gitignore

@@ -8,6 +8,8 @@
 junit.xml
 
 /dist
+/yarn-error.log
+/yarn.lock
 /sample
 /__reports__
 /node_modules/

.storybook/figmaAddon/register.tsx

@@ -0,0 +1,47 @@
+import { addons, types } from '@storybook/addons';
+import { IconButton } from '@storybook/components';
+import { useParameter } from '@storybook/manager-api';
+import { styled } from '@storybook/theming';
+
+import React from 'react';
+
+const ADDON_ID = 'myaddon/figma';
+const PARAM_KEY = 'figmaUrl';
+
+const FigmaIcon = styled.img({
+  width: '20px',
+  height: '20px',
+  marginRight: '10px',
+});
+
+addons.register(ADDON_ID, () => {
+  addons.add(ADDON_ID, {
+    title: 'Figma',
+    type: types.TOOL,
+    match: ({ viewMode }) => viewMode === 'story',
+    render: () => {
+      const figmaLink = useParameter(PARAM_KEY, '#');
+
+      if (figmaLink === '#') {
+        return null;
+      }
+
+      return (
+        <IconButton
+          key="figma"
+          title="Open in Figma"
+          onClick={() => window.open(figmaLink, '_blank')}
+          placeholder={''}
+          onPointerEnterCapture={undefined}
+          onPointerLeaveCapture={undefined}
+        >
+          <FigmaIcon
+            src="data:image/svg+xml;base64,PHN2ZyBpZD0iRmxhdCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjU2IDI1NiI+CiAgPHBhdGggZD0iTTE4My4wMzk1NSw5NC4wMDA0OUEzOS45ODcwNiwzOS45ODcwNiwwLDAsMCwxNjIsMjAuMDAxSDk0QTM5Ljk4NzA2LDM5Ljk4NzA2LDAsMCwwLDcyLjk2MDQ1LDk0LjAwMDQ5LDM5Ljk2Mzc1LDM5Ljk2Mzc1LDAsMCwwLDcyLjk2MTQzLDE2MiwzOS45OTI0LDM5Ljk5MjQsMCwxLDAsMTM0LDE5NS45OTk1MXYtMzkuNDdhMzkuOTgwODQsMzkuOTgwODQsMCwxLDAsNDkuMDM5NTUtNjIuNTI5Wk0xOTAsNjAuMDAxYTI4LjAzMTE0LDI4LjAzMTE0LDAsMCwxLTI3Ljk4MDQ3LDI3Ljk5OTUxTDE2Miw4OGwtLjAzODU3LjAwMUwxMzQsODhWMzIuMDAxaDI4QTI4LjAzMTQ1LDI4LjAzMTQ1LDAsMCwxLDE5MCw2MC4wMDFabS0xMjQsMGEyOC4wMzE0NSwyOC4wMzE0NSwwLDAsMSwyOC0yOGgyOFY4OEg5NGwtLjAxOS4wMDA0OUEyOC4wMzEzMiwyOC4wMzEzMiwwLDAsMSw2Niw2MC4wMDFaTTY2LDEyOGEyOC4wMzEyMywyOC4wMzEyMywwLDAsMSwyNy45ODEtMjcuOTk5NTFMOTQsMTAwLjAwMWwyOC0uMDAwNzRWMTU1Ljk5OUw5NCwxNTZBMjguMDMxNDYsMjguMDMxNDYsMCwwLDEsNjYsMTI4Wm0yOCw5NS45OTlBMjcuOTk5NTEsMjcuOTk5NTEsMCwxLDEsOTQsMTY4bDI4LS4wMDA3M3YyOC4wMDAyNEEyOC4wMzEzNSwyOC4wMzEzNSwwLDAsMSw5NCwyMjMuOTk5Wk0xNjIsMTU2YTI3Ljk5OTUyLDI3Ljk5OTUyLDAsMCwxLS4wMzg1Ny01NS45OTlIMTYybC4wMTktLjAwMDQ5QTI3Ljk5OTc2LDI3Ljk5OTc2LDAsMCwxLDE2MiwxNTZaIi8+Cjwvc3ZnPgo="
+            alt="Figma"
+          />
+          Figma
+        </IconButton>
+      );
+    },
+  });
+});

.storybook/githubAddon/register.tsx

@@ -0,0 +1,47 @@
+import { addons, types } from '@storybook/addons';
+import { IconButton } from '@storybook/components';
+import { useParameter } from '@storybook/manager-api';
+import { styled } from '@storybook/theming';
+
+import React from 'react';
+
+const ADDON_ID = 'myaddon/github';
+const PARAM_KEY = 'githubUrl';
+
+const GithubIcon = styled.img({
+  width: '20px',
+  height: '20px',
+  marginRight: '10px',
+});
+
+addons.register(ADDON_ID, () => {
+  addons.add(ADDON_ID, {
+    title: 'Github',
+    type: types.TOOL,
+    match: ({ viewMode }) => viewMode === 'story',
+    render: () => {
+      const githubLink = useParameter(PARAM_KEY, '#');
+
+      if (githubLink === '#') {
+        return null;
+      }
+
+      return (
+        <IconButton
+          key="github"
+          title="Open in Github"
+          onClick={() => window.open(githubLink, '_blank')}
+          placeholder={''}
+          onPointerEnterCapture={undefined}
+          onPointerLeaveCapture={undefined}
+        >
+          <GithubIcon
+            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Imljb25fZ2l0aHViIj4KPHBhdGggaWQ9IlZlY3RvciIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMiAxQzUuOTIyNSAxIDEgNS45MjI1IDEgMTJDMSAxNi44Njc1IDQuMTQ4NzUgMjAuOTc4OCA4LjUyMTI1IDIyLjQzNjNDOS4wNzEyNSAyMi41MzI1IDkuMjc3NSAyMi4yMDI1IDkuMjc3NSAyMS45MTM3QzkuMjc3NSAyMS42NTI1IDkuMjYzNzUgMjAuNzg2MyA5LjI2Mzc1IDE5Ljg2NUM2LjUgMjAuMzczOCA1Ljc4NSAxOS4xOTEyIDUuNTY1IDE4LjU3MjVDNS40NDEyNSAxOC4yNTYzIDQuOTA1IDE3LjI4IDQuNDM3NSAxNy4wMTg3QzQuMDUyNSAxNi44MTI1IDMuNTAyNSAxNi4zMDM4IDQuNDIzNzUgMTYuMjlDNS4yOSAxNi4yNzYyIDUuOTA4NzUgMTcuMDg3NSA2LjExNSAxNy40MTc1QzcuMTA1IDE5LjA4MTIgOC42ODYyNSAxOC42MTM4IDkuMzE4NzUgMTguMzI1QzkuNDE1IDE3LjYxIDkuNzAzNzUgMTcuMTI4NyAxMC4wMiAxNi44NTM3QzcuNTcyNSAxNi41Nzg3IDUuMDE1IDE1LjYzIDUuMDE1IDExLjQyMjVDNS4wMTUgMTAuMjI2MiA1LjQ0MTI1IDkuMjM2MjUgNi4xNDI1IDguNDY2MjVDNi4wMzI1IDguMTkxMjUgNS42NDc1IDcuMDYzNzUgNi4yNTI1IDUuNTUxMjVDNi4yNTI1IDUuNTUxMjUgNy4xNzM3NSA1LjI2MjUgOS4yNzc1IDYuNjc4NzVDMTAuMTU3NSA2LjQzMTI1IDExLjA5MjUgNi4zMDc1IDEyLjAyNzUgNi4zMDc1QzEyLjk2MjUgNi4zMDc1IDEzLjg5NzUgNi40MzEyNSAxNC43Nzc1IDYuNjc4NzVDMTYuODgxMyA1LjI0ODc1IDE3LjgwMjUgNS41NTEyNSAxNy44MDI1IDUuNTUxMjVDMTguNDA3NSA3LjA2Mzc1IDE4LjAyMjUgOC4xOTEyNSAxNy45MTI1IDguNDY2MjVDMTguNjEzOCA5LjIzNjI1IDE5LjA0IDEwLjIxMjUgMTkuMDQgMTEuNDIyNUMxOS4wNCAxNS42NDM4IDE2LjQ2ODggMTYuNTc4NyAxNC4wMjEzIDE2Ljg1MzdDMTQuNDIgMTcuMTk3NSAxNC43NjM4IDE3Ljg1NzUgMTQuNzYzOCAxOC44ODg4QzE0Ljc2MzggMjAuMzYgMTQuNzUgMjEuNTQyNSAxNC43NSAyMS45MTM3QzE0Ljc1IDIyLjIwMjUgMTQuOTU2MyAyMi41NDYyIDE1LjUwNjMgMjIuNDM2M0MxOS44NTEyIDIwLjk3ODggMjMgMTYuODUzOCAyMyAxMkMyMyA1LjkyMjUgMTguMDc3NSAxIDEyIDFaIiBmaWxsPSIjMUIxRjIzIi8+CjwvZz4KPC9zdmc+Cg=="
+            alt="github"
+          />
+          Github
+        </IconButton>
+      );
+    },
+  });
+});

.storybook/main.ts

@@ -14,6 +14,8 @@ const config: StorybookConfig = {
     '@storybook/addon-a11y',
     '@storybook/addon-coverage',
     './tokensAddons/register.tsx',
+    './figmaAddon/register.tsx',
+    './githubAddon/register.tsx',
   ],
   framework: {
     name: '@storybook/react-vite',

package.json

@@ -1,8 +1,20 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
-  "author": "Kubit",
+  "author": {
+    "name": "Kubit",
+    "email": "kubit@opendigitalservices.com",
+    "url": "https://www.kubit-ui.com/",
+    "organization": "Kubit",
+    "organizationUrl": "https://www.kubit-ui.com/",
+    "role": "Developer",
+    "roleUrl": "https://www.kubit-ui.com/",
+    "social": {
+      "twitter": "https://twitter.com/kubit_ui",
+      "github": "https://github.com/kubit-ui/kubit-react-components"
+    }
+  },
   "private": false,
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -59,7 +71,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/kubit-ui/kubit-react-components"
+    "url": "git+https://github.com/kubit-ui/kubit-react-components.git"
   },
   "sideEffects": false,
   "license": "Apache-2.0",
@@ -96,6 +108,7 @@
     "@typescript-eslint/parser": "^7.1.0",
     "@vitejs/plugin-react": "^4.2.1",
     "babel-jest": "^29.7.0",
+    "chromatic": "^11.2.0",
     "cpy-cli": "^5.0.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -150,5 +163,9 @@
     "wrap-ansi": "^7.0.0",
     "@typescript-eslint/utils": "6.13.0",
     "@babel/highlight": "7.24.1 "
-  }
+  },
+  "bugs": {
+    "url": "https://github.com/kubit-ui/kubit-react-components/issues"
+  },
+  "homepage": "https://www.kubit-ui.com/"
 }

src/components/accordion/stories/accordion.stories.tsx

@@ -17,6 +17,12 @@ const meta = {
   component: AccordionStory,
   tags: ['autodocs'],
   argTypes: argtypes(variantsObject, themeSelected),
+  parameters: {
+    githubUrl:
+      'https://github.com/kubit-ui/kubit-react-components/tree/main/src/components/accordion',
+    figmaUrl:
+      'https://www.figma.com/file/EYQkbENTFO5r8muvXlPoOy/Kubit-v.1.0.0?type=design&node-id=3922-22906',
+  },
 } satisfies Meta<typeof AccordionStory>;
 
 export default meta;

src/components/actionBottomSheet/stories/actionBottomSheet.stories.tsx

@@ -16,6 +16,10 @@ const meta = {
   component: Story,
   parameters: {
     layout: 'centered',
+    githubUrl:
+      'https://github.com/kubit-ui/kubit-react-components/tree/main/src/components/actionBottomSheet',
+    figmaUrl:
+      'https://www.figma.com/file/EYQkbENTFO5r8muvXlPoOy/Kubit-v.1.0.0?type=design&node-id=3922-22902',
   },
   tags: ['autodocs'],
   argTypes: argtypes(variantsObject, themeSelected),

src/components/avatar/stories/avatar.stories.tsx

@@ -15,6 +15,9 @@ const meta = {
   component: AvatarStory,
   parameters: {
     layout: 'centered',
+    githubUrl: 'https://github.com/kubit-ui/kubit-react-components/tree/main/src/components/avatar',
+    figmaUrl:
+      'https://www.figma.com/file/EYQkbENTFO5r8muvXlPoOy/Kubit-v.1.0.0?type=design&node-id=3928-34082&mode=dev',
   },
   tags: ['autodocs'],
   argTypes: argtypes(variantsObject, themeSelected),

src/components/backToTop/__tests__/backToTop.test.tsx

@@ -35,12 +35,13 @@ describe('BackToTop component', () => {
 
   test('When scrollY is >= visibilityScrollOffset the button will be shown', () => {
     const scrollToMock = jest.fn();
+    const ref = React.createRef<HTMLButtonElement>();
     jest.spyOn(window, 'scrollTo').mockImplementation(scrollToMock);
     window.scrollY = 2;
-
+    const ref = React.createRef<HTMLButtonElement>();
     renderProvider(
       <div>
-        <BackToTop {...mockProps} />
+        <BackToTop {...mockProps} ref={ref} />
         <footer>footer</footer>
       </div>
     );

src/components/backToTop/stories/backToTop.stories.tsx

@@ -27,6 +27,10 @@ const meta = {
   component: Story,
   parameters: {
     layout: 'centered',
+    githubUrl:
+      'https://github.com/kubit-ui/kubit-react-components/tree/main/src/components/backToTop',
+    figmaUrl:
+      'https://www.figma.com/file/EYQkbENTFO5r8muvXlPoOy/Kubit-v.1.0.0?type=design&node-id=3922-9956&mode=dev',
   },
   tags: ['autodocs'],
   argTypes: argtypes(variantsObject, themeSelected),

src/components/breadcrumbs/stories/breadcrumbs.stories.tsx

@@ -15,6 +15,10 @@ const meta = {
   component: Story,
   parameters: {
     layout: 'centered',
+    githubUrl:
+      'https://github.com/kubit-ui/kubit-react-components/tree/main/src/components/breadcrumbs',
+    figmaUrl:
+      'https://www.figma.com/file/EYQkbENTFO5r8muvXlPoOy/Kubit-v.1.0.0?type=design&node-id=3942-37705',
   },
   tags: ['autodocs'],
   argTypes: argtypes(variantsObject, themeSelected),

src/components/button/stories/button.stories.tsx

@@ -15,6 +15,9 @@ const meta = {
   component: ButtonStory,
   parameters: {
     layout: 'centered',
+    githubUrl: 'https://github.com/kubit-ui/kubit-react-components/tree/main/src/components/button',
+    figmaUrl:
+      'https://www.figma.com/file/EYQkbENTFO5r8muvXlPoOy/Kubit-v.1.0.0?type=design&node-id=3922-9829',
   },
   tags: ['autodocs'],
   argTypes: argtypes(variantsObject, themeSelected),

src/components/calendar/stories/calendar.stories.tsx

@@ -15,6 +15,10 @@ const meta = {
   component: Story,
   parameters: {
     layout: 'centered',
+    githubUrl:
+      'https://github.com/kubit-ui/kubit-react-components/tree/main/src/components/calendar',
+    figmaUrl:
+      'https://www.figma.com/file/EYQkbENTFO5r8muvXlPoOy/Kubit-v.1.0.0?type=design&node-id=3922-29766',
   },
   tags: ['autodocs'],
   argTypes: argtypes(variantsObject, themeSelected),

src/components/carousel/carousel.styled.ts

@@ -54,7 +54,7 @@ export const CarouselContentStyled = styled.div<{
   left: 0;
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: stretch;
   > * {
     flex-shrink: 0;
   }

src/components/carousel/stories/carousel.stories.tsx

@@ -18,6 +18,12 @@ const meta = {
   component: Story,
   tags: ['autodocs'],
   argTypes: argtypes(variantsObject, themeSelected),
+  parameters: {
+    githubUrl:
+      'https://github.com/kubit-ui/kubit-react-components/tree/main/src/components/carousel',
+    figmaUrl:
+      'https://www.figma.com/file/EYQkbENTFO5r8muvXlPoOy/Kubit-v.1.0.0?type=design&node-id=3942-37713&mode=dev',
+  },
 } satisfies Meta<typeof Story>;
 
 export default meta;