remove global default props

dimfeld · dimfeld · commit 4fc9b2cd3d8e · 2024-02-06T08:41:14.000-10:00
diff --git a/packages/svelte-ux/src/lib/components/Button.svelte b/packages/svelte-ux/src/lib/components/Button.svelte
@@ -12,7 +12,7 @@
   import type { ButtonVariant } from '$lib/types/options';
   import { getComponentSettings } from './settings';
 
-  const { defaults } = getComponentSettings('Button');
+  const defaults = getComponentSettings('Button');
   const settingsClasses = defaults.classes;
 
   export let type: 'button' | 'submit' | 'reset' = 'button';
diff --git a/packages/svelte-ux/src/lib/components/ButtonGroup.svelte b/packages/svelte-ux/src/lib/components/ButtonGroup.svelte
@@ -28,7 +28,7 @@
   import { cls } from '../utils/styles';
   import { getComponentSettings } from './settings';
 
-  const { defaults } = getComponentSettings('ButtonGroup');
+  const defaults = getComponentSettings('ButtonGroup');
   const settingsClasses = defaults.classes;
 
   export let variant: ComponentProps<Button>['variant'] = defaults.variant;
diff --git a/packages/svelte-ux/src/lib/components/CopyButton.svelte b/packages/svelte-ux/src/lib/components/CopyButton.svelte
@@ -6,7 +6,7 @@
   import { getComponentSettings } from './settings';
   import { slide } from 'svelte/transition';
 
-  const { defaults } = getComponentSettings('CopyButton');
+  const defaults = getComponentSettings('CopyButton');
   const settingsClasses = defaults.classes;
 
   export let value: string;
diff --git a/packages/svelte-ux/src/lib/components/DateButton.svelte b/packages/svelte-ux/src/lib/components/DateButton.svelte
@@ -10,7 +10,7 @@
 
   const dispatch = createEventDispatcher();
 
-  const { defaults } = getComponentSettings('DateButton');
+  const defaults = getComponentSettings('DateButton');
   const settingsClasses = defaults.classes;
 
   export let date: Date;
diff --git a/packages/svelte-ux/src/lib/components/DateField.svelte b/packages/svelte-ux/src/lib/components/DateField.svelte
@@ -10,7 +10,7 @@
   import DatePickerField from './DatePickerField.svelte';
 
   const { format: format_ux } = getSettings();
-  const { defaults } = getComponentSettings('DateField');
+  const defaults = getComponentSettings('DateField');
 
   export let value: Date | null = null;
   export let format: string | undefined = undefined;
diff --git a/packages/svelte-ux/src/lib/components/DatePickerField.svelte b/packages/svelte-ux/src/lib/components/DatePickerField.svelte
@@ -11,7 +11,7 @@
   import { getComponentSettings, getSettings } from './settings';
 
   const dispatch = createEventDispatcher();
-  const { defaults } = getComponentSettings('DatePickerField');
+  const defaults = getComponentSettings('DatePickerField');
 
   export let value: Date | null = null;
   export let periodType: PeriodType = PeriodType.Day;
diff --git a/packages/svelte-ux/src/lib/components/DateRangeField.svelte b/packages/svelte-ux/src/lib/components/DateRangeField.svelte
@@ -15,7 +15,7 @@
 
   const dispatch = createEventDispatcher();
   const { format, localeSettings } = getSettings();
-  const { defaults } = getComponentSettings('DatePickerField');
+  const defaults = getComponentSettings('DatePickerField');
 
   const _defaultValue: DateRangeType = {
     from: null,
diff --git a/packages/svelte-ux/src/lib/components/Field.svelte b/packages/svelte-ux/src/lib/components/Field.svelte
@@ -4,7 +4,7 @@
   import { uniqueId } from 'lodash-es';
 
   import { cls } from '../utils/styles';
-  import type { LabelPlacement } from '../types/options';
+  import { type LabelPlacement, DEFAULT_LABEL_PLACEMENT } from '../types/options';
   import { getComponentSettings } from './settings';
 
   import Button from './Button.svelte';
@@ -14,12 +14,11 @@
     clear: null;
   }>();
 
-  const { defaults, globalDefaults } = getComponentSettings('Field');
+  const defaults = getComponentSettings('Field');
   const settingsClasses = defaults.classes;
 
   export let label = '';
-  export let labelPlacement: LabelPlacement =
-    defaults.labelPlacement ?? globalDefaults.labelPlacement;
+  export let labelPlacement: LabelPlacement = defaults.labelPlacement ?? DEFAULT_LABEL_PLACEMENT;
   export let value: any = null;
   // export let placeholder = '';
   export let error: string | string[] | boolean | undefined = '';
diff --git a/packages/svelte-ux/src/lib/components/MenuButton.svelte b/packages/svelte-ux/src/lib/components/MenuButton.svelte
@@ -12,7 +12,7 @@
   import MenuItem from './MenuItem.svelte';
 
   const dispatch = createEventDispatcher<{ change: { value: any } }>();
-  const { defaults } = getComponentSettings('MenuButton');
+  const defaults = getComponentSettings('MenuButton');
   const settingsClasses = defaults.classes;
 
   export let options: Array<{ label: string; value: any; icon?: string }>;
diff --git a/packages/svelte-ux/src/lib/components/MenuField.svelte b/packages/svelte-ux/src/lib/components/MenuField.svelte
@@ -13,7 +13,7 @@
   import type { MenuOption } from '$lib/types/options';
   import { getComponentSettings } from './settings';
 
-  const { defaults } = getComponentSettings('MenuField');
+  const defaults = getComponentSettings('MenuField');
   const settingsClasses = defaults.classes;
 
   export let options: MenuOption[] = [];
diff --git a/packages/svelte-ux/src/lib/components/MultiSelectField.svelte b/packages/svelte-ux/src/lib/components/MultiSelectField.svelte
@@ -18,7 +18,7 @@
 
   type Option = $$Generic;
 
-  const { defaults } = getComponentSettings('MultiSelectField');
+  const defaults = getComponentSettings('MultiSelectField');
   const settingsClasses = defaults.classes;
 
   // MultiSelectMenu props
diff --git a/packages/svelte-ux/src/lib/components/RangeField.svelte b/packages/svelte-ux/src/lib/components/RangeField.svelte
@@ -5,7 +5,7 @@
   import Button from './Button.svelte';
   import { getComponentSettings } from './settings';
 
-  const { defaults } = getComponentSettings('RangeField');
+  const defaults = getComponentSettings('RangeField');
 
   export let value: number;
   export let min = 0;
diff --git a/packages/svelte-ux/src/lib/components/SelectField.svelte b/packages/svelte-ux/src/lib/components/SelectField.svelte
@@ -23,7 +23,7 @@
     change: { value: any; option: any };
     inputChange: string;
   }>();
-  const { defaults } = getComponentSettings('SelectField');
+  const defaults = getComponentSettings('SelectField');
   const settingsClasses = defaults.classes;
 
   const logger = new Logger('SelectField');
diff --git a/packages/svelte-ux/src/lib/components/TextField.svelte b/packages/svelte-ux/src/lib/components/TextField.svelte
@@ -9,7 +9,7 @@
   import type { Actions } from '../actions/multi';
   import { cls } from '../utils/styles';
   import { isLiteralObject } from '../utils/object';
-  import type { LabelPlacement } from '../types/options';
+  import { DEFAULT_LABEL_PLACEMENT, type LabelPlacement } from '../types/options';
   import { getComponentSettings } from './settings';
 
   import Button from './Button.svelte';
@@ -24,13 +24,14 @@
     change: { value: typeof value; inputValue: InputValue; operator?: string };
   }>();
 
-  const { defaults, globalDefaults } = getComponentSettings('TextField');
+  const defaults = getComponentSettings('TextField');
+  const fieldDefaults = getComponentSettings('Field');
   const settingsClasses = defaults.classes;
 
   export let name: string | undefined = undefined;
   export let label = '';
   export let labelPlacement: LabelPlacement =
-    defaults.labelPlacement ?? globalDefaults.labelPlacement;
+    defaults.labelPlacement ?? fieldDefaults.labelPlacement ?? DEFAULT_LABEL_PLACEMENT;
   export let value: InputValue | { [operator: string]: InputValue } = ''; // TODO: Can also include operator: { "operator": "value" }
   export let type:
     | 'text'
diff --git a/packages/svelte-ux/src/lib/components/ToggleButton.svelte b/packages/svelte-ux/src/lib/components/ToggleButton.svelte
@@ -6,7 +6,7 @@
   import type { TransitionParams } from '$lib/types';
   import { getComponentSettings } from './settings';
 
-  const { defaults } = getComponentSettings('ToggleButton');
+  const defaults = getComponentSettings('ToggleButton');
 
   export let on = false;
   export let transition: typeof fade | false = fade;
diff --git a/packages/svelte-ux/src/lib/components/settings.ts b/packages/svelte-ux/src/lib/components/settings.ts
@@ -38,8 +38,6 @@ export type SettingsInput = {
   };
   currentTheme?: ThemeStore;
 
-  defaultProps?: Partial<DefaultProps>;
-
   /** The existing locale store, if calling settings when there is already an existing `Settings` object */
   locale?: LocaleStore;
   /** The existing locale store, if calling settings when there is already an existing `Settings` object */
@@ -48,17 +46,16 @@ export type SettingsInput = {
   format?: Readable<FormatFunctions>;
 };
 
-export interface Settings extends Omit<SettingsInput, 'formats' | 'dictionary' | 'defaultProps'> {
+export interface Settings extends Omit<SettingsInput, 'formats' | 'dictionary'> {
   /** The currently selected locale */
   locale: LocaleStore;
   /** The settings for the currently selected locale */
   localeSettings: Readable<LocaleSettings>;
   /** Formatting functions and information */
   format: Readable<FormatFunctions>;
   currentTheme: ThemeStore;
-  defaultProps: DefaultProps;
 
-  componentSettingsCache: Partial<Record<ComponentName, GetComponentSettingsResult<ComponentName>>>;
+  componentSettingsCache: Partial<Record<ComponentName, ResolvedComponentSettings<ComponentName>>>;
 }
 
 const settingsKey = Symbol();
@@ -94,10 +91,6 @@ function createLocaleStores(settings: SettingsInput) {
   };
 }
 
-const defaultProps: DefaultProps = {
-  labelPlacement: 'inset',
-};
-
 export function settings(settings: SettingsInput): Settings {
   let lightThemes = settings.themes?.light ?? ['light'];
   let darkThemes = settings.themes?.dark ?? ['dark'];
@@ -112,32 +105,25 @@ export function settings(settings: SettingsInput): Settings {
 
   let localeStores = createLocaleStores(settings);
 
-  const resolvedDefaultProps: DefaultProps = {
-    ...defaultProps,
-    ...settings.defaultProps,
-  };
-
   return setContext<Settings>(settingsKey, {
     ...settings,
     themes: {
       light: lightThemes,
       dark: darkThemes,
     },
-    defaultProps: resolvedDefaultProps,
     currentTheme,
-    ...localeStores,
     componentSettingsCache: {},
+    ...localeStores,
   });
 }
 
 export function getSettings(): Settings {
   // in a try/catch to be able to test wo svelte components
   try {
-    return getContext<Settings>(settingsKey) ?? { defaultProps };
+    return getContext<Settings>(settingsKey) ?? {};
   } catch (error) {
     return {
       currentTheme: createThemeStore({ light: ['light'], dark: ['dark'] }),
-      defaultProps,
       componentSettingsCache: {},
     };
   }
@@ -146,37 +132,30 @@ export function getSettings(): Settings {
 export function resolveComponentSettings<NAME extends ComponentName>(
   settings: Settings,
   name: NAME
-): ResolvedComponentSettings[NAME] {
+): ResolvedComponentSettings<NAME> {
   const theme = settings?.components?.[name];
+  const classes = resolveComponentClasses(theme);
 
-  return {
+  // @ts-expect-error TS has trouble merging these types together.
+  const output: ResolvedComponentSettings<NAME> = {
     ...theme,
-    classes: resolveComponentClasses(theme),
+    classes,
   };
-}
 
-export interface GetComponentSettingsResult<NAME extends ComponentName> {
-  defaults: ResolvedComponentSettings[NAME];
-  globalDefaults: DefaultProps;
+  return output;
 }
 
 export function getComponentSettings<NAME extends ComponentName>(
   name: NAME
-): GetComponentSettingsResult<NAME> {
+): ResolvedComponentSettings<NAME> {
   const settings = getSettings();
 
   const existing = settings.componentSettingsCache[name];
   if (existing) {
-    return existing as GetComponentSettingsResult<NAME>;
+    return existing as ResolvedComponentSettings<NAME>;
   }
 
-  const componentSettings = resolveComponentSettings(settings, name)!;
-
-  const output: GetComponentSettingsResult<NAME> = {
-    defaults: componentSettings,
-    globalDefaults: settings?.defaultProps ?? defaultProps,
-  };
-
+  const output = resolveComponentSettings(settings, name)!;
   settings.componentSettingsCache[name] = output;
   return output;
 }
diff --git a/packages/svelte-ux/src/lib/components/theme.ts b/packages/svelte-ux/src/lib/components/theme.ts
@@ -2,6 +2,7 @@ import type { ComponentProps, SvelteComponent } from 'svelte';
 import type * as Components from './';
 import { getSettings, type DefaultProps, type Settings } from './settings';
 import type { ButtonVariant, LabelPlacement } from '$lib/types/options';
+import type { Prettify } from '$lib/types';
 
 export type ComponentName = keyof typeof Components;
 
@@ -68,10 +69,12 @@ export type ResolvedComponentClassesProp<NAME extends ComponentName> =
     ? {}
     : NonNullable<ClassesProp<(typeof Components)[NAME]>>;
 
-export type ResolvedComponentSettings = {
-  [key in ComponentName]: {
-    classes: ResolvedComponentClassesProp<key>;
-  } & (key extends keyof ComponentDefaultProps ? ComponentDefaultProps[key] : {});
+export type AllDefaultProps<NAME extends ComponentName> = NAME extends keyof ComponentDefaultProps
+  ? ComponentDefaultProps[NAME]
+  : {};
+
+export type ResolvedComponentSettings<NAME extends ComponentName> = AllDefaultProps<NAME> & {
+  classes: ResolvedComponentClassesProp<NAME>;
 };
 
 export type ComponentSettings = {
diff --git a/packages/svelte-ux/src/lib/types/options.ts b/packages/svelte-ux/src/lib/types/options.ts
@@ -6,6 +6,7 @@ export type MenuOption = {
 };
 
 export type LabelPlacement = 'inset' | 'float' | 'top' | 'left';
+export const DEFAULT_LABEL_PLACEMENT: LabelPlacement = 'inset';
 
 export type ButtonVariant =
   | 'default'
