genesys-react-components 0.3.0 → 0.3.1-devengage-1574-implementing-code-fences.220

package/package.json

@@ -1,54 +1,56 @@
 {
-	"name": "genesys-react-components",
-	"version": "0.3.0",
-	"description": "A React component library containing standardized form elements.",
-	"type": "module",
-	"types": "build/index.d.ts",
-	"exports": {
-		"require": "./src/index.ts",
-		"default": "./build/index.js"
-	},
-	"files": [
-		"build",
-		"src"
-	],
-	"scripts": {
-		"build": "rm -rf build && rollup -c rollup.config.js",
-		"localbuild": "npm i && npm run build && rm -rf node_modules",
-		"test": "echo \"0/0 tests passed. That's technically a perfect score. Keep up the great work!\""
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+ssh://git@github.com/purecloudlabs/genesys-react-components.git"
-	},
-	"author": "Genesys",
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/purecloudlabs/genesys-react-components/issues"
-	},
-	"homepage": "https://purecloudlabs.github.io/genesys-react-components",
-	"devDependencies": {
-		"@rollup/plugin-commonjs": "^21.0.1",
-		"@rollup/plugin-node-resolve": "^13.0.6",
-		"@types/react": "^16",
-		"genesys-dev-icons": "^0.1.15",
-		"react": "^16",
-		"react-dom": "^16",
-		"rollup": "^2.60.2",
-		"rollup-plugin-peer-deps-external": "^2.2.4",
-		"rollup-plugin-postcss": "^4.0.2",
-		"rollup-plugin-typescript2": "^0.31.1",
-		"sass": "^1.44.0",
-		"typescript": "^4.5.2",
-		"uuid": "^8.3.2"
-	},
-	"peerDependencies": {
-		"genesys-dev-icons": "0.x",
-		"react": ">=16",
-		"react-dom": ">=16",
-		"uuid": "^8.3.2"
-	},
-	"dependencies": {
-		"postcss": "^8.4.6"
-	}
-}
+    "name": "genesys-react-components",
+    "version": "0.3.1-devengage-1574-implementing-code-fences.220",
+    "description": "A React component library containing standardized form elements.",
+    "type": "module",
+    "types": "build/index.d.ts",
+    "exports": {
+        "require": "./src/index.ts",
+        "default": "./build/index.js"
+    },
+    "files": [
+        "build",
+        "src"
+    ],
+    "scripts": {
+        "build": "rm -rf build && rollup -c rollup.config.js",
+        "localbuild": "npm i && npm run build && rm -rf node_modules",
+        "test": "echo \"0/0 tests passed. That's technically a perfect score. Keep up the great work!\""
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+ssh://git@github.com/purecloudlabs/genesys-react-components.git"
+    },
+    "author": "Genesys",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/purecloudlabs/genesys-react-components/issues"
+    },
+    "homepage": "https://purecloudlabs.github.io/genesys-react-components",
+    "devDependencies": {
+        "@rollup/plugin-commonjs": "^21.0.1",
+        "@rollup/plugin-node-resolve": "^13.0.6",
+        "@types/react": "^16",
+        "genesys-dev-icons": "^0.3.0",
+        "react": "^16",
+        "react-dom": "^16",
+        "rollup": "^2.60.2",
+        "rollup-plugin-peer-deps-external": "^2.2.4",
+        "rollup-plugin-postcss": "^4.0.2",
+        "rollup-plugin-typescript2": "^0.31.1",
+        "sass": "^1.44.0",
+        "typescript": "^4.5.2",
+        "uuid": "^8.3.2"
+    },
+    "peerDependencies": {
+        "genesys-dev-icons": "0.x",
+        "react": ">=16",
+        "react-dom": ">=16",
+        "uuid": "^8.3.2"
+    },
+    "dependencies": {
+        "@rollup/plugin-json": "^6.0.0",
+        "postcss": "^8.4.6",
+        "react-syntax-highlighter": "^15.5.0"
+    }
+}

package/src/codefence/CodeFence.scss

@@ -0,0 +1,103 @@
+@import '../theme/variables.scss';
+
+.fence {
+	border-radius: 0;
+	margin: 40px 0;
+	position: relative;
+
+	&.json-editor-fence {
+		margin: 1rem 0 0 0 !important;
+		height: 80%;
+		width: 100%;
+		overflow: hidden;
+	}
+
+	.fence-header {
+		background-color: var($--theme-codefence-header-background-color);
+		color: var($--theme-codefence-header-text-color);
+		font-size: 14px;
+		border-radius: 4px 4px 0px 0px;
+		border-bottom: 1px solid var($--theme-codefence-border-color);
+		margin: 0;
+		padding: 5px 16px;
+		min-height: 24px;
+		display: flex;
+		flex-direction: row-reverse;
+		flex-wrap: nowrap;
+		justify-content: space-between;
+		align-items: center;
+		gap: 16px;
+
+		&.clickable {
+			cursor: pointer;
+		}
+
+		& > * {
+			flex-grow: 0;
+			flex-shrink: 0;
+		}
+
+		.copy-button {
+			font-size: 14px;
+			padding: 0;
+			color: var($--theme-codefence-header-text-color);
+		}
+
+		.fence-title {
+			flex-grow: 1;
+		}
+
+		.icon {
+			line-height: 0;
+		}
+	}
+
+	.fence-body {
+		padding: 0;
+		overflow: auto;
+		border-radius: 0 0 4px 4px;
+
+		&.json-editor-body {
+			height: 100%;
+			line-height: 21px;
+		}
+
+		&.collapsed {
+			max-height: 15px;
+
+			pre {
+				padding-top: 3px;
+			}
+		}
+
+		pre {
+			display: block;
+			margin: 0 !important;
+			padding: 0 !important;
+			border-radius: 0 0 4px 4px !important;
+			background: var($--theme-codefence-background-color) !important;
+			height: 100%;
+			width: 100%;
+			box-sizing: border-box;
+
+			&.json-editor-pre {
+				height: 100%;
+				width: 100%;
+				box-sizing: border-box;
+			}
+
+			code {
+				background-color: transparent;
+				margin: 0 !important;
+				padding: 20px !important;
+				display: block !important;
+				max-height: 600px;
+				color: white;
+
+				.linenumber {
+					min-width: 26px !important;
+				}
+			}
+		}
+	}
+}

package/src/codefence/CodeFence.tsx

@@ -0,0 +1,68 @@
+import { GenesysDevIcon, GenesysDevIcons } from 'genesys-dev-icons';
+import React, { useState } from 'react';
+import { PrismAsync as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+import CopyButton from '../copybutton/CopyButton';
+
+import './CodeFence.scss';
+
+declare global {
+	interface Window {
+		Prism: any;
+	}
+}
+
+interface IProps {
+	value: string | JSX.Element;
+	noCollapse?: boolean;
+	noHeader?: boolean;
+	autoCollapse?: boolean;
+	title?: string;
+	language?: string;
+	showLineNumbers?: boolean;
+	indentation?: string;
+	className?: string;
+	jsonEditor?: boolean;
+	innerRef?: any;
+}
+
+export default function CodeFence(props: IProps) {
+	const [collapsed, setCollapsed] = useState(props.noCollapse ? false : props.autoCollapse || false);
+
+	const bodyClassNames: string[] = ['fence-body'];
+	if (props.jsonEditor) bodyClassNames.push('json-editor-body');
+
+	const classNames: string[] = ['fence'];
+	if (props.className) classNames.push(props.className);
+	if (props.noCollapse) classNames.push('nocollapse');
+	if (props.indentation) classNames.push(`indent-${props.indentation}`);
+	if (props.jsonEditor) classNames.push('json-editor-fence');
+
+	return (
+		<div className={classNames.join(' ')}>
+			{props.noHeader || typeof props.value !== 'string' ? (
+				''
+			) : (
+				<div
+					className={`fence-header${props.noCollapse ? '' : ' clickable'}`}
+					onClick={() => setCollapsed(props.noCollapse ? false : !collapsed)}
+				>
+					{/* this is a row-reverse flexbox, the JSX is meant to be backwards */}
+					{props.noCollapse ? undefined : (
+						<GenesysDevIcon icon={collapsed ? GenesysDevIcons.AppChevronDown : GenesysDevIcons.AppChevronUp} />
+					)}
+					<CopyButton copyText={props.value} />
+					<span className="fence-title">{props.title}</span>
+				</div>
+			)}
+			{collapsed ? undefined : (
+				<div ref={props.innerRef || undefined} className={bodyClassNames.join(' ')}>
+					<SyntaxHighlighter language={props.language} style={vscDarkPlus} showLineNumbers={props.showLineNumbers}>
+						{props.value}
+					</SyntaxHighlighter>
+				</div>
+			)}
+		</div>
+	);
+}

package/src/index.ts

@@ -13,6 +13,7 @@ import AlertBlock from './alertblock/AlertBlock';
 import LoadingPlaceholder from './loadingplaceholder/LoadingPlaceholder';
 import Tooltip from './tooltip/Tooltip';
 import CopyButton from './copybutton/CopyButton';
+import CodeFence from './codefence/CodeFence';
 
 export {
 	DxAccordion,
@@ -29,6 +30,7 @@ export {
 	CopyButton,
 	LoadingPlaceholder,
 	AlertBlock,
+	CodeFence,
 };
 
 export interface StringChangedCallback {