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
|
|
@ -0,0 +1,44 @@
|
|||
jest.unmock('@roleypoly/design-system/atoms/role')
|
||||
.unmock('@roleypoly/design-system/atoms/button')
|
||||
.unmock('@roleypoly/design-system/molecules/picker-category')
|
||||
.unmock('@roleypoly/design-system/organisms/role-picker');
|
||||
|
||||
import { Role } from '@roleypoly/design-system/atoms/role';
|
||||
import { PickerCategory } from '@roleypoly/design-system/molecules/picker-category';
|
||||
import { ResetSubmit } from '@roleypoly/design-system/molecules/reset-submit';
|
||||
import { shallow } from 'enzyme';
|
||||
import * as React from 'react';
|
||||
import {
|
||||
guildData,
|
||||
mastheadSlugs,
|
||||
member,
|
||||
mockCategorySingle,
|
||||
roleCategory,
|
||||
roleCategory2,
|
||||
} from '../../fixtures/storyData';
|
||||
import { RolePicker, RolePickerProps } from './RolePicker';
|
||||
|
||||
it('unselects the rest of a category in single mode', () => {
|
||||
const props: RolePickerProps = {
|
||||
guildData: { ...guildData, categories: [mockCategorySingle] },
|
||||
member: { ...member, roles: [] },
|
||||
roles: [...roleCategory, ...roleCategory2],
|
||||
guild: mastheadSlugs[0],
|
||||
onSubmit: jest.fn(),
|
||||
editable: false,
|
||||
};
|
||||
|
||||
const view = shallow(<RolePicker {...props} />);
|
||||
|
||||
const roles = view.find(PickerCategory).dive().find(Role);
|
||||
|
||||
roles.first().props().onClick?.(true);
|
||||
|
||||
view.find(ResetSubmit).props().onSubmit();
|
||||
expect(props.onSubmit).toBeCalledWith([mockCategorySingle.roles[0]]);
|
||||
|
||||
roles.at(1).props().onClick?.(true);
|
||||
|
||||
view.find(ResetSubmit).props().onSubmit();
|
||||
expect(props.onSubmit).toBeCalledWith([mockCategorySingle.roles[1]]);
|
||||
});
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import * as React from 'react';
|
||||
import {
|
||||
guild,
|
||||
guildData,
|
||||
member,
|
||||
roleCategory,
|
||||
roleCategory2,
|
||||
} from '../../fixtures/storyData';
|
||||
import { RolePicker, RolePickerProps } from './RolePicker';
|
||||
|
||||
const props: Partial<RolePickerProps> = {
|
||||
guildData: guildData,
|
||||
member: member,
|
||||
guild: guild,
|
||||
roles: [...roleCategory, ...roleCategory2],
|
||||
editable: false,
|
||||
};
|
||||
|
||||
const noMessageArgs: Partial<RolePickerProps> = {
|
||||
...props,
|
||||
guildData: {
|
||||
...guildData,
|
||||
message: '',
|
||||
},
|
||||
};
|
||||
|
||||
const noCategoriesArgs: Partial<RolePickerProps> = {
|
||||
...props,
|
||||
guildData: {
|
||||
...guildData,
|
||||
categoriesList: [],
|
||||
},
|
||||
};
|
||||
|
||||
const emptyArgs = {
|
||||
...props,
|
||||
guildData: {
|
||||
...guildData,
|
||||
categoriesList: [],
|
||||
message: '',
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
title: 'Organisms/Role Picker',
|
||||
args: props,
|
||||
component: RolePicker,
|
||||
};
|
||||
|
||||
export const Full = (args) => <RolePicker {...args} />;
|
||||
export const EditableFull = (args) => <RolePicker {...args} />;
|
||||
EditableFull.args = {
|
||||
editable: true,
|
||||
};
|
||||
export const NoMessage = (args) => <RolePicker {...args} />;
|
||||
NoMessage.args = noMessageArgs;
|
||||
export const NoCategories = (args) => <RolePicker {...args} />;
|
||||
NoCategories.args = noCategoriesArgs;
|
||||
export const Empty = (args) => <RolePicker {...args} />;
|
||||
Empty.args = emptyArgs;
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import { palette } from '@roleypoly/design-system/atoms/colors';
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Container = styled.div``;
|
||||
|
||||
export const Box = styled.div`
|
||||
background-color: ${palette.taupe300};
|
||||
padding: 5px;
|
||||
margin: 5px 0;
|
||||
`;
|
||||
|
||||
export const MessageBox = styled(Box)`
|
||||
padding: 10px;
|
||||
`;
|
||||
|
||||
export const CategoryContainer = styled(Box)``;
|
||||
|
||||
export const InfoBox = styled(MessageBox)`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const InfoIcon = styled.div`
|
||||
flex-shrink: 0;
|
||||
font-size: 1.75em;
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: ${palette.taupe500};
|
||||
`;
|
||||
|
||||
export const Buttons = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
151
packages/design-system/organisms/role-picker/RolePicker.tsx
Normal file
151
packages/design-system/organisms/role-picker/RolePicker.tsx
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
|
||||
import { Space } from '@roleypoly/design-system/atoms/space';
|
||||
import { Link } from '@roleypoly/design-system/atoms/typography';
|
||||
import { PickerCategory } from '@roleypoly/design-system/molecules/picker-category';
|
||||
import { ResetSubmit } from '@roleypoly/design-system/molecules/reset-submit';
|
||||
import { ServerMasthead } from '@roleypoly/design-system/molecules/server-masthead';
|
||||
import { ReactifyNewlines } from '@roleypoly/misc-utils/ReactifyNewlines';
|
||||
import { sortBy } from '@roleypoly/misc-utils/sortBy';
|
||||
import {
|
||||
Category,
|
||||
CategoryType,
|
||||
GuildData,
|
||||
GuildSlug,
|
||||
Member,
|
||||
Role,
|
||||
} from '@roleypoly/types';
|
||||
import { isEqual, xor } from 'lodash';
|
||||
import * as React from 'react';
|
||||
import { GoInfo } from 'react-icons/go';
|
||||
import {
|
||||
CategoryContainer,
|
||||
Container,
|
||||
InfoBox,
|
||||
InfoIcon,
|
||||
MessageBox,
|
||||
} from './RolePicker.styled';
|
||||
|
||||
export type RolePickerProps = {
|
||||
guild: GuildSlug;
|
||||
guildData: GuildData;
|
||||
member: Member;
|
||||
roles: Role[];
|
||||
onSubmit: (selectedRoles: string[]) => void;
|
||||
editable: boolean;
|
||||
};
|
||||
|
||||
export const RolePicker = (props: RolePickerProps) => {
|
||||
const [selectedRoles, updateSelectedRoles] = React.useState<string[]>(
|
||||
props.member.roles
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!isEqual(props.member.roles, selectedRoles)) {
|
||||
updateSelectedRoles(props.member.roles);
|
||||
}
|
||||
}, [props.member.roles]);
|
||||
|
||||
const handleChange = (category: Category) => (role: Role) => (newState: boolean) => {
|
||||
if (category.type === CategoryType.Single) {
|
||||
updateSelectedRoles(
|
||||
newState === true
|
||||
? [
|
||||
...selectedRoles.filter((x) => !category.roles.includes(x)),
|
||||
role.id,
|
||||
]
|
||||
: selectedRoles.filter((x) => x !== role.id)
|
||||
);
|
||||
} else {
|
||||
updateSelectedRoles(
|
||||
newState === true
|
||||
? [...selectedRoles, role.id]
|
||||
: selectedRoles.filter((x) => x !== role.id)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Space />
|
||||
<ServerMasthead guild={props.guild} editable={props.editable} />
|
||||
<Space />
|
||||
{props.guildData.message && (
|
||||
<>
|
||||
<MessageBox>
|
||||
<ReactifyNewlines>{props.guildData.message}</ReactifyNewlines>
|
||||
</MessageBox>
|
||||
<Space />
|
||||
</>
|
||||
)}
|
||||
|
||||
{props.guildData.categories.length !== 0 ? (
|
||||
<>
|
||||
<div>
|
||||
{sortBy(
|
||||
props.guildData.categories.filter(
|
||||
(category) => !category.hidden
|
||||
),
|
||||
'position'
|
||||
).map((category, idx) => (
|
||||
<CategoryContainer key={idx}>
|
||||
<PickerCategory
|
||||
key={idx}
|
||||
category={category}
|
||||
title={category.name}
|
||||
selectedRoles={selectedRoles.filter((roleId) =>
|
||||
category.roles.includes(roleId)
|
||||
)}
|
||||
roles={
|
||||
category.roles
|
||||
.map((role) =>
|
||||
props.roles.find((r) => r.id === role)
|
||||
)
|
||||
.filter((r) => r !== undefined) as Role[]
|
||||
}
|
||||
onChange={handleChange(category)}
|
||||
wikiMode={false}
|
||||
type={
|
||||
category.type === CategoryType.Single
|
||||
? 'single'
|
||||
: 'multi'
|
||||
}
|
||||
/>
|
||||
</CategoryContainer>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
<FaderOpacity
|
||||
isVisible={
|
||||
xor(selectedRoles, props.member.roles).length !== 0
|
||||
}
|
||||
>
|
||||
<ResetSubmit
|
||||
onSubmit={() => props.onSubmit(selectedRoles)}
|
||||
onReset={() => {
|
||||
updateSelectedRoles(props.member.roles);
|
||||
}}
|
||||
/>
|
||||
</FaderOpacity>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<InfoBox>
|
||||
<InfoIcon>
|
||||
<GoInfo />
|
||||
</InfoIcon>
|
||||
<div>
|
||||
There are currently no roles available for you to choose from.
|
||||
{props.editable && (
|
||||
<>
|
||||
{' '}
|
||||
<a href={`/s/${props.guild.id}/edit`}>
|
||||
<Link>Add some roles!</Link>
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</InfoBox>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
1
packages/design-system/organisms/role-picker/index.ts
Normal file
1
packages/design-system/organisms/role-picker/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './RolePicker';
|
||||
Loading…
Add table
Add a link
Reference in a new issue