feat(graph): decouple graph client from nx.dev <Fence> component (#21186)

graph/client/src/main.tsx

@@ -1,3 +1,9 @@
+/* eslint-disable import/first */
+// debug must be first import
+if (process.env.NODE_ENV === 'development') {
+  require('preact/debug');
+}
+
 import { StrictMode } from 'react';
 import { inspect } from '@xstate/inspect';
 import { App } from './app/app';

graph/project-details/src/lib/target.tsx

@@ -14,7 +14,7 @@ import {
   useEnvironmentConfig,
   useRouteConstructor,
 } from '@nx/graph/shared';
-import { Fence } from '@nx/shared-ui-fence';
+import { JsonCodeBlock } from '@nx/graph/ui-code-block';
 import { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { FadingCollapsible } from './ui/fading-collapsible.component';
@@ -194,17 +194,9 @@ export function Target({
               <h4 className="font-bold mb-2">Options</h4>
               <div className="mb-4">
                 <FadingCollapsible>
-                  <Fence
+                  <JsonCodeBlock>
-                    language="json"
-                    command=""
-                    path=""
-                    fileName=""
-                    highlightLines={[]}
-                    lineGroups={{}}
-                    enableCopy={true}
-                  >
                     {JSON.stringify(targetConfiguration.options, null, 2)}
-                  </Fence>
+                  </JsonCodeBlock>
                 </FadingCollapsible>
               </div>
             </>
@@ -225,17 +217,9 @@ export function Target({
                 )}
               </h4>
               <FadingCollapsible>
-                <Fence
+                <JsonCodeBlock>
-                  language="json"
-                  command=""
-                  path=""
-                  fileName=""
-                  highlightLines={[]}
-                  lineGroups={{}}
-                  enableCopy={true}
-                >
                   {JSON.stringify(targetConfiguration.configurations, null, 2)}
-                </Fence>
+                </JsonCodeBlock>
               </FadingCollapsible>
             </>
           ) : (

graph/ui-code-block/README.md

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

graph/ui-code-block/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  testEnvironment: 'jsdom',
+  displayName: 'graph-ui-code-block',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': 'babel-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/graph/ui-graph',
+};

graph/ui-code-block/project.json

@@ -1,7 +1,7 @@
 {
-  "name": "shared-ui-selector",
+  "name": "graph-ui-code-block",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "nx-dev/shared-ui-selector/src",
+  "sourceRoot": "graph/ui-code-block/src",
   "projectType": "library",
   "tags": [],
   "targets": {
@@ -12,8 +12,7 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "nx-dev/shared-ui-selector/jest.config.ts",
+        "jestConfig": "graph/ui-code-block/jest.config.ts"
-        "passWithNoTests": true
       }
     }
   }

graph/ui-code-block/src/index.ts

@@ -0,0 +1 @@
+export { JsonCodeBlock } from './lib/json-code-block';

graph/ui-code-block/src/lib/json-code-block.tsx

@@ -0,0 +1,75 @@
+import {
+  ClipboardDocumentCheckIcon,
+  ClipboardDocumentIcon,
+  InformationCircleIcon,
+  SparklesIcon,
+} from '@heroicons/react/24/outline';
+// @ts-ignore
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+// @ts-ignore
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { Children, JSX, ReactNode, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export function JsonCodeBlockPreTag({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element {
+  return (
+    <div
+      className={twMerge(
+        'hljs not-prose w-full overflow-x-auto',
+        'font-mono text-sm',
+        'border border-slate-200 bg-slate-50/50 dark:border-slate-700 dark:bg-slate-800/60'
+      )}
+    >
+      <div className="p-4">{children}</div>
+    </div>
+  );
+}
+
+export function JsonCodeBlock(props: { children: ReactNode }): JSX.Element {
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    if (!copied) return;
+    const t = setTimeout(() => {
+      setCopied(false);
+    }, 3000);
+    return () => clearTimeout(t);
+  }, [copied]);
+  return (
+    <div className="code-block group relative w-full">
+      <div className="absolute top-0 right-0 z-10 flex">
+        <CopyToClipboard
+          text={props.children}
+          onCopy={() => {
+            setCopied(true);
+          }}
+        >
+          <button
+            type="button"
+            className={twMerge(
+              'not-prose flex',
+              'border border-slate-200 bg-slate-50/50 p-2 dark:border-slate-700 dark:bg-slate-800/60',
+              'opacity-0 transition-opacity group-hover:opacity-100'
+            )}
+          >
+            {copied ? (
+              <ClipboardDocumentCheckIcon className="h-5 w-5 text-blue-500 dark:text-sky-500" />
+            ) : (
+              <ClipboardDocumentIcon className="h-5 w-5" />
+            )}
+          </button>
+        </CopyToClipboard>
+      </div>
+      <SyntaxHighlighter
+        useInlineStyles={false}
+        showLineNumbers={false}
+        language="json"
+        children={props.children}
+        PreTag={JsonCodeBlockPreTag}
+      />
+    </div>
+  );
+}

nx-dev/shared-ui-fence/src/index.ts

@@ -1,3 +0,0 @@
-export * from './lib/fence.component';
-export { TerminalOutput } from './lib/fences/terminal-output.component';
-export { TerminalShellWrapper } from './lib/fences/terminal-shell.component';

nx-dev/shared-ui-selector/README.md

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

nx-dev/shared-ui-selector/jest.config.ts

@@ -1,10 +0,0 @@
-/* eslint-disable */
-export default {
-  displayName: 'shared-ui-selector',
-  preset: '../../jest.preset.js',
-  transform: {
-    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
-  },
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/nx-dev/shared-ui-selector',
-};

nx-dev/shared-ui-selector/src/index.ts

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

nx-dev/ui-fence/README.md

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

nx-dev/ui-fence/jest.config.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
 export default {
-  displayName: 'shared-ui-fence',
+  displayName: 'nx-dev-ui-fence',
   preset: '../../jest.preset.js',
   transform: {
     '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/nx-dev/shared-ui-fence',
+  coverageDirectory: '../../coverage/nx-dev/ui-fence',
 };

nx-dev/ui-fence/project.json

@@ -1,7 +1,7 @@
 {
-  "name": "shared-ui-fence",
+  "name": "nx-dev-ui-fence",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "nx-dev/shared-ui-fence/src",
+  "sourceRoot": "nx-dev/ui-fence/src",
   "projectType": "library",
   "tags": [],
   "targets": {
@@ -12,7 +12,7 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "nx-dev/shared-ui-fence/jest.config.ts",
+        "jestConfig": "nx-dev/ui-fence/jest.config.ts",
         "passWithNoTests": true
       }
     }

nx-dev/ui-fence/src/index.ts

@@ -0,0 +1,3 @@
+export { Fence, FenceProps } from './lib/fence';
+export { TerminalOutput } from './lib/fences/terminal-output';
+export { TerminalShellWrapper } from './lib/fences/terminal-shell';

nx-dev/ui-fence/src/lib/fence.tsx

@@ -4,14 +4,15 @@ import {
   InformationCircleIcon,
   SparklesIcon,
 } from '@heroicons/react/24/outline';
-import React, { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, JSX, useEffect, useState } from 'react';
 // @ts-ignore
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 // @ts-ignore
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { CodeOutput } from './fences/code-output.component';
+import { CodeOutput } from './fences/code-output';
-import { TerminalOutput } from './fences/terminal-output.component';
+import { TerminalOutput } from './fences/terminal-output';
-import { Selector } from '@nx/shared-ui-selector';
+
+import { Selector } from './selector';
 
 function resolveLanguage(lang: string) {
   switch (lang) {

nx-dev/ui-fence/src/lib/fences/code-output.tsx

@@ -1,5 +1,5 @@
 import { cx } from '@nx/nx-dev/ui-primitives';
-import { ReactNode } from 'react';
+import { JSX, ReactNode } from 'react';
 
 export function CodeOutput({
   content,

nx-dev/ui-fence/src/lib/fences/terminal-output.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { TerminalShellWrapper } from './terminal-shell.component';
+import { TerminalShellWrapper } from './terminal-shell';
 
 export function TerminalOutput({
   content,

nx-dev/ui-fence/src/lib/fences/terminal-shell.tsx

@@ -1,5 +1,5 @@
 import { cx } from '@nx/nx-dev/ui-primitives';
-import { ReactNode } from 'react';
+import { JSX, ReactNode } from 'react';
 
 export function TerminalShellWrapper({
   isMessageBelow,

nx-dev/ui-fence/src/lib/selector.tsx

@@ -1,6 +1,6 @@
 import { Listbox, Transition } from '@headlessui/react';
-import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/24/solid';
+import { ChevronUpDownIcon } from '@heroicons/react/24/solid';
-import { Fragment } from 'react';
+import { Fragment, JSX } from 'react';
 
 export interface SelectorProps<T> {
   children: JSX.Element;

nx-dev/ui-markdoc/src/lib/nodes/fence-wrapper.component.tsx

@@ -1,4 +1,4 @@
-import { Fence, FenceProps } from '@nx/shared-ui-fence';
+import { Fence, FenceProps } from '@nx/nx-dev/ui-fence';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 

nx-dev/ui-markdoc/src/lib/tags/terminal-video.component.tsx

@@ -1,4 +1,4 @@
-import { TerminalShellWrapper } from '@nx/shared-ui-fence';
+import { TerminalShellWrapper } from '@nx/nx-dev/ui-fence';
 import { VideoLoop } from './video-loop.component';
 import { Schema } from '@markdoc/markdoc';
 

packages/remix/src/utils/create-watch-paths.spec.ts

@@ -9,12 +9,7 @@ describe('createWatchPaths', () => {
     const testDir = joinPathFragments(workspaceRoot, 'e2e/remix');
 
     const paths = await createWatchPaths(testDir);
-    expect(paths).toEqual([
+    expect(paths).toEqual(['../../packages', '../../graph', '../../e2e/utils']);
-      '../../packages',
-      '../../graph',
-      '../../nx-dev',
-      '../../e2e/utils',
-    ]);
   });
 });
 

tsconfig.base.json

@@ -37,6 +37,7 @@
       "@nx/express": ["packages/express"],
       "@nx/graph/project-details": ["graph/project-details/src/index.ts"],
       "@nx/graph/shared": ["graph/shared/src/index.ts"],
+      "@nx/graph/ui-code-block": ["graph/ui-code-block/src/index.ts"],
       "@nx/graph/ui-components": ["graph/ui-components/src/index.ts"],
       "@nx/graph/ui-graph": ["graph/ui-graph/src/index.ts"],
       "@nx/graph/ui-theme": ["graph/ui-theme/src/index.ts"],
@@ -84,6 +85,7 @@
       "@nx/nx-dev/ui-common": ["nx-dev/ui-common/src/index.ts"],
       "@nx/nx-dev/ui-community": ["nx-dev/ui-community/src/index.ts"],
       "@nx/nx-dev/ui-conference": ["nx-dev/ui-conference/src/index.ts"],
+      "@nx/nx-dev/ui-fence": ["nx-dev/ui-fence/src/index.ts"],
       "@nx/nx-dev/ui-home": ["nx-dev/ui-home/src/index.ts"],
       "@nx/nx-dev/ui-markdoc": ["nx-dev/ui-markdoc/src/index.ts"],
       "@nx/nx-dev/ui-member-card": ["nx-dev/ui-member-card/src/index.ts"],
@@ -103,8 +105,6 @@
       "@nx/remix/*": ["packages/remix/*"],
       "@nx/rollup": ["packages/rollup"],
       "@nx/rollup/*": ["packages/rollup/*"],
-      "@nx/shared-ui-fence": ["nx-dev/shared-ui-fence/src/index.ts"],
-      "@nx/shared-ui-selector": ["nx-dev/shared-ui-selector/src/index.ts"],
       "@nx/storybook": ["packages/storybook"],
       "@nx/storybook/*": ["packages/storybook/*"],
       "@nx/typedoc-theme": ["typedoc-theme/src/index.ts"],