mirror of
https://github.com/roleypoly/roleypoly.git
synced 2025-04-24 19:39:11 +00:00
storybook and template fixes
This commit is contained in:
parent
7371b5e490
commit
0e2c981560
11 changed files with 69 additions and 30 deletions
2
.github/workflows/build.yml
vendored
2
.github/workflows/build.yml
vendored
|
|
@ -62,6 +62,8 @@ jobs:
|
|||
- ui
|
||||
- bot
|
||||
steps:
|
||||
- uses: actions/checkout@master
|
||||
|
||||
- uses: actions/cache@v2
|
||||
with:
|
||||
path: /tmp/.buildx-cache
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
const path = require('path');
|
||||
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
|
||||
const { NormalModuleReplacementPlugin } = require('webpack');
|
||||
|
||||
module.exports = {
|
||||
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
|
||||
|
|
@ -11,6 +12,11 @@ module.exports = {
|
|||
}),
|
||||
];
|
||||
|
||||
config.resolve.alias['next/link'] = path.resolve(
|
||||
__dirname,
|
||||
'mocks/next_link.tsx'
|
||||
);
|
||||
|
||||
return config;
|
||||
},
|
||||
typescript: {
|
||||
|
|
|
|||
8
.storybook/mocks/next_link.tsx
Normal file
8
.storybook/mocks/next_link.tsx
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import * as React from 'react';
|
||||
|
||||
type Props = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
const Link = (props: Props) => <>{props.children}</>;
|
||||
|
||||
export default Link;
|
||||
|
|
@ -31,6 +31,7 @@ As for infrastructure:
|
|||
|
||||
- CI/CD process deploys all pieces.
|
||||
- Discord Bot is deployed on a Google Cloud VM
|
||||
- UI & Backend is deployed via a Cloudflare Worker
|
||||
- Backend is deployed via a Cloudflare Worker
|
||||
- UI is deployed via Google Cloud Run
|
||||
|
||||
Biggest thing to note: this "discord bot" is an optional piece of the system, and should always remain as such. Giving it responsibility has actual engineering and dollar cost.
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import {
|
|||
RoleSafety,
|
||||
RoleypolyUser,
|
||||
CategoryType,
|
||||
GuildSlug,
|
||||
} from '.';
|
||||
|
||||
export const roleCategory: Role[] = [
|
||||
|
|
@ -139,9 +140,8 @@ export const roleWikiData = {
|
|||
|
||||
export const guild: Guild = {
|
||||
name: 'emoji megaporium',
|
||||
id: 'aaa',
|
||||
icon:
|
||||
'https://cdn.discordapp.com/icons/421896162539470888/3372fd895ed913b55616c5e49cd50e60.png?size=256',
|
||||
id: '421896162539470888',
|
||||
icon: '3372fd895ed913b55616c5e49cd50e60',
|
||||
ownerid: 'bbb',
|
||||
membercount: 23453,
|
||||
splash: '',
|
||||
|
|
@ -151,9 +151,8 @@ export const guildMap: { [x: string]: Guild } = {
|
|||
'emoji megaporium': guild,
|
||||
Roleypoly: {
|
||||
name: 'Roleypoly',
|
||||
id: 'aaa',
|
||||
icon:
|
||||
'https://cdn.discordapp.com/icons/203493697696956418/ff08d36f5aee1ff48f8377b65d031ab0.png?size=256',
|
||||
id: '203493697696956418',
|
||||
icon: 'ff08d36f5aee1ff48f8377b65d031ab0',
|
||||
ownerid: 'bbb',
|
||||
membercount: 23453,
|
||||
splash: '',
|
||||
|
|
@ -168,9 +167,8 @@ export const guildMap: { [x: string]: Guild } = {
|
|||
},
|
||||
Eclipse: {
|
||||
name: 'Eclipse',
|
||||
id: 'aaa',
|
||||
icon:
|
||||
'https://cdn.discordapp.com/icons/408821059161423873/49dfdd8b2456e2977e80a8b577b19c0d.png?size=256',
|
||||
id: '408821059161423873',
|
||||
icon: '49dfdd8b2456e2977e80a8b577b19c0d',
|
||||
ownerid: 'bbb',
|
||||
membercount: 23453,
|
||||
splash: '',
|
||||
|
|
@ -185,11 +183,10 @@ export const guildData: GuildData = {
|
|||
};
|
||||
|
||||
export const user: DiscordUser = {
|
||||
id: '123',
|
||||
username: 'okano cat',
|
||||
discriminator: '3266',
|
||||
avatar:
|
||||
'https://cdn.discordapp.com/avatars/62601275618889728/b1292bb974557337702cb941fc038085.png',
|
||||
id: '62601275618889728',
|
||||
username: 'okano',
|
||||
discriminator: '0001',
|
||||
avatar: 'ca2028bab0fe30e1af4392f3fa3576e2',
|
||||
bot: false,
|
||||
};
|
||||
|
||||
|
|
@ -239,3 +236,12 @@ export const guildEnum: GuildEnumeration = {
|
|||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const mastheadSlugs: GuildSlug[] = guildEnum.guildsList.map<GuildSlug>(
|
||||
(guild, idx) => ({
|
||||
id: guild.guild.id,
|
||||
name: guild.guild.name,
|
||||
icon: guild.guild.icon,
|
||||
permissionLevel: idx % 3,
|
||||
})
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,16 @@
|
|||
export const initialsFromName = (name: string) =>
|
||||
name
|
||||
.split(' ')
|
||||
.slice(0, 2)
|
||||
.map((x) => x[0])
|
||||
.join('')
|
||||
.toUpperCase();
|
||||
!!name
|
||||
? name
|
||||
.split(' ')
|
||||
.slice(0, 2)
|
||||
.map((x) => x[0])
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
: '';
|
||||
|
||||
export const avatarHash = (id: string, hash: string) =>
|
||||
`https://cdn.discordapp.com/icons/${id}/${hash}.webp?size=256`;
|
||||
export const avatarHash = (
|
||||
id: string,
|
||||
hash: string,
|
||||
bucket: 'icons' | 'avatars' = 'icons',
|
||||
size: number = 256
|
||||
) => `https://cdn.discordapp.com/${bucket}/${id}/${hash}.webp?size=${size}`;
|
||||
|
|
|
|||
|
|
@ -276,7 +276,7 @@ export const BicycleDay: Variant = {
|
|||
export const Christmas: Variant = {
|
||||
// Dec 20-27
|
||||
activeIf: (currentDate?: Date) =>
|
||||
true || matchDay(new Date('2021-Dec-20'), new Date('2021-Dec-28'), currentDate),
|
||||
matchDay(new Date('2021-Dec-20'), new Date('2021-Dec-28'), currentDate),
|
||||
sharedProps: {
|
||||
circleFill: palette.green200,
|
||||
circleOuterFill: palette.red200,
|
||||
|
|
|
|||
|
|
@ -16,7 +16,10 @@ export const ServerMasthead = (props: ServerMastheadProps) => {
|
|||
return (
|
||||
<Wrapper>
|
||||
<Icon>
|
||||
<Avatar size={props.editable ? 60 : 48} src={guild.icon}>
|
||||
<Avatar
|
||||
size={props.editable ? 60 : 48}
|
||||
src={utils.avatarHash(guild.id, guild.icon, 'icons', 512)}
|
||||
>
|
||||
{utils.initialsFromName(props.guild.name)}
|
||||
</Avatar>
|
||||
</Icon>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,10 @@ export const UserAvatarGroup = (props: Props) => (
|
|||
</GroupText>
|
||||
|
||||
</Collapse>
|
||||
<Avatar size={34} src={props.user.avatar}>
|
||||
<Avatar
|
||||
size={34}
|
||||
src={utils.avatarHash(props.user.id, props.user.avatar, 'avatars')}
|
||||
>
|
||||
{utils.initialsFromName(props.user.username)}
|
||||
</Avatar>
|
||||
</Group>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export const Authed = (props: Props) => {
|
|||
<MastheadBase>
|
||||
<MastheadAlignment>
|
||||
<MastheadLeft>
|
||||
<Link href="/dashboard" passHref>
|
||||
<Link href="/dashboard" passHref prefetch={false}>
|
||||
<MastheadA>
|
||||
<DynamicLogomark height={35} />
|
||||
</MastheadA>
|
||||
|
|
@ -75,7 +75,9 @@ export const Authed = (props: Props) => {
|
|||
}}
|
||||
hide={!userPopoverState}
|
||||
>
|
||||
{props.user && <UserAvatarGroup user={props.user} />}
|
||||
{props.user !== undefined && (
|
||||
<UserAvatarGroup user={props.user} />
|
||||
)}
|
||||
</InteractionBase>
|
||||
<Popover
|
||||
headContent={<></>}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,9 @@ import {
|
|||
member,
|
||||
guildRoles,
|
||||
guild,
|
||||
rpUser,
|
||||
user,
|
||||
guildEnum,
|
||||
mastheadSlugs,
|
||||
} from 'roleypoly/common/types/storyData';
|
||||
|
||||
const props: RolePickerTemplateProps = {
|
||||
|
|
@ -17,9 +18,10 @@ const props: RolePickerTemplateProps = {
|
|||
},
|
||||
member: member,
|
||||
guild: guild,
|
||||
guilds: mastheadSlugs,
|
||||
roles: guildRoles,
|
||||
editable: false,
|
||||
user: rpUser,
|
||||
user: user,
|
||||
guildEnumeration: guildEnum,
|
||||
activeGuildId: guild.id,
|
||||
onSubmit: () => {},
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue