Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design System Clean #1 #541

Merged
merged 16 commits into from
Jul 11, 2023
Merged
17 changes: 1 addition & 16 deletions api/data/import.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,13 @@ import { parse } from "csv-parse/sync";
// @ts-ignore
import type { Readable } from "node:stream";

export const config = {
api: {
bodyParser: false,
},
};

/**
* Receives text/csv content in post request
* Needs to parse it
*/
export default async function (req: VercelRequest, res: VercelResponse) {
if (req.method === "POST") {
const buf = await buffer(req);
const rawBody = buf.toString("utf8");
const rawBody = req.body?.text;
if (!rawBody) {
res.status(400).end("Bad Request");
return;
Expand Down Expand Up @@ -65,11 +58,3 @@ export default async function (req: VercelRequest, res: VercelResponse) {
res.status(405).end("Method Not Allowed");
}
}

async function buffer(readable: Readable) {
const chunks = [];
for await (const chunk of readable) {
chunks.push(typeof chunk === "string" ? Buffer.from(chunk) : chunk);
}
return Buffer.concat(chunks);
}
5 changes: 1 addition & 4 deletions app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,6 @@
"@radix-ui/react-tabs": "^1.0.1",
"@radix-ui/react-toggle": "^0.1.4",
"@radix-ui/react-tooltip": "^1.0.6",
"@reach/dialog": "^0.15.0",
"@reach/tooltip": "^0.16.0",
"@reach/utils": "^0.16.0",
"@reach/visually-hidden": "^0.16.0",
"@react-hook/throttle": "^2.2.0",
"@sendgrid/mail": "^7.4.6",
"@sentry/react": "^7.38.0",
Expand All @@ -67,6 +63,7 @@
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"buffer": "^6.0.3",
"classnames": "^2.3.2",
"core-js": "^3.18.1",
"cytoscape": "^3.25.0",
"cytoscape-cose-bilkent": "^4.1.0",
Expand Down
27 changes: 18 additions & 9 deletions app/src/components/App.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Provider as TooltipProvider } from "@radix-ui/react-tooltip";
import * as Sentry from "@sentry/react";
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
Expand All @@ -14,13 +15,14 @@ export const stripePromise = loadStripe(
process.env.REACT_APP_STRIPE_KEY as string
);

import { t } from "@lingui/macro";
import { Trans } from "@lingui/macro";
import { House, Recycle } from "phosphor-react";
import { ReactQueryDevtools } from "react-query/devtools";
import { BrowserRouter } from "react-router-dom";

import { Button2 } from "../ui/Shared";
import Loading from "./Loading";
import { pageHeight } from "./pageHeight";
import { Button } from "./Shared";

pageHeight();

Expand All @@ -33,7 +35,9 @@ export default function App() {
<I18n>
<Elements stripe={stripePromise}>
<Suspense fallback={<Loading />}>
<Router />
<TooltipProvider>
<Router />
</TooltipProvider>
<ReactQueryDevtools />
</Suspense>
</Elements>
Expand All @@ -59,16 +63,21 @@ export function ErrorFallback({ error }: { error: Error }) {
<pre>{error.message}</pre>
</div>
<Box flow="column" gap={2}>
<Button
<Button2
onClick={() => window.location.reload()}
text={t`Try again`}
/>
<Button
color="blue"
leftIcon={<Recycle size={16} />}
>
<Trans>Try again</Trans>
</Button2>
<Button2
onClick={() => {
location.href = "/";
}}
text={t`Home`}
/>
leftIcon={<House size={16} />}
>
<Trans>Home</Trans>
</Button2>
</Box>
</Box>
</div>
Expand Down
71 changes: 32 additions & 39 deletions app/src/components/ClearTextButton.tsx
Original file line number Diff line number Diff line change
@@ -1,48 +1,41 @@
import { t, Trans } from "@lingui/macro";
import { Trans } from "@lingui/macro";
import * as Dialog from "@radix-ui/react-dialog";
import { Trash } from "phosphor-react";
import { useState } from "react";

import { Box } from "../slang";
import styles from "./ClearTextButton.module.css";
import { Button, Dialog, smallIconSize } from "./Shared";
import { Content, Overlay } from "../ui/Dialog";
import { Button2, IconButton2 } from "../ui/Shared";
import { SectionTitle } from "../ui/Typography";

export function ClearTextButton({ handleClear }: { handleClear: () => void }) {
const [dialogOpen, setDialogOpen] = useState(false);
return (
<>
<Box
as="button"
p={2}
rad={1}
className={styles.ClearTextButton}
onClick={() => setDialogOpen((x) => !x)}
>
<Trash size={smallIconSize} />
</Box>
<Dialog
innerBoxProps={{
gap: 3,
flow: "column",
items: "center normal",
template: "auto / minmax(0, 1fr) min-content min-content",
}}
dialogProps={{
isOpen: dialogOpen,
onDismiss: () => setDialogOpen(false),
"aria-label": t`Clear text?`,
}}
>
<Trans>Clear text?</Trans>
<Button
onClick={() => {
handleClear();
setDialogOpen(false);
}}
className={styles.Clear}
text={t`Clear`}
/>
<Button onClick={() => setDialogOpen(false)} text={t`Cancel`} />
</Dialog>
</>
<Dialog.Root open={dialogOpen} onOpenChange={(open) => setDialogOpen(open)}>
<Dialog.Trigger asChild>
<IconButton2 className="!absolute bottom-1 right-1 md:hidden">
<Trash size={16} />
</IconButton2>
</Dialog.Trigger>
<Overlay />
<Content>
<SectionTitle>
<Trans>Clear text?</Trans>
</SectionTitle>
<div className="flex flex-row justify-between items-center">
<Button2 onClick={() => setDialogOpen(false)}>
<Trans>Cancel</Trans>
</Button2>
<Button2
onClick={() => {
handleClear();
setDialogOpen(false);
}}
color="red"
>
<Trans>Clear</Trans>
</Button2>
</div>
</Content>
</Dialog.Root>
);
}
15 changes: 7 additions & 8 deletions app/src/components/CloneButton.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import { Trans } from "@lingui/macro";
import { FaCopy } from "react-icons/fa";
import { CopySimple } from "phosphor-react";
import { useHistory } from "react-router-dom";

import { randomChartName, titleToLocalStorageKey } from "../lib/helpers";
import { docToString, useDoc } from "../lib/useDoc";
import { Button2 } from "../ui/Shared";

export function CloneButton() {
const { push } = useHistory();
const fullText = useDoc((s) => docToString(s));
return (
<button
className="px-4 py-2 text-sm font-medium text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 flex items-center gap-2"
<Button2
color="blue"
onClick={() => {
const newChartTitle = randomChartName();
window.localStorage.setItem(
Expand All @@ -19,11 +20,9 @@ export function CloneButton() {
);
push(`/${newChartTitle}`);
}}
rightIcon={<CopySimple size={16} />}
>
<FaCopy size={20} />
<span className="text font-bold">
<Trans>Clone</Trans>
</span>
</button>
<Trans>Clone</Trans>
</Button2>
);
}
89 changes: 0 additions & 89 deletions app/src/components/DialogButton.tsx

This file was deleted.

11 changes: 4 additions & 7 deletions app/src/components/EditorWrapper.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,6 @@
overflow: hidden;
}

.mightLose {
grid-template-rows: auto auto minmax(0, 1fr);
}

@media screen and (min-width: 800px) {
.EditorWrapper {
/* This is to avoid content going underneath the resizable handle */
Expand All @@ -29,7 +25,7 @@
width: 100%;
}

.HeaderTitle button:first-child {
.HeaderTitle > button:first-child {
overflow: hidden;
padding: 0;
}
Expand Down Expand Up @@ -75,8 +71,9 @@
.EditorWrapper [data-rename-button]:hover,
.EditorWrapper [data-rename-button]:focus-visible {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-underline-offset: 5px;
text-decoration-color: #bbb;
}

.EditorWrapper [data-rename-button]:focus {
Expand Down
Loading