@inventreedb/ui 0.0.1 → 0.0.2

package/src/components/settings/SettingItem.tsx

@@ -1,176 +0,0 @@
-import {
-  Button,
-  Group,
-  Paper,
-  Space,
-  Stack,
-  Switch,
-  Text,
-  useMantineColorScheme
-} from '@mantine/core';
-import { IconEdit } from '@tabler/icons-react';
-import { useEffect, useMemo, useState } from 'react';
-
-import { ModelType } from '@lib/enums/ModelType';
-import { apiUrl } from '@lib/functions/Api';
-import type { Setting } from '@lib/types/Settings';
-import { api } from '../../App';
-import { vars } from '../../theme';
-import { Boundary } from '../Boundary';
-import { RenderInstance } from '../render/Instance';
-import { ModelInformationDict } from '../render/ModelType';
-
-/**
- * Render a single setting value
- */
-function SettingValue({
-  setting,
-  onEdit,
-  onToggle
-}: Readonly<{
-  setting: Setting;
-  onEdit: (setting: Setting) => void;
-  onToggle: (setting: Setting, value: boolean) => void;
-}>) {
-  // Determine the text to display for the setting value
-  const valueText: string = useMemo(() => {
-    let value = setting.value;
-
-    // If the setting has a choice, display the choice label
-    if (setting?.choices && setting?.choices?.length > 0) {
-      const choice = setting.choices.find((c) => c.value == setting.value);
-      value = choice?.display_name || setting.value;
-    }
-
-    if (setting?.units) {
-      value = `${value} ${setting.units}`;
-    }
-
-    return value;
-  }, [setting]);
-
-  const [modelInstance, setModelInstance] = useState<any>(null);
-
-  // Does this setting map to an internal database model?
-  const modelType: ModelType | null = useMemo(() => {
-    if (setting.model_name) {
-      const model = setting.model_name.split('.')[1];
-      return ModelType[model as keyof typeof ModelType] || null;
-    }
-    return null;
-  }, [setting]);
-
-  useEffect(() => {
-    setModelInstance(null);
-
-    if (modelType && setting.value) {
-      const endpoint = ModelInformationDict[modelType].api_endpoint;
-
-      api
-        .get(apiUrl(endpoint, setting.value))
-        .then((response) => {
-          if (response.data) {
-            setModelInstance(response.data);
-          } else {
-            setModelInstance(null);
-          }
-        })
-        .catch((error) => {
-          setModelInstance(null);
-        });
-    }
-  }, [setting, modelType]);
-
-  // If a full model instance is available, render it
-  if (modelInstance && modelType && setting.value) {
-    return (
-      <Group justify='right' gap='xs'>
-        <RenderInstance instance={modelInstance} model={modelType} />
-        <Button
-          aria-label={`edit-setting-${setting.key}`}
-          variant='subtle'
-          onClick={() => onEdit(setting)}
-        >
-          <IconEdit />
-        </Button>
-      </Group>
-    );
-  }
-
-  switch (setting?.type || 'string') {
-    case 'boolean':
-      return (
-        <Switch
-          size='sm'
-          radius='lg'
-          aria-label={`toggle-setting-${setting.key}`}
-          checked={setting.value.toLowerCase() == 'true'}
-          onChange={(event) => onToggle(setting, event.currentTarget.checked)}
-          style={{
-            paddingRight: '20px'
-          }}
-        />
-      );
-    default:
-      return valueText ? (
-        <Group gap='xs' justify='right'>
-          <Space />
-          <Button
-            aria-label={`edit-setting-${setting.key}`}
-            variant='subtle'
-            onClick={() => onEdit(setting)}
-          >
-            {valueText}
-          </Button>
-        </Group>
-      ) : (
-        <Button
-          aria-label={`edit-setting-${setting.key}`}
-          variant='subtle'
-          onClick={() => onEdit(setting)}
-        >
-          <IconEdit />
-        </Button>
-      );
-  }
-}
-
-/**
- * Display a single setting item, and allow editing of the value
- */
-export function SettingItem({
-  setting,
-  shaded,
-  onEdit,
-  onToggle
-}: Readonly<{
-  setting: Setting;
-  shaded: boolean;
-  onEdit: (setting: Setting) => void;
-  onToggle: (setting: Setting, value: boolean) => void;
-}>) {
-  const { colorScheme } = useMantineColorScheme();
-
-  const style: Record<string, string> = { paddingLeft: '8px' };
-  if (shaded) {
-    style['backgroundColor'] =
-      colorScheme === 'light' ? vars.colors.gray[1] : vars.colors.gray[9];
-  }
-
-  return (
-    <Paper style={style}>
-      <Group justify='space-between' p='3'>
-        <Stack gap='2' p='4px'>
-          <Text>
-            {setting.name}
-            {setting.required ? ' *' : ''}
-          </Text>
-          <Text size='xs'>{setting.description}</Text>
-        </Stack>
-        <Boundary label={`setting-value-${setting.key}`}>
-          <SettingValue setting={setting} onEdit={onEdit} onToggle={onToggle} />
-        </Boundary>
-      </Group>
-    </Paper>
-  );
-}

package/src/components/settings/SettingList.tsx

@@ -1,217 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import { Stack, Text } from '@mantine/core';
-import { notifications } from '@mantine/notifications';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from 'react';
-import { useStore } from 'zustand';
-
-import type { ModelType } from '@lib/enums/ModelType';
-import { apiUrl } from '@lib/functions/Api';
-import type { Setting, SettingsStateProps } from '@lib/types/Settings';
-import { useApi } from '../../contexts/ApiContext';
-import { useEditApiFormModal } from '../../hooks/UseForm';
-import {
-  createMachineSettingsState,
-  createPluginSettingsState,
-  useGlobalSettingsState,
-  useUserSettingsState
-} from '../../states/SettingsState';
-import { SettingItem } from './SettingItem';
-
-/**
- * Display a list of setting items, based on a list of provided keys
- */
-export function SettingList({
-  settingsState,
-  keys,
-  onChange
-}: Readonly<{
-  settingsState: SettingsStateProps;
-  keys?: string[];
-  onChange?: () => void;
-}>) {
-  useEffect(() => {
-    settingsState.fetchSettings();
-  }, []);
-
-  const api = useApi();
-
-  const allKeys = useMemo(
-    () => settingsState?.settings?.map((s) => s.key) ?? [],
-    [settingsState?.settings]
-  );
-
-  const [setting, setSetting] = useState<Setting | undefined>(undefined);
-
-  // Determine the field type of the setting
-  const fieldType = useMemo(() => {
-    if (setting?.choices?.length) {
-      return 'choice';
-    }
-
-    if (setting?.type != undefined) {
-      return setting.type;
-    }
-
-    return 'string';
-  }, [setting]);
-
-  const key: string = useMemo(() => setting?.key ?? '', [setting]);
-
-  const editSettingModal = useEditApiFormModal({
-    url: settingsState.endpoint,
-    pk: key,
-    pathParams: settingsState.pathParams,
-    title: t`Edit Setting`,
-    fields: {
-      value: {
-        field_type: fieldType,
-        required: setting?.required ?? false,
-        label: setting?.name,
-        description: setting?.description,
-        api_url: setting?.api_url ?? '',
-        model: (setting?.model_name?.split('.')[1] as ModelType) ?? null,
-        filters: setting?.model_filters || undefined,
-        choices: setting?.choices ?? undefined
-      }
-    },
-    successMessage: t`Setting ${key} updated successfully`,
-    onFormSuccess: () => {
-      settingsState.fetchSettings();
-      onChange?.();
-    }
-  });
-
-  // Callback for editing a single setting instance
-  const onValueEdit = useCallback(
-    (setting: Setting) => {
-      setSetting(setting);
-      editSettingModal.open();
-    },
-    [editSettingModal]
-  );
-
-  // Callback for toggling a single boolean setting instance
-  const onValueToggle = useCallback(
-    (setting: Setting, value: boolean) => {
-      api
-        .patch(
-          apiUrl(settingsState.endpoint, setting.key, settingsState.pathParams),
-          {
-            value: value
-          }
-        )
-        .then(() => {
-          notifications.hide('setting');
-          notifications.show({
-            title: t`Setting updated`,
-            message: t`Setting ${setting.key} updated successfully`,
-            color: 'green',
-            id: 'setting'
-          });
-          onChange?.();
-        })
-        .catch((error) => {
-          notifications.hide('setting');
-          notifications.show({
-            title: t`Error editing setting`,
-            message: error.message,
-            color: 'red',
-            id: 'setting'
-          });
-        })
-        .finally(() => {
-          settingsState.fetchSettings();
-        });
-    },
-    [settingsState]
-  );
-
-  return (
-    <>
-      {editSettingModal.modal}
-      <Stack gap='xs'>
-        {(keys || allKeys)?.map((key, i) => {
-          const setting = settingsState?.settings?.find(
-            (s: any) => s.key === key
-          );
-
-          if (settingsState?.settings && !setting) {
-            console.error(`Setting ${key} not found`);
-          }
-
-          return (
-            <React.Fragment key={key}>
-              {setting ? (
-                <SettingItem
-                  setting={setting}
-                  shaded={i % 2 === 0}
-                  onEdit={onValueEdit}
-                  onToggle={onValueToggle}
-                />
-              ) : (
-                <Text size='sm' style={{ fontStyle: 'italic' }} c='red'>
-                  Setting {key} not found
-                </Text>
-              )}
-            </React.Fragment>
-          );
-        })}
-        {(keys || allKeys)?.length === 0 && (
-          <Text style={{ fontStyle: 'italic' }}>
-            <Trans>No settings specified</Trans>
-          </Text>
-        )}
-      </Stack>
-    </>
-  );
-}
-
-export function UserSettingList({ keys }: Readonly<{ keys: string[] }>) {
-  const userSettings = useUserSettingsState();
-
-  return <SettingList settingsState={userSettings} keys={keys} />;
-}
-
-export function GlobalSettingList({ keys }: Readonly<{ keys: string[] }>) {
-  const globalSettings = useGlobalSettingsState();
-
-  return <SettingList settingsState={globalSettings} keys={keys} />;
-}
-
-export function PluginSettingList({
-  pluginKey
-}: Readonly<{ pluginKey: string }>) {
-  const pluginSettingsStore = useRef(
-    createPluginSettingsState({ plugin: pluginKey })
-  ).current;
-  const pluginSettings = useStore(pluginSettingsStore);
-
-  return <SettingList settingsState={pluginSettings} />;
-}
-
-export function MachineSettingList({
-  machinePk,
-  configType,
-  onChange
-}: Readonly<{
-  machinePk: string;
-  configType: 'M' | 'D';
-  onChange?: () => void;
-}>) {
-  const machineSettingsStore = useRef(
-    createMachineSettingsState({
-      machine: machinePk,
-      configType: configType
-    })
-  ).current;
-  const machineSettings = useStore(machineSettingsStore);
-
-  return <SettingList settingsState={machineSettings} onChange={onChange} />;
-}