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

fix all linting issues, upgrade most packages

Browse source
This commit is contained in:
41666 2022-01-30 04:53:13 -05:00
parent c7774ddca3
commit 3c3af304f7
45 changed files with 1148 additions and 1848 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.prettierignore
View file

@ -6,3 +6,4 @@ worker
**/dist
terraform
.husky/_
.mf

14
.stylelintrc
View file

@ -1,6 +1,16 @@
{
"extends": ["stylelint-config-standard", "stylelint-config-styled-components", "stylelint-prettier/recommended"],
"customSyntax": "@stylelint/postcss-css-in-js",
"extends": [
"stylelint-config-recommended",
"stylelint-config-styled-components"
],
"rules": {
"value-keyword-case": null
"color-function-notation": "modern",
"shorthand-property-no-redundant-values": true,
"font-weight-notation": "numeric",
"alpha-value-notation": "percentage",
"hue-degree-notation": "angle",
"function-calc-no-unspaced-operator": true,
"length-zero-no-unit": true
}
}

39
package.json
View file

@ -18,31 +18,34 @@
],
"scripts": {
"build": "run-p -c build:*",
"build:api": "yarn workspace @roleypoly/api run build",
"build:design-system": "yarn workspace @roleypoly/design-system run build",
"build:web": "yarn workspace @roleypoly/web run build",
"create-component": "yarn workspace @roleypoly/design-system run create-component",
"lint": "run-p -c lint:* --",
"lint:eslint": "eslint",
"lint:prettier": "cross-env prettier -c '**/*.{ts,tsx,css,yml,yaml,md,json,js,jsx,sh,gitignore,mdx,Dockerfile}'",
"lint:stylelint": "cross-env stylelint '**/*.{ts,tsx}'",
"lint:terraform": "terraform fmt -recursive -check ./terraform",
"lint:stylelint": "cross-env stylelint 'packages/{web,design-system}/**/*.{ts,tsx}'",
"lint:terraform": "terraform fmt -check -recursive",
"lint:types": "tsc --noEmit",
"lint:types-api": "yarn workspace @roleypoly/api run lint:types",
"lint:types-interactions": "yarn workspace @roleypoly/interactions run lint:types",
"lint:types-worker-utils": "yarn workspace @roleypoly/worker-utils run lint:types",
"postinstall": "is-ci || husky install",
"start": "run-p -c start:*",
"start:bot": "yarn workspace @roleypoly/bot start",
"start:design-system": "yarn workspace @roleypoly/design-system start",
"start:interactions": "yarn workspace @roleypoly/interactions start",
"start:web": "yarn workspace @roleypoly/web start",
"start:worker": "yarn workspace @roleypoly/api start",
"test": "jest"
"test": "run-p -c test:* --",
"test:api": "yarn workspace @roleypoly/api run test",
"test:design-system": "yarn workspace @roleypoly/design-system run test",
"test:misc-utils": "yarn workspace @roleypoly/misc-utils run test",
"test:web": "yarn workspace @roleypoly/web run test"
},
"devDependencies": {
"@types/enzyme": "^3.10.9",
"@types/lodash": "^4.14.171",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
"@stylelint/postcss-css-in-js": "^0.37.2",
"@types/enzyme": "^3.10.11",
"@types/lodash": "^4.14.178",
"@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"husky": "^7.0.4",
@ -51,17 +54,17 @@
"jest-enzyme": "^7.1.2",
"jest-react-hooks-shallow": "^1.5.1",
"jest-styled-components": "^7.0.8",
"lint-staged": "^11.0.0",
"lint-staged": "^12.3.2",
"npm-run-all": "^4.1.5",
"prettier": "^2.3.2",
"prettier-plugin-organize-imports": "^2.2.0",
"prettier-plugin-pkg": "^0.10.0",
"prettier-plugin-sh": "^0.7.1",
"stylelint": "^13.13.1",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-standard": "^22.0.0",
"postcss-syntax": "^0.36.2",
"prettier": "^2.5.1",
"prettier-plugin-organize-imports": "^2.3.4",
"prettier-plugin-pkg": "^0.11.1",
"prettier-plugin-sh": "^0.8.1",
"stylelint": "^14.3.0",
"stylelint-config-recommended": "^6.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-prettier": "^1.2.0",
"stylelint-processor-styled-components": "^1.10.0",
"ts-jest": "^27.1.3",
"typescript": "^4.5.5"
},

6
packages/api/jest.config.js
View file

@ -1,15 +1,13 @@
module.exports = {
preset: 'ts-jest/presets/default-esm',
name: 'api',
rootDir: '../../',
testEnvironment: 'miniflare',
testEnvironmentOptions: {
wranglerConfigPath: 'packages/api/wrangler.toml',
envPath: '.env',
envPath: '../../.env',
},
globals: {
'ts-jest': {
tsconfig: '<rootDir>/packages/api/tsconfig.test.json',
tsconfig: '<rootDir>/tsconfig.test.json',
useESM: true,
},
},

10
packages/api/package.json
View file

@ -6,18 +6,16 @@
"scripts": {
"build": "yarn build:dev --minify",
"build:dev": "esbuild --bundle --sourcemap --platform=node --format=esm --outdir=dist --out-extension:.js=.mjs ./src/index.ts",
"dev": "miniflare --watch --debug",
"lint:types": "tsc --noEmit"
"lint:types": "tsc --noEmit",
"start": "miniflare --watch --debug",
"test": "jest"
},
"dependencies": {},
"devDependencies": {
"@cloudflare/workers-types": "^3.3.1",
"@roleypoly/misc-utils": "*",
"@roleypoly/types": "*",
"@roleypoly/worker-utils": "*",
"@types/deep-equal": "^1.0.1",
"@types/node": "^13.13.0",
"deep-equal": "^2.0.5",
"@types/node": "^17.0.13",
"esbuild": "^0.14.14",
"itty-router": "^2.4.10",
"jest-environment-miniflare": "^2.2.0",

1
packages/api/src/guilds/audit-logging.ts
View file

@ -0,0 +1 @@
export {};

5
packages/api/src/routes/~template/template.spec.ts
View file

@ -1,5 +0,0 @@
describe('GET /~template', () => {
it('returns Not Implemented when called', () => {
expect(true).toBe(true);
});
});

6
packages/api/src/routes/~template/template.ts
View file

@ -1,6 +0,0 @@
import { Context, RoleypolyHandler } from '@roleypoly/api/src/utils/context';
import { notImplemented } from '@roleypoly/api/src/utils/response';
export const template: RoleypolyHandler = async (request: Request, context: Context) => {
return notImplemented();
};

102
packages/backend-emulator/kv.js
View file

@ -1,102 +0,0 @@
const level = require('level');
const path = require('path');
const fs = require('fs');
let hasWarned = false;
const getConversion = {
text: (x) => x,
json: (x) => JSON.parse(x),
arrayBuffer: (x) => Buffer.from(x).buffer,
stream: (x) => Buffer.from(x),
};
class KVShim {
constructor(namespace) {
this.namespace = namespace;
fs.mkdirSync(path.resolve(__dirname, '../../.devdbs'), {
recursive: true,
});
(async () => {
this.level = level(path.resolve(__dirname, '../../.devdbs', namespace));
})();
}
makeValue(value, expirationTtl) {
if (!expirationTtl) {
return JSON.stringify({
value,
expires: false,
});
}
return JSON.stringify({
value,
expires: Date.now() + 1000 * expirationTtl,
});
}
validate(value) {
if (!value) {
return false;
}
if (value.expires && value.expires < Date.now()) {
return false;
}
return true;
}
async get(key, type = 'text') {
try {
const result = JSON.parse(await this.level.get(key));
if (!this.validate(result)) {
return null;
}
return getConversion[type](result.value);
} catch (e) {
return null;
}
}
async getWithMetadata(key, type) {
return {
value: await this.get(key, type),
metadata: {},
};
}
async put(key, value, { expirationTtl, expiration, metadata }) {
if ((expiration || metadata) && !hasWarned) {
console.warn(
'expiration and metadata is lost in the emulator. Use expirationTtl, please.'
);
hasWarned = true;
}
return await this.level.put(key, this.makeValue(value, expirationTtl));
}
// This loses scope for some unknown reason
delete = async (key) => {
return this.level.del(key);
};
list() {
console.warn('List is frowned upon and will fail to fetch keys in the emulator.');
return {
keys: [],
cursor: '0',
list_complete: true,
};
}
}
module.exports = {
KVShim,
};

212
packages/backend-emulator/main.js
View file

@ -1,212 +0,0 @@
#!/usr/bin/env node
const path = require('path');
require('dotenv').config({ path: path.resolve(__dirname, '../../.env') });
const vm = require('vm');
const http = require('http');
const fs = require('fs');
const chokidar = require('chokidar');
const webpack = require('webpack');
const { Crypto } = require('@peculiar/webcrypto');
const { KVShim } = require('./kv');
const crypto = new Crypto();
const fetch = require('node-fetch');
const args = require('minimist')(process.argv.slice(2));
const basePath = args.basePath || process.cwd();
if (!basePath) {
throw new Error('--basePath is not set.');
}
const workerConfig = require(`${basePath}/worker.config.js`);
const getKVs = (namespaces = []) =>
namespaces.reduce((acc, ns) => ({ ...acc, [ns]: new KVShim(ns) }), {});
const workerShims = {
...workerConfig.environment,
...getKVs(workerConfig.kv),
};
let listeners = [];
let isResponseConstructorAllowed = false;
/**
* SafeResponse wraps a fetch Response to yell loudly if constructed at an unsafe time.
* Cloudflare will reject all Response objects that aren't created during a request, so no pre-generation is allowed.
*/
class SafeResponse extends fetch.Response {
constructor(...args) {
super(...args);
if (!isResponseConstructorAllowed) {
throw new Error(
'Response object created outside of request context. This will be rejected by Cloudflare.'
);
}
}
}
const context = () =>
vm.createContext(
{
addEventListener: (a, fn) => {
if (a === 'fetch') {
console.log('addEventListeners: added fetch');
listeners.push(fn);
}
},
Response: SafeResponse,
URL: URL,
crypto: crypto,
setTimeout: setTimeout,
setInterval: setInterval,
clearInterval: clearInterval,
clearTimeout: clearTimeout,
fetch: fetch,
console: console,
...workerShims,
},
{
codeGeneration: {
strings: false,
wasm: false,
},
}
);
const server = http.createServer((req, res) => {
const event = {
respondWith: async (value) => {
const timeStart = Date.now();
let loggedStatus;
try {
const response = await value;
if (!response) {
throw new Error(`response was invalid, got ${JSON.stringify(response)}`);
}
res.statusCode = response.status;
loggedStatus = String(response.status);
response.headers.forEach((value, key) => res.setHeader(key, value));
res.end(response.body);
} catch (e) {
console.error(e);
res.statusCode = 500;
loggedStatus = '500';
res.end(JSON.stringify({ error: 'internal server error' }));
}
const timeEnd = Date.now();
console.log(
`${loggedStatus} [${timeEnd - timeStart}ms] - ${req.method} ${req.url}`
);
isResponseConstructorAllowed = false;
},
waitUntil: async (promise) => {
await promise;
},
request: new fetch.Request(
new URL(`http://${req.headers.host || 'localhost'}${req.url}`),
{
body: ['GET', 'HEAD'].includes(req.method) ? undefined : req,
headers: req.headers,
method: req.method,
}
),
};
event.request.headers.set('cf-client-ip', req.connection.remoteAddress);
if (listeners.length === 0) {
res.statusCode = 503;
res.end('No handlers are available.');
console.error('No handlers are available');
return;
}
isResponseConstructorAllowed = true;
for (let listener of listeners) {
try {
listener(event);
} catch (e) {
console.error('listener errored', e);
}
}
});
const fork = async (fn) => fn();
const reload = () => {
// Clear listeners...
listeners = [];
// Fork and re-run
fork(async () =>
vm.runInContext(
fs.readFileSync(path.resolve(__dirname, `${basePath}/dist/worker.js`)),
context(),
{
displayErrors: true,
filename: 'worker.js',
}
)
);
};
const rebuild = () =>
new Promise((resolve, reject) => {
const webpackConfig = require(`${basePath}/webpack.config.js`);
webpackConfig.output.filename = 'worker.js';
webpack(webpackConfig).run((err, stats) => {
if (err) {
console.log('Compilation failed.', err);
reject(err);
} else {
if (stats.hasErrors()) {
console.error('Compilation errored:', stats.compilation.errors);
}
console.log('Compilation done.');
resolve();
}
});
});
const watcher = chokidar.watch(path.resolve(__dirname, basePath), {
ignoreInitial: true,
ignore: '**/dist',
});
let currentlyRebuilding = false;
watcher.on('all', async (type, path) => {
if (path.includes('node_modules') || path.includes('dist')) {
return;
}
if (currentlyRebuilding) {
console.info('change skipped...', { type, path });
return;
}
currentlyRebuilding = true;
if (path.includes('dist')) {
return;
}
console.log('change detected, rebuilding and reloading', { type, path });
await rebuild();
reload();
currentlyRebuilding = false;
});
fork(async () => {
await rebuild();
reload();
});
const port = args.port || 6609;
console.log(`starting on http://localhost:${port}`);
server.listen(port, '0.0.0.0');

20
packages/backend-emulator/package.json
View file

@ -1,20 +0,0 @@
{
"name": "@roleypoly/worker-emulator",
"version": "0.1.0",
"bin": {
"cfw-emulator": "./main.js"
},
"scripts": {
"build": "node main.js --build",
"start": "node main.js"
},
"devDependencies": {
"@peculiar/webcrypto": "^1.1.7",
"chokidar": "^3.5.2",
"dotenv": "^10.0.0",
"level": "^7.0.0",
"minimist": "^1.2.5",
"node-fetch": "^2.6.1",
"webpack": "4.44.2"
}
}

4
packages/design-system/atoms/avatar/Avatar.styled.ts
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};
`}

12
packages/design-system/atoms/button/Button.styled.ts
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};

2
packages/design-system/atoms/colors/colors.stories.tsx
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;

2
packages/design-system/atoms/dot-overlay/DotOverlay.tsx
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;

2
packages/design-system/atoms/fader/Fader.tsx
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;
`;

4
packages/design-system/atoms/hero/Hero.stories.tsx
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,

4
packages/design-system/atoms/placeholder/Placeholder.tsx
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%;
}
`;

10
packages/design-system/atoms/popover/Popover.styled.ts
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%);
}
`;

4
packages/design-system/atoms/role/Role.styled.tsx
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`

2
packages/design-system/atoms/tab-view/TabView.styled.ts
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;
`;

10
packages/design-system/atoms/text-input/TextInput.tsx
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;
`;

2
packages/design-system/atoms/toggle/Toggle.styled.tsx
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;

2
packages/design-system/atoms/typography/typography.stories.tsx
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 = () => (

9
packages/design-system/atoms/typography/typography.tsx
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;
`;

6
jest.config.js → packages/design-system/jest.config.js
View file

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

12
packages/design-system/molecules/demo-discord/DemoDiscord.styled.ts
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%;
}
`;

6
packages/design-system/molecules/demo-picker/DemoPicker.tsx
View file

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

4
packages/design-system/molecules/editable-role-list/EditableRoleList.styled.ts
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;
`};
`}
`;

6
packages/design-system/molecules/editor-category/EditorCategory.styled.ts
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;
`};
`}
`;

4
packages/design-system/molecules/footer/Footer.styled.ts
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;
}
`;

4
packages/design-system/molecules/server-listing-card/ServerListingCard.styled.ts
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);
}

4
packages/design-system/molecules/server-utilities/ServerUtilities.styled.ts
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``;

7
packages/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts
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};
`;

1
packages/design-system/organisms/landing/Landing.styled.ts
View file

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

6
packages/design-system/organisms/masthead/Masthead.styled.tsx
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`

4
packages/design-system/organisms/server-category-editor/ServerCategoryEditor.styled.ts
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%);
}
`;

3
packages/design-system/organisms/server-setup/ServerSetup.styled.ts
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;
`;

1
packages/design-system/organisms/servers-listing/ServersListing.styled.ts
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;

41
packages/design-system/package.json
View file

@ -4,45 +4,46 @@
"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",
"ksuid": "^3.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-components": "^5.3.3",
"styled-normalize": "^8.0.7"
},
"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",
"@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/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",
"babel-loader": "^8.2.3",
"babel-plugin-styled-components": "^2.0.2",
"change-case": "^4.1.2",
"tslint": "^6.1.3",
"typescript": "^4.5.5"

13
packages/misc-utils/jest.config.js Normal file
View file

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

3
packages/misc-utils/package.json
View file

@ -1,6 +1,9 @@
{
"name": "@roleypoly/misc-utils",
"version": "0.1.0",
"scripts": {
"test": "jest"
},
"dependencies": {
"@roleypoly/types": "*"
},

13
packages/web/jest.config.js Normal file
View file

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

30
packages/web/package.json
View file

@ -5,13 +5,13 @@
"scripts": {
"build": "cross-env BUILD_PATH=../../dist craco build",
"start": "cross-env PORT=6601 craco start",
"test": "craco test"
"test": "jest"
},
"dependencies": {
"@reach/router": "^1.3.4",
"@roleypoly/design-system": "*",
"@roleypoly/misc-utils": "*",
"memoize-one": "^5.2.1",
"memoize-one": "^6.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
@ -20,21 +20,21 @@
"web-vitals": "^2.1.4"
},
"devDependencies": {
"@plpaquin/craco": "5.0.0-next.1",
"@craco/craco": "^7.0.0-alpha.0",
"@roleypoly/types": "*",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.0.0",
"@testing-library/user-event": "^13.1.9",
"@types/jest": "^26.0.24",
"@types/node": "^16.0.1",
"@types/react": "^17.0.14",
"@types/react-dom": "^17.0.9",
"@types/react-helmet": "^6.1.2",
"babel-loader": "8.1.0",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.4.0",
"@types/node": "^17.0.13",
"@types/reach__router": "^1.3.10",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"@types/react-helmet": "^6.1.5",
"babel-loader": "8.2.3",
"cross-env": "7.0.3",
"exponential-backoff": "^3.1.0",
"ts-loader": "^8.3.0",
"webpack": "4.44.2"
"ts-loader": "^9.2.6",
"webpack": "5.67.0"
},
"browserslist": {
"production": [

2337
yarn.lock
View file

File diff suppressed because it is too large Load diff