feat #231 - Implement Code component

.storybook/index.css

@@ -2,6 +2,7 @@
 
 @import '~normalize.css';
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300&display=swap');
 
 html,
 body,

package.json

@@ -24,6 +24,7 @@
 		"jsonpath-plus": "^5.0.4",
 		"lodash": "^4.17.20",
 		"moment": "^2.29.1",
+		"prismjs": "^1.23.0",
 		"react": "^17.0.1",
 		"react-dom": "^17.0.1",
 		"react-hook-form": "^6.15.4",
@@ -92,6 +93,7 @@
 		"@types/jest": "^26.0.15",
 		"@types/lodash": "^4.14.162",
 		"@types/node": "^14.14.2",
+		"@types/prismjs": "^1.16.3",
 		"@types/react": "^17.0.2",
 		"@types/react-dom": "^17.0.1",
 		"@types/uuid": "^8.3.0",

rollup.config.ts

@@ -44,6 +44,7 @@ export default {
 		'jsonpath-plus',
 		'lodash',
 		'moment',
+		'prismjs',
 		'react',
 		'react-dom',
 		'react-hook-form',

src/components/Code/Code.stories.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { Code, CodeProps } from '.'
+import { Meta, Story } from '@storybook/react/types-6-0'
+
+export default {
+	argTypes: {
+		height: { defaultValue: 64 }
+	},
+	component: Code,
+	title: 'Code'
+} as Meta
+
+const Template: Story<CodeProps> = args => <Code {...args} />
+
+/* eslint-disable sort-keys */
+const testJson = {
+	dassana: {
+		context: {
+			attachedResources: {
+				'count-of-attached-eni': 3,
+				'does-any-eni-have-public-ip': true,
+				'are-there-flows-from-internet-in-vpcflows': false
+			}
+		}
+	},
+	resourceConfig: {
+		configuration: {
+			description: 'ssh-from-world',
+			groupName: 'prod-cache',
+			ipPermissions: [
+				{
+					fromPort: 22,
+					ipProtocol: 'tcp',
+					ipv6Ranges: [
+						{
+							cidrIpv6: '::/0'
+						}
+					],
+					prefixListIds: [],
+					toPort: 22,
+					userIdGroupPairs: [],
+					ipv4Ranges: [
+						{
+							cidrIp: '0.0.0.0/0'
+						}
+					]
+				}
+			]
+		}
+	}
+}
+/* eslint-enable sort-keys */
+
+export const Default = Template.bind({})
+Default.args = {
+	code: testJson
+}

src/components/Code/index.tsx

@@ -0,0 +1,38 @@
+import './prism.css'
+import cn from 'classnames'
+import Prism from 'prismjs'
+import React, { FC, useEffect } from 'react'
+require('prismjs/plugins/line-numbers/prism-line-numbers')
+require('prismjs/components/prism-json')
+
+// overwriting default styles react example https://github.com/reactjs/reactjs.org/blob/master/src/prism-styles.js#L11
+export interface CodeProps {
+	code: string | Record<string, any>
+	language?: 'json' | 'javascript'
+	lineNumbers?: boolean
+	readOnly?: boolean
+}
+
+export const Code: FC<CodeProps> = ({
+	code,
+	language = 'json',
+	lineNumbers = true,
+	readOnly = true
+}: CodeProps) => {
+	useEffect(() => {
+		Prism.highlightAll()
+	}, [])
+
+	return (
+		<pre
+			className={cn({ 'line-numbers': lineNumbers })}
+			contentEditable={!readOnly}
+		>
+			<code className={`language-${language}`}>
+				{typeof code === 'string'
+					? code
+					: JSON.stringify(code, null, '\t')}
+			</code>
+		</pre>
+	)
+}