diff --git a/.gitignore b/.gitignore index 235185cc8..d12e693eb 100644 --- a/.gitignore +++ b/.gitignore @@ -3,7 +3,8 @@ node_modules /.cache /build /public/build -.env +/.wrangler +.dev.vars /app/tailwind.css /jsonDocs .DS_Store diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md index 8dbf922f3..782809a56 100644 --- a/DEVELOPMENT.md +++ b/DEVELOPMENT.md @@ -56,19 +56,13 @@ First, install npm dependencies: npm install ``` -Run the following command to create the `.env` file with a new `SESSION_SECRET` environment variable: +Run the following command to create the `.dev.vars` file with a new `SESSION_SECRET` environment variable: ```bash -echo "SESSION_SECRET=$(openssl rand -hex 32)" > .env +echo "SESSION_SECRET=$(openssl rand -hex 32)" > .dev.vars ``` -Then, run `npm run build` or `npm run dev` to build. - -Start the development server: - -```bash -npm start -``` +Then, run `npm run dev` to build and run. You should now be able to access your local JSON Hero server on [localhost:8787](http://localhost:8787) diff --git a/app/assets/svgs/EyeIcon.svg b/app/assets/svgs/EyeIcon.svg index 087aaeab0..3082f517b 100644 --- a/app/assets/svgs/EyeIcon.svg +++ b/app/assets/svgs/EyeIcon.svg @@ -1,4 +1,6 @@ - + \ No newline at end of file diff --git a/app/assets/svgs/TickIcon.svg b/app/assets/svgs/TickIcon.svg index ca57a18c5..59ec1bbc7 100644 --- a/app/assets/svgs/TickIcon.svg +++ b/app/assets/svgs/TickIcon.svg @@ -1,3 +1,5 @@ - - + + \ No newline at end of file diff --git a/app/bindings.d.ts b/app/bindings.d.ts index 36789ec4d..0d753436a 100644 --- a/app/bindings.d.ts +++ b/app/bindings.d.ts @@ -1,9 +1,11 @@ -export {}; +// Generated by Wrangler on Fri Jun 21 2024 12:24:47 GMT+0200 (Central European Summer Time) +// by running `wrangler types app/bindings.d.ts` +export {}; declare global { - const DOCUMENTS: KVNamespace; - const SESSION_SECRET: string; - const GRAPH_JSON_API_KEY: string; - const GRAPH_JSON_COLLECTION: string; - const APIHERO_PROJECT_KEY: string; + const DOCUMENTS: KVNamespace; + const SESSION_SECRET: ""; + const SESSION_STORAGE: ""; + const GRAPH_JSON_API_KEY: ""; + const APIHERO_PROJECT_KEY: ""; } diff --git a/app/components/DocumentTitle.tsx b/app/components/DocumentTitle.tsx index 981abb4b0..24cb9feb1 100644 --- a/app/components/DocumentTitle.tsx +++ b/app/components/DocumentTitle.tsx @@ -1,6 +1,6 @@ import { PencilAltIcon } from "@heroicons/react/outline"; import { useEffect, useRef, useState } from "react"; -import { useFetcher } from "remix"; +import { useFetcher } from "@remix-run/react"; import { match } from "ts-pattern"; import { useJsonDoc } from "~/hooks/useJsonDoc"; diff --git a/app/components/DragAndDropForm.tsx b/app/components/DragAndDropForm.tsx index 6626cfa37..6d8363ffa 100644 --- a/app/components/DragAndDropForm.tsx +++ b/app/components/DragAndDropForm.tsx @@ -1,7 +1,7 @@ import { ArrowCircleDownIcon } from "@heroicons/react/outline"; import { useCallback, useRef } from "react"; -import { useDropzone } from "react-dropzone"; -import { Form, useSubmit } from "remix"; +import { useDropzone } from "react-dropzone-esm"; +import { Form, useSubmit } from "@remix-run/react"; import invariant from "tiny-invariant"; export function DragAndDropForm() { @@ -59,7 +59,7 @@ export function DragAndDropForm() { maxFiles: 1, maxSize: 1024 * 1024 * 1, multiple: false, - accept: "application/json", + accept: { "application/json": [".json"] }, }); return ( diff --git a/app/components/ExampleDoc.tsx b/app/components/ExampleDoc.tsx index d0f4dc446..f9e02414d 100644 --- a/app/components/ExampleDoc.tsx +++ b/app/components/ExampleDoc.tsx @@ -1,4 +1,4 @@ -import { Link } from "remix"; +import { Link } from "@remix-run/react"; export function ExampleDoc({ id, diff --git a/app/components/ExampleUrl.tsx b/app/components/ExampleUrl.tsx index 29251435e..026b0467c 100644 --- a/app/components/ExampleUrl.tsx +++ b/app/components/ExampleUrl.tsx @@ -1,4 +1,4 @@ -import { Form } from "remix"; +import { Form } from "@remix-run/react"; export function ExampleUrl({ url, diff --git a/app/components/FileSelector/FileDropzone.tsx b/app/components/FileSelector/FileDropzone.tsx index d3830af66..5a7bcd188 100644 --- a/app/components/FileSelector/FileDropzone.tsx +++ b/app/components/FileSelector/FileDropzone.tsx @@ -1,5 +1,5 @@ import { FunctionComponent, useCallback } from "react"; -import { useDropzone } from "react-dropzone"; +import { useDropzone } from "react-dropzone-esm"; import { DocumentDownloadIcon } from "@heroicons/react/outline"; export const FileDropzone: FunctionComponent = ({ children }) => { diff --git a/app/components/Header.tsx b/app/components/Header.tsx index da5f4f636..006273ee4 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -1,7 +1,6 @@ import { ShareIcon, PlusIcon, TrashIcon } from "@heroicons/react/outline"; import { DocumentTitle } from "./DocumentTitle"; import { DiscordIconTransparent } from "./Icons/DiscordIconTransparent"; -import { EmailIconTransparent } from "./Icons/EmailIconTransparent"; import { GithubStar } from "./UI/GithubStar"; import { Logo } from "./Icons/Logo"; import { Share } from "./Share"; @@ -12,7 +11,7 @@ import { PopoverContent, PopoverTrigger, } from "./UI/Popover"; -import { Form } from "remix"; +import { Form } from "@remix-run/react"; import { useJsonDoc } from "~/hooks/useJsonDoc"; import { LogoTriggerdotdev } from "./Icons/LogoTriggerdotdev"; diff --git a/app/components/Home/HomeFooter.tsx b/app/components/Home/HomeFooter.tsx index 27e9f58aa..458d6a738 100644 --- a/app/components/Home/HomeFooter.tsx +++ b/app/components/Home/HomeFooter.tsx @@ -1,4 +1,4 @@ -import { Link } from "remix"; +import { Link } from "@remix-run/react"; import { DiscordIcon } from "../Icons/DiscordIcon"; import { EmailIcon } from "../Icons/EmailIcon"; import { GithubIcon } from "../Icons/GithubIcon"; diff --git a/app/components/Icons/Logo.tsx b/app/components/Icons/Logo.tsx index 1b1b6bce2..37a390826 100644 --- a/app/components/Icons/Logo.tsx +++ b/app/components/Icons/Logo.tsx @@ -1,4 +1,4 @@ -import { Link } from "remix"; +import { Link } from "@remix-run/react"; export function Logo({ className, diff --git a/app/components/Icons/LogoTriggerdotdev.tsx b/app/components/Icons/LogoTriggerdotdev.tsx index e70b29e7b..096e7a707 100644 --- a/app/components/Icons/LogoTriggerdotdev.tsx +++ b/app/components/Icons/LogoTriggerdotdev.tsx @@ -59,8 +59,8 @@ export function LogoTriggerdotdev({ fill="#E2E8F0" /> diff --git a/app/components/JsonPreview.tsx b/app/components/JsonPreview.tsx index 3ec1d459a..713000f6d 100644 --- a/app/components/JsonPreview.tsx +++ b/app/components/JsonPreview.tsx @@ -1,4 +1,4 @@ -import { RangeSetBuilder } from "@codemirror/rangeset"; +import { RangeSetBuilder } from "@codemirror/state"; import { JSONHeroPath } from "@jsonhero/path"; import { useCodeMirror, diff --git a/app/components/PathPreview.tsx b/app/components/PathPreview.tsx index eb51f26c2..867280886 100644 --- a/app/components/PathPreview.tsx +++ b/app/components/PathPreview.tsx @@ -1,4 +1,4 @@ -import { ChevronRightIcon, EyeIcon } from "@heroicons/react/outline"; +import { ChevronRightIcon } from "@heroicons/react/outline"; import { useMemo } from "react"; import { useJsonColumnViewAPI } from "~/hooks/useJsonColumnView"; import { ColumnViewNode, IconComponent } from "~/useColumnView"; diff --git a/app/components/Preview/Types/PreviewHtml.tsx b/app/components/Preview/Types/PreviewHtml.tsx index 6fab1690d..861f65609 100644 --- a/app/components/Preview/Types/PreviewHtml.tsx +++ b/app/components/Preview/Types/PreviewHtml.tsx @@ -1,7 +1,7 @@ import { Body } from "~/components/Primitives/Body"; import { Title } from "~/components/Primitives/Title"; import { PreviewBox } from "../PreviewBox"; -import { PreviewHtml } from "./preview.types"; +import type { PreviewHtml } from "./preview.types"; export type PreviewHtmlProps = { info: PreviewHtml; diff --git a/app/components/Preview/Types/PreviewImage.tsx b/app/components/Preview/Types/PreviewImage.tsx index 444105c98..f1142d775 100644 --- a/app/components/Preview/Types/PreviewImage.tsx +++ b/app/components/Preview/Types/PreviewImage.tsx @@ -1,7 +1,7 @@ import { formatBytes } from "~/utilities/formatter"; import { PreviewBox } from "../PreviewBox"; import { PreviewProperties, PreviewProperty } from "../PreviewProperties"; -import { PreviewImage } from "./preview.types"; +import type { PreviewImage } from "./preview.types"; export type PreviewImageProps = { info: PreviewImage; diff --git a/app/components/Preview/Types/PreviewJson.tsx b/app/components/Preview/Types/PreviewJson.tsx index bdf5ff920..5a25fa88d 100644 --- a/app/components/Preview/Types/PreviewJson.tsx +++ b/app/components/Preview/Types/PreviewJson.tsx @@ -4,7 +4,7 @@ import { CopyTextButton } from "~/components/CopyTextButton"; import { OpenInNewWindow } from "~/components/OpenInWindow"; import { Body } from "~/components/Primitives/Body"; import { PreviewBox } from "../PreviewBox"; -import { PreviewJson } from "./preview.types"; +import type { PreviewJson } from "./preview.types"; export function PreviewJson({ preview }: { preview: PreviewJson }) { const [hovering, setHovering] = useState(false); diff --git a/app/components/Preview/Types/PreviewUri.tsx b/app/components/Preview/Types/PreviewUri.tsx index aaec69cfd..761840e05 100644 --- a/app/components/Preview/Types/PreviewUri.tsx +++ b/app/components/Preview/Types/PreviewUri.tsx @@ -1,6 +1,5 @@ import { JSONStringType } from "@jsonhero/json-infer-types/lib/@types"; -import { useEffect } from "react"; -import { useFetcher } from "remix"; +import { useFetcher } from "@remix-run/react"; import { Body } from "~/components/Primitives/Body"; import { useLoadWhenOnline } from "~/hooks/useLoadWhenOnline"; import { PreviewBox } from "../PreviewBox"; diff --git a/app/components/Primitives/Body.tsx b/app/components/Primitives/Body.tsx index 6bdc36587..3693ab2e3 100644 --- a/app/components/Primitives/Body.tsx +++ b/app/components/Primitives/Body.tsx @@ -1,6 +1,6 @@ -import { FunctionComponent } from "react"; +import { FunctionComponent, ReactNode } from "react"; -export const Body: FunctionComponent<{ className?: string }> = ({ +export const Body: FunctionComponent<{ className?: string, children?: ReactNode }> = ({ className, children, }) => { diff --git a/app/components/Primitives/LargeTitle.tsx b/app/components/Primitives/LargeTitle.tsx index 3e3898b48..f051e76bf 100644 --- a/app/components/Primitives/LargeTitle.tsx +++ b/app/components/Primitives/LargeTitle.tsx @@ -1,6 +1,6 @@ -import { FunctionComponent } from "react"; +import { FunctionComponent, ReactNode } from "react"; -export const LargeTitle: FunctionComponent<{ className?: string }> = ({ +export const LargeTitle: FunctionComponent<{ className?: string, children?: ReactNode }> = ({ className, children, }) => { diff --git a/app/components/Properties/PropertiesString.tsx b/app/components/Properties/PropertiesString.tsx index 73ff5b15e..aa8211401 100644 --- a/app/components/Properties/PropertiesString.tsx +++ b/app/components/Properties/PropertiesString.tsx @@ -33,7 +33,7 @@ export function PropertiesString({ type }: { type: JSONStringType }) { } } -import jwtDecode from "jwt-decode"; +import { jwtDecode } from "jwt-decode"; import { inferTemporal } from "~/utilities/inferredTemporal"; function PropertiesJwt({ diff --git a/app/components/SearchPalette.tsx b/app/components/SearchPalette.tsx index ae7adbb04..43c8bc6e1 100644 --- a/app/components/SearchPalette.tsx +++ b/app/components/SearchPalette.tsx @@ -19,7 +19,7 @@ import { getComponentSlices, getStringSlices } from "~/utilities/search"; import classnames from "~/utilities/classnames"; import { iconForValue } from "~/utilities/icons"; import { useRef, useCallback } from "react"; -import { useVirtual } from "react-virtual"; +import { useVirtualizer } from "@tanstack/react-virtual"; import { truncate } from "lodash-es"; import { JSONHeroPath } from "@jsonhero/path"; import { useHotkeys } from "react-hotkeys-hook"; @@ -49,11 +49,12 @@ export function SearchPalette({ const listRef = useRef(null); - const rowVirtualizer = useVirtual({ - size: (searchState.results ?? []).length, - parentRef: listRef, + const rowVirtualizer = useVirtualizer({ + count: (searchState.results ?? []).length, estimateSize: useCallback(() => 70, []), - overscan: 6, + getScrollElement: () => { + return listRef.current + } }); function comboboxReducer( @@ -79,7 +80,6 @@ export function SearchPalette({ const cb = useCombobox({ items: searchState.results ?? [], stateReducer: comboboxReducer, - circularNavigation: false, scrollIntoView: () => {}, onSelectedItemChange: ({ selectedItem }) => { if (selectedItem) { @@ -106,7 +106,7 @@ export function SearchPalette({ return ( <>