@erxes/ui 0.0.0-stage → 3.2.19-2

package/src/hooks/use-upload.tsx

@@ -0,0 +1,223 @@
+import { useState } from 'react';
+
+import { REACT_APP_API_URL } from 'erxes-ui/utils';
+import { useToast } from 'erxes-ui/hooks';
+
+type FileInfo = {
+  name: string;
+  size: number;
+  type: string;
+  duration: number;
+};
+
+type AfterUploadParams = {
+  status: 'ok' | 'error';
+  response: any;
+  fileInfo: FileInfo;
+};
+
+type AfterReadParams = {
+  result: any;
+  fileInfo: FileInfo;
+};
+
+type UploadProps = {
+  files: FileList | null;
+  beforeUpload?: () => void;
+  afterUpload: (params: AfterUploadParams) => void;
+  afterRead?: (params: AfterReadParams) => void;
+  url?: string;
+  kind?: string;
+  userId?: string;
+  responseType?: string;
+  extraFormData?: Array<{ key: string; value: string }>;
+  maxHeight?: number;
+  maxWidth?: number;
+};
+
+type RemoveProps = {
+  fileName: string;
+  url?: string;
+  afterRemove: ({ status }: { status: string }) => any;
+};
+
+export const useUpload = () => {
+  const [status, setStatus] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const { toast } = useToast();
+
+  const upload = ({
+    files,
+    beforeUpload,
+    afterUpload,
+    afterRead,
+    url = `${REACT_APP_API_URL}/upload-file`,
+    kind = 'main',
+    responseType = 'text',
+    userId,
+    maxHeight = 0,
+    maxWidth = 0,
+  }: UploadProps) => {
+    if (!files || files.length === 0) {
+      return;
+    }
+
+    setIsLoading(true);
+
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      let type = file.type;
+      if (file.name.endsWith('.hwp')) {
+        type = 'application/haansoft-hwp';
+      }
+
+      if (file.name.endsWith('.hwpx')) {
+        type = 'application/haansoft-hwpml';
+      }
+
+      // initiate upload file reader
+      const uploadReader = new FileReader();
+
+      const fileInfo = {
+        name: file.name,
+        size: file.size,
+        type,
+        duration: 0,
+      } as any;
+
+      // const fileUploadMaxSize = REACT_APP_FILE_UPLOAD_MAX_SIZE || 20 * 1024 * 1024;
+      const fileUploadMaxSize: number =
+        Number.parseInt(
+          localStorage.getItem('erxes_env_REACT_APP_FILE_UPLOAD_MAX_SIZE') ||
+            '',
+          10,
+        ) || 20 * 1024 * 1024;
+
+      // skip file that size is more than REACT_APP_FILE_UPLOAD_MAX_SIZE
+      if (fileInfo.size > fileUploadMaxSize) {
+        toast({
+          description: `Your file ${
+            fileInfo.name
+          } size is too large. Upload files less than ${
+            fileUploadMaxSize / 1024 / 1024
+          }MB of size.`,
+        });
+
+        continue;
+      }
+
+      // after read process done
+      uploadReader.onloadend = () => {
+        // before upload
+        if (beforeUpload) {
+          beforeUpload();
+        }
+
+        const formData = new FormData();
+        formData.append('file', file);
+
+        fetch(
+          `${url}?kind=${kind}&maxHeight=${maxHeight}&maxWidth=${maxWidth}`,
+          {
+            method: 'post',
+            body: formData,
+            credentials: 'include',
+            ...(userId ? { headers: { userId } } : {}),
+          },
+        )
+          .then((response: any) => {
+            response[responseType]()
+              .then((text: unknown) => {
+                setIsLoading(false);
+
+                if (!response.ok) {
+                  setStatus(false);
+
+                  return toast({
+                    title: 'Error uploading file',
+                    description:
+                      'Failed to upload file please check your file upload config',
+                    variant: 'destructive',
+                  });
+                }
+
+                setStatus(true);
+
+                // after upload
+                if (afterUpload) {
+                  afterUpload({ status: 'ok', response: text, fileInfo });
+                }
+              })
+              .catch((error: Error) => {
+                setIsLoading(false);
+                setStatus(false);
+                toast({ description: error.message });
+              });
+          })
+          .catch((error) => {
+            setIsLoading(false);
+            setStatus(false);
+            toast({ description: error.message });
+          });
+      };
+
+      // begin read
+      uploadReader.readAsArrayBuffer(file);
+
+      // read as data url for preview purposes
+      const reader = new FileReader();
+
+      reader.onloadend = () => {
+        if (afterRead) {
+          afterRead({ result: reader.result, fileInfo });
+        }
+      };
+
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const remove = ({
+    fileName,
+    url = `${REACT_APP_API_URL}/delete-file`,
+    afterRemove,
+  }: RemoveProps) => {
+    setIsLoading(true);
+
+    fetch(url, {
+      method: 'post',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+      },
+      body: `fileName=${fileName}`,
+      credentials: 'include',
+    })
+      .then((response) => {
+        response
+          .text()
+          .then((text) => {
+            setIsLoading(false);
+
+            const body = text.trim();
+            const removed = response.ok && body === 'ok';
+
+            setStatus(removed);
+
+            return afterRemove({ status: removed ? 'ok' : body || 'error' });
+          })
+          .catch((error) => {
+            setIsLoading(false);
+            setStatus(false);
+            toast({ description: error.message });
+          });
+      })
+      .catch((error) => {
+        setIsLoading(false);
+        setStatus(false);
+        toast({ description: error.message, variant: 'destructive' });
+        afterRemove({ status: 'error' });
+      });
+  };
+
+  return { isLoading, status, upload, remove };
+};

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from './components';
+export * from './constants';
+export * from './hooks';
+export * from './lib';
+export * from './utils';
+export * from './modules';
+export * from './types';
+export * from './state';

package/src/lib/index.ts

@@ -0,0 +1 @@
+export * from './utils';

package/src/lib/utils.ts

@@ -0,0 +1,74 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function fixNum(value: any, p = 4) {
+  const cleanNumber = Number((value ?? '').toString().replace(/,/g, ''));
+
+  if (isNaN(cleanNumber)) {
+    return 0;
+  }
+  const multiplier = 10 ** p;
+
+  const big = Math.round(Number((cleanNumber * multiplier).toFixed(2)));
+
+  return Number((big / multiplier).toFixed(p));
+}
+
+export function displayNum(value: any, p = 2) {
+  const num = fixNum(value, p);
+
+  return new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: p,
+    maximumFractionDigits: p,
+  }).format(num);
+}
+
+/**
+ * Send desktop notification
+ */
+export const sendDesktopNotification = (doc: {
+  title: string;
+  content?: string;
+}) => {
+  const notify = () => {
+    try {
+      const notification = new Notification(doc.title, {
+        body: doc.content,
+        icon: '/favicon.png',
+        dir: 'ltr',
+      });
+
+      notification.onclick = () => {
+        window.focus();
+        notification.close();
+      };
+    } catch (error) {
+      console.error('Notification error:', error);
+    }
+  };
+
+  // Browser doesn't support Notification api
+  if (!('Notification' in window)) {
+    return;
+  }
+
+  if (Notification.permission === 'granted') {
+    return notify();
+  }
+
+  if (Notification.permission !== 'denied') {
+    Notification.requestPermission((permission) => {
+      if (!('permission' in Notification)) {
+        (Notification as any).permission = permission;
+      }
+
+      if (permission === 'granted') {
+        return notify();
+      }
+    });
+  }
+};

package/src/modules/__stories__/IconPicker.stories.tsx

@@ -0,0 +1,19 @@
+import { IconsProvider } from 'erxes-ui/modules/icons';
+import { IconPicker } from '../icons/components/IconPicker';
+
+export const IconPickerStory = () => {
+  return (
+    <IconsProvider>
+      <IconPicker />
+    </IconsProvider>
+  );
+};
+
+export default {
+  title: 'Modules/IconPicker',
+  component: IconPickerStory,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};

package/src/modules/__stories__/RelativeDateDisplay.stories.tsx

@@ -0,0 +1,97 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { RelativeDateDisplay } from 'erxes-ui/modules';
+
+const meta: Meta<typeof RelativeDateDisplay> = {
+  title: 'Modules/Display/RelativeDate',
+  component: RelativeDateDisplay,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RelativeDateDisplay>;
+
+export const Default: Story = {
+  render: () => {
+    const date = new Date(
+      new Date().getTime() - 24 * 60 * 60 * 1000,
+    ).toISOString();
+    return (
+      <div className="space-y-4">
+        <RelativeDateDisplay value={date}>
+          <RelativeDateDisplay.Value value={date} />
+        </RelativeDateDisplay>
+      </div>
+    );
+  },
+};
+
+export const PastDates: Story = {
+  render: () => {
+    const now = new Date();
+
+    // Create dates at different points in the past
+    const minutesAgo = new Date(now.getTime() - 10 * 60 * 1000); // 10 minutes ago
+    const hoursAgo = new Date(now.getTime() - 5 * 60 * 60 * 1000); // 5 hours ago
+    const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000); // 1 day ago
+    const lastWeek = new Date(now.getTime() - 6 * 24 * 60 * 60 * 1000); // 6 days ago
+    const lastMonth = new Date(now.getTime() - 25 * 24 * 60 * 60 * 1000); // 25 days ago
+    const lastYear = new Date(now.getTime() - 400 * 24 * 60 * 60 * 1000); // ~1 year ago
+
+    return (
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <h3 className="text-lg font-medium">Just now (current time)</h3>
+          <RelativeDateDisplay value={now.toISOString()}>
+            <RelativeDateDisplay.Value value={now.toISOString()} />
+          </RelativeDateDisplay>
+        </div>
+
+        <div className="space-y-2">
+          <h3 className="text-lg font-medium">Minutes ago</h3>
+          <RelativeDateDisplay value={minutesAgo.toISOString()}>
+            <RelativeDateDisplay.Value value={minutesAgo.toISOString()} />
+          </RelativeDateDisplay>
+        </div>
+
+        <div className="space-y-2">
+          <h3 className="text-lg font-medium">Hours ago</h3>
+          <RelativeDateDisplay value={hoursAgo.toISOString()}>
+            <RelativeDateDisplay.Value value={hoursAgo.toISOString()} />
+          </RelativeDateDisplay>
+        </div>
+
+        <div className="space-y-2">
+          <h3 className="text-lg font-medium">Yesterday</h3>
+          <RelativeDateDisplay value={yesterday.toISOString()}>
+            <RelativeDateDisplay.Value value={yesterday.toISOString()} />
+          </RelativeDateDisplay>
+        </div>
+
+        <div className="space-y-2">
+          <h3 className="text-lg font-medium">Last week</h3>
+          <RelativeDateDisplay value={lastWeek.toISOString()}>
+            <RelativeDateDisplay.Value value={lastWeek.toISOString()} />
+          </RelativeDateDisplay>
+        </div>
+
+        <div className="space-y-2">
+          <h3 className="text-lg font-medium">Last month</h3>
+          <RelativeDateDisplay value={lastMonth.toISOString()}>
+            <RelativeDateDisplay.Value value={lastMonth.toISOString()} />
+          </RelativeDateDisplay>
+        </div>
+
+        <div className="space-y-2">
+          <h3 className="text-lg font-medium">Last year</h3>
+          <RelativeDateDisplay value={lastYear.toISOString()}>
+            <RelativeDateDisplay.Value value={lastYear.toISOString()} />
+          </RelativeDateDisplay>
+        </div>
+      </div>
+    );
+  },
+};

package/src/modules/__stories__/blocks.stories.tsx

@@ -0,0 +1,132 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Editor, BlockEditorReadOnly } from 'erxes-ui/modules';
+import { useState } from 'react';
+
+const meta: Meta<typeof Editor> = {
+  title: 'Modules/Blocks',
+  component: Editor,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Editor>;
+
+export const Default: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [content, setContent] = useState('');
+
+    return (
+      <div className=" ">
+        <div className="space-y-2">
+          <h3 className="text-lg font-medium">Block Editor</h3>
+          <Editor
+            onChange={setContent}
+            scope="block-editor"
+            className="min-h-[200px] w-[600px]"
+          />
+        </div>
+
+        {content && (
+          <div className="space-y-2">
+            <h3 className="text-lg font-medium">Preview (Read Only)</h3>
+            <div className="p-4 border border-border rounded-md">
+              <BlockEditorReadOnly content={content} />
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  },
+};
+
+export const ReadOnly: Story = {
+  render: () => {
+    const sampleContent = JSON.stringify([
+      {
+        id: '1',
+        type: 'paragraph',
+        props: {
+          textColor: 'default',
+          backgroundColor: 'default',
+          textAlignment: 'left',
+        },
+        content: [
+          {
+            type: 'text',
+            text: 'This is a read-only block editor view.',
+            styles: {},
+          },
+        ],
+        children: [],
+      },
+      {
+        id: '2',
+        type: 'heading',
+        props: {
+          textColor: 'default',
+          backgroundColor: 'default',
+          textAlignment: 'left',
+          level: 2,
+        },
+        content: [
+          {
+            type: 'text',
+            text: 'Sample Heading',
+            styles: {
+              bold: true,
+            },
+          },
+        ],
+        children: [],
+      },
+      {
+        id: '3',
+        type: 'bulletListItem',
+        props: {
+          textColor: 'default',
+          backgroundColor: 'default',
+          textAlignment: 'left',
+        },
+        content: [
+          {
+            type: 'text',
+            text: 'List item one',
+            styles: {},
+          },
+        ],
+        children: [],
+      },
+      {
+        id: '4',
+        type: 'bulletListItem',
+        props: {
+          textColor: 'default',
+          backgroundColor: 'default',
+          textAlignment: 'left',
+        },
+        content: [
+          {
+            type: 'text',
+            text: 'List item two',
+            styles: {},
+          },
+        ],
+        children: [],
+      },
+    ]);
+
+    return (
+      <div className="w-full max-w-3xl space-y-4">
+        <h3 className="text-lg font-medium">Read Only Block Editor</h3>
+        <div className="p-4 border border-border rounded-md">
+          <BlockEditorReadOnly content={sampleContent} />
+        </div>
+      </div>
+    );
+  },
+};

package/src/modules/__stories__/currencyDisplay.stories.tsx

@@ -0,0 +1,78 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CurrencyDisplay, CurrencyFormatedDisplay } from 'erxes-ui/modules';
+import { CurrencyCode } from 'erxes-ui/types';
+
+const meta: Meta<typeof CurrencyDisplay> = {
+  title: 'Modules/Display/Currency',
+  component: CurrencyDisplay,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CurrencyDisplay>;
+
+export const Default: Story = {
+  args: {
+    code: CurrencyCode.USD,
+    variant: 'icon',
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    code: CurrencyCode.EUR,
+    variant: 'label',
+  },
+};
+
+export const WithCode: Story = {
+  args: {
+    code: CurrencyCode.GBP,
+    variant: 'code',
+  },
+};
+
+export const FormattedCurrency: StoryObj<typeof CurrencyFormatedDisplay> = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <h3 className="text-lg font-medium">Currency with amount</h3>
+        <CurrencyFormatedDisplay
+          currencyValue={{
+            amountMicros: 1250000000,
+            currencyCode: CurrencyCode.USD,
+          }}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <h3 className="text-lg font-medium">Zero amount</h3>
+        <CurrencyFormatedDisplay
+          currencyValue={{
+            amountMicros: 0,
+            currencyCode: CurrencyCode.EUR,
+          }}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <h3 className="text-lg font-medium">No currency code</h3>
+        <CurrencyFormatedDisplay
+          currencyValue={{
+            currencyCode: CurrencyCode.USD,
+            amountMicros: 5000000,
+          }}
+        />
+      </div>
+
+      <div className="space-y-2">
+        <h3 className="text-lg font-medium">Null value</h3>
+        <CurrencyFormatedDisplay currencyValue={null} />
+      </div>
+    </div>
+  ),
+};

package/src/modules/__stories__/icons.stories.tsx

@@ -0,0 +1,29 @@
+import { ALL_ICONS } from 'erxes-ui/modules/icons/components/TablerIcons';
+import { IconsProvider } from '../icons';
+import { IconComponent } from '../icons/components/IconComponent';
+import { StoryObj } from '@storybook/react';
+
+export const IconStory = ({ name }: { name?: keyof typeof ALL_ICONS }) => (
+  <IconsProvider>
+    <IconComponent name={name} />
+  </IconsProvider>
+);
+
+export default {
+  title: 'Modules/Icons',
+  component: IconStory,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof IconStory>;
+
+export const Default: Story = {};
+
+export const WithCustomIcon: Story = {
+  args: {
+    name: 'IconAlertCircle',
+  },
+};