Develop document formaters

packages/ffe-formatters/README.md

@@ -12,7 +12,7 @@ npm install --save @sb1/ffe-formatters
 
 ## Usage
 
-Full documentation on formatter usage is available at https://design.sparebank1.no/komponenter/formatering/.
+Full documentation on formatter usage is available at https://design.sparebank1.no/Komponenter/Formatters.
 
 Import the formatter(s) you need the following way:
 

packages/ffe-formatters/src/Formatters.mdx

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/blocks';
+import { Table, TableHead, TableRow, TableDataCell, TableHeaderCell, TableBody, TableCaption } from "@sb1/ffe-tables-react";
+
+<Meta title="Komponenter/Formatters/Formatering" />
+
+# Formateringsprinsipper
+
+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>
+    <TableHead className="sb-unstyled">
+        <TableRow className="sb-unstyled">
+            <TableHeaderCell className="sb-unstyled">Type</TableHeaderCell>
+            <TableHeaderCell className="sb-unstyled">Eksempel</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) => (
+            <TableRow className="sb-unstyled" key={it.type}>
+                <TableDataCell className="sb-unstyled">{it.type}</TableDataCell>
+                <TableDataCell className="sb-unstyled">{it.eksempel}</TableDataCell>
+            </TableRow>
+        ))}
+    </TableBody>
+</Table>
+

packages/ffe-formatters/src/formatAccountNumber.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { formatAccountNumber } from './formatAccountNumber';
+
+const Demo: React.FC<{ accountNumber: string }> = ({ accountNumber }) => {
+    return <>{formatAccountNumber(accountNumber)}</>;
+};
+
+const meta: Meta<typeof Demo> = {
+    title: 'Komponenter/Formatters/formatAccountNumber',
+    component: Demo,
+};
+export default meta;
+
+type Story = StoryObj<typeof Demo>;
+
+export const Standard: Story = {
+    args: {
+        accountNumber: '90010012345',
+    },
+    render: args => <Demo {...args} />,
+};

packages/ffe-formatters/src/formatCurrency.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as formatCurrencyStories from './formatCurrency.stories';
+
+<Meta of={formatCurrencyStories} />
+
+# formatCurrency
+
+`formatCurrency` kan gis et objekt som andre argument for å styre prefix og postfix:
+
+<Canvas of={formatCurrencyStories.Standard} />
+<Controls of={formatCurrencyStories.Standard} />

packages/ffe-formatters/src/formatCurrency.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { formatCurrency } from './formatCurrency';
+import { Locale } from './types';
+
+interface DemoParams {
+    amount: string | number;
+    prefix?: string;
+    postfix?: string;
+    locale: Locale;
+}
+
+const Demo: React.FC<DemoParams> = ({ amount, postfix, prefix, locale }) => {
+    return <>{formatCurrency(amount, { locale, postfix, prefix })}</>;
+};
+
+const meta: Meta<typeof Demo> = {
+    title: 'Komponenter/Formatters/formatCurrency',
+    component: Demo,
+    argTypes: {
+        prefix: { control: 'text' },
+        postfix: { control: 'text' },
+    },
+};
+export default meta;
+
+type Story = StoryObj<typeof Demo>;
+
+export const Standard: Story = {
+    args: {
+        amount: '1000',
+        locale: 'nb',
+    },
+    render: args => <Demo {...args} />,
+};

packages/ffe-formatters/src/formatCurrency.ts

@@ -11,9 +11,7 @@ interface Opts {
 
 export const formatCurrency = (amount: number | string, opts: Opts) => {
     const { locale } = opts;
-    const { prefix, postfix } = {
-        prefix: `kr${NON_BREAKING_SPACE}`,
-        postfix: ',–',
+    const { prefix = `kr${NON_BREAKING_SPACE}`, postfix = ',–' } = {
         ...opts,
     };
 

packages/ffe-formatters/src/formatDate.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as formatDateStories from './formatDate.stories';
+
+<Meta of={formatDateStories} />
+
+# formatDate
+
+`formateDate` støtter bare norsk locale, og formaterer Date-objekter og timestamps.
+
+<Canvas of={formatDateStories.Standard} />
+<Controls of={formatDateStories.Standard} />

packages/ffe-formatters/src/formatDate.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { formatDate } from './formatDate';
+
+interface DemoParams {
+    timestamp: Date | number;
+}
+
+const Demo: React.FC<DemoParams> = ({ timestamp }) => {
+    return <>{formatDate(timestamp)}</>;
+};
+
+const meta: Meta<typeof Demo> = {
+    title: 'Komponenter/Formatters/formatDate',
+    component: Demo,
+    argTypes: {
+        timestamp: { control: 'date' },
+    },
+};
+export default meta;
+
+type Story = StoryObj<typeof Demo>;
+
+export const Standard: Story = {
+    args: {
+        timestamp: new Date(),
+    },
+    render: args => <Demo {...args} />,
+};

packages/ffe-formatters/src/formatDistance.mdx

@@ -0,0 +1,9 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as formatDistanceStories from './formatDistance.stories';
+
+<Meta of={formatDistanceStories} />
+
+# formatDistance
+
+<Canvas of={formatDistanceStories.Standard} />
+<Controls of={formatDistanceStories.Standard} />

packages/ffe-formatters/src/formatDistance.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { formatDistance } from './formatDistance';
+
+interface DemoParams {
+    distance: string | number;
+    unit?: string;
+}
+
+const Demo: React.FC<DemoParams> = ({ unit, distance }) => {
+    return <>{formatDistance(distance, { unit })}</>;
+};
+
+const meta: Meta<typeof Demo> = {
+    title: 'Komponenter/Formatters/formatDistance',
+    component: Demo,
+    argTypes: {
+        unit: { control: 'text' },
+    },
+};
+export default meta;
+
+type Story = StoryObj<typeof Demo>;
+
+export const Standard: Story = {
+    args: {
+        distance: '160 520',
+    },
+    render: args => <Demo {...args} />,
+};

packages/ffe-formatters/src/formatDistance.ts

@@ -6,12 +6,10 @@ interface Opts {
     unit?: string;
 }
 
-export const formatDistance = (
-    distance: string | number,
-    opts: Opts = { unit: 'km' },
-) => {
+export const formatDistance = (distance: string | number, opts: Opts = {}) => {
+    const { unit = 'km' } = opts;
     const toFormat = parseNumber(distance, 'nb');
     return toFormat === null
         ? ''
-        : `${formatNumber(toFormat, { locale: 'nb' })}${NON_BREAKING_SPACE}${opts.unit}`;
+        : `${formatNumber(toFormat, { locale: 'nb' })}${NON_BREAKING_SPACE}${unit}`;
 };

packages/ffe-formatters/src/formatFodselsnummer.mdx

@@ -0,0 +1,9 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as formatFodselsnummerStories from './formatFodselsnummer.stories';
+
+<Meta of={formatFodselsnummerStories} />
+
+# formatFodselsnummer
+
+<Canvas of={formatFodselsnummerStories.Standard} />
+<Controls of={formatFodselsnummerStories.Standard} />

packages/ffe-formatters/src/formatFodselsnummer.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { formatFodselsnummer } from './formatFodselsnummer';
+
+interface DemoParams {
+    ssn: string;
+}
+
+const Demo: React.FC<DemoParams> = ({ ssn }) => {
+    return <>{formatFodselsnummer(ssn)}</>;
+};
+
+const meta: Meta<typeof Demo> = {
+    title: 'Komponenter/Formatters/formatFodselsnummer',
+    component: Demo,
+};
+export default meta;
+
+type Story = StoryObj<typeof Demo>;
+
+export const Standard: Story = {
+    args: {
+        ssn: '01010112345',
+    },
+    render: args => <Demo {...args} />,
+};

packages/ffe-formatters/src/formatNumber.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as formatNumberStories from './formatNumber.stories';
+
+<Meta of={formatNumberStories} />
+
+# formatNumber
+
+Om ingen av de spesialiserte formateringsfunksjonene passer kan du bruke formatNumber. Denne funksjonen utgjør basen i mange av de andre funksjonene.
+
+<Canvas of={formatNumberStories.Standard} />
+<Controls of={formatNumberStories.Standard} />

packages/ffe-formatters/src/formatNumber.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { formatNumber } from './formatNumber';
+import { Locale } from './types';
+
+interface DemoParams {
+    number: number | string | null | undefined;
+    locale: Locale;
+    decimals?: number;
+}
+
+const Demo: React.FC<DemoParams> = ({ number, ...rest }) => {
+    return <>{formatNumber(number, { ...rest })}</>;
+};
+
+const meta: Meta<typeof Demo> = {
+    title: 'Komponenter/Formatters/formatNumber',
+    component: Demo,
+};
+export default meta;
+
+type Story = StoryObj<typeof Demo>;
+
+export const Standard: Story = {
+    args: {
+        number: '1234567890',
+        locale: 'nb',
+        decimals: 2,
+    },
+    render: args => <Demo {...args} />,
+};

packages/ffe-formatters/src/formatPercentage.mdx

@@ -0,0 +1,12 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as formatPercentageStories from './formatPercentage.stories';
+
+<Meta of={formatPercentageStories} />
+
+# formatPercentage
+
+`formatPercentage` gir prosenter det riktige mellomrommet mellom tall og % med et non-breaking space.
+Runder av til så få desimaler som mulig, med en default cap på to desimaler. Dette kan overstyres i `options`-objektet.
+
+<Canvas of={formatPercentageStories.Standard} />
+<Controls of={formatPercentageStories.Standard} />

packages/ffe-formatters/src/formatPercentage.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { formatPercentage } from './formatPercentage';
+
+interface DemoParams {
+    amount: number | string;
+    minDecimals?: number;
+    maxDecimals?: number;
+}
+
+const Demo: React.FC<DemoParams> = ({ amount, ...rest }) => {
+    return <>{formatPercentage(amount, { ...rest })}</>;
+};
+
+const meta: Meta<typeof Demo> = {
+    title: 'Komponenter/Formatters/formatPercentage',
+    component: Demo,
+    argTypes: {
+        minDecimals: { control: 'number' },
+        maxDecimals: { control: 'number' },
+    },
+};
+export default meta;
+
+type Story = StoryObj<typeof Demo>;
+
+export const Standard: Story = {
+    args: {
+        amount: '49',
+    },
+    render: args => <Demo {...args} />,
+};

packages/ffe-formatters/src/formatPercentage.ts

@@ -13,7 +13,7 @@ export const formatPercentage = (
     },
 ) => {
     if (typeof amount !== 'number') {
-        return '';
+        return `${amount.replace('.', ',')}${NON_BREAKING_SPACE}%`;
     }
 
     const percentage = amount.toLocaleString('nb-NO', {

packages/ffe-formatters/tsconfig.cjs.json

@@ -5,5 +5,5 @@
         "module": "commonjs"
     },
     "include": ["src/**/*"],
-    "exclude": ["node_modules", "src/**/*.spec.ts*"]
+    "exclude": ["node_modules", "src/**/*.spec.ts*", "src/**/*.stories.ts*"]
 }

packages/ffe-formatters/tsconfig.esm.json

@@ -5,5 +5,5 @@
         "module": "esnext"
     },
     "include": ["src/**/*"],
-    "exclude": ["node_modules", "src/**/*.spec.ts*"]
+    "exclude": ["node_modules", "src/**/*.spec.ts*", "src/**/*.stories.ts*"]
 }

packages/ffe-formatters/tsconfig.types.json

@@ -6,5 +6,5 @@
         "emitDeclarationOnly": true
     },
     "include": ["src/**/*"],
-    "exclude": ["node_modules", "src/**/*.spec.ts*"]
+    "exclude": ["node_modules", "src/**/*.spec.ts*", "src/**/*.stories.ts*"]
 }