From 766818da927223024bda765b326d305e5cfe5c16 Mon Sep 17 00:00:00 2001
From: Thomas Heyenbrock <thomas.heyenbrock@gmail.com>
Date: Wed, 27 Jul 2022 21:02:32 +0200
Subject: [PATCH] move tab components to `@graphiql/react` (#2591)

---
 .changeset/five-pillows-fail.md                        |  2 +-
 packages/graphiql-react/src/ui/index.ts                |  1 +
 .../Tabs.tsx => graphiql-react/src/ui/tabs.tsx}        | 10 ++--------
 packages/graphiql/__mocks__/@graphiql/react.tsx        |  3 +++
 packages/graphiql/src/components/GraphiQL.tsx          |  5 +++--
 5 files changed, 10 insertions(+), 11 deletions(-)
 rename packages/{graphiql/src/components/Tabs.tsx => graphiql-react/src/ui/tabs.tsx} (91%)

diff --git a/.changeset/five-pillows-fail.md b/.changeset/five-pillows-fail.md
index 9bb1677681e..8fda40b2884 100644
--- a/.changeset/five-pillows-fail.md
+++ b/.changeset/five-pillows-fail.md
@@ -3,7 +3,7 @@
 ---
 
 Add new components:
-- UI components (`Button`, `Dropdown`, `Spinner`, `UnStyledButton` and lots of icon components)
+- UI components (`Button`, `Dropdown`, `Spinner`, `Tab`, `TabAddButton`, `Tabs`, `UnStyledButton` and lots of icon components)
 - Editor components (`QueryEditor`, `VariableEditor`, `HeaderEditor` and `ResponseEditor`)
 - Toolbar components (`ExecuteButton` and `ToolbarButton`)
 - Docs components (`Argument`, `DefaultValue`, `DeprecationReason`, `Directive`, `DocExplorer`, `ExplorerSection`, `FieldDocumentation`, `FieldLink`, `SchemaDocumentation`, `Search`, `TypeDocumentation` and `TypeLink`)
diff --git a/packages/graphiql-react/src/ui/index.ts b/packages/graphiql-react/src/ui/index.ts
index 1051888c6f5..075e0c433a0 100644
--- a/packages/graphiql-react/src/ui/index.ts
+++ b/packages/graphiql-react/src/ui/index.ts
@@ -2,3 +2,4 @@ export * from './button';
 export * from './dropdown';
 export * from './markdown';
 export * from './spinner';
+export * from './tabs';
diff --git a/packages/graphiql/src/components/Tabs.tsx b/packages/graphiql-react/src/ui/tabs.tsx
similarity index 91%
rename from packages/graphiql/src/components/Tabs.tsx
rename to packages/graphiql-react/src/ui/tabs.tsx
index 65e6f679d80..3544d1fad2f 100644
--- a/packages/graphiql/src/components/Tabs.tsx
+++ b/packages/graphiql-react/src/ui/tabs.tsx
@@ -1,9 +1,3 @@
-import React from 'react';
-
-/**
- * TODO: extract with other components to @graphiql/react
- */
-
 function TabCloseButton(props: { onClick: () => void }) {
   return (
     <div
@@ -20,7 +14,7 @@ function TabCloseButton(props: { onClick: () => void }) {
   );
 }
 
-export type TabProps = {
+type TabProps = {
   isActive: boolean;
   title: string;
   isCloseable: boolean;
@@ -59,7 +53,7 @@ export function TabAddButton(props: { onClick: () => void }) {
   );
 }
 
-export type TabsProps = {
+type TabsProps = {
   children: Array<React.ReactNode>;
   tabsProps?: React.HTMLAttributes<{}>;
 };
diff --git a/packages/graphiql/__mocks__/@graphiql/react.tsx b/packages/graphiql/__mocks__/@graphiql/react.tsx
index 0423154a9ae..3dd13105548 100644
--- a/packages/graphiql/__mocks__/@graphiql/react.tsx
+++ b/packages/graphiql/__mocks__/@graphiql/react.tsx
@@ -69,6 +69,9 @@ export {
   StopIcon,
   StorageContext,
   StorageContextProvider,
+  Tab,
+  TabAddButton,
+  Tabs,
   ToolbarButton,
   TypeDocumentation,
   TypeIcon,
diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
index f57185eebd7..c1315db7260 100644
--- a/packages/graphiql/src/components/GraphiQL.tsx
+++ b/packages/graphiql/src/components/GraphiQL.tsx
@@ -46,6 +46,9 @@ import {
   SettingsIcon,
   Spinner,
   StorageContextProvider,
+  Tab,
+  TabAddButton,
+  Tabs,
   ToolbarButton,
   UnStyledButton,
   useAutoCompleteLeafs,
@@ -78,8 +81,6 @@ import find from '../utility/find';
 import { formatError, formatResult } from '@graphiql/toolkit';
 import type { Fetcher, GetDefaultFieldNamesFn } from '@graphiql/toolkit';
 
-import { Tab, TabAddButton, Tabs } from './Tabs';
-
 const majorVersion = parseInt(React.version.slice(0, 2), 10);
 
 if (majorVersion < 16) {