chore: improve storybook docs for datepicker, controlled input logic

SpareBank1 · Mar 7, 2025 · 7ad1f89 · 7ad1f89
1 parent 06a0b85
commit 7ad1f89
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 4 deletions.
diff --git a/packages/ffe-datepicker-react/src/datepicker/Datepicker.stories.tsx b/packages/ffe-datepicker-react/src/datepicker/Datepicker.stories.tsx
@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import { SecondaryButton } from '@sb1/ffe-buttons-react';
+import { Input, InputGroup } from '@sb1/ffe-form-react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { default as React, useState } from 'react';
 import { Datepicker, DatepickerProps } from './Datepicker';
-import type { StoryObj, Meta } from '@storybook/react';
-import { InputGroup } from '@sb1/ffe-form-react';
 
 const meta: Meta<typeof Datepicker> = {
     title: 'Komponenter/Datepicker/Datepicker',
@@ -102,3 +103,98 @@ export const CalendarAbove: Story = {
         );
     },
 };
+
+export const TwoWayControlledComponent: Story = {
+    args: {
+        ...Standard.args,
+    },
+    render: function Render({ ...args }: DatepickerProps) {
+        const [date, setDate] = useState('01.12.2024');
+        const [lastUpdateSource, setLastUpdateSource] = useState('initiell');
+
+        const handleDateChange = (newDate: string) => {
+            setDate(newDate);
+            setLastUpdateSource('datepicker');
+        };
+
+        const predefinedDates = [
+            {
+                label: 'I dag',
+                value: () => {
+                    const today = new Date();
+                    return `${String(today.getDate()).padStart(2, '0')}.${String(today.getMonth() + 1).padStart(2, '0')}.${today.getFullYear()}`;
+                },
+            },
+            { label: 'Begynnelsen av året', value: '01.01.2024' },
+            { label: 'Slutten av året', value: '31.12.2024' },
+            { label: 'Midten av året', value: '01.07.2024' },
+        ];
+
+        return (
+            <div>
+                <InputGroup label="Dato" labelId={Standard?.args?.labelId}>
+                    <Datepicker
+                        {...args}
+                        value={date}
+                        onChange={handleDateChange}
+                    />
+                </InputGroup>
+
+                <div style={{ marginTop: '20px' }}>
+                    <div>Kontroller datepicker eksternt:</div>
+                    <div
+                        style={{
+                            display: 'flex',
+                            gap: '10px',
+                            marginTop: '10px',
+                        }}
+                    >
+                        {predefinedDates.map((presetDate, index) => (
+                            <SecondaryButton
+                                key={index}
+                                onClick={() => {
+                                    const newValue =
+                                        typeof presetDate.value === 'function'
+                                            ? presetDate.value()
+                                            : presetDate.value;
+                                    setDate(newValue);
+                                    setLastUpdateSource('ekstern');
+                                }}
+                            >
+                                {presetDate.label}
+                            </SecondaryButton>
+                        ))}
+                    </div>
+
+                    <div style={{ marginTop: '20px' }}>
+                        <div>Manuell ekstern input:</div>
+                        <div
+                            style={{
+                                display: 'flex',
+                                gap: '10px',
+                                maxWidth: '200px',
+                                marginTop: '10px',
+                            }}
+                        >
+                            <Input
+                                type="text"
+                                value={date}
+                                onChange={e => {
+                                    setDate(e.target.value);
+                                    setLastUpdateSource('manuell');
+                                }}
+                                placeholder="dd.mm.åååå"
+                            />
+                        </div>
+                    </div>
+
+                    <div style={{ marginTop: '20px' }}>
+                        <div>Nåværende tilstand:</div>
+                        <div>Dato: {date}</div>
+                        <div>Sist oppdatert av: {lastUpdateSource}</div>
+                    </div>
+                </div>
+            </div>
+        );
+    },
+};
diff --git a/packages/ffe-datepicker-react/src/datepicker/Datepicker.tsx b/packages/ffe-datepicker-react/src/datepicker/Datepicker.tsx
@@ -9,6 +9,7 @@ export interface DatepickerProps extends DatepickerCompProps {
     /** Hack that changes InputGroups label to a span to be wcag complient  */
     setInputGroupLabelAsSpan?: () => void;
 }
+
 export const Datepicker: React.FC<DatepickerProps> = ({
     locale = 'nb' as const,
     value,

diff --git a/packages/ffe-datepicker-react/src/datepicker/DatepickerContext.tsx b/packages/ffe-datepicker-react/src/datepicker/DatepickerContext.tsx
@@ -1,7 +1,7 @@
 import React, { createContext, useEffect, useState } from 'react';
+import { getSimpleDateFromString } from '../datelogic/simpledate';
 import { Locale } from '../datelogic/types';
 import { validateDate } from '../util/dateUtil';
-import { getSimpleDateFromString } from '../datelogic/simpledate';
 import { toNumber } from './toNumber';
 
 interface DatepickerContextInterface {