chore: improve formatters documentation

SpareBank1 · Mar 11, 2025 · e5e0586 · e5e0586
1 parent a38a95d
commit e5e0586
Show file tree

Hide file tree

Showing 16 changed files with 92 additions and 289 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -48,7 +48,13 @@ const preview: Preview = {
         options: {
             storySort: {
                 method: 'alphabetical',
-                order: ['Introduksjon', 'Design', 'Komponenter', 'Sider'],
+                order: [
+                    'Introduksjon',
+                    'Design',
+                    'Utils',
+                    'Komponenter',
+                    'Sider',
+                ],
             },
         },
     },

diff --git a/documentation/components/InstallImport.tsx b/documentation/components/InstallImport.tsx
@@ -4,24 +4,32 @@ import { Source } from '@storybook/blocks';
 
 type Props = {
     dependencies: string[];
-    stylingDependencies: string[];
+    stylingDependencies?: string[];
+    nocore?: boolean;
 };
 
 export const InstallImport: React.FC<Props> = ({
     dependencies,
     stylingDependencies,
+    nocore,
 }) => {
-    const installCode = `npm install @sb1/ffe-core ${dependencies.join(' ')}`;
-    const innstallStyling = `@import '@sb1/ffe-core/less/ffe-core';\n${stylingDependencies.map(dep => `@import '${dep}';`).join('\n')}`;
+    const installCode = `npm install${!nocore ? ' @sb1/ffe-core' : ''} ${dependencies.join(' ')}`;
+    const innstallStyling =
+        stylingDependencies &&
+        `@import '@sb1/ffe-core/less/ffe-core';\n${stylingDependencies.map(dep => `@import '${dep}';`).join('\n')}`;
     return (
         <>
             <Heading2>Installasjon</Heading2>
             <Paragraph>Innstaller pakken med avhangigheter</Paragraph>
             <Source code={installCode} />
-            <Paragraph>
-                I prosjektets hovedstylingsfil importer stylingen
-            </Paragraph>
-            <Source code={innstallStyling} />
+            {stylingDependencies && (
+                <>
+                    <Paragraph>
+                        I prosjektets hovedstylingsfil importer stylingen
+                    </Paragraph>
+                    <Source code={innstallStyling} />
+                </>
+            )}
         </>
     );
 };
diff --git a/packages/ffe-formatters/src/Formatters.mdx b/packages/ffe-formatters/src/Formatters.mdx
@@ -1,35 +1,92 @@
 import { Meta } from '@storybook/blocks';
-import { Table, TableHead, TableRow, TableDataCell, TableHeaderCell, TableBody, TableCaption } from "@sb1/ffe-tables-react";
+import {
+    Table,
+    TableHead,
+    TableRow,
+    TableDataCell,
+    TableHeaderCell,
+    TableBody,
+    TableCaption,
+} from '@sb1/ffe-tables-react';
+import { formatAccountNumber } from './formatAccountNumber';
+import { formatDate } from './formatDate';
+import { formatNumber } from './formatNumber';
+import { formatCurrency } from './formatCurrency';
+import { formatPercentage } from './formatPercentage';
+import { formatFodselsnummer } from './formatFodselsnummer';
+import { formatDistance } from './formatDistance';
+import { InstallImport } from '../../../documentation/components/InstallImport';
 
-<Meta title="Komponenter/Formatters/Formatering" />
+<Meta title="Utils/Formatters" />
 
 # Formateringsprinsipper
 
+<InstallImport dependencies={['@sb1/ffe-formatters']} nocore />
+
 Det finnes mange formateringsprinsipper som er standardisert i Norge, og som bidrar til å øke lesbarheten. I designsystemet har vi komponenter som hjelper med formateringen, så du som utvikler ikke trenger å bekymre deg for at ting ikke vises riktig.
 
 <Table className="sb-unstyled">
-    <TableCaption  className="sb-unstyled">Utvalg av ulike formateringer som finnes:</TableCaption>
+    <TableCaption className="sb-unstyled">
+        Utvalg av ulike formateringer som finnes:
+    </TableCaption>
     <TableHead className="sb-unstyled">
         <TableRow className="sb-unstyled">
             <TableHeaderCell className="sb-unstyled">Type</TableHeaderCell>
+            <TableHeaderCell className="sb-unstyled">Funksjon</TableHeaderCell>
             <TableHeaderCell className="sb-unstyled">Eksempel</TableHeaderCell>
+            <TableHeaderCell className="sb-unstyled">Resultat</TableHeaderCell>
         </TableRow>
     </TableHead>
     <TableBody>
         {[
-            {type :'Datoer', eksempel: '12.11.2024'},
-            {type :'Tall', eksempel: '100 000'},
-            {type :'Valuta', eksempel: 'kr 1 000,–'},
-            {type :'Prosenter', eksempel: '7 %'},
-            {type :'Kontonummer', eksempel: '1234 56 78901'},
-            {type :'Fødselsnummer', eksempel: '123456 78901'},
-            {type :'Avstander', eksempel: '50 km'},
-        ].map((it) => (
+            {
+                type: 'Datoer',
+                eksempel: 1731366000000,
+                ekstraEksempel: 'new Date(2024, 10, 12)',
+                func: formatDate,
+            },
+            {
+                type: 'Tall',
+                func: formatNumber,
+                eksempel: 100000,
+                opts: { locale: 'nb' },
+            },
+            {
+                type: 'Valuta',
+                eksempel: '1000',
+                func: formatCurrency,
+                opts: { locale: 'nb' },
+            },
+            { type: 'Prosenter', eksempel: '7', func: formatPercentage },
+            {
+                type: 'Kontonummer',
+                eksempel: '12345678901',
+                func: formatAccountNumber,
+            },
+            {
+                type: 'Fødselsnummer',
+                eksempel: '12345678901',
+                func: formatFodselsnummer,
+            },
+            { type: 'Avstander', eksempel: '50', func: formatDistance },
+        ].map(it => (
             <TableRow className="sb-unstyled" key={it.type}>
                 <TableDataCell className="sb-unstyled">{it.type}</TableDataCell>
-                <TableDataCell className="sb-unstyled">{it.eksempel}</TableDataCell>
+                <TableDataCell className="sb-unstyled">
+                    <code>{it.func?.name}</code>
+                </TableDataCell>
+                <TableDataCell className="sb-unstyled">
+                    {it.eksempel}
+                    {it.ekstraEksempel && (
+                        <>
+                            &nbsp;/ <br /> {it.ekstraEksempel}
+                        </>
+                    )}
+                </TableDataCell>
+                <TableDataCell className="sb-unstyled">
+                    {it.func?.(it.eksempel, it.opts)}
+                </TableDataCell>
             </TableRow>
         ))}
     </TableBody>
 </Table>
-
diff --git a/packages/ffe-formatters/src/formatAccountNumber.stories.tsx b/packages/ffe-formatters/src/formatAccountNumber.stories.tsx
diff --git a/packages/ffe-formatters/src/formatCurrency.mdx b/packages/ffe-formatters/src/formatCurrency.mdx
diff --git a/packages/ffe-formatters/src/formatCurrency.stories.tsx b/packages/ffe-formatters/src/formatCurrency.stories.tsx
diff --git a/packages/ffe-formatters/src/formatDate.mdx b/packages/ffe-formatters/src/formatDate.mdx
diff --git a/packages/ffe-formatters/src/formatDate.stories.tsx b/packages/ffe-formatters/src/formatDate.stories.tsx
diff --git a/packages/ffe-formatters/src/formatDistance.mdx b/packages/ffe-formatters/src/formatDistance.mdx
diff --git a/packages/ffe-formatters/src/formatDistance.stories.tsx b/packages/ffe-formatters/src/formatDistance.stories.tsx
diff --git a/packages/ffe-formatters/src/formatFodselsnummer.mdx b/packages/ffe-formatters/src/formatFodselsnummer.mdx
diff --git a/packages/ffe-formatters/src/formatFodselsnummer.stories.tsx b/packages/ffe-formatters/src/formatFodselsnummer.stories.tsx
diff --git a/packages/ffe-formatters/src/formatNumber.mdx b/packages/ffe-formatters/src/formatNumber.mdx
diff --git a/packages/ffe-formatters/src/formatNumber.stories.tsx b/packages/ffe-formatters/src/formatNumber.stories.tsx