added react snippets

Author: creador-dev

packages/react-snippets/README.md

@@ -0,0 +1,11 @@
+# `@wpmudev/react-snippets`
+
+> TODO: description
+
+## Usage
+
+```
+const reactSnippets = require('@wpmudev/react-snippets');
+
+// TODO: DEMONSTRATE API
+```

packages/react-snippets/__tests__/react-snippets.test.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const reactSnippets = require('..');
+
+describe('@wpmudev/react-snippets', () => {
+    it('needs tests');
+});

packages/react-snippets/docs/react-snippets.stories.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { Snippets } from "../lib/react-snippets";
+
+export default {
+	title: "Components/Snippets"
+};
+
+const Template = ({ ...props }) => {
+	return <Snippets {...props} />;
+};
+
+export const primary = Template.bind({});
+primary.storyName = "Default";
+primary.args = {
+	content: `<IfModule mod_rewrite.c>
+RewriteEngine On
+RewriteBase /
+RewriteRule ^index\\.php$ - [L]
+RewriteCond %{REQUEST_FILENAME} !-f
+RewriteCond %{REQUEST_FILENAME} !-d
+RewriteRule . /index.php [L]
+</IfModule>`,
+	copy: true
+};
+
+export const secondary = Template.bind({});
+secondary.storyName = "No-Copy Button";
+secondary.args = {
+	...primary.args,
+	copy: false
+};

packages/react-snippets/lib/react-snippets.js

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import { useCopyToClipboard } from "@wordpress/compose";
+
+const CopyToClipboard = htmlCode => {
+	const [hasCopied, setHasCopied] = useState(false);
+	const CopyToClipboardRef = useCopyToClipboard(htmlCode, () => {
+		setHasCopied(true);
+	});
+
+	return (
+		<button
+			className={hasCopied ? "sui-button sui-tooltip" : "sui-button"}
+			aria-label={hasCopied ? "Copied!" : ""}
+			data-tooltip={hasCopied ? "Copied!" : ""}
+			onMouseLeave={() => setHasCopied(false)}
+			ref={CopyToClipboardRef}
+			data-clipboard-target="">
+			Copy
+		</button>
+	);
+};
+
+const Snippets = ({ copy, content }) => {
+	const htmlCode = content;
+
+	return (
+		<div className="sui-code-snippet-wrapper">
+			<pre className="sui-code-snippet">{htmlCode}</pre>
+			{copy && CopyToClipboard(htmlCode)}
+		</div>
+	);
+};
+
+export { Snippets };

packages/react-snippets/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@wpmudev/react-snippets",
+  "version": "1.0.0",
+  "description": "Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth is in ya face when ya hear the British cannons go / BOOM",
+  "keywords": [],
+  "author": "Pawan Kumar <[email protected]>",
+  "license": "ISC",
+  "main": "lib/react-snippets.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/creador-dev/shared-ui-react.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "bugs": {
+    "url": "https://github.com/creador-dev/shared-ui-react/issues"
+  },
+  "homepage": "https://github.com/creador-dev/shared-ui-react#readme",
+  "dependencies": {
+    "@wordpress/compose": "^5.0.7"
+  }
+}