big overhaul (#474)

* miniflare init

* feat(api): add tests

* chore: more tests, almost 100%

* add sessions/state spec

* add majority of routes and datapaths, start on interactions

* nevermind, no interactions

* nevermind x2, tweetnacl is bad but SubtleCrypto has what we need apparently

* simplify interactions verify

* add brute force interactions tests

* every primary path API route is refactored!

* automatically import from legacy, or die trying.

* check that we only fetch legacy once, ever

* remove old-src, same some historic pieces

* remove interactions & worker-utils package, update misc/types

* update some packages we don't need specific pinning for anymore

* update web references to API routes since they all changed

* fix all linting issues, upgrade most packages

* fix tests, divorce enzyme where-ever possible

* update web, fix integration issues

* pre-build api

* fix tests

* move api pretest to api package.json instead of CI

* remove interactions from terraform, fix deploy side configs

* update to tf 1.1.4

* prevent double writes to worker in GCS, port to newer GCP auth workflow

* fix api.tf var refs, upgrade node action

* change to curl-based script upload for worker script due to terraform provider limitations

* oh no, cloudflare freaked out :(
This commit is contained in:
41666 2022-01-31 20:35:22 -05:00 committed by GitHub
parent b644a38aa7
commit 3291f9aacc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
183 changed files with 9853 additions and 9924 deletions

View file

@ -16,7 +16,7 @@ export const Container = styled.div<ContainerProps>`
color: ${palette.grey100};
position: relative;
background-color: ${palette.grey500};
font-weight: bold;
font-weight: 700;
text-align: center;
line-height: 1;
overflow: hidden;
@ -24,7 +24,7 @@ export const Container = styled.div<ContainerProps>`
${(props) =>
props.deliberatelyEmpty &&
css`
border: 4px solid rgba(0, 0, 0, 0.25);
border: 4px solid rgb(0 0 0 / 25%);
background-color: ${palette.taupe400};
color: ${palette.taupe600};
`}

View file

@ -31,7 +31,7 @@ export const BreakpointsProvider = (props: { children: React.ReactNode }) => {
};
updateScreenSize();
setImmediate(() => updateScreenSize());
setTimeout(() => updateScreenSize(), 0);
mediaQueries.onDesktop.addEventListener('change', updateScreenSize);
mediaQueries.onTablet.addEventListener('change', updateScreenSize);

View file

@ -25,7 +25,7 @@ const base = css`
background-color: ${palette.taupe300};
color: ${palette.grey500};
border-radius: 3px;
border: 2px solid rgba(0, 0, 0, 0.55);
border: 2px solid rgb(0 0 0 / 55%);
transition: all 0.15s ease-in-out;
outline: 0;
position: relative;
@ -41,20 +41,20 @@ const base = css`
left: 0;
right: 0;
background-color: #000;
opacity: 0;
opacity: 0%;
transition: all 0.15s ease-in-out;
}
:hover {
transform: translateY(-1px);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
}
:active {
transform: translateY(1px);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 0 2px rgb(0 0 0 / 25%);
::after {
opacity: 0.1;
opacity: 10%;
}
}
`;
@ -70,7 +70,7 @@ const colors = {
border: 2px solid ${palette.discord200};
`,
muted: css`
border: 2px solid rgba(0, 0, 0, 0.15);
border: 2px solid rgb(0 0 0 / 15%);
background: none;
:hover {
background-color: ${palette.taupe200};

View file

@ -15,7 +15,7 @@ export default {
};
const Swatch = styled.div`
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
box-shadow: 1px 1px 2px rgb(0 0 0 / 25%);
width: 250px;
height: 100px;
margin: 10px;

View file

@ -3,7 +3,7 @@ import * as React from 'react';
import styled from 'styled-components';
const dotOverlayBase = styled.div`
opacity: 0.6;
opacity: 60%;
pointer-events: none;
position: fixed;
top: 0;

View file

@ -7,7 +7,7 @@ export type FaderProps = {
};
const FaderOpacityStyled = styled.div<Pick<FaderProps, 'isVisible'>>`
opacity: ${(props) => (props.isVisible ? 1 : 0)};
opacity: ${(props) => (props.isVisible ? '100%' : '0%')};
pointer-events: ${(props) => (props.isVisible ? 'unset' : 'none')};
transition: opacity 0.35s ease-in-out;
`;

View file

@ -41,7 +41,7 @@ const StoryWrapper = ({ topSpacing, bottomSpacing, ...props }: WrapperProps) =>
<div
style={{
height: topSpacing,
backgroundColor: 'rgba(255,0,0,0.25)',
backgroundColor: 'rgb(255 0 0 / 25%)',
top: 0,
left: 0,
right: 0,
@ -54,7 +54,7 @@ const StoryWrapper = ({ topSpacing, bottomSpacing, ...props }: WrapperProps) =>
<div
style={{
height: bottomSpacing,
backgroundColor: 'rgba(0,0,255,0.25)',
backgroundColor: 'rgb(0 0 255 / 25%)',
bottom: 0,
left: 0,
right: 0,

View file

@ -41,10 +41,10 @@ export const PlaceholderBox = styled.div<PlaceholderProps>`
export const opacityInOut = keyframes`
from {
opacity: 0.6;
opacity: 60%;
}
to {
opacity: 0.3;
opacity: 30%;
}
`;

View file

@ -13,7 +13,7 @@ export const PopoverBase = styled.div<PopoverStyledProps>`
position: absolute;
background-color: ${palette.taupe100};
padding: 5px;
border: 2px solid rgba(0, 0, 0, 0.15);
border: 2px solid rgb(0 0 0 / 15%);
border-radius: 3px;
z-index: 10;
transition: opacity ${transitions.out2in}s ease-in,
@ -24,7 +24,7 @@ export const PopoverBase = styled.div<PopoverStyledProps>`
!props.active &&
css`
transform: translateY(-2vh);
opacity: 0;
opacity: 0%;
pointer-events: none;
`}
${onSmallScreen(
@ -40,11 +40,11 @@ export const PopoverBase = styled.div<PopoverStyledProps>`
z-index: 200;
margin: 0 !important;
`
)};
)}
`;
export const DefocusHandler = styled.div<PopoverStyledProps>`
background-color: rgba(0, 0, 0, 0.01);
background-color: rgb(0 0 0 / 1%);
position: fixed;
z-index: 0;
top: 0;
@ -82,7 +82,7 @@ export const PopoverHeadCloser = styled.div`
)}
&:hover {
background: rgba(0, 0, 0, 0.1);
background: rgb(0 0 0 / 10%);
}
`;

View file

@ -62,7 +62,7 @@ export const Outer = styled.div<StyledProps>`
? onTablet(css`
&:hover {
transform: translateY(-2px);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
${Circle} svg {
fill-opacity: 1;
}
@ -73,7 +73,7 @@ export const Outer = styled.div<StyledProps>`
box-shadow: 0 0 0 transparent;
}
`)
: null};
: null}
`;
export const Text = styled.div`

View file

@ -65,7 +65,7 @@ export const TabContent = styled.div`
export const TabContentTitle = styled.div`
${text500}
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgb(0 0 0 / 10%);
padding: 0.5em 7px;
`;

View file

@ -21,13 +21,13 @@ const common = css`
:focus {
outline: none;
border-color: ${palette.grey100};
box-shadow: 1px 0 3px rgba(0, 0, 0, 0.25);
box-shadow: 1px 0 3px rgb(0 0 0 / 25%);
}
[disabled],
:disabled {
cursor: not-allowed;
color: rgba(255, 255, 255, 0.75);
color: rgb(255 255 255 / 75%);
font-style: italic;
}
@ -41,7 +41,7 @@ const common = css`
`;
export const StyledTextInput = styled.input`
${common};
${common}
`;
type TextInputProps<T extends HTMLInputElement | HTMLTextAreaElement> =
@ -87,8 +87,8 @@ export const TextInputWithIcon = (props: TextInputWithIconProps) => {
};
const StyledTextarea = styled.textarea`
${common};
${fontCSS};
${common}
${fontCSS}
margin: 0.5em 0;
`;

View file

@ -24,7 +24,7 @@ export const ToggleSwitch = styled.div<{ state: boolean }>`
width: 2.675rem;
border-radius: 1.375rem;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.1);
border: 1px solid rgb(0 0 0 / 10%);
top: 0.23em;
transition: background-color ${transitions.in2in}s ease-in-out;
cursor: pointer;

View file

@ -87,7 +87,7 @@ const SpacingHead = styled.p`
const SpacingSection = styled(Section)`
max-width: 50vw;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
border-bottom: 1px solid rgb(0 0 0 / 25%);
`;
export const Spacing = () => (

View file

@ -14,55 +14,46 @@ const reset = css`
export const text900 = css`
${reset}
font-size: 2.3rem;
`;
export const text800 = css`
${reset}
font-size: 2rem;
`;
export const text700 = css`
${reset}
font-size: 1.7rem;
`;
export const text600 = css`
${reset}
font-size: 1.4rem;
`;
export const text500 = css`
${reset}
font-size: 1.2rem;
`;
export const text400 = css`
${reset}
font-size: 1rem;
`;
export const text300 = css`
${reset}
font-size: 0.9rem;
`;
export const text200 = css`
${reset}
font-size: 0.7rem;
`;
export const text100 = css`
${reset}
font-size: 0.5rem;
`;

View file

@ -0,0 +1,5 @@
import '@testing-library/jest-dom';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import Enzyme from 'enzyme';
Enzyme.configure({ adapter: new Adapter() });

View file

@ -0,0 +1,17 @@
module.exports = {
name: 'design-system',
preset: 'ts-jest/presets/js-with-ts',
testEnvironment: 'jsdom',
reporters: ['default'],
setupFilesAfterEnv: [
'jest-styled-components',
'../../hack/jestSetup.ts',
'./hack/jestSetup.ts',
],
snapshotSerializers: ['enzyme-to-json/serializer'],
globals: {
'ts-jest': {
tsconfig: '../../tsconfig.test.json',
},
},
};

View file

@ -3,7 +3,7 @@ import styled, { keyframes } from 'styled-components';
export const Base = styled.div`
background-color: ${palette.discord100};
border: solid 1px rgba(0, 0, 0, 0.15);
border: solid 1px rgb(0 0 0 / 15%);
border-radius: 3px;
padding: 10px;
user-select: none;
@ -12,7 +12,7 @@ export const Base = styled.div`
export const Timestamp = styled.span`
padding: 0 5px;
font-size: 0.7em;
opacity: 0.3;
opacity: 30%;
`;
export const TextParts = styled.span`
@ -35,19 +35,19 @@ export const InputBox = styled.div`
const lineBlink = keyframes`
0% {
opacity: 1;
opacity: 100%;
}
40% {
opacity: 1;
opacity: 100%;
}
60% {
opacity: 0;
opacity: 0%;
}
100% {
opacity: 0;
opacity: 0%;
}
`;

View file

@ -19,11 +19,9 @@ const RoleWrap = styled.div`
`;
export const DemoPicker = () => {
const [selectedStates, setSelectedStates] = React.useState<
{
[key in RPCRole['id']]: boolean;
}
>(demoData.reduce((acc, role) => ({ ...acc, [role.id]: false }), {}));
const [selectedStates, setSelectedStates] = React.useState<{
[key in RPCRole['id']]: boolean;
}>(demoData.reduce((acc, role) => ({ ...acc, [role.id]: false }), {}));
return (
<Container>

View file

@ -24,7 +24,7 @@ export const AddRoleButton = styled.div<{ long?: boolean }>`
&:hover {
background-color: ${palette.taupe100};
transform: translateY(-2px);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}
&:active {
@ -39,5 +39,5 @@ export const AddRoleButton = styled.div<{ long?: boolean }>`
`
: css`
width: 32px;
`};
`}
`;

View file

@ -40,7 +40,7 @@ export const Section = styled.div<{ big?: boolean; actions?: boolean }>`
props.actions &&
css`
display: flex;
`};
`}
`;
export const RoleContainer = styled.div`
@ -65,7 +65,7 @@ export const AddRoleButton = styled.div<{ long?: boolean }>`
&:hover {
background-color: ${palette.taupe100};
transform: translateY(-2px);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}
&:active {
@ -80,5 +80,5 @@ export const AddRoleButton = styled.div<{ long?: boolean }>`
`
: css`
width: 32px;
`};
`}
`;

View file

@ -19,12 +19,12 @@ export const FooterWrapper = styled.div`
`;
export const HoverColor = styled.div`
opacity: 0.3;
opacity: 30%;
filter: saturate(0);
transition: all ${transitions.in2in}s ease-in-out;
&:hover {
opacity: 1;
opacity: 100%;
filter: none;
}
`;

View file

@ -75,11 +75,11 @@ export const CardBase = styled.div`
box-sizing: border-box;
max-width: 98vw;
:hover {
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
transform: translate(0, -1px);
}
:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
transform: translate(0);
}

View file

@ -20,7 +20,7 @@ export const ClickaleBlock = styled.a`
`;
export const Title = styled.div`
${text400};
${text400}
svg {
color: ${palette.taupe500};
@ -30,7 +30,7 @@ export const Title = styled.div`
`;
export const Description = styled.div`
${text200};
${text200}
`;
export const MainSide = styled.div``;

View file

@ -6,7 +6,7 @@ import {
} from '@roleypoly/design-system/molecules/server-utilities/ServerUtilities.styled';
import { hasFeature } from '@roleypoly/misc-utils/hasFeature';
import { Features, GuildData } from '@roleypoly/types';
import { GoArchive, GoChevronRight, GoReport, GoShield, GoSync } from 'react-icons/go';
import { GoArchive, GoChevronRight, GoReport, GoShield } from 'react-icons/go';
type Props = {
guildData: GuildData;
@ -54,25 +54,17 @@ export const ServerUtilities = (props: Props) => (
link={`/s/${props.guildData.id}/edit/audit-logging`}
/>
)}
<Utility
title={
<>
<GoSync />
&nbsp;&nbsp;Import from Roleypoly Legacy
</>
}
description="Used Roleypoly before and don't see your categories?"
link={`/s/${props.guildData.id}/edit/import-from-legacy`}
/>
<Utility
title={
<>
<GoArchive />
&nbsp;&nbsp;Manage your Data
</>
}
description="Export or delete all of your Roleypoly data."
link={`/s/${props.guildData.id}/edit/data`}
/>
{hasFeature(props.guildData.features, Features.Preview) && (
<Utility
title={
<>
<GoArchive />
&nbsp;&nbsp;Manage your Data
</>
}
description="Export or delete all of your Roleypoly data."
link={`/s/${props.guildData.id}/edit/data`}
/>
)}
</div>
);

View file

@ -6,7 +6,7 @@ import styled, { css, keyframes } from 'styled-components';
export const DiscordBase = styled.div`
background-color: ${palette.discord100};
border: solid 1px rgba(0, 0, 0, 0.15);
border: solid 1px rgb(0 0 0 / 15%);
border-radius: 3px;
padding: 10px;
user-select: none;
@ -54,7 +54,7 @@ export const DiscordRole = styled.div<{
!props.isGood &&
props.isRoleypoly &&
css`
animation: ${isBadFlash} 0.5s 10s ease-in-out both;
animation: ${isBadFlash.getName()} 0.5s 10s ease-in-out both;
`}
`;
@ -66,16 +66,13 @@ const bumpDown = css`
export const Dont = styled(GoX)`
${bumpDown}
color: ${palette.red400};
`;
export const Do = styled(GoCheck)`
${bumpDown}
color: ${palette.green400};
`;
export const Why = styled(GoQuestion)`
${bumpDown}
color: ${palette.discord400};
`;

View file

@ -10,7 +10,6 @@ export const HeroText = styled.div`
export const DemoSubtitle = styled.p`
${text400}
text-align: center;
margin-top: 0.4em;
`;

View file

@ -59,10 +59,10 @@ export const InteractionBase = styled.div<InteractionBaseProps>`
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)};
opacity: ${(props) => (props.hide ? '100%' : '0%')};
:hover {
background-color: rgba(0, 0, 0, 0.15);
background-color: rgb(0 0 0 / 15%);
cursor: pointer;
}
`;
@ -97,7 +97,7 @@ export const SecondaryBase = styled(MastheadBase)`
background-color: ${palette.taupe300};
z-index: 99;
padding: 0 15px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
box-shadow: 1px 1px 3px rgb(0 0 0 / 5%);
`;
export const IconHolder = styled.div`

View file

@ -14,7 +14,7 @@ export const CategoryActions = styled.div<{ right?: boolean }>`
`
: css`
margin-right: 5px;
`};
`}
}
${(props) =>
@ -37,7 +37,7 @@ export const ReorderButton = styled.div`
transition: background-color ${transitions.actionable}s ease-in-out;
&:hover {
background-color: rgba(0, 0, 0, 0.15);
background-color: rgb(0 0 0 / 15%);
}
`;

View file

@ -11,12 +11,12 @@ import {
Role,
RoleSafety,
} from '@roleypoly/types';
import KSUID from 'ksuid';
import { flatten, sortBy } from 'lodash';
import React from 'react';
import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
import { CgReorder } from 'react-icons/cg';
import { GoArrowDown, GoArrowUp, GoCheck, GoGrabber, GoPlus } from 'react-icons/go';
import { ulid } from 'ulidx';
import {
CategoryActions,
ReorderButton,
@ -70,7 +70,7 @@ export const ServerCategoryEditor = (props: Props) => {
const newCategory: Category = {
...defaultCategory,
id: KSUID.randomSync().string,
id: ulid(),
position: categories.length,
};
@ -96,7 +96,7 @@ export const ServerCategoryEditor = (props: Props) => {
if (c.id === category.id) {
return {
...defaultCategory,
id: KSUID.randomSync().string,
id: ulid(),
position: category.position,
};
}

View file

@ -9,6 +9,5 @@ export const FlexLine = styled.div`
export const FlexWrap = styled.div`
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex-flow: wrap column;
`;

View file

@ -26,7 +26,6 @@ export const CardContainer = styled.div`
export const SectionHead = styled.div`
${text500}
flex: 1 1 100%;
padding: 0.6em;
display: flex;

View file

@ -4,47 +4,57 @@
"scripts": {
"build": "build-storybook -o ../../dist/-/storybook",
"create-component": "node ./hack/create-component.js",
"start": "start-storybook -p 6006"
"start": "start-storybook -p 6006",
"test": "jest"
},
"dependencies": {
"@roleypoly/types": "*",
"chroma-js": "^2.1.2",
"chroma-js": "^2.3.0",
"deep-equal": "^2.0.5",
"isomorphic-unfetch": "^3.1.0",
"ksuid": "^2.0.0",
"lodash": "^4.17.21",
"react": "^17.0.2",
"react-beautiful-dnd": "^13.1.0",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-icons": "^4.2.0",
"react-icons": "^4.3.1",
"react-is": "^17.0.2",
"react-tooltip": "^4.2.21",
"styled-components": "^5.3.0",
"styled-normalize": "^8.0.7"
"styled-components": "^5.3.3",
"styled-normalize": "^8.0.7",
"ulidx": "^0.3.0"
},
"devDependencies": {
"@icons/material": "^0.4.1",
"@storybook/addon-actions": "^6.3.3",
"@storybook/addon-essentials": "^6.3.3",
"@storybook/addon-links": "^6.3.3",
"@storybook/addons": "^6.3.3",
"@storybook/react": "^6.3.3",
"@storybook/theming": "^6.3.3",
"@storybook/addon-actions": "^6.4.16",
"@storybook/addon-essentials": "^6.4.16",
"@storybook/addon-links": "^6.4.16",
"@storybook/addons": "^6.4.16",
"@storybook/react": "^6.4.16",
"@storybook/theming": "^6.4.16",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@types/chroma-js": "^2.1.3",
"@types/deep-equal": "^1.0.1",
"@types/node": "^16.0.1",
"@types/react": "^17.0.14",
"@types/react-beautiful-dnd": "^13.1.1",
"@types/react-custom-scrollbars": "^4.0.8",
"@types/react-dom": "^17.0.9",
"@types/react-helmet": "^6.1.2",
"@types/styled-components": "^5.1.11",
"babel-loader": "8.1.0",
"babel-plugin-styled-components": "^1.13.1",
"@types/enzyme": "^3.10.11",
"@types/lodash": "^4.14.178",
"@types/node": "^17.0.13",
"@types/react": "^17.0.38",
"@types/react-beautiful-dnd": "^13.1.2",
"@types/react-custom-scrollbars": "^4.0.10",
"@types/react-dom": "^17.0.11",
"@types/react-helmet": "^6.1.5",
"@types/styled-components": "^5.1.21",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
"babel-loader": "^8.2.3",
"babel-plugin-styled-components": "^2.0.2",
"change-case": "^4.1.2",
"tslint": "^6.1.3",
"typescript": "^4.3.5"
"enzyme": "^3.11.0",
"enzyme-to-json": "^3.6.2",
"jest": "^27.4.7",
"jest-styled-components": "^7.0.8",
"typescript": "^4.5.5"
}
}

View file

@ -0,0 +1,7 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"jsx": "react-jsx"
}
// "exclude": ["node_modules"]
}