@webinex/chatify 1.0.3-rc3 → 2.0.0-alpha10

package/src/ui/customize.tsx

@@ -1,45 +1,51 @@
-import React, { FC, PropsWithChildren, useContext } from 'react';
-
-export type Customizable<TComponent extends React.ComponentType<any>> = TComponent & {
-  Component: TComponent;
-};
-
-const CustomizeContext = React.createContext<CustomizeProviderValue>(null!);
-
-export interface CustomizeProviderValue {
-  [key: string]: React.ComponentType<any> | null;
-}
-
-export function CustomizeProvider(props: PropsWithChildren<{ value: CustomizeProviderValue }>) {
-  const { children, value } = props;
-  return <CustomizeContext.Provider value={value}>{children}</CustomizeContext.Provider>;
-}
-
-function useCustom<TComponent extends React.ComponentType>(key: string): TComponent | undefined | null {
-  const value = useContext(CustomizeContext);
-  return value[key] as TComponent | null | undefined;
-}
-
-export function customize<TComponent extends React.ComponentType<any>>(
-  key: string,
-  Component: TComponent,
-): TComponent extends React.ComponentType<infer X> ? Customizable<React.ComponentType<X>> : never {
-  const Result: FC<any> = React.forwardRef<TComponent, any>((props: any, forwardRef) => {
-    const Custom = useCustom(key);
-
-    if (Custom === null) {
-      return null;
-    }
-
-    if (Custom) {
-      return <Custom {...props} ref={forwardRef} />;
-    }
-
-    return <Component {...props} ref={forwardRef} />;
-  });
-
-  Component.displayName = Component.displayName || key;
-  Result.displayName = 'Customizable.' + Component.displayName;
-
-  return Object.assign(Result, { key, Component }) as any;
-}
+import React, { FC, useContext } from 'react';
+
+export type Customizable<TComponent extends React.ComponentType<any>> = TComponent & {
+  Component: TComponent;
+  key: string;
+};
+
+export const CustomizeContext = React.createContext<Record<string, any>>(null!);
+
+export function useCustomizeContext<TValue>() {
+  return useContext(CustomizeContext) as TValue;
+}
+
+function useCustom<TComponent extends React.ComponentType>(key: string): TComponent | undefined | null {
+  const value = useContext(CustomizeContext);
+  return value ? (value[key] as TComponent | null | undefined) : undefined;
+}
+
+export function useCustomize<TCustom extends Customizable<React.ComponentType<any>>>(custom: TCustom) {
+  const Custom = useCustom<TCustom['Component']>(custom.key);
+
+  if (Custom == null) {
+    return null;
+  }
+
+  return Custom ?? custom.Component;
+}
+
+export function customize<TComponent extends React.ComponentType<any>>(
+  key: string,
+  Component: TComponent,
+): TComponent extends React.ComponentType<infer X> ? Customizable<React.ComponentType<X>> : never {
+  const Result: FC<any> = React.forwardRef<TComponent, any>((props: any, forwardRef) => {
+    const Custom = useCustom(key);
+
+    if (Custom === null) {
+      return null;
+    }
+
+    if (Custom) {
+      return <Custom {...props} ref={forwardRef} />;
+    }
+
+    return <Component {...props} ref={forwardRef} />;
+  });
+
+  Component.displayName = Component.displayName || key;
+  Result.displayName = 'Customizable.' + Component.displayName;
+
+  return Object.assign(Result, { key, Component }) as any;
+}

package/src/ui/index.ts

@@ -1,11 +1,11 @@
-export * from './Chatify';
-export * from './Avatar';
-export * from './localizer';
-export * from './AddChatButton';
-export * from './Layout/Header';
-export * from './ChatPanel/ChatHeader';
-export * from './ChatPanel/ChatHeaderMembers';
-export * from './ChatList/ChatListItemBox';
-export * from './Message/MessageBox';
-export * from './SystemMessage/SystemMessageBox';
-export * from './Icon';
+import '../styles/index.scss';
+
+export * from './color';
+export * from './customize';
+export * from './Chatify';
+export * from './localizer';
+export * from './Chat';
+export * from './ChatGroup';
+export * from './Conversation';
+export * from './Thread';
+export * from './common';

package/src/ui/localizer.tsx

@@ -1,84 +1,108 @@
-import dayjs from 'dayjs';
-import React, { useContext } from 'react';
-
-export interface Localizer {
-  isToday: (value: string) => boolean;
-  timestamp: (value: string) => string;
-  dateTime: (value: string) => string;
-  system: {
-    chatCreated: () => string;
-    memberAdded: () => string;
-    memberRemoved: () => string;
-    chatNameChanged: (newName: string) => string;
-  };
-  message: {
-    read: () => React.ReactNode;
-    reading: () => React.ReactNode;
-    sending: () => React.ReactNode;
-  };
-  addChat: {
-    title: () => React.ReactNode;
-    name: {
-      label: () => React.ReactNode;
-      required: () => string;
-      max250: () => string;
-    };
-    members: {
-      label: () => React.ReactNode;
-      required: () => string;
-    };
-    submitBtn: () => React.ReactNode;
-  };
-
-  input: {
-    placeholder: () => string;
-  };
-
-  settings: {
-    members: () => string;
-  };
-}
-
-export const LocalizerContext = React.createContext<Localizer>(null!);
-
-export function useLocalizer() {
-  return useContext(LocalizerContext);
-}
-
-export const defaultLocalizer: Localizer = {
-  isToday: (value: string) => dayjs(value).isSame(dayjs(), 'day'),
-  timestamp: (value: string) => dayjs(value).format('HH:mm'),
-  dateTime: (value: string) => dayjs(value).format('DD/MM/YYYY HH:mm'),
-  message: {
-    read: () => 'Read',
-    reading: () => 'Reading...',
-    sending: () => 'Sending...',
-  },
-  addChat: {
-    title: () => 'Add chat',
-    name: {
-      label: () => 'Name',
-      required: () => `Name is required`,
-      max250: () => 'Max 250 characters allowed',
-    },
-    members: {
-      label: () => 'Members',
-      required: () => 'Members is required',
-    },
-    submitBtn: () => 'Submit',
-  },
-  system: {
-    chatCreated: () => 'Chat created',
-    memberAdded: () => 'New member added',
-    memberRemoved: () => 'Member removed',
-    chatNameChanged: (newName: string) => `Chat name changed to '${newName}'`,
-  },
-
-  input: {
-    placeholder: () => 'Start typing (Ctrl/⌘Cmd + Enter to send) ...',
-  },
-
-  settings: {
-    members: () => 'Members',
-  },
-};
+import dayjs from 'dayjs';
+import React, { useContext } from 'react';
+import { SystemMessageText } from '../core';
+
+export interface LocalizerBase {
+  isToday: (value: string) => boolean;
+  timestamp: (value: string) => string;
+  dateTime: (value: string) => string;
+  system: Record<SystemMessageText, (key: SystemMessageText, payload: any | null) => string>;
+  message: {
+    read: () => React.ReactNode;
+    reading: () => React.ReactNode;
+    sending: () => React.ReactNode;
+  };
+  addChat: {
+    title: () => React.ReactNode;
+    name: {
+      label: () => React.ReactNode;
+      required: () => string;
+      max250: () => string;
+    };
+    members: {
+      label: () => React.ReactNode;
+      required: () => string;
+    };
+    submitBtn: () => React.ReactNode;
+  };
+
+  input: {
+    placeholder: () => string;
+  };
+
+  settings: {
+    members: () => string;
+  };
+
+  size: {
+    bytes: (value: number) => string;
+    kb: (value: number) => string;
+    mb: (value: number) => string;
+  };
+
+  chatList: {
+    topShown: (count: number) => string;
+  };
+}
+
+export interface Localizer extends LocalizerBase {}
+
+export const LocalizerContext = React.createContext<Localizer>(null!);
+
+export function useLocalizer() {
+  return useContext(LocalizerContext);
+}
+
+const base: LocalizerBase = {
+  isToday: (value: string) => dayjs(value).isSame(dayjs(), 'day'),
+  timestamp: (value: string) => dayjs(value).format('HH:mm'),
+  dateTime: (value: string) => dayjs(value).format('DD/MM/YYYY HH:mm'),
+  message: {
+    read: () => 'Read',
+    reading: () => 'Reading...',
+    sending: () => 'Sending...',
+  },
+  addChat: {
+    title: () => 'Add chat',
+    name: {
+      label: () => 'Name',
+      required: () => `Name is required`,
+      max250: () => 'Max 250 characters allowed',
+    },
+    members: {
+      label: () => 'Members',
+      required: () => 'Members is required',
+    },
+    submitBtn: () => 'Submit',
+  },
+  system: {
+    'chatify://chat-created': () => 'Chat created',
+    'chatify://member-added': () => 'New member added',
+    'chatify://member-removed': () => 'Member removed',
+    'chatify://chat-name-changed': (_, { newName }: { newName: string }) =>
+      `Chat name changed to '${newName}'`,
+  },
+
+  input: {
+    placeholder: () => 'Start typing... (Press Enter to send, and Shift+Enter to start a new line)',
+  },
+
+  settings: {
+    members: () => 'Members',
+  },
+
+  size: {
+    bytes: (value: number) =>
+      `${value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} bytes`,
+    kb: (value: number) =>
+      `${value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} KB`,
+    mb: (value: number) =>
+      `${value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 2 })} MB`,
+  },
+
+  chatList: {
+    topShown: (count: number) => `Latest active ${count} chat${count !== 1 ? 's' : ''} shown`,
+  },
+};
+
+export const defaultLocalizer: Localizer = base as unknown as Localizer;

package/src/ui/useFormatter.tsx

@@ -0,0 +1,17 @@
+import { useLocalizer } from './localizer';
+
+export function useFormatter() {
+  const localizer = useLocalizer();
+
+  return {
+    size: (value: number) => {
+      if (value < 1024) {
+        return localizer.size.bytes(value);
+      } else if (value < 1024 * 1024) {
+        return localizer.size.kb(value / 1024);
+      } else {
+        return localizer.size.mb(value / 1024 / 1024);
+      }
+    },
+  };
+}