From 734e81c8b41d3d549f76e20f62f5221e6feeaa6b Mon Sep 17 00:00:00 2001 From: Sonatai Date: Wed, 3 Jan 2024 14:31:44 +0100 Subject: [PATCH 1/4] #144 separate hooks types --- src/Hooks/types.d.ts | 44 +++++++++++++++ src/Hooks/useActiveAnchor.ts | 5 +- src/Hooks/useActiveLink.ts | 5 +- src/Hooks/useGenerateSearchEntries.ts | 7 +-- src/Hooks/useGetSpec.ts | 43 +-------------- src/Hooks/useGetSummary.ts | 36 +----------- src/Hooks/useMarkdown.ts | 5 +- src/components/MainNav/MainNav.tsx | 3 +- src/components/Search/Search.tsx | 2 +- .../SearchHits/SearchCard/SearchCard.tsx | 5 +- .../Search/SearchHits/SearchHits.tsx | 2 +- .../Search/SearchInput/SearchInput.tsx | 2 +- src/components/shared/Layout/Layout.tsx | 2 +- src/components/shared/Layout/OnPageNav.tsx | 2 +- src/tests/example.test.tsx | 3 +- src/types.d.ts | 55 +++++++++++++++++++ 16 files changed, 116 insertions(+), 105 deletions(-) create mode 100644 src/Hooks/types.d.ts create mode 100644 src/types.d.ts diff --git a/src/Hooks/types.d.ts b/src/Hooks/types.d.ts new file mode 100644 index 0000000..10b6c41 --- /dev/null +++ b/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; + } +} diff --git a/src/Hooks/useActiveAnchor.ts b/src/Hooks/useActiveAnchor.ts index 09ce008..66d09f4 100644 --- a/src/Hooks/useActiveAnchor.ts +++ b/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((set) => ({ activeAnchor: getInitialState(), setActiveAnchor: (newAnchor: string) => { diff --git a/src/Hooks/useActiveLink.ts b/src/Hooks/useActiveLink.ts index 8f60197..eceb24e 100644 --- a/src/Hooks/useActiveLink.ts +++ b/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((set) => ({ activeLink: getInitialState(), setActiveLink: (newLink: string) => { diff --git a/src/Hooks/useGenerateSearchEntries.ts b/src/Hooks/useGenerateSearchEntries.ts index 6e3949d..258c1ae 100644 --- a/src/Hooks/useGenerateSearchEntries.ts +++ b/src/Hooks/useGenerateSearchEntries.ts @@ -5,11 +5,8 @@ import { IMinimizedSummaryEntry, ISearchEntry, } from '../components/Search/generateSearchEntries'; -import { ISpecification, ISummary } from './useGetSummary'; - -interface IGenerateSearchEntries { - summary?: ISummary; -} +import { ISpecification } from 'spock-react-types'; +import { IGenerateSearchEntries } from 'spock-react/hooks-types'; export const useGenerateSearchEntries = ( props: IGenerateSearchEntries diff --git a/src/Hooks/useGetSpec.ts b/src/Hooks/useGetSpec.ts index 3d66645..5215bfd 100644 --- a/src/Hooks/useGetSpec.ts +++ b/src/Hooks/useGetSpec.ts @@ -3,44 +3,7 @@ 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 => { const data = await axios.get(`${config.specUrl}/${file}.json`); @@ -48,10 +11,6 @@ const getSpec = async (file: string): Promise => { return data.data as ISpec; }; -interface IGetSpec { - fileName: string; -} - export const useGetSpec = (props: IGetSpec): UseQueryResult => { const { fileName } = props; diff --git a/src/Hooks/useGetSummary.ts b/src/Hooks/useGetSummary.ts index 12f41c5..006617b 100644 --- a/src/Hooks/useGetSummary.ts +++ b/src/Hooks/useGetSummary.ts @@ -3,6 +3,7 @@ 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 => { const data = await axios.get(config.summaryUrl); @@ -10,41 +11,6 @@ const getSummary = async (): Promise => { 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 => { return useQuery({ queryKey: ['summary'], diff --git a/src/Hooks/useMarkdown.ts b/src/Hooks/useMarkdown.ts index a8592a5..62ed3c2 100644 --- a/src/Hooks/useMarkdown.ts +++ b/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; diff --git a/src/components/MainNav/MainNav.tsx b/src/components/MainNav/MainNav.tsx index 0c712c9..a438f63 100644 --- a/src/components/MainNav/MainNav.tsx +++ b/src/components/MainNav/MainNav.tsx @@ -10,7 +10,8 @@ import * as config from '../../../environment.json'; import GithubLogo from '../../assets/img/github-mark-white.png'; import { Search } from '../Search'; import { NavLink } from '../shared'; -import { ISummary, useActiveLink } from '../../Hooks'; +import { useActiveLink } from '../../Hooks'; +import { ISummary } from 'spock-react-types'; interface IMainNav { summary: ISummary; diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx index 672ea12..445ff1a 100644 --- a/src/components/Search/Search.tsx +++ b/src/components/Search/Search.tsx @@ -3,11 +3,11 @@ 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 { ISummary } from 'spock-react-types'; export interface ISearchHit { score: number; diff --git a/src/components/Search/SearchHits/SearchCard/SearchCard.tsx b/src/components/Search/SearchHits/SearchCard/SearchCard.tsx index 994d4d5..33e7b09 100644 --- a/src/components/Search/SearchHits/SearchCard/SearchCard.tsx +++ b/src/components/Search/SearchHits/SearchCard/SearchCard.tsx @@ -6,11 +6,8 @@ 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'; +import { IExecutedFeatures, ISpecification } from 'spock-react-types'; interface ISearchCard { onClick: (e?: any) => void; diff --git a/src/components/Search/SearchHits/SearchHits.tsx b/src/components/Search/SearchHits/SearchHits.tsx index 6d86341..841c232 100644 --- a/src/components/Search/SearchHits/SearchHits.tsx +++ b/src/components/Search/SearchHits/SearchHits.tsx @@ -3,9 +3,9 @@ import './styles.css'; import { nanoid } from 'nanoid'; import { DialogStateReturn } from 'reakit/ts'; -import { ISummary } from '../../../Hooks/useGetSummary'; import { ISearchHit } from '../Search'; import { SearchCard } from './SearchCard'; +import { ISummary } from 'spock-react-types'; interface ISearchHits { searchHits: ISearchHit[] | null; diff --git a/src/components/Search/SearchInput/SearchInput.tsx b/src/components/Search/SearchInput/SearchInput.tsx index 68a18bd..05d0669 100644 --- a/src/components/Search/SearchInput/SearchInput.tsx +++ b/src/components/Search/SearchInput/SearchInput.tsx @@ -6,9 +6,9 @@ import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { useGenerateSearchEntries } from '../../../Hooks/useGenerateSearchEntries'; -import { ISummary } from '../../../Hooks/useGetSummary'; import { getSearchScore } from '../getSearchScore'; import { ISearchHit } from '../Search'; +import { ISummary } from 'spock-react-types'; interface ISearchInput { summary: ISummary; diff --git a/src/components/shared/Layout/Layout.tsx b/src/components/shared/Layout/Layout.tsx index 62e81c8..08c5898 100644 --- a/src/components/shared/Layout/Layout.tsx +++ b/src/components/shared/Layout/Layout.tsx @@ -2,8 +2,8 @@ import './styles.css'; import { PropsWithChildren } from 'react'; -import { IFeature } from '../../../Hooks'; import { OnPageNav } from './OnPageNav'; +import { IFeature } from 'spock-react-types'; interface ILayout { hasOnPageNav?: boolean; diff --git a/src/components/shared/Layout/OnPageNav.tsx b/src/components/shared/Layout/OnPageNav.tsx index 0b5fa38..3aa2e27 100644 --- a/src/components/shared/Layout/OnPageNav.tsx +++ b/src/components/shared/Layout/OnPageNav.tsx @@ -1,7 +1,7 @@ import { nanoid } from 'nanoid'; -import { IFeature } from '../../../Hooks'; import { NavAnchor } from '..'; +import { IFeature } from '../../Feature'; interface IOnPageNave { features: IFeature[]; diff --git a/src/tests/example.test.tsx b/src/tests/example.test.tsx index 85e6c13..7adddc5 100644 --- a/src/tests/example.test.tsx +++ b/src/tests/example.test.tsx @@ -4,8 +4,9 @@ import { describe, expect, test } from 'vitest'; import { renderHook } from '@testing-library/react-hooks'; import { App } from '../App'; -import { ISummary, useGetSummary } from '../Hooks'; +import { useGetSummary } from '../Hooks'; import { HookProvider, render } from '../test-utils'; +import { ISummary } from 'spock-react-types'; describe('test', () => { test('component example', () => { diff --git a/src/types.d.ts b/src/types.d.ts new file mode 100644 index 0000000..785c4fa --- /dev/null +++ b/src/types.d.ts @@ -0,0 +1,55 @@ +declare module 'spock-react-types' { + 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[]; + } + + 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[]; + } +} From 31cdb368bfb099a162cd2f0cd0039a13d2e26c65 Mon Sep 17 00:00:00 2001 From: Sonatai Date: Fri, 5 Jan 2024 10:47:51 +0100 Subject: [PATCH 2/4] #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 ; }; -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 && ( ): 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 => {

On the Page