diff --git a/types/react-instantsearch-core/react-instantsearch-core-tests.tsx b/types/react-instantsearch-core/react-instantsearch-core-tests.tsx index 20173180f1..62bf99e3d4 100644 --- a/types/react-instantsearch-core/react-instantsearch-core-tests.tsx +++ b/types/react-instantsearch-core/react-instantsearch-core-tests.tsx @@ -4,7 +4,10 @@ import { createIndex, createConnector, SearchResults, - connectStateResults + connectStateResults, + SearchBoxProvided, + connectSearchBox, + connectRefinementList } from 'react-instantsearch-core'; () => { @@ -135,3 +138,18 @@ import { {} ); }; + +// https://community.algolia.com/react-instantsearch/guide/Connectors.html +() => { + const MySearchBox = ({currentRefinement, refine}: SearchBoxProvided) => + refine(e.target.value)} + />; + + // `ConnectedSearchBox` renders a `` widget that is connected to + // the state, providing it with `currentRefinement` and `refine` props for + // reading and manipulating the current query of the search. + const ConnectedSearchBox = connectSearchBox(MySearchBox); +}; diff --git a/types/react-instantsearch-dom/index.d.ts b/types/react-instantsearch-dom/index.d.ts new file mode 100644 index 0000000000..f1dec59118 --- /dev/null +++ b/types/react-instantsearch-dom/index.d.ts @@ -0,0 +1,136 @@ +// Type definitions for react-instantsearch 5.2 +// Project: https://community.algolia.com/react-instantsearch/ +// Definitions by: Gordon Burgett +// Justin Powell +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.9 + +import * as React from 'react'; + +import { Hit, BasicDoc } from 'react-instantsearch-core'; + +// Core +export { createConnector } from 'react-instantsearch-core'; +export { HIGHLIGHT_TAGS } from 'react-instantsearch-core'; +export { translatable } from 'react-instantsearch-core'; + +// Widget +export { Configure } from 'react-instantsearch-core'; + +// Connectors +export { connectAutoComplete } from 'react-instantsearch-core'; +export { connectBreadcrumb } from 'react-instantsearch-core'; +export { connectConfigure } from 'react-instantsearch-core'; +export { connectCurrentRefinements } from 'react-instantsearch-core'; +export { connectGeoSearch } from 'react-instantsearch-core'; +export { connectHierarchicalMenu } from 'react-instantsearch-core'; +export { connectHighlight } from 'react-instantsearch-core'; +export { connectHits } from 'react-instantsearch-core'; +export { connectHitsPerPage } from 'react-instantsearch-core'; +export { connectInfiniteHits } from 'react-instantsearch-core'; +export { connectMenu } from 'react-instantsearch-core'; +export { connectNumericMenu } from 'react-instantsearch-core'; +export { connectPagination } from 'react-instantsearch-core'; +export { connectPoweredBy } from 'react-instantsearch-core'; +export { connectRange } from 'react-instantsearch-core'; +export { connectRefinementList } from 'react-instantsearch-core'; +export { connectScrollTo } from 'react-instantsearch-core'; +export { connectSearchBox } from 'react-instantsearch-core'; +export { connectSortBy } from 'react-instantsearch-core'; +export { connectStateResults } from 'react-instantsearch-core'; +export { connectStats } from 'react-instantsearch-core'; +export { connectToggleRefinement } from 'react-instantsearch-core'; + +// DOM +interface CommonWidgetProps { + /** + * All static text rendered by widgets, such as “Load more”, “Show more” are translatable using the translations prop on relevant widgets. + * This prop is a mapping of keys to translation values. Translation values can be either a String or a (...args: any[]) => any, as some take parameters. + * + * https://community.algolia.com/react-instantsearch/guide/i18n.html + */ + translations?: { [key: string]: string | ((...args: any[]) => any) }; +} + +export interface InstantSearchProps { + apiKey: string; + appId: string; + indexName: string; + + algoliaClient?: any; + searchClient?: any; + createURL?: (...args: any[]) => any; + searchState?: any; + refresh?: boolean; + onSearchStateChange?: (...args: any[]) => any; + onSearchParameters?: (...args: any[]) => any; + resultsState?: any; + root?: { + Root: string | ((...args: any[]) => any); + props: any; + }; +} +/** + * is the root component of all React InstantSearch implementations. It provides all the connected components (aka widgets) a means to interact with the searchState. + * + * https://community.algolia.com/react-instantsearch/widgets/%3CInstantSearch%3E.html + */ +export class InstantSearch extends React.Component {} +export class Index extends React.Component {} +export class Breadcrumb extends React.Component {} +export class ClearRefinements extends React.Component {} +export class CurrentRefinements extends React.Component {} +export class HierarchicalMenu extends React.Component {} +export class Highlight extends React.Component {} + +export interface HitsProps { + hitComponent?: React.ComponentType<{ hit: Hit }>; +} +/** + * Displays a list of hits. + * To configure the number of hits being shown, use the HitsPerPage widget, connectHitsPerPage connector or the Configure widget. + * + * https://community.algolia.com/react-instantsearch/widgets/Hits.html + */ +export class Hits extends React.Component> {} +export class HitsPerPage extends React.Component {} +export class InfiniteHits extends React.Component {} +export class Menu extends React.Component {} +export class MenuSelect extends React.Component {} +export class NumericMenu extends React.Component {} +export class Pagination extends React.Component {} +export class Panel extends React.Component {} +export class PoweredBy extends React.Component {} +export class RangeInput extends React.Component {} +export class RangeSlider extends React.Component {} +export class RatingMenu extends React.Component {} +export class RefinementList extends React.Component {} +export class ScrollTo extends React.Component {} + +export interface SearchBoxProps extends CommonWidgetProps { + focusShortcuts?: string[]; + autoFocus?: boolean; + defaultRefinement?: string; + searchAsYouType?: boolean; + showLoadingIndicator?: boolean; + + submit?: JSX.Element; + reset?: JSX.Element; + loadingIndicator?: JSX.Element; + + onSubmit?: (...args: any[]) => any; + onReset?: (...args: any[]) => any; +} +/** + * The SearchBox component displays a search box that lets the user search for a specific query. + * + * https://community.algolia.com/react-instantsearch/widgets/SearchBox.html + */ +export class SearchBox extends React.Component {} +export class Snippet extends React.Component {} +export class SortBy extends React.Component {} +/** + * The Stats component displays the total number of matching hits and the time it took to get them (time spent in the Algolia server). + */ +export class Stats extends React.Component<{translations?: { [key: string]: (n: number, ms: number) => string }}> {} +export class ToggleRefinement extends React.Component {} diff --git a/types/react-instantsearch-dom/react-instantsearch-dom-tests.tsx b/types/react-instantsearch-dom/react-instantsearch-dom-tests.tsx new file mode 100644 index 0000000000..1e27e1d09f --- /dev/null +++ b/types/react-instantsearch-dom/react-instantsearch-dom-tests.tsx @@ -0,0 +1,215 @@ +import * as React from 'react'; +import { InstantSearch, Hits, Highlight, SearchBox, RefinementList, CurrentRefinements, ClearRefinements, Pagination, Menu, Configure, Index } from 'react-instantsearch/dom'; +import { Hit, connectRefinementList, connectMenu } from 'react-instantsearch-core'; + +// DOM +// https://community.algolia.com/react-instantsearch/Getting_started.html +() => { + const App = () => ( + + + + ); + + function Search() { + return ( +
+ +
+ ); + } + + function Product({ hit }: { hit: Hit }) { + return
{hit.name}
; + } + + function Search2() { + return ( +
+ +
+ ); + } + + function Product2({ hit }: { hit: Hit }) { + return ( +
+ + + +
+ ); + } + + function Search3() { + return ( +
+ + + +
+ ); + } + + function Search4() { + return ( +
+ + + + + + +
+ ); + } +}; + +// https://community.algolia.com/react-instantsearch/guide//Highlighting_results.html +() => { + const Hit = ({ hit }: { hit: Hit }) => ( +

+ +

+ ); + + function App() { + return ( + + + + ); + } +}; + +// TODO +// () => { +// const CustomHighlight = connectHighlight( +// ({ highlight, attribute, hit, highlightProperty }) => { +// const parsedHit = highlight({ +// attribute, +// hit, +// highlightProperty: '_highlightResult' +// }); +// const highlightedHits = parsedHit.map(part => { +// if (part.isHighlighted) return {part.value}; +// return part.value; +// }); +// return
{highlightedHits}
; +// } +// ); + +// const Hit = ({ hit }: { hit: Hit }) => ( +//

+// +//

+// ); + +// function App() { +// return ( +// +// +// +// ); +// } +// }; + +// https://community.algolia.com/react-instantsearch/guide/i18n.html +() => { + const App = () => ( + + + + ); +}; + +// https://community.algolia.com/react-instantsearch/guide/Sorting_and_filtering.html +// TODO +// () => { +// const App = () => ( +// +// +// +// orderBy(items, ['label', 'count'], ['asc', 'desc']) +// } +// /> +// +// ); +// }; + +// https://community.algolia.com/react-instantsearch/guide/Default_refinements.html +() => { + const App = () => ( + + + + + ); +}; + +// TODO +// () => { +// const VirtualMenu = connectMenu(() => null); + +// const App = () => ( +// +//
+// +// items.filter(item => item.currentRefinement !== 'Orange') +// } +// /> +// +// +// +//
+// +// ); +// }; + +// https://community.algolia.com/react-instantsearch/guide/Searching_in_Lists.html + +; + +// https://community.algolia.com/react-instantsearch/guide/Search_parameters.html + + + // widgets +; diff --git a/types/react-instantsearch-dom/tsconfig.json b/types/react-instantsearch-dom/tsconfig.json new file mode 100644 index 0000000000..3a8fbf89ad --- /dev/null +++ b/types/react-instantsearch-dom/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6", + "dom" + ], + "jsx": "react", + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "react-instantsearch-dom-tests.tsx" + ] +} diff --git a/types/react-instantsearch-dom/tslint.json b/types/react-instantsearch-dom/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-instantsearch-dom/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } diff --git a/types/react-instantsearch/dom.d.ts b/types/react-instantsearch/dom.d.ts index 85d34fe42e..27704d48a3 100644 --- a/types/react-instantsearch/dom.d.ts +++ b/types/react-instantsearch/dom.d.ts @@ -1,129 +1,29 @@ import * as React from 'react'; -import { Hit, BasicDoc } from 'react-instantsearch-core'; - -// Core -export { createConnector } from 'react-instantsearch-core'; -export { HIGHLIGHT_TAGS } from 'react-instantsearch-core'; -export { translatable } from 'react-instantsearch-core'; - -// Widget -export { Configure } from 'react-instantsearch-core'; - -// Connectors -export { connectAutoComplete } from 'react-instantsearch-core'; -export { connectBreadcrumb } from 'react-instantsearch-core'; -export { connectConfigure } from 'react-instantsearch-core'; -export { connectCurrentRefinements } from 'react-instantsearch-core'; -export { connectGeoSearch } from 'react-instantsearch-core'; -export { connectHierarchicalMenu } from 'react-instantsearch-core'; -export { connectHighlight } from 'react-instantsearch-core'; -export { connectHits } from 'react-instantsearch-core'; -export { connectHitsPerPage } from 'react-instantsearch-core'; -export { connectInfiniteHits } from 'react-instantsearch-core'; -export { connectMenu } from 'react-instantsearch-core'; -export { connectNumericMenu } from 'react-instantsearch-core'; -export { connectPagination } from 'react-instantsearch-core'; -export { connectPoweredBy } from 'react-instantsearch-core'; -export { connectRange } from 'react-instantsearch-core'; -export { connectRefinementList } from 'react-instantsearch-core'; -export { connectScrollTo } from 'react-instantsearch-core'; -export { connectSearchBox } from 'react-instantsearch-core'; -export { connectSortBy } from 'react-instantsearch-core'; -export { connectStateResults } from 'react-instantsearch-core'; -export { connectStats } from 'react-instantsearch-core'; -export { connectToggleRefinement } from 'react-instantsearch-core'; - -// DOM -export interface CommonWidgetProps { - /** - * All static text rendered by widgets, such as “Load more”, “Show more” are translatable using the translations prop on relevant widgets. - * This prop is a mapping of keys to translation values. Translation values can be either a String or a (...args: any[]) => any, as some take parameters. - * - * https://community.algolia.com/react-instantsearch/guide/i18n.html - */ - translations?: { [key: string]: string | ((...args: any[]) => any) }; -} - -export interface InstantSearchProps { - apiKey: string; - appId: string; - indexName: string; - - algoliaClient?: any; - searchClient?: any; - createURL?: (...args: any[]) => any; - searchState?: any; - refresh?: boolean; - onSearchStateChange?: (...args: any[]) => any; - onSearchParameters?: (...args: any[]) => any; - resultsState?: any; - root?: { - Root: string | ((...args: any[]) => any); - props: any; - }; -} -/** - * is the root component of all React InstantSearch implementations. It provides all the connected components (aka widgets) a means to interact with the searchState. - * - * https://community.algolia.com/react-instantsearch/widgets/%3CInstantSearch%3E.html - */ -export class InstantSearch extends React.Component {} -export class Index extends React.Component {} -export class Breadcrumb extends React.Component {} -export class ClearRefinements extends React.Component {} -export class CurrentRefinements extends React.Component {} -export class HierarchicalMenu extends React.Component {} -export class Highlight extends React.Component {} - -export interface HitsProps { - hitComponent?: React.ComponentType<{ hit: Hit }>; -} -/** - * Displays a list of hits. - * To configure the number of hits being shown, use the HitsPerPage widget, connectHitsPerPage connector or the Configure widget. - * - * https://community.algolia.com/react-instantsearch/widgets/Hits.html - */ -export class Hits extends React.Component> {} -export class HitsPerPage extends React.Component {} -export class InfiniteHits extends React.Component {} -export class Menu extends React.Component {} -export class MenuSelect extends React.Component {} -export class NumericMenu extends React.Component {} -export class Pagination extends React.Component {} -export class Panel extends React.Component {} -export class PoweredBy extends React.Component {} -export class RangeInput extends React.Component {} -export class RangeSlider extends React.Component {} -export class RatingMenu extends React.Component {} -export class RefinementList extends React.Component {} -export class ScrollTo extends React.Component {} - -export interface SearchBoxProps extends CommonWidgetProps { - focusShortcuts?: string[]; - autoFocus?: boolean; - defaultRefinement?: string; - searchAsYouType?: boolean; - showLoadingIndicator?: boolean; - - submit?: JSX.Element; - reset?: JSX.Element; - loadingIndicator?: JSX.Element; - - onSubmit?: (...args: any[]) => any; - onReset?: (...args: any[]) => any; -} -/** - * The SearchBox component displays a search box that lets the user search for a specific query. - * - * https://community.algolia.com/react-instantsearch/widgets/SearchBox.html - */ -export class SearchBox extends React.Component {} -export class Snippet extends React.Component {} -export class SortBy extends React.Component {} -/** - * The Stats component displays the total number of matching hits and the time it took to get them (time spent in the Algolia server). - */ -export class Stats extends React.Component<{translations?: { [key: string]: (n: number, ms: number) => string }}> {} -export class ToggleRefinement extends React.Component {} +export { InstantSearch, InstantSearchProps } from 'react-instantsearch-dom'; +export { Index } from 'react-instantsearch-dom'; +export { Breadcrumb } from 'react-instantsearch-dom'; +export { ClearRefinements } from 'react-instantsearch-dom'; +export { Configure } from 'react-instantsearch-dom'; +export { CurrentRefinements } from 'react-instantsearch-dom'; +export { HierarchicalMenu } from 'react-instantsearch-dom'; +export { Highlight } from 'react-instantsearch-dom'; +export { Hits, HitsProps } from 'react-instantsearch-dom'; +export { HitsPerPage } from 'react-instantsearch-dom'; +export { InfiniteHits } from 'react-instantsearch-dom'; +export { Menu } from 'react-instantsearch-dom'; +export { MenuSelect } from 'react-instantsearch-dom'; +export { NumericMenu } from 'react-instantsearch-dom'; +export { Pagination } from 'react-instantsearch-dom'; +export { Panel } from 'react-instantsearch-dom'; +export { PoweredBy } from 'react-instantsearch-dom'; +export { RangeInput } from 'react-instantsearch-dom'; +export { RangeSlider } from 'react-instantsearch-dom'; +export { RatingMenu } from 'react-instantsearch-dom'; +export { RefinementList } from 'react-instantsearch-dom'; +export { ScrollTo } from 'react-instantsearch-dom'; +export { SearchBox, SearchBoxProps } from 'react-instantsearch-dom'; +export { Snippet } from 'react-instantsearch-dom'; +export { SortBy } from 'react-instantsearch-dom'; +export { Stats } from 'react-instantsearch-dom'; +export { ToggleRefinement } from 'react-instantsearch-dom'; diff --git a/types/react-instantsearch/react-instantsearch-tests.tsx b/types/react-instantsearch/react-instantsearch-tests.tsx index c7052757a5..82672b7a60 100644 --- a/types/react-instantsearch/react-instantsearch-tests.tsx +++ b/types/react-instantsearch/react-instantsearch-tests.tsx @@ -1,281 +1,10 @@ import * as React from "react"; -import { InstantSearch, Hits, Highlight, SearchBox, RefinementList, CurrentRefinements, ClearRefinements, Pagination, Menu, Configure, createConnector, Index } from 'react-instantsearch/dom'; -import { connectHighlight, connectSearchBox, connectMenu, connectRefinementList, connectStateResults, SearchBoxProvided, Hit, SearchState } from "react-instantsearch/connectors"; + +import { connectMenu, connectRefinementList, connectStateResults, SearchState } from "react-instantsearch/connectors"; +import { InstantSearch, SearchBox, Index, Hits, Highlight, Menu } from "react-instantsearch/dom"; import { orderBy, omit, values } from 'lodash'; import { createInstantSearch } from "react-instantsearch-core"; -// DOM -// https://community.algolia.com/react-instantsearch/Getting_started.html -() => { - const App = () => ( - - - - ); - - function Search() { - return ( -
- -
- ); - } - - function Product({ hit }: { hit: Hit }) { - return
{hit.name}
; - } - - function Search2() { - return ( -
- -
- ); - } - - function Product2({ hit }: { hit: Hit }) { - return ( -
- - - -
- ); - } - - function Search3() { - return ( -
- - - -
- ); - } - - function Search4() { - return ( -
- - - - - - -
- ); - } -}; - -// https://community.algolia.com/react-instantsearch/guide//Highlighting_results.html -() => { - const Hit = ({ hit }: { hit: Hit }) => ( -

- -

- ); - - function App() { - return ( - - - - ); - } -}; - -// TODO -// () => { -// const CustomHighlight = connectHighlight( -// ({ highlight, attribute, hit, highlightProperty }) => { -// const parsedHit = highlight({ -// attribute, -// hit, -// highlightProperty: '_highlightResult' -// }); -// const highlightedHits = parsedHit.map(part => { -// if (part.isHighlighted) return {part.value}; -// return part.value; -// }); -// return
{highlightedHits}
; -// } -// ); - -// const Hit = ({ hit }: { hit: Hit }) => ( -//

-// -//

-// ); - -// function App() { -// return ( -// -// -// -// ); -// } -// }; - -// https://community.algolia.com/react-instantsearch/guide/i18n.html -() => { - const App = () => ( - - - - ); -}; - -// https://community.algolia.com/react-instantsearch/guide/Sorting_and_filtering.html -// TODO -// () => { -// const App = () => ( -// -// -// -// orderBy(items, ['label', 'count'], ['asc', 'desc']) -// } -// /> -// -// ); -// }; - -// https://community.algolia.com/react-instantsearch/guide/Connectors.html -() => { - const MySearchBox = ({currentRefinement, refine}: SearchBoxProvided) => - refine(e.target.value)} - />; - - // `ConnectedSearchBox` renders a `` widget that is connected to - // the state, providing it with `currentRefinement` and `refine` props for - // reading and manipulating the current query of the search. - const ConnectedSearchBox = connectSearchBox(MySearchBox); -}; - -// https://community.algolia.com/react-instantsearch/guide/Default_refinements.html -() => { - const App = () => ( - - - - - ); -}; - -// TODO -// () => { -// const VirtualMenu = connectMenu(() => null); - -// const App = () => ( -// -//
-// -// items.filter(item => item.currentRefinement !== 'Orange') -// } -// /> -// -// -// -//
-// -// ); -// }; - -// https://community.algolia.com/react-instantsearch/guide/Searching_in_Lists.html - -; - -() => { - const RefinementListWithSearchBox = connectRefinementList(props => { - const values = props.items.map(item => { - const label = item._highlightResult - ? - : item.label; - - return ( -
  • - props.refine(item.value)}> - {label} {item.isRefined ? '- selected' : ''} - -
    • - ); - }); - - return ( -
    - props.searchForItems((e.target as HTMLInputElement).value)}/> -
      {values}
    -
    - ); - }); - - return ; -}; - -// https://community.algolia.com/react-instantsearch/guide/Virtual_widgets.html -() => { - const VirtualMenu = connectMenu(() => null); - const Hoodies = () => ; - - const App = () => ( - - - - - - ); -}; - -// https://community.algolia.com/react-instantsearch/guide/Search_parameters.html - - - // widgets -; - // https://community.algolia.com/react-instantsearch/guide/Search_state.html () => { const searchState: SearchState = { @@ -610,3 +339,48 @@ import { createInstantSearch } from "react-instantsearch-core"; ; }; + +() => { + const RefinementListWithSearchBox = connectRefinementList(props => { + const values = props.items.map(item => { + const label = item._highlightResult + ? + : item.label; + + return ( +
  • + props.refine(item.value)}> + {label} {item.isRefined ? '- selected' : ''} + +
    • + ); + }); + + return ( +
    + props.searchForItems((e.target as HTMLInputElement).value)}/> +
      {values}
    +
    + ); + }); + + return ; +}; + +// https://community.algolia.com/react-instantsearch/guide/Virtual_widgets.html +() => { + const VirtualMenu = connectMenu(() => null); + const Hoodies = () => ; + + const App = () => ( + + + + + + ); +};