chore: import upstream snapshot with attribution

graph/ui-code-block/.babelrc

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

graph/ui-code-block/.storybook/main.ts

@@ -0,0 +1,24 @@
+import { mergeConfig } from 'vite';
+
+export default {
+  stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: ['@storybook/addon-docs'],
+
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+  docs: {},
+  viteFinal: async (config) => {
+    const {
+      nxViteTsPaths,
+      // nx-ignore-next-line
+    } = await import('@nx/vite/plugins/nx-tsconfig-paths.plugin');
+    return mergeConfig(config, {
+      plugins: [nxViteTsPaths()],
+    });
+  },
+};

graph/ui-code-block/.storybook/preview.ts

@@ -0,0 +1 @@
+import './tailwind.css';

graph/ui-code-block/.storybook/tailwind.css

@@ -0,0 +1,27 @@
+@import 'tailwindcss';
+
+@plugin '@tailwindcss/typography';
+@plugin '@tailwindcss/forms' {
+  strategy: class;
+}
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@source '../src';
+@source '../../ui-common/src';
+@source '../../ui-icons/src';
+@source '../../shared/src';
+
+@source not '../../**/*.spec.*';
+@source not '../../**/eslint.config.*';
+
+/* v3 compat: default border color was gray-200, v4 is currentColor. */
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}

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/eslint.config.mjs

@@ -0,0 +1,4 @@
+import { baseConfig, reactHooksV7Off } from '../../eslint.config.mjs';
+import nx from '@nx/eslint-plugin';
+
+export default [...baseConfig, ...nx.configs['flat/react'], ...reactHooksV7Off];

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

@@ -0,0 +1,10 @@
+module.exports = {
+  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/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@nx/graph-ui-code-block",
+  "version": "0.0.1",
+  "type": "commonjs",
+  "private": true,
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "dependencies": {
+    "@nx/graph-ui-common": "workspace:",
+    "tailwind-merge": "catalog:tailwind"
+  },
+  "devDependencies": {
+    "jest": "catalog:jest"
+  }
+}

graph/ui-code-block/postcss.config.js

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

graph/ui-code-block/project.json

@@ -0,0 +1,52 @@
+{
+  "name": "graph-ui-code-block",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "graph/ui-code-block/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "graph/ui-code-block/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nx/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/graph-ui-code-block",
+        "configDir": "graph/ui-code-block/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "test-storybook": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "test-storybook -c graph/ui-code-block/.storybook --url=http://localhost:4400"
+      }
+    },
+    "static-storybook": {
+      "executor": "@nx/web:file-server",
+      "options": {
+        "buildTarget": "graph-ui-code-block:build-storybook",
+        "staticFilePath": "dist/storybook/graph-ui-code-block"
+      },
+      "configurations": {
+        "ci": {
+          "buildTarget": "graph-ui-code-block:build-storybook:ci"
+        }
+      }
+    }
+  }
+}

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.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { JsonCodeBlock } from './json-code-block';
+
+const meta: Meta<typeof JsonCodeBlock> = {
+  component: JsonCodeBlock,
+  title: 'JsonCodeBlock',
+};
+export default meta;
+
+type Story = StoryObj<typeof JsonCodeBlock>;
+
+export const Simple: Story = {
+  args: {
+    data: {
+      commands: [{ command: 'remix build' }],
+      cwd: 'apps/demo',
+    },
+    renderSource: (propertyName: string) => <span>test</span>,
+  },
+};

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

@@ -0,0 +1,94 @@
+// @ts-ignore
+import SyntaxHighlighter, { createElement } from 'react-syntax-highlighter';
+import { JSX, ReactNode, useMemo } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { CopyToClipboardButton } from '@nx/graph-ui-common';
+
+export function JsonCodeBlockPreTag({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element {
+  return (
+    <div
+      className={twMerge(
+        'hljs not-prose w-full overflow-hidden rounded-md',
+        '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 interface JsonCodeBlockProps {
+  data: any;
+  renderSource: (propertyName: string) => ReactNode;
+  copyTooltipText: string;
+}
+
+export function JsonCodeBlock(props: JsonCodeBlockProps): JSX.Element {
+  const jsonString = useMemo(
+    () => JSON.stringify(props.data, null, 2),
+    [props.data]
+  );
+  return (
+    <div className="code-block group relative w-full">
+      <div className="absolute right-0 top-0 z-10 flex">
+        <CopyToClipboardButton
+          text={jsonString}
+          tooltipAlignment="right"
+          tooltipText={props.copyTooltipText}
+          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'
+          )}
+        />
+      </div>
+      <SyntaxHighlighter
+        language="json"
+        children={jsonString}
+        PreTag={JsonCodeBlockPreTag}
+        renderer={sourcesRenderer(props.renderSource)}
+      />
+    </div>
+  );
+}
+
+export function sourcesRenderer(
+  renderSource: (propertyName: string) => ReactNode
+) {
+  return ({ rows, stylesheet }: any) => {
+    return rows.map((node: any, idx: number) => {
+      const element = createElement({
+        node,
+        stylesheet,
+        useInlineStyles: false,
+        key: `code-line-${idx}`,
+      });
+      let sourceElement: ReactNode;
+      const attrNode = node.children.find(
+        (c: any) =>
+          c.type === 'element' && c.properties?.className?.includes('hljs-attr')
+      );
+      if (attrNode?.children?.length) {
+        for (const child of attrNode.children) {
+          sourceElement = renderSource(child.value); // e.g. command
+          if (sourceElement) break;
+        }
+      }
+      return (
+        <span className="group/line flex" key={`code-group${idx}`}>
+          <span>{element}</span>
+          {sourceElement && (
+            <span className="min-w-0 flex-1 pl-2 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100">
+              {sourceElement}
+            </span>
+          )}
+        </span>
+      );
+    });
+  };
+}

graph/ui-code-block/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

graph/ui-code-block/tsconfig.lib.json

@@ -0,0 +1,33 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "outDir": "dist",
+    "types": ["node"]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.tsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"],
+  "files": [
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "references": [
+    {
+      "path": "../ui-common/tsconfig.lib.json"
+    }
+  ]
+}

graph/ui-code-block/tsconfig.spec.json

@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/spec",
+    "customConditions": ["@nx/nx-source"],
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

graph/ui-code-block/tsconfig.storybook.json

@@ -0,0 +1,33 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "outDir": "dist/storybook",
+    "composite": false,
+    "moduleResolution": "node16"
+  },
+  "files": [
+    "../../node_modules/@nx/react/typings/styled-jsx.d.ts",
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.js"
+  ],
+  "include": [
+    "src/**/*.stories.ts",
+    "src/**/*.stories.js",
+    "src/**/*.stories.jsx",
+    "src/**/*.stories.tsx",
+    "src/**/*.stories.mdx",
+    ".storybook/*.js",
+    ".storybook/*.ts"
+  ]
+}