├── .gitattributes
├── .github
    └── workflows
    │   └── ci.yml
├── .gitignore
├── .huskyrc.js
├── .prettierignore
├── .prettierrc.js
├── README.md
├── babel-jest.config.js
├── jest.config.js
├── package.json
├── src
    ├── FeedbackFish.tsx
    ├── index.ts
    ├── setupTests.ts
    ├── test
    │   └── index.test.tsx
    └── useFeedbackFish.ts
├── tsconfig.json
└── yarn.lock


/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto eol=lf
2 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | on: push
 3 | jobs:
 4 |   build:
 5 |     runs-on: ubuntu-latest
 6 |     steps:
 7 |       - uses: actions/checkout@v2
 8 |       - name: Install modules
 9 |         run: yarn
10 |       - name: Run tests
11 |         run: yarn test
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules


--------------------------------------------------------------------------------
/.huskyrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   hooks: {
3 |     "pre-commit": "pretty-quick --staged",
4 |   },
5 | }
6 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/
3 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   proseWrap: "always",
3 |   semi: false,
4 | }
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # @feedback-fish/react
 2 | 
 3 | The [Feedback Fish](https://feedback.fish) widget for React apps.
 4 | 
 5 | ## Usage
 6 | 
 7 | See [the documentation](https://feedback.fish/help/react) for usage
 8 | instructions!
 9 | 
10 | ## License
11 | 
12 | Licensed under the MIT license.
13 | 


--------------------------------------------------------------------------------
/babel-jest.config.js:
--------------------------------------------------------------------------------
1 | // Only used by Jest for tests
2 | module.exports = {
3 |   presets: [
4 |     "@babel/preset-env",
5 |     "@babel/preset-react",
6 |     "@babel/preset-typescript",
7 |   ],
8 | }
9 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
3 |   transform: {
4 |     "\\.tsx?$": ["babel-jest", { configFile: "./babel-jest.config.js" }],
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@feedback-fish/react",
 3 |   "version": "1.2.2",
 4 |   "private": false,
 5 |   "description": "Embed the Feedback Fish widget into your React app to collect user feedback.",
 6 |   "homepage": "https://feedback.fish",
 7 |   "bugs": "https://github.com/feedback-fish/feedback-fish-react/issues",
 8 |   "repository": "https://github.com/feedback-fish/feedback-fish-react",
 9 |   "license": "MIT",
10 |   "types": "dist/index.d.ts",
11 |   "source": "src/index.ts",
12 |   "main": "dist/feedback-fish.js",
13 |   "module": "dist/feedback-fish.module.js",
14 |   "unpkg": "dist/feedback-fish.umd.js",
15 |   "scripts": {
16 |     "prepare": "yarn run build",
17 |     "build": "microbundle",
18 |     "dev": "microbundle watch",
19 |     "test": "jest"
20 |   },
21 |   "files": [
22 |     "dist",
23 |     "src",
24 |     "tsconfig.json"
25 |   ],
26 |   "devDependencies": {
27 |     "@babel/preset-env": "^7.11.5",
28 |     "@babel/preset-react": "^7.10.4",
29 |     "@babel/preset-typescript": "^7.10.4",
30 |     "@testing-library/jest-dom": "^5.11.4",
31 |     "@testing-library/react": "^11.0.4",
32 |     "@types/jest": "^26.0.14",
33 |     "@types/react": "^16.9.49",
34 |     "babel-jest": "^26.3.0",
35 |     "husky": "^4.3.0",
36 |     "jest": "^26.4.2",
37 |     "microbundle": "^0.12.3",
38 |     "prettier": "2.1.2",
39 |     "pretty-quick": "^3.0.2",
40 |     "react": "^16.8.0",
41 |     "react-dom": "^16.13.1",
42 |     "typescript": "^4.0.3"
43 |   },
44 |   "peerDependencies": {
45 |     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
46 |   },
47 |   "engines": {
48 |     "node": ">=10.16.0"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/FeedbackFish.tsx:
--------------------------------------------------------------------------------
 1 | import React, { FunctionComponent, ReactElement } from "react"
 2 | 
 3 | import { useFeedbackFish } from "./useFeedbackFish"
 4 | 
 5 | type Props = {
 6 |   projectId: Parameters<typeof useFeedbackFish>[0]
 7 |   children?: ReactElement | ((props: object) => ReactElement)
 8 |   userId?: string
 9 |   metadata?: {
10 |     [key: string]: string
11 |   }
12 | }
13 | 
14 | export const FeedbackFish: FunctionComponent<Props> = (props) => {
15 |   useFeedbackFish(props.projectId)
16 | 
17 |   if (!props.children) return null
18 | 
19 |   const childrenProps = {
20 |     "data-feedback-fish": true,
21 |     "data-feedback-fish-userid": props.userId,
22 |     ...Object.keys(props.metadata || {}).reduce((acc, key) => {
23 |       return {
24 |         ...acc,
25 |         [`data-feedback-fish-${key}`]: props?.metadata?.[key],
26 |       }
27 |     }, {}),
28 |   }
29 | 
30 |   if (React.isValidElement(props.children)) {
31 |     return React.cloneElement(props.children, childrenProps)
32 |   }
33 | 
34 |   if (typeof props.children === "function") {
35 |     return props.children(childrenProps)
36 |   }
37 | 
38 |   return null
39 | }
40 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./FeedbackFish"
2 | export * from "./useFeedbackFish"
3 | 


--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | import "@testing-library/jest-dom/extend-expect"
2 | 


--------------------------------------------------------------------------------
/src/test/index.test.tsx:
--------------------------------------------------------------------------------
 1 | import { render, screen } from "@testing-library/react"
 2 | import * as React from "react"
 3 | 
 4 | import { FeedbackFish } from "../"
 5 | 
 6 | const defaultChild = <button>Send feedback</button>
 7 | 
 8 | const renderFeedbackFish = (propsOverwrite = {}) => {
 9 |   const props = {
10 |     children: defaultChild,
11 |     projectId: "bla",
12 |     ...propsOverwrite,
13 |   }
14 | 
15 |   return render(<FeedbackFish {...props} />)
16 | }
17 | const getButton = () => screen.getByRole("button", { name: /send feedback/i })
18 | 
19 | it(`injects the feedback fish script tag`, () => {
20 |   const { baseElement } = renderFeedbackFish({ projectId: "bla" })
21 | 
22 |   expect(baseElement).toMatchInlineSnapshot(`
23 |     <body>
24 |       <div>
25 |         <button
26 |           data-feedback-fish="true"
27 |         >
28 |           Send feedback
29 |         </button>
30 |       </div>
31 |       <script
32 |         defer=""
33 |         src="https://feedback.fish/ff.js?pid=bla"
34 |       />
35 |     </body>
36 |   `)
37 | })
38 | 
39 | it(`handles a single element as a child`, () => {
40 |   renderFeedbackFish({ children: <button>Send feedback</button> })
41 | 
42 |   const button = screen.getByRole("button", { name: /send feedback/i })
43 |   expect(button).toHaveAttribute("data-feedback-fish", "true")
44 | })
45 | 
46 | it(`handles a function as a child`, () => {
47 |   renderFeedbackFish({
48 |     children: (props) => <button {...props}>Send feedback</button>,
49 |   })
50 | 
51 |   const button = screen.getByRole("button", { name: /send feedback/i })
52 |   expect(button).toHaveAttribute("data-feedback-fish", "true")
53 | })
54 | 
55 | it(`handles userid`, () => {
56 |   renderFeedbackFish({ userId: "my-user-id" })
57 | 
58 |   const button = getButton()
59 |   expect(button).toHaveAttribute("data-feedback-fish", "true")
60 |   expect(button).toHaveAttribute("data-feedback-fish-userid", "my-user-id")
61 | })
62 | 
63 | it(`handles metadata`, () => {
64 |   renderFeedbackFish({ metadata: { email: "bla", website: "asdf" } })
65 | 
66 |   const button = getButton()
67 |   expect(button).toHaveAttribute("data-feedback-fish", "true")
68 |   expect(button).toHaveAttribute("data-feedback-fish-email", "bla")
69 |   expect(button).toHaveAttribute("data-feedback-fish-website", "asdf")
70 | })
71 | 


--------------------------------------------------------------------------------
/src/useFeedbackFish.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect } from "react"
 2 | 
 3 | export const useFeedbackFish = (projectId: string) =>
 4 |   useEffect(() => {
 5 |     // @ts-ignore
 6 |     if (window.__feedback_fish_injected__) return
 7 |     // @ts-ignore
 8 |     window.__feedback_fish_injected__ = true
 9 | 
10 |     const script = document.createElement("script")
11 |     script.src = `https://feedback.fish/ff.js?pid=${projectId}`
12 |     script.defer = true
13 | 
14 |     const onScriptError = () => script.remove()
15 |     script.addEventListener("error", onScriptError)
16 | 
17 |     document.body.appendChild(script)
18 |   }, [])
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
 3 |   "include": ["src", "types"],
 4 |   "compilerOptions": {
 5 |     "module": "esnext",
 6 |     "lib": ["dom", "esnext"],
 7 |     "importHelpers": true,
 8 |     // output .d.ts declaration files for consumers
 9 |     "declaration": true,
10 |     // output .js.map sourcemap files for consumers
11 |     "sourceMap": true,
12 |     // match output dir to input dir. e.g. dist/index instead of dist/src/index
13 |     "rootDir": "./src",
14 |     // stricter type-checking for stronger correctness. Recommended by TS
15 |     "strict": true,
16 |     // linter checks for common issues
17 |     "noImplicitReturns": true,
18 |     "noFallthroughCasesInSwitch": true,
19 |     // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
20 |     "noUnusedLocals": true,
21 |     "noUnusedParameters": true,
22 |     // use Node's module resolution algorithm, instead of the legacy TS one
23 |     "moduleResolution": "node",
24 |     // transpile JSX to React.createElement
25 |     "jsx": "react",
26 |     // interop between ESM and CJS modules. Recommended by TS
27 |     "esModuleInterop": true,
28 |     // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
29 |     "skipLibCheck": true,
30 |     // error out if import and file system have a casing mismatch. Recommended by TS
31 |     "forceConsistentCasingInFileNames": true,
32 |     // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
33 |     "noEmit": true
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------