chore: flatten components folder (#2874)

Flattens `form` and `loaders` folders

---------

Co-authored-by: Michael Marszalek <[email protected]>

apps/storybook/.storybook/preview.tsx

@@ -43,7 +43,14 @@ const getPath = (href: string | undefined): string => {
 
 const components = {
   p: (props: Props) => (
-    <Paragraph {...props} className='sb-unstyled' data-color-scheme='light' />
+    <Paragraph
+      {...props}
+      className='sb-unstyled'
+      data-color-scheme='light'
+      style={{
+        backgroundColor: 'transparent',
+      }}
+    />
   ),
   ol: (props: Props) => (
     <List.Ordered

packages/react/src/components/Button/Button.tsx

@@ -5,7 +5,7 @@ import type { ButtonHTMLAttributes } from 'react';
 import type { Color } from '../../colors';
 import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
-import { Spinner } from '../loaders/Spinner';
+import { Spinner } from '../Spinner';
 
 export type ButtonProps = MergeRight<
   DefaultProps & ButtonHTMLAttributes<HTMLButtonElement>,

packages/react/src/components/form/Checkbox/Checkbox.mdx → packages/react/src/components/Checkbox/Checkbox.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas, Controls, Primary, ArgTypes } from '@storybook/blocks';
 import { Do, Dont, Stack, CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/input.css?inline';
 import * as CheckboxStories from './Checkbox.stories';
-import * as useCheckboxGroupStories from '../../../utilities/hooks/useCheckboxGroup/useCheckboxGroup.stories';
+import * as useCheckboxGroupStories from '../../utilities/hooks/useCheckboxGroup/useCheckboxGroup.stories';
 
 <Meta of={CheckboxStories} />
 

packages/react/src/components/form/Checkbox/Checkbox.stories.tsx → packages/react/src/components/Checkbox/Checkbox.stories.tsx

@@ -6,10 +6,9 @@ import {
   Fieldset,
   Paragraph,
   Table,
-  type UseCheckboxGroupProps,
   ValidationMessage,
-  useCheckboxGroup,
 } from '../..';
+import { type UseCheckboxGroupProps, useCheckboxGroup } from '../../utilities';
 
 type Story = StoryObj<typeof Checkbox>;
 

packages/react/src/components/form/Checkbox/Checkbox.tsx → packages/react/src/components/Checkbox/Checkbox.tsx

@@ -1,13 +1,13 @@
 import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
 
-import type { Color } from '../../../colors';
-import type { DefaultProps, LabelRequired } from '../../../types';
-import type { MergeRight } from '../../../utilities';
-import { Label } from '../../Label';
-import { ValidationMessage } from '../../ValidationMessage';
+import type { Color } from '../../colors';
+import type { DefaultProps, LabelRequired } from '../../types';
+import type { MergeRight } from '../../utilities';
 import { Field } from '../Field';
 import { Input, type InputProps } from '../Input';
+import { Label } from '../Label';
+import { ValidationMessage } from '../ValidationMessage';
 
 export type CheckboxProps = MergeRight<
   DefaultProps & Omit<InputProps, 'type' | 'role' | 'size'>,

packages/react/src/components/Checkbox/index.ts

@@ -0,0 +1 @@
+export * from './Checkbox';

packages/react/src/components/Chip/Chips.tsx

@@ -5,7 +5,7 @@ import type { ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
 import type { Color } from '../../colors';
 import type { DefaultProps } from '../../types';
 import type { MergeRight } from '../../utilities';
-import { Input } from '../form/Input';
+import { Input } from '../Input';
 
 type ChipBaseProps = {
   /** Specify which color palette to use. If left unspecified, the color is inherited from the nearest ancestor with data-color.

packages/react/src/components/form/Combobox/Combobox.stories.tsx → packages/react/src/components/Combobox/Combobox.stories.tsx

@@ -3,16 +3,16 @@ import { expect, userEvent, within } from '@storybook/test';
 import { useState } from 'react';
 import type { FormEvent } from 'react';
 
-import { Button } from '../../Button';
-import { Chip } from '../../Chip';
-import { Heading } from '../../Heading';
-import { Modal } from '../../Modal';
-import { Paragraph } from '../../Paragraph';
+import { Button } from '../Button';
+import { Chip } from '../Chip';
+import { Heading } from '../Heading';
+import { Modal } from '../Modal';
+import { Paragraph } from '../Paragraph';
 import { Switch } from '../Switch';
 
 import { data } from './data/data';
 
-import { Divider } from '../../Divider';
+import { Divider } from '../Divider';
 import { Combobox } from './index';
 
 export default {

packages/react/src/components/form/Combobox/Combobox.tsx → packages/react/src/components/Combobox/Combobox.tsx

@@ -4,11 +4,11 @@ import cl from 'clsx/lite';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import type { InputHTMLAttributes, ReactNode } from 'react';
 
-import type { PortalProps } from '../../../types';
-import { omit, useDebounceCallback } from '../../../utilities';
-import { Spinner } from '../../loaders/Spinner';
-import type { FormFieldProps } from '../useFormField';
-import { useFormField } from '../useFormField';
+import type { PortalProps } from '../../types';
+import { omit, useDebounceCallback } from '../../utilities';
+import type { FormFieldProps } from '../../utilities/hooks/useFormField/useFormField';
+import { useFormField } from '../../utilities/hooks/useFormField/useFormField';
+import { Spinner } from '../Spinner';
 
 import { ComboboxContext } from './ComboboxContext';
 import { ComboboxIdProvider } from './ComboboxIdContext';
@@ -53,7 +53,7 @@ export type ComboboxProps = {
    */
   multiple?: boolean;
   /**
-   * Name of the value when used in a form
+   * Name of the value when used in a formPuse
    */
   name?: string;
   /**

packages/react/src/components/form/Combobox/ComboboxContext.tsx → packages/react/src/components/Combobox/ComboboxContext.tsx

@@ -6,7 +6,7 @@ import type {
 import { createContext } from 'react';
 import type { Dispatch, Ref, RefObject, SetStateAction } from 'react';
 
-import type { useFormField } from '../useFormField';
+import type { useFormField } from '../../utilities/hooks/useFormField/useFormField';
 
 import type { ComboboxProps } from './Combobox';
 import type { Option, useCombobox } from './useCombobox';

packages/react/src/components/form/Combobox/Custom.tsx → packages/react/src/components/Combobox/Custom.tsx

@@ -4,8 +4,8 @@ import cl from 'clsx/lite';
 import { forwardRef, useContext, useId, useMemo } from 'react';
 import type { HTMLAttributes } from 'react';
 
-import { omit } from '../../../utilities';
-import { Label } from '../../Label';
+import { omit } from '../../utilities';
+import { Label } from '../Label';
 
 import { ComboboxContext } from './ComboboxContext';
 import { useComboboxId } from './ComboboxIdContext';

packages/react/src/components/form/Combobox/Empty.tsx → packages/react/src/components/Combobox/Empty.tsx

@@ -2,7 +2,7 @@ import cl from 'clsx/lite';
 import { forwardRef, useContext } from 'react';
 import type { HTMLAttributes } from 'react';
 
-import { Label } from '../../Label';
+import { Label } from '../Label';
 
 import { ComboboxContext } from './ComboboxContext';
 

packages/react/src/components/form/Combobox/Option/Option.tsx → packages/react/src/components/Combobox/Option/Option.tsx

@@ -2,8 +2,8 @@ import cl from 'clsx/lite';
 import { forwardRef, isValidElement, memo, useContext, useId } from 'react';
 import type { ButtonHTMLAttributes, ReactElement, ReactNode } from 'react';
 
-import { omit } from '../../../../utilities/omit/omit';
-import { Label } from '../../../Label';
+import { omit } from '../../../utilities/omit/omit';
+import { Label } from '../../Label';
 import { ComboboxContext } from '../ComboboxContext';
 
 import ComboboxOptionDescription from './Description';

packages/react/src/components/form/Combobox/Option/useComboboxOption.tsx → packages/react/src/components/Combobox/Option/useComboboxOption.tsx

@@ -2,7 +2,7 @@ import { useMergeRefs } from '@floating-ui/react';
 import { useContext, useEffect, useId, useMemo } from 'react';
 import type { Ref } from 'react';
 
-import { useDebounceCallback } from '../../../../utilities/hooks/useDebounceCallback/useDebounceCallback';
+import { useDebounceCallback } from '../../../utilities/hooks/useDebounceCallback/useDebounceCallback';
 import { ComboboxContext } from '../ComboboxContext';
 import { useComboboxId, useComboboxIdDispatch } from '../ComboboxIdContext';
 import { prefix } from '../utilities';

packages/react/src/components/form/Combobox/internal/ComboboxChips.tsx → packages/react/src/components/Combobox/internal/ComboboxChips.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 
-import { ChipRemovable } from '../../../Chip';
+import { ChipRemovable } from '../../Chip';
 import { ComboboxContext } from '../ComboboxContext';
 
 const ComboboxChips = () => {

packages/react/src/components/form/Combobox/internal/ComboboxError.tsx → packages/react/src/components/Combobox/internal/ComboboxError.tsx

@@ -1,5 +1,5 @@
-import { ValidationMessage } from '../../../ValidationMessage';
-import type { useFormField } from '../../useFormField';
+import type { useFormField } from '../../../utilities/hooks/useFormField/useFormField';
+import { ValidationMessage } from '../../ValidationMessage';
 import type { ComboboxProps } from '../Combobox';
 
 type ComboboxErrorProps = {

packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx → packages/react/src/components/Combobox/internal/ComboboxInput.tsx

@@ -9,8 +9,8 @@ import type {
 } from 'react';
 import { useContext, useRef } from 'react';
 
-import { omit } from '../../../../utilities';
-import { Paragraph } from '../../../Paragraph';
+import { omit } from '../../../utilities';
+import { Paragraph } from '../../Paragraph';
 import type { ComboboxProps } from '../Combobox';
 import { ComboboxContext } from '../ComboboxContext';
 import { useComboboxIdDispatch } from '../ComboboxIdContext';

packages/react/src/components/form/Combobox/internal/ComboboxLabel.tsx → packages/react/src/components/Combobox/internal/ComboboxLabel.tsx

@@ -1,9 +1,9 @@
 import { PadlockLockedFillIcon } from '@navikt/aksel-icons';
 import cl from 'clsx/lite';
 
-import { Label } from '../../../Label';
-import { Paragraph } from '../../../Paragraph';
-import type { useFormField } from '../../useFormField';
+import type { useFormField } from '../../../utilities/hooks/useFormField/useFormField';
+import { Label } from '../../Label';
+import { Paragraph } from '../../Paragraph';
 import type { ComboboxProps } from '../Combobox';
 
 type ComboboxLabelProps = {

packages/react/src/components/form/Combobox/useComboboxKeyboard.tsx → packages/react/src/components/Combobox/useComboboxKeyboard.tsx

@@ -1,4 +1,4 @@
-import { useDebounceCallback } from '../../../utilities';
+import { useDebounceCallback } from '../../utilities';
 
 import type { KeyboardEvent } from 'react';
 import type { ComboboxContextType } from './ComboboxContext';

packages/react/src/components/ErrorSummary/ErrorSummary.stories.tsx

@@ -3,7 +3,7 @@ import { expect, userEvent, within } from '@storybook/test';
 import { useState } from 'react';
 
 import { Button } from '../Button';
-import { Textfield } from '../form/Textfield';
+import { Textfield } from '../Textfield';
 
 import { ErrorSummary } from './';
 

packages/react/src/components/form/Field/Field.stories.tsx → packages/react/src/components/Field/Field.stories.tsx

@@ -1,13 +1,13 @@
 import type { Meta, StoryFn } from '@storybook/react';
 
 import { useEffect } from 'react';
-import { Label } from '../../Label';
+import { Label } from '../Label';
 
 import { Field } from '.';
-import { ValidationMessage } from '../../ValidationMessage';
 import { Input } from '../Input';
 import { Select } from '../Select';
 import { Textarea } from '../Textarea';
+import { ValidationMessage } from '../ValidationMessage';
 
 type Story = StoryFn<typeof Field>;
 

packages/react/src/components/form/Field/Field.tsx → packages/react/src/components/Field/Field.tsx

@@ -2,7 +2,7 @@ import { useMergeRefs } from '@floating-ui/react';
 import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef, useEffect, useRef } from 'react';
-import type { DefaultProps } from '../../../types';
+import type { DefaultProps } from '../../types';
 import { fieldObserver } from './fieldObserver';
 
 export type FieldProps = {

packages/react/src/components/form/Field/FieldCounter.tsx → packages/react/src/components/Field/FieldCounter.tsx

@@ -2,7 +2,7 @@ import { forwardRef, useEffect, useRef, useState } from 'react';
 import {
   ValidationMessage,
   type ValidationMessageProps,
-} from '../../ValidationMessage';
+} from '../ValidationMessage';
 
 export type FieldCounterProps = {
   /** Label template for when `maxCount` is exceeded

packages/react/src/components/form/Fieldset/Fieldset.tsx → packages/react/src/components/Fieldset/Fieldset.tsx

@@ -2,7 +2,7 @@ import cl from 'clsx/lite';
 import type { FieldsetHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 
-import type { DefaultProps } from '../../../types';
+import type { DefaultProps } from '../../types';
 
 export type FieldsetProps = DefaultProps &
   FieldsetHTMLAttributes<HTMLFieldSetElement>;

packages/react/src/components/form/Fieldset/FieldsetContext.ts → packages/react/src/components/Fieldset/FieldsetContext.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
 
-import type { FormFieldProps } from '../useFormField';
+import type { FormFieldProps } from '../../utilities/hooks/useFormField/useFormField';
 
 export type FieldsetContextType = Pick<
   FormFieldProps,

packages/react/src/components/form/Fieldset/FieldsetDescription.tsx → packages/react/src/components/Fieldset/FieldsetDescription.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 
-import { Paragraph, type ParagraphProps } from '../../Paragraph/Paragraph';
+import { Paragraph, type ParagraphProps } from '../Paragraph/Paragraph';
 
 export type FieldsetDescriptionProps = ParagraphProps;
 

packages/react/src/components/form/Fieldset/FieldsetLegend.tsx → packages/react/src/components/Fieldset/FieldsetLegend.tsx

@@ -1,7 +1,7 @@
 import { type HTMLAttributes, forwardRef } from 'react';
-import type { DefaultProps } from '../../../types';
+import type { DefaultProps } from '../../types';
 
-import { Label } from '../../Label/Label';
+import { Label } from '../Label/Label';
 
 export type FieldsetLegendProps = HTMLAttributes<HTMLLegendElement> &
   DefaultProps;

packages/react/src/components/form/Input/Input.mdx → packages/react/src/components/Input/Input.mdx

@@ -1,7 +1,7 @@
 import { Meta, Canvas, Controls, Primary } from '@storybook/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/input.css?inline';
-import { Alert } from '../../Alert';
+import { Alert } from '../Alert';
 import * as InputStories from './Input.stories';
 
 <Meta of={InputStories} />

packages/react/src/components/form/Input/Input.stories.tsx → packages/react/src/components/Input/Input.stories.tsx

@@ -12,7 +12,7 @@ import {
 } from '../..';
 
 import { Input } from '.';
-import type { Size } from '../../../types';
+import type { Size } from '../../types';
 
 type Story = StoryObj<typeof Input>;
 

packages/react/src/components/form/Input/Input.tsx → packages/react/src/components/Input/Input.tsx

@@ -1,9 +1,9 @@
 import cl from 'clsx/lite';
 import type { InputHTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import type { Color } from '../../../colors';
-import type { DefaultProps } from '../../../types';
-import type { MergeRight } from '../../../utilities';
+import type { Color } from '../../colors';
+import type { DefaultProps } from '../../types';
+import type { MergeRight } from '../../utilities';
 
 type InputAttr = InputHTMLAttributes<HTMLInputElement>;
 

packages/react/src/components/form/Radio/Radio.mdx → packages/react/src/components/Radio/Radio.mdx

@@ -2,7 +2,7 @@ import { Meta, Canvas, Controls, Primary, ArgTypes } from '@storybook/blocks';
 import { CssVariables } from '@doc-components';
 import css from '@digdir/designsystemet-css/input.css?inline';
 import * as RadioStories from './Radio.stories';
-import * as useRadioGroupStories from '../../../utilities/hooks/useRadioGroup/useRadioGroup.stories';
+import * as useRadioGroupStories from '../../utilities/hooks/useRadioGroup/useRadioGroup.stories';
 
 <Meta of={RadioStories} />
 

packages/react/src/components/form/Radio/Radio.stories.tsx → packages/react/src/components/Radio/Radio.stories.tsx

@@ -5,10 +5,9 @@ import {
   Fieldset,
   Paragraph,
   Radio,
-  type UseRadioGroupProps,
   ValidationMessage,
-  useRadioGroup,
 } from '../..';
+import { type UseRadioGroupProps, useRadioGroup } from '../../utilities';
 
 export default {
   title: 'Komponenter/Radio',

packages/react/src/components/form/Radio/Radio.tsx → packages/react/src/components/Radio/Radio.tsx

@@ -1,13 +1,13 @@
 import type { ReactNode } from 'react';
 import { forwardRef } from 'react';
 
-import type { Color } from '../../../colors';
-import type { DefaultProps, LabelRequired } from '../../../types';
-import type { MergeRight } from '../../../utilities';
-import { Label } from '../../Label';
-import { ValidationMessage } from '../../ValidationMessage';
+import type { Color } from '../../colors';
+import type { DefaultProps, LabelRequired } from '../../types';
+import type { MergeRight } from '../../utilities';
 import { Field } from '../Field';
 import { Input, type InputProps } from '../Input';
+import { Label } from '../Label';
+import { ValidationMessage } from '../ValidationMessage';
 
 export type RadioProps = MergeRight<
   DefaultProps & Omit<InputProps, 'type' | 'role' | 'size'>,

packages/react/src/components/Radio/index.ts

@@ -0,0 +1 @@
+export * from './Radio';

packages/react/src/components/form/Search/Search.tsx → packages/react/src/components/Search/Search.tsx

@@ -1,7 +1,7 @@
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
 
-import type { DefaultProps } from '../../../types';
+import type { DefaultProps } from '../../types';
 
 export type SearchProps = DefaultProps & React.HTMLAttributes<HTMLDivElement>;
 

packages/react/src/components/form/Search/SearchButton.tsx → packages/react/src/components/Search/SearchButton.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 
-import type { MergeRight } from '../../../utilities';
-import { Button, type ButtonProps } from '../../Button';
+import type { MergeRight } from '../../utilities';
+import { Button, type ButtonProps } from '../Button';
 
 export type SearchButtonProps = MergeRight<
   ButtonProps,

packages/react/src/components/form/Search/SearchClear.tsx → packages/react/src/components/Search/SearchClear.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { Button, type ButtonProps } from '../../Button';
+import { Button, type ButtonProps } from '../Button';
 import { setReactInputValue } from '../Combobox/utilities';
 
 /* We omit children since we render the icon with css */