diff --git a/graph/client/src/main.tsx b/graph/client/src/main.tsx
index 57ab842a11..7ad6c5b98f 100644
--- a/graph/client/src/main.tsx
+++ b/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';
diff --git a/graph/project-details/src/lib/target.tsx b/graph/project-details/src/lib/target.tsx
index f52dfa269d..06707c8f67 100644
--- a/graph/project-details/src/lib/target.tsx
+++ b/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({
Options
-
+
{JSON.stringify(targetConfiguration.options, null, 2)}
-
+
@@ -225,17 +217,9 @@ export function Target({
)}
-
+
{JSON.stringify(targetConfiguration.configurations, null, 2)}
-
+
) : (
diff --git a/nx-dev/shared-ui-fence/.babelrc b/graph/ui-code-block/.babelrc
similarity index 100%
rename from nx-dev/shared-ui-fence/.babelrc
rename to graph/ui-code-block/.babelrc
diff --git a/nx-dev/shared-ui-fence/.eslintrc.json b/graph/ui-code-block/.eslintrc.json
similarity index 100%
rename from nx-dev/shared-ui-fence/.eslintrc.json
rename to graph/ui-code-block/.eslintrc.json
diff --git a/graph/ui-code-block/README.md b/graph/ui-code-block/README.md
new file mode 100644
index 0000000000..d6418d0487
--- /dev/null
+++ b/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).
diff --git a/graph/ui-code-block/jest.config.ts b/graph/ui-code-block/jest.config.ts
new file mode 100644
index 0000000000..5d772775f4
--- /dev/null
+++ b/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',
+};
diff --git a/nx-dev/shared-ui-selector/project.json b/graph/ui-code-block/project.json
similarity index 64%
rename from nx-dev/shared-ui-selector/project.json
rename to graph/ui-code-block/project.json
index 3e0f62c430..1115c54748 100644
--- a/nx-dev/shared-ui-selector/project.json
+++ b/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",
- "passWithNoTests": true
+ "jestConfig": "graph/ui-code-block/jest.config.ts"
}
}
}
diff --git a/graph/ui-code-block/src/index.ts b/graph/ui-code-block/src/index.ts
new file mode 100644
index 0000000000..31e71c05f7
--- /dev/null
+++ b/graph/ui-code-block/src/index.ts
@@ -0,0 +1 @@
+export { JsonCodeBlock } from './lib/json-code-block';
diff --git a/graph/ui-code-block/src/lib/json-code-block.tsx b/graph/ui-code-block/src/lib/json-code-block.tsx
new file mode 100644
index 0000000000..140bf07d59
--- /dev/null
+++ b/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 (
+
+ );
+}
+
+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 (
+
+
+ {
+ setCopied(true);
+ }}
+ >
+
+
+
+
+