mirror of
https://github.com/roleypoly/roleypoly.git
synced 2025-06-16 09:39:09 +00:00
Refactor node packages to yarn workspaces & ditch next.js for CRA. (#161)
* chore: restructure project into yarn workspaces, remove next * fix tests, remove webapp from terraform * remove more ui deployment bits * remove pages, fix FUNDING.yml * remove isomorphism * remove next providers * fix linting issues * feat: start basis of new web ui system on CRA * chore: move types to @roleypoly/types package * chore: move src/common/utils to @roleypoly/misc-utils * chore: remove roleypoly/ path remappers * chore: renmove vercel config * chore: re-add worker-types to api package * chore: fix type linting scope for api * fix(web): craco should include all of packages dir * fix(ci): change api webpack path for wrangler * chore: remove GAR actions from CI * chore: update codeql job * chore: test better github dar matcher in lint-staged
This commit is contained in:
GitHub
parent
49e308507e
commit
2ff6588030
328 changed files with 16624 additions and 3525 deletions
96
packages/design-system/organisms/masthead/Authed.tsx
Normal file
96
packages/design-system/organisms/masthead/Authed.tsx
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
import { DynamicLogomark } from '@roleypoly/design-system/atoms/branding';
|
||||
import { Popover } from '@roleypoly/design-system/atoms/popover';
|
||||
import { GuildNav } from '@roleypoly/design-system/molecules/guild-nav';
|
||||
import { NavSlug } from '@roleypoly/design-system/molecules/nav-slug';
|
||||
import { UserAvatarGroup } from '@roleypoly/design-system/molecules/user-avatar-group';
|
||||
import { UserPopover } from '@roleypoly/design-system/molecules/user-popover';
|
||||
import { DiscordUser, GuildSlug } from '@roleypoly/types';
|
||||
import * as React from 'react';
|
||||
import { GoOrganization } from 'react-icons/go';
|
||||
import {
|
||||
GuildPopoverHead,
|
||||
InteractionBase,
|
||||
MastheadA,
|
||||
MastheadAlignment,
|
||||
MastheadBase,
|
||||
MastheadLeft,
|
||||
MastheadRight,
|
||||
} from './Masthead.styled';
|
||||
|
||||
type Props = {
|
||||
user?: DiscordUser;
|
||||
activeGuildId: string | null;
|
||||
guilds: GuildSlug[];
|
||||
disableGuildPicker?: boolean;
|
||||
};
|
||||
|
||||
export const Authed = (props: Props) => {
|
||||
const [userPopoverState, setUserPopoverState] = React.useState(false);
|
||||
const [serverPopoverState, setServerPopoverState] = React.useState(false);
|
||||
|
||||
return (
|
||||
<MastheadBase>
|
||||
<MastheadAlignment>
|
||||
<MastheadLeft>
|
||||
<MastheadA href="/servers">
|
||||
<DynamicLogomark height={35} />
|
||||
</MastheadA>
|
||||
<InteractionBase
|
||||
onClick={() => {
|
||||
if (!props.disableGuildPicker) {
|
||||
setServerPopoverState(true);
|
||||
setUserPopoverState(false);
|
||||
}
|
||||
}}
|
||||
hide={!serverPopoverState}
|
||||
>
|
||||
<NavSlug
|
||||
guild={
|
||||
props.guilds.find(
|
||||
(guild) => guild.id === props.activeGuildId
|
||||
) || null
|
||||
}
|
||||
/>
|
||||
</InteractionBase>
|
||||
<Popover
|
||||
headContent={
|
||||
<GuildPopoverHead>
|
||||
<GoOrganization />
|
||||
My Guilds
|
||||
</GuildPopoverHead>
|
||||
}
|
||||
canDefocus
|
||||
position="bottom left"
|
||||
active={serverPopoverState}
|
||||
preferredWidth={560}
|
||||
onExit={() => setServerPopoverState(false)}
|
||||
>
|
||||
{() => <GuildNav guilds={props.guilds} />}
|
||||
</Popover>
|
||||
</MastheadLeft>
|
||||
<MastheadRight>
|
||||
<InteractionBase
|
||||
onClick={() => {
|
||||
setUserPopoverState(true);
|
||||
setServerPopoverState(false);
|
||||
}}
|
||||
hide={!userPopoverState}
|
||||
>
|
||||
{props.user !== undefined && (
|
||||
<UserAvatarGroup user={props.user} />
|
||||
)}
|
||||
</InteractionBase>
|
||||
<Popover
|
||||
headContent={<></>}
|
||||
canDefocus
|
||||
position="top right"
|
||||
active={userPopoverState}
|
||||
onExit={() => setUserPopoverState(false)}
|
||||
>
|
||||
{() => props.user && <UserPopover user={props.user} />}
|
||||
</Popover>
|
||||
</MastheadRight>
|
||||
</MastheadAlignment>
|
||||
</MastheadBase>
|
||||
);
|
||||
};
|
||||
34
packages/design-system/organisms/masthead/Guest.tsx
Normal file
34
packages/design-system/organisms/masthead/Guest.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { DynamicLogotype } from '@roleypoly/design-system/atoms/branding';
|
||||
import { Button } from '@roleypoly/design-system/atoms/button';
|
||||
import * as React from 'react';
|
||||
import { FaSignInAlt } from 'react-icons/fa';
|
||||
import {
|
||||
MastheadA,
|
||||
MastheadAlignment,
|
||||
MastheadBase,
|
||||
MastheadLeft,
|
||||
MastheadRight,
|
||||
} from './Masthead.styled';
|
||||
|
||||
export const Guest = () => (
|
||||
<MastheadBase>
|
||||
<MastheadAlignment>
|
||||
<MastheadLeft>
|
||||
<MastheadA href="/">
|
||||
<DynamicLogotype height={30} />
|
||||
</MastheadA>
|
||||
</MastheadLeft>
|
||||
<MastheadRight>
|
||||
<MastheadA href="/auth/login">
|
||||
<Button size="small">
|
||||
Login{' '}
|
||||
<FaSignInAlt
|
||||
size="1em"
|
||||
style={{ transform: 'translateY(1px)' }}
|
||||
/>
|
||||
</Button>
|
||||
</MastheadA>
|
||||
</MastheadRight>
|
||||
</MastheadAlignment>
|
||||
</MastheadBase>
|
||||
);
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import * as React from 'react';
|
||||
import { guild, mastheadSlugs, user } from '../../fixtures/storyData';
|
||||
import { Authed } from './Authed';
|
||||
import { Guest } from './Guest';
|
||||
|
||||
export default {
|
||||
title: 'Organisms/Masthead',
|
||||
};
|
||||
|
||||
export const HasGuilds = () => (
|
||||
<Authed guilds={mastheadSlugs} activeGuildId={guild.id} user={user} />
|
||||
);
|
||||
|
||||
export const NoGuilds = () => <Authed guilds={[]} activeGuildId={null} user={user} />;
|
||||
|
||||
export const Guest_ = () => <Guest />;
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
|
||||
import { palette } from '@roleypoly/design-system/atoms/colors';
|
||||
import { transitions } from '@roleypoly/design-system/atoms/timings';
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
export const MastheadBase = styled.div`
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 50px;
|
||||
background-color: ${palette.taupe100};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 3px;
|
||||
z-index: 100;
|
||||
`;
|
||||
|
||||
export const MastheadAlignment = styled.div`
|
||||
max-width: 98vw;
|
||||
width: 1024px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const sideBase = styled.div`
|
||||
flex: 1;
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
export const MastheadLeft = styled(sideBase)``;
|
||||
|
||||
export const MastheadRight = styled(sideBase)`
|
||||
flex: 0;
|
||||
justify-content: flex-end;
|
||||
`;
|
||||
|
||||
export const MastheadCollapse = styled.div`
|
||||
${onSmallScreen(css`
|
||||
display: none;
|
||||
`)}
|
||||
`;
|
||||
|
||||
export const MastheadInner = styled.div`
|
||||
/* height: 30px; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
type InteractionBaseProps = {
|
||||
hide: boolean;
|
||||
};
|
||||
export const InteractionBase = styled.div<InteractionBaseProps>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
padding: 0 5px;
|
||||
transition: opacity ${transitions.actionable}s ease-in-out,
|
||||
background-color ${transitions.actionable}s ease-in-out;
|
||||
opacity: ${(props) => (props.hide ? 1 : 0)};
|
||||
|
||||
:hover {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
export const MastheadA = styled.a`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: unset;
|
||||
text-decoration: unset;
|
||||
`;
|
||||
|
||||
export const GuildPopoverHead = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
color: ${palette.taupe500};
|
||||
padding: 5px;
|
||||
height: 1.4em;
|
||||
font-size: 2em;
|
||||
margin-right: 10px;
|
||||
margin-left: 16px;
|
||||
${onSmallScreen(css`
|
||||
margin-left: 0;
|
||||
`)}
|
||||
}
|
||||
`;
|
||||
2
packages/design-system/organisms/masthead/index.ts
Normal file
2
packages/design-system/organisms/masthead/index.ts
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
export * from './Authed';
|
||||
export * from './Guest';
|
||||
Loading…
Add table
Add a link
Reference in a new issue