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

add actions, reordering base interactions

Browse source
This commit is contained in:
41666 2021-07-06 09:59:04 -05:00
parent b0c8b2378b
commit 2d589b988f
26 changed files with 383 additions and 427 deletions
Download patch file Download diff file Expand all files Collapse all files

26
packages/design-system/molecules/editable-server-message/EditableServerMessage.stories.tsx Normal file
View file

@ -0,0 +1,26 @@
import * as React from 'react';
import { mastheadSlugs } from '../../fixtures/storyData';
import { EditableServerMessage } from './EditableServerMessage';
export default {
title: 'Molecules/Editable Server Message',
component: EditableServerMessage,
args: {
value: 'Hello World',
guild: mastheadSlugs[1],
},
};
export const editableServerMessage = (args) => {
const [value, setValue] = React.useState(args.value);
React.useEffect(() => {
setValue(args.value);
}, [args.value]);
return (
<EditableServerMessage
{...args}
value={value}
onChange={(message) => setValue(message)}
/>
);
};

37
packages/design-system/molecules/editable-server-message/EditableServerMessage.tsx Normal file
View file

@ -0,0 +1,37 @@
import { palette } from '@roleypoly/design-system/atoms/colors';
import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
import { MultilineTextInput } from '@roleypoly/design-system/atoms/text-input';
import {
AmbientLarge,
Text as TextTypo,
} from '@roleypoly/design-system/atoms/typography';
import { MessageBox } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
import { GuildSlug } from '@roleypoly/types';
import { GoEyeClosed } from 'react-icons/go';
type Props = {
guild: GuildSlug;
onChange: (newMessage: string) => void;
value: string;
};
export const EditableServerMessage = (props: Props) => (
<MessageBox>
<TextTypo>Server Message</TextTypo>
<MultilineTextInput
rows={2}
value={props.value}
onChange={(event) => props.onChange(event.target.value)}
placeholder={`Hey friend from ${props.guild.name}! Pick your roles!`}
>
{props.value}
</MultilineTextInput>
<AmbientLarge style={{ display: 'flex', color: palette.taupe600 }}>
Shows a message to your server members.
<FaderOpacity isVisible={props.value.trim().length === 0}>
&nbsp;Since the message is empty, this won't show up.&nbsp;&nbsp;&nbsp;
<GoEyeClosed style={{ position: 'relative', top: 2 }} />
</FaderOpacity>
</AmbientLarge>
</MessageBox>
);

1
packages/design-system/molecules/editable-server-message/index.ts Normal file
View file

@ -0,0 +1 @@
export * from './EditableServerMessage';

12
packages/design-system/molecules/editor-category-short/EditorCategoryShort.spec.tsx
View file

@ -1,12 +0,0 @@
import { mockCategory } from '@roleypoly/design-system/fixtures/storyData';
import { render } from '@testing-library/react';
import { EditorCategoryShort } from './EditorCategoryShort';
it('triggers onOpen when clicked', async () => {
const onOpen = jest.fn();
const view = render(<EditorCategoryShort category={mockCategory} onOpen={onOpen} />);
view.getByRole('menuitem')?.click();
expect(onOpen).toHaveBeenCalled();
});

30
packages/design-system/molecules/editor-category-short/EditorCategoryShort.stories.tsx
View file

@ -1,30 +0,0 @@
import { mockCategory } from '@roleypoly/design-system/fixtures/storyData';
import ReactTooltip from 'react-tooltip';
import styled from 'styled-components';
import { EditorCategoryShort } from './EditorCategoryShort';
const decorator = (story) => (
<Wrapper>
{story()}
<ReactTooltip />
</Wrapper>
);
export default {
title: 'Molecules/Short Category',
component: EditorCategoryShort,
args: {
category: mockCategory,
},
decorators: [decorator],
};
const Wrapper = styled.div`
box-shadow: 0 0 10px #000;
`;
export const shortEditor = (args) => <EditorCategoryShort {...args} />;
export const shortEditorHidden = (args) => <EditorCategoryShort {...args} />;
shortEditorHidden.args = {
category: { ...mockCategory, hidden: true },
};

60
packages/design-system/molecules/editor-category-short/EditorCategoryShort.styled.ts
View file

@ -1,60 +0,0 @@
import { transitions } from '@roleypoly/design-system/atoms/timings';
import styled from 'styled-components';
export const GrabberBox = styled.div`
display: flex;
align-items: center;
justify-content: center;
margin-right: 1em;
flex: 0;
cursor: grab;
position: relative;
::before {
content: '';
position: absolute;
top: -5px;
left: -8px;
width: 32px;
height: 32px;
background-color: rgba(0, 0, 0, 0.25);
opacity: 0;
border-radius: 50%;
transition: opacity ${transitions.actionable}s ease-in-out;
}
&:hover {
::before {
opacity: 1;
}
}
`;
export const Opener = styled.div`
opacity: 0;
transition: opacity ${transitions.actionable}s ease-in-out;
`;
export const Container = styled.div`
display: flex;
padding: 1em;
cursor: pointer;
&:hover {
${Opener} {
opacity: 1;
}
}
`;
export const Name = styled.div`
position: relative;
top: -2px;
margin-right: 1em;
`;
export const Flags = styled.div``;
export const Void = styled.div`
flex: 1;
`;

31
packages/design-system/molecules/editor-category-short/EditorCategoryShort.tsx
View file

@ -1,31 +0,0 @@
import { Category } from '@roleypoly/types';
import { DragEventHandler, MouseEventHandler } from 'react';
import { GoEyeClosed, GoGrabber, GoKebabHorizontal } from 'react-icons/go';
import {
Container,
Flags,
GrabberBox,
Name,
Opener,
Void,
} from './EditorCategoryShort.styled';
type ShortProps = {
category: Category;
onDrag?: DragEventHandler;
onOpen?: MouseEventHandler;
};
export const EditorCategoryShort = (props: ShortProps) => (
<Container onClick={props.onOpen} role="menuitem">
<GrabberBox onDrag={props.onDrag} role="button">
<GoGrabber />
</GrabberBox>
<Name>{props.category.name}</Name>
<Flags>{props.category.hidden && <GoEyeClosed data-tip="Hidden to Members" />}</Flags>
<Void />
<Opener role="button">
<GoKebabHorizontal />
</Opener>
</Container>
);

1
packages/design-system/molecules/editor-category-short/index.ts
View file

@ -1 +0,0 @@
export * from './EditorCategoryShort';

35
packages/design-system/molecules/editor-category/EditorCategory.stories.tsx
View file

@ -1,19 +1,30 @@
import * as React from 'react';
import { mockCategory, roleCategory, roleCategory2 } from '../../fixtures/storyData';
import { mockCategory, roleCategory } from '../../fixtures/storyData';
import { EditorCategory } from './EditorCategory';
export default {
title: 'Molecules/Editor/Category',
title: 'Molecules/Editor Category',
component: EditorCategory,
args: {
title: 'Pronouns',
roles: roleCategory,
category: mockCategory,
selectedRoles: [],
},
};
export const CategoryEditor = () => {
const [categoryData, setCategoryData] = React.useState(mockCategory);
return (
<EditorCategory
category={categoryData}
onChange={(category) => setCategoryData(category)}
uncategorizedRoles={roleCategory}
guildRoles={[...roleCategory, ...roleCategory2]}
/>
);
export const Default = (args) => {
return <EditorCategory {...args} />;
};
export const Single = (args) => {
return <EditorCategory {...args} type="single" />;
};
Single.args = {
type: 'single',
};
export const Multi = (args) => {
return <EditorCategory {...args} type="single" />;
};
Multi.args = {
type: 'multi',
};

25
packages/design-system/molecules/editor-category/EditorCategory.styled.ts
View file

@ -1,13 +1,20 @@
import styled from 'styled-components';
export const RoleContainer = styled.div`
export const Head = styled.div`
margin: 7px 5px;
line-height: 200%;
display: flex;
margin: 10px;
flex-wrap: wrap;
& > div {
/* This should be a Role element */
border: 1px solid rgba(0, 0, 0, 0.15);
margin: 1px;
}
align-items: center;
justify-content: space-between;
`;
export const HeadTitle = styled.div`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
`;
export const HeadSub = styled.div`
flex-shrink: 0;
margin-top: -4px;
`;

166
packages/design-system/molecules/editor-category/EditorCategory.tsx
View file

@ -1,142 +1,50 @@
import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
import { Popover } from '@roleypoly/design-system/atoms/popover';
import { Role } from '@roleypoly/design-system/atoms/role';
import { Space } from '@roleypoly/design-system/atoms/space';
import { TextInput, TextInputWithIcon } from '@roleypoly/design-system/atoms/text-input';
import { Toggle } from '@roleypoly/design-system/atoms/toggle';
import { TextInput } from '@roleypoly/design-system/atoms/text-input';
import { Text } from '@roleypoly/design-system/atoms/typography';
import { RoleSearch } from '@roleypoly/design-system/molecules/role-search';
import { Category, CategoryType, Role as RoleType } from '@roleypoly/types';
import { Category as CategoryT, Role as RoleT } from '@roleypoly/types';
import * as React from 'react';
import { GoSearch } from 'react-icons/go';
import { RoleContainer } from './EditorCategory.styled';
import ReactTooltip from 'react-tooltip';
import styled from 'styled-components';
import { Head, HeadTitle } from './EditorCategory.styled';
type Props = {
category: Category;
uncategorizedRoles: RoleType[];
guildRoles: RoleType[];
onChange: (category: Category) => void;
export type CategoryProps = {
title: string;
roles: RoleT[];
category: CategoryT;
selectedRoles: string[];
onChange: (updatedCategory: CategoryT) => void;
type: 'single' | 'multi';
};
const typeEnumToSwitch = (typeData: CategoryType) => {
if (typeData === CategoryType.Single) {
return 'Single';
} else {
return 'Multiple';
}
};
const Category = styled.div`
display: flex;
flex-wrap: wrap;
`;
const switchToTypeEnum = (typeData: 'Single' | 'Multiple') => {
if (typeData === 'Single') {
return CategoryType.Single;
} else {
return CategoryType.Multi;
}
};
const Container = styled.div`
overflow: hidden;
padding: 5px;
`;
export const EditorCategory = (props: Props) => {
const [roleSearchPopoverActive, setRoleSearchPopoverActive] = React.useState(false);
const [roleSearchTerm, updateSearchTerm] = React.useState('');
const onUpdate =
(key: keyof typeof props.category, pred?: (newValue: any) => any) =>
(newValue: any) => {
props.onChange({
...props.category,
[key]: pred ? pred(newValue) : newValue,
});
};
const handleRoleSelect = (role: RoleType) => {
setRoleSearchPopoverActive(false);
updateSearchTerm('');
props.onChange({
...props.category,
roles: [...props.category.roles, role.id],
});
};
const handleRoleDeselect = (role: RoleType) => () => {
props.onChange({
...props.category,
roles: props.category.roles.filter((x) => x !== role.id),
});
export const EditorCategory = (props: CategoryProps) => {
const updateValue = <T extends keyof CategoryT>(key: T, value: CategoryT[T]) => {
props.onChange({ ...props.category, [key]: value });
};
return (
<div>
<Text>Category Name</Text>
<TextInput
placeholder="Pronouns, Political, Colors..."
value={props.category.name}
onChange={onUpdate('name', (x) => x.target.value)}
/>
<Space />
<div>
<Toggle
state={props.category.type === CategoryType.Multi}
onChange={onUpdate('type', (x) =>
x ? CategoryType.Multi : CategoryType.Single
)}
>
Allow users to pick multiple roles
</Toggle>
</div>
<Space />
<div>
<Toggle state={props.category.hidden} onChange={onUpdate('hidden')}>
Hide category from users
</Toggle>
</div>
<Space />
<Text>Roles</Text>
<Popover
position={'top left'}
headContent={null}
active={roleSearchPopoverActive}
onExit={() => setRoleSearchPopoverActive(false)}
>
{() => (
<RoleSearch
placeholder={'Type or drag a role...'}
roles={props.uncategorizedRoles}
onSelect={handleRoleSelect}
searchTerm={roleSearchTerm}
onSearchUpdate={(newTerm) => updateSearchTerm(newTerm)}
<>
<Head>
<HeadTitle>
<div>
<Text>Category Name</Text>
</div>
<TextInput
value={props.category.name}
onChange={(event) => updateValue('name', event.target.value)}
/>
)}
</Popover>
<FaderOpacity isVisible={!roleSearchPopoverActive}>
<TextInputWithIcon
icon={<GoSearch />}
placeholder={'Type or drag a role...'}
onFocus={() => setRoleSearchPopoverActive(true)}
value={roleSearchTerm}
onChange={(x) => updateSearchTerm(x.target.value)}
/>
<RoleContainer>
{props.category.roles.map((id) => {
const role = props.guildRoles.find((x) => x.id === id);
if (!role) {
return <></>;
}
return (
<Role
role={role}
selected={false}
key={id}
type="delete"
onClick={handleRoleDeselect(role)}
/>
);
})}
</RoleContainer>
</FaderOpacity>
</div>
</HeadTitle>
</Head>
<Category></Category>
<ReactTooltip id={props.category.id} />
</>
);
};

2
packages/design-system/molecules/editor-category/index.ts
View file

@ -1 +1 @@
export * from './EditorCategory';
export { EditorCategory } from './EditorCategory';