@cn-npm/search-autocomplete 0.2.16

package/dist/components/ErrorBoundary/ErrorBoundary.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+declare class ErrorBoundary extends React.Component<any, any> {
+    constructor(props: any);
+    static getDerivedStateFromError(error: any): {
+        hasError: boolean;
+    };
+    componentDidCatch(error: any, errorInfo: any): void;
+    render(): any;
+}
+export default ErrorBoundary;

package/dist/components/Loader/Loader.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+interface LoaderProps {
+    className?: string;
+}
+declare const Loader: FC<LoaderProps>;
+export default Loader;

package/dist/components/SearchAutocomplete/SearchAutocomplete.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+interface SearchAutocompleteProps {
+    label?: string;
+    open?: boolean;
+}
+declare const SearchAutocomplete: FC<SearchAutocompleteProps>;
+export default SearchAutocomplete;

package/dist/components/SearchAutocompleteSection/SearchAutocompleteSection.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { Result } from "../../search-result";
+export interface SearchAutocompleteSectionProps {
+    searchTerm: string;
+    title?: string;
+    results?: Result[];
+}
+declare const SearchAutocompleteSection: FC<SearchAutocompleteSectionProps>;
+export default SearchAutocompleteSection;

package/dist/components/SearchAutocompleteTag/SearchAutocompleteTag.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+export interface SearchAutocompleteTagProps {
+    section: string;
+    searchTerm: string;
+    ein?: string;
+    name: string;
+    url?: string;
+}
+declare const SearchAutocompleteTag: FC<SearchAutocompleteTagProps>;
+export default SearchAutocompleteTag;

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+import SearchAutocomplete from "./SearchAutocomplete/SearchAutocomplete";
+import "../index.css";
+export { SearchAutocomplete };

package/dist/index.d.ts

@@ -0,0 +1 @@
+import "./index.css";

package/dist/reportWebVitals.d.ts

@@ -0,0 +1,3 @@
+import { ReportHandler } from 'web-vitals';
+declare const reportWebVitals: (onPerfEntry?: ReportHandler) => void;
+export default reportWebVitals;

package/dist/search-result.d.ts

@@ -0,0 +1,42 @@
+export interface Result {
+    ein?: string;
+    url?: string;
+    logo?: string;
+    title: string;
+    city?: string;
+    state?: string;
+    rating?: string;
+    highest_level_advisory?: string;
+}
+export interface Section {
+    title: string;
+    results: Result[];
+}
+export interface Option {
+    title: string;
+    count: number;
+}
+export interface Filter {
+    name: string;
+    options: Option[];
+}
+export interface FacetedResult {
+    title: string;
+    url: string;
+    ein?: string;
+}
+export interface FacetedResponse {
+    size: number;
+    from: number;
+    term: string;
+    result_count: number;
+    results: FacetedResult[];
+    filters: Filter[];
+}
+export interface SearchResponseData {
+    searchFaceted?: FacetedResponse;
+    searchAutocomplete?: Section[];
+}
+export interface SearchResponse {
+    data: SearchResponseData;
+}

package/dist/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/generate-react-cli.json

@@ -0,0 +1,15 @@
+{
+  "usesTypeScript": true,
+  "usesCssModule": true,
+  "cssPreprocessor": "scss",
+  "testLibrary": "None",
+  "component": {
+    "default": {
+      "path": "src/components",
+      "withStyle": true,
+      "withTest": true,
+      "withStory": true,
+      "withLazy": false
+    }
+  }
+}

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@cn-npm/search-autocomplete",
+  "version": "0.2.16",
+  "main": "dist/bundle.js",
+  "peerDependencies": {
+    "@headlessui/react": "^1.7.1",
+    "axios": "^0.27.2",
+    "classnames": "^2.3.1",
+    "react": "^18.2.0",
+    "react-debounce-input": "^3.3.0",
+    "react-dom": "^18.2.0",
+    "react-highlight-words": "^0.18.0",
+    "react-scripts": "5.0.1",
+    "react-transition-group": "^4.4.5",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "clean": "rm -rf dist",
+    "build": "npm run clean && rollup -c",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public",
+    "release": "npm run build && npm publish"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@headlessui/react": "^1.7.1",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-node-resolve": "^14.1.0",
+    "@rollup/plugin-typescript": "^8.5.0",
+    "@rollup/plugin-url": "^7.0.0",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-controls": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-interactions": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addon-postcss": "^3.0.0-alpha.1",
+    "@storybook/builder-webpack5": "^6.5.10",
+    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/node-logger": "^6.5.10",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.10",
+    "@storybook/testing-library": "^0.0.13",
+    "@svgr/rollup": "^6.3.1",
+    "@tailwindcss/forms": "^0.5.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/enzyme": "^3.10.12",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.11.47",
+    "@types/react": "^18.0.17",
+    "@types/react-animate-on-scroll": "^2.1.5",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-highlight-words": "^0.16.4",
+    "@types/react-transition-group": "^4.4.5",
+    "autoprefixer": "^10.4.8",
+    "axios": "^0.27.2",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "classnames": "^2.3.1",
+    "postcss": "^8.4.16",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-debounce-input": "^3.3.0",
+    "react-dom": "^18.2.0",
+    "react-highlight-words": "^0.18.0",
+    "react-scripts": "5.0.1",
+    "react-transition-group": "^4.4.5",
+    "rollup": "^2.79.1",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-svg": "^2.0.0",
+    "sass": "^1.54.3",
+    "tailwindcss": "^3.1.8",
+    "typescript": "^4.7.4",
+    "web-vitals": "^2.1.4",
+    "webpack": "^5.74.0"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/rollup.config.js

@@ -0,0 +1,35 @@
+/* eslint-disable import/no-anonymous-default-export */
+import typescript from "@rollup/plugin-typescript";
+import external from "rollup-plugin-peer-deps-external";
+import nodeResolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import postcss from "rollup-plugin-postcss";
+import pkg from "./package.json";
+import babel from "rollup-plugin-babel";
+import svgr from "@svgr/rollup";
+
+export default {
+  input: "src/components/index.tsx",
+  output: {
+    file: pkg.main,
+    format: "cjs",
+  },
+  plugins: [
+    svgr({
+      exportType: "named",
+    }),
+    external(),
+    postcss(),
+    babel(),
+    nodeResolve(),
+    typescript({
+      exclude: [
+        "**/__tests__",
+        "**/*.test.tsx",
+        "**/*.test.ts",
+        "**/*.stories.tsx",
+      ],
+    }),
+    commonjs(),
+  ],
+};

package/src/App.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import "./App.scss";
+import SearchAutocomplete from "./components/SearchAutocomplete/SearchAutocomplete";
+
+function App() {
+  return (
+    <div className="App">
+      <SearchAutocomplete />
+    </div>
+  );
+}
+
+export default App;

package/src/assets/img/circle-close.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+  <g id="_System_Icons" data-name="*System_Icons">
+    <g id="System_Icons" data-name="System/Icons">
+      <g id="Group-9">
+        <g id="streamline-icon-remove-circle_48x48" data-name="streamline-icon-remove-circle@48x48">
+          <path id="Shape" d="M9,0C4.03,0,0,4.03,0,9s4.03,9,9,9,9-4.03,9-9c0-2.39-.95-4.68-2.64-6.36-1.69-1.69-3.98-2.64-6.36-2.64Zm4.12,12.05c.29,.29,.3,.77,0,1.06-.29,.29-.77,.3-1.06,0l-2.93-2.93s-.08-.06-.14-.06-.1,.02-.14,.06l-2.92,2.93c-.29,.29-.77,.29-1.06,0-.29-.29-.29-.77,0-1.06l2.92-2.92s.06-.08,.06-.14-.02-.1-.06-.14l-2.92-2.92c-.25-.3-.24-.74,.04-1.02,.28-.28,.72-.29,1.02-.04l2.92,2.92s.08,.06,.14,.06,.1-.02,.14-.06l2.93-2.92c.3-.25,.74-.24,1.02,.04,.28,.28,.29,.72,.04,1.02l-2.93,2.92s-.06,.08-.06,.14,.02,.1,.06,.14l2.93,2.92Z"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/assets/img/search.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.14 16.14">
+  <g id="_System_Icons" data-name="*System_Icons">
+    <g id="System_Icons" data-name="System/Icons">
+      <g id="Group-8">
+        <g id="Group-7">
+          <g id="atom_icon_search" data-name="atom/icon/search">
+            <g id="icon_dark_magnifying-glass" data-name="icon/dark/magnifying-glass">
+              <g id="Mask">
+                <path id="path-1" d="M7,.02C3.14,.02,0,3.16,0,7.02s3.14,7,7,7c1.18,0,2.34-.28,3.32-.82,.08,.09,.17,.18,.26,.26l2,2c.5,.57,1.28,.81,2.01,.63,.74-.18,1.31-.76,1.49-1.49,.18-.74-.06-1.51-.63-2.01l-2-2c-.1-.1-.2-.18-.32-.26,.54-.98,.88-2.12,.88-3.32C14.02,3.14,10.88,0,7.02,0l-.02,.02Zm0,2c2.78,0,5,2.22,5,5,0,1.32-.48,2.54-1.32,3.44-.02,.02-.04,.04-.06,.06-.09,.08-.18,.17-.26,.26-.88,.8-2.08,1.26-3.38,1.26-2.78,0-5-2.22-5-5S4.2,2.04,6.98,2.04l.02-.02Z" style="fill-rule: evenodd;"/>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/components/ErrorBoundary/ErrorBoundary.module.scss

@@ -0,0 +1 @@
+.ErrorBoundary {}

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+class ErrorBoundary extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: any) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: any, errorInfo: any) {
+    // You can also log the error to an error reporting service
+    // logErrorToMyService(error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // Render fallback UI
+      return (
+        <div className="px-6 h-full mb-12 max-h-[70vh] overflow-y-auto">
+          <p>Sorry, there was a problem. Please try your search again.</p>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

package/src/components/Loader/Loader.module.scss

@@ -0,0 +1,21 @@
+.Loader {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: inline-block;
+  border-top: 3px solid #fff;
+  border-right: 3px solid transparent;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+  @apply border-t-blue-500;
+}
+
+// Rotation animation
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/components/Loader/Loader.stories.tsx

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import Loader from './Loader';
+
+export default {
+  title: "Loader",
+};
+
+export const Default = () => <Loader />;
+
+Default.story = {
+  name: 'default',
+};

package/src/components/Loader/Loader.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from "@testing-library/react";
+import Loader from "./Loader";
+
+// Loader test block
+describe("<Loader />", () => {
+  // Component should mount
+  test("it should mount", () => {
+    render(<Loader />);
+    const saveButton = screen.getByTestId("Loader");
+    expect(saveButton).toBeInTheDocument();
+  });
+});

package/src/components/Loader/Loader.tsx

@@ -0,0 +1,18 @@
+import classNames from "classnames";
+import React, { FC } from "react";
+import styles from "./Loader.module.scss";
+
+// Loader properties
+interface LoaderProps {
+  className?: string;
+}
+
+// Loader component
+const Loader: FC<LoaderProps> = (props) => (
+  <span
+    className={classNames(styles.Loader, props.className)}
+    data-testid="Loader"
+  ></span>
+);
+
+export default Loader;

package/src/components/SearchAutocomplete/SearchAutocomplete.module.scss

@@ -0,0 +1,3 @@
+.SearchAutocomplete {
+  @apply relative font-sofia-pro;
+}

package/src/components/SearchAutocomplete/SearchAutocomplete.stories.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable */
+import SearchAutocomplete from "./SearchAutocomplete";
+
+export default {
+  title: "SearchAutocomplete",
+};
+
+export const Default = (args: any) => <SearchAutocomplete {...args} />;
+
+// Default arguments
+Default.args = {
+  open: false,
+  label: "",
+};
+
+// Storybook controls
+Default.argTypes = {
+  open: {
+    name: "Show Results",
+    description: "Show or hide the search results popover (for dev only).",
+    control: "boolean",
+    table: {
+      defaultValue: {
+        summary: false,
+      },
+    },
+  },
+  label: {
+    name: "Label",
+    description: "Text for label and placeholder",
+    table: {
+      defaultValue: {
+        summary: "Search by Charity or Cause",
+      },
+    },
+  },
+};
+
+Default.story = {
+  name: "Default",
+};

package/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import {
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import SearchAutocomplete from "./SearchAutocomplete";
+
+describe("<SearchAutocomplete />", () => {
+  // Component should mount
+  test("it should mount", async () => {
+    await render(<SearchAutocomplete />);
+    const searchAutocomplete = screen.getByTestId("SearchAutocomplete");
+    expect(searchAutocomplete).toBeInTheDocument();
+  });
+
+  // Component should have an input
+  test("it should have an input", async () => {
+    render(<SearchAutocomplete />);
+    const searchInput = screen.getByRole("textbox", { name: /search/i });
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  // Component should have a placeholder
+  test("it should have a placeholder", async () => {
+    await render(<SearchAutocomplete />);
+    const searchInput = screen.getByRole("textbox", { name: /search/i });
+    expect(searchInput.hasAttribute("placeholder")).toBeTruthy();
+  });
+
+  // Component should have a search button
+  test("it should have a seach button", async () => {
+    await render(<SearchAutocomplete />);
+    const saveButton = screen.getByRole("button");
+    expect(saveButton).toBeInTheDocument();
+  });
+
+  // Component should show modal on focus
+  test("it should show modal on focus", async () => {
+    await render(<SearchAutocomplete />);
+    const searchInput = screen.getByRole("textbox", { name: /search/i });
+    fireEvent.focus(searchInput);
+    const searchResults = screen.getByTestId("searchResults");
+    expect(searchResults).toBeInTheDocument();
+  });
+
+  // Component should show loading on search
+  test("it should show loading on search", async () => {
+    await render(<SearchAutocomplete />);
+    const searchInput = screen.getByRole("textbox", { name: /search/i });
+    await fireEvent.focus(searchInput);
+    await fireEvent.change(searchInput, { target: { value: "hear" } });
+
+    const loader = screen.getByTestId("Loader");
+    expect(loader).toBeInTheDocument();
+  });
+
+  // Component should show message on error
+  test("it should show message on error", async () => {
+    await render(<SearchAutocomplete />);
+    const searchInput = screen.getByRole("textbox", { name: /search/i });
+    await fireEvent.focus(searchInput);
+    await fireEvent.change(searchInput, { target: { value: "///\"''" } });
+    const errorText = await screen.findByText(
+      "Sorry, there was a problem. Please try your search again."
+    );
+    expect(errorText).toBeInTheDocument();
+  });
+
+  // Component should show results on search
+  test("it should show results on search", async () => {
+    await render(<SearchAutocomplete />);
+    const searchInput = screen.getByRole("textbox", { name: /search/i });
+    await fireEvent.focus(searchInput);
+    await fireEvent.change(searchInput, { target: { value: "hear" } });
+
+    await waitFor(async () => {
+      const sections = await screen.findByTestId("Sections");
+      const results = within(sections).getAllByRole("link");
+      expect(results.length).toBeGreaterThan(0);
+    });
+  });
+});