Docs - Component example code snippet (#3555)

* Added show code and code snippet to component example

Co-authored-by: Adi Mordo <adids1221@gmail.com>

---------

Co-authored-by: Adi Mordo <adids1221@gmail.com>

Author: nitzanyiz

docuilib/package.json

@@ -30,6 +30,7 @@
     "clsx": "^1.1.1",
     "docusaurus-plugin-sass": "^0.2.1",
     "file-loader": "^6.2.0",
+    "prettier": "2.8.8",
     "prism-react-renderer": "^2.1.0",
     "react-html-parser": "^2.0.2",
     "react-native-web": "^0.19.12",

docuilib/src/assets/icons/code.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const CodeIcon = (props: React.ComponentProps<'svg'>) => {
+  return (
+    <svg {...props} viewBox="0 0 18 18" fill="currentColor" width="18" height="18">
+      <path d="M10,6.00254473 L11,6.00254473 L8,13 L7,13 L10,6.00254473 Z M6,12 L5.74819324,12 L1.99934428,9.78978657 L2.00158404,9.20893357 L5.74819324,7 L6.00018511,7 L6.00018511,8 L3.50778222,9.5 L6,11 L6,12 Z M11.9995294,12 L11.9995294,11 L14.4917472,9.5 L11.9993443,8 L11.9993443,7 L12.2513362,7 L15.9979454,9.20893357 L16.0001851,9.78978657 L12.2513362,12 L11.9995294,12 Z"/>
+    </svg>
+  );
+};
+
+export default CodeIcon;

docuilib/src/assets/icons/copy.png

@@ -0,0 +1,9 @@
+.codeBlock {
+  margin: 0;
+  text-align: 'left';
+  height: 100%;
+}
+
+.codeBlockContainer {
+  height: 100%;
+}

docuilib/src/assets/icons/copy@1.5x.png

@@ -0,0 +1,43 @@
+import React, {useMemo, ComponentProps} from 'react';
+import {default as ThemeCodeBlock, Props} from '@theme/CodeBlock';
+import styles from './CodeBlock.module.scss';
+import useFormattedCode from '../hooks/useFormattedCode';
+
+type CodeBlockProps = {
+  snippet: string;
+  printWidth?: number;
+  fontSize?: number;
+} & Omit<Props, 'children'>;
+
+const CodeBlock: React.FC<CodeBlockProps> = ({
+  snippet,
+  language,
+  printWidth = 35,
+  fontSize = 14,
+  showLineNumbers,
+  ...others
+}) => {
+  const {code} = useFormattedCode(snippet, {printWidth});
+
+  const containerStyle = useMemo<ComponentProps<'div'>['style']>(() => {
+    return {
+      fontSize,
+      maxWidth: printWidth * fontSize
+    };
+  }, [fontSize, printWidth]);
+
+  return (
+    <div style={containerStyle} className={styles.codeBlockContainer}>
+      <ThemeCodeBlock
+        className={styles.codeBlock}
+        language={language ?? 'jsx'}
+        showLineNumbers={showLineNumbers ?? true}
+        {...others}
+      >
+        {code}
+      </ThemeCodeBlock>
+    </div>
+  );
+};
+
+export default CodeBlock;

docuilib/src/assets/icons/copy@2x.png

@@ -0,0 +1,33 @@
+.showCodeButton {
+  position: absolute;
+  border: 0;
+  background: none;
+  color: rgb(56, 153, 236);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  right: 0px;
+  top: 0px;
+}
+
+.componentExample {
+  display: flex;
+  justify-content: space-between;
+}
+
+.componentItemContainer {
+  position: relative;
+  height: 100%;
+}
+
+.componentSpotlightStyle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}