docs(nx-dev): Add feedback CTA

nx-dev/feature-doc-viewer/src/lib/table-of-contents.tsx

@@ -1,6 +1,9 @@
 import Link from 'next/link';
 import { cx } from '@nx/nx-dev/ui-primitives';
 import { useHeadingsObserver } from './use-headings-observer';
+import { useState } from 'react';
+import { FeedbackDialog } from '@nx/feature-feedback';
+import { sendCustomEvent } from '@nx/nx-dev/feature-analytics';
 
 interface Heading {
   id: string;
@@ -70,6 +73,17 @@ export function TableOfContents({
     headings.find((i) => i.level === 1)?.title || null
   );
 
+  const [showFeedback, setShowFeedback] = useState(false);
+
+  function submitIdeaFeedback(feedback: string) {
+    // sanitize the feedback from the user script tags/other malicious code
+    const sanitizedFeedback = feedback.replace(/(<([^>]+)>)/gi, '');
+
+    sendCustomEvent('feedback', 'feedback', 'idea', undefined, {
+      feedback: sanitizedFeedback,
+    });
+  }
+
   return (
     <>
       <nav className="toc">
@@ -100,6 +114,22 @@ export function TableOfContents({
         ) : null}
       </nav>
       <div className="p-4">{children}</div>
+      <div className="flex w-full items-center space-x-2 sm:px-6 xl:px-8">
+        <div className="flex items-center justify-between pl-2 pr-2 space-x-2 border rounded-md border-slate-200 hover:border-slate-400 dark:border-slate-700 print:hidden">
+          <button
+            className="px-4 py-2 border-transparent hover:text-slate-900 dark:hover:text-sky-400 whitespace-nowrap"
+            onClick={() => setShowFeedback(true)}
+          >
+            {' '}
+            Feedback?{' '}
+          </button>
+        </div>
+      </div>
+      <FeedbackDialog
+        isOpen={showFeedback}
+        onClose={() => setShowFeedback(false)}
+        onFeedbackSubmit={submitIdeaFeedback}
+      />
     </>
   );
 }

nx-dev/feature-feedback/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

nx-dev/feature-feedback/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

nx-dev/feature-feedback/README.md

@@ -0,0 +1,7 @@
+# feature-feedback
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test feature-feedback` to execute the unit tests via [Jest](https://jestjs.io).

nx-dev/feature-feedback/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'feature-feedback',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/nx-dev/feature-feedback',
+};

nx-dev/feature-feedback/project.json

@@ -0,0 +1,11 @@
+{
+  "name": "feature-feedback",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "nx-dev/feature-feedback/src",
+  "projectType": "library",
+  "tags": ["scope:nx-dev", "type:feature"],
+  "targets": {
+    "lint": {},
+    "test": {}
+  }
+}

nx-dev/feature-feedback/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/feedback-dialog';

nx-dev/feature-feedback/src/lib/feature-feedback.module.css

@@ -0,0 +1,63 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
+
+.closebutton {
+  position: absolute;
+  top: 0.4rem;
+  right: 0.7rem;
+  padding: 0.5rem;
+  cursor: pointer;
+  font-size: 1.5rem;
+}
+
+.fadeinout {
+  -webkit-animation: fadeinout 0.5s; /* Safari, Chrome and Opera > 12.1 */
+  -moz-animation: fadeinout 0.5s; /* Firefox < 16 */
+  -ms-animation: fadeinout 0.5s; /* Internet Explorer */
+  -o-animation: fadeinout 0.5s; /* Opera < 12.1 */
+  animation: fadeinout 0.5s;
+}
+
+@keyframes fadeinout {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Firefox < 16 */
+@keyframes fadeinout {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadeinout {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadeinout {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}