Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding /app dir support #742

Draft
wants to merge 69 commits into
base: main
Choose a base branch
from
Draft
Changes from 1 commit
Commits
Show all changes
69 commits
Select commit Hold shift + click to select a range
f3c0879
first round tailwind
arielconti10 Dec 18, 2023
2b9ac8c
feat: adding custom icons to packages folders
matheus-bruscke Dec 26, 2023
039cb8d
feat: adding colors css variables
matheus-bruscke Dec 27, 2023
e920b22
making trpc works with server components
arielconti10 Dec 29, 2023
5e694b3
feat: initial design system components
matheus-bruscke Dec 29, 2023
ae7d7ab
Merge branch 'ariel/tailwind' of github.com:Zipper-Inc/zipper-functio…
matheus-bruscke Dec 29, 2023
8d4ef6b
some changes
arielconti10 Dec 29, 2023
da1d3d6
fixing builds
arielconti10 Dec 29, 2023
3d53d4f
basic layout component + nextauth session provider + react query helper
arielconti10 Jan 3, 2024
16122b7
small changes in components
arielconti10 Jan 3, 2024
f511ec7
some changes to make rsc work
arielconti10 Jan 5, 2024
bc6e753
feat: custom folder icons for material vscode
matheus-bruscke Jan 9, 2024
ca263e6
feat: finishing design system tokens for tailwind
matheus-bruscke Jan 9, 2024
56cffff
feat: setting up tailwind config
matheus-bruscke Jan 9, 2024
5ebfcec
feat: some shadcn components
matheus-bruscke Jan 9, 2024
169dbd8
refactor: updating header to tailwind styles
matheus-bruscke Jan 9, 2024
18f3357
refactor: fixing yarn lock
matheus-bruscke Jan 9, 2024
2f9922d
Merge branch 'matheus/design-system' of github.com:Zipper-Inc/zipper-…
matheus-bruscke Jan 9, 2024
8ed9f5b
fix: fixing yarn lock again
matheus-bruscke Jan 9, 2024
b11fd12
Merge branch 'main' of github.com:Zipper-Inc/zipper-functions into ma…
matheus-bruscke Jan 10, 2024
97e964d
fix: fixing deploy errors
matheus-bruscke Jan 10, 2024
d6456f0
fix: fixing cn deploy
matheus-bruscke Jan 10, 2024
08aa71f
feat: refactoring header component
matheus-bruscke Jan 11, 2024
b433159
feat: adding list component
matheus-bruscke Jan 11, 2024
847fddc
feat: finishing gallery page refactor with tailwind
matheus-bruscke Jan 12, 2024
21d9672
fix: enhancing minory changes
matheus-bruscke Jan 15, 2024
57d048c
fix: fixing vercel deploy
matheus-bruscke Jan 15, 2024
6b7ba3d
fix: fixing vercel deploy/2
matheus-bruscke Jan 15, 2024
d3dcb1b
ai route
arielconti10 Jan 15, 2024
5165e48
Merge branch 'main' into matheus/design-system
matheus-bruscke Jan 15, 2024
760ee93
Merge branch 'matheus/design-system' of github.com:Zipper-Inc/zipper-…
Jan 15, 2024
ea04cc6
merging
Jan 15, 2024
40f2ec3
Merge branch 'main' of github.com:Zipper-Inc/zipper-functions into ar…
arielconti10 Jan 16, 2024
5deb4cd
removing ai
arielconti10 Jan 16, 2024
1caadff
feat: adding new shadcn components
matheus-bruscke Jan 22, 2024
2d1d363
feat: refactoring dashboard to full tailwind setup
matheus-bruscke Jan 22, 2024
531a51b
Merge branch 'main' of github.com:Zipper-Inc/zipper-functions into ma…
matheus-bruscke Jan 22, 2024
762ccb7
Merge branch 'main' of github.com:Zipper-Inc/zipper-functions into ar…
arielconti10 Jan 23, 2024
cb41054
Merge branch 'matheus/tw-dashboard' of github.com:Zipper-Inc/zipper-f…
arielconti10 Jan 23, 2024
f8d12ed
Merge branch 'main' of github.com:Zipper-Inc/zipper-functions into ma…
matheus-bruscke Jan 24, 2024
d64c98e
refactor: removing ziplets nomenclature
matheus-bruscke Jan 24, 2024
b8f0d29
fix: fixing dark theme on tailwind
matheus-bruscke Jan 24, 2024
d5dfef9
Merge branch 'main' of github.com:Zipper-Inc/zipper-functions into ar…
arielconti10 Jan 24, 2024
1181f80
Merge branch 'matheus/tw-dashboard' of github.com:Zipper-Inc/zipper-f…
arielconti10 Jan 24, 2024
42bb5d7
extracting tailwind components to another package
arielconti10 Jan 25, 2024
f6896cb
Merge branch 'main' into ariel/trpc-app-dir
arielconti10 Jan 25, 2024
2ea85d7
removing package
arielconti10 Jan 25, 2024
a374f7f
refactor: small fixes in components package
matheus-bruscke Jan 26, 2024
6a4c79e
adding context back to trpc
arielconti10 Jan 26, 2024
1822082
Merge branch 'ariel/trpc-app-dir' of github.com:Zipper-Inc/zipper-fun…
arielconti10 Jan 26, 2024
641a7d4
feat: updating node CI version from 18.14 to 18.17
matheus-bruscke Jan 26, 2024
41006f6
Merge branch 'ariel/trpc-app-dir' of github.com:Zipper-Inc/zipper-fun…
matheus-bruscke Jan 26, 2024
817bc90
fix import
arielconti10 Jan 26, 2024
11e9ae5
another import
arielconti10 Jan 26, 2024
c1f7a8c
locking
arielconti10 Jan 26, 2024
c88e093
Merge branch 'ariel/trpc-app-dir' of github.com:Zipper-Inc/zipper-fun…
arielconti10 Jan 26, 2024
1da0050
fix missing operator
arielconti10 Jan 26, 2024
9c75a75
fix: fixing show component imports
matheus-bruscke Jan 26, 2024
6bfa066
fix: fixing createContext stuff from trpc
matheus-bruscke Jan 26, 2024
3da5037
Merge branch 'ariel/trpc-app-dir' of github.com:Zipper-Inc/zipper-fun…
arielconti10 Jan 26, 2024
74d8d8d
Merge branch 'main' into ariel/trpc-app-dir
arielconti10 Jan 26, 2024
9dbc18a
fix: sending partial fix (needs more tests)
matheus-bruscke Jan 26, 2024
9958bb7
Merge branch 'ariel/trpc-app-dir' of github.com:Zipper-Inc/zipper-fun…
matheus-bruscke Jan 26, 2024
ff483b5
Merge branch 'ariel/trpc-app-dir' of github.com:Zipper-Inc/zipper-fun…
arielconti10 Jan 27, 2024
00679c9
feat: adding new pages to app-dir
matheus-bruscke Feb 1, 2024
cb251bb
Merge branch 'ariel/trpc-app-dir' of github.com:Zipper-Inc/zipper-fun…
matheus-bruscke Feb 1, 2024
2c9da03
Merge branch 'main' of github.com:Zipper-Inc/zipper-functions into ar…
arielconti10 Feb 1, 2024
aff24d1
Merge branch 'main' into ariel/trpc-app-dir
arielconti10 Feb 5, 2024
c4ebcad
Merge branch 'main' into ariel/trpc-app-dir
arielconti10 Feb 16, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix: enhancing minory changes
  • Loading branch information
matheus-bruscke committed Jan 15, 2024
commit 21d9672c2515778bdb0abba668c8504f899eecb0
23 changes: 16 additions & 7 deletions apps/zipper.dev/src/components/app-dir/auth/profile-button.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client';
import { Dropdown, Button, Avatar, Show } from '@zipper/ui';
import React, { ReactNode, useCallback } from 'react';
import React, { ReactNode, useCallback, useState } from 'react';
import { signIn, signOut } from 'next-auth/react';
import { SignedIn, SignedOut } from './user-status';
import UserProfile from '../../auth/userProfile';
@@ -26,13 +26,13 @@ import {
PiSignOutDuotone,
} from 'react-icons/pi';

const SettingsDialog: React.FC<ReturnType<typeof useDisclosure>> = (
const SettingsDialog: React.FC<{ isOpen: boolean; onClose: () => void }> = (
settingsModal,
) => {
return (
<Modal
isOpen={settingsModal.isOpen}
onClose={() => settingsModal.onClose}
onClose={settingsModal.onClose}
size="xl"
>
<ModalOverlay />
@@ -69,7 +69,10 @@ const ProfileMenu = ({
const { setTheme, theme } = useTheme();

const feedbackDialog = useDisclosure();
const settingsDialog = useDisclosure();
const [isSettingsOpen, setIsSettingsOpen] = useState(false);

const onChangeSettingsOpen = () => setIsSettingsOpen(!isSettingsOpen);
const onCloseSettings = () => setIsSettingsOpen(false);

const toggleColorMode = useCallback(() => {
const color = theme === 'dark' ? 'light' : 'dark';
@@ -85,7 +88,7 @@ const ProfileMenu = ({
<Dropdown.Label>Settings</Dropdown.Label>
<Dropdown.Separator />
<Dropdown.Item
onClick={settingsDialog.onOpen}
onClick={onChangeSettingsOpen}
className="flex items-center gap-3 cursor-pointer"
>
<PiGearDuotone />
@@ -138,7 +141,7 @@ const ProfileMenu = ({

{/** TO-DO: refactor to shadcn dialgos */}
<FeedbackDialog {...feedbackDialog} />
<SettingsDialog {...settingsDialog} />
<SettingsDialog isOpen={isSettingsOpen} onClose={onCloseSettings} />
</React.Fragment>
);
};
@@ -159,7 +162,13 @@ export const ProfileButton: React.FC<ProfileButtonOptions> = ({
/>
</SignedIn>
<SignedOut>
<Button onClick={() => signIn}>Sign In</Button>
<Button
onClick={() => {
signIn();
}}
>
Sign In
</Button>
</SignedOut>
</React.Fragment>
);
218 changes: 167 additions & 51 deletions apps/zipper.dev/src/components/app-dir/layouts/header.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,168 @@
'use client';
import { useEffect, useMemo } from 'react';
import React, { useEffect, useMemo } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import NextLink from 'next/link';
import { Icon, useBreakpointValue, useDisclosure } from '@chakra-ui/react';
import { PiHouseSimple } from 'react-icons/pi';
import { useBreakpointValue, useDisclosure } from '@chakra-ui/react';
import { useUser } from '~/hooks/use-user';
import SignedIn from '~/components/auth/signed-in';
import SignedOut from '~/components/auth/signed-out';
import { BLUE, Button, Dropdown, ZipperLogo, ZipperSymbol } from '@zipper/ui';
import {
Badge,
Button,
Dropdown,
List,
Show,
ZipperLogo,
ZipperSymbol,
} from '@zipper/ui';
import { FeedbackModal } from '~/components/auth/feedback-modal';
import { MobileMenu } from '~/components/header-mobile-menu';
import { ProfileButton } from '../auth/profile-button';
import OrganizationSwitcher from '~/components/auth/organizationSwitcher';
import { useOrganization } from '~/hooks/use-organization';
import { FiChevronDown } from 'react-icons/fi';
import { FiEye } from 'react-icons/fi';
import { useOrganizationList } from '~/hooks/use-organization-list';
import { HiOutlineChevronUpDown } from 'react-icons/hi2';
import { ChevronRightIcon } from '@radix-ui/react-icons';
import { CreateOrganizationModal } from '~/components/auth/createOrganizationModal';

type HeaderProps = {
showNav?: boolean;
showOrgSwitcher?: boolean;
showDivider?: boolean;
};
/* -------------------------------------------- */
/* Constants */
/* -------------------------------------------- */

const navRoutes = [
const DASHBOARD_ROUTES = [
{ href: '/gallery', text: 'Gallery' },
{ href: '/changelog', text: 'Changelog' },
{ href: '/docs', text: 'Docs' },
{ href: '/dashboard', text: 'Dashboard' },
{ href: '/blog', text: 'Blog' },
];

/* -------------------------------------------- */
/* Components */
/* -------------------------------------------- */

const OrganizationSwitcher: React.FC = () => {
const { organization, role } = useOrganization();
const { user } = useUser();
const { setActive, organizationList, currentOrganizationId } =
useOrganizationList();

const OTHER_ORGANIZATIONS = useMemo(
() =>
organizationList.filter((o) => {
return o.organization.id !== (currentOrganizationId || null);
}),
[organizationList, organization],
);

const USER_ROLE = useMemo(
() => (role === 'admin' ? 'Admin' : 'Member'),
[role],
);

const {
isOpen: isOpenCreateOrg,
onOpen: onOpenCreateOrg,
onClose: onCloseCreateOrg,
} = useDisclosure();

return (
<React.Fragment>
<Dropdown.Root>
<Dropdown.Trigger className="flex items-center justify-center hover:opacity-75 transition-all gap-2 h-8">
<h3 className="text-xl font-medium">
{organization?.name ?? user?.username}
</h3>
<HiOutlineChevronUpDown size={16} />
</Dropdown.Trigger>
<Dropdown.Content align="start" className="w-72">
<header className="flex px-2 py-4 items-center justify-between text-sm">
<article>
<h3 className="text-md font-bold">
{organization?.name || 'Personal Workspace'}
</h3>
<Show
when={!!organization?.name}
fallback={<p>{user?.username}</p>}
>
<p>{USER_ROLE}</p>
</Show>
</article>

<Button size="sm" variant="outline" className="gap-2">
<FiEye />
Profile
</Button>
</header>
<Dropdown.Separator />
<main className="py-4 flex flex-col gap-2">
<h3 className="px-2 uppercase font-bold text-xs text-gray-400">
switch workspace
</h3>
<List data={OTHER_ORGANIZATIONS}>
{(org) => (
<Dropdown.Item
onClick={async () =>
org.pending
? window.location.replace(
`${window.location.host}/${org.organization.slug}`,
)
: await setActive?.(org.organization.id)
}
className="group cursor-pointer flex items-center justify-between hover:bg-brand-red"
>
<h3>{org.organization.name}</h3>
<Show
when={org.pending}
fallback={
<ChevronRightIcon className="text-muted transition-all group-hover:text-foreground group-hover:translate-x-1" />
}
>
<Badge variant="secondary"> Invited</Badge>
</Show>
</Dropdown.Item>
)}
</List>

<Button
onClick={onOpenCreateOrg}
variant="outline-primary"
size="sm"
className="w-fit ml-2"
>
Create Organization
</Button>
</main>
</Dropdown.Content>
</Dropdown.Root>

<CreateOrganizationModal
isOpen={isOpenCreateOrg}
onClose={onCloseCreateOrg}
/>
</React.Fragment>
);
};

const ZipperBetaLogo = () => {
return (
<div className="flex items-center space-x-2">
{/* ZipperSymbol should be adapted or replaced with TailwindCSS styled component. Custom styles may be required */}
<ZipperSymbol className="max-h-full h-4 w-4 py-0 ml-1 fill-secondary text-blue-500" />

<p className="text-xs uppercase flex items-center py-0 font-bold text-secondary bg-secondary/10 px-2 h-5">
Beta
</p>
</div>
);
};

type HeaderProps = {
showNav?: boolean;
showOrgSwitcher?: boolean;
showDivider?: boolean;
};

const Header: React.FC<HeaderProps> = ({
showNav = true,
showDivider = true,
@@ -36,7 +172,6 @@ const Header: React.FC<HeaderProps> = ({
const searchParams = useSearchParams();
const feedbackModal = useDisclosure();
const isTablet = useBreakpointValue({ base: false, md: true });
const { organization, role } = useOrganization();

const isLanding = useMemo(
() =>
@@ -75,47 +210,22 @@ const Header: React.FC<HeaderProps> = ({
<SignedIn>
{showNav && showOrgSwitcher ? (
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-2">
{/* ZipperSymbol should be adapted or replaced with TailwindCSS styled component. Custom styles may be required */}
<ZipperSymbol className="max-h-full h-4 w-4 py-0 ml-1 fill-secondary text-blue-500" />

<p className="text-xs uppercase flex items-center py-0 font-bold text-secondary bg-secondary/10 px-2 h-5">
Beta
</p>
</div>
<ZipperBetaLogo />

<span className="text-2xl leading-none whitespace-nowrap font-medium text-muted">
/
</span>

<Dropdown.Root>
<Dropdown.Trigger className="flex items-center gap-2 text-xl font-medium">
{organization?.name}
<FiChevronDown size={16} />
</Dropdown.Trigger>
</Dropdown.Root>
<OrganizationSwitcher />
</div>
) : (
<div className="flex space-x-5">
<ZipperLogo className="fill-secondary dark:fill-secondary text-blue-500 h-5 w-36" />
{/* {showNav && (
<div className="hidden sm:flex space-x-1 items-center bg-green">
<Icon as={PiHouseSimple} />
<p className="text-sm">Dashboard</p>
</div>
)} */}
</div>
)}
</SignedIn>
<SignedOut>
<ZipperLogo
fill={BLUE}
height={20}
style={{
marginLeft: '5px',
width: '140px',
}}
/>
<ZipperBetaLogo />
</SignedOut>
</NextLink>
)}
@@ -129,22 +239,26 @@ const Header: React.FC<HeaderProps> = ({
!user ? 'justify-between' : 'justify-end'
} gap-4 flex-1`}
>
<div className="flex h-full space-x-4 text-lg text-purple no-underline">
{navRoutes.map((r) => {
const isActive = r.href === `/${pathname}`;
<List
as="nav"
className="flex h-full items-center space-x-4 no-underline"
data={DASHBOARD_ROUTES}
>
{(props) => {
const isActive = props.href === `/${pathname}`;
const textDecoration = isActive ? 'underline' : 'none';

return (
<NextLink
href={r.href}
key={r.text}
href={props.href}
key={props.text}
className={`text-sm text-foreground ${textDecoration} h-8 flex items-center hover:border-b hover:border-foreground`}
>
{r.text}
{props.text}
</NextLink>
);
})}
</div>
}}
</List>

<div className="flex space-x-4 justify-end items-center">
{user && (
@@ -164,14 +278,16 @@ const Header: React.FC<HeaderProps> = ({
</div>
{!isTablet && (
<MobileMenu
navRoutes={navRoutes}
navRoutes={DASHBOARD_ROUTES}
feedbackModal={user ? feedbackModal : null}
/>
)}
</div>
)}
</header>
{showDivider && <div className="pt-4 mb-10 border-b border-gray-200" />}
<Show when={showDivider}>
<span className="pt-4 mb-10 border-b border-gray-200" />
</Show>
</>
);
};
Original file line number Diff line number Diff line change
@@ -27,7 +27,7 @@ const NavLink: React.FC<(typeof links)[number] & { active: boolean }> = ({
href={href}
className={cn(
'text-muted-foreground font-medium px-4 h-11 flex items-center relative py-3 rounded-sm transition-all hover:bg-muted-foreground/10',
active && 'text-primary dark bg-primary/10',
active && 'text-primary bg-primary/10',
)}
>
{label}
Loading