From 31cdb368bfb099a162cd2f0cd0039a13d2e26c65 Mon Sep 17 00:00:00 2001
From: Sonatai <gebauerjenny@yahoo.de>
Date: Fri, 5 Jan 2024 10:47:51 +0100
Subject: [PATCH] #144 separate shared component types

---
 src/components/Feature/Feature.tsx            | 25 +++++--------------
 src/components/Feature/types.d.ts             |  6 +++++
 src/components/shared/Layout/Layout.tsx       |  7 +-----
 src/components/shared/Layout/OnPageNav.tsx    |  9 +++----
 src/components/shared/Layout/types.d.ts       | 12 +++++++++
 .../shared/LoadingSpinner/LoadingSpinner.tsx  |  5 +---
 .../shared/LoadingSpinner/types.d.ts          |  5 ++++
 .../MarkdownRenderer.tsx                      |  7 ++----
 .../shared/MarkdownRenderer/index.ts          |  1 +
 .../shared/MarkdownRenderer/types.d.ts        |  5 ++++
 src/components/shared/Message/Message.tsx     | 18 +++++--------
 src/components/shared/Message/types.d.ts      | 11 ++++++++
 src/components/shared/NavLink/NavAnchor.tsx   | 10 ++------
 src/components/shared/NavLink/NavLink.tsx     |  7 +-----
 src/components/shared/NavLink/types.d.ts      |  8 ++++++
 .../shared/PageTemplate/MarkdownPage.tsx      |  5 +---
 src/components/shared/PageTemplate/types.d.ts |  5 ++++
 .../SyntaxHighlighter.tsx                     |  6 +----
 .../shared/SyntaxHighlighter/index.ts         |  1 +
 .../shared/SyntaxHighlighter/types.d.ts       |  6 +++++
 src/components/shared/Tab/CustomTab.tsx       | 11 +-------
 src/components/shared/Tab/types.d.ts          | 12 +++++++++
 .../Table/ResponsiveTable/ResponsiveTable.tsx | 11 +-------
 .../shared/Table/ResponsiveTable/types.d.ts   | 12 +++++++++
 src/types.d.ts                                |  8 +++++-
 25 files changed, 117 insertions(+), 96 deletions(-)
 create mode 100644 src/components/Feature/types.d.ts
 create mode 100644 src/components/shared/Layout/types.d.ts
 create mode 100644 src/components/shared/LoadingSpinner/types.d.ts
 rename src/components/shared/{ => MarkdownRenderer}/MarkdownRenderer.tsx (95%)
 create mode 100644 src/components/shared/MarkdownRenderer/index.ts
 create mode 100644 src/components/shared/MarkdownRenderer/types.d.ts
 create mode 100644 src/components/shared/Message/types.d.ts
 create mode 100644 src/components/shared/NavLink/types.d.ts
 create mode 100644 src/components/shared/PageTemplate/types.d.ts
 rename src/components/shared/{ => SyntaxHighlighter}/SyntaxHighlighter.tsx (85%)
 create mode 100644 src/components/shared/SyntaxHighlighter/index.ts
 create mode 100644 src/components/shared/SyntaxHighlighter/types.d.ts
 create mode 100644 src/components/shared/Tab/types.d.ts
 create mode 100644 src/components/shared/Table/ResponsiveTable/types.d.ts

diff --git a/src/components/Feature/Feature.tsx b/src/components/Feature/Feature.tsx
index 8cb0164..a286505 100644
--- a/src/components/Feature/Feature.tsx
+++ b/src/components/Feature/Feature.tsx
@@ -5,7 +5,10 @@ import { Fragment } from 'react';
 
 import { faHashtag } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IRow, ResponsiveTable, SyntaxHighlighter } from '../shared';
+import { ResponsiveTable, SyntaxHighlighter } from '../shared';
+import { IMinimalFeature } from 'spock-react-types';
+import { IWhereTable } from 'spock-react/components/feature-types';
+import { IRow } from 'spock-react/shared/responsive-table-types';
 
 /*
 className === unique key for spec
@@ -14,23 +17,6 @@ feature.id === unique key for test
 kind: GIVEN | WHEN | THEN | AND | CLEANUP | WHERE | EXPECT
 */
 
-export interface IBlock {
-    kind: string;
-    text: string;
-    /* eslint-disable  @typescript-eslint/consistent-indexed-object-style */
-    code: string[] | { [key: string]: string[] };
-}
-
-export interface IFeature {
-    id: string;
-    blocks: IBlock[];
-}
-
-interface IWhereTable {
-    /* eslint-disable  @typescript-eslint/consistent-indexed-object-style */
-    data: { [key: string]: string[] };
-}
-
 // It gives you a responsive table with the where-table from the specs
 const WhereTable = (props: IWhereTable): JSX.Element => {
     const { data } = props;
@@ -56,7 +42,7 @@ const WhereTable = (props: IWhereTable): JSX.Element => {
     return <ResponsiveTable headers={headers} rows={rows as IRow[]} />;
 };
 
-export const Feature = (props: IFeature): JSX.Element => {
+export const Feature = (props: IMinimalFeature): JSX.Element => {
     const { id, blocks } = props;
 
     return (
@@ -96,6 +82,7 @@ export const Feature = (props: IFeature): JSX.Element => {
                             Object.keys(block.code).length !== 0 && (
                                 <WhereTable
                                     data={
+                                        /* eslint-disable  @typescript-eslint/consistent-indexed-object-style */
                                         block.code as {
                                             [key: string]: string[];
                                         }
diff --git a/src/components/Feature/types.d.ts b/src/components/Feature/types.d.ts
new file mode 100644
index 0000000..0af298b
--- /dev/null
+++ b/src/components/Feature/types.d.ts
@@ -0,0 +1,6 @@
+declare module 'spock-react/components/feature-types' {
+    interface IWhereTable {
+        /* eslint-disable  @typescript-eslint/consistent-indexed-object-style */
+        data: { [key: string]: string[] };
+    }
+}
diff --git a/src/components/shared/Layout/Layout.tsx b/src/components/shared/Layout/Layout.tsx
index 08c5898..8dfa412 100644
--- a/src/components/shared/Layout/Layout.tsx
+++ b/src/components/shared/Layout/Layout.tsx
@@ -3,12 +3,7 @@ import './styles.css';
 import { PropsWithChildren } from 'react';
 
 import { OnPageNav } from './OnPageNav';
-import { IFeature } from 'spock-react-types';
-
-interface ILayout {
-    hasOnPageNav?: boolean;
-    features?: IFeature[];
-}
+import { ILayout } from 'spock-react/shared/layout-types';
 
 export const Layout = (props: PropsWithChildren<ILayout>): JSX.Element => {
     const { hasOnPageNav, children, features } = props;
diff --git a/src/components/shared/Layout/OnPageNav.tsx b/src/components/shared/Layout/OnPageNav.tsx
index 3aa2e27..de6950c 100644
--- a/src/components/shared/Layout/OnPageNav.tsx
+++ b/src/components/shared/Layout/OnPageNav.tsx
@@ -1,11 +1,8 @@
 import { nanoid } from 'nanoid';
 
 import { NavAnchor } from '..';
-import { IFeature } from '../../Feature';
-
-interface IOnPageNave {
-    features: IFeature[];
-}
+import { IOnPageNave } from 'spock-react/shared/layout-types';
+import { IMinimalFeature } from 'spock-react-types';
 
 export const OnPageNav = (props: IOnPageNave): JSX.Element => {
     const { features } = props;
@@ -15,7 +12,7 @@ export const OnPageNav = (props: IOnPageNave): JSX.Element => {
             <h4>On the Page</h4>
             <nav>
                 <ul className="layout__list">
-                    {features.map((feature: IFeature) => (
+                    {features.map((feature: IMinimalFeature) => (
                         <NavAnchor href={feature.id} key={nanoid()}>
                             {feature.id}
                         </NavAnchor>
diff --git a/src/components/shared/Layout/types.d.ts b/src/components/shared/Layout/types.d.ts
new file mode 100644
index 0000000..2858cf3
--- /dev/null
+++ b/src/components/shared/Layout/types.d.ts
@@ -0,0 +1,12 @@
+declare module 'spock-react/shared/layout-types' {
+    import { IFeature, IMinimalFeature } from 'spock-react-types';
+
+    export interface ILayout {
+        hasOnPageNav?: boolean;
+        features?: IFeature[];
+    }
+
+    interface IOnPageNave {
+        features: IMinimalFeature[];
+    }
+}
diff --git a/src/components/shared/LoadingSpinner/LoadingSpinner.tsx b/src/components/shared/LoadingSpinner/LoadingSpinner.tsx
index 9861415..c00d8a8 100644
--- a/src/components/shared/LoadingSpinner/LoadingSpinner.tsx
+++ b/src/components/shared/LoadingSpinner/LoadingSpinner.tsx
@@ -2,10 +2,7 @@ import './styles.css';
 
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-interface ILoadingSpinner {
-    isLoading: boolean;
-}
+import { ILoadingSpinner } from 'spock-react/shared/loading-spinner-types';
 
 export const LoadingSpinner = (props: ILoadingSpinner): JSX.Element => {
     const { isLoading } = props;
diff --git a/src/components/shared/LoadingSpinner/types.d.ts b/src/components/shared/LoadingSpinner/types.d.ts
new file mode 100644
index 0000000..1051e5c
--- /dev/null
+++ b/src/components/shared/LoadingSpinner/types.d.ts
@@ -0,0 +1,5 @@
+declare module 'spock-react/shared/loading-spinner-types' {
+    export interface ILoadingSpinner {
+        isLoading: boolean;
+    }
+}
diff --git a/src/components/shared/MarkdownRenderer.tsx b/src/components/shared/MarkdownRenderer/MarkdownRenderer.tsx
similarity index 95%
rename from src/components/shared/MarkdownRenderer.tsx
rename to src/components/shared/MarkdownRenderer/MarkdownRenderer.tsx
index ba805eb..5690eb5 100644
--- a/src/components/shared/MarkdownRenderer.tsx
+++ b/src/components/shared/MarkdownRenderer/MarkdownRenderer.tsx
@@ -10,11 +10,8 @@ import {
     MdTableHeader,
     MdTableRow,
     SyntaxHighlighter,
-} from '..';
-
-interface IMarkdownRenderer {
-    children: string;
-}
+} from '../..';
+import { IMarkdownRenderer } from 'spock-react/shared/markdown-renderer-types';
 
 export const MarkdownRenderer = (props: IMarkdownRenderer) => {
     const { children: content } = props;
diff --git a/src/components/shared/MarkdownRenderer/index.ts b/src/components/shared/MarkdownRenderer/index.ts
new file mode 100644
index 0000000..6060f67
--- /dev/null
+++ b/src/components/shared/MarkdownRenderer/index.ts
@@ -0,0 +1 @@
+export * from './MarkdownRenderer';
diff --git a/src/components/shared/MarkdownRenderer/types.d.ts b/src/components/shared/MarkdownRenderer/types.d.ts
new file mode 100644
index 0000000..a352d73
--- /dev/null
+++ b/src/components/shared/MarkdownRenderer/types.d.ts
@@ -0,0 +1,5 @@
+declare module 'spock-react/shared/markdown-renderer-types' {
+    export interface IMarkdownRenderer {
+        children: string;
+    }
+}
diff --git a/src/components/shared/Message/Message.tsx b/src/components/shared/Message/Message.tsx
index f9b75d0..3680fe7 100644
--- a/src/components/shared/Message/Message.tsx
+++ b/src/components/shared/Message/Message.tsx
@@ -1,7 +1,5 @@
 import './styles.css';
 
-import { ReactNode } from 'react';
-
 import {
     faCircleCheck,
     faCircleInfo,
@@ -9,14 +7,7 @@ import {
     faTriangleExclamation,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-type TLevel = 'error' | 'success' | 'info' | 'warning';
-
-interface IErrorMessage {
-    headline: string;
-    level: TLevel;
-    children: ReactNode;
-}
+import { IErrorMessage, TLevel } from 'spock-react/shared/message-types';
 
 export const Message = (props: IErrorMessage): JSX.Element => {
     const { headline, level, children } = props;
@@ -25,7 +16,10 @@ export const Message = (props: IErrorMessage): JSX.Element => {
         <div className="message">
             {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
             <div className={`message__header message__${level}`}>
-                <FontAwesomeIcon icon={icon(level)} className="message__icon" />
+                <FontAwesomeIcon
+                    icon={getIcon(level)}
+                    className="message__icon"
+                />
                 {headline}
             </div>
             <div className="message__content">{children}</div>
@@ -33,7 +27,7 @@ export const Message = (props: IErrorMessage): JSX.Element => {
     );
 };
 
-const icon = (level: TLevel) => {
+const getIcon = (level: TLevel) => {
     switch (level) {
         case 'error':
             return faCircleXmark;
diff --git a/src/components/shared/Message/types.d.ts b/src/components/shared/Message/types.d.ts
new file mode 100644
index 0000000..4ecc46e
--- /dev/null
+++ b/src/components/shared/Message/types.d.ts
@@ -0,0 +1,11 @@
+declare module 'spock-react/shared/message-types' {
+    import { ReactNode } from 'react';
+
+    export type TLevel = 'error' | 'success' | 'info' | 'warning';
+
+    export interface IErrorMessage {
+        headline: string;
+        level: TLevel;
+        children: ReactNode;
+    }
+}
diff --git a/src/components/shared/NavLink/NavAnchor.tsx b/src/components/shared/NavLink/NavAnchor.tsx
index 68821d3..3e30738 100644
--- a/src/components/shared/NavLink/NavAnchor.tsx
+++ b/src/components/shared/NavLink/NavAnchor.tsx
@@ -1,15 +1,9 @@
 import './styles.css';
 
-import { ReactNode } from 'react';
-
+import { INavLink } from 'spock-react/shared/nav-link-types';
 import { useActiveAnchor } from '../../../Hooks';
 
-interface INavAnchor {
-    href: string;
-    children: string | ReactNode;
-}
-
-export const NavAnchor = (props: INavAnchor) => {
+export const NavAnchor = (props: INavLink) => {
     const { children: displayText, href } = props;
 
     const { activeAnchor, setActiveAnchor } = useActiveAnchor();
diff --git a/src/components/shared/NavLink/NavLink.tsx b/src/components/shared/NavLink/NavLink.tsx
index e059617..a45c24f 100644
--- a/src/components/shared/NavLink/NavLink.tsx
+++ b/src/components/shared/NavLink/NavLink.tsx
@@ -1,15 +1,10 @@
 import './styles.css';
 
-import { ReactNode } from 'react';
 import { Link } from 'react-router-dom';
 
+import { INavLink } from 'spock-react/shared/nav-link-types';
 import { useActiveLink } from '../../../Hooks';
 
-interface INavLink {
-    href: string;
-    children: string | ReactNode;
-}
-
 export const NavLink = (props: INavLink): JSX.Element => {
     const { children: displayText, href } = props;
 
diff --git a/src/components/shared/NavLink/types.d.ts b/src/components/shared/NavLink/types.d.ts
new file mode 100644
index 0000000..cbd6b03
--- /dev/null
+++ b/src/components/shared/NavLink/types.d.ts
@@ -0,0 +1,8 @@
+declare module 'spock-react/shared/nav-link-types' {
+    import { ReactNode } from 'react';
+
+    export interface INavLink {
+        href: string;
+        children: string | ReactNode;
+    }
+}
diff --git a/src/components/shared/PageTemplate/MarkdownPage.tsx b/src/components/shared/PageTemplate/MarkdownPage.tsx
index 7687745..13570d8 100644
--- a/src/components/shared/PageTemplate/MarkdownPage.tsx
+++ b/src/components/shared/PageTemplate/MarkdownPage.tsx
@@ -1,11 +1,8 @@
+import { IMarkdownPage } from 'spock-react/shared/page-template-types';
 import { Layout, LoadingSpinner, MarkdownRenderer, Message } from '..';
 import * as config from '../../../../environment.json';
 import { useMarkdown, useScrollUp } from '../../../Hooks';
 
-interface IMarkdownPage {
-    filePath: string;
-}
-
 export const MarkdownPage = (props: IMarkdownPage): JSX.Element => {
     const { filePath } = props;
 
diff --git a/src/components/shared/PageTemplate/types.d.ts b/src/components/shared/PageTemplate/types.d.ts
new file mode 100644
index 0000000..d978f08
--- /dev/null
+++ b/src/components/shared/PageTemplate/types.d.ts
@@ -0,0 +1,5 @@
+declare module 'spock-react/shared/page-template-types' {
+    export interface IMarkdownPage {
+        filePath: string;
+    }
+}
diff --git a/src/components/shared/SyntaxHighlighter.tsx b/src/components/shared/SyntaxHighlighter/SyntaxHighlighter.tsx
similarity index 85%
rename from src/components/shared/SyntaxHighlighter.tsx
rename to src/components/shared/SyntaxHighlighter/SyntaxHighlighter.tsx
index 24c5d1c..e9fc5ea 100644
--- a/src/components/shared/SyntaxHighlighter.tsx
+++ b/src/components/shared/SyntaxHighlighter/SyntaxHighlighter.tsx
@@ -1,10 +1,6 @@
 import { Prism } from 'react-syntax-highlighter';
 import { gruvboxDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
-
-interface ISyntaxHighlighter {
-    code: string;
-    language: string;
-}
+import { ISyntaxHighlighter } from 'spock-react/shared/syntax-highlighter-types';
 
 /**
  * Have no accessibility problems:
diff --git a/src/components/shared/SyntaxHighlighter/index.ts b/src/components/shared/SyntaxHighlighter/index.ts
new file mode 100644
index 0000000..0b9a0b8
--- /dev/null
+++ b/src/components/shared/SyntaxHighlighter/index.ts
@@ -0,0 +1 @@
+export * from './SyntaxHighlighter';
diff --git a/src/components/shared/SyntaxHighlighter/types.d.ts b/src/components/shared/SyntaxHighlighter/types.d.ts
new file mode 100644
index 0000000..afef441
--- /dev/null
+++ b/src/components/shared/SyntaxHighlighter/types.d.ts
@@ -0,0 +1,6 @@
+declare module 'spock-react/shared/syntax-highlighter-types' {
+    export interface ISyntaxHighlighter {
+        code: string;
+        language: string;
+    }
+}
diff --git a/src/components/shared/Tab/CustomTab.tsx b/src/components/shared/Tab/CustomTab.tsx
index 1282411..118ca2e 100644
--- a/src/components/shared/Tab/CustomTab.tsx
+++ b/src/components/shared/Tab/CustomTab.tsx
@@ -1,16 +1,7 @@
 import './styles.css';
 
-import { ReactNode } from 'react';
 import { Tab, TabList, TabPanel, useTabState } from 'reakit';
-
-interface ITab {
-    content: ReactNode;
-    header: string;
-}
-
-interface ICustomTab {
-    tabConfigs: ITab[];
-}
+import { ICustomTab } from 'spock-react/shared/tab-types';
 
 export const CustomTab = (props: ICustomTab) => {
     const { tabConfigs } = props;
diff --git a/src/components/shared/Tab/types.d.ts b/src/components/shared/Tab/types.d.ts
new file mode 100644
index 0000000..46fc266
--- /dev/null
+++ b/src/components/shared/Tab/types.d.ts
@@ -0,0 +1,12 @@
+declare module 'spock-react/shared/tab-types' {
+    import { ReactNode } from 'react';
+
+    interface ITab {
+        content: ReactNode;
+        header: string;
+    }
+
+    export interface ICustomTab {
+        tabConfigs: ITab[];
+    }
+}
diff --git a/src/components/shared/Table/ResponsiveTable/ResponsiveTable.tsx b/src/components/shared/Table/ResponsiveTable/ResponsiveTable.tsx
index 9f71f2e..84224a8 100644
--- a/src/components/shared/Table/ResponsiveTable/ResponsiveTable.tsx
+++ b/src/components/shared/Table/ResponsiveTable/ResponsiveTable.tsx
@@ -1,16 +1,7 @@
 import './styles.css';
 
 import { nanoid } from 'nanoid';
-import { ReactNode } from 'react';
-
-export interface IRow {
-    row: Array<string | ReactNode>;
-}
-
-interface ITable {
-    headers: string[];
-    rows: IRow[];
-}
+import { ITable } from 'spock-react/shared/responsive-table-types';
 
 export const ResponsiveTable = (props: ITable): JSX.Element => {
     const { headers, rows } = props;
diff --git a/src/components/shared/Table/ResponsiveTable/types.d.ts b/src/components/shared/Table/ResponsiveTable/types.d.ts
new file mode 100644
index 0000000..02db7f6
--- /dev/null
+++ b/src/components/shared/Table/ResponsiveTable/types.d.ts
@@ -0,0 +1,12 @@
+declare module 'spock-react/shared/responsive-table-types' {
+    import { ReactNode } from 'react';
+
+    export interface IRow {
+        row: Array<string | ReactNode>;
+    }
+
+    export interface ITable {
+        headers: string[];
+        rows: IRow[];
+    }
+}
diff --git a/src/types.d.ts b/src/types.d.ts
index 785c4fa..05f175f 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -37,7 +37,8 @@ declare module 'spock-react-types' {
     interface IBlock {
         kind: string;
         text: string;
-        code: string[];
+        /* eslint-disable  @typescript-eslint/consistent-indexed-object-style */
+        code: string[] | { [key: string]: string[] };
     }
 
     export interface IFeature {
@@ -52,4 +53,9 @@ declare module 'spock-react-types' {
         blocks: IBlock[];
         problems: any[];
     }
+
+    export interface IMinimalFeature {
+        id: string;
+        blocks: IBlock[];
+    }
 }