chore: Add typescript check for form component library

.github/workflows/libs-form-component-unit-tests.yml

@@ -50,10 +50,11 @@ jobs:
 
       - name: install dependencies
         run: yarn --immutable
+
+      - name: type-check
+        run: yarn typecheck
       #
       # todo:
-      # - name: type-check
-      #   run: yarn typecheck
       # - name: run eslint
       #   run: yarn lint
       #

libs/form-component/src/app-components/Button/Button.module.css

@@ -0,0 +1,7 @@
+.buttonSuccess {
+  --dsc-button-background--active: var(--ds-color-success-base-active);
+  --dsc-button-background--hover: var(--ds-color-success-base-hover);
+  --dsc-button-background: var(--ds-color-success-base-default);
+  --dsc-button-color: var(--ds-color-success-base-contrast-default);
+  --dsc-button-color--hover: var(--ds-color-success-base-contrast-default);
+}

libs/form-component/src/app-components/Button/Button.tsx

@@ -1,11 +1,14 @@
-import React from 'react';
 import type { PropsWithChildren, Ref } from 'react';
 
 import { Button as DesignSystemButton } from '@digdir/designsystemet-react';
 import type { ButtonProps as DesignSystemButtonProps } from '@digdir/designsystemet-react';
 
 import { Spinner } from '../Spinner';
 
+import cn from 'classnames';
+
+import classes from './Button.module.css';
+
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | undefined;
 export type ButtonColor = 'first' | 'second' | 'success' | 'danger' | undefined;
 export type TextAlign = 'left' | 'center' | 'right';
@@ -23,24 +26,20 @@ export type ButtonProps = {
   ref?: Ref<HTMLButtonElement>;
 } & Omit<DesignSystemButtonProps, 'variant' | 'color' | 'size' | 'title' | 'aria-label'>;
 
-type DSButtonColor =
-  | 'accent'
-  | 'neutral'
-  | 'success'
-  | 'danger'
-  | 'brand1'
-  | 'brand2'
-  | 'brand3'
-  | undefined;
-
-function mapColorNames(color: ButtonColor): DSButtonColor {
+// Maps our custom ColorProperty to properties supported by Designsystemet. Color property of Button in Designsystemet does not support success, so we map that to our custom class
+function mapColorNames(color: ButtonColor): {
+  className?: string;
+  color?: DesignSystemButtonProps['data-color'];
+} {
   switch (color) {
     case 'first':
-      return 'accent';
+      return { color: 'accent' };
     case 'second':
-      return 'neutral';
+      return { color: 'neutral' };
+    case 'success':
+      return { className: classes.buttonSuccess };
     default:
-      return color ?? 'accent';
+      return { color: color ?? 'accent' };
   }
 }
 
@@ -55,20 +54,23 @@ export function Button({
   style,
   textAlign,
   loadingLabel,
+  className,
   ref,
   ...rest
 }: PropsWithChildren<ButtonProps>) {
   const expandedStyle = { ...style, justifyContent: textAlign ? textAlign : undefined };
+  const { className: buttonClassName, color: mappedColor } = mapColorNames(color);
   return (
     <DesignSystemButton
       {...rest}
       disabled={disabled || isLoading}
       variant={variant}
-      data-color={mapColorNames(color)}
+      data-color={mappedColor}
       data-size={size}
       data-fullwidth={fullWidth ? true : undefined}
       ref={ref}
       style={expandedStyle}
+      className={cn(buttonClassName, className)}
     >
       {isLoading ? (
         <>

libs/form-component/src/app-components/Card/Card.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Card, Heading, Paragraph } from '@digdir/designsystemet-react';
+import { Card, Heading, Paragraph, type CardProps } from '@digdir/designsystemet-react';
 
 import classes from './Card.module.css';
 
@@ -10,7 +10,7 @@ export type AppCardProps = {
   footer?: React.ReactNode;
   media?: React.ReactNode;
   mediaPosition?: 'top' | 'bottom';
-  color?: Parameters<typeof Card>[0]['color'];
+  color?: CardProps['data-color'];
   children?: React.ReactNode;
   variant?: 'tinted' | 'default';
   className?: string;

libs/form-component/src/app-components/Datepicker/DatePickerCalendar.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { DayPicker } from 'react-day-picker';
 import type { Matcher, MonthCaption } from 'react-day-picker';
 

libs/form-component/src/app-components/Datepicker/Datepicker.stories.tsx

@@ -6,6 +6,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import 'react-day-picker/style.css';
 
 import { DatePickerControl } from './Datepicker';
+import { fn } from 'storybook/test';
 
 const NoopDropdownCaption = ({ calendarMonth }: MonthCaptionProps) => (
   <div style={{ padding: 8, fontWeight: 600 }}>
@@ -24,7 +25,11 @@ type Story = StoryObj<typeof meta>;
 
 const Wrapper = (args: React.ComponentProps<typeof DatePickerControl>) => {
   const [value, setValue] = useState(args.value);
-  return <DatePickerControl {...args} value={value} onValueChange={setValue} />;
+  const handleValueChange = (newValue: string) => {
+    args.onValueChange(newValue);
+    setValue(newValue);
+  };
+  return <DatePickerControl {...args} value={value} onValueChange={handleValueChange} />;
 };
 
 export const Preview: Story = {
@@ -35,6 +40,7 @@ export const Preview: Story = {
     locale: 'nb',
     buttonAriaLabel: 'Open date picker',
     calendarIconTitle: 'Calendar',
+    onValueChange: fn(),
     DropdownCaption: NoopDropdownCaption,
   },
   render: (args) => <Wrapper {...args} />,

libs/form-component/src/app-components/Datepicker/DatepickerDialog.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useRef } from 'react';
+import { createContext, useContext, useEffect, useRef } from 'react';
 import type { PropsWithChildren, ReactNode } from 'react';
 
 import { Dialog, Popover } from '@digdir/designsystemet-react';

libs/form-component/src/app-components/Input/FormattedInput.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { PatternFormat } from 'react-number-format';
 import type { PatternFormatProps } from 'react-number-format';
 

libs/form-component/src/app-components/Input/NumericInput.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { NumericFormat } from 'react-number-format';
 import type { NumericFormatProps } from 'react-number-format';
 

libs/form-component/src/app-components/Spinner/Spinner.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Spinner as DesignSystemSpinner } from '@digdir/designsystemet-react';
 
 /**