mirror of
https://github.com/roleypoly/roleypoly.git
synced 2025-06-15 09:09:10 +00:00
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:
parent
b644a38aa7
commit
3291f9aacc
183 changed files with 9853 additions and 9924 deletions
|
@ -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};
|
||||
`}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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};
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
`;
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
@ -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%);
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
@ -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`
|
||||
|
|
|
@ -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;
|
||||
`;
|
||||
|
||||
|
|
|
@ -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;
|
||||
`;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 = () => (
|
||||
|
|
|
@ -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;
|
||||
`;
|
||||
|
||||
|
|
5
packages/design-system/hack/jestSetup.ts
Normal file
5
packages/design-system/hack/jestSetup.ts
Normal 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() });
|
17
packages/design-system/jest.config.js
Normal file
17
packages/design-system/jest.config.js
Normal 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',
|
||||
},
|
||||
},
|
||||
};
|
|
@ -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%;
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
`};
|
||||
`}
|
||||
`;
|
||||
|
|
|
@ -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;
|
||||
`};
|
||||
`}
|
||||
`;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
`;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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``;
|
||||
|
|
|
@ -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 />
|
||||
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 />
|
||||
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 />
|
||||
Manage your Data
|
||||
</>
|
||||
}
|
||||
description="Export or delete all of your Roleypoly data."
|
||||
link={`/s/${props.guildData.id}/edit/data`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -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};
|
||||
`;
|
||||
|
|
|
@ -10,7 +10,6 @@ export const HeroText = styled.div`
|
|||
|
||||
export const DemoSubtitle = styled.p`
|
||||
${text400}
|
||||
|
||||
text-align: center;
|
||||
margin-top: 0.4em;
|
||||
`;
|
||||
|
|
|
@ -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`
|
||||
|
|
|
@ -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%);
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
`;
|
||||
|
|
|
@ -26,7 +26,6 @@ export const CardContainer = styled.div`
|
|||
|
||||
export const SectionHead = styled.div`
|
||||
${text500}
|
||||
|
||||
flex: 1 1 100%;
|
||||
padding: 0.6em;
|
||||
display: flex;
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
7
packages/design-system/tsconfig.test.json
Normal file
7
packages/design-system/tsconfig.test.json
Normal file
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx"
|
||||
}
|
||||
// "exclude": ["node_modules"]
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue