From 3636c89eca2ebf38564b32b16984da3a0cebf024 Mon Sep 17 00:00:00 2001
From: Barsnes <tobias.barsnes@digdir.no>
Date: Tue, 11 Jun 2024 13:28:58 +0200
Subject: [PATCH] start with react info page in storybook

---
 .../CodeSnippet/CodeSnippet.module.css        | 39 ++++++++
 .../CodeSnippet/CodeSnippet.tsx               | 95 +++++++++++++++++++
 apps/storybook/docs-components/index.ts       |  1 +
 packages/css/link.css                         |  4 -
 packages/react/stories/react-usage.mdx        | 47 +++++++++
 5 files changed, 182 insertions(+), 4 deletions(-)
 create mode 100644 apps/storybook/docs-components/CodeSnippet/CodeSnippet.module.css
 create mode 100644 apps/storybook/docs-components/CodeSnippet/CodeSnippet.tsx
 create mode 100644 packages/react/stories/react-usage.mdx

diff --git a/apps/storybook/docs-components/CodeSnippet/CodeSnippet.module.css b/apps/storybook/docs-components/CodeSnippet/CodeSnippet.module.css
new file mode 100644
index 0000000000..0bf546092f
--- /dev/null
+++ b/apps/storybook/docs-components/CodeSnippet/CodeSnippet.module.css
@@ -0,0 +1,39 @@
+.codeSnippet {
+  position: relative;
+  max-width: 100%;
+  overflow-x: auto;
+  width: 100%;
+}
+
+.copyContainer {
+  position: sticky;
+  top: 0;
+  left: 0;
+  height: calc(100% - 1px);
+  width: calc(100% - 1px);
+  float: left;
+  margin-right: -100%;
+  pointer-events: none;
+}
+
+.icon {
+  pointer-events: auto;
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  height: 40px;
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #3b434d;
+  color: white;
+  border-radius: var(--ds-border-radius-md);
+  border: none;
+  transition: 0.15s all;
+  cursor: pointer;
+}
+
+.icon:hover {
+  background-color: #575e68;
+}
diff --git a/apps/storybook/docs-components/CodeSnippet/CodeSnippet.tsx b/apps/storybook/docs-components/CodeSnippet/CodeSnippet.tsx
new file mode 100644
index 0000000000..cb58dc2c56
--- /dev/null
+++ b/apps/storybook/docs-components/CodeSnippet/CodeSnippet.tsx
@@ -0,0 +1,95 @@
+import { useEffect, useState } from 'react';
+import { FilesIcon } from '@navikt/aksel-icons';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { format } from 'prettier/standalone.js';
+import * as prettierMarkdown from 'prettier/plugins/markdown.js';
+import * as prettierHtml from 'prettier/plugins/html.js';
+import * as prettierCSS from 'prettier/plugins/postcss.js';
+import * as prettierTypescript from 'prettier/plugins/typescript.js';
+import * as prettierEstree from 'prettier/plugins/estree';
+import { nightOwl } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { Tooltip } from '@digdir/designsystemet-react';
+
+import classes from './CodeSnippet.module.css';
+
+const plugins = [
+  prettierTypescript,
+  prettierEstree,
+  prettierCSS,
+  prettierMarkdown,
+  prettierHtml,
+];
+
+type CodeSnippetProps = {
+  language?: 'css' | 'html' | 'ts' | 'markdown';
+  children?: string;
+};
+
+const CodeSnippet = ({
+  language = 'markdown',
+  children = '',
+}: CodeSnippetProps) => {
+  const [toolTipText, setToolTipText] = useState('Kopier');
+  const [snippet, setSnippet] = useState('');
+
+  useEffect(() => {
+    async function formatSnippet(
+      children: string,
+      language: CodeSnippetProps['language'],
+    ) {
+      try {
+        const formatted = await format(children, {
+          parser: language === 'ts' ? 'typescript' : language,
+          plugins,
+        });
+        setSnippet(formatted);
+      } catch (error) {
+        console.error('Failed formatting code snippet:', error);
+      }
+    }
+    void formatSnippet(children, language);
+
+    return () => {
+      setSnippet('');
+    };
+  }, [children, language]);
+
+  const onButtonClick = () => {
+    setToolTipText('Kopiert!');
+    navigator.clipboard.writeText(children).catch((reason) => {
+      throw Error(String(reason));
+    });
+  };
+
+  return (
+    <div className={classes.codeSnippet}>
+      {snippet && (
+        <>
+          <Tooltip content={toolTipText}>
+            <button
+              onMouseEnter={() => setToolTipText('Kopier')}
+              onClick={() => onButtonClick()}
+              className={classes.icon}
+              title='Kopier'
+            >
+              <FilesIcon fontSize={20} />
+            </button>
+          </Tooltip>
+          <SyntaxHighlighter
+            style={nightOwl}
+            language='jsx'
+            customStyle={{
+              fontSize: '15px',
+              margin: 0,
+              padding: '18px',
+            }}
+          >
+            {snippet}
+          </SyntaxHighlighter>
+        </>
+      )}
+    </div>
+  );
+};
+
+export { CodeSnippet };
diff --git a/apps/storybook/docs-components/index.ts b/apps/storybook/docs-components/index.ts
index 24654f514a..5b3d2a486c 100644
--- a/apps/storybook/docs-components/index.ts
+++ b/apps/storybook/docs-components/index.ts
@@ -7,4 +7,5 @@ export {
 export { Stack } from './Stack/Stack';
 export { Do, Dont } from './DoAndDont/DoAndDont';
 export { LinkHeading } from './LinkHeading/LinkHeading';
+export { CodeSnippet } from './CodeSnippet/CodeSnippet';
 export * from './Information/Information';
diff --git a/packages/css/link.css b/packages/css/link.css
index a2d2a5e13b..c013e0f5e7 100644
--- a/packages/css/link.css
+++ b/packages/css/link.css
@@ -25,8 +25,6 @@
     --dsc-link-color-active: var(--ds-color-accent-text-default);
     --dsc-link-color-active-background: var(--ds-color-accent-surface-default);
     --dsc-link-color-visited: var(--ds-global-purple-12);
-    --dsc-link-color-focus: var(--ds-focus-inner);
-    --dsc-link-color-focus-background: var(--ds-focus-outer);
   }
 
   .ds-link--neutral {
@@ -35,8 +33,6 @@
     --dsc-link-color-active: var(--ds-color-neutral-text-subtle);
     --dsc-link-color-active-background: var(--ds-color-neutral-surface-default);
     --dsc-link-color-visited: var(--ds-global-purple-12);
-    --dsc-link-color-focus: var(--ds-focus-inner);
-    --dsc-link-color-focus-background: var(--ds-focus-outer);
   }
 
   .ds-link:visited {
diff --git a/packages/react/stories/react-usage.mdx b/packages/react/stories/react-usage.mdx
new file mode 100644
index 0000000000..d25214bc04
--- /dev/null
+++ b/packages/react/stories/react-usage.mdx
@@ -0,0 +1,47 @@
+import { Meta } from '@storybook/blocks';
+
+import { CodeSnippet } from '@doc-components';
+
+<Meta title='Bruk React' />
+
+# Hvordan bruke React
+
+Introduksjon til bruk, regler og gotchas.
+
+## SSR
+
+Alle våre komponenter er klient komponenter, og bruker `"use client"`.
+
+Dersom du ønsker å bruke våre komponenter i dine server komponenter, så kan du ikke bruke dot-notation.
+Dette betyr at du ikke kan skrive `<Accordion.Item>`, men må skrive `<AccordionItem>`. Grunnen for dette er at serveren ikke kan få tak i noe
+som ligger i en klient komponent, som `Accordion` er.
+
+### I en server komponent:
+
+<CodeSnippet language='ts'>
+{`
+import { Accordion, AccordionHeader, AccordionItem } from '@digdir/designsystemet-react';
+
+<Accordion>
+  <AccordionItem>
+    <AccordionHeader>...</AccordionHeader>
+    ...
+  </AccordionItem>
+</Accordion>
+`}
+</CodeSnippet>
+
+### I en klient komponent:
+
+<CodeSnippet language='ts'>
+{`
+import { Accordion } from '@digdir/designsystemet-react';
+
+<Accordion>
+  <Accordion.Item>
+    <Accordion.Header>...</Accordion.Header>
+    ...
+  </Accordion.Item>
+</Accordion>
+`}
+</CodeSnippet>