refactor(react): reorganize Storybook sidebar structure (part 2)

packages/react/.storybook/main.ts

@@ -59,6 +59,10 @@ const config: StorybookConfig = {
       directory: "../src/examples",
       titlePrefix: "Examples",
     },
+    {
+      directory: "../src/deprecated",
+      titlePrefix: "Deprecated",
+    },
     {
       directory: "../src/ui",
       titlePrefix: "🔒 Internal",

packages/react/.storybook/preview.tsx

@@ -11,7 +11,7 @@ import { addons } from "storybook/preview-api"
 
 import "../src/styles.css"
 import { aiTranslations } from "@/sds/ai/F0AiChat/types"
-import { WeekStartDay } from "@/experimental/OneCalendar/types"
+import { WeekStartDay } from "@/components/OneCalendar/types"
 import { dataCollectionLocalStorageHandler } from "@/lib/providers/datacollection"
 import { F0Provider } from "@/lib/providers/f0"
 import { buildTranslations, defaultTranslations } from "@/lib/providers/i18n"

packages/react/src/components/F0Button/internal.tsx

@@ -7,7 +7,7 @@ import { useTextFormatEnforcer } from "@/lib/text"
 import { cn } from "@/lib/utils"
 import { Action } from "@/ui/Action"
 
-import { OneEllipsis } from "../OneEllipsis"
+import { OneEllipsis } from "@/lib/OneEllipsis"
 import { ButtonInternalProps } from "./internal-types"
 import { fontSizeVariants } from "./variants"
 import { Counter } from "@/ui/Counter"

packages/react/src/components/F0Card/CardInternal.tsx

@@ -13,7 +13,7 @@ import {
 } from "@/ui/Card"
 import { Skeleton } from "@/ui/skeleton"
 
-import { OneEllipsis } from "../OneEllipsis/OneEllipsis"
+import { OneEllipsis } from "@/lib/OneEllipsis/OneEllipsis"
 import {
   CardActions,
   type CardPrimaryAction,

packages/react/src/components/F0DatePicker/F0DatePicker.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import {
   GranularityDefinitionKey,
   granularityDefinitions,
-} from "@/experimental/OneCalendar"
+} from "@/components/OneCalendar"
 import { useI18n } from "@/lib/providers/i18n"
 import { DatePickerPopup, isSameDatePickerValue } from "@/ui/DatePickerPopup"
 

packages/react/src/components/F0DatePicker/__stories__/F0DatePicker.stories.tsx

@@ -10,10 +10,7 @@ import { dataTestIdArgs } from "@/lib/data-testid/__stories__/args"
 import { withSkipA11y, withSnapshot } from "@/lib/storybook-utils/parameters"
 import { getInputFieldArgs } from "@/ui/InputField/__stories__/InputField.args"
 
-import {
-  CalendarView,
-  DateRange,
-} from "../../../experimental/OneCalendar/types"
+import { CalendarView, DateRange } from "@/components/OneCalendar/types"
 import { F0DatePicker } from "../index"
 import { predefinedPresets } from "../presets"
 import { datepickerSizes, DatePickerValue } from "../types"

packages/react/src/components/F0DatePicker/components/DateInput.tsx

@@ -3,10 +3,10 @@ import { forwardRef, useEffect, useState } from "react"
 import type {
   GranularityDefinition,
   GranularityDefinitionKey,
-} from "@/experimental/OneCalendar"
+} from "@/components/OneCalendar"
 
-import { DateStringFormat } from "@/experimental/OneCalendar/granularities/types"
-import { isActiveDate } from "@/experimental/OneCalendar/utils"
+import { DateStringFormat } from "@/components/OneCalendar/granularities/types"
+import { isActiveDate } from "@/components/OneCalendar/utils"
 import { Calendar } from "@/icons/app"
 import { useI18n } from "@/lib/providers/i18n"
 import { Input } from "@/ui/input"

packages/react/src/components/F0DatePicker/types.ts

@@ -1,4 +1,4 @@
-import { DateStringFormat } from "@/experimental/OneCalendar/granularities/types"
+import { DateStringFormat } from "@/components/OneCalendar/granularities/types"
 import {
   DatePickerPopupProps,
   DatePickerValue as DatePickerPopupValue,

packages/react/src/components/F0Select/F0Select.tsx

@@ -13,7 +13,7 @@ import {
 } from "react"
 import { useDebounceCallback } from "usehooks-ts"
 
-import { F0DialogContext } from "@/components/F0Dialog"
+import { F0DialogContext } from "@/patterns/F0Dialog"
 import {
   BaseFetchOptions,
   BaseResponse,

packages/react/src/components/F0Select/components/ActiveFiltersChips.tsx

@@ -10,7 +10,7 @@ import {
   FilterDefinition,
   FilterTypeKey,
   filterTypes,
-} from "../../OneFilterPicker/filterTypes/filters"
+} from "@/patterns/OneFilterPicker/filterTypes/filters"
 
 type ActiveFiltersChipsProps<Filters extends FiltersDefinition> = {
   filters: Filters

packages/react/src/components/F0Select/components/SelectAll.tsx

@@ -1,6 +1,6 @@
 import { ButtonInternal } from "@/components/F0Button/internal"
 import { F0Checkbox } from "@/components/F0Checkbox"
-import { OneEllipsis } from "@/components/OneEllipsis"
+import { OneEllipsis } from "@/lib/OneEllipsis"
 import { Await } from "@/lib/Await"
 import { useI18n } from "@/lib/providers/i18n"
 import { cn } from "@/lib/utils"

packages/react/src/components/F0Select/components/SelectItem.tsx

@@ -1,6 +1,6 @@
 import { F0Avatar } from "@/components/avatars/F0Avatar"
 import { F0Icon } from "@/components/F0Icon"
-import { OneEllipsis } from "@/components/OneEllipsis"
+import { OneEllipsis } from "@/lib/OneEllipsis"
 import { F0TagDot } from "@/components/tags/F0TagDot"
 import { F0TagPerson } from "@/components/tags/F0TagPerson"
 import { F0TagRaw } from "@/components/tags/F0TagRaw"

packages/react/src/components/F0Select/components/SelectTopActions.tsx

@@ -1,7 +1,7 @@
 import { AnimatePresence, motion } from "motion/react"
 import { useCallback, useState } from "react"
 
-import { OneFilterPicker } from "@/components/OneFilterPicker"
+import { OneFilterPicker } from "@/patterns/OneFilterPicker"
 import { GroupingSelector } from "@/patterns/OneDataCollection/Settings/components/GroupingSelector"
 import {
   FiltersDefinition,
@@ -12,7 +12,7 @@ import {
 } from "@/hooks/datasource"
 import { useI18n } from "@/lib/providers/i18n"
 
-import { F1SearchBox } from "../../../experimental/Forms/Fields/F1SearchBox"
+import { F1SearchBox } from "@/experimental/Forms/Fields/F1SearchBox"
 import { ActiveFiltersChips } from "./ActiveFiltersChips"
 
 interface SelectTopActionsProps<

packages/react/src/components/F0Select/components/SelectedItems.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from "react"
 
 import { F0Icon } from "@/components/F0Icon"
-import { OneEllipsis } from "@/components/OneEllipsis"
+import { OneEllipsis } from "@/lib/OneEllipsis"
 import { useI18n } from "@/lib/providers/i18n"
 
 import type { F0SelectItemObject } from "../types"

packages/react/src/components/F0Select/components/SelectionPreview.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef } from "react"
 
 import { F0Avatar } from "@/components/avatars/F0Avatar"
 import { F0Icon } from "@/components/F0Icon"
-import { OneEllipsis } from "@/components/OneEllipsis"
+import { OneEllipsis } from "@/lib/OneEllipsis"
 import { CrossedCircle } from "@/icons/app"
 import { useI18n } from "@/lib/providers/i18n"
 import { cn, focusRing } from "@/lib/utils"

packages/react/src/components/F0TableOfContentPopover/__stories__/F0TableOfContentPopover.stories.tsx

@@ -8,7 +8,7 @@ import { F0TableOfContentPopover } from "../index"
 import { courseModulesData, mockTOCData } from "./mocks"
 
 const meta: Meta<typeof F0TableOfContentPopover> = {
-  title: "Navigation/TableOfContentPopover",
+  title: "TableOfContentPopover",
   component: F0TableOfContentPopover,
   parameters: {
     layout: "centered",
@@ -85,7 +85,7 @@ const createStoryRender = (
   getData: (setter: (id: string) => void) => TOCItem[] = mockTOCData,
   Wrapper?: ComponentType<{ children: ReactNode }>
 ): Story["render"] => {
-  return (args) => {
+  const StoryRender = (args: Parameters<NonNullable<Story["render"]>>[0]) => {
     const [activeItem, setActiveItem] = useState(defaultActiveItem)
     const menu = (
       <F0TableOfContentPopover
@@ -96,6 +96,8 @@ const createStoryRender = (
     )
     return Wrapper ? <Wrapper>{menu}</Wrapper> : menu
   }
+  StoryRender.displayName = "StoryRender"
+  return StoryRender
 }
 
 export const Default: Story = {

packages/react/src/experimental/RichText/CoreEditor/Extensions/AIBlock/extensions.tsx → packages/react/src/components/RichText/CoreEditor/Extensions/AIBlock/extensions.tsx

@@ -14,7 +14,7 @@ import {
   TextStyleExtension,
   TypographyExtension,
   UnderlineExtension,
-} from "@/experimental/RichText/CoreEditor"
+} from "@/components/RichText/CoreEditor"
 
 export const createAIBlockEditorExtensions = () => {
   return [

packages/react/src/experimental/RichText/CoreEditor/Extensions/AIBlock/index.tsx → packages/react/src/components/RichText/CoreEditor/Extensions/AIBlock/index.tsx

@@ -24,7 +24,7 @@ import {
   TextStyleExtension,
   TypographyExtension,
   UnderlineExtension,
-} from "@/experimental/RichText/CoreEditor"
+} from "@/components/RichText/CoreEditor"
 import { Skeleton } from "@/ui/skeleton"
 
 export type AIButton = {

packages/react/src/experimental/RichText/CoreEditor/Toolbar/index.tsx → packages/react/src/components/RichText/CoreEditor/Toolbar/index.tsx

@@ -4,7 +4,7 @@ import { Fragment, ReactNode } from "react"
 
 import { F0Button } from "@/components/F0Button"
 import { F0ButtonToggle } from "@/components/F0ButtonToggle"
-import { Picker } from "@/experimental/Information/Reactions/Picker"
+import { Picker } from "@/kits/Social/Reactions/Picker"
 import {
   AlignTextCenter,
   AlignTextJustify,

packages/react/src/experimental/RichText/NotesTextEditor/Header/index.tsx → packages/react/src/components/RichText/NotesTextEditor/Header/index.tsx

@@ -3,7 +3,7 @@ import { cva } from "cva"
 import { F0Button } from "@/components/F0Button"
 import { F0ButtonDropdown } from "@/components/F0ButtonDropdown"
 import { F0Icon, IconType } from "@/components/F0Icon"
-import { OneEllipsis } from "@/components/OneEllipsis"
+import { OneEllipsis } from "@/lib/OneEllipsis"
 import { HeaderSecondaryAction } from "@/experimental/Information/Headers/BaseHeader"
 import {
   Metadata,

packages/react/src/experimental/RichText/NotesTextEditor/extensions.tsx → packages/react/src/components/RichText/NotesTextEditor/extensions.tsx

@@ -25,7 +25,7 @@ import {
   ImageUploadConfig,
   VideoEmbedExtension,
   createFileHandlerExtension,
-} from "@/experimental/RichText/CoreEditor"
+} from "@/components/RichText/CoreEditor"
 import { I18nContextType } from "@/lib/providers/i18n"
 
 interface CreateNotesTextEditorExtensionsProps {

packages/react/src/experimental/RichText/NotesTextEditor/index.tsx → packages/react/src/components/RichText/NotesTextEditor/index.tsx

@@ -16,8 +16,8 @@ import { F0AvatarAlert } from "@/components/avatars/F0AvatarAlert"
 import { F0Button } from "@/components/F0Button"
 import { ButtonInternal } from "@/components/F0Button/internal"
 import { F0Icon } from "@/components/F0Icon"
-import { EditorBubbleMenu } from "@/experimental/RichText/CoreEditor"
-import { Toolbar } from "@/experimental/RichText/CoreEditor"
+import { EditorBubbleMenu } from "@/components/RichText/CoreEditor"
+import { Toolbar } from "@/components/RichText/CoreEditor"
 import { Handle, Plus } from "@/icons/app"
 import { DataTestIdWrapper, WithDataTestIdProps } from "@/lib/data-testid"
 import { useI18n } from "@/lib/providers/i18n"

packages/react/src/experimental/RichText/RichTextEditor/Enhance/AcceptChanges/index.tsx → packages/react/src/components/RichText/RichTextEditor/Enhance/AcceptChanges/index.tsx

@@ -1,7 +1,7 @@
 import { Editor } from "@tiptap/react"
 
 import { F0Button } from "@/components/F0Button"
-import { lastIntentType } from "@/experimental/RichText/RichTextEditor/utils/types"
+import { lastIntentType } from "@/components/RichText/RichTextEditor/utils/types"
 import { Check, Cross, Reset } from "@/icons/app"
 import { useI18n } from "@/lib/providers/i18n"
 

packages/react/src/experimental/RichText/RichTextEditor/Footer/ActionsMenu/index.tsx → packages/react/src/components/RichText/RichTextEditor/Footer/ActionsMenu/index.tsx

@@ -4,7 +4,7 @@ import {
   F0ButtonDropdown,
 } from "@/components/F0ButtonDropdown"
 import { Switch } from "@/experimental/Forms/Fields/Switch"
-import { ToolbarDivider } from "@/experimental/RichText/CoreEditor"
+import { ToolbarDivider } from "@/components/RichText/CoreEditor"
 
 import {
   primaryActionType,

packages/react/src/experimental/RichText/RichTextEditor/Footer/index.tsx → packages/react/src/components/RichText/RichTextEditor/Footer/index.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from "react"
 
 import { F0Button } from "@/components/F0Button"
 import { cn } from "@/lib/utils"
-import { Toolbar } from "@/experimental/RichText/CoreEditor"
+import { Toolbar } from "@/components/RichText/CoreEditor"
 import { Paperclip, TextSize } from "@/icons/app"
 
 import { EnhanceActivator } from "../Enhance"

packages/react/src/experimental/RichText/RichTextEditor/index.tsx → packages/react/src/components/RichText/RichTextEditor/index.tsx

@@ -16,7 +16,7 @@ import {
   MentionedUser,
   MentionsConfig,
   Toolbar,
-} from "@/experimental/RichText/CoreEditor"
+} from "@/components/RichText/CoreEditor"
 
 import { DataTestIdWrapper } from "@/lib/data-testid"
 

packages/react/src/experimental/RichText/RichTextEditor/utils/extensions.tsx → packages/react/src/components/RichText/RichTextEditor/utils/extensions.tsx

@@ -17,7 +17,7 @@ import {
   createCharacterCountExtension,
   createMentionExtensions,
   createPlaceholderExtension,
-} from "@/experimental/RichText/CoreEditor"
+} from "@/components/RichText/CoreEditor"
 
 interface ExtensionsConfigurationProps {
   mentionsConfig?: MentionsConfig

packages/react/src/components/exports.ts

@@ -16,6 +16,10 @@ export * from "./OneChip"
  * @deprecated F0Box has moved to @/lib/F0Box. Import from there instead.
  */
 export * from "../lib/F0Box"
+/**
+ * @deprecated OneEllipsis has moved to @/lib/OneEllipsis. Import from there instead.
+ */
+export { OneEllipsis } from "../lib/OneEllipsis"
 export * from "./F0Button"
 export * from "./F0ButtonDropdown"
 export * from "./F0ButtonToggle"
@@ -24,26 +28,65 @@ export * from "./F0Checkbox"
 export * from "./F0ChipList"
 export * from "./F0DatePicker"
 export * from "./F0Alert"
-export * from "./F0Dialog"
+/**
+ * @deprecated F0Dialog has moved to @/patterns/F0Dialog. Import from there instead.
+ */
+export * from "../patterns/F0Dialog"
 export * from "./F0DurationInput"
-export * from "./F0FilterPickerContent"
-export * from "./F0Form"
-export * from "./F0FormField"
-export * from "./F0WizardForm"
+/**
+ * @deprecated F0FilterPickerContent has moved to @/patterns/F0FilterPickerContent. Import from there instead.
+ */
+export * from "../patterns/F0FilterPickerContent"
+/**
+ * @deprecated F0Form has moved to @/patterns/F0Form. Import from there instead.
+ */
+export * from "../patterns/F0Form"
+/**
+ * @deprecated F0FormField has moved to @/patterns/F0FormField. Import from there instead.
+ */
+export * from "../patterns/F0FormField"
+/**
+ * @deprecated F0WizardForm has moved to @/patterns/F0WizardForm. Import from there instead.
+ */
+export * from "../patterns/F0WizardForm"
 export * from "./F0Heading"
 export * from "./F0Icon"
 export * from "./F0Link"
 export * from "./F0Select"
 export * from "./F0Text"
 export * from "../sds/TimeLine"
-export * from "./OneFilterPicker/exports"
+/**
+ * @deprecated OneFilterPicker has moved to @/patterns/OneFilterPicker. Import from there instead.
+ */
+export { OneFilterPicker } from "../patterns/OneFilterPicker/OneFilterPicker"
+export type {
+  DateFilterDefinition,
+  FilterDefinition,
+  FilterValue,
+  InFilterDefinition,
+  NumberFilterDefinition,
+  SearchFilterDefinition,
+  FilterValueByKey,
+  FiltersMode,
+  FiltersDefinition,
+  FilterOptions,
+  CurrentFilters,
+  PresetDefinition,
+  PresetsDefinition,
+} from "../patterns/OneFilterPicker/types"
 export * from "./tags/exports"
 /**
  * @deprecated Await has moved to @/lib/Await. Import from there instead.
  */
 export * from "../lib/Await"
-export * from "./Utilities/F0GridStack"
+/**
+ * @deprecated F0GridStack has moved to @/lib/F0GridStack. Import from there instead.
+ */
+export * from "../lib/F0GridStack"
 export * from "./F0TableOfContentPopover"
+export * from "./OneCalendar"
+export * from "./OneEmptyState"
+export * from "./RichText/exports"
 export * from "../sds/surveys/exports"
 /**
  * @deprecated UpsellingKit has moved to @/sds/UpsellingKit. Import from there instead.

packages/react/src/components/tags/internal/BaseTag/index.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, ReactNode } from "react"
 
 import { F0Icon } from "@/components/F0Icon"
-import { OneEllipsis } from "@/components/OneEllipsis"
+import { OneEllipsis } from "@/lib/OneEllipsis"
 import { Tooltip } from "@/experimental/Overlays/Tooltip"
 import { InfoCircleLine } from "@/icons/app"
 import { cn } from "@/lib/utils"

packages/react/src/experimental/Overlays/Dialog/index.stories.tsx → packages/react/src/deprecated/Dialog/index.stories.tsx

@@ -9,7 +9,7 @@ import { Delete } from "@/icons/app"
 import { Dialog } from "./index"
 
 const meta = {
-  title: "Overlays/Dialog",
+  title: "Dialog",
   component: Dialog,
   parameters: {
     layout: "fullscreen",

packages/react/src/experimental/Forms/EntitySelect/Content/MainContent/Footer.tsx → packages/react/src/deprecated/EntitySelect/Content/MainContent/Footer.tsx

@@ -1,7 +1,7 @@
 import { F0Button } from "@/components/F0Button"
 import { F0ButtonDropdown } from "@/components/F0ButtonDropdown"
 
-import { Action } from "../../../../../components/F0Select/components/SelectBottomActions"
+import { Action } from "@/components/F0Select/components/SelectBottomActions"
 
 interface Props {
   actions?: Action[]

packages/react/src/experimental/Forms/EntitySelect/Content/MainContent/Searcher.tsx → packages/react/src/deprecated/EntitySelect/Content/MainContent/Searcher.tsx

@@ -2,7 +2,7 @@ import { Search } from "lucide-react"
 
 import { CrossedCircle } from "@/icons/app"
 
-import { F0Icon } from "../../../../../components/F0Icon"
+import { F0Icon } from "@/components/F0Icon"
 import { focusNextFocusable, focusPreviousFocusable } from "../../ListItem"
 
 export const Searcher = ({