roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-06-16 09:39:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update prettier tab width for consistency (#175)

Browse source
This commit is contained in:
41666 2021-03-13 22:54:34 -05:00 • committed by GitHub
parent a931f8c69c
commit f24d2fcc99
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
247 changed files with 7224 additions and 7375 deletions
Download patch file Download diff file Expand all files Collapse all files

16
packages/design-system/molecules/guild-nav/GuildNav.stories.tsx
View file

@ -4,18 +4,18 @@ import { mastheadSlugs } from '../../fixtures/storyData';
import { GuildNav } from './GuildNav';
export default {
title: 'Molecules/Guild Nav',
component: GuildNav,
title: 'Molecules/Guild Nav',
component: GuildNav,
};
export const HasGuilds = () => (
<PopoverBase active>
<GuildNav guilds={mastheadSlugs} />
</PopoverBase>
<PopoverBase active>
<GuildNav guilds={mastheadSlugs} />
</PopoverBase>
);
export const NoGuilds = () => (
<PopoverBase active>
<GuildNav guilds={[]} />
</PopoverBase>
<PopoverBase active>
<GuildNav guilds={[]} />
</PopoverBase>
);

28
packages/design-system/molecules/guild-nav/GuildNav.styled.ts
View file

@ -3,19 +3,19 @@ import { transitions } from '@roleypoly/design-system/atoms/timings';
import styled from 'styled-components';
export const GuildNavItem = styled.a`
display: flex;
align-items: center;
transition: border ${transitions.in2in}s ease-in-out;
border: 1px solid transparent;
border-radius: 3px;
box-sizing: border-box;
margin: 5px;
user-select: none;
color: unset;
text-decoration: none;
display: flex;
align-items: center;
transition: border ${transitions.in2in}s ease-in-out;
border: 1px solid transparent;
border-radius: 3px;
box-sizing: border-box;
margin: 5px;
user-select: none;
color: unset;
text-decoration: none;
&:hover {
border-color: ${palette.taupe300};
cursor: pointer;
}
&:hover {
border-color: ${palette.taupe300};
cursor: pointer;
}
`;

86
packages/design-system/molecules/guild-nav/GuildNav.tsx
View file

@ -8,61 +8,61 @@ import ReactTooltip from 'react-tooltip';
import { GuildNavItem } from './GuildNav.styled';
type Props = {
guilds: GuildSlug[];
recentGuilds: string[];
guilds: GuildSlug[];
recentGuilds: string[];
};
const tooltipId = 'guildnav';
const Badges = (props: { guild: GuildSlug }) => {
return React.useMemo(() => {
if (props.guild.permissionLevel === UserGuildPermissions.Admin) {
return <GoStar data-tip="Administrator" data-for={tooltipId} />;
}
return React.useMemo(() => {
if (props.guild.permissionLevel === UserGuildPermissions.Admin) {
return <GoStar data-tip="Administrator" data-for={tooltipId} />;
}
if (props.guild.permissionLevel === UserGuildPermissions.Manager) {
return <GoZap data-tip="Role Editor" data-for={tooltipId} />;
}
if (props.guild.permissionLevel === UserGuildPermissions.Manager) {
return <GoZap data-tip="Role Editor" data-for={tooltipId} />;
}
return null;
}, [props.guild.permissionLevel]);
return null;
}, [props.guild.permissionLevel]);
};
const NavList = (props: { guilds: Props['guilds'] }) => (
<>
{props.guilds.map((guild) => (
<GuildNavItem href={`/s/${guild.id}`} key={guild.id}>
<NavSlug guild={guild || null} key={guild.id} />
<Badges guild={guild} />
</GuildNavItem>
))}
</>
<>
{props.guilds.map((guild) => (
<GuildNavItem href={`/s/${guild.id}`} key={guild.id}>
<NavSlug guild={guild || null} key={guild.id} />
<Badges guild={guild} />
</GuildNavItem>
))}
</>
);
export const GuildNav = (props: Props) => {
const { sortedGuildSlugs, recentGuildSlugs } = getRecentAndSortedGuilds(
props.guilds,
props.recentGuilds
);
const { sortedGuildSlugs, recentGuildSlugs } = getRecentAndSortedGuilds(
props.guilds,
props.recentGuilds
);
return (
<div>
<Scrollbars
universal
autoHide
// autoHeight
style={{ height: 'calc(100vh - 45px - 1.4em)', overflowX: 'hidden' }}
>
{recentGuildSlugs && (
<>
<div>Recents</div>
<NavList guilds={recentGuildSlugs} />
<div>All Guilds</div>
</>
)}
<NavList guilds={sortedGuildSlugs} />
<ReactTooltip id={tooltipId} />
</Scrollbars>
</div>
);
return (
<div>
<Scrollbars
universal
autoHide
// autoHeight
style={{ height: 'calc(100vh - 45px - 1.4em)', overflowX: 'hidden' }}
>
{recentGuildSlugs && (
<>
<div>Recents</div>
<NavList guilds={recentGuildSlugs} />
<div>All Guilds</div>
</>
)}
<NavList guilds={sortedGuildSlugs} />
<ReactTooltip id={tooltipId} />
</Scrollbars>
</div>
);
};