@buerokratt-ria/common-gui-components 0.0.1

package/ui-components/Track/index.tsx

@@ -0,0 +1,57 @@
+import React, { FC, HTMLAttributes, PropsWithChildren } from 'react';
+
+type TrackProps = HTMLAttributes<HTMLDivElement> & {
+    gap?: number;
+    align?: 'left' | 'center' | 'right' | 'stretch';
+    justify?: 'start' | 'between' | 'center' | 'around' | 'end';
+    direction?: 'horizontal' | 'vertical';
+    isMultiline?: boolean;
+}
+
+const alignMap = {
+    left: 'flex-start',
+    center: 'center',
+    right: 'flex-end',
+    stretch: 'stretch',
+};
+
+const justifyMap = {
+    start: 'flex-start',
+    between: 'space-between',
+    center: 'center',
+    around: 'space-around',
+    end: 'flex-end',
+};
+
+const Track: FC<PropsWithChildren<TrackProps>> = (
+    {
+        gap = 0,
+        align = 'center',
+        justify = 'start',
+        direction = 'horizontal',
+        isMultiline = false,
+        children,
+        style,
+        ...rest
+    },
+) => {
+    return (
+        <div
+            className='track'
+            style={{
+                display: 'flex',
+                gap,
+                alignItems: alignMap[align],
+                justifyContent: justifyMap[justify],
+                flexDirection: direction === 'horizontal' ? 'row' : 'column',
+                flexWrap: isMultiline ? 'wrap' : undefined,
+                ...style,
+            }}
+            {...rest}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default Track;

package/ui-components/index.tsx

@@ -0,0 +1,53 @@
+import Button from './Button';
+import Icon from './Icon';
+import Track from './Track';
+import {
+    FormCheckbox,
+    FormCheckboxes,
+    FormDatepicker,
+    FormInput,
+    FormMultiselect,
+    FormRadios,
+    FormSelect,
+    FormTextarea,
+    Switch,
+    SwitchBox,
+} from './FormElements';
+import DataTable from './DataTable';
+import Tooltip from './Tooltip';
+import Toast from './Toast';
+import Card from './Card';
+import Chat from './Chat';
+import OptionMessage from './OptionMessage';
+import ButtonMessage from './ButtonMessage';
+import Drawer from './Drawer';
+import HistoricalChat from './HistoricalChat';
+import Dialog from './Dialog';
+import Label from './Label';
+
+export {
+    Button,
+    Icon,
+    Track,
+    Tooltip,
+    DataTable,
+    FormInput,
+    FormTextarea,
+    FormSelect,
+    FormMultiselect,
+    FormDatepicker,
+    Switch,
+    SwitchBox,
+    Card,
+    OptionMessage,
+    ButtonMessage,
+    Chat,
+    FormCheckboxes,
+    FormRadios,
+    FormCheckbox,
+    Drawer,
+    HistoricalChat,
+    Dialog,
+    Toast,
+    Label
+};

package/utils/constants.ts

@@ -0,0 +1,19 @@
+export const MESSAGE_FILE_SIZE_LIMIT = 10_000_000;
+
+export enum ROLES {
+    ROLE_ADMINISTRATOR = 'ROLE_ADMINISTRATOR',
+    ROLE_SERVICE_MANAGER = 'ROLE_SERVICE_MANAGER',
+    ROLE_CUSTOMER_SUPPORT_AGENT = 'ROLE_CUSTOMER_SUPPORT_AGENT',
+    ROLE_CHATBOT_TRAINER = 'ROLE_CHATBOT_TRAINER',
+    ROLE_ANALYST = 'ROLE_ANALYST',
+    ROLE_UNAUTHENTICATED = 'ROLE_UNAUTHENTICATED',
+}
+
+export enum RUUTER_ENDPOINTS {
+    SEND_ATTACHMENT= '/attachments/add'
+}
+
+export enum AUTHOR_ROLES {
+    END_USER = 'end-user',
+    BACKOFFICE_USER = 'backoffice-user',
+}

package/utils/format-bytes.ts

@@ -0,0 +1,8 @@
+export default function formatBytes(bytes: number, decimals = 0) {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'kB', 'MB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}

package/utils/generateUEID.ts

@@ -0,0 +1,8 @@
+export const generateUEID = () => {
+    let first: string | number = (Math.random() * 46656) | 0;
+    let second: string | number = (Math.random() * 46656) | 0;
+    first = ('000' + first.toString(36)).slice(-3);
+    second = ('000' + second.toString(36)).slice(-3);
+
+    return first + second;
+};

package/utils/local-storage-utils.ts

@@ -0,0 +1,17 @@
+export const getFromLocalStorage = (
+  key: string,
+  initialValue: any = null
+): any => {
+  try {
+    const item = localStorage.getItem(key);
+    return item ? JSON.parse(item) : initialValue;
+  } catch {
+    return initialValue;
+  }
+};
+
+export const setToLocalStorage = (key: string, value: any): void => {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {}
+};

package/utils/parse-utils.ts

@@ -0,0 +1,23 @@
+import { Message, MessageButton } from "../types/message";
+
+export const parseOptions = (message: Message): string[] => {
+    try {
+        if(!message?.options || message.options === '')
+            return [];
+        return JSON.parse(message.options) as string[];
+    } catch(e) {
+        console.error(e);
+        return [];
+    }
+}
+
+export const parseButtons = (message: Message): MessageButton[] => {
+    try {
+        if(!message?.buttons || message.buttons === '')
+            return [];
+        return JSON.parse(message.buttons) as MessageButton[];
+    } catch(e) {
+        console.error(e);
+        return [];
+    }
+}

package/utils/state-management-utils.ts

@@ -0,0 +1,13 @@
+import { CHAT_EVENTS } from "../types/chat";
+import { Message } from "../types/message";
+
+export const isStateChangingEventMessage = (msg: Message): boolean =>
+  msg.event === CHAT_EVENTS.GREETING ||
+  msg.event === CHAT_EVENTS.WAITING_VALIDATION ||
+  msg.event === CHAT_EVENTS.APPROVED_VALIDATION ||
+  msg.event === CHAT_EVENTS.ASK_PERMISSION_IGNORED ||
+  (msg.event === CHAT_EVENTS.CONTACT_INFORMATION && msg.content?.length === 0) ||
+  msg.event === CHAT_EVENTS.ANSWERED ||
+  msg.event === CHAT_EVENTS.READ ||
+  msg.event === CHAT_EVENTS.RATING ||
+  msg.event === CHAT_EVENTS.TERMINATED;

package/vite.config.ts

@@ -0,0 +1,67 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import dts from 'vite-plugin-dts';
+import { join, path } from 'path';
+
+export default defineConfig({
+  plugins: [
+    dts({
+      tsConfigFilePath: join(__dirname, 'tsconfig.lib.json'),
+      // Faster builds by skipping tests. Set this to false to enable type checking.
+      skipDiagnostics: true,
+    }),
+    react(),
+    tsconfigPaths({
+      root: './',
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': `${path.resolve(__dirname, './src')}`,
+      '~@fontsource': path.resolve(__dirname, 'node_modules/@fontsource'),
+    },
+  },
+    css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import "@/styles/main.scss";`,
+      },
+    },
+  },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.tsx',
+      name: 'common-elements',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forgot to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      // external: ['react','react-dom', 'react/jsx-runtime'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+
+    },
+  },
+
+  test: {
+    globals: true,
+    cache: {
+      dir: '../../node_modules/.vitest',
+    },
+    environment: 'jsdom',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+  },
+});