From c2a6edc0e46b6bf8140d4762a814cc41a0aab67f Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Mon, 15 Jul 2024 21:23:10 +0300
Subject: [PATCH] add: resizeble panels, fix: search, refactoring

---
 package.json                                  |  1 +
 public/icons/arrow-back.svg                   |  1 +
 public/icons/arrows.svg                       |  1 +
 src/app/App.vue                               |  2 +-
 src/app/providers/router/index.ts             |  6 +-
 src/app/styles/primary/exceptions.scss        | 12 +++
 .../filter/lib/composables/useFilter.ts       | 40 +++++++++
 src/features/filter/ui/SearchFilter.vue       | 36 +++++++-
 src/features/plan/ui/PlanCard.vue             | 47 ++++++++--
 src/layouts/ui/SidebarLayout.vue              | 45 ++++++++--
 src/widgets/layout/ui/sidebar/Sidebar.vue     | 90 ++++++++++++++++---
 src/widgets/layout/ui/sidebar/WorkSpace.vue   | 31 +++++--
 yarn.lock                                     | 25 +++++-
 13 files changed, 294 insertions(+), 43 deletions(-)
 create mode 100644 public/icons/arrow-back.svg
 create mode 100644 public/icons/arrows.svg
 create mode 100644 src/features/filter/lib/composables/useFilter.ts

diff --git a/package.json b/package.json
index fb60b72..10e9bad 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "floating-vue": "^5.2.2",
     "lucide-vue-next": "^0.396.0",
     "pinia": "^2.1.7",
+    "splitpanes": "^3.1.5",
     "vee-validate": "^4.13.1",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3",
diff --git a/public/icons/arrow-back.svg b/public/icons/arrow-back.svg
new file mode 100644
index 0000000..93ed762
--- /dev/null
+++ b/public/icons/arrow-back.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.294 9.69805C10.2008 9.60614 10.1268 9.49661 10.0763 9.37584C10.0258 9.25507 9.99976 9.12546 9.99976 8.99455C9.99976 8.86364 10.0258 8.73403 10.0763 8.61327C10.1268 8.4925 10.2008 8.38297 10.294 8.29105C10.4831 8.10449 10.738 7.99988 11.0035 7.99988C11.2691 7.99988 11.524 8.10449 11.713 8.29105L14.678 11.2311C14.7802 11.3324 14.8614 11.453 14.9167 11.5858C14.9721 11.7186 15.0006 11.8611 15.0006 12.0051C15.0006 12.149 14.9721 12.2915 14.9167 12.4243C14.8614 12.5572 14.7802 12.6777 14.678 12.7791L11.723 15.7091C11.534 15.8959 11.2789 16.0007 11.013 16.0007C10.7472 16.0007 10.4921 15.8959 10.303 15.7091C10.2098 15.6171 10.1358 15.5076 10.0853 15.3868C10.0348 15.2661 10.0088 15.1365 10.0088 15.0056C10.0088 14.8746 10.0348 14.745 10.0853 14.6243C10.1358 14.5035 10.2098 14.394 10.303 14.3021L12.621 12.0051L10.294 9.69805V9.69805Z" class="ghly4t0Xcm0PLQ"></path></svg>
\ No newline at end of file
diff --git a/public/icons/arrows.svg b/public/icons/arrows.svg
new file mode 100644
index 0000000..61e61bd
--- /dev/null
+++ b/public/icons/arrows.svg
@@ -0,0 +1 @@
+<svg data-v-e329aaf9="" data-v-90ec8441="" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="simple" style="height: 24px; width: 24px; --7ea24000: inherit;"><path opacity="0.39" d="M17.8 17.4C18.2 17.8 18.1 18.5001 17.7 18.8001C17.3 19.2001 16.6 19.1 16.3 18.7L11.3 12.7C11 12.3 11 11.8 11.3 11.4L16.3 5.39996C16.7 4.99996 17.3 4.90011 17.7 5.30011C18.1 5.70011 18.2 6.30001 17.8 6.70001L13.5 11.8001C13.4 11.9001 13.4 12.2001 13.5 12.3001L17.8 17.4Z" fill="#3f3f46"></path><path d="M12.8 17.4C13.2 17.8 13.1 18.5001 12.7 18.8001C12.3 19.2001 11.6 19.1 11.3 18.7L6.29998 12.7C5.99998 12.3 5.99998 11.8 6.29998 11.4L11.3 5.39996C11.7 4.99996 12.3 4.90011 12.7 5.30011C13.1 5.70011 13.2 6.30001 12.8 6.70001L8.49999 11.8001C8.39999 11.9001 8.39999 12.2001 8.49999 12.3001L12.8 17.4Z" fill="#71717a"></path></svg>
\ No newline at end of file
diff --git a/src/app/App.vue b/src/app/App.vue
index 56ba833..c36478f 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -10,5 +10,5 @@ import { Toaster } from 'vue-sonner';
       </KeepAlive>
     </RouterView>
   </component>
-  <Toaster position="bottom-right" closeButton />
+  <Toaster position="bottom-right" close-button />
 </template>
diff --git a/src/app/providers/router/index.ts b/src/app/providers/router/index.ts
index ea9c0ff..de98924 100644
--- a/src/app/providers/router/index.ts
+++ b/src/app/providers/router/index.ts
@@ -81,7 +81,7 @@ export const router = createRouter({
 router.beforeEach((to, from) => {
   // TODO(@mnenie): Add guards logic
   // Needs to add guard auth logic in router
-  if (to.meta.requiresAuth === true) {
-    return router.push({ name: RouteNames.login });
-  }
+  // if (to.meta.requiresAuth === true) {
+  //   return router.push({ name: RouteNames.login });
+  // }
 });
diff --git a/src/app/styles/primary/exceptions.scss b/src/app/styles/primary/exceptions.scss
index 1a90d27..89d1ee9 100644
--- a/src/app/styles/primary/exceptions.scss
+++ b/src/app/styles/primary/exceptions.scss
@@ -29,3 +29,15 @@ canvas{
   width: 100% !important;
   height: 100% !important;
 }
+
+.splitpanes--vertical .splitpanes__pane{
+  transition: none;
+}
+
+.splitpanes--vertical > .splitpanes__splitter {
+  display: none;
+}
+
+.splitpanes__pane{
+  overflow: unset;
+}
diff --git a/src/features/filter/lib/composables/useFilter.ts b/src/features/filter/lib/composables/useFilter.ts
new file mode 100644
index 0000000..c9de838
--- /dev/null
+++ b/src/features/filter/lib/composables/useFilter.ts
@@ -0,0 +1,40 @@
+import { nextTick, onMounted, onUnmounted } from 'vue';
+import type { Ref } from 'vue';
+
+export default function useFilter(
+  inputRef: Ref<HTMLElement | null>,
+  props: { isExpanded: boolean },
+  emit: (e: 'onToggle') => void
+) {
+  const onToggleArea = () => {
+    if (!props.isExpanded) {
+      emit('onToggle');
+      nextTick(() => {
+        inputRef.value = document.getElementById('input') as HTMLInputElement;
+        if (inputRef.value) {
+          inputRef.value.focus();
+        }
+      });
+    }
+  };
+  const handleKeyDownFilter = (e: KeyboardEvent) => {
+    if (document) {
+      inputRef.value = document.getElementById('input')!;
+      if (e.metaKey && e.key === 'k') {
+        inputRef.value.focus();
+      }
+    }
+  };
+
+  onMounted(() => {
+    window.addEventListener('keydown', handleKeyDownFilter);
+  });
+  onUnmounted(() => {
+    window.removeEventListener('keydown', handleKeyDownFilter);
+  });
+
+  return {
+    handleKeyDownFilter,
+    onToggleArea
+  };
+}
diff --git a/src/features/filter/ui/SearchFilter.vue b/src/features/filter/ui/SearchFilter.vue
index 5f2cf28..568cdba 100644
--- a/src/features/filter/ui/SearchFilter.vue
+++ b/src/features/filter/ui/SearchFilter.vue
@@ -1,22 +1,42 @@
 <script setup lang="ts">
 import { UiInput, UiBadge } from '@/shared/ui';
 import { Search } from 'lucide-vue-next';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+import useFilter from '../lib/composables/useFilter';
+
+const props = defineProps<{
+  isExpanded: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'onToggle'): void;
+}>();
 
 const search = ref('');
+const inputRef = ref<HTMLElement | null>(null);
+const iconColor = computed(() => {
+  return props.isExpanded ? 'rgb(82 82 91 / 0.9)' : 'var(--zinc-700)';
+});
+
+const { onToggleArea } = useFilter(inputRef, props, emit);
 </script>
 
 <template>
   <div :class="$style.search_container">
-    <Search :class="$style.icon" :color="'rgb(82 82 91 / 0.9)'" />
+    <Search
+      :class="[isExpanded ? $style.icon : $style.icon_no_expanded]"
+      :color="iconColor"
+      @click="onToggleArea"
+    />
     <UiInput
+      v-show="isExpanded"
       id="input"
       ref="inputRef"
       v-model.trim="search"
       :placeholder="'Search'"
       :class="$style.input_filter"
     />
-    <UiBadge variant="secondary" :class="$style.badge">
+    <UiBadge v-show="isExpanded" variant="secondary" :class="$style.badge">
       <span>⌘</span>
       <span>K</span>
     </UiBadge>
@@ -38,6 +58,16 @@ const search = ref('');
     width: 16px;
   }
 
+  .icon_no_expanded {
+    cursor: pointer;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    height: 16px;
+    width: 16px;
+  }
+
   .input_filter {
     padding-left: 24px;
     padding-right: 40px;
diff --git a/src/features/plan/ui/PlanCard.vue b/src/features/plan/ui/PlanCard.vue
index e03d6be..6bbb036 100644
--- a/src/features/plan/ui/PlanCard.vue
+++ b/src/features/plan/ui/PlanCard.vue
@@ -1,33 +1,51 @@
 <script setup lang="ts">
 import { UiProgressBar } from '@/shared/ui';
 import { WandSparkles } from 'lucide-vue-next';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  isExpanded: boolean;
+}>();
+
+const planPosition = computed(() => {
+  return props.isExpanded ? 'flex-start' : 'center';
+});
+
+const iconSize = computed(() => {
+  return props.isExpanded ? '18px' : '17px';
+});
 </script>
 <template>
   <div>
     <div :class="$style.content">
-      <WandSparkles :class="$style.icon" :color="'var(--zinc-900)'" />
-      <div :class="$style.plan_about">
+      <WandSparkles :class="$style.icon" :color="'var(--zinc-700)'" />
+      <div v-if="isExpanded" :class="$style.plan_about">
         <div :class="$style.text">
           <span class="text-xs">Upgrade your plan</span>
           <span class="text-xs">6/10</span>
         </div>
         <UiProgressBar :progress="6" />
       </div>
+      <div v-else :class="$style.absolute_plan">
+        <span>6</span>
+      </div>
     </div>
   </div>
 </template>
 
 <style module lang="scss">
 .content {
+  position: relative;
   display: flex;
-  align-items: flex-start;
+  align-items: v-bind('planPosition');
+  justify-content: v-bind('planPosition');
   gap: 8px;
   width: 100%;
 
   .icon {
     min-width: 16px;
-    width: 18px;
-    height: 18px;
+    width: v-bind('iconSize');
+    height: v-bind('iconSize');
   }
 
   .plan_about {
@@ -50,5 +68,24 @@ import { WandSparkles } from 'lucide-vue-next';
       }
     }
   }
+
+  .absolute_plan {
+    position: absolute;
+    right: -2px;
+    top: -4px;
+    width: 11px;
+    height: 11px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--purple-main);
+    border-radius: 50%;
+
+    & > span {
+      color: white;
+      font-weight: 500 !important;
+      font-size: 9px;
+    }
+  }
 }
 </style>
diff --git a/src/layouts/ui/SidebarLayout.vue b/src/layouts/ui/SidebarLayout.vue
index 0e61ea8..3b957d5 100644
--- a/src/layouts/ui/SidebarLayout.vue
+++ b/src/layouts/ui/SidebarLayout.vue
@@ -1,17 +1,45 @@
 <script setup lang="ts">
+// @ts-expect-error missing type
+import { Splitpanes, Pane } from 'splitpanes';
+import 'splitpanes/dist/splitpanes.css';
+import { computed, ref } from 'vue';
 import { Sidebar, HeaderMain } from '@/widgets/layout';
+import { useLocalStorage } from '@vueuse/core';
+
+const isExpanded = useLocalStorage('isExpanded', true);
+const transitionFl = ref(false);
+
+const widthSidebar = computed(() => {
+  return isExpanded.value ? '22%' : '4%';
+});
+const widthMainContainer = computed(() => {
+  return `calc(100% - ${widthSidebar.value})`;
+});
+const onToggleArea = () => {
+  isExpanded.value = !isExpanded.value;
+  transitionFl.value = true;
+};
 </script>
 
 <template>
-  <div :class="$style.sidebar_layout">
-    <Sidebar />
-    <div :class="$style.main_part">
-      <HeaderMain />
-      <div :class="$style.slot">
-        <slot />
+  <Splitpanes :class="$style.sidebar_layout">
+    <Pane
+      min-size="4"
+      max-size="22"
+      :size="widthSidebar"
+      :style="{ transition: transitionFl && 'width .2s ease-out' }"
+    >
+      <Sidebar :is-expanded @on-toggle="onToggleArea" />
+    </Pane>
+    <Pane :size="widthMainContainer">
+      <div :class="$style.main_part">
+        <HeaderMain />
+        <div :class="$style.slot">
+          <slot />
+        </div>
       </div>
-    </div>
-  </div>
+    </Pane>
+  </Splitpanes>
 </template>
 
 <style module lang="scss">
@@ -26,7 +54,6 @@ import { Sidebar, HeaderMain } from '@/widgets/layout';
     display: flex;
     flex-direction: column;
     height: 100%;
-    width: calc(100% - 260px);
 
     .slot {
       background-color: var(--zinc-50);
diff --git a/src/widgets/layout/ui/sidebar/Sidebar.vue b/src/widgets/layout/ui/sidebar/Sidebar.vue
index 020e157..13fa149 100644
--- a/src/widgets/layout/ui/sidebar/Sidebar.vue
+++ b/src/widgets/layout/ui/sidebar/Sidebar.vue
@@ -4,46 +4,83 @@ import { links } from '../../config/links';
 import WorkSpace from './WorkSpace.vue';
 import { SearchFilter } from '@/features/filter';
 import { PlanCard } from '@/features/plan';
+import { computed } from 'vue';
+import { ChevronRight } from 'lucide-vue-next';
+
+const props = defineProps<{
+  isExpanded: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'onToggle'): void;
+}>();
+
+const contentPosition = computed(() => {
+  return props.isExpanded ? 'space-between' : 'center';
+});
+const paddingExpanded = computed(() => {
+  return props.isExpanded ? '10px 15px 12px 15px' : '10px';
+});
 </script>
 
 <template>
-  <nav :class="$style.sidebar">
+  <nav :class="$style.sidebar" :style="{ padding: paddingExpanded }">
     <div :class="$style.name">
-      <img src="/icons/kanban.png" />
-      <h3 class="heading-4">Jenda</h3>
-      <UiBadge>free</UiBadge>
+      <div :class="$style.text">
+        <img src="/icons/kanban.png" :style="{ marginTop: isExpanded ? '0px' : '3px' }" />
+        <h3 v-show="isExpanded" class="heading-4">Jenda</h3>
+        <UiBadge v-show="isExpanded">free</UiBadge>
+      </div>
+      <div v-if="!isExpanded" :class="$style.arrow_expanded">
+        <ChevronRight :size="14" color="white" @click="emit('onToggle')" />
+      </div>
+      <img v-show="isExpanded" src="/icons/arrows.svg" :class="$style.icon" @click="emit('onToggle')" />
     </div>
     <div :class="$style.content">
       <div>
-        <SearchFilter />
-        <WorkSpace :links />
+        <SearchFilter :is-expanded @on-toggle="emit('onToggle')" />
+        <WorkSpace :links :is-expanded />
       </div>
-      <PlanCard />
+      <PlanCard :is-expanded />
     </div>
   </nav>
 </template>
 
 <style module lang="scss">
-@import '@/app/styles/mixins';
-
 .sidebar {
-  max-width: 260px;
-  min-width: 260px;
+  position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;
   height: 100%;
-  padding: 10px 15px 12px 15px;
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  user-select: none;
   border-right: 1px solid var(--zinc-200);
 
   .name {
+    position: relative;
     display: flex;
     align-items: center;
-    gap: 10px;
-    cursor: default;
+    justify-content: v-bind('contentPosition');
     margin-bottom: 18px;
 
+    .text {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      cursor: default;
+    }
+
+    .icon {
+      color: var(--zinc-400);
+      cursor: pointer;
+      transition: 0.1s ease-in;
+
+      &:hover {
+        color: var(--zinc-500);
+      }
+    }
+
     & img {
       width: 24px;
       height: 24px;
@@ -55,6 +92,31 @@ import { PlanCard } from '@/features/plan';
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+
+    .menu {
+      width: 100%;
+      color: var(--zinc-500);
+      cursor: pointer;
+      padding: 0 auto;
+    }
+  }
+
+  .arrow_expanded {
+    position: absolute;
+    right: -20px;
+    top: 60%;
+    transform: translateY(-50%);
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0.4);
+    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
   }
 }
 </style>
diff --git a/src/widgets/layout/ui/sidebar/WorkSpace.vue b/src/widgets/layout/ui/sidebar/WorkSpace.vue
index 3fc8a94..3891542 100644
--- a/src/widgets/layout/ui/sidebar/WorkSpace.vue
+++ b/src/widgets/layout/ui/sidebar/WorkSpace.vue
@@ -7,6 +7,7 @@ import { RouteNames } from '@/shared/config/consts';
 
 const props = defineProps<{
   links: Link[];
+  isExpanded: boolean;
 }>();
 
 const route = useRoute();
@@ -28,15 +29,33 @@ const pathName = computed(() => {
     isActive: isCurrentPath(link)
   }));
 });
+
+const contentPosition = computed(() => {
+  return props.isExpanded ? 'flex-start' : 'center';
+});
 </script>
 
 <template>
-  <p :class="[$style.name_block, 'text-sm']">workspace</p>
+  <p v-show="isExpanded" :class="[$style.name_block, 'text-sm']">workspace</p>
   <div :class="$style.sidebar_main_links">
-    <RouterLink v-for="link in pathName" :key="link.id" :to="{ name: link.pathName }" :class="$style.link">
-      <UiButton :variant="link.isActive ? 'secondary' : 'ghost'" :class="$style.link_btn">
+    <RouterLink
+      v-for="link in pathName"
+      :key="link.id"
+      v-tooltip.right="{
+        content: link.title,
+        triggers: ['hover'],
+        disabled: isExpanded
+      }"
+      :to="{ name: link.pathName }"
+      :class="$style.link"
+    >
+      <UiButton
+        :variant="link.isActive ? 'secondary' : 'ghost'"
+        :class="$style.link_btn"
+        :style="{ padding: !isExpanded ? '0px' : '' }"
+      >
         <component :is="link.icon" :size="18" :color="'rgb(39 39 42)'" />
-        <span class="text-sm">{{ link.title }}</span>
+        <span v-show="isExpanded" class="text-sm">{{ link.title }}</span>
       </UiButton>
     </RouterLink>
   </div>
@@ -67,9 +86,9 @@ const pathName = computed(() => {
     justify-content: flex-start;
     width: 100%;
 
-    .link_btn{
+    .link_btn {
       width: 100%;
-      justify-content: flex-start;
+      justify-content: v-bind('contentPosition');
       gap: 6px;
       box-shadow: none;
     }
diff --git a/yarn.lock b/yarn.lock
index f922a8f..55dfdd3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6196,6 +6196,11 @@ speakingurl@^14.0.1:
   resolved "https://registry.yarnpkg.com/speakingurl/-/speakingurl-14.0.1.tgz#f37ec8ddc4ab98e9600c1c9ec324a8c48d772a53"
   integrity sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==
 
+splitpanes@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/splitpanes/-/splitpanes-3.1.5.tgz#de81da25681c252d131747a9cb48a17156e2b210"
+  integrity sha512-r3Mq2ITFQ5a2VXLOy4/Sb2Ptp7OfEO8YIbhVJqJXoFc9hc5nTXXkCvtVDjIGbvC0vdE7tse+xTM9BMjsszP6bw==
+
 stackback@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/stackback/-/stackback-0.0.2.tgz#1ac8a0d9483848d1695e418b6d031a3c3ce68e3b"
@@ -6250,7 +6255,16 @@ string-argv@~0.3.2:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -6284,7 +6298,14 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==