refactor(app): move react components to react codebase [EE-3179] (#6971)

app/react/components/Code/Code.module.css

@@ -0,0 +1,19 @@
+.code {
+  display: block;
+  white-space: pre-wrap;
+  word-break: break-word;
+  padding: 20px;
+}
+
+.root {
+  position: relative;
+}
+
+.copy-button {
+  position: absolute;
+  top: min(20px, 25%);
+  right: 20px;
+  padding: 0;
+  outline: none !important;
+  margin: 0;
+}

app/react/components/Code/Code.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, Story } from '@storybook/react';
+
+import { Code } from './Code';
+
+export default {
+  component: Code,
+  title: 'Components/Code',
+} as Meta;
+
+interface Args {
+  text: string;
+  showCopyButton?: boolean;
+}
+
+function Template({ text, showCopyButton }: Args) {
+  return <Code showCopyButton={showCopyButton}>{text}</Code>;
+}
+
+export const Primary: Story<Args> = Template.bind({});
+Primary.args = {
+  text: 'curl -X GET http://ultra-sound-money.eth',
+  showCopyButton: true,
+};
+
+export const MultiLine: Story<Args> = Template.bind({});
+MultiLine.args = {
+  text: 'curl -X\n GET http://example-with-children.crypto',
+};
+
+export const MultiLineWithIcon: Story<Args> = Template.bind({});
+MultiLineWithIcon.args = {
+  text: 'curl -X\n GET http://example-with-children.crypto',
+  showCopyButton: true,
+};

app/react/components/Code/Code.test.tsx

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/react';
+
+import { Code } from './Code';
+
+test('should display a Code with children', async () => {
+  const children = 'test text code component';
+  const { findByText } = render(<Code>{children}</Code>);
+
+  const heading = await findByText(children);
+  expect(heading).toBeTruthy();
+});

app/react/components/Code/Code.tsx

@@ -0,0 +1,33 @@
+import clsx from 'clsx';
+
+import { Button } from '@@/buttons';
+import { useCopy } from '@@/buttons/CopyButton/useCopy';
+
+import styles from './Code.module.css';
+
+interface Props {
+  showCopyButton?: boolean;
+  children: string;
+}
+
+export function Code({ children, showCopyButton }: Props) {
+  const { handleCopy, copiedSuccessfully } = useCopy(children);
+
+  return (
+    <div className={styles.root}>
+      <code className={styles.code}>{children}</code>
+
+      {showCopyButton && (
+        <Button color="link" className={styles.copyButton} onClick={handleCopy}>
+          <i
+            className={clsx(
+              'fa',
+              copiedSuccessfully ? 'fa-check green-icon' : 'fa-copy '
+            )}
+            aria-hidden="true"
+          />
+        </Button>
+      )}
+    </div>
+  );
+}

app/react/components/Code/index.ts

@@ -0,0 +1 @@
+export { Code } from './Code';