- {site.name}
-
-
-
+
;
+
+const Template: ComponentStory = () => {
+ return (
+
{props.children}
+ {props.children}
diff --git a/packages/ui/src/pages/app/components/app-layout/mobile-header.tsx b/packages/ui/src/pages/app/components/app-layout/mobile-header.tsx
index 1dbf34036..7714cc3b6 100644
--- a/packages/ui/src/pages/app/components/app-layout/mobile-header.tsx
+++ b/packages/ui/src/pages/app/components/app-layout/mobile-header.tsx
@@ -82,7 +82,7 @@ function SiteMobileHeader(props: SiteMobileHeaderProps) {
- Site Home
+ Site home
diff --git a/packages/ui/src/pages/app/components/app-layout/sidebar.tsx b/packages/ui/src/pages/app/components/app-layout/sidebar.tsx
index dcda3681f..a636e6e4b 100644
--- a/packages/ui/src/pages/app/components/app-layout/sidebar.tsx
+++ b/packages/ui/src/pages/app/components/app-layout/sidebar.tsx
@@ -114,7 +114,7 @@ function SiteSidebar(props: SiteSidebarProps) {
highlightPattern={/^\/$/}
icon={
@@ -185,7 +185,7 @@ function SiteSidebar(props: SiteSidebarProps) {
}
icon={
diff --git a/packages/ui/src/pages/app/components/app-layout/usage-card.tsx b/packages/ui/src/pages/app/components/app-layout/usage-card.tsx
index fd3d6a58f..bba5febfc 100644
--- a/packages/ui/src/pages/app/components/app-layout/usage-card.tsx
+++ b/packages/ui/src/pages/app/components/app-layout/usage-card.tsx
@@ -11,6 +11,8 @@ import {
} from '../../../../components';
import { trpcClient } from '../../../../utilities';
+const USAGE_THRESHOLD = 80;
+
export function UsageCard(): JSX.Element {
const router = useRouter();
const [isDismissed, setIsDismissed] = React.useState(false);
@@ -23,6 +25,11 @@ export function UsageCard(): JSX.Element {
return <>;
}
const usagePercentage = Math.round((data.usage / data.usageLimit) * 100);
+
+ if (usagePercentage < USAGE_THRESHOLD) {
+ return <>;
+ }
+
return (
diff --git a/packages/ui/src/pages/app/home/create-button.tsx b/packages/ui/src/pages/app/home/create-button.tsx
deleted file mode 100644
index 80e92720a..000000000
--- a/packages/ui/src/pages/app/home/create-button.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { isENVProd } from '@chirpy-dev/utils';
-import { useRouter } from 'next/router';
-import * as React from 'react';
-
-import {
- Heading,
- IconBook,
- IconMessageSquare,
- IconPlusCircle,
- Menu,
- Popover,
- Text,
-} from '../../../components';
-import { useCurrentUser } from '../../../contexts';
-
-export type CreateProjectButtonProps = {
- projectCount?: number;
- onClickCreateProject: () => void;
-};
-
-export function CreateProjectButton(
- props: CreateProjectButtonProps,
-): JSX.Element {
- const { data } = useCurrentUser();
- // let disabledType: DisabledType | undefined = 'maintenanceMode';
- let disabledType: DisabledType | undefined;
- if (isENVProd && (props.projectCount || 0) > 0) {
- disabledType = 'projectLimit';
- } else if (!data.email) {
- disabledType = 'anonymous';
- } else if (process.env.NEXT_PUBLIC_MAINTENANCE_MODE) {
- disabledType = 'maintenanceMode';
- }
- const createButtonProps = {
- variant: 'primary',
- className: 'space-x-1',
- } as const;
- const createButtonChildren = (
- <>
-
-
- {createButtonChildren}
-
-
- {DISABLED_MESSAGE_MAP[disabledType]}
-
-
- ) : (
-
- )}
-
- );
-}
-
-type DisabledType = 'anonymous' | 'projectLimit' | 'maintenanceMode';
-const DISABLED_MESSAGE_MAP: Record = {
- anonymous: (
-
-
- Connect an email with your account
-
-
- Otherwise, you may lose access to your project after creation. You can
- re-sign in with your email or social media account.
-
-
- ),
- projectLimit: (
-
-
- Reached the maximum number of projects
-
-
- You can delete an existing project to create a new one.
-
-
- ),
- maintenanceMode: (
-
-
- System maintenance mode
-
-
- All editing actions are disabled during this period, Please check back
- in a little while and try again.
-
-
- ),
-};
diff --git a/packages/ui/src/pages/app/home/index.tsx b/packages/ui/src/pages/app/home/index.tsx
index 9334d61a8..bf884ce1f 100644
--- a/packages/ui/src/pages/app/home/index.tsx
+++ b/packages/ui/src/pages/app/home/index.tsx
@@ -1,86 +1,43 @@
import * as React from 'react';
-import {
- PageTitleDeprecated,
- EmptyProjectCard,
- ProjectCard,
- SiteCard,
-} from '../../../blocks';
+import { PageTitle, SiteCard } from '../../../blocks';
+import { EmptySiteCard } from '../../../blocks/site-card/empty-site-card';
import { Heading, Spinner } from '../../../components';
import { useCurrentUser } from '../../../contexts';
import { trpcClient } from '../../../utilities/trpc-client';
import { AppLayout } from '../components/app-layout';
-import { CreateProjectButton } from './create-button';
import { CreateProjectDialog } from './create-project-dialog';
export function DashboardHome(): JSX.Element {
const { loading: userIsLoading } = useCurrentUser();
- const {
- data: projects,
- refetch: fetchUserProjects,
- isFetching: isFetchingProject,
- } = trpcClient.project.all.useQuery();
+ const { refetch: fetchUserProjects } = trpcClient.project.all.useQuery();
const { data: sites, isFetching: isFetchingSites } =
trpcClient.site.all.useQuery();
+ const { data } = useCurrentUser();
const [showProjectDialog, setShowProjectDialog] = React.useState(false);
return (
-
+
diff --git a/packages/ui/src/pages/app/site/settings/site-settings.tsx b/packages/ui/src/pages/app/site/settings/site-settings.tsx
index d3f492697..64ad18a0f 100644
--- a/packages/ui/src/pages/app/site/settings/site-settings.tsx
+++ b/packages/ui/src/pages/app/site/settings/site-settings.tsx
@@ -15,8 +15,8 @@ export function SiteSettings({ subdomain }: SiteSettingsProps): JSX.Element {
const { data } = trpcClient.site.bySubdomain.useQuery(subdomain);
return (
-
- Site Settings
+
+ Site settings
General
diff --git a/packages/ui/src/styles/common.ts b/packages/ui/src/styles/common.ts
index 6403322fc..da6352acc 100644
--- a/packages/ui/src/styles/common.ts
+++ b/packages/ui/src/styles/common.ts
@@ -10,7 +10,7 @@ export const bluredBg = `
export const border = `border outline-none focus-visible:border-primary-900`;
-export const listHoverableColor = `transition hover:bg-primary-400 hover:text-primary-1100`;
+export const listHoverableColor = `transition hover:bg-primary-400 hover:text-primary-1100 focus-visible:bg-primary-400 focus-visible:text-primary-1100`;
export const listHoverable = `px-2 py-1 rounded ${listHoverableColor}`;
export const ring = `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-bg focus-visible:ring-offset-2 focus-visible:ring-primary-700`;
-
- {posts.map((page) => (
-
+ 
+
- No posts yet
-
- )}
-
-
{isSignIn && (
<>
-
-
+
-
)}
diff --git a/packages/ui/src/components/heading/heading.tsx b/packages/ui/src/components/heading/heading.tsx
index 49da641c4..126b22a08 100644
--- a/packages/ui/src/components/heading/heading.tsx
+++ b/packages/ui/src/components/heading/heading.tsx
@@ -25,7 +25,7 @@ export function Heading(props: IHeadingProps): JSX.Element {
return (
{children}
diff --git a/packages/ui/src/components/menu/menu.tsx b/packages/ui/src/components/menu/menu.tsx
index af8140000..27c06e3d0 100644
--- a/packages/ui/src/components/menu/menu.tsx
+++ b/packages/ui/src/components/menu/menu.tsx
@@ -5,9 +5,8 @@ import * as React from 'react';
import { bluredBg, listHoverable } from '../../styles/common';
import { Box, BoxProps } from '../box';
-import { BaseButton, Button, IconButton } from '../button';
+import { Button, IconButton } from '../button';
import { Divider } from '../divider';
-import { IconChevronDown } from '../icons';
import styles from './menu.module.scss';
export type Shape = 'circle' | 'square';
@@ -74,14 +73,6 @@ function MenuButton({
onClick={() => onClick?.(open)}
>
{children}
- {shape === 'square' && (
-
@@ -116,18 +107,16 @@ function MenuItems({
);
}
-export type MenuItemProps = React.PropsWithChildren<{
+export type MenuItemProps = {
disableAutoDismiss?: boolean;
- onClick?: () => void;
disabled?: boolean;
-}> &
- BoxProps;
+} & BoxProps;
function MenuItem({
as,
children,
disableAutoDismiss,
- onClick,
+ disabled,
className,
...asProps
}: MenuItemProps): JSX.Element {
@@ -139,10 +128,12 @@ function MenuItem({
children
);
return (
-
+ {site.name}
+
+ {site.subdomain}
+
- ) : (
-
-
- Created {cpDayjs(site.createdAt).fromNow()}
-
+
+
+ Created {cpDayjs(site.createdAt).fromNow()}
);
diff --git a/packages/ui/src/blocks/user-menu/menu-link.tsx b/packages/ui/src/blocks/user-menu/menu-link.tsx
index a6d16f2fe..1c93e6263 100644
--- a/packages/ui/src/blocks/user-menu/menu-link.tsx
+++ b/packages/ui/src/blocks/user-menu/menu-link.tsx
@@ -12,4 +12,4 @@ export const MenuLink = React.forwardRef(function MenuLink(
);
});
-export const itemStyle = `space-x-1`;
+export const itemStyle = 'flex flex-row gap-2 items-center';
diff --git a/packages/ui/src/blocks/user-menu/user-menu.tsx b/packages/ui/src/blocks/user-menu/user-menu.tsx
index d3a65b199..ea32881d4 100644
--- a/packages/ui/src/blocks/user-menu/user-menu.tsx
+++ b/packages/ui/src/blocks/user-menu/user-menu.tsx
@@ -1,12 +1,11 @@
-import { SUPPORT_LINK, SIGN_IN_SUCCESS_KEY } from '@chirpy-dev/utils';
+import { SIGN_IN_SUCCESS_KEY, SUPPORT_LINK } from '@chirpy-dev/utils';
import { signOut } from 'next-auth/react';
-import * as React from 'react';
import { Avatar } from '../../components/avatar';
import { IconLifeBuoy, IconLogOut, IconUser } from '../../components/icons';
import { Menu } from '../../components/menu';
import { useCurrentUser } from '../../contexts/current-user-context';
-import { itemStyle, MenuLink } from './menu-link';
+import { MenuLink } from './menu-link';
export async function handleSignOut() {
await signOut();
@@ -32,35 +31,26 @@ export function UserMenu(): JSX.Element {
+
+
+ );
+};
+
+export const Default = Template.bind({});
diff --git a/packages/ui/src/pages/app/components/app-layout/app-layout.tsx b/packages/ui/src/pages/app/components/app-layout/app-layout.tsx
index 08f1fbfe6..e085eb28d 100644
--- a/packages/ui/src/pages/app/components/app-layout/app-layout.tsx
+++ b/packages/ui/src/pages/app/components/app-layout/app-layout.tsx
@@ -17,7 +17,7 @@ export function AppLayout(props: AppLayoutProps): JSX.Element {
{/* Render Sidebar on desktop view, render MobileHeader on mobile view */}
- Dashboard
- setShowProjectDialog(true)}
- />
-
-
-
- My projects
-
- {projects?.length ? (
- Welcome back, {data.name}
+
-
- ) : isFetchingProject || userIsLoading ? (
- -
- {projects.map((project) => (
-
-
-
-
- ))}
-
-
- )}
+
-
- My sites
+
+ All sites
{sites?.length ? (
-
-
- ) : isFetchingSites || userIsLoading ? (
- -
- {sites.map((project) => (
-
-
-
-
- ))}
-
-
+
-
+
+
+ ))}
+
-
+ isFetchingSites || (userIsLoading &&