144.separate type from files

src/App.tsx

@@ -4,7 +4,7 @@ import { Route, Routes } from 'react-router-dom';
 
 import * as config from '../environment.json';
 
-import { Document } from './pages/Document';
+import { Document } from './pages/Document/Document';
 import buildingFromSource from './pages/GettingStarted/BuildingFromSource.md';
 import gswApacheMavenPath from './pages/GettingStarted/GettingStartedWithApacheMaven.md';
 import gswGradlePath from './pages/GettingStarted/GettingStartedWithGradle.md';

src/Hooks/types.d.ts

@@ -0,0 +1,44 @@
+declare module 'spock-react/hooks-types' {
+    import { IFeature, ISummary } from 'spock-react-types';
+
+    export interface IMarkdown {
+        filePath: string;
+    }
+
+    export interface ISpec {
+        className: string;
+        statistics: {
+            runs: string;
+            passed: string;
+            failed: string;
+            featureFailures: string;
+            successRate: string;
+            duration: string;
+        };
+        title: string;
+        narrative: string;
+        headers: string[];
+        tags: any;
+        see: any[];
+        features: IFeature[];
+        generator: string;
+    }
+
+    export interface IGetSpec {
+        fileName: string;
+    }
+
+    export interface IGenerateSearchEntries {
+        summary?: ISummary;
+    }
+
+    export interface IActiveLink {
+        activeLink: string;
+        setActiveLink: (newLink: string) => void;
+    }
+
+    export interface IActiveAnchor {
+        activeAnchor: string;
+        setActiveAnchor: (newAnchor: string) => void;
+    }
+}

src/Hooks/useActiveAnchor.ts

@@ -1,3 +1,4 @@
+import { IActiveAnchor } from 'spock-react/hooks-types';
 import { create } from 'zustand';
 
 const getInitialState = () => {
@@ -9,10 +10,6 @@ const getInitialState = () => {
     return pageAndAnchor.length === 2 ? decodeURI(pageAndAnchor[1]) : '';
 };
 
-interface IActiveAnchor {
-    activeAnchor: string;
-    setActiveAnchor: (newAnchor: string) => void;
-}
 export const useActiveAnchor = create<IActiveAnchor>((set) => ({
     activeAnchor: getInitialState(),
     setActiveAnchor: (newAnchor: string) => {

src/Hooks/useActiveLink.ts

@@ -1,5 +1,6 @@
 import { create } from 'zustand';
 import * as config from '../../environment.json';
+import { IActiveLink } from 'spock-react/hooks-types';
 
 const getInitialState = () => {
     const pageAndAnchor = window.location.pathname.split('#');
@@ -11,10 +12,6 @@ const getInitialState = () => {
     return page;
 };
 
-interface IActiveLink {
-    activeLink: string;
-    setActiveLink: (newLink: string) => void;
-}
 export const useActiveLink = create<IActiveLink>((set) => ({
     activeLink: getInitialState(),
     setActiveLink: (newLink: string) => {

src/Hooks/useGenerateSearchEntries.ts

@@ -1,15 +1,12 @@
 import { useEffect, useState } from 'react';
 
+import { cleanedSearchData } from '../components/Search/generateSearchEntries';
+import { ISpecification } from 'spock-react-types';
+import { IGenerateSearchEntries } from 'spock-react/hooks-types';
 import {
-    cleanedSearchData,
     IMinimizedSummaryEntry,
     ISearchEntry,
-} from '../components/Search/generateSearchEntries';
-import { ISpecification, ISummary } from './useGetSummary';
-
-interface IGenerateSearchEntries {
-    summary?: ISummary;
-}
+} from 'spock-react/components/search-types';
 
 export const useGenerateSearchEntries = (
     props: IGenerateSearchEntries

src/Hooks/useGetSpec.ts

@@ -3,55 +3,14 @@ import axios from 'axios';
 import { useQuery, UseQueryResult } from '@tanstack/react-query';
 
 import config from '../../environment.json';
-
-interface IBlock {
-    kind: string;
-    text: string;
-    code: string[];
-}
-
-export interface IFeature {
-    id: string;
-    result: string;
-    duration: string;
-    iterations: {
-        tags: any;
-        see: any[];
-        extraInfo: any[];
-    };
-    blocks: IBlock[];
-    problems: any[];
-}
-
-interface ISpec {
-    className: string;
-    statistics: {
-        runs: string;
-        passed: string;
-        failed: string;
-        featureFailures: string;
-        successRate: string;
-        duration: string;
-    };
-    title: string;
-    narrative: string;
-    headers: string[];
-    tags: any;
-    see: any[];
-    features: IFeature[];
-    generator: string;
-}
+import { IGetSpec, ISpec } from 'spock-react/hooks-types';
 
 const getSpec = async (file: string): Promise<ISpec> => {
     const data = await axios.get(`${config.specUrl}/${file}.json`);
 
     return data.data as ISpec;
 };
 
-interface IGetSpec {
-    fileName: string;
-}
-
 export const useGetSpec = (props: IGetSpec): UseQueryResult<ISpec, unknown> => {
     const { fileName } = props;
 

src/Hooks/useGetSummary.ts

@@ -3,48 +3,14 @@ import axios from 'axios';
 import { useQuery, UseQueryResult } from '@tanstack/react-query';
 
 import config from '../../environment.json';
+import { ISummary } from 'spock-react-types';
 
 const getSummary = async (): Promise<ISummary> => {
     const data = await axios.get(config.summaryUrl);
 
     return data.data as ISummary;
 };
 
-export interface IExecutedFeatures {
-    id: string;
-    extraInfo: any[];
-}
-
-export interface ISpecification {
-    className: string;
-    title: string;
-    narrative: string;
-    featureCount: string;
-    failures: string;
-    errors: string;
-    skipped: string;
-    successRate: string;
-    duration: string;
-    executedFeatures: IExecutedFeatures[];
-    ignoredFeatures: any[];
-}
-
-export interface ISummary {
-    generator: string;
-    project: string;
-    version: string;
-    created: string;
-    statistics: {
-        runs: string;
-        passed: string;
-        failed: string;
-        featureFailures: string;
-        successRate: string;
-        duration: string;
-    };
-    specifications: ISpecification[];
-}
-
 export const useGetSummary = (): UseQueryResult<ISummary, unknown> => {
     return useQuery<ISummary>({
         queryKey: ['summary'],

src/Hooks/useMarkdown.ts

@@ -1,14 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
+import { IMarkdown } from 'spock-react/hooks-types';
 
 const getMarkdown = async (mdFile: string) => {
     const data = await fetch(mdFile);
     return await data.text();
 };
 
-interface IMarkdown {
-    filePath: string;
-}
-
 export const useMarkdown = (props: IMarkdown) => {
     const { filePath } = props;
 

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/MainNav/MainNav.tsx

@@ -6,15 +6,12 @@ import { Link } from 'react-router-dom';
 import { faBook, faHouseChimney } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import { IMainNav } from 'spock-react/components/main-nav-types';
 import * as config from '../../../environment.json';
+import { useActiveLink } from '../../Hooks';
 import GithubLogo from '../../assets/img/github-mark-white.png';
 import { Search } from '../Search';
 import { NavLink } from '../shared';
-import { ISummary, useActiveLink } from '../../Hooks';
-
-interface IMainNav {
-    summary: ISummary;
-}
 
 export const MainNav = (props: IMainNav) => {
     const { summary } = props;

src/components/MainNav/types.d.ts

@@ -0,0 +1,7 @@
+declare module 'spock-react/components/main-nav-types' {
+    import { ISummary } from 'spock-react-types';
+
+    export interface IMainNav {
+        summary: ISummary;
+    }
+}

src/components/Search/Search.tsx

@@ -3,22 +3,13 @@ import './styles.css';
 import { useState } from 'react';
 import { Dialog, DialogBackdrop, Separator, useDialogState } from 'reakit';
 
-import { ISummary } from '../../Hooks';
 import { SearchButton } from './SearchButton';
 import { SearchFooter } from './SearchFooter';
 import { SearchHits } from './SearchHits';
 import { SearchInput } from './SearchInput';
+import { ISearch, ISearchHit } from 'spock-react/components/search-types';
 
-export interface ISearchHit {
-    score: number;
-    key: string;
-}
-
-interface ISearchInput {
-    summary: ISummary;
-}
-
-export const Search = (props: ISearchInput): JSX.Element => {
+export const Search = (props: ISearch): JSX.Element => {
     const { summary } = props;
 
     const dialog = useDialogState();

src/components/Search/SearchButton/SearchButton.tsx

@@ -1,14 +1,10 @@
 import './styles.css';
 
 import { DialogDisclosure } from 'reakit';
-import { DialogStateReturn } from 'reakit/ts/Dialog/DialogState';
 
 import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-interface ISearchButton {
-    dialog: DialogStateReturn;
-}
+import { ISearchButton } from 'spock-react/components/search-button-types';
 
 export const SearchButton = (props: ISearchButton): JSX.Element => {
     const { dialog } = props;

src/components/Search/SearchButton/types.d.ts

@@ -0,0 +1,7 @@
+declare module 'spock-react/components/search-button-types' {
+    import { DialogStateReturn } from 'reakit/ts/Dialog/DialogState';
+
+    interface ISearchButton {
+        dialog: DialogStateReturn;
+    }
+}

src/components/Search/SearchHits/SearchCard/SearchCard.tsx

@@ -5,19 +5,7 @@ import { Link } from 'react-router-dom';
 
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-import {
-    IExecutedFeatures,
-    ISpecification,
-} from '../../../../Hooks/useGetSummary';
-import { ISearchHit } from '../../Search';
-
-interface ISearchCard {
-    onClick: (e?: any) => void;
-    hit: ISearchHit;
-    spec?: ISpecification;
-    feature?: IExecutedFeatures;
-}
+import { ISearchCard } from 'spock-react/components/search-card-types';
 
 export const SearchCard = (props: ISearchCard): JSX.Element => {
     const { onClick, hit, spec, feature } = props;

src/components/Search/SearchHits/SearchCard/types.d.ts

@@ -0,0 +1,11 @@
+declare module 'spock-react/components/search-card-types' {
+    import { IExecutedFeatures, ISpecification } from 'spock-react-types';
+    import { ISearchHit } from 'spock-react/components/search-types';
+
+    interface ISearchCard {
+        onClick: (e?: any) => void;
+        hit: ISearchHit;
+        spec?: ISpecification;
+        feature?: IExecutedFeatures;
+    }
+}