tycho-components 0.0.1

package/src/AppEditable/AppEditable.tsx

@@ -0,0 +1,280 @@
+import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { format } from 'date-fns-tz';
+import EasyEdit from 'react-easy-edit';
+import { useTranslation } from 'react-i18next';
+import Switch from 'react-switch';
+import AppColorpicker from '../AppColorpicker';
+import AppEditableField from './AppEditableField';
+import FormField from './FormField';
+import FormFieldOption, { FieldValue } from './FormFieldOption';
+import './style.scss';
+
+type ItemValue = unknown;
+type Item = {
+  [key: string]: ItemValue | Item;
+};
+
+type Props = {
+  translation: string;
+  item: Record<string, unknown>;
+  fields: FormField[];
+  save?: (field: AppEditableField) => void;
+  group?: string;
+  className?: string;
+  reference?: string;
+};
+
+export default function AppEditable({
+  translation,
+  fields,
+  item,
+  save,
+  group,
+  className,
+  reference,
+}: Props) {
+  const { t } = useTranslation([translation, 'common']);
+
+  const formatDate = (date: Date | null, fmt: string) => {
+    if (!date) return '';
+    return format(date, fmt);
+  };
+
+  const handleSave = (value: FieldValue, field: FormField) => {
+    save &&
+      save({
+        uid: item.uid as string,
+        name: field.name,
+        type: field.type,
+        value,
+        ref: reference ? (item[reference] as string) : undefined,
+      });
+  };
+
+  const getDateValue = (field: FormField) => {
+    const v = getValue(field) as string;
+    return !v ? null : formatDate(new Date(v), 'yyyy-MM-dd');
+  };
+
+  const getValue = (field: FormField): unknown => {
+    if (field.name.indexOf('.') === -1) {
+      if (!isEmptyValue(item, field.name)) return item[field.name];
+      return field.default !== undefined ? field.default : null;
+    }
+
+    const splits = field.name.split('.');
+    let val: unknown = item;
+    for (const split of splits) {
+      if (typeof val === 'object' && val !== null && split in val) {
+        val = (val as Item)[split];
+      } else {
+        val = undefined;
+        break;
+      }
+    }
+
+    if (val !== undefined && val !== '') return val;
+    return field.default !== undefined ? field.default : null;
+  };
+
+  const isEmptyValue = (thisItem: Item, thisName: string) =>
+    thisItem[thisName] === undefined || thisItem[thisName] === '';
+
+  const getValueToDisplay = (field: FormField): React.ReactNode => {
+    const value = getValue(field);
+
+    if (field.options && field.options.length > 0) {
+      const option = field.options.find((op) => op.value === value);
+      if (option) return option.label;
+    }
+
+    // Fallback — if value is a string, number, or boolean, display it.
+    if (
+      typeof value === 'string' ||
+      typeof value === 'number' ||
+      typeof value === 'boolean'
+    ) {
+      return value;
+    }
+
+    return null;
+  };
+
+  const getLabelValueForList = (options: FormFieldOption[]) => {
+    return options.map((op) => ({
+      label: t(op.label),
+      value: op.value,
+    }));
+  };
+
+  return (
+    <>
+      {fields.map((field: FormField, idx: number) => (
+        <div
+          className={`editable-container ${className || ''}`}
+          key={idx.valueOf()}
+        >
+          <div className="title">
+            <h6>
+              {field.title
+                ? field.title
+                : t(`${translation}:${group || ''}.field.${field.name}`)}
+              {field.required && <span>*</span>}
+            </h6>
+
+            {field.tooltip && (
+              <FontAwesomeIcon
+                icon={faQuestionCircle}
+                className="info"
+                title={field.tooltip}
+              />
+            )}
+          </div>
+
+          {field.type === 'display' ? (
+            <span>{getValueToDisplay(field) ?? '--'}</span>
+          ) : null}
+
+          {field.type === 'code' ? (
+            <div className="textarea-code">
+              <EasyEdit
+                type="textarea"
+                onSave={(value: string) =>
+                  handleSave(JSON.parse(value) as FieldValue, field)
+                }
+                saveButtonLabel={t('common:button.confirm')}
+                cancelButtonLabel={t('common:button.cancel')}
+                value={JSON.stringify(getValue(field) || {})}
+                placeholder={t('common:placeholder.input')}
+              />
+            </div>
+          ) : null}
+
+          {(field.type === 'text' ||
+            field.type === 'number' ||
+            field.type === 'locale' ||
+            field.type === 'year') && (
+            <EasyEdit
+              type="text"
+              onSave={(value: string) => handleSave(value, field)}
+              saveButtonLabel={t('common:button.confirm')}
+              cancelButtonLabel={t('common:button.cancel')}
+              value={getValue(field)}
+              placeholder={t('common:placeholder.input')}
+            />
+          )}
+
+          {field.type === 'textarea' ? (
+            <EasyEdit
+              type="textarea"
+              onSave={(value: string) => handleSave(value, field)}
+              saveButtonLabel={t('common:button.confirm')}
+              cancelButtonLabel={t('common:button.cancel')}
+              value={getValue(field)}
+              placeholder={t('common:placeholder.input')}
+            />
+          ) : null}
+
+          {field.type === 'select' || field.type === 'list' ? (
+            <EasyEdit
+              type="select"
+              options={getLabelValueForList(field.options || [])}
+              onSave={(value: string) => handleSave(value, field)}
+              saveButtonLabel={t('common:button.confirm')}
+              cancelButtonLabel={t('common:button.cancel')}
+              placeholder={t('common:placeholder.input')}
+              value={getValue(field)}
+            />
+          ) : null}
+
+          {field.type === 'range' ? (
+            <EasyEdit
+              type="range"
+              onSave={(value: string) => handleSave(value, field)}
+              attributes={{ name: 'awesome-range', min: 0, max: 100, step: 1 }}
+              placeholder={t('common:placeholder.input')}
+              value={getValue(field)}
+              saveButtonLabel={t('common:button.confirm')}
+              cancelButtonLabel={t('common:button.cancel')}
+            />
+          ) : null}
+
+          {field.type === 'switch' ? (
+            <Switch
+              onChange={(checked: boolean) => handleSave(checked, field)}
+              checked={(getValue(field) as boolean) || false}
+            />
+          ) : null}
+
+          {field.type === 'date' && (
+            <EasyEdit
+              type="date"
+              onSave={(value: string) =>
+                handleSave(new Date(value) as FieldValue, field)
+              }
+              placeholder={t('common:placeholder.input')}
+              value={getDateValue(field)}
+              saveButtonLabel={t('common:button.confirm')}
+              cancelButtonLabel={t('common:button.cancel')}
+            />
+          )}
+
+          {field.type === 'password' && (
+            <EasyEdit
+              type="password"
+              onSave={(value: string) => handleSave(value, field)}
+              saveButtonLabel={t('common:button.confirm')}
+              cancelButtonLabel={t('common:button.cancel')}
+              value={getValue(field)}
+              placeholder={t('common:placeholder.input')}
+            />
+          )}
+
+          {field.type === 'color' ? (
+            <AppColorpicker item={item} field={field} handleSave={handleSave} />
+          ) : null}
+        </div>
+      ))}
+
+      {/* 
+        <h3>Radio Buttons</h3>
+        <EasyEdit
+          type={Types.RADIO}
+          value="one"
+          onSave={save}
+          options={generateOptionsList()}
+          instructions="Custom instructions"
+        />
+        <h3>DateTime</h3>
+        <EasyEdit
+          type={Types.DATETIME_LOCAL}
+          onSave={save}
+          instructions="Select your date and time of birth"
+        />
+        <h3>Dropdown</h3>
+        <EasyEdit
+          type={Types.SELECT}
+          options={generateOptionsList()}
+          onSave={save}
+          placeholder={t('common:placeholder.input')}
+          instructions="Custom instructions"
+        />
+        <h3>Datalist</h3>
+        <EasyEdit
+          type={Types.DATALIST}
+          options={generateOptionsList()}
+          onSave={save}
+          instructions="Start typing to get suggestions"
+        />
+        <h3>Checkboxes</h3>
+        <EasyEdit
+          type={Types.CHECKBOX}
+          options={generateOptionsList()}
+          onSave={save}
+          value={['one', 'two']} // this will preselect two options
+        />
+       */}
+    </>
+  );
+}

package/src/AppEditable/AppEditableField.ts

@@ -0,0 +1,7 @@
+export default interface AppEditableField {
+  uid: string;
+  name: string;
+  value: any;
+  type?: string;
+  ref?: string;
+}

package/src/AppEditable/FormField.ts

@@ -0,0 +1,26 @@
+import FormFieldOption from './FormFieldOption';
+
+export type FieldOperations = 'create' | 'update' | 'delete';
+
+export default interface FormField {
+  name: string;
+  title?: string;
+  type: string;
+  required?: boolean;
+  disabled?: boolean;
+  options?: FormFieldOption[];
+  tooltip?: string;
+  default?: string | boolean | number;
+  role?: string;
+}
+
+export const validateFormField = (
+  entity: Record<string, unknown>,
+  fields: FormField[]
+) => {
+  const invalids = [];
+  for (const field of fields) {
+    if (field.required && !entity[field.name]) invalids.push(field);
+  }
+  return invalids;
+};

package/src/AppEditable/FormFieldOption.ts

@@ -0,0 +1,38 @@
+export type FieldValue = string | number | boolean | Date | null;
+
+export default interface FormFieldOption {
+  label: string;
+  value: FieldValue;
+}
+
+export const convertEnum = (
+  values: Record<string, string | number | boolean>
+): FormFieldOption[] => {
+  let fields: FormFieldOption[] = [{ label: '', value: '' }];
+
+  Object.keys(values).forEach((key) => {
+    fields = [...fields, { label: String(values[key]), value: key }];
+  });
+
+  return fields;
+};
+
+export const convertList = (
+  values: Array<Record<string, unknown>>,
+  keyAttr: string,
+  valueAttr: string
+): FormFieldOption[] => {
+  let fields: FormFieldOption[] = [{ label: '', value: '' }];
+
+  values.forEach((value) => {
+    fields = [
+      ...fields,
+      {
+        label: String(value[keyAttr]),
+        value: value[valueAttr] as FieldValue,
+      },
+    ];
+  });
+
+  return fields;
+};

package/src/AppEditable/index.tsx

@@ -0,0 +1,3 @@
+import AppEditable from './AppEditable';
+
+export default AppEditable;

package/src/AppEditable/style.scss

@@ -0,0 +1,94 @@
+.editable-container {
+  margin-top: var(--spacing-small);
+
+  .title {
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--spacing-xsmall);
+
+    h6 {
+      margin-bottom: 0px;
+    }
+
+    .info {
+      width: 16px;
+      height: 16px;
+      margin-left: var(--spacing-xsmall);
+      cursor: pointer;
+    }
+  }
+}
+
+.modal-map {
+  width: 300px;
+  height: 200px;
+}
+
+.easy-edit-wrapper {
+  cursor: pointer;
+  color: var(--color-primary);
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 5px;
+}
+
+.textarea-code {
+  .easy-edit-inline-wrapper .easy-edit-component-wrapper {
+    textarea {
+      font-family: "Courier New", Courier, monospace;
+      height: 300px;
+    }
+  }
+}
+
+.easy-edit-inline-wrapper {
+  .easy-edit-component-wrapper {
+    width: 100%;
+    display: block;
+    margin-bottom: var(--spacing-xsmall);
+
+    input,
+    textarea,
+    select {
+      width: 100%;
+    }
+
+    select {
+      padding: var(--spacing-xxsmall);
+      border-color: var(--color-disabled);
+      border-radius: var(--spacing-xxsmall);
+    }
+  }
+
+  .easy-edit-checkbox-label {
+    cursor: pointer;
+    font-size: var(--font-size-body);
+    margin-bottom: var(--spacing-xxsmall);
+
+    input[type="checkbox"] {
+      margin-right: 8px;
+    }
+  }
+
+  .easy-edit-button-wrapper {
+    width: 100%;
+    display: flex;
+    justify-content: end;
+    margin-top: 16px;
+
+    .easy-edit-button {
+      padding-right: var(--spacing-xsmall);
+      padding-left: var(--spacing-xsmall);
+
+      &[name="save"] {
+        background-color: var(--color-confirmed);
+        color: var(--color-surface);
+      }
+
+      &[name="cancel"] {
+        background-color: var(--color-error);
+        color: var(--color-surface);
+      }
+    }
+  }
+}

package/src/AppModal/AppModal.tsx

@@ -0,0 +1,93 @@
+import { Box, Fade, Modal } from '@mui/material';
+import cx from 'classnames';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Icon } from 'tycho-storybook';
+import './style.scss';
+
+type Props = {
+  children: React.ReactNode;
+  title: string;
+  close: () => void;
+  confirm?: () => void;
+  cancel?: () => void;
+  subtitle?: string;
+  className?: string;
+  disableConfirm?: boolean;
+  hideFooter?: boolean;
+  disableCancel?: boolean;
+  disableClose?: boolean;
+  confirmLabel?: string;
+  closeLabel?: string;
+  onEntered?: () => void;
+};
+
+export default function AppModal({
+  children,
+  title,
+  subtitle,
+  className,
+  close,
+  confirm,
+  disableConfirm,
+  hideFooter,
+  disableClose,
+  disableCancel,
+  confirmLabel,
+  closeLabel,
+  cancel,
+  onEntered,
+}: Props) {
+  const { t } = useTranslation('common');
+
+  const getClassNames = cx('modal-container', className);
+
+  return (
+    <Modal open>
+      <Fade in onEntered={() => onEntered && onEntered()}>
+        <Box className={getClassNames} sx={style}>
+          <div className="header">
+            <div className="titles">
+              <span className="title">{title}</span>
+              {subtitle && <span className="subtitle">{subtitle}</span>}
+            </div>
+            {!disableClose && (
+              <Icon name="close" onClick={close} className="pointer" />
+            )}
+          </div>
+          <div className="body">{children}</div>
+          {!hideFooter ? (
+            <div className="footer">
+              {!disableCancel && (
+                <Button
+                  onClick={cancel || close}
+                  text={closeLabel || t('button.cancel')}
+                  color="danger"
+                />
+              )}
+              {confirm && (
+                <Button
+                  onClick={confirm}
+                  disabled={disableConfirm}
+                  text={confirmLabel || t('button.confirm')}
+                />
+              )}
+            </div>
+          ) : null}
+        </Box>
+      </Fade>
+    </Modal>
+  );
+}
+
+const style = {
+  position: 'absolute',
+  top: '40%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '50%',
+  maxWidth: '1080px',
+  borderRadius: 'var(--radius-200)',
+  boxShadow: 24,
+  bgcolor: 'var(--background-default)',
+};

package/src/AppModal/AppModalConfirm.tsx

@@ -0,0 +1,62 @@
+import { Box, Modal } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Button, Icon } from 'tycho-storybook';
+import './style.scss';
+
+type Props = {
+  title: string;
+  subtitle: string;
+  onClose: () => void;
+  onConfirm: () => void;
+  closeLabel?: string;
+  confirmLabel?: string;
+};
+
+export default function AppModalConfirm({
+  title,
+  subtitle,
+  onClose,
+  onConfirm,
+  closeLabel,
+  confirmLabel,
+}: Props) {
+  const { t } = useTranslation('header');
+
+  return (
+    <Modal open>
+      <Box className="modal-container modal-remove" sx={style}>
+        <div className="body">
+          <Icon name="warning" size="large" filled />
+          <div className="texts">
+            <span className="title">{title}</span>
+            <span className="subtitle">{subtitle}</span>
+          </div>
+        </div>
+
+        <div className="footer">
+          <Button
+            onClick={onClose}
+            text={closeLabel || t('modal.button.cancel')}
+            mode="tonal"
+          />
+          <Button
+            onClick={onConfirm}
+            text={confirmLabel || t('modal.button.confirm')}
+          />
+        </div>
+      </Box>
+    </Modal>
+  );
+}
+
+const style = {
+  position: 'absolute',
+  top: '40%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '30%',
+  maxWidth: '580px',
+  borderRadius: 'var(--radius-200)',
+  boxShadow: 24,
+  bgcolor: 'var(--background-default)',
+};

package/src/AppModal/AppModalRemove.tsx

@@ -0,0 +1,51 @@
+import { Box, Modal } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { Button, Icon } from 'tycho-storybook';
+import './style.scss';
+
+type Props = {
+  title: string;
+  subtitle: string;
+  onClose: () => void;
+  onConfirm: () => void;
+};
+
+export default function AppModalRemove({
+  title,
+  subtitle,
+  onClose,
+  onConfirm,
+}: Props) {
+  const { t } = useTranslation('common');
+
+  return (
+    <Modal open>
+      <Box className="modal-container modal-remove" sx={style}>
+        <div className="body">
+          <Icon name="warning" size="large" filled />
+          <div className="texts">
+            <span className="title">{title}</span>
+            <span className="subtitle">{subtitle}</span>
+          </div>
+        </div>
+
+        <div className="footer">
+          <Button onClick={onClose} text={t('button.cancel')} mode="tonal" />
+          <Button onClick={onConfirm} text={t('button.confirm')} />
+        </div>
+      </Box>
+    </Modal>
+  );
+}
+
+const style = {
+  position: 'absolute',
+  top: '40%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '30%',
+  maxWidth: '580px',
+  borderRadius: 'var(--radius-200)',
+  boxShadow: 24,
+  bgcolor: 'var(--background-default)',
+};

package/src/AppModal/index.tsx

@@ -0,0 +1,3 @@
+import AppModal from './AppModal';
+
+export default AppModal;