#144 separate shared component types

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[];
                                         }

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[] };
+    }
+}

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;

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>

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[];
+    }
+}

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;

src/components/shared/LoadingSpinner/types.d.ts

@@ -0,0 +1,5 @@
+declare module 'spock-react/shared/loading-spinner-types' {
+    export interface ILoadingSpinner {
+        isLoading: boolean;
+    }
+}

src/components/shared/MarkdownRenderer.tsx → 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;

src/components/shared/MarkdownRenderer/index.ts

@@ -0,0 +1 @@
+export * from './MarkdownRenderer';

src/components/shared/MarkdownRenderer/types.d.ts

@@ -0,0 +1,5 @@
+declare module 'spock-react/shared/markdown-renderer-types' {
+    export interface IMarkdownRenderer {
+        children: string;
+    }
+}

src/components/shared/Message/Message.tsx

@@ -1,22 +1,13 @@
 import './styles.css';
 
-import { ReactNode } from 'react';
-
 import {
     faCircleCheck,
     faCircleInfo,
     faCircleXmark,
     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,15 +16,18 @@ 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>
         </div>
     );
 };
 
-const icon = (level: TLevel) => {
+const getIcon = (level: TLevel) => {
     switch (level) {
         case 'error':
             return faCircleXmark;

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;
+    }
+}

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();

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;
 

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;
+    }
+}

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;
 

src/components/shared/PageTemplate/types.d.ts

@@ -0,0 +1,5 @@
+declare module 'spock-react/shared/page-template-types' {
+    export interface IMarkdownPage {
+        filePath: string;
+    }
+}

src/components/shared/SyntaxHighlighter.tsx → 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:

src/components/shared/SyntaxHighlighter/index.ts

@@ -0,0 +1 @@
+export * from './SyntaxHighlighter';

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;
+    }
+}

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;

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[];
+    }
+}

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;

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[];
+    }
+}

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[];
+    }
 }