tycho-components 0.0.4 → 0.0.5-SNAPSHOT

package/package.json

@@ -1,39 +1,50 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.0.4",
-  "main": "src/index.ts",
+  "version": "0.0.5-SNAPSHOT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist/"
+  ],
   "dependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mui/icons-material": "6.1.5",
-    "@mui/material": "6.1.5",
-    "axios": "^1.7.7"
+    "axios": "^1.7.7",
+    "classnames": "^2.5.1",
+    "date-fns": "^2.29.1",
+    "date-fns-tz": "^1.3.6",
+    "js-cookie": "^3.0.5",
+    "react-colorful": "^5.6.1",
+    "react-easy-edit": "^2.0.0",
+    "react-loading": "^2.0.3",
+    "react-switch": "^7.1.0",
+    "react-toastify": "^9.1.3",
+    "tycho-storybook": "0.1.2-SNAPSHOT-3"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "@hookform/resolvers": "^3.1.1",
+    "@mui/icons-material": "6.1.5",
+    "@mui/material": "6.1.5",
     "bootstrap": "^5.3.1",
-    "classnames": "^2.5.1",
-    "date-fns": "^2.29.1",
-    "date-fns-tz": "^1.3.6",
     "i18next": "^23.3.0",
     "i18next-browser-languagedetector": "^7.1.0",
-    "js-cookie": "^3.0.5",
     "react": ">=17 <19",
     "react-bootstrap": "^2.8.0",
-    "react-colorful": "^5.6.1",
     "react-dom": ">=17 <19",
-    "react-easy-edit": "^2.0.0",
     "react-hook-form": "^7.45.2",
     "react-i18next": "^13.0.2",
-    "react-loading": "^2.0.3",
-    "react-switch": "^7.1.0",
-    "react-toastify": "^9.1.3",
-    "tycho-storybook": "0.0.33",
     "yup": "^1.2.0"
   },
   "devDependencies": {
@@ -51,7 +62,6 @@
     "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "@vitejs/plugin-react": "^4.1.1",
     "eslint": "^8.57.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.1",
@@ -59,14 +69,13 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.5.3",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0",
-    "vite-plugin-checker": "^0.6.1",
-    "vite-plugin-svgr": "^3.2.0",
-    "vitest": "^0.33.0"
+    "typescript": "^5.7.3"
   },
   "scripts": {
     "start": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "build": "tsc && node scripts/copy-package-json.js && npm run copy-css",
+    "build-publish": "tsc && npm run copy-css",
+    "copy-css": "node scripts/copy-css.js"
   }
 }

package/.eslintignore

@@ -1,2 +0,0 @@
-**/.eslintrc.*
-**/*.config.ts

package/.eslintrc.cjs

@@ -1,28 +0,0 @@
-/* eslint-env node */
-
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
-    "plugin:react-hooks/recommended",
-  ],
-  parser: "@/typescript-eslint/parser",
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-    project: true,
-    tsconfigRootDir: __dirname,
-  },
-  plugins: ["react-refresh"],
-  rules: {
-    "react-refresh/only-export-components": [
-      "warn",
-      { allowConstantExport: true },
-    ],
-    "@/typescript-eslint/no-non-null-assertion": "off",
-    "@/typescript-eslint/no-empty-function": "off",
-  },
-};

package/.eslintrc.json

@@ -1,31 +0,0 @@
-{
-  "root": true,
-  "env": {
-    "browser": true,
-    "es2020": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
-    "plugin:react-hooks/recommended",
-    "plugin:storybook/recommended"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module",
-    "project": "./tsconfig.json",
-    "tsconfigRootDir": "."
-  },
-  "plugins": ["react-refresh"],
-  "rules": {
-    "react-hooks/exhaustive-deps": "off",
-    "react-refresh/only-export-components": [
-      "warn",
-      { "allowConstantExport": true }
-    ],
-    "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/no-empty-function": "off"
-  }
-}

package/.gitlab-ci.yml

@@ -1,14 +0,0 @@
-stages:
-  - publish
-
-publish_npm:
-  image: node:20
-  stage: publish
-  only:
-    - main
-  script:
-    - echo "//registry.npmjs.org/:_authToken=$NPM_PUBLISH_TOKEN" > .npmrc
-    - npm install
-    - npm publish
-  variables:
-    NPM_CONFIG_LOGLEVEL: info

package/.storybook/main.ts

@@ -1,32 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-
-import { join, dirname } from 'path';
-
-/**
- * This function is used to resolve the absolute path of a package.
- * It is needed in projects that use Yarn PnP or are set up within a monorepo.
- */
-function getAbsolutePath(value: string): any {
-  return dirname(require.resolve(join(value, 'package.json')));
-}
-const config: StorybookConfig = {
-  stories: [
-    '../stories/**/*.mdx',
-    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
-    '../**/**/*.stories.@(js|jsx|mjs|ts|tsx)',
-  ],
-  addons: [
-    getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@storybook/addon-onboarding'),
-    getAbsolutePath('@storybook/addon-interactions'),
-  ],
-  framework: {
-    name: getAbsolutePath('@storybook/react-vite'),
-    options: {},
-  },
-  docs: {
-    autodocs: 'tag',
-  },
-};
-export default config;

package/.storybook/preview-head.html

@@ -1,4 +0,0 @@
-<!-- <link
-  href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,200,0..1,0&display=swap"
-  rel="stylesheet"
-/> -->

package/.storybook/preview.css

@@ -1,6 +0,0 @@
-.docs-story {
-  > div:first-child {
-    height: 200px;
-    overflow: auto;
-  }
-}

package/.storybook/preview.tsx

@@ -1,29 +0,0 @@
-import type { Preview } from '@storybook/react';
-import { CommonProvider } from '../src/configs/CommonContext';
-import commonLocalization from '../src/configs/Localization';
-import '../src/styles/bootstrap.min.css';
-import '../src/styles/main.scss';
-import './preview.css';
-
-commonLocalization();
-
-const preview: Preview = {
-  parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <CommonProvider>
-        <Story />
-      </CommonProvider>
-    ),
-  ],
-};
-
-export default preview;

package/src/AppColorpicker/AppColorpicker.tsx

@@ -1,69 +0,0 @@
-import { FieldValue } from '../AppEditable/FormFieldOption';
-import { useEffect, useState } from 'react';
-import { HexColorPicker } from 'react-colorful';
-import { useTranslation } from 'react-i18next';
-import FormField from '../AppEditable/FormField';
-import './style.scss';
-
-const defaultColor = '#FFFFFF';
-
-type AppColorpickerProps = {
-  item: Record<string, unknown>;
-  field: FormField;
-  handleSave: (value: FieldValue, field: FormField) => void;
-};
-
-export default function AppColorpicker({
-  field,
-  item,
-  handleSave,
-}: AppColorpickerProps) {
-  const { t } = useTranslation('common');
-  const [openColor, setOpenColor] = useState(false);
-  const [color, setColor] = useState(defaultColor);
-
-  useEffect(() => {
-    if (item[field.name]) setColor(item[field.name] as string);
-    else setColor(defaultColor);
-  }, [item]);
-
-  return (
-    <div className="color-picker-container">
-      <div
-        className="swatch"
-        style={{ backgroundColor: color }}
-        onClick={() => setOpenColor(!openColor)}
-        onKeyDown={() => setOpenColor(!openColor)}
-        role="link"
-        aria-label="open color picker"
-        tabIndex={0}
-      />
-      {openColor && (
-        <>
-          <HexColorPicker color={color} onChange={setColor} />
-          <div className="buttons">
-            <button
-              type="button"
-              className="easy-edit-button"
-              name="save"
-              onClick={() => {
-                handleSave(color, field);
-                setOpenColor(false);
-              }}
-            >
-              {t('button.confirm')}
-            </button>
-            <button
-              type="button"
-              className="easy-edit-button"
-              name="cancel"
-              onClick={() => setOpenColor(false)}
-            >
-              {t('button.cancel')}
-            </button>
-          </div>
-        </>
-      )}
-    </div>
-  );
-}

package/src/AppEditable/AppEditable.tsx

@@ -1,280 +0,0 @@
-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

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

package/src/AppEditable/FormField.ts

@@ -1,26 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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;
-};