start with react info page in storybook

digdir · Jun 11, 2024 · 3636c89 · 3636c89
1 parent 55dc1a0
commit 3636c89
Show file tree

Hide file tree

Showing 5 changed files with 182 additions and 4 deletions.
diff --git a/apps/storybook/docs-components/CodeSnippet/CodeSnippet.module.css 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
@@ -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
@@ -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
@@ -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
@@ -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>