chore: fix some monorepo issues

.github/workflows/ci.yml

@@ -15,6 +15,9 @@ jobs:
       - name: Install Dependencies
         run: npm ci
 
+      - name: Build Shared Packages
+        run: npm run build:shared
+
       - name: Run Lint
         run: npm run lint --workspaces --if-present
 

.github/workflows/deploy.yml

@@ -10,7 +10,7 @@ on:
   push:
     branches:
       - "develop"
-env: 
+env:
   tag: ${{ github.event.inputs.tag || 'develop' }}
 jobs:
   build-frontend:
@@ -25,6 +25,8 @@ jobs:
           node-version-file: .nvmrc
       - name: Install Dependencies
         run: npm ci
+      - name: Build Shared Packages
+        run: npm run build:shared
       - working-directory: ./apps/tlon-web
         run: npm run build
       - uses: actions/upload-artifact@v3

apps/tlon-web/.prettierrc.js

@@ -39,7 +39,7 @@ module.exports = {
   tailwindConfig: './tailwind.config.js',
   semi: true,
   trailingComma: 'es5',
-  importOrder: ['<THIRD_PARTY_MODULES>', '^[./]'],
+  importOrder: ['<THIRD_PARTY_MODULES>', '^@/(.*)', '^[./]'],
   importOrderSeparation: true,
   importOrderSortSpecifiers: true,
 };

apps/tlon-web/src/api.ts

@@ -1,5 +1,4 @@
 /* eslint-disable import/no-cycle */
-import { useLocalState } from '@/state/local';
 import type UrbitMock from '@tloncorp/mock-http-api';
 import UrbitBase, {
   Message,
@@ -13,6 +12,8 @@ import UrbitBase, {
 } from '@urbit/http-api';
 import _ from 'lodash';
 
+import { useLocalState } from '@/state/local';
+
 import { actionDrill, isHosted, parseKind } from './logic/utils';
 import { useEyreState } from './state/eyre';
 import useSchedulerStore from './state/scheduler';

apps/tlon-web/src/app.tsx

@@ -1,4 +1,20 @@
 // Copyright 2022, Tlon Corporation
+import { TooltipProvider } from '@radix-ui/react-tooltip';
+import cookies from 'browser-cookies';
+import { usePostHog } from 'posthog-js/react';
+import React, { Suspense, useEffect, useMemo, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { Helmet } from 'react-helmet';
+import {
+  Location,
+  NavigateFunction,
+  Route,
+  BrowserRouter as Router,
+  Routes,
+  useLocation,
+  useNavigate,
+} from 'react-router-dom';
+
 import { IS_MOCK } from '@/api';
 import tlonFavicon from '@/assets/favicon.ico';
 import NewChannelModal from '@/channels/NewChannel/NewChannelModal';
@@ -73,21 +89,6 @@ import {
   useSettingsLoaded,
   useTheme,
 } from '@/state/settings';
-import { TooltipProvider } from '@radix-ui/react-tooltip';
-import cookies from 'browser-cookies';
-import { usePostHog } from 'posthog-js/react';
-import React, { Suspense, useEffect, useMemo, useState } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-import { Helmet } from 'react-helmet';
-import {
-  Location,
-  NavigateFunction,
-  Route,
-  BrowserRouter as Router,
-  Routes,
-  useLocation,
-  useNavigate,
-} from 'react-router-dom';
 
 import ChannelVolumeDialog from './channels/ChannelVolumeDialog';
 import MobileChatSearch from './chat/ChatSearch/MobileChatSearch';

apps/tlon-web/src/channels/ChannelActions.tsx

@@ -1,3 +1,7 @@
+import cn from 'classnames';
+import React, { PropsWithChildren, useCallback, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router';
+
 import ActionMenu, { Action } from '@/components/ActionMenu';
 import useActiveTab from '@/components/Sidebar/util';
 import VolumeSetting from '@/components/VolumeSetting';
@@ -10,9 +14,6 @@ import { useIsMobile } from '@/logic/useMedia';
 import { getFlagParts, nestToFlag } from '@/logic/utils';
 import { useDeleteChannelMutation, useRouteGroup } from '@/state/groups';
 import { GroupChannel } from '@/types/groups';
-import cn from 'classnames';
-import React, { PropsWithChildren, useCallback, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router';
 
 import ChannelHostConnection from './ChannelHostConnection';
 

apps/tlon-web/src/channels/ChannelHeader.tsx

@@ -1,9 +1,10 @@
+import cn from 'classnames';
+import { PropsWithChildren } from 'react';
+
 import MobileHeader from '@/components/MobileHeader';
 import ReconnectingSpinner from '@/components/ReconnectingSpinner';
 import { useIsMobile } from '@/logic/useMedia';
 import { useAmAdmin, useGroupChannel } from '@/state/groups';
-import cn from 'classnames';
-import { PropsWithChildren } from 'react';
 
 import ChannelActions, { ChannelActionsProps } from './ChannelActions';
 import ChannelHostConnection from './ChannelHostConnection';

apps/tlon-web/src/channels/ChannelIcon.tsx

@@ -1,9 +1,10 @@
+import React from 'react';
+
 import BubbleIcon from '@/components/icons/BubbleIcon';
 import NotebookIcon from '@/components/icons/NotebookIcon';
 import ShapesIcon from '@/components/icons/ShapesIcon';
 import UnknownAvatarIcon from '@/components/icons/UnknownAvatarIcon';
 import { nestToFlag } from '@/logic/utils';
-import React from 'react';
 
 interface ChannelIconProps extends React.HTMLAttributes<SVGElement> {
   nest: string;

apps/tlon-web/src/channels/ChannelSearch.tsx

@@ -1,6 +1,7 @@
+import { useParams } from 'react-router';
+
 import ChatSearch, { ChatSearchProps } from '@/chat/ChatSearch/ChatSearch';
 import { useChannelSearch } from '@/state/channel/channel';
-import { useParams } from 'react-router';
 
 export default function ChannelSearch(
   props: Omit<ChatSearchProps, 'scan' | 'query' | 'isLoading' | 'endReached'>

apps/tlon-web/src/channels/ChannelSortSelector.tsx

@@ -1,6 +1,7 @@
-import { ChannelFormSchema } from '@/types/groups';
 import { useFormContext } from 'react-hook-form';
 
+import { ChannelFormSchema } from '@/types/groups';
+
 interface SortSettingRowProps {
   type: 'time' | 'arranged';
 }

apps/tlon-web/src/channels/ChannelTitleButton.tsx

@@ -1,8 +1,9 @@
+import cn from 'classnames';
+import { Link } from 'react-router-dom';
+
 import CaretLeft16Icon from '@/components/icons/CaretLeft16Icon';
 import { useIsMobile } from '@/logic/useMedia';
 import { useGroupChannel } from '@/state/groups';
-import cn from 'classnames';
-import { Link } from 'react-router-dom';
 
 import ChannelHostConnection from './ChannelHostConnection';
 import ChannelIcon from './ChannelIcon';

apps/tlon-web/src/channels/ChannelTypeSelector.tsx

@@ -1,10 +1,11 @@
+import cn from 'classnames';
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+
 import BubbleIcon from '@/components/icons/BubbleIcon';
 import NotebookIcon from '@/components/icons/NotebookIcon';
 import ShapesIcon from '@/components/icons/ShapesIcon';
 import { ChannelType, NewChannelFormSchema } from '@/types/groups';
-import cn from 'classnames';
-import React from 'react';
-import { useFormContext } from 'react-hook-form';
 
 interface ChannelTypeMetadata {
   title: string;

apps/tlon-web/src/channels/ChannelViewSelector.tsx

@@ -1,6 +1,7 @@
-import { ChannelFormSchema } from '@/types/groups';
 import { useFormContext } from 'react-hook-form';
 
+import { ChannelFormSchema } from '@/types/groups';
+
 interface ViewSettingRowProps {
   type: 'grid' | 'list';
 }

apps/tlon-web/src/channels/ChannelVolumeDialog.tsx

@@ -1,10 +1,11 @@
+import { Helmet } from 'react-helmet';
+import { useParams } from 'react-router';
+
 import Dialog from '@/components/Dialog';
 import VolumeSetting from '@/components/VolumeSetting';
 import { useDismissNavigate } from '@/logic/routing';
 import { useGroupChannel, useRouteGroup } from '@/state/groups';
 import { ViewProps } from '@/types/groups';
-import { Helmet } from 'react-helmet';
-import { useParams } from 'react-router';
 
 export default function ChannelVolumeDialog({ title }: ViewProps) {
   const { chType, chShip, chName } = useParams<{

apps/tlon-web/src/channels/DisplayDropdown.tsx

@@ -1,8 +1,9 @@
+import * as Dropdown from '@radix-ui/react-dropdown-menu';
+import cn from 'classnames';
+
 import GridIcon from '@/components/icons/GridIcon';
 import ListIcon from '@/components/icons/ListIcon';
 import { DisplayMode } from '@/types/channel';
-import * as Dropdown from '@radix-ui/react-dropdown-menu';
-import cn from 'classnames';
 
 interface DisplayDropdownProps {
   displayMode: DisplayMode;

apps/tlon-web/src/channels/EditChannelForm.tsx

@@ -1,3 +1,9 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import _ from 'lodash';
+import React, { useCallback } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router';
+
 import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner';
 import ChannelPermsSelector from '@/groups/ChannelsList/ChannelPermsSelector';
 import { channelHref, prettyChannelTypeName } from '@/logic/channel';
@@ -17,11 +23,6 @@ import {
 } from '@/state/groups';
 import { SortMode } from '@/types/channel';
 import { ChannelFormSchema, GroupChannel } from '@/types/groups';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import _ from 'lodash';
-import React, { useCallback } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-import { useNavigate } from 'react-router';
 
 import ChannelSortSelector from './ChannelSortSelector';
 import ChannelViewSelector from './ChannelViewSelector';

apps/tlon-web/src/channels/NewChannel/NewChannelForm.tsx

@@ -1,3 +1,8 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { useCallback } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useNavigate, useParams } from 'react-router';
+
 import ChannelTypeSelector from '@/channels/ChannelTypeSelector';
 import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner';
 import Tooltip from '@/components/Tooltip';
@@ -11,10 +16,6 @@ import {
   useRouteGroup,
 } from '@/state/groups';
 import { NewChannelFormSchema } from '@/types/groups';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { useCallback } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-import { useNavigate, useParams } from 'react-router';
 
 export default function NewChannelForm() {
   const { section } = useParams<{ section: string }>();

apps/tlon-web/src/channels/NewChannel/NewChannelModal.tsx

@@ -1,6 +1,7 @@
+import React from 'react';
+
 import Dialog from '@/components/Dialog';
 import { useDismissNavigate } from '@/logic/routing';
-import React from 'react';
 
 import NewChannelForm from './NewChannelForm';
 

apps/tlon-web/src/chat/ChatChannel.tsx

@@ -1,3 +1,9 @@
+import cn from 'classnames';
+import React, { useMemo, useRef } from 'react';
+import { Helmet } from 'react-helmet';
+import { Route, Routes, useMatch, useParams } from 'react-router';
+import { Link, useSearchParams } from 'react-router-dom';
+
 import ChannelHeader from '@/channels/ChannelHeader';
 import ChannelSearch from '@/channels/ChannelSearch';
 import ChannelTitleButton from '@/channels/ChannelTitleButton';
@@ -19,11 +25,6 @@ import {
 } from '@/state/channel/channel';
 import { useRouteGroup } from '@/state/groups/groups';
 import { ViewProps } from '@/types/groups';
-import cn from 'classnames';
-import React, { useMemo, useRef } from 'react';
-import { Helmet } from 'react-helmet';
-import { Route, Routes, useMatch, useParams } from 'react-router';
-import { Link, useSearchParams } from 'react-router-dom';
 
 import ChatThread from './ChatThread/ChatThread';
 

apps/tlon-web/src/chat/ChatContent/ChatContent.tsx

@@ -1,3 +1,9 @@
+import cn from 'classnames';
+import { findLastIndex } from 'lodash';
+import React, { useEffect } from 'react';
+import { useLocation } from 'react-router';
+import { Link } from 'react-router-dom';
+
 import ChatContentImage from '@/chat/ChatContent/ChatContentImage';
 import ChatEmbedContent from '@/chat/ChatEmbedContent/ChatEmbedContent';
 // eslint-disable-next-line import/no-cycle
@@ -25,11 +31,6 @@ import {
   isShip,
   isStrikethrough,
 } from '@/types/content';
-import cn from 'classnames';
-import { findLastIndex } from 'lodash';
-import React, { useEffect } from 'react';
-import { useLocation } from 'react-router';
-import { Link } from 'react-router-dom';
 
 interface ChatContentProps {
   story: Story;

apps/tlon-web/src/chat/ChatContent/ChatContentImage.tsx

@@ -1,8 +1,9 @@
+import React, { useState } from 'react';
+import { useParams } from 'react-router';
+
 import LightBox from '@/components/LightBox';
 import ExclamationPoint from '@/components/icons/ExclamationPoint';
 import { useCalm } from '@/state/settings';
-import React, { useState } from 'react';
-import { useParams } from 'react-router';
 
 import { useChatDialog, useChatFailedToLoadContent } from '../useChatStore';
 

apps/tlon-web/src/chat/ChatEmbedContent/AudioPlayer.tsx

@@ -1,4 +1,3 @@
-import LightBox from '@/components/LightBox';
 import React, {
   MouseEvent,
   useCallback,
@@ -8,6 +7,8 @@ import React, {
 } from 'react';
 import { useParams } from 'react-router';
 
+import LightBox from '@/components/LightBox';
+
 import { useChatDialog } from '../useChatStore';
 
 function formatTime(num: number) {

apps/tlon-web/src/chat/ChatEmbedContent/ChatEmbedContent.tsx

@@ -1,10 +1,11 @@
+import DOMPurify from 'dompurify';
+import React, { useEffect } from 'react';
+import { BigPlayButton, Player } from 'video-react';
+
 import { useIsMobile } from '@/logic/useMedia';
 import { AUDIO_REGEX, VIDEO_REGEX, validOembedCheck } from '@/logic/utils';
 import { useEmbed } from '@/state/embed';
 import { useCalm } from '@/state/settings';
-import DOMPurify from 'dompurify';
-import React, { useEffect } from 'react';
-import { BigPlayButton, Player } from 'video-react';
 
 import AudioPlayer from './AudioPlayer';
 import SpotifyEmbed from './SpotifyEmbed';

apps/tlon-web/src/chat/ChatEmbedContent/SpotifyEmbed.tsx

@@ -1,8 +1,9 @@
-import LightBox from '@/components/LightBox';
-import CaretRightIcon from '@/components/icons/CaretRightIcon';
 import React from 'react';
 import { useParams } from 'react-router';
 
+import LightBox from '@/components/LightBox';
+import CaretRightIcon from '@/components/icons/CaretRightIcon';
+
 import { useChatDialog } from '../useChatStore';
 
 interface SpotifyEmbedProps {

apps/tlon-web/src/chat/ChatEmbedContent/TwitterEmbed.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable react/no-danger */
-import TwitterXIcon from '@/components/icons/TwitterXIcon';
 import DOMPurify from 'dompurify';
 import { Tweet, useTweet } from 'react-tweet';
 
+import TwitterXIcon from '@/components/icons/TwitterXIcon';
+
 interface TwitterEmbedProps {
   embedHtml: string;
 }

apps/tlon-web/src/chat/ChatEmbedContent/YouTubeEmbed.tsx

@@ -1,8 +1,9 @@
+import React from 'react';
+import { useParams } from 'react-router';
+
 import LightBox from '@/components/LightBox';
 import CaretRightIcon from '@/components/icons/CaretRightIcon';
 import { useIsMobile } from '@/logic/useMedia';
-import React from 'react';
-import { useParams } from 'react-router';
 
 import { useChatDialog } from '../useChatStore';