Types and icons cleanup; (#196)

* Types and icons cleanup;

* What was I thinking renaming with casing only...

packages/chat-app/src/app/App.tsx

@@ -133,4 +133,4 @@ const RootRoute = ({ children }: { children: ReactNode }) => {
   return <>{children}</>;
 };
 
-export default App;
+export { App };

packages/chat-app/src/components/Auth/LoginBox/LoginBox.tsx

@@ -1,5 +1,6 @@
 import { useYouAuthAuthorization } from '../../../hooks/auth/useAuth';
-import { IS_DARK_CLASSNAME, Loader, LoadingBlock } from '@youfoundation/common-app';
+import { IS_DARK_CLASSNAME, LoadingBlock } from '@youfoundation/common-app';
+import { Loader } from '@youfoundation/common-app/icons';
 import { stringifyToQueryParams } from '@youfoundation/js-lib/helpers';
 import { Helmet } from 'react-helmet-async';
 import { useQuery } from '@tanstack/react-query';

packages/chat-app/src/components/Chat/Composer/ChatComposer.tsx

@@ -4,10 +4,7 @@ import {
   FileSelector,
   VolatileInput,
   ActionButton,
-  Times,
-  PaperPlane,
   getImagesFromPasteEvent,
-  Plus,
   useErrors,
   t,
   ellipsisAtMaxChar,
@@ -24,6 +21,7 @@ import { useState, useEffect, useRef } from 'react';
 import { EmbeddedMessage } from '../Detail/EmbeddedMessage';
 import { getNewId, isTouchDevice } from '@youfoundation/js-lib/helpers';
 import { LinkPreview } from '@youfoundation/js-lib/media';
+import { Plus, PaperPlane, Times } from '@youfoundation/common-app/icons';
 
 const HUNDRED_MEGA_BYTES = 100 * 1024 * 1024;
 const CHAT_DRAFTS_KEY = 'CHAT_LOCAL_DRAFTS';

packages/chat-app/src/components/Chat/Composer/ChatReactionComposer.tsx

@@ -1,5 +1,5 @@
+import { Lol } from '@youfoundation/common-app/icons';
 import {
-  Lol,
   ReactionsBar,
   t,
   useDotYouClient,

packages/chat-app/src/components/Chat/Conversations/Item/ConversationItem.tsx

@@ -1,5 +1,4 @@
 import {
-  Persons,
   ConnectionImage,
   ConnectionName,
   ellipsisAtMaxChar,
@@ -8,6 +7,7 @@ import {
   OwnerName,
   LoadingBlock,
 } from '@youfoundation/common-app';
+import { Persons } from '@youfoundation/common-app/icons';
 import { ReactNode, useEffect, useMemo, useState } from 'react';
 import { useChatMessages } from '../../../../hooks/chat/useChatMessages';
 import { ChatDeletedArchivalStaus, ChatMessage } from '../../../../providers/ChatProvider';

packages/chat-app/src/components/Chat/Conversations/Sidenav/ConversationsSidenav.tsx

@@ -3,15 +3,12 @@ import {
   ActionLink,
   ErrorBoundary,
   Input,
-  MagnifyingGlass,
-  Persons,
-  Plus,
   SubtleMessage,
-  Times,
   t,
   useAllContacts,
   useDotYouClient,
 } from '@youfoundation/common-app';
+import { MagnifyingGlass, Persons, Plus, Times } from '@youfoundation/common-app/icons';
 
 import { useEffect, useState } from 'react';
 import { ContactFile } from '@youfoundation/js-lib/network';

packages/chat-app/src/components/Chat/Conversations/Sidenav/NavHeader.tsx

@@ -1,4 +1,5 @@
-import { ActionLink, Plus, t } from '@youfoundation/common-app';
+import { ActionLink, t } from '@youfoundation/common-app';
+import { Plus } from '@youfoundation/common-app/icons';
 import { ROOT_PATH as CHAT_ROOT } from '../../../../app/App';
 
 export const NavHeader = ({ isOnline }: { isOnline: boolean }) => {

packages/chat-app/src/components/Chat/Conversations/Sidenav/NewConversation.tsx

@@ -4,12 +4,11 @@ import {
   ActionLink,
   ErrorBoundary,
   Input,
-  Persons,
   SubtleMessage,
-  Times,
   t,
   useAllContacts,
 } from '@youfoundation/common-app';
+import { Persons, Times } from '@youfoundation/common-app/icons';
 import { useNavigate } from 'react-router-dom';
 import { ROOT_PATH as CHAT_ROOT } from '../../../../app/App';
 import { ConversationListItemWrapper } from '../Item/ConversationItem';

packages/chat-app/src/components/Chat/Conversations/Sidenav/NewConversationGroup.tsx

@@ -1,16 +1,15 @@
 import { useState } from 'react';
 import {
   ActionButton,
-  Arrow,
   ConnectionImage,
   ConnectionName,
   ErrorBoundary,
   Input,
   Label,
-  Times,
   t,
   useAllContacts,
 } from '@youfoundation/common-app';
+import { Arrow, Times } from '@youfoundation/common-app/icons';
 import { useNavigate } from 'react-router-dom';
 import { ContactFile } from '@youfoundation/js-lib/network';
 import { useConversation } from '../../../../hooks/chat/useConversation';

packages/chat-app/src/components/Chat/Detail/ChatDeliveryIndicator.tsx

@@ -1,4 +1,5 @@
-import { useDotYouClient, SubtleCheck, Clock, Times, t } from '@youfoundation/common-app';
+import { useDotYouClient, t } from '@youfoundation/common-app';
+import { Clock, SubtleCheck, Times } from '@youfoundation/common-app/icons';
 import { HomebaseFile } from '@youfoundation/js-lib/core';
 import { ChatMessage, ChatDeliveryStatus } from '../../../providers/ChatProvider';
 

packages/chat-app/src/components/Chat/Detail/ChatInfo.tsx

@@ -2,17 +2,12 @@ import { createPortal } from 'react-dom';
 import { ApiType, DotYouClient, HomebaseFile } from '@youfoundation/js-lib/core';
 import {
   ActionButton,
-  Arrow,
   ConnectionImage,
   ConnectionName,
   DialogWrapper,
-  House,
   Input,
   OwnerImage,
   OwnerName,
-  Pencil,
-  Persons,
-  Save,
   t,
   useDotYouClient,
   usePortal,
@@ -23,6 +18,7 @@ import {
 } from '../../../providers/ConversationProvider';
 import { useEffect, useState } from 'react';
 import { useConversation } from '../../../hooks/chat/useConversation';
+import { Persons, House, Save, Pencil, Arrow } from '@youfoundation/common-app/icons';
 
 export const ChatInfo = ({
   conversation,

packages/chat-app/src/components/Chat/Detail/ChatMessageItem.tsx

@@ -2,7 +2,6 @@ import {
   useDotYouClient,
   ConnectionImage,
   ConnectionName,
-  Block,
   t,
   getOdinIdColor,
   useDarkMode,
@@ -20,6 +19,7 @@ import { EmbeddedMessageWithId } from './EmbeddedMessage';
 import { useParams } from 'react-router-dom';
 import { ChatReactionComposer } from '../Composer/ChatReactionComposer';
 import { ChatReactions } from './ChatReactions';
+import { Block } from '@youfoundation/common-app/icons';
 
 export const ChatMessageItem = ({
   msg,

packages/chat-app/src/components/Chat/Detail/ContextMenu.tsx

@@ -5,9 +5,9 @@ import {
   ActionGroupOptionProps,
   t,
   ActionGroup,
-  ChevronDown,
   ErrorNotification,
 } from '@youfoundation/common-app';
+import { ChevronDown } from '@youfoundation/common-app/icons';
 import { HomebaseFile } from '@youfoundation/js-lib/core';
 import { ChatDeliveryStatus, ChatMessage } from '../../../providers/ChatProvider';
 import {

packages/chat-app/src/components/Chat/Detail/Media/ChatMedia.tsx

@@ -10,11 +10,11 @@ import { CHAT_LINKS_PAYLOAD_KEY, ChatMessage } from '../../../../providers/ChatP
 import { ChatDrive } from '../../../../providers/ConversationProvider';
 import {
   BoringFile,
-  Triangle,
   useDarkMode,
   LinkPreviewItem,
   useDotYouClientContext,
 } from '@youfoundation/common-app';
+import { Triangle } from '@youfoundation/common-app/icons';
 import { useNavigate } from 'react-router-dom';
 import { useMemo, useState } from 'react';
 

packages/chat-app/src/components/Chat/Detail/Media/ChatMediaGallery.tsx

@@ -4,14 +4,12 @@ import { HomebaseFile } from '@youfoundation/js-lib/core';
 import { ChatMessage } from '../../../../providers/ChatProvider';
 import {
   ActionButton,
-  Arrow,
-  ArrowLeft,
   BoringFile,
-  Times,
   VideoClickToLoad,
   usePortal,
   useDotYouClientContext,
 } from '@youfoundation/common-app';
+import { Arrow, ArrowLeft, Times } from '@youfoundation/common-app/icons';
 import { ChatDrive } from '../../../../providers/ConversationProvider';
 import { OdinImage } from '@youfoundation/ui-lib';
 import { useNavigate, useParams } from 'react-router-dom';

packages/chat-app/src/components/ui/Layout/Layout.tsx

@@ -27,7 +27,7 @@ const SharedStyleTag = () => (
 const SHADED_BG = 'bg-page-background text-foreground';
 const NOT_SHADED_BG = 'bg-white dark:bg-black';
 
-const Layout: FC<LayoutProps> = ({ children, noShadedBg }) => {
+export const Layout: FC<LayoutProps> = ({ children, noShadedBg }) => {
   const [searchParams] = useSearchParams();
   const uiSetting = searchParams.get('ui');
 
@@ -76,5 +76,3 @@ export const NoLayout: FC<LayoutProps> = ({ children, noShadedBg }) => {
     </>
   );
 };
-
-export default Layout;

packages/chat-app/src/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
-import App from './app/App';
+import { App } from './app/App';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(

packages/chat-app/src/templates/Auth/Auth.tsx

@@ -1,10 +1,11 @@
 import { Helmet } from 'react-helmet-async';
 import { Navigate, useSearchParams } from 'react-router-dom';
 import { useAuth } from '../../hooks/auth/useAuth';
-import Layout from '../../components/ui/Layout/Layout';
+
 import { DialogWrapper, Alert, t } from '@youfoundation/common-app';
 import { AutoAuthorize, LoginBox } from '../../components/Auth/LoginBox/LoginBox';
 import { ROOT_PATH } from '../../app/App';
+import { Layout } from '../../components/ui/Layout/Layout';
 
 const Auth = () => {
   const isAutoAuthorize = window.location.pathname.startsWith(ROOT_PATH);

packages/chat-app/src/templates/Chat/ChatDetail.tsx

@@ -1,19 +1,17 @@
 import {
   ActionGroup,
   ActionLink,
-  ChevronDown,
-  ChevronLeft,
   ConnectionImage,
   ConnectionName,
   ErrorBoundary,
   ErrorNotification,
   OwnerImage,
   OwnerName,
-  Persons,
   t,
   useDotYouClient,
   useIsConnected,
 } from '@youfoundation/common-app';
+import { ChevronDown, ChevronLeft, Persons } from '@youfoundation/common-app/icons';
 import {
   ApiType,
   DotYouClient,

packages/common-app/icons.ts

@@ -0,0 +1 @@
+export * from './src/ui/Icons/index';

packages/common-app/package.json

@@ -9,6 +9,16 @@
   "type": "module",
   "module": "./index.ts",
   "types": "./index.ts",
+  "exports": {
+    ".": {
+      "import": "./index.ts",
+      "require": "./index.ts"
+    },
+    "./icons": {
+      "import": "./icons.ts",
+      "require": "./icons.ts"
+    }
+  },
   "sideEffects": false,
   "scripts": {
     "lint": "eslint src/*"

packages/common-app/src/channels/ChannelItem.tsx

@@ -21,8 +21,8 @@ import { Label } from '../form/Label';
 import { Input } from '../form/Input';
 import { Textarea } from '../form/Textarea';
 import { CheckboxToggle } from '../form/CheckboxToggle';
-import { Pencil } from '../ui/Icons/Pencil';
-import { ActionLink, Alert, Exclamation, ExternalLink } from '../ui';
+import { Exclamation, ExternalLink, Pencil } from '../ui/Icons';
+import { ActionLink, Alert } from '../ui';
 import { useDotYouClient } from '../hooks/auth/useDotYouClient';
 import { useCollaborativeChannel } from '../hooks/socialFeed/channels/useCollaborativeChannel';
 import { ChannelDefinitionVm } from '../hooks/socialFeed/channels/useChannels';

packages/common-app/src/channels/CollaborativeChannelitem.tsx

@@ -7,7 +7,8 @@ import {
 import { t } from '../helpers/i18n/dictionary';
 import { AclSummary } from '../acl/AclInfo/AclInfo';
 import { Persons } from '../ui/Icons/Persons';
-import { ActionLink, ExternalLink } from '../ui';
+import { ActionLink } from '../ui';
+import { ExternalLink } from '../ui/Icons';
 
 export const CollaborativeChannelItem = ({
   odinId,

packages/common-app/src/dialogs/ConfirmDialog/ConfirmDialog.tsx

@@ -2,11 +2,11 @@ import { useState } from 'react';
 import { createPortal } from 'react-dom';
 
 import { usePortal } from '../../hooks/portal/usePortal';
-import { Exclamation, Question } from '../../ui';
 import { t } from '../../helpers/i18n/dictionary';
 import { Input } from '../../form/Input';
 import { Label } from '../../form/Label';
 import { Checkbox } from '../../form';
+import { Exclamation, Question } from '../../ui/Icons';
 
 export interface ConfirmDialogProps {
   type?: 'critical' | 'info' | 'warning';

packages/common-app/src/dialogs/OptionDialog/OptionDialog.tsx

@@ -1,8 +1,9 @@
 import { createPortal } from 'react-dom';
 
 import { usePortal } from '../../hooks/portal/usePortal';
-import { ActionButton, ActionButtonProps, Exclamation, Question } from '../../ui';
+import { ActionButton, ActionButtonProps } from '../../ui';
 import { t } from '../../helpers/i18n/dictionary';
+import { Exclamation, Question } from '../../ui/Icons';
 
 export interface OptionDialogOptionProps extends Omit<ActionButtonProps, 'onClick'> {
   onClick: (e: React.MouseEvent<HTMLElement>) => void;

packages/common-app/src/form/image/ImageUploadAndCrop.tsx

@@ -1,9 +1,10 @@
 import { useState, useMemo } from 'react';
 import { fromBlob } from '@youfoundation/js-lib/media';
 import { t } from '../../helpers';
-import { Trash, ActionButton, Crop } from '../../ui';
+import { ActionButton } from '../../ui';
 import { Label } from '../Label';
 import { CropperRef, ImageCropper } from './ImageDialog/ImageCropper';
+import { Trash, Crop } from '../../ui/Icons';
 
 interface ImageUploadAndCropProps {
   expectedAspectRatio?: number;

packages/common-app/src/form/links/LinkOverview.tsx

@@ -1,8 +1,9 @@
-import { ActionButton, Times } from '../../ui';
+import { ActionButton } from '../../ui';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { useDotYouClient } from '../../hooks';
 import { LinkPreview, getLinkPreview } from '@youfoundation/js-lib/media';
 import { LinkPreviewTextual } from '../../media/Link';
+import { Times } from '../../ui/Icons';
 
 export const LinkOverview = ({
   linkPreviews,

packages/common-app/src/media/Video.tsx

@@ -4,9 +4,10 @@ import {
   OdinVideo,
   OdinVideoProps,
 } from '@youfoundation/ui-lib';
-import { Loader, Triangle, useDotYouClient } from '../..';
 import { EmbeddedThumb } from '@youfoundation/js-lib/core';
 import { useMemo, useState } from 'react';
+import { useDotYouClient } from '../hooks';
+import { Loader, Triangle } from '../ui/Icons';
 
 export interface VideoProps extends Omit<OdinVideoProps, 'dotYouClient'> {
   previewThumbnail?: EmbeddedThumb;

packages/common-app/src/permissions/ExtendPermission/ExtendPermissionDialog.tsx

@@ -4,7 +4,8 @@ import { useMissingPermissions } from '../../hooks/auth/useMissingPermissions';
 import { usePortal } from '../../hooks/portal/usePortal';
 import { DialogWrapper } from '../../ui/Dialog/DialogWrapper';
 import { t } from '../../helpers';
-import { ActionLink, Shield } from '../../ui';
+import { ActionLink } from '../../ui';
+import { Shield } from '../../ui/Icons';
 
 export const ExtendPermissionDialog = ({
   appId,

packages/common-app/src/socialFeed/Blocks/Interacts/CantReactInfo.tsx

@@ -1,6 +1,6 @@
 import { t } from '../../../helpers';
 import { CanReactInfo, CantReact } from '../../../hooks';
-import { Loader } from '../../../ui';
+import { Loader } from '../../../ui/Icons';
 
 export const CantReactInfo = ({
   cantReact,

packages/common-app/src/socialFeed/Blocks/Interacts/Comments/CommentComposer.tsx

@@ -4,17 +4,11 @@ import { useMemo, useState } from 'react';
 import { VolatileInput, FileOverview, FileSelector } from '../../../../form';
 import { t, getImagesFromPasteEvent } from '../../../../helpers';
 import { CanReactInfo, useDotYouClient, useReaction } from '../../../../hooks';
-import {
-  ErrorNotification,
-  ActionButtonState,
-  ImageIcon,
-  ActionButton,
-  Loader,
-  PaperPlane,
-} from '../../../../ui';
+import { ErrorNotification, ActionButtonState, ActionButton } from '../../../../ui';
 import { AuthorImage } from '../../Author/Image';
 import { CantReactInfo } from '../CantReactInfo';
 import { EmojiSelector } from '../EmojiPicker/EmojiSelector';
+import { ImageIcon, Loader, PaperPlane } from '../../../../ui/Icons';
 
 const TEN_MEGA_BYTES = 10 * 1024 * 1024;