From ba25115688268e06a0292ef1cbe2dd0e3ea30ac5 Mon Sep 17 00:00:00 2001
From: Victor Creed <victor@sovryn.app>
Date: Fri, 14 Oct 2022 15:58:19 +0300
Subject: [PATCH 01/14] feat(vertical-tabs): desktop component for vertical
 tabs

---
 .prettierignore                               |  4 +-
 package.json                                  |  2 +-
 packages/ui/.eslintrc.js                      |  6 ++
 packages/ui/.storybook/preview.js             |  2 +-
 packages/ui/.storybook/tailwind.css           |  6 +-
 packages/ui/src/1_atoms/Input/Input.test.tsx  |  1 +
 .../VerticalTabs/VerticalTabs.module.css      | 26 +++++
 .../VerticalTabs/VerticalTabs.stories.tsx     | 99 +++++++++++++++++++
 .../2_molecules/VerticalTabs/VerticalTabs.tsx | 97 ++++++++++++++++++
 .../VerticalTabs/VerticalTabs.types.ts        | 21 ++++
 .../components/VerticalTabItem.module.css     | 28 ++++++
 .../components/VerticalTabItem.tsx            | 44 +++++++++
 .../ui/src/2_molecules/VerticalTabs/index.tsx |  2 +
 .../ui/src/2_molecules/VerticalTabs/utils.ts  | 16 +++
 packages/ui/src/2_molecules/index.ts          |  1 +
 15 files changed, 351 insertions(+), 4 deletions(-)
 create mode 100644 packages/ui/.eslintrc.js
 create mode 100644 packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.module.css
 create mode 100644 packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx
 create mode 100644 packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.tsx
 create mode 100644 packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.types.ts
 create mode 100644 packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.module.css
 create mode 100644 packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.tsx
 create mode 100644 packages/ui/src/2_molecules/VerticalTabs/index.tsx
 create mode 100644 packages/ui/src/2_molecules/VerticalTabs/utils.ts

diff --git a/.prettierignore b/.prettierignore
index b09e36815..75c820fe5 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,4 +1,6 @@
 build/
 node_modules/
 package-lock.json
-yarn.lock
\ No newline at end of file
+yarn.lock
+**/build
+**/dist
diff --git a/package.json b/package.json
index ab3aeae7f..e20f30e85 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
   },
   "lint-staged": {
     "*.{js,ts,tsx}": [
-      "eslint --fix --max-warnings=0",
+      "eslint --fix --max-warnings=0 --ignore-pattern !packages/ui/.storybook",
       "prettier --write"
     ]
   },
diff --git a/packages/ui/.eslintrc.js b/packages/ui/.eslintrc.js
new file mode 100644
index 000000000..3fa25b218
--- /dev/null
+++ b/packages/ui/.eslintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  root: true,
+  // This tells ESLint to load the config from the package `eslint-config-custom`
+  extends: ['@sovryn/eslint-config-custom'],
+  ignorePatterns: ['build/', 'dist/'],
+};
diff --git a/packages/ui/.storybook/preview.js b/packages/ui/.storybook/preview.js
index 1a1bbca8f..2121a9ae5 100644
--- a/packages/ui/.storybook/preview.js
+++ b/packages/ui/.storybook/preview.js
@@ -46,7 +46,7 @@ export const parameters = {
       },
     })),
   },
-  layout: 'fullscreen',
+  layout: 'padded',
   options: {
     storySort: {
       order: [
diff --git a/packages/ui/.storybook/tailwind.css b/packages/ui/.storybook/tailwind.css
index 705b6d0dc..a3d4dd918 100644
--- a/packages/ui/.storybook/tailwind.css
+++ b/packages/ui/.storybook/tailwind.css
@@ -19,8 +19,12 @@
   }
 }
 
+.sb-main-fullscreen #root {
+  @apply h-screen;
+}
+
 .sb-show-main #root {
-  @apply relative block p-4;
+  @apply relative block;
 }
 
 .docs-story .innerZoomElementWrapper {
diff --git a/packages/ui/src/1_atoms/Input/Input.test.tsx b/packages/ui/src/1_atoms/Input/Input.test.tsx
index 877b8d207..2ba425742 100644
--- a/packages/ui/src/1_atoms/Input/Input.test.tsx
+++ b/packages/ui/src/1_atoms/Input/Input.test.tsx
@@ -1,4 +1,5 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+
 import React, { createRef } from 'react';
 
 import { Input } from './Input';
diff --git a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.module.css b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.module.css
new file mode 100644
index 000000000..4a7ca807a
--- /dev/null
+++ b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.module.css
@@ -0,0 +1,26 @@
+.container {
+  @apply w-full h-full flex flex-row justify-center items-start relative;
+}
+
+.aside {
+  @apply w-1/4 h-full bg-gray-80 p-[1.25rem] flex-shrink-0 flex-grow-0 w-[19.25rem] relative
+    flex flex-col justify-between items-start;
+}
+
+.header {
+  @apply pt-[2.875rem] pb-[4.5rem] w-full relative;
+}
+
+.footer {
+  @apply pt-[2.875rem] w-full relative;
+}
+
+.tabs {
+  @apply w-full flex flex-col justify-center items-center gap-y-[2.5rem];
+}
+
+.content {
+  @apply w-3/4 h-full p-[3.25rem] relative overflow-y-auto;
+  background-color: inherit;
+}
+
diff --git a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx
new file mode 100644
index 000000000..eba579c3d
--- /dev/null
+++ b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx
@@ -0,0 +1,99 @@
+import { Story } from '@storybook/react';
+
+import React, { ComponentProps, useReducer, useState } from 'react';
+
+import { Button, Heading } from '../../1_atoms';
+import { Dialog } from '../Dialog/Dialog';
+import { DialogSize } from '../Dialog/Dialog.types';
+import { VerticalTabs } from './VerticalTabs';
+
+export default {
+  title: 'Molecule/VerticalTabs',
+  component: VerticalTabs,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+const Template: Story<ComponentProps<typeof VerticalTabs>> = args => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  return (
+    <VerticalTabs
+      {...args}
+      selectedIndex={selectedIndex}
+      onChange={setSelectedIndex}
+    />
+  );
+};
+
+const DialogTemplate: Story<ComponentProps<typeof VerticalTabs>> = args => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [isDialogOpen, toggle] = useReducer(a => !a, true);
+  return (
+    <>
+      <Button onClick={toggle} text="Open Dialog" />
+      <Dialog isOpen={isDialogOpen} width={DialogSize.xl2}>
+        <VerticalTabs
+          {...args}
+          selectedIndex={selectedIndex}
+          onChange={setSelectedIndex}
+          footer={() => (
+            <button onClick={toggle} className="text-primary-20 text-xs">
+              Close
+            </button>
+          )}
+        />
+      </Dialog>
+    </>
+  );
+};
+
+export const Basic = Template.bind({});
+Basic.args = {
+  items: [
+    { label: 'Tab 1', content: 'Tab 1 Content' },
+    { label: 'Tab 2', content: 'Tab 2 Content' },
+    {
+      label: 'Long List',
+      content: (
+        <div>
+          <Heading>Long List</Heading>
+          <ol>
+            {new Array(100).fill('Row').map((item, index) => (
+              <li key={index}>{item}</li>
+            ))}
+          </ol>
+        </div>
+      ),
+    },
+  ],
+  header: props => (
+    <Heading>Selected: {props.items[props.selectedIndex].label}</Heading>
+  ),
+  footer: () => <div>Footer</div>,
+};
+
+export const InDialog = DialogTemplate.bind({});
+InDialog.args = {
+  items: [
+    {
+      label: 'Hardware Wallet',
+      infoText: 'Select the hardware wallet you want to connect',
+      content: 'Content of HW tab',
+    },
+    {
+      label: 'Browser Wallet',
+      infoText: 'Select the web3 wallet you want to connect',
+      content: 'Tab 2 Content',
+    },
+    {
+      label: "Don't have a wallet",
+      infoText: 'Read the following instructions',
+      content: 'Tab 3 Content',
+    },
+  ],
+  header: () => <Heading>Connect Wallet</Heading>,
+  tabsClassName: 'rounded-l-lg',
+  className: 'rounded-lg',
+  tabIndicatorColor: 'rgba(13, 13, 15)',
+};
diff --git a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.tsx b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.tsx
new file mode 100644
index 000000000..86e135796
--- /dev/null
+++ b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.tsx
@@ -0,0 +1,97 @@
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import classNames from 'classnames';
+
+import styles from './VerticalTabs.module.css';
+import { VerticalTabsProps } from './VerticalTabs.types';
+import { VerticalTabItem } from './components/VerticalTabItem';
+import { findParentBackgroundColorAndElement } from './utils';
+
+export const VerticalTabs: FC<VerticalTabsProps> = ({
+  selectedIndex = 0,
+  ...props
+}) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const maybeRenderHeader = useMemo(() => {
+    if (props.header) {
+      return (
+        <div className={styles.header}>
+          {props.header({ ...props, selectedIndex })}
+        </div>
+      );
+    }
+    return null;
+  }, [props, selectedIndex]);
+
+  const maybeRenderFooter = useMemo(() => {
+    if (props.footer) {
+      return (
+        <div className={styles.footer}>
+          {props.footer({ ...props, selectedIndex })}
+        </div>
+      );
+    }
+    return null;
+  }, [props, selectedIndex]);
+
+  const renderContent = useMemo(
+    () => props.items[selectedIndex].content,
+    [selectedIndex, props.items],
+  );
+
+  const handleTabClick = useCallback(
+    (index: number) => () => {
+      props.onChange?.(index);
+    },
+    [props],
+  );
+
+  const [detectedIndicatorBgColor, setDetectedIndicatorBgColor] =
+    useState('transparent');
+
+  const indicatorBgColor = useMemo(
+    () => props.tabIndicatorColor || detectedIndicatorBgColor,
+    [props.tabIndicatorColor, detectedIndicatorBgColor],
+  );
+
+  useEffect(() => {
+    if (contentRef.current && window !== undefined) {
+      if (
+        getComputedStyle(contentRef.current).display &&
+        !props.tabIndicatorColor
+      ) {
+        const [bgColor] = findParentBackgroundColorAndElement(
+          contentRef.current,
+        );
+        setDetectedIndicatorBgColor(bgColor);
+      }
+    }
+  }, [props.tabIndicatorColor]);
+
+  return (
+    <section className={classNames(styles.container, props.className)}>
+      <aside className={classNames(styles.aside, props.tabsClassName)}>
+        {maybeRenderHeader}
+        <div className={styles.tabs}>
+          {props.items.map((item, index) => (
+            <VerticalTabItem
+              key={index}
+              active={index === selectedIndex}
+              onClick={handleTabClick(index)}
+              activeIndicatorBgColor={indicatorBgColor}
+              {...item}
+            />
+          ))}
+        </div>
+        {maybeRenderFooter}
+      </aside>
+      <div
+        className={classNames(styles.content, props.contentClassName)}
+        ref={contentRef}
+      >
+        {renderContent}
+      </div>
+    </section>
+  );
+};
diff --git a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.types.ts b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.types.ts
new file mode 100644
index 000000000..c55f96348
--- /dev/null
+++ b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.types.ts
@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+export type VerticalTabsProps = {
+  items: VerticalTabsItemProps[];
+  selectedIndex: number;
+  tabIndicatorColor?: string;
+  className?: string;
+  tabsClassName?: string;
+  contentClassName?: string;
+  onChange?: (index: number) => void;
+  header?: (props: VerticalTabsProps) => ReactNode;
+  footer?: (props: VerticalTabsProps) => ReactNode;
+};
+
+export type VerticalTabsItemProps = {
+  label: ReactNode;
+  content: ReactNode;
+  infoText?: ReactNode;
+  disabled?: boolean;
+  dataActionId?: string;
+};
diff --git a/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.module.css b/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.module.css
new file mode 100644
index 000000000..a35312d48
--- /dev/null
+++ b/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.module.css
@@ -0,0 +1,28 @@
+.button {
+  @apply w-full block text-left text-gray-10 text-opacity-50 font-medium font-roboto;
+  &.active {
+    @apply text-opacity-100;
+  }
+
+  & p {
+    @apply text-base leading-[1.171875rem];
+
+  }
+  
+  & small {
+    @apply block text-xs leading-[0.87875rem] mt-2;
+  }
+}
+
+
+.activeButtonIndicator {
+  --indicator-bg-color: #000;
+  @apply absolute right-0 w-0 h-0;
+  transform: translate(0, -1.7rem);
+  border-style: solid;
+  border-width: 0.96875rem 1.28125rem 0.96875rem 0;
+  border-color: transparent var(--indicator-bg-color) transparent transparent;
+  &.withInfoText {
+    transform: translate(0, -2.5625rem);
+  }
+}
diff --git a/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.tsx b/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.tsx
new file mode 100644
index 000000000..d5ee2c511
--- /dev/null
+++ b/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.tsx
@@ -0,0 +1,44 @@
+import { FC } from 'react';
+
+import classNames from 'classnames';
+
+import { VerticalTabsItemProps } from '../VerticalTabs.types';
+import styles from './VerticalTabItem.module.css';
+
+export type VerticalTabsItemButtonProps = VerticalTabsItemProps & {
+  active: boolean;
+  activeIndicatorBgColor: string;
+  onClick: () => void;
+};
+
+export const VerticalTabItem: FC<VerticalTabsItemButtonProps> = ({
+  disabled,
+  label,
+  infoText,
+  active,
+  dataActionId,
+  onClick,
+  activeIndicatorBgColor,
+}) => {
+  return (
+    <button
+      className={classNames(styles.button, { [styles.active]: active })}
+      disabled={disabled}
+      data-action-id={dataActionId}
+      onClick={onClick}
+    >
+      <p className={styles.label}>{label}</p>
+      {infoText && <small className={styles.info}>{infoText}</small>}
+      {active && (
+        <div
+          className={classNames(styles.activeButtonIndicator, {
+            [styles.withInfoText]: infoText,
+          })}
+          style={{
+            borderColor: `transparent ${activeIndicatorBgColor} transparent transparent`,
+          }}
+        />
+      )}
+    </button>
+  );
+};
diff --git a/packages/ui/src/2_molecules/VerticalTabs/index.tsx b/packages/ui/src/2_molecules/VerticalTabs/index.tsx
new file mode 100644
index 000000000..ed55055a1
--- /dev/null
+++ b/packages/ui/src/2_molecules/VerticalTabs/index.tsx
@@ -0,0 +1,2 @@
+export * from './VerticalTabs';
+export * from './VerticalTabs.types';
diff --git a/packages/ui/src/2_molecules/VerticalTabs/utils.ts b/packages/ui/src/2_molecules/VerticalTabs/utils.ts
new file mode 100644
index 000000000..eb66d374d
--- /dev/null
+++ b/packages/ui/src/2_molecules/VerticalTabs/utils.ts
@@ -0,0 +1,16 @@
+const IGNORE_COLORS = ['rgba(0, 0, 0, 0)', 'transparent'];
+
+export const findParentBackgroundColorAndElement = (
+  element: HTMLElement,
+): [string, Element] => {
+  const bg = window
+    .getComputedStyle(element)
+    .getPropertyValue('background-color');
+  if (bg && !IGNORE_COLORS.includes(bg)) {
+    return [bg, element];
+  }
+  if (element.parentElement) {
+    return findParentBackgroundColorAndElement(element.parentElement);
+  }
+  return ['transparent', window.document.body];
+};
diff --git a/packages/ui/src/2_molecules/index.ts b/packages/ui/src/2_molecules/index.ts
index 363aafd40..0bb51d0a2 100644
--- a/packages/ui/src/2_molecules/index.ts
+++ b/packages/ui/src/2_molecules/index.ts
@@ -4,3 +4,4 @@ export * from './Dropdown/Dropdown';
 export * from './Dropdown/Dropdown.types';
 export * from './Menu/Menu';
 export * from './WalletIdentity/WalletIdentity';
+export * from './VerticalTabs';

From 97578a8cc1e615232c1dbfb4cdaddf0b1b9325ab Mon Sep 17 00:00:00 2001
From: Victor Creed <victor@sovryn.app>
Date: Mon, 17 Oct 2022 13:57:58 +0300
Subject: [PATCH 02/14] feat(vertical-tabs): change indicator

---
 .../VerticalTabs/VerticalTabs.module.css      |  7 +--
 .../VerticalTabs/VerticalTabs.stories.tsx     | 11 ++--
 .../2_molecules/VerticalTabs/VerticalTabs.tsx | 53 +++++++++++--------
 .../VerticalTabs/VerticalTabs.types.ts        |  1 -
 .../components/VerticalTabItem.tsx            | 13 +----
 .../ui/src/2_molecules/VerticalTabs/utils.ts  | 16 ------
 6 files changed, 45 insertions(+), 56 deletions(-)
 delete mode 100644 packages/ui/src/2_molecules/VerticalTabs/utils.ts

diff --git a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.module.css b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.module.css
index 4a7ca807a..807447906 100644
--- a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.module.css
+++ b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.module.css
@@ -1,10 +1,11 @@
 .container {
-  @apply w-full h-full flex flex-row justify-center items-start relative;
+  @apply w-full min-h-full flex flex-row justify-center items-start relative;
 }
 
 .aside {
-  @apply w-1/4 h-full bg-gray-80 p-[1.25rem] flex-shrink-0 flex-grow-0 w-[19.25rem] relative
+  @apply h-full min-h-full bg-gray-80 p-[1.25rem] flex-shrink-0 flex-grow-0 w-[19.25rem] relative
     flex flex-col justify-between items-start;
+  transition: clip-path 0.3s ease-in-out;
 }
 
 .header {
@@ -20,7 +21,7 @@
 }
 
 .content {
-  @apply w-3/4 h-full p-[3.25rem] relative overflow-y-auto;
+  @apply w-full h-full p-[3.25rem] relative overflow-y-auto;
   background-color: inherit;
 }
 
diff --git a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx
index eba579c3d..a3e53726f 100644
--- a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx
+++ b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx
@@ -1,6 +1,6 @@
 import { Story } from '@storybook/react';
 
-import React, { ComponentProps, useReducer, useState } from 'react';
+import { ComponentProps, useReducer, useState } from 'react';
 
 import { Button, Heading } from '../../1_atoms';
 import { Dialog } from '../Dialog/Dialog';
@@ -28,7 +28,7 @@ const Template: Story<ComponentProps<typeof VerticalTabs>> = args => {
 
 const DialogTemplate: Story<ComponentProps<typeof VerticalTabs>> = args => {
   const [selectedIndex, setSelectedIndex] = useState(0);
-  const [isDialogOpen, toggle] = useReducer(a => !a, true);
+  const [isDialogOpen, toggle] = useReducer(a => !a, false);
   return (
     <>
       <Button onClick={toggle} text="Open Dialog" />
@@ -53,8 +53,10 @@ Basic.args = {
   items: [
     { label: 'Tab 1', content: 'Tab 1 Content' },
     { label: 'Tab 2', content: 'Tab 2 Content' },
+    { label: 'Tab 3', content: 'Tab 3 Content' },
     {
-      label: 'Long List',
+      label: 'Tab4 ',
+      infoText: 'Example with long content',
       content: (
         <div>
           <Heading>Long List</Heading>
@@ -97,3 +99,6 @@ InDialog.args = {
   className: 'rounded-lg',
   tabIndicatorColor: 'rgba(13, 13, 15)',
 };
+InDialog.parameters = {
+  layout: 'centered',
+};
diff --git a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.tsx b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.tsx
index 86e135796..e47ae1db4 100644
--- a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.tsx
+++ b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.tsx
@@ -1,16 +1,18 @@
-import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FC, useCallback, useEffect, useMemo, useRef } from 'react';
 
 import classNames from 'classnames';
 
 import styles from './VerticalTabs.module.css';
 import { VerticalTabsProps } from './VerticalTabs.types';
 import { VerticalTabItem } from './components/VerticalTabItem';
-import { findParentBackgroundColorAndElement } from './utils';
+
+const INDICATOR_SIZE = 16;
 
 export const VerticalTabs: FC<VerticalTabsProps> = ({
   selectedIndex = 0,
   ...props
 }) => {
+  const sidebarRef = useRef<HTMLElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
 
   const maybeRenderHeader = useMemo(() => {
@@ -47,31 +49,41 @@ export const VerticalTabs: FC<VerticalTabsProps> = ({
     [props],
   );
 
-  const [detectedIndicatorBgColor, setDetectedIndicatorBgColor] =
-    useState('transparent');
-
-  const indicatorBgColor = useMemo(
-    () => props.tabIndicatorColor || detectedIndicatorBgColor,
-    [props.tabIndicatorColor, detectedIndicatorBgColor],
-  );
+  const moveIndicator = useCallback(() => {
+    if (sidebarRef.current) {
+      const sidebarRect = sidebarRef.current.getBoundingClientRect();
+      const tabRect = sidebarRef.current
+        ?.querySelector('[data-active=true]')
+        ?.getBoundingClientRect();
+      if (tabRect) {
+        const top =
+          tabRect.top -
+          INDICATOR_SIZE / 2 +
+          tabRect.height / 4 -
+          sidebarRect.top;
+        const middle = top + INDICATOR_SIZE;
+        const bottom = middle + INDICATOR_SIZE;
+        const left = sidebarRect.width - INDICATOR_SIZE;
 
-  useEffect(() => {
-    if (contentRef.current && window !== undefined) {
-      if (
-        getComputedStyle(contentRef.current).display &&
-        !props.tabIndicatorColor
-      ) {
-        const [bgColor] = findParentBackgroundColorAndElement(
-          contentRef.current,
+        sidebarRef.current.style.setProperty(
+          'clip-path',
+          `polygon(0 0, 100% 0, 100% ${top}px, ${left}px ${middle}px, 100% ${bottom}px, 100% 100%, 0 100%)`,
         );
-        setDetectedIndicatorBgColor(bgColor);
       }
     }
-  }, [props.tabIndicatorColor]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedIndex, props.items]);
+
+  useEffect(() => {
+    moveIndicator();
+  }, [moveIndicator]);
 
   return (
     <section className={classNames(styles.container, props.className)}>
-      <aside className={classNames(styles.aside, props.tabsClassName)}>
+      <aside
+        className={classNames(styles.aside, props.tabsClassName)}
+        ref={sidebarRef}
+      >
         {maybeRenderHeader}
         <div className={styles.tabs}>
           {props.items.map((item, index) => (
@@ -79,7 +91,6 @@ export const VerticalTabs: FC<VerticalTabsProps> = ({
               key={index}
               active={index === selectedIndex}
               onClick={handleTabClick(index)}
-              activeIndicatorBgColor={indicatorBgColor}
               {...item}
             />
           ))}
diff --git a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.types.ts b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.types.ts
index c55f96348..e5042b387 100644
--- a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.types.ts
+++ b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.types.ts
@@ -3,7 +3,6 @@ import { ReactNode } from 'react';
 export type VerticalTabsProps = {
   items: VerticalTabsItemProps[];
   selectedIndex: number;
-  tabIndicatorColor?: string;
   className?: string;
   tabsClassName?: string;
   contentClassName?: string;
diff --git a/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.tsx b/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.tsx
index d5ee2c511..52b65887d 100644
--- a/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.tsx
+++ b/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.tsx
@@ -7,7 +7,6 @@ import styles from './VerticalTabItem.module.css';
 
 export type VerticalTabsItemButtonProps = VerticalTabsItemProps & {
   active: boolean;
-  activeIndicatorBgColor: string;
   onClick: () => void;
 };
 
@@ -18,27 +17,17 @@ export const VerticalTabItem: FC<VerticalTabsItemButtonProps> = ({
   active,
   dataActionId,
   onClick,
-  activeIndicatorBgColor,
 }) => {
   return (
     <button
       className={classNames(styles.button, { [styles.active]: active })}
       disabled={disabled}
       data-action-id={dataActionId}
+      data-active={active}
       onClick={onClick}
     >
       <p className={styles.label}>{label}</p>
       {infoText && <small className={styles.info}>{infoText}</small>}
-      {active && (
-        <div
-          className={classNames(styles.activeButtonIndicator, {
-            [styles.withInfoText]: infoText,
-          })}
-          style={{
-            borderColor: `transparent ${activeIndicatorBgColor} transparent transparent`,
-          }}
-        />
-      )}
     </button>
   );
 };
diff --git a/packages/ui/src/2_molecules/VerticalTabs/utils.ts b/packages/ui/src/2_molecules/VerticalTabs/utils.ts
deleted file mode 100644
index eb66d374d..000000000
--- a/packages/ui/src/2_molecules/VerticalTabs/utils.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-const IGNORE_COLORS = ['rgba(0, 0, 0, 0)', 'transparent'];
-
-export const findParentBackgroundColorAndElement = (
-  element: HTMLElement,
-): [string, Element] => {
-  const bg = window
-    .getComputedStyle(element)
-    .getPropertyValue('background-color');
-  if (bg && !IGNORE_COLORS.includes(bg)) {
-    return [bg, element];
-  }
-  if (element.parentElement) {
-    return findParentBackgroundColorAndElement(element.parentElement);
-  }
-  return ['transparent', window.document.body];
-};

From 119405fa966046e8562edba01d3a6ad4f8f0aee5 Mon Sep 17 00:00:00 2001
From: Victor Creed <victor@sovryn.app>
Date: Mon, 17 Oct 2022 14:53:39 +0300
Subject: [PATCH 03/14] feat(vertical-tabs): add test cases

---
 .../VerticalTabs/VerticalTabs.stories.tsx     |   1 -
 .../VerticalTabs/VerticalTabs.test.tsx        | 160 ++++++++++++++++++
 .../2_molecules/VerticalTabs/VerticalTabs.tsx |   2 +-
 .../VerticalTabs/VerticalTabs.types.ts        |   9 +-
 .../components/VerticalTabItem.tsx            |   9 +-
 5 files changed, 170 insertions(+), 11 deletions(-)
 create mode 100644 packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.test.tsx

diff --git a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx
index a3e53726f..5615de976 100644
--- a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx
+++ b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx
@@ -97,7 +97,6 @@ InDialog.args = {
   header: () => <Heading>Connect Wallet</Heading>,
   tabsClassName: 'rounded-l-lg',
   className: 'rounded-lg',
-  tabIndicatorColor: 'rgba(13, 13, 15)',
 };
 InDialog.parameters = {
   layout: 'centered',
diff --git a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.test.tsx b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.test.tsx
new file mode 100644
index 000000000..098d9fcfd
--- /dev/null
+++ b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.test.tsx
@@ -0,0 +1,160 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import React, { useState } from 'react';
+
+import { VerticalTabs } from './VerticalTabs';
+import { VerticalTabsItem } from './VerticalTabs.types';
+
+const INITIAL_TAB = 2;
+const DISABLED_TAB = 1;
+const TAB_ITEMS: VerticalTabsItem[] = [
+  {
+    label: 'Tab 1',
+    infoText: 'Info text 1',
+    content: 'Content 1',
+  },
+  {
+    label: 'Tab 2',
+    disabled: true,
+    content: 'Content 2',
+  },
+  {
+    label: 'Tab 3',
+    content: 'Content 3',
+  },
+];
+
+const TestComponent = () => {
+  const [index, setIndex] = useState(INITIAL_TAB);
+  return (
+    <VerticalTabs
+      items={TAB_ITEMS}
+      selectedIndex={index}
+      onChange={setIndex}
+      header={() => <h1>This is header</h1>}
+      footer={() => <p>This is footer</p>}
+    />
+  );
+};
+
+describe('VerticalTabs', () => {
+  it('renders all of the tabs', () => {
+    const { getByText } = render(<TestComponent />);
+
+    TAB_ITEMS.forEach(item => {
+      expect(getByText(item.label as string)).toBeInTheDocument();
+    });
+  });
+
+  it('renders initial content', () => {
+    const { getByText } = render(<TestComponent />);
+    expect(
+      getByText(TAB_ITEMS[INITIAL_TAB].content as string),
+    ).toBeInTheDocument();
+  });
+
+  it('renders header', () => {
+    const { getByText } = render(<TestComponent />);
+    expect(getByText('This is header')).toBeInTheDocument();
+  });
+
+  it('renders footer', () => {
+    const { getByText } = render(<TestComponent />);
+    expect(getByText('This is footer')).toBeInTheDocument();
+  });
+
+  it('does not render non selected tab content', () => {
+    const { getByText } = render(<TestComponent />);
+    expect(() => getByText(TAB_ITEMS[0].content as string)).toThrow();
+  });
+
+  it('switches tab content when clicked', () => {
+    const { getByText } = render(<TestComponent />);
+
+    userEvent.click(getByText(TAB_ITEMS[0].label as string));
+    expect(getByText(TAB_ITEMS[0].content as string)).toBeInTheDocument();
+  });
+
+  it('does not switch to content of disabled tab', () => {
+    const { getByText } = render(<TestComponent />);
+
+    userEvent.click(getByText(TAB_ITEMS[DISABLED_TAB].label as string));
+    expect(
+      getByText(TAB_ITEMS[INITIAL_TAB].content as string),
+    ).toBeInTheDocument();
+    expect(() =>
+      getByText(TAB_ITEMS[DISABLED_TAB].content as string),
+    ).toThrow();
+  });
+
+  it('triggers onChange callback when tab item is clicked', () => {
+    const mockFunction = jest.fn();
+
+    const { getByText } = render(
+      <VerticalTabs
+        items={TAB_ITEMS}
+        selectedIndex={0}
+        onChange={mockFunction}
+      />,
+    );
+
+    userEvent.click(getByText(TAB_ITEMS[0].label as string));
+    expect(mockFunction).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not trigger onChange callback when disabled tab item is clicked', () => {
+    const mockFunction = jest.fn();
+
+    const { getByText } = render(
+      <VerticalTabs
+        items={TAB_ITEMS}
+        selectedIndex={0}
+        onChange={mockFunction}
+      />,
+    );
+
+    userEvent.click(getByText(TAB_ITEMS[DISABLED_TAB].label as string));
+    expect(mockFunction).toHaveBeenCalledTimes(0);
+  });
+
+  it('adds className to vertical tabs root wrapper', () => {
+    const { container } = render(
+      <VerticalTabs
+        items={TAB_ITEMS}
+        selectedIndex={0}
+        className="test-class"
+      />,
+    );
+    // adding "container" to make sure correct element is found
+    expect(container.firstChild).toHaveClass('container test-class');
+  });
+
+  it('adds className to tab list wrapper', () => {
+    const { container } = render(
+      <VerticalTabs
+        items={TAB_ITEMS}
+        selectedIndex={0}
+        tabsClassName="test-class"
+      />,
+    );
+
+    // adding "aside" to make sure correct element is found
+    expect(container.firstChild?.childNodes[0]).toHaveClass('aside test-class');
+  });
+
+  it('adds className to tab content wrapper', () => {
+    const { container } = render(
+      <VerticalTabs
+        items={TAB_ITEMS}
+        selectedIndex={0}
+        contentClassName="test-class"
+      />,
+    );
+
+    // adding "content" to make sure correct element is found
+    expect(container.firstChild?.childNodes[1]).toHaveClass(
+      'content test-class',
+    );
+  });
+});
diff --git a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.tsx b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.tsx
index e47ae1db4..56a646223 100644
--- a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.tsx
+++ b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.tsx
@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useRef } from 'react';
 
 import classNames from 'classnames';
 
diff --git a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.types.ts b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.types.ts
index e5042b387..cf7351062 100644
--- a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.types.ts
+++ b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.types.ts
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 
 export type VerticalTabsProps = {
-  items: VerticalTabsItemProps[];
+  items: VerticalTabsItem[];
   selectedIndex: number;
   className?: string;
   tabsClassName?: string;
@@ -11,10 +11,15 @@ export type VerticalTabsProps = {
   footer?: (props: VerticalTabsProps) => ReactNode;
 };
 
-export type VerticalTabsItemProps = {
+export type VerticalTabsItem = {
   label: ReactNode;
   content: ReactNode;
   infoText?: ReactNode;
   disabled?: boolean;
   dataActionId?: string;
 };
+
+export type VerticalTabsItemButtonProps = VerticalTabsItem & {
+  active: boolean;
+  onClick: () => void;
+};
diff --git a/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.tsx b/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.tsx
index 52b65887d..dfde0c02e 100644
--- a/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.tsx
+++ b/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.tsx
@@ -1,15 +1,10 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 
 import classNames from 'classnames';
 
-import { VerticalTabsItemProps } from '../VerticalTabs.types';
+import { VerticalTabsItemButtonProps } from '../VerticalTabs.types';
 import styles from './VerticalTabItem.module.css';
 
-export type VerticalTabsItemButtonProps = VerticalTabsItemProps & {
-  active: boolean;
-  onClick: () => void;
-};
-
 export const VerticalTabItem: FC<VerticalTabsItemButtonProps> = ({
   disabled,
   label,

From c34a66a4b9f8a3dfeb55c102062bb6d89a49d6ba Mon Sep 17 00:00:00 2001
From: soulBit <its.soulBit@gmail.com>
Date: Mon, 17 Oct 2022 16:02:15 +0100
Subject: [PATCH 04/14] chore: move Tabs to molecules and update layout id
 (#31)

---
 .../Tabs/Tabs.module.css                      |  0
 .../Tabs/Tabs.stories.tsx                     | 22 +++++++++----------
 .../Tabs/Tabs.test.tsx                        | 14 +++++++-----
 .../{1_atoms => 2_molecules}/Tabs/Tabs.tsx    |  6 ++---
 .../Tabs/Tabs.types.ts                        |  0
 .../Tabs/components/Tab/Tab.module.css        |  0
 .../Tabs/components/Tab/Tab.tsx               |  6 ++---
 packages/ui/src/2_molecules/index.ts          |  1 +
 8 files changed, 26 insertions(+), 23 deletions(-)
 rename packages/ui/src/{1_atoms => 2_molecules}/Tabs/Tabs.module.css (100%)
 rename packages/ui/src/{1_atoms => 2_molecules}/Tabs/Tabs.stories.tsx (82%)
 rename packages/ui/src/{1_atoms => 2_molecules}/Tabs/Tabs.test.tsx (71%)
 rename packages/ui/src/{1_atoms => 2_molecules}/Tabs/Tabs.tsx (94%)
 rename packages/ui/src/{1_atoms => 2_molecules}/Tabs/Tabs.types.ts (100%)
 rename packages/ui/src/{1_atoms => 2_molecules}/Tabs/components/Tab/Tab.module.css (100%)
 rename packages/ui/src/{1_atoms => 2_molecules}/Tabs/components/Tab/Tab.tsx (92%)

diff --git a/packages/ui/src/1_atoms/Tabs/Tabs.module.css b/packages/ui/src/2_molecules/Tabs/Tabs.module.css
similarity index 100%
rename from packages/ui/src/1_atoms/Tabs/Tabs.module.css
rename to packages/ui/src/2_molecules/Tabs/Tabs.module.css
diff --git a/packages/ui/src/1_atoms/Tabs/Tabs.stories.tsx b/packages/ui/src/2_molecules/Tabs/Tabs.stories.tsx
similarity index 82%
rename from packages/ui/src/1_atoms/Tabs/Tabs.stories.tsx
rename to packages/ui/src/2_molecules/Tabs/Tabs.stories.tsx
index bdf68c7d8..efccc8720 100644
--- a/packages/ui/src/1_atoms/Tabs/Tabs.stories.tsx
+++ b/packages/ui/src/2_molecules/Tabs/Tabs.stories.tsx
@@ -6,7 +6,7 @@ import { Tabs } from './Tabs';
 import { TabSize, TabType } from './Tabs.types';
 
 export default {
-  title: 'Atoms/Tabs',
+  title: 'Molecule/Tabs',
   component: Tabs,
 };
 
@@ -15,33 +15,33 @@ const Template: Story<ComponentProps<typeof Tabs>> = args => {
   return <Tabs {...args} onChange={setIndex} index={index} />;
 };
 
-export const Primary = Template.bind();
+export const Primary = Template.bind({});
 Primary.args = {
   items: [
     {
       label: 'Default',
       content: <div>Default</div>,
       activeClassName: 'border-t-primary-30',
-      dataActionId: 'default',
+      dataLayoutId: 'default',
     },
     {
       label: 'Buy',
       content: <div>Buy</div>,
       activeClassName: 'border-t-positive',
-      dataActionId: 'buy',
+      dataLayoutId: 'buy',
     },
     {
       label: 'Sell',
       content: <div>Sell</div>,
       activeClassName: 'border-t-negative',
-      dataActionId: 'sell',
+      dataLayoutId: 'sell',
     },
     {
       label: 'Disabled',
       content: <div>Disabled</div>,
       disabled: true,
       activeClassName: '',
-      dataActionId: 'disabled',
+      dataLayoutId: 'disabled',
     },
   ],
   index: 0,
@@ -51,33 +51,33 @@ Primary.args = {
   type: TabType.primary,
 };
 
-export const Secondary = Template.bind();
+export const Secondary = Template.bind({});
 Secondary.args = {
   items: [
     {
       label: 'Default',
       content: <div>Default</div>,
       activeClassName: 'text-primary-20',
-      dataActionId: 'default',
+      dataLayoutId: 'default',
     },
     {
       label: 'Buy',
       content: <div>Buy</div>,
       activeClassName: 'text-positive',
-      dataActionId: 'buy',
+      dataLayoutId: 'buy',
     },
     {
       label: 'Sell',
       content: <div>Sell</div>,
       activeClassName: 'text-negative',
-      dataActionId: 'sell',
+      dataLayoutId: 'sell',
     },
     {
       label: 'Disabled',
       content: <div>Disabled</div>,
       disabled: true,
       activeClassName: '',
-      dataActionId: 'disabled',
+      dataLayoutId: 'disabled',
     },
   ],
   index: 0,
diff --git a/packages/ui/src/1_atoms/Tabs/Tabs.test.tsx b/packages/ui/src/2_molecules/Tabs/Tabs.test.tsx
similarity index 71%
rename from packages/ui/src/1_atoms/Tabs/Tabs.test.tsx
rename to packages/ui/src/2_molecules/Tabs/Tabs.test.tsx
index cedf3f29c..beb21b93e 100644
--- a/packages/ui/src/1_atoms/Tabs/Tabs.test.tsx
+++ b/packages/ui/src/2_molecules/Tabs/Tabs.test.tsx
@@ -9,25 +9,27 @@ const items = [
   {
     label: '0',
     content: 'content-0',
+    dataLayoutId: 'tab-0',
   },
   {
     label: '1',
     content: 'content-1',
+    dataLayoutId: 'tab-1',
   },
   {
     label: 'disabled',
     content: 'disabled-content',
     disabled: true,
+    dataLayoutId: 'tab-disabled',
   },
 ];
 
 describe('Tabs', () => {
-  it('renders tabs', () => {
-    const { getByText } = render(<Tabs items={items} index={1} />);
-
-    expect(getByText('0')).toBeInTheDocument();
-    expect(getByText('1')).toBeInTheDocument();
-    expect(getByText('content-1')).toBeInTheDocument();
+  it('renders tabs and dataLayoutIds', () => {
+    const { getByTestId } = render(<Tabs items={items} index={1} />);
+    expect(getByTestId('tab-0')).toBeInTheDocument();
+    expect(getByTestId('tab-1')).toBeInTheDocument();
+    expect(getByTestId('tab-disabled')).toBeInTheDocument();
   });
 
   it('switch between tabs', () => {
diff --git a/packages/ui/src/1_atoms/Tabs/Tabs.tsx b/packages/ui/src/2_molecules/Tabs/Tabs.tsx
similarity index 94%
rename from packages/ui/src/1_atoms/Tabs/Tabs.tsx
rename to packages/ui/src/2_molecules/Tabs/Tabs.tsx
index 4bf737072..41695f5e5 100644
--- a/packages/ui/src/1_atoms/Tabs/Tabs.tsx
+++ b/packages/ui/src/2_molecules/Tabs/Tabs.tsx
@@ -6,11 +6,11 @@ import styles from './Tabs.module.css';
 import { TabSize, TabType } from './Tabs.types';
 import { Tab } from './components/Tab/Tab';
 
-interface ITabItem {
+export interface ITabItem {
   label: React.ReactNode;
   content: React.ReactNode;
   disabled?: boolean;
-  dataActionId?: string;
+  dataLayoutId?: string;
   activeClassName?: string;
 }
 
@@ -55,7 +55,7 @@ export const Tabs: React.FC<TabsProps> = ({
             disabled={item.disabled}
             onClick={() => selectTab(item, i)}
             content={item.label}
-            dataActionId={item.dataActionId}
+            dataLayoutId={item.dataLayoutId}
             type={type}
             size={size}
             activeIndex={index}
diff --git a/packages/ui/src/1_atoms/Tabs/Tabs.types.ts b/packages/ui/src/2_molecules/Tabs/Tabs.types.ts
similarity index 100%
rename from packages/ui/src/1_atoms/Tabs/Tabs.types.ts
rename to packages/ui/src/2_molecules/Tabs/Tabs.types.ts
diff --git a/packages/ui/src/1_atoms/Tabs/components/Tab/Tab.module.css b/packages/ui/src/2_molecules/Tabs/components/Tab/Tab.module.css
similarity index 100%
rename from packages/ui/src/1_atoms/Tabs/components/Tab/Tab.module.css
rename to packages/ui/src/2_molecules/Tabs/components/Tab/Tab.module.css
diff --git a/packages/ui/src/1_atoms/Tabs/components/Tab/Tab.tsx b/packages/ui/src/2_molecules/Tabs/components/Tab/Tab.tsx
similarity index 92%
rename from packages/ui/src/1_atoms/Tabs/components/Tab/Tab.tsx
rename to packages/ui/src/2_molecules/Tabs/components/Tab/Tab.tsx
index 8771c20e3..a00e5c943 100644
--- a/packages/ui/src/1_atoms/Tabs/components/Tab/Tab.tsx
+++ b/packages/ui/src/2_molecules/Tabs/components/Tab/Tab.tsx
@@ -11,7 +11,7 @@ type TabProps = {
   active: boolean;
   onClick: () => void;
   className?: string;
-  dataActionId?: string;
+  dataLayoutId?: string;
   type: TabType;
   size: TabSize;
   activeClassName?: string;
@@ -24,7 +24,7 @@ export const Tab: React.FC<TabProps> = ({
   onClick,
   disabled,
   className,
-  dataActionId,
+  dataLayoutId,
   type,
   size,
   active,
@@ -46,7 +46,7 @@ export const Tab: React.FC<TabProps> = ({
       styles[type],
     )}
     onClick={onClick}
-    data-action-id={dataActionId}
+    data-layout-id={dataLayoutId}
     disabled={disabled}
   >
     {content}
diff --git a/packages/ui/src/2_molecules/index.ts b/packages/ui/src/2_molecules/index.ts
index 363aafd40..77d1ef313 100644
--- a/packages/ui/src/2_molecules/index.ts
+++ b/packages/ui/src/2_molecules/index.ts
@@ -4,3 +4,4 @@ export * from './Dropdown/Dropdown';
 export * from './Dropdown/Dropdown.types';
 export * from './Menu/Menu';
 export * from './WalletIdentity/WalletIdentity';
+export * from './Tabs/Tabs';

From 25294c2be48d4fbf67c5e0c1fc96ca2620a50c9b Mon Sep 17 00:00:00 2001
From: Victor Creed <69458664+creed-victor@users.noreply.github.com>
Date: Tue, 18 Oct 2022 10:44:09 +0300
Subject: [PATCH 05/14] chore(actions): automation for package releases SOV-863
 (#33)

---
 .github/workflows/release.yml | 35 +++++++++++++++++++++++++++++++++++
 package.json                  |  3 ++-
 2 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 .github/workflows/release.yml

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
new file mode 100644
index 000000000..5339eccd2
--- /dev/null
+++ b/.github/workflows/release.yml
@@ -0,0 +1,35 @@
+name: Release packages
+
+on:
+  push:
+    branches: [ "main" ]
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js 16.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+
+      - name: Install Dependencies
+        run: yarn
+
+      - name: Build & Test packages
+        run: yarn turbo run build lint test --filter=./packages/*
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          publish: yarn changeset publish
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/package.json b/package.json
index ab3aeae7f..5b704d643 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "test:staged": "turbo run test:staged",
     "coverage": "turbo run coverage",
     "storybook": "turbo run storybook",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "publish-packages": "turbo run build lint test --filter=./packages/* && changeset publish"
   },
   "devDependencies": {
     "@sovryn/eslint-config-custom": "*",

From fc236759fbf723ce0b57bf49fecd021a84cb7d66 Mon Sep 17 00:00:00 2001
From: Victor Creed <69458664+creed-victor@users.noreply.github.com>
Date: Tue, 18 Oct 2022 11:01:58 +0300
Subject: [PATCH 06/14] chore: configure changesets (#34)

* chore(versions): configure changesets

* chore(versions): add default changeset for ui package
---
 .changeset/README.md           |   8 +
 .changeset/config.json         |  11 +
 .changeset/smart-pugs-shave.md |   5 +
 package.json                   |   5 +-
 yarn.lock                      | 708 ++++++++++++++++++++++++++++++++-
 5 files changed, 722 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/README.md
 create mode 100644 .changeset/config.json
 create mode 100644 .changeset/smart-pugs-shave.md

diff --git a/.changeset/README.md b/.changeset/README.md
new file mode 100644
index 000000000..e5b6d8d6a
--- /dev/null
+++ b/.changeset/README.md
@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
diff --git a/.changeset/config.json b/.changeset/config.json
new file mode 100644
index 000000000..7fcf97338
--- /dev/null
+++ b/.changeset/config.json
@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}
diff --git a/.changeset/smart-pugs-shave.md b/.changeset/smart-pugs-shave.md
new file mode 100644
index 000000000..7b19e1d1a
--- /dev/null
+++ b/.changeset/smart-pugs-shave.md
@@ -0,0 +1,5 @@
+---
+'@sovryn/ui': patch
+---
+
+initial components
diff --git a/package.json b/package.json
index 5b704d643..98eef35db 100644
--- a/package.json
+++ b/package.json
@@ -37,5 +37,8 @@
       "prettier --write"
     ]
   },
-  "packageManager": "yarn@1.19.1"
+  "packageManager": "yarn@1.19.1",
+  "dependencies": {
+    "@changesets/cli": "^2.25.0"
+  }
 }
diff --git a/yarn.lock b/yarn.lock
index 99e3098a2..b56a174f2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1226,6 +1226,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.10.4", "@babel/runtime@^7.5.5":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78"
+  integrity sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@~7.5.4":
   version "7.5.5"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.5.tgz"
@@ -1301,6 +1308,205 @@
   resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@changesets/apply-release-plan@^6.1.1":
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/@changesets/apply-release-plan/-/apply-release-plan-6.1.1.tgz#14ec261c11c9b90d110a83b8b96412ddb7303ddf"
+  integrity sha512-LaQiP/Wf0zMVR0HNrLQAjz3rsNsr0d/RlnP6Ef4oi8VafOwnY1EoWdK4kssuUJGgNgDyHpomS50dm8CU3D7k7g==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    "@changesets/config" "^2.2.0"
+    "@changesets/get-version-range-type" "^0.3.2"
+    "@changesets/git" "^1.5.0"
+    "@changesets/types" "^5.2.0"
+    "@manypkg/get-packages" "^1.1.3"
+    detect-indent "^6.0.0"
+    fs-extra "^7.0.1"
+    lodash.startcase "^4.4.0"
+    outdent "^0.5.0"
+    prettier "^2.7.1"
+    resolve-from "^5.0.0"
+    semver "^5.4.1"
+
+"@changesets/assemble-release-plan@^5.2.2":
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/@changesets/assemble-release-plan/-/assemble-release-plan-5.2.2.tgz#9824f14a7a6e411c7153f1ccc2a42bbe35688129"
+  integrity sha512-B1qxErQd85AeZgZFZw2bDKyOfdXHhG+X5S+W3Da2yCem8l/pRy4G/S7iOpEcMwg6lH8q2ZhgbZZwZ817D+aLuQ==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    "@changesets/errors" "^0.1.4"
+    "@changesets/get-dependents-graph" "^1.3.4"
+    "@changesets/types" "^5.2.0"
+    "@manypkg/get-packages" "^1.1.3"
+    semver "^5.4.1"
+
+"@changesets/changelog-git@^0.1.13":
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/@changesets/changelog-git/-/changelog-git-0.1.13.tgz#182e130add456255d8ee2b4c8eaf88048944aaaf"
+  integrity sha512-zvJ50Q+EUALzeawAxax6nF2WIcSsC5PwbuLeWkckS8ulWnuPYx8Fn/Sjd3rF46OzeKA8t30loYYV6TIzp4DIdg==
+  dependencies:
+    "@changesets/types" "^5.2.0"
+
+"@changesets/cli@^2.25.0":
+  version "2.25.0"
+  resolved "https://registry.yarnpkg.com/@changesets/cli/-/cli-2.25.0.tgz#c338fefe69daa8348a504e7f54382eb1a4bb7a10"
+  integrity sha512-Svu5KD2enurVHGEEzCRlaojrHjVYgF9srmMP9VQSy9c1TspX6C9lDPpulsSNIjYY9BuU/oiWpjBgR7RI9eQiAA==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    "@changesets/apply-release-plan" "^6.1.1"
+    "@changesets/assemble-release-plan" "^5.2.2"
+    "@changesets/changelog-git" "^0.1.13"
+    "@changesets/config" "^2.2.0"
+    "@changesets/errors" "^0.1.4"
+    "@changesets/get-dependents-graph" "^1.3.4"
+    "@changesets/get-release-plan" "^3.0.15"
+    "@changesets/git" "^1.5.0"
+    "@changesets/logger" "^0.0.5"
+    "@changesets/pre" "^1.0.13"
+    "@changesets/read" "^0.5.8"
+    "@changesets/types" "^5.2.0"
+    "@changesets/write" "^0.2.1"
+    "@manypkg/get-packages" "^1.1.3"
+    "@types/is-ci" "^3.0.0"
+    "@types/semver" "^6.0.0"
+    ansi-colors "^4.1.3"
+    chalk "^2.1.0"
+    enquirer "^2.3.0"
+    external-editor "^3.1.0"
+    fs-extra "^7.0.1"
+    human-id "^1.0.2"
+    is-ci "^3.0.1"
+    meow "^6.0.0"
+    outdent "^0.5.0"
+    p-limit "^2.2.0"
+    preferred-pm "^3.0.0"
+    resolve-from "^5.0.0"
+    semver "^5.4.1"
+    spawndamnit "^2.0.0"
+    term-size "^2.1.0"
+    tty-table "^4.1.5"
+
+"@changesets/config@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@changesets/config/-/config-2.2.0.tgz#382f6cd801fa56273942659114c8060378dfe066"
+  integrity sha512-GGaokp3nm5FEDk/Fv2PCRcQCOxGKKPRZ7prcMqxEr7VSsG75MnChQE8plaW1k6V8L2bJE+jZWiRm19LbnproOw==
+  dependencies:
+    "@changesets/errors" "^0.1.4"
+    "@changesets/get-dependents-graph" "^1.3.4"
+    "@changesets/logger" "^0.0.5"
+    "@changesets/types" "^5.2.0"
+    "@manypkg/get-packages" "^1.1.3"
+    fs-extra "^7.0.1"
+    micromatch "^4.0.2"
+
+"@changesets/errors@^0.1.4":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@changesets/errors/-/errors-0.1.4.tgz#f79851746c43679a66b383fdff4c012f480f480d"
+  integrity sha512-HAcqPF7snsUJ/QzkWoKfRfXushHTu+K5KZLJWPb34s4eCZShIf8BFO3fwq6KU8+G7L5KdtN2BzQAXOSXEyiY9Q==
+  dependencies:
+    extendable-error "^0.1.5"
+
+"@changesets/get-dependents-graph@^1.3.4":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@changesets/get-dependents-graph/-/get-dependents-graph-1.3.4.tgz#d8bf537f45a7ff773da99143675f49e250996838"
+  integrity sha512-+C4AOrrFY146ydrgKOo5vTZfj7vetNu1tWshOID+UjPUU9afYGDXI8yLnAeib1ffeBXV3TuGVcyphKpJ3cKe+A==
+  dependencies:
+    "@changesets/types" "^5.2.0"
+    "@manypkg/get-packages" "^1.1.3"
+    chalk "^2.1.0"
+    fs-extra "^7.0.1"
+    semver "^5.4.1"
+
+"@changesets/get-release-plan@^3.0.15":
+  version "3.0.15"
+  resolved "https://registry.yarnpkg.com/@changesets/get-release-plan/-/get-release-plan-3.0.15.tgz#55577b235b785125a462d5d2a2dffe4dbf94e590"
+  integrity sha512-W1tFwxE178/en+zSj/Nqbc3mvz88mcdqUMJhRzN1jDYqN3QI4ifVaRF9mcWUU+KI0gyYEtYR65tour690PqTcA==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    "@changesets/assemble-release-plan" "^5.2.2"
+    "@changesets/config" "^2.2.0"
+    "@changesets/pre" "^1.0.13"
+    "@changesets/read" "^0.5.8"
+    "@changesets/types" "^5.2.0"
+    "@manypkg/get-packages" "^1.1.3"
+
+"@changesets/get-version-range-type@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@changesets/get-version-range-type/-/get-version-range-type-0.3.2.tgz#8131a99035edd11aa7a44c341cbb05e668618c67"
+  integrity sha512-SVqwYs5pULYjYT4op21F2pVbcrca4qA/bAA3FmFXKMN7Y+HcO8sbZUTx3TAy2VXulP2FACd1aC7f2nTuqSPbqg==
+
+"@changesets/git@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@changesets/git/-/git-1.5.0.tgz#71bbcf11f3b346d56eeaf3d3201e6dc3e270ea5a"
+  integrity sha512-Xo8AT2G7rQJSwV87c8PwMm6BAc98BnufRMsML7m7Iw8Or18WFvFmxqG5aOL5PBvhgq9KrKvaeIBNIymracSuHg==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    "@changesets/errors" "^0.1.4"
+    "@changesets/types" "^5.2.0"
+    "@manypkg/get-packages" "^1.1.3"
+    is-subdir "^1.1.1"
+    spawndamnit "^2.0.0"
+
+"@changesets/logger@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/@changesets/logger/-/logger-0.0.5.tgz#68305dd5a643e336be16a2369cb17cdd8ed37d4c"
+  integrity sha512-gJyZHomu8nASHpaANzc6bkQMO9gU/ib20lqew1rVx753FOxffnCrJlGIeQVxNWCqM+o6OOleCo/ivL8UAO5iFw==
+  dependencies:
+    chalk "^2.1.0"
+
+"@changesets/parse@^0.3.15":
+  version "0.3.15"
+  resolved "https://registry.yarnpkg.com/@changesets/parse/-/parse-0.3.15.tgz#1bc74f8c43b0861d71f4fccf78950411004ba308"
+  integrity sha512-3eDVqVuBtp63i+BxEWHPFj2P1s3syk0PTrk2d94W9JD30iG+OER0Y6n65TeLlY8T2yB9Fvj6Ev5Gg0+cKe/ZUA==
+  dependencies:
+    "@changesets/types" "^5.2.0"
+    js-yaml "^3.13.1"
+
+"@changesets/pre@^1.0.13":
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/@changesets/pre/-/pre-1.0.13.tgz#49c3ae8bb444a1ce3e0fe4cb21f238318b6763e9"
+  integrity sha512-jrZc766+kGZHDukjKhpBXhBJjVQMied4Fu076y9guY1D3H622NOw8AQaLV3oQsDtKBTrT2AUFjt9Z2Y9Qx+GfA==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    "@changesets/errors" "^0.1.4"
+    "@changesets/types" "^5.2.0"
+    "@manypkg/get-packages" "^1.1.3"
+    fs-extra "^7.0.1"
+
+"@changesets/read@^0.5.8":
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/@changesets/read/-/read-0.5.8.tgz#84e24fd12e6759cef090088261c08b1dfe0f350e"
+  integrity sha512-eYaNfxemgX7f7ELC58e7yqQICW5FB7V+bd1lKt7g57mxUrTveYME+JPaBPpYx02nP53XI6CQp6YxnR9NfmFPKw==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    "@changesets/git" "^1.5.0"
+    "@changesets/logger" "^0.0.5"
+    "@changesets/parse" "^0.3.15"
+    "@changesets/types" "^5.2.0"
+    chalk "^2.1.0"
+    fs-extra "^7.0.1"
+    p-filter "^2.1.0"
+
+"@changesets/types@^4.0.1":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/@changesets/types/-/types-4.1.0.tgz#fb8f7ca2324fd54954824e864f9a61a82cb78fe0"
+  integrity sha512-LDQvVDv5Kb50ny2s25Fhm3d9QSZimsoUGBsUioj6MC3qbMUCuC8GPIvk/M6IvXx3lYhAs0lwWUQLb+VIEUCECw==
+
+"@changesets/types@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/@changesets/types/-/types-5.2.0.tgz#c4927f5bf9668f778c12b4226cfd07a1f5b79c9b"
+  integrity sha512-km/66KOqJC+eicZXsm2oq8A8bVTSpkZJ60iPV/Nl5Z5c7p9kk8xxh6XGRTlnludHldxOOfudhnDN2qPxtHmXzA==
+
+"@changesets/write@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@changesets/write/-/write-0.2.1.tgz#c00d95851e2ca70385434a360a90ead9a1d07c74"
+  integrity sha512-KUd49nt2fnYdGixIqTi1yVE1nAoZYUMdtB3jBfp77IMqjZ65hrmZE5HdccDlTeClZN0420ffpnfET3zzeY8pdw==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    "@changesets/types" "^5.2.0"
+    fs-extra "^7.0.1"
+    human-id "^1.0.2"
+    prettier "^2.7.1"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz"
@@ -2475,6 +2681,28 @@
   resolved "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
+"@manypkg/find-root@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@manypkg/find-root/-/find-root-1.1.0.tgz#a62d8ed1cd7e7d4c11d9d52a8397460b5d4ad29f"
+  integrity sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@types/node" "^12.7.1"
+    find-up "^4.1.0"
+    fs-extra "^8.1.0"
+
+"@manypkg/get-packages@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@manypkg/get-packages/-/get-packages-1.1.3.tgz#e184db9bba792fa4693de4658cfb1463ac2c9c47"
+  integrity sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@changesets/types" "^4.0.1"
+    "@manypkg/find-root" "^1.1.0"
+    fs-extra "^8.1.0"
+    globby "^11.0.0"
+    read-yaml-file "^1.1.0"
+
 "@mdx-js/mdx@^1.6.22":
   version "1.6.22"
   resolved "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-1.6.22.tgz"
@@ -4220,6 +4448,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/is-ci@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/is-ci/-/is-ci-3.0.0.tgz#7e8910af6857601315592436f030aaa3ed9783c3"
+  integrity sha512-Q0Op0hdWbYd1iahB+IFNQcWXFq4O0Q5MwQP7uN0souuQ4rPg1vEYcnIOfr1gY+M+6rc8FGoRaBO1mOOvL29sEQ==
+  dependencies:
+    ci-info "^3.1.0"
+
 "@types/is-function@^1.0.0":
   version "1.0.1"
   resolved "https://registry.npmjs.org/@types/is-function/-/is-function-1.0.1.tgz"
@@ -4309,6 +4544,11 @@
   resolved "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz"
   integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
 
+"@types/minimist@^1.2.0":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
+  integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
+
 "@types/node-fetch@^2.5.7":
   version "2.6.2"
   resolved "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.2.tgz"
@@ -4322,6 +4562,11 @@
   resolved "https://registry.npmjs.org/@types/node/-/node-18.7.18.tgz"
   integrity sha512-m+6nTEOadJZuTPkKR/SYK3A2d7FZrgElol9UP1Kae90VVU4a6mxnPuLiIW1m4Cq4gZ/nWb9GrdVXJCoCazDAbg==
 
+"@types/node@^12.7.1":
+  version "12.20.55"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
+  integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==
+
 "@types/node@^14.0.10 || ^16.0.0", "@types/node@^14.14.20 || ^16.0.0", "@types/node@^16.11.39":
   version "16.11.59"
   resolved "https://registry.npmjs.org/@types/node/-/node-16.11.59.tgz"
@@ -4431,6 +4676,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/semver@^6.0.0":
+  version "6.2.3"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-6.2.3.tgz#5798ecf1bec94eaa64db39ee52808ec0693315aa"
+  integrity sha512-KQf+QAMWKMrtBMsB8/24w53tEsxllMj6TuA80TT/5igJalLI/zm0L3oXRbIAl4Ohfc85gyHX/jhMwsVkmhLU4A==
+
 "@types/serve-index@^1.9.1":
   version "1.9.1"
   resolved "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz"
@@ -5097,7 +5347,7 @@ ansi-colors@^3.0.0:
   resolved "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz"
   integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
 
-ansi-colors@^4.1.1:
+ansi-colors@^4.1.1, ansi-colors@^4.1.3:
   version "4.1.3"
   resolved "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz"
   integrity sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==
@@ -5302,7 +5552,7 @@ array-unique@^0.3.2:
   resolved "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz"
   integrity sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==
 
-array.prototype.flat@^1.2.1, array.prototype.flat@^1.2.5:
+array.prototype.flat@^1.2.1, array.prototype.flat@^1.2.3, array.prototype.flat@^1.2.5:
   version "1.3.0"
   resolved "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz"
   integrity sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==
@@ -5344,6 +5594,11 @@ array.prototype.reduce@^1.0.4:
     es-array-method-boxes-properly "^1.0.0"
     is-string "^1.0.7"
 
+arrify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+  integrity sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==
+
 arrify@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz"
@@ -5722,6 +5977,13 @@ better-opn@^2.1.1:
   dependencies:
     open "^7.0.3"
 
+better-path-resolve@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/better-path-resolve/-/better-path-resolve-1.0.0.tgz#13a35a1104cdd48a7b74bf8758f96a1ee613f99d"
+  integrity sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==
+  dependencies:
+    is-windows "^1.0.0"
+
 bfj@^7.0.2:
   version "7.0.2"
   resolved "https://registry.npmjs.org/bfj/-/bfj-7.0.2.tgz"
@@ -5876,6 +6138,13 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+breakword@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/breakword/-/breakword-1.0.5.tgz#fd420a417f55016736b5b615161cae1c8f819810"
+  integrity sha512-ex5W9DoOQ/LUEU3PMdLs9ua/CYZl1678NUkKOdUSi8Aw5F1idieaiRURCBFJCwVcrD1J8Iy3vfWSloaMwO2qFg==
+  dependencies:
+    wcwidth "^1.0.1"
+
 brorand@^1.0.1, brorand@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz"
@@ -6153,12 +6422,21 @@ camelcase-keys@^2.0.0:
     camelcase "^2.0.0"
     map-obj "^1.0.0"
 
+camelcase-keys@^6.2.2:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-6.2.2.tgz#5e755d6ba51aa223ec7d3d52f25778210f9dc3c0"
+  integrity sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==
+  dependencies:
+    camelcase "^5.3.1"
+    map-obj "^4.0.0"
+    quick-lru "^4.0.1"
+
 camelcase@^2.0.0:
   version "2.1.1"
   resolved "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz"
   integrity sha512-DLIsRzJVBQu72meAKPkWQOLcujdXT32hwdfnkI1frSiSRMK1MofjKHf+MEx0SB6fjEFXL8fBDv1dKymBlOp4Qw==
 
-camelcase@^5.3.1:
+camelcase@^5.0.0, camelcase@^5.3.1:
   version "5.3.1"
   resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
@@ -6200,7 +6478,7 @@ ccount@^1.0.0:
   resolved "https://registry.npmjs.org/ccount/-/ccount-1.1.0.tgz"
   integrity sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg==
 
-chalk@^2.0.0, chalk@^2.4.1:
+chalk@^2.0.0, chalk@^2.1.0, chalk@^2.4.1:
   version "2.4.2"
   resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -6250,6 +6528,11 @@ character-reference-invalid@^1.0.0:
   resolved "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz"
   integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
 
+chardet@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
+  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
+
 check-types@^11.1.1:
   version "11.1.2"
   resolved "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz"
@@ -6309,6 +6592,11 @@ ci-info@^2.0.0:
   resolved "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz"
   integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
 
+ci-info@^3.1.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.5.0.tgz#bfac2a29263de4c829d806b1ab478e35091e171f"
+  integrity sha512-yH4RezKOGlOhxkmhbeNuC4eYZKAUsEaGtBuBzDDP1eFUKiccDWzBABxBfOx31IDwDIXMTxWuwAxUGModvkbuVw==
+
 ci-info@^3.2.0:
   version "3.4.0"
   resolved "https://registry.npmjs.org/ci-info/-/ci-info-3.4.0.tgz"
@@ -6403,6 +6691,15 @@ cli-truncate@^3.1.0:
     slice-ansi "^5.0.0"
     string-width "^5.0.0"
 
+cliui@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
+  integrity sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^6.2.0"
+
 cliui@^7.0.2:
   version "7.0.4"
   resolved "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz"
@@ -6412,6 +6709,15 @@ cliui@^7.0.2:
     strip-ansi "^6.0.0"
     wrap-ansi "^7.0.0"
 
+cliui@^8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
+  integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.1"
+    wrap-ansi "^7.0.0"
+
 clone-deep@^4.0.1:
   version "4.0.1"
   resolved "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz"
@@ -6421,6 +6727,11 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
+clone@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
+  integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
+
 clsx@1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz"
@@ -6800,6 +7111,15 @@ create-require@^1.1.0:
   resolved "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz"
   integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
 
+cross-spawn@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
+  integrity sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==
+  dependencies:
+    lru-cache "^4.0.1"
+    shebang-command "^1.2.0"
+    which "^1.2.9"
+
 cross-spawn@^6.0.0:
   version "6.0.5"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz"
@@ -7082,6 +7402,31 @@ csstype@^3.0.2:
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
+csv-generate@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/csv-generate/-/csv-generate-3.4.3.tgz#bc42d943b45aea52afa896874291da4b9108ffff"
+  integrity sha512-w/T+rqR0vwvHqWs/1ZyMDWtHHSJaN06klRqJXBEpDJaM/+dZkso0OKh1VcuuYvK3XM53KysVNq8Ko/epCK8wOw==
+
+csv-parse@^4.16.3:
+  version "4.16.3"
+  resolved "https://registry.yarnpkg.com/csv-parse/-/csv-parse-4.16.3.tgz#7ca624d517212ebc520a36873c3478fa66efbaf7"
+  integrity sha512-cO1I/zmz4w2dcKHVvpCr7JVRu8/FymG5OEpmvsZYlccYolPBLoVGKUHgNoc4ZGkFeFlWGEDmMyBM+TTqRdW/wg==
+
+csv-stringify@^5.6.5:
+  version "5.6.5"
+  resolved "https://registry.yarnpkg.com/csv-stringify/-/csv-stringify-5.6.5.tgz#c6d74badda4b49a79bf4e72f91cce1e33b94de00"
+  integrity sha512-PjiQ659aQ+fUTQqSrd1XEDnOr52jh30RBurfzkscaE2tPaFsDH5wOAHJiw8XAHphRknCwMUE9KRayc4K/NbO8A==
+
+csv@^5.5.0:
+  version "5.5.3"
+  resolved "https://registry.yarnpkg.com/csv/-/csv-5.5.3.tgz#cd26c1e45eae00ce6a9b7b27dcb94955ec95207d"
+  integrity sha512-QTaY0XjjhTQOdguARF0lGKm5/mEq9PD9/VhZZegHDIBq2tQwgNpHc3dneD4mGo2iJs+fTKv5Bp0fZ+BRuY3Z0g==
+  dependencies:
+    csv-generate "^3.4.3"
+    csv-parse "^4.16.3"
+    csv-stringify "^5.6.5"
+    stream-transform "^2.1.3"
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz"
@@ -7138,7 +7483,15 @@ debug@^3.0.0, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-decamelize@^1.1.2:
+decamelize-keys@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
+  integrity sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg==
+  dependencies:
+    decamelize "^1.1.0"
+    map-obj "^1.0.0"
+
+decamelize@^1.1.0, decamelize@^1.1.2, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz"
   integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
@@ -7184,6 +7537,13 @@ default-gateway@^6.0.3:
   dependencies:
     execa "^5.0.0"
 
+defaults@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/defaults/-/defaults-1.0.4.tgz#b0b02062c1e2aa62ff5d9528f0f98baa90978d7a"
+  integrity sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==
+  dependencies:
+    clone "^1.0.2"
+
 define-lazy-prop@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz"
@@ -7264,6 +7624,11 @@ detab@2.0.4:
   dependencies:
     repeat-string "^1.5.4"
 
+detect-indent@^6.0.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
+  integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==
+
 detect-newline@^3.0.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz"
@@ -7603,7 +7968,7 @@ enhanced-resolve@^5.0.0, enhanced-resolve@^5.10.0:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
-enquirer@^2.3.5:
+enquirer@^2.3.0, enquirer@^2.3.5:
   version "2.3.6"
   resolved "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz"
   integrity sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==
@@ -8549,6 +8914,20 @@ extend@^3.0.0:
   resolved "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
+extendable-error@^0.1.5:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/extendable-error/-/extendable-error-0.1.7.tgz#60b9adf206264ac920058a7395685ae4670c2b96"
+  integrity sha512-UOiS2in6/Q0FK0R0q6UY9vYpQ21mr/Qn1KOnte7vsACuNJf514WvCCUHSRCPcgjPT2bAhNIJdlE6bVap1GKmeg==
+
+external-editor@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
+  integrity sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==
+  dependencies:
+    chardet "^0.7.0"
+    iconv-lite "^0.4.24"
+    tmp "^0.0.33"
+
 extglob@^2.0.4:
   version "2.0.4"
   resolved "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz"
@@ -8768,6 +9147,14 @@ find-up@^5.0.0:
     locate-path "^6.0.0"
     path-exists "^4.0.0"
 
+find-yarn-workspace-root2@1.2.16:
+  version "1.2.16"
+  resolved "https://registry.yarnpkg.com/find-yarn-workspace-root2/-/find-yarn-workspace-root2-1.2.16.tgz#60287009dd2f324f59646bdb4b7610a6b301c2a9"
+  integrity sha512-hr6hb1w8ePMpPVUK39S4RlwJzi+xPLuVuG8XlwXU3KD5Yn3qgBWVfy3AzNlDhWvE1EORCE65/Qm26rFQt3VLVA==
+  dependencies:
+    micromatch "^4.0.2"
+    pkg-dir "^4.2.0"
+
 flat-cache@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz"
@@ -8923,6 +9310,24 @@ fs-extra@^10.0.0, fs-extra@^10.1.0:
     jsonfile "^6.0.1"
     universalify "^2.0.0"
 
+fs-extra@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
+  integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
+fs-extra@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
+  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
 fs-extra@^9.0.0, fs-extra@^9.0.1:
   version "9.1.0"
   resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz"
@@ -9025,7 +9430,7 @@ gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
   resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-get-caller-file@^2.0.5:
+get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
@@ -9190,7 +9595,7 @@ globalthis@^1.0.0:
   dependencies:
     define-properties "^1.1.3"
 
-globby@^11.0.2, globby@^11.0.3, globby@^11.0.4, globby@^11.1.0:
+globby@^11.0.0, globby@^11.0.2, globby@^11.0.3, globby@^11.0.4, globby@^11.1.0:
   version "11.1.0"
   resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz"
   integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
@@ -9216,7 +9621,7 @@ globby@^9.2.0:
     pify "^4.0.1"
     slash "^2.0.0"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.5, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
   version "4.2.10"
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
@@ -9250,6 +9655,11 @@ handlebars@^4.7.7:
   optionalDependencies:
     uglify-js "^3.1.4"
 
+hard-rejection@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
+  integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
+
 harmony-reflect@^1.4.6:
   version "1.6.2"
   resolved "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz"
@@ -9648,6 +10058,11 @@ https-proxy-agent@^5.0.0, https-proxy-agent@^5.0.1:
     agent-base "6"
     debug "4"
 
+human-id@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/human-id/-/human-id-1.0.2.tgz#e654d4b2b0d8b07e45da9f6020d8af17ec0a5df3"
+  integrity sha512-UNopramDEhHJD+VR+ehk8rOslwSfByxPIZyJRfV739NDhN5LF1fa1MqnzKm2lGTQRjNrjK19Q5fhkgIfjlVUKw==
+
 human-signals@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz"
@@ -9663,7 +10078,7 @@ husky@8.0.1:
   resolved "https://registry.npmjs.org/husky/-/husky-8.0.1.tgz"
   integrity sha512-xs7/chUH/CKdOCs7Zy0Aev9e/dKOMZf3K1Az1nar3tzlv0jfqnYtu235bstsWTmXOR0EfINrPa97yy4Lz6RiKw==
 
-iconv-lite@0.4.24:
+iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -9948,6 +10363,13 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
+is-ci@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-3.0.1.tgz#db6ecbed1bd659c43dac0f45661e7674103d1867"
+  integrity sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==
+  dependencies:
+    ci-info "^3.2.0"
+
 is-core-module@^2.8.1, is-core-module@^2.9.0:
   version "2.10.0"
   resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz"
@@ -10117,6 +10539,11 @@ is-object@^1.0.1:
   resolved "https://registry.npmjs.org/is-object/-/is-object-1.0.2.tgz"
   integrity sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA==
 
+is-plain-obj@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+  integrity sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==
+
 is-plain-obj@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz"
@@ -10203,6 +10630,13 @@ is-string@^1.0.5, is-string@^1.0.7:
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-subdir@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/is-subdir/-/is-subdir-1.2.0.tgz#b791cd28fab5202e91a08280d51d9d7254fd20d4"
+  integrity sha512-2AT6j+gXe/1ueqbW6fLZJiIw3F8iXGJtt0yDrZaBhAZEG1raiTxKWU+IPqMCzQAXOUCKdA4UDMgacKH25XG2Cw==
+  dependencies:
+    better-path-resolve "1.0.0"
+
 is-symbol@^1.0.2, is-symbol@^1.0.3:
   version "1.0.4"
   resolved "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz"
@@ -10237,7 +10671,7 @@ is-window@^1.0.2:
   resolved "https://registry.npmjs.org/is-window/-/is-window-1.0.2.tgz"
   integrity sha512-uj00kdXyZb9t9RcAUAwMZAnkBUwdYGhYlt7djMXhfyhUCzwNba50tIiBKR7q0l7tdoBtFVw/3JmLY6fI3rmZmg==
 
-is-windows@^1.0.2:
+is-windows@^1.0.0, is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz"
   integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
@@ -11309,7 +11743,7 @@ js-string-escape@^1.0.1:
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-js-yaml@^3.13.1:
+js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@^3.6.1:
   version "3.14.1"
   resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz"
   integrity sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==
@@ -11442,6 +11876,13 @@ json5@^2.1.2, json5@^2.1.3, json5@^2.2.0, json5@^2.2.1:
   resolved "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz"
   integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
 
+jsonfile@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
+  integrity sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
 jsonfile@^6.0.1:
   version "6.1.0"
   resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz"
@@ -11497,7 +11938,7 @@ kind-of@^5.0.0:
   resolved "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz"
   integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
 
-kind-of@^6.0.0, kind-of@^6.0.2:
+kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
   version "6.0.3"
   resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
@@ -11507,6 +11948,11 @@ kleur@^3.0.3:
   resolved "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
+kleur@^4.1.4:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
+  integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
+
 klona@^2.0.4, klona@^2.0.5:
   version "2.0.5"
   resolved "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz"
@@ -11620,6 +12066,16 @@ load-tsconfig@^0.2.0:
   resolved "https://registry.npmjs.org/load-tsconfig/-/load-tsconfig-0.2.3.tgz"
   integrity sha512-iyT2MXws+dc2Wi6o3grCFtGXpeMvHmJqS27sMPGtV2eUu4PeFnG+33I8BlFK1t1NWMjOpcx9bridn5yxLDX2gQ==
 
+load-yaml-file@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/load-yaml-file/-/load-yaml-file-0.2.0.tgz#af854edaf2bea89346c07549122753c07372f64d"
+  integrity sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==
+  dependencies:
+    graceful-fs "^4.1.5"
+    js-yaml "^3.13.0"
+    pify "^4.0.1"
+    strip-bom "^3.0.0"
+
 loader-runner@^2.4.0:
   version "2.4.0"
   resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz"
@@ -11705,6 +12161,11 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz"
   integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
 
+lodash.startcase@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/lodash.startcase/-/lodash.startcase-4.4.0.tgz#9436e34ed26093ed7ffae1936144350915d9add8"
+  integrity sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==
+
 lodash.truncate@^4.4.2:
   version "4.4.2"
   resolved "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz"
@@ -11765,6 +12226,14 @@ lowlight@^1.17.0:
     fault "^1.0.0"
     highlight.js "~10.7.0"
 
+lru-cache@^4.0.1:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
+  integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz"
@@ -11842,6 +12311,11 @@ map-obj@^1.0.0, map-obj@^1.0.1:
   resolved "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz"
   integrity sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==
 
+map-obj@^4.0.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
+  integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
+
 map-or-similar@^1.5.0:
   version "1.5.0"
   resolved "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz"
@@ -11975,6 +12449,23 @@ meow@^3.1.0:
     redent "^1.0.0"
     trim-newlines "^1.0.0"
 
+meow@^6.0.0:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-6.1.1.tgz#1ad64c4b76b2a24dfb2f635fddcadf320d251467"
+  integrity sha512-3YffViIt2QWgTy6Pale5QpopX/IvU3LPL03jOTqp6pGj3VjesdO/U8CuHMKpnQr4shCNCM5fd5XFFvIIl6JBHg==
+  dependencies:
+    "@types/minimist" "^1.2.0"
+    camelcase-keys "^6.2.2"
+    decamelize-keys "^1.1.0"
+    hard-rejection "^2.1.0"
+    minimist-options "^4.0.2"
+    normalize-package-data "^2.5.0"
+    read-pkg-up "^7.0.1"
+    redent "^3.0.0"
+    trim-newlines "^3.0.0"
+    type-fest "^0.13.1"
+    yargs-parser "^18.1.3"
+
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz"
@@ -12122,6 +12613,15 @@ minimatch@^5.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
+minimist-options@^4.0.2:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
+  integrity sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==
+  dependencies:
+    arrify "^1.0.1"
+    is-plain-obj "^1.1.0"
+    kind-of "^6.0.3"
+
 minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
   version "1.2.6"
   resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz"
@@ -12187,6 +12687,11 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
+mixme@^0.5.1:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/mixme/-/mixme-0.5.4.tgz#8cb3bd0cd32a513c161bf1ca99d143f0bcf2eff3"
+  integrity sha512-3KYa4m4Vlqx98GPdOHghxSdNtTvcP8E0kkaJ5Dlh+h2DRzF7zpuVVcA8B0QpKd11YJeP9QQ7ASkKzOeu195Wzw==
+
 mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@~0.5.1:
   version "0.5.6"
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz"
@@ -12662,6 +13167,16 @@ os-homedir@^1.0.0:
   resolved "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz"
   integrity sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==
 
+os-tmpdir@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
+  integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==
+
+outdent@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/outdent/-/outdent-0.5.0.tgz#9e10982fdc41492bb473ad13840d22f9655be2ff"
+  integrity sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q==
+
 p-all@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/p-all/-/p-all-2.1.0.tgz"
@@ -13694,6 +14209,16 @@ postcss@^8.2.15, postcss@^8.3.5, postcss@^8.4.14, postcss@^8.4.4, postcss@^8.4.7
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+preferred-pm@^3.0.0:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/preferred-pm/-/preferred-pm-3.0.3.tgz#1b6338000371e3edbce52ef2e4f65eb2e73586d6"
+  integrity sha512-+wZgbxNES/KlJs9q40F/1sfOd/j7f1O9JaHcW5Dsn3aUUOZg3L2bjpVUcKV2jvtElYfoTuQiNeMfQJ4kwUAhCQ==
+  dependencies:
+    find-up "^5.0.0"
+    find-yarn-workspace-root2 "1.2.16"
+    path-exists "^4.0.0"
+    which-pm "2.0.0"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
@@ -13716,7 +14241,7 @@ prettier@2.6.2:
   resolved "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz"
   integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==
 
-prettier@2.7.1:
+prettier@2.7.1, prettier@^2.7.1:
   version "2.7.1"
   resolved "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz"
   integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==
@@ -13880,6 +14405,11 @@ prr@~1.0.1:
   resolved "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz"
   integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
 
+pseudomap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
+  integrity sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==
+
 psl@^1.1.33:
   version "1.9.0"
   resolved "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz"
@@ -13976,6 +14506,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+quick-lru@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
+  integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
+
 quick-lru@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz"
@@ -14281,6 +14816,16 @@ read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
+read-yaml-file@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/read-yaml-file/-/read-yaml-file-1.1.0.tgz#9362bbcbdc77007cc8ea4519fe1c0b821a7ce0d8"
+  integrity sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA==
+  dependencies:
+    graceful-fs "^4.1.5"
+    js-yaml "^3.6.1"
+    pify "^4.0.1"
+    strip-bom "^3.0.0"
+
 "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz"
@@ -14553,6 +15098,11 @@ require-from-string@^2.0.2:
   resolved "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz"
   integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
 
+require-main-filename@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
+  integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
+
 requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
@@ -15147,6 +15697,18 @@ slice-ansi@^5.0.0:
     ansi-styles "^6.0.0"
     is-fullwidth-code-point "^4.0.0"
 
+smartwrap@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/smartwrap/-/smartwrap-2.0.2.tgz#7e25d3dd58b51c6ca4aba3a9e391650ea62698a4"
+  integrity sha512-vCsKNQxb7PnCNd2wY1WClWifAc2lwqsG8OaswpJkVJsvMGcnEntdTCDajZCkk93Ay1U3t/9puJmb525Rg5MZBA==
+  dependencies:
+    array.prototype.flat "^1.2.3"
+    breakword "^1.0.5"
+    grapheme-splitter "^1.0.4"
+    strip-ansi "^6.0.0"
+    wcwidth "^1.0.1"
+    yargs "^15.1.0"
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz"
@@ -15269,6 +15831,14 @@ space-separated-tokens@^1.0.0:
   resolved "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz"
   integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
 
+spawndamnit@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/spawndamnit/-/spawndamnit-2.0.0.tgz#9f762ac5c3476abb994b42ad592b5ad22bb4b0ad"
+  integrity sha512-j4JKEcncSjFlqIwU5L/rp2N5SIPsdxaRsIv678+TZxZ0SRDJTm8JrxJMjE/XuiEZNEir3S8l0Fa3Ke339WI4qA==
+  dependencies:
+    cross-spawn "^5.1.0"
+    signal-exit "^3.0.2"
+
 spdx-correct@^3.0.0:
   version "3.1.1"
   resolved "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz"
@@ -15434,6 +16004,13 @@ stream-shift@^1.0.0:
   resolved "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz"
   integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
 
+stream-transform@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/stream-transform/-/stream-transform-2.1.3.tgz#a1c3ecd72ddbf500aa8d342b0b9df38f5aa598e3"
+  integrity sha512-9GHUiM5hMiCi6Y03jD2ARC1ettBXkQBoQAe7nJsPknnI0ow10aXjTnew8QtYQmLjzn974BnmWEAJgCY6ZP1DeQ==
+  dependencies:
+    mixme "^0.5.1"
+
 string-argv@^0.3.1:
   version "0.3.1"
   resolved "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz"
@@ -15872,6 +16449,11 @@ tempy@^0.6.0:
     type-fest "^0.16.0"
     unique-string "^2.0.0"
 
+term-size@^2.1.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.1.tgz#2a6a54840432c2fb6320fea0f415531e90189f54"
+  integrity sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==
+
 terminal-link@^2.0.0:
   version "2.1.1"
   resolved "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz"
@@ -15998,6 +16580,13 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tmp@^0.0.33:
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
+  dependencies:
+    os-tmpdir "~1.0.2"
+
 tmpl@1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz"
@@ -16096,6 +16685,11 @@ trim-newlines@^1.0.0:
   resolved "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz"
   integrity sha512-Nm4cF79FhSTzrLKGDMi3I4utBtFv8qKy4sq1enftf2gMdpqI8oVQTAfySkTz5r49giVzDj88SVZXP4CeYQwjaw==
 
+trim-newlines@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.1.tgz#260a5d962d8b752425b32f3a7db0dcacd176c144"
+  integrity sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==
+
 trim-trailing-lines@^1.0.0:
   version "1.1.4"
   resolved "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz"
@@ -16212,6 +16806,19 @@ tty-browserify@0.0.0:
   resolved "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz"
   integrity sha512-JVa5ijo+j/sOoHGjw0sxw734b1LhBkQ3bvUGNdxnVXDCX81Yx7TFgnZygxrIIWn23hbfTaMYLwRmAxFyDuFmIw==
 
+tty-table@^4.1.5:
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/tty-table/-/tty-table-4.1.6.tgz#6bd58338f36c94cce478c3337934d8a65ab40a73"
+  integrity sha512-kRj5CBzOrakV4VRRY5kUWbNYvo/FpOsz65DzI5op9P+cHov3+IqPbo1JE1ZnQGkHdZgNFDsrEjrfqqy/Ply9fw==
+  dependencies:
+    chalk "^4.1.2"
+    csv "^5.5.0"
+    kleur "^4.1.4"
+    smartwrap "^2.0.2"
+    strip-ansi "^6.0.0"
+    wcwidth "^1.0.1"
+    yargs "^17.1.1"
+
 turbo-darwin-64@1.5.5:
   version "1.5.5"
   resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-1.5.5.tgz#710d4e7999066bd4f500456f7cd1c30f6e6205ed"
@@ -16273,6 +16880,11 @@ type-detect@4.0.8:
   resolved "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz"
   integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
 
+type-fest@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934"
+  integrity sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==
+
 type-fest@^0.16.0:
   version "0.16.0"
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.16.0.tgz"
@@ -16485,6 +17097,11 @@ unist-util-visit@2.0.3, unist-util-visit@^2.0.0:
     unist-util-is "^4.0.0"
     unist-util-visit-parents "^3.0.0"
 
+universalify@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
+  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
+
 universalify@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz"
@@ -16767,6 +17384,13 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
+wcwidth@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"
+  integrity sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==
+  dependencies:
+    defaults "^1.0.3"
+
 web-namespaces@^1.0.0:
   version "1.1.4"
   resolved "https://registry.npmjs.org/web-namespaces/-/web-namespaces-1.1.4.tgz"
@@ -17083,6 +17707,19 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
+which-module@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+  integrity sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==
+
+which-pm@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/which-pm/-/which-pm-2.0.0.tgz#8245609ecfe64bf751d0eef2f376d83bf1ddb7ae"
+  integrity sha512-Lhs9Pmyph0p5n5Z3mVnN0yWcbQYUAD7rbQUiMsQxOJ3T57k7RFe35SUwWMf7dsbDZks1uOmw4AecB/JMDj3v/w==
+  dependencies:
+    load-yaml-file "^0.2.0"
+    path-exists "^4.0.0"
+
 which@^1.2.9, which@^1.3.1:
   version "1.3.1"
   resolved "https://registry.npmjs.org/which/-/which-1.3.1.tgz"
@@ -17397,6 +18034,11 @@ y18n@^5.0.5:
   resolved "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz"
   integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 
+yallist@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+  integrity sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==
+
 yallist@^3.0.2:
   version "3.1.1"
   resolved "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz"
@@ -17417,6 +18059,14 @@ yaml@^2.1.1:
   resolved "https://registry.npmjs.org/yaml/-/yaml-2.1.2.tgz"
   integrity sha512-VSdf2/K3FqAetooKQv45Hcu6sA00aDgWZeGcG6V9IYJnVLTnb6988Tie79K5nx2vK7cEpf+yW8Oy+7iPAbdiHA==
 
+yargs-parser@^18.1.2, yargs-parser@^18.1.3:
+  version "18.1.3"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
+  integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs-parser@^20.2.2, yargs-parser@^20.2.9:
   version "20.2.9"
   resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz"
@@ -17427,6 +18077,23 @@ yargs-parser@^21.0.0:
   resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz"
   integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
 
+yargs@^15.1.0:
+  version "15.4.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
+  integrity sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==
+  dependencies:
+    cliui "^6.0.0"
+    decamelize "^1.2.0"
+    find-up "^4.1.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^4.2.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^18.1.2"
+
 yargs@^16.2.0:
   version "16.2.0"
   resolved "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz"
@@ -17440,6 +18107,19 @@ yargs@^16.2.0:
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
 
+yargs@^17.1.1:
+  version "17.6.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.6.0.tgz#e134900fc1f218bc230192bdec06a0a5f973e46c"
+  integrity sha512-8H/wTDqlSwoSnScvV2N/JHfLWOKuh5MVla9hqLjK3nsfyy6Y4kDSYSvkU5YCUEPOSnRXfIyx3Sq+B/IWudTo4g==
+  dependencies:
+    cliui "^8.0.1"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.3"
+    y18n "^5.0.5"
+    yargs-parser "^21.0.0"
+
 yargs@^17.3.1:
   version "17.5.1"
   resolved "https://registry.npmjs.org/yargs/-/yargs-17.5.1.tgz"

From 8ab03eab8bb104c127cacec179c93e2cc375876a Mon Sep 17 00:00:00 2001
From: Victor Creed <69458664+creed-victor@users.noreply.github.com>
Date: Tue, 18 Oct 2022 11:05:01 +0300
Subject: [PATCH 07/14] chore: prevent duplicated tests

---
 .github/workflows/test.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index ab413ce24..eb4f04d6a 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -6,6 +6,8 @@ on:
   pull_request:
     branches: [ "dev", "main" ]
 
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
 jobs:
   test:
 

From c94fd259cad10ef52d66ed2c38171809f3b759a5 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 18 Oct 2022 11:17:29 +0300
Subject: [PATCH 08/14] Version Packages (#36)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/smart-pugs-shave.md | 5 -----
 packages/ui/CHANGELOG.md       | 7 +++++++
 packages/ui/package.json       | 2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)
 delete mode 100644 .changeset/smart-pugs-shave.md
 create mode 100644 packages/ui/CHANGELOG.md

diff --git a/.changeset/smart-pugs-shave.md b/.changeset/smart-pugs-shave.md
deleted file mode 100644
index 7b19e1d1a..000000000
--- a/.changeset/smart-pugs-shave.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@sovryn/ui': patch
----
-
-initial components
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
new file mode 100644
index 000000000..01f869b73
--- /dev/null
+++ b/packages/ui/CHANGELOG.md
@@ -0,0 +1,7 @@
+# @sovryn/ui
+
+## 0.0.1
+
+### Patch Changes
+
+- fc23675: initial components
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2fc42ef13..6c5ace0c9 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sovryn/ui",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
   "types": "./dist/typings.d.ts",

From 5bbe3da7d00a673ba0ce1f44e7cab0c1c27a6ab8 Mon Sep 17 00:00:00 2001
From: Victor Creed <victor@sovryn.app>
Date: Tue, 18 Oct 2022 14:35:46 +0300
Subject: [PATCH 09/14] fix: review comments

---
 .../VerticalTabs/VerticalTabs.module.css         |  4 +---
 .../VerticalTabs/VerticalTabs.types.ts           |  2 +-
 .../components/VerticalTabItem.module.css        | 16 +---------------
 .../VerticalTabs/components/VerticalTabItem.tsx  |  4 ++--
 4 files changed, 5 insertions(+), 21 deletions(-)

diff --git a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.module.css b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.module.css
index 807447906..8d99e629a 100644
--- a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.module.css
+++ b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.module.css
@@ -17,11 +17,9 @@
 }
 
 .tabs {
-  @apply w-full flex flex-col justify-center items-center gap-y-[2.5rem];
+  @apply w-full flex flex-col justify-center items-center gap-y-10;
 }
 
 .content {
   @apply w-full h-full p-[3.25rem] relative overflow-y-auto;
-  background-color: inherit;
 }
-
diff --git a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.types.ts b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.types.ts
index cf7351062..a5fa6e3f2 100644
--- a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.types.ts
+++ b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.types.ts
@@ -16,7 +16,7 @@ export type VerticalTabsItem = {
   content: ReactNode;
   infoText?: ReactNode;
   disabled?: boolean;
-  dataActionId?: string;
+  dataLayoutId?: string;
 };
 
 export type VerticalTabsItemButtonProps = VerticalTabsItem & {
diff --git a/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.module.css b/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.module.css
index a35312d48..2b2fc783d 100644
--- a/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.module.css
+++ b/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.module.css
@@ -1,28 +1,14 @@
 .button {
-  @apply w-full block text-left text-gray-10 text-opacity-50 font-medium font-roboto;
+  @apply w-full block text-left text-gray-10 text-opacity-50 font-medium;
   &.active {
     @apply text-opacity-100;
   }
 
   & p {
     @apply text-base leading-[1.171875rem];
-
   }
   
   & small {
     @apply block text-xs leading-[0.87875rem] mt-2;
   }
 }
-
-
-.activeButtonIndicator {
-  --indicator-bg-color: #000;
-  @apply absolute right-0 w-0 h-0;
-  transform: translate(0, -1.7rem);
-  border-style: solid;
-  border-width: 0.96875rem 1.28125rem 0.96875rem 0;
-  border-color: transparent var(--indicator-bg-color) transparent transparent;
-  &.withInfoText {
-    transform: translate(0, -2.5625rem);
-  }
-}
diff --git a/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.tsx b/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.tsx
index dfde0c02e..0f09551fe 100644
--- a/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.tsx
+++ b/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.tsx
@@ -10,14 +10,14 @@ export const VerticalTabItem: FC<VerticalTabsItemButtonProps> = ({
   label,
   infoText,
   active,
-  dataActionId,
+  dataLayoutId,
   onClick,
 }) => {
   return (
     <button
       className={classNames(styles.button, { [styles.active]: active })}
       disabled={disabled}
-      data-action-id={dataActionId}
+      data-layout-id={dataLayoutId}
       data-active={active}
       onClick={onClick}
     >

From 9ef0251a10973645f02a2b89d6e5d1d46be7c0c1 Mon Sep 17 00:00:00 2001
From: Victor Creed <victor@sovryn.app>
Date: Tue, 18 Oct 2022 14:47:09 +0300
Subject: [PATCH 10/14] chore: add changeset

---
 .changeset/nice-bananas-deliver.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/nice-bananas-deliver.md

diff --git a/.changeset/nice-bananas-deliver.md b/.changeset/nice-bananas-deliver.md
new file mode 100644
index 000000000..bdcdb55a3
--- /dev/null
+++ b/.changeset/nice-bananas-deliver.md
@@ -0,0 +1,5 @@
+---
+'@sovryn/ui': patch
+---
+
+SOV-580: add vertical tabs component

From 038d5e70fcb1f818b86b1b0debd409aa818ace4e Mon Sep 17 00:00:00 2001
From: Victor Creed <victor@sovryn.app>
Date: Tue, 18 Oct 2022 16:12:19 +0300
Subject: [PATCH 11/14] fix: remove leadings

---
 .../VerticalTabs/components/VerticalTabItem.module.css        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.module.css b/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.module.css
index 2b2fc783d..adcdb96c8 100644
--- a/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.module.css
+++ b/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.module.css
@@ -5,10 +5,10 @@
   }
 
   & p {
-    @apply text-base leading-[1.171875rem];
+    @apply text-base;
   }
   
   & small {
-    @apply block text-xs leading-[0.87875rem] mt-2;
+    @apply block text-xs mt-2;
   }
 }

From d82ee43ef423540b7c2e2227806cd44d3c1eccb8 Mon Sep 17 00:00:00 2001
From: Victor Creed <victor@sovryn.app>
Date: Wed, 19 Oct 2022 10:50:01 +0300
Subject: [PATCH 12/14] fix: add hover state

---
 .../VerticalTabs/components/VerticalTabItem.module.css          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.module.css b/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.module.css
index adcdb96c8..0dc0647c4 100644
--- a/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.module.css
+++ b/packages/ui/src/2_molecules/VerticalTabs/components/VerticalTabItem.module.css
@@ -1,6 +1,6 @@
 .button {
   @apply w-full block text-left text-gray-10 text-opacity-50 font-medium;
-  &.active {
+  &.active, &:hover {
     @apply text-opacity-100;
   }
 

From 78c90e78bd0645a126516f3dabbe2c0df36e2d63 Mon Sep 17 00:00:00 2001
From: Victor Creed <victor@sovryn.app>
Date: Wed, 19 Oct 2022 14:48:14 +0300
Subject: [PATCH 13/14] fix: modify storybook controls

---
 .../VerticalTabs/VerticalTabs.stories.tsx     | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx
index 5615de976..95078e38d 100644
--- a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx
+++ b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx
@@ -1,29 +1,34 @@
+import { useArgs } from '@storybook/client-api';
 import { Story } from '@storybook/react';
 
-import { ComponentProps, useReducer, useState } from 'react';
+import { ComponentProps, useCallback, useReducer, useState } from 'react';
 
 import { Button, Heading } from '../../1_atoms';
 import { Dialog } from '../Dialog/Dialog';
 import { DialogSize } from '../Dialog/Dialog.types';
 import { VerticalTabs } from './VerticalTabs';
 
+const EXCLUDED_CONTROLS = ['header', 'footer', 'onChange', 'selectedIndex'];
+
 export default {
   title: 'Molecule/VerticalTabs',
   component: VerticalTabs,
   parameters: {
     layout: 'fullscreen',
+    controls: {
+      exclude: EXCLUDED_CONTROLS,
+    },
   },
 };
 
 const Template: Story<ComponentProps<typeof VerticalTabs>> = args => {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  return (
-    <VerticalTabs
-      {...args}
-      selectedIndex={selectedIndex}
-      onChange={setSelectedIndex}
-    />
+  const [, updateArgs] = useArgs();
+  const handleOnChange = useCallback(
+    (index: number) => updateArgs({ selectedIndex: index }),
+    [updateArgs],
   );
+
+  return <VerticalTabs {...args} onChange={handleOnChange} />;
 };
 
 const DialogTemplate: Story<ComponentProps<typeof VerticalTabs>> = args => {
@@ -69,10 +74,14 @@ Basic.args = {
       ),
     },
   ],
+  selectedIndex: 0,
   header: props => (
     <Heading>Selected: {props.items[props.selectedIndex].label}</Heading>
   ),
   footer: () => <div>Footer</div>,
+  className: '',
+  tabsClassName: '',
+  contentClassName: '',
 };
 
 export const InDialog = DialogTemplate.bind({});
@@ -98,6 +107,10 @@ InDialog.args = {
   tabsClassName: 'rounded-l-lg',
   className: 'rounded-lg',
 };
+
 InDialog.parameters = {
   layout: 'centered',
+  controls: {
+    exclude: [...EXCLUDED_CONTROLS, 'selectedIndex'],
+  },
 };

From bbc729503401e4faf3953da02435c865b44bf943 Mon Sep 17 00:00:00 2001
From: Victor Creed <victor@sovryn.app>
Date: Wed, 19 Oct 2022 15:51:46 +0300
Subject: [PATCH 14/14] fix: selectedIndex in the storybook

---
 .../ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx
index 95078e38d..8383e35ce 100644
--- a/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx
+++ b/packages/ui/src/2_molecules/VerticalTabs/VerticalTabs.stories.tsx
@@ -8,7 +8,7 @@ import { Dialog } from '../Dialog/Dialog';
 import { DialogSize } from '../Dialog/Dialog.types';
 import { VerticalTabs } from './VerticalTabs';
 
-const EXCLUDED_CONTROLS = ['header', 'footer', 'onChange', 'selectedIndex'];
+const EXCLUDED_CONTROLS = ['header', 'footer', 'onChange'];
 
 export default {
   title: 'Molecule/VerticalTabs',