Skip to content

Commit 27b2e2f

Browse files
haoAddsearchhaoAddsearch
committedAug 12, 2024
First commit
1 parent e34a2ae commit 27b2e2f

File tree

12 files changed

+120
-109
lines changed

12 files changed

+120
-109
lines changed
 

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,5 @@
2121
npm-debug.log*
2222
yarn-debug.log*
2323
yarn-error.log*
24+
25+
.idea

‎README.md

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,54 @@
1-
# Getting Started with Create React App
1+
# Using Search UI Library in React TypeScript project
22

33
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
44

5-
## Available Scripts
5+
## Installing project's dependencies
66

77
In the project directory, you can run:
88

9-
### `npm start`
9+
### `npm install`
1010

11-
Runs the app in the development mode.\
12-
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11+
Install all the dependencies required for the project to run.
1312

14-
The page will reload if you make edits.\
15-
You will also see any lint errors in the console.
13+
### `npm run start`
1614

17-
### `npm test`
15+
Launch the app in development mode.
1816

19-
Launches the test runner in the interactive watch mode.\
20-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
2117

22-
### `npm run build`
18+
## Using the Search UI Library
2319

24-
Builds the app for production to the `build` folder.\
25-
It correctly bundles React in production mode and optimizes the build for the best performance.
20+
### Loading AddSearch's UI libraries via CDN
21+
See public/index.html
22+
```html
23+
<script src="https://cdn.jsdelivr.net/npm/addsearch-js-client@0.8/dist/addsearch-js-client.min.js"></script>
24+
<script src="https://cdn.jsdelivr.net/npm/addsearch-search-ui@0.8/dist/addsearch-search-ui.min.js"></script>
25+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/addsearch-search-ui@0.8/dist/addsearch-search-ui.min.css" />
26+
```
2627

27-
The build is minified and the filenames include the hashes.\
28-
Your app is ready to be deployed!
28+
### Encapsulate each Search UI component
2929

30-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
30+
See src/addsearch-ui-components/SearchField for example.
31+
Then use the encapsulated component in your React TypeScript project.
3132

32-
### `npm run eject`
3333

34-
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
34+
### Use ecapulated SearchField component in your React TypeScript project
35+
See App.tsx:
36+
```jsx
37+
<SearchField
38+
uiInstance={addSearchUI}
39+
button="Search.."
40+
searchAsYouType={true}
41+
/>
42+
```
3543

36-
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
3744

38-
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
45+
### Typing Search UI component's props
46+
Give type definition to the props of the SearchField component.
47+
Component's setting can be found here: https://www.npmjs.com/package/addsearch-search-ui
3948

40-
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41-
42-
## Learn More
43-
44-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45-
46-
To learn React, check out the [React documentation](https://reactjs.org/).
49+
```typescript
50+
interface AddSearchSearchFieldProps {
51+
uiInstance: UIInstanceProps;
52+
button?: string;
53+
searchAsYouType?: boolean;
54+
}

‎public/favicon.ico

-3.78 KB
Binary file not shown.

‎public/index.html

Lines changed: 6 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,22 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
65
<meta name="viewport" content="width=device-width, initial-scale=1" />
76
<meta name="theme-color" content="#000000" />
87
<meta
98
name="description"
109
content="Web site created using create-react-app"
1110
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
14-
manifest.json provides metadata used when your web app is installed on a
15-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16-
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
19-
Notice the use of %PUBLIC_URL% in the tags above.
20-
It will be replaced with the URL of the `public` folder during the build.
21-
Only files inside the `public` folder can be referenced from the HTML.
2211

23-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24-
work correctly both with client-side routing and a non-root public URL.
25-
Learn how to configure a non-root public URL by running `npm run build`.
26-
-->
27-
<title>React App</title>
12+
<!-- AddSearch UI Libraries -->
13+
<script src="https://cdn.jsdelivr.net/npm/addsearch-js-client@0.8/dist/addsearch-js-client.min.js"></script>
14+
<script src="https://cdn.jsdelivr.net/npm/addsearch-search-ui@0.8/dist/addsearch-search-ui.min.js"></script>
15+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/addsearch-search-ui@0.8/dist/addsearch-search-ui.min.css" />
16+
17+
<title>Search UI Example</title>
2818
</head>
2919
<body>
3020
<noscript>You need to enable JavaScript to run this app.</noscript>
3121
<div id="root"></div>
32-
<!--
33-
This HTML file is a template.
34-
If you open it directly in the browser, you will see an empty page.
35-
36-
You can add webfonts, meta tags, or analytics to this file.
37-
The build step will place the bundled scripts into the <body> tag.
38-
39-
To begin the development, run `npm start` or `yarn start`.
40-
To create a production bundle, use `npm run build` or `yarn build`.
41-
-->
4222
</body>
4323
</html>

‎public/logo192.png

-5.22 KB
Binary file not shown.

‎public/logo512.png

-9.44 KB
Binary file not shown.

‎public/manifest.json

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎src/App.css

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -14,25 +14,10 @@
1414
}
1515

1616
.App-header {
17-
background-color: #282c34;
1817
min-height: 100vh;
1918
display: flex;
2019
flex-direction: column;
2120
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
25-
}
26-
27-
.App-link {
28-
color: #61dafb;
29-
}
30-
31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
21+
gap: 1em;
22+
/*font-size: calc(10px + 2vmin);*/
3823
}

‎src/App.tsx

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,34 @@
1-
import React from 'react';
2-
import logo from './logo.svg';
1+
import React, { useEffect } from 'react';
32
import './App.css';
3+
import SearchField from "./addsearch-ui-components/SearchField";
4+
import SearchResults from "./addsearch-ui-components/SearchResults";
5+
6+
declare global {
7+
interface Window {
8+
AddSearchClient: any;
9+
AddSearchUI: any;
10+
}
11+
}
412

513
function App() {
14+
const addSearchClient = new window.AddSearchClient('82b34461f88ea8d0f6c6e26ed89d07b1');
15+
const addSearchUI = new window.AddSearchUI(addSearchClient);
16+
17+
useEffect(() => {
18+
addSearchUI.start();
19+
}, [addSearchUI]);
20+
621
return (
722
<div className="App">
823
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.tsx</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
24+
<div>Search UI example - Build UI in React TypeScript project</div>
25+
<SearchField
26+
uiInstance={addSearchUI}
27+
button="Search.."
28+
searchAsYouType={true}
29+
/>
30+
31+
<SearchResults uiInstance={addSearchUI} />
2132
</header>
2233
</div>
2334
);

‎src/addsearch-ui-components/AddSearchTypes.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export interface UIInstanceProps {
2+
searchField: (config: { containerId: string; [key: string]: any }) => void;
3+
searchResults: (config: { containerId: string; [key: string]: any }) => void;
4+
}

‎src/addsearch-ui-components/SearchField.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React, { useEffect } from 'react';
2+
import { UIInstanceProps } from "./AddSearchTypes";
3+
4+
interface AddSearchSearchFieldProps {
5+
uiInstance: UIInstanceProps;
6+
button?: string;
7+
searchAsYouType?: boolean;
8+
}
9+
10+
const SearchField: React.FC<AddSearchSearchFieldProps> = (props) => {
11+
const id = 'addsearch-ui-' + Math.random().toString().split('.')[1];
12+
13+
useEffect(() => {
14+
props.uiInstance.searchField({
15+
containerId: id,
16+
...props
17+
});
18+
}, [id, props]);
19+
20+
return (
21+
<div id={id}></div>
22+
);
23+
};
24+
25+
export default SearchField;

‎src/addsearch-ui-components/SearchResults.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React, { useEffect } from 'react';
2+
import { UIInstanceProps } from "./AddSearchTypes";
3+
4+
interface AddSearchSearchResultsProps {
5+
uiInstance: UIInstanceProps;
6+
}
7+
8+
const SearchResults: React.FC<AddSearchSearchResultsProps> = (props) => {
9+
const id = 'addsearch-ui-' + Math.random().toString().split('.')[1];
10+
11+
useEffect(() => {
12+
props.uiInstance.searchResults({
13+
containerId: id,
14+
...props
15+
});
16+
}, [id, props]);
17+
18+
return <div id={id}></div>;
19+
};
20+
21+
export default SearchResults;

0 commit comments

Comments
 (0)