atomicdata-dev · Polleps · Jun 18, 2024 · Jun 11, 2024 · Jun 11, 2024 · Jun 11, 2024
diff --git a/Earthfile b/Earthfile
@@ -94,9 +94,10 @@ docker-musl:
 
 setup-playwright:
   FROM mcr.microsoft.com/playwright:v1.44.1-jammy
-  RUN curl -f https://get.pnpm.io/v6.14.js | node - add --global pnpm
+  RUN curl -fsSL https://get.pnpm.io/install.sh | env PNPM_VERSION=9.3.0 ENV="$HOME/.shrc" SHELL="$(which sh)" sh -
+  ENV PATH="/root/.local/share/pnpm:$PATH"
   RUN apt update && apt install -y zip
-  RUN pnpx playwright install --with-deps
+  RUN pnpm dlx playwright install --with-deps
   RUN npm install -g netlify-cli
 
 e2e:

diff --git a/browser/CHANGELOG.md b/browser/CHANGELOG.md
@@ -6,6 +6,18 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 
 ### Atomic Browser
 
+- [#855](https://github.com/atomicdata-dev/atomic-server/issues/855) Add a dialog that shows how to fetch and use the current resource in your code.
+- [#825](https://github.com/atomicdata-dev/atomic-server/issues/825) Folder display styles are now saved locally instead of on the resource. The display style property will now act as the default view style.
+- Updated look of the default resource form.
+
+### @tomic/react
+
+- BREAKING CHANGE: Removed the `useLocalStorage` hook.
+
+## v0.38.0
+
+### Atomic Browser
+
 - [#845](https://github.com/atomicdata-dev/atomic-server/issues/845) Add option to create instances and tables from the ontology view.
 - [#845](https://github.com/atomicdata-dev/atomic-server/issues/845) Add default Ontology option to drives.
 - [#841](https://github.com/atomicdata-dev/atomic-server/issues/841) Add better inputs for `Timestamp` and `Date` datatypes.
@@ -46,7 +58,6 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 - Added `useCollectionPage` hook.
 - Fix bug where `useCollection` would fetch the collection twice on mount.
 - `useServerURL` no longer stores the server url in localstorage.
-- BREAKING CHANGE: Removed the `useLocalStorage` hook.
 
 ### @tomic/cli
 

diff --git a/browser/Earthfile b/browser/Earthfile
@@ -10,7 +10,8 @@ all:
   BUILD +typedoc
 
 deps:
-  RUN curl -f https://get.pnpm.io/v6.14.js | node - add --global pnpm
+  RUN curl -fsSL https://get.pnpm.io/install.sh | env PNPM_VERSION=9.3.0 ENV="$HOME/.shrc" SHELL="$(which sh)" sh -
+  ENV PATH="/root/.local/share/pnpm:$PATH"
   COPY package.json pnpm-lock.yaml pnpm-workspace.yaml .
   COPY data-browser/package.json data-browser/.
   COPY lib/package.json lib/.

diff --git a/browser/data-browser/index.html b/browser/data-browser/index.html
@@ -29,6 +29,16 @@
       background-color: var(--background-color);
     }
 
+    .loader {
+      opacity: 1;
+      transition: opacity 300ms ease-out, transform 300ms ease-out;
+      transform: translateY(0);
+
+      @starting-style {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+    }
   </style>
   <!-- Meta tags and code added by Atomic-Server -->
   <!-- { inject_html_head } -->
@@ -39,7 +49,7 @@
 <body>
   <div id="root">
     <svg width="647" height="75" viewBox="0 0 647 75" fill="none" xmlns="http://www.w3.org/2000/svg"
-      style="max-width: 70vw; width: 30rem; margin: auto; display: block; margin-top: 45vh;">
+      style="max-width: 70vw; width: 30rem; margin: auto; display: block; margin-top: 45vh;" class="loader">
       <path
         d="M57.512 58.4H23.712L17.264 74H0L32.448 1.19995H49.088L81.64 74H63.96L57.512 58.4ZM52.208 45.608L40.664 17.736L29.12 45.608H52.208Z"
         fill="var(--text-splash)" />

diff --git a/browser/data-browser/package.json b/browser/data-browser/package.json
@@ -28,8 +28,9 @@
     "@tomic/react": "workspace:*",
     "emoji-mart": "^5.5.2",
     "polished": "^4.1.0",
+    "prismjs": "^1.29.0",
     "query-string": "^7.0.0",
-    "quick-score": "^0.0.10",
+    "quick-score": "^0.2.0",
     "react": "^18.2.0",
     "react-colorful": "^5.1.1",
     "react-dom": "^18.2.0",
@@ -55,6 +56,7 @@
   },
   "devDependencies": {
     "@swc/plugin-styled-components": "^1.5.110",
+    "@types/prismjs": "^1.26.4",
     "@types/react-pdf": "^6.2.0",
     "@types/react-window": "^1.8.7",
     "@vitejs/plugin-react-swc": "^3.5.0",
@@ -64,6 +66,7 @@
     "types-wm": "^1.1.0",
     "typescript": "^5.4.5",
     "vite": "^5.2.10",
+    "vite-plugin-prismjs": "^0.0.11",
     "vite-plugin-pwa": "^0.17.0",
     "vite-plugin-webfont-dl": "^3.9.1",
     "workbox-cli": "^6.4.1"

diff --git a/browser/data-browser/src/chunks/HighlightedCode/HighlightedCodeBlock.tsx b/browser/data-browser/src/chunks/HighlightedCode/HighlightedCodeBlock.tsx
@@ -0,0 +1,103 @@
+import { useEffect, useRef, useState } from 'react';
+import { styled } from 'styled-components';
+import Prism from 'prismjs';
+import { ScrollArea } from '@radix-ui/react-scroll-area';
+import {
+  IconButton,
+  IconButtonVariant,
+} from '../../components/IconButton/IconButton';
+import { FaCheck, FaCopy } from 'react-icons/fa6';
+
+export interface HiglightedCodeBlockProps {
+  code: string;
+  className?: string;
+}
+
+/** Codeblock with sytax hightlighting for typescript code.
+ * Do not import this component directly, use {@link HighlightedCodeBlock} instead.
+ */
+export default function AsyncHighlightedCodeBlock({
+  code,
+  className,
+}: React.PropsWithChildren<HiglightedCodeBlockProps>): React.JSX.Element {
+  const [copied, setIsCopied] = useState(false);
+
+  const ref = useRef<HTMLElement>(null);
+
+  const copyToClipboard = () => {
+    setIsCopied(true);
+    navigator.clipboard.writeText(code);
+  };
+
+  useEffect(() => {
+    if (!ref.current) return;
+    setTimeout(() => Prism.highlightElement(ref.current!), 0);
+  }, [code]);
+
+  useEffect(() => {
+    if (copied) {
+      const timeout = setTimeout(() => setIsCopied(false), 2000);
+
+      return () => clearTimeout(timeout);
+    }
+  }, [copied]);
+
+  return (
+    <Wrapper>
+      <StyledScrollArea type='hover' className={className}>
+        <StyledPre>
+          <code ref={ref} className='language-typescript'>
+            {code}
+          </code>
+        </StyledPre>
+      </StyledScrollArea>
+      <CopyButton
+        title='Copy code'
+        variant={IconButtonVariant.Fill}
+        color='textLight'
+        size='1.2em'
+        onClick={copyToClipboard}
+      >
+        {copied ? <FaCheck /> : <FaCopy />}
+      </CopyButton>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  position: relative;
+`;
+
+// We have to use a && selector to increase the specificity because prismjs styles have a high specificity by default.
+const StyledPre = styled.pre`
+  && {
+    font-size: 0.85rem;
+    line-height: 1.8em;
+    margin: 0;
+    padding: 1rem;
+    overflow: visible;
+    height: min-content;
+    background-color: ${p => p.theme.colors.bg1};
+    code[class*='language-'],
+    &[class*='language-'] {
+      color: ${p => p.theme.colors.text};
+      text-shadow: none;
+    }
+    & .operator {
+      background-color: ${p => p.theme.colors.bg1};
+    }
+  }
+`;
+
+const StyledScrollArea = styled(ScrollArea)`
+  filter: ${p => (p.theme.darkMode ? 'brightness(1.5)' : 'none')};
+  border-radius: ${p => p.theme.radius};
+  background-color: ${p => p.theme.colors.bg1};
+  overflow: auto;
+`;
+
+const CopyButton = styled(IconButton)`
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+`;
diff --git a/browser/data-browser/src/components/Collapse.tsx b/browser/data-browser/src/components/Collapse.tsx
@@ -17,20 +17,29 @@ export function Collapse({
   children,
 }: React.PropsWithChildren<CollapseProps>): JSX.Element {
   const [mountChildren, setMountChildren] = useState(open);
+  const [enableOverflow, setEnableOverflow] = useState(false);
 
   useEffect(() => {
     if (!open) {
+      setEnableOverflow(false);
+
       return timeoutEffect(() => {
         setMountChildren(false);
       }, ANIMATION_DURATION());
     }
 
     setMountChildren(true);
+
+    return timeoutEffect(() => {
+      setEnableOverflow(true);
+    }, ANIMATION_DURATION());
   }, [open]);
 
   return (
     <GridCollapser open={open} className={className}>
-      <CollapseInner>{mountChildren && children}</CollapseInner>
+      <InnerWrapper overflow={enableOverflow}>
+        {mountChildren && children}
+      </InnerWrapper>
     </GridCollapser>
   );
 }
@@ -42,13 +51,15 @@ interface GridCollapserProps {
 const GridCollapser = styled.div<GridCollapserProps>`
   display: grid;
   grid-template-rows: ${({ open }) => (open ? '1fr' : '0fr')};
+  grid-template-columns: 100%;
   transition: grid-template-rows ${() => ANIMATION_DURATION()}ms ease-in-out;
 
   @media (prefers-reduced-motion) {
     transition: unset;
   }
 `;
 
-const CollapseInner = styled.div`
-  overflow: hidden;
+const InnerWrapper = styled.div<{ overflow: boolean }>`
+  width: 100%;
+  overflow: ${({ overflow }) => (overflow ? 'visible' : 'hidden')};
 `;
diff --git a/browser/data-browser/src/components/Dialog/index.tsx b/browser/data-browser/src/components/Dialog/index.tsx
@@ -37,6 +37,7 @@ export enum DialogSlot {
 }
 
 export const DIALOG_MEDIA_BREAK_POINT = '640px';
+export const VAR_DIALOG_INNER_WIDTH = '--dialog-inner-width';
 
 const ANIM_MS = 80;
 const ANIM_SPEED = `${ANIM_MS}ms`;
@@ -235,6 +236,7 @@ const StyledInnerDialog = styled.div`
   grid-template-rows: 1fr auto auto;
   gap: 1rem;
   grid-template-areas: 'title close' 'content content' 'actions actions';
+  max-block-size: calc(100vh - ${p => p.theme.margin}rem * 2);
 `;
 
 const fadeInForground = keyframes`
@@ -261,6 +263,12 @@ const fadeInBackground = keyframes`
 
 const StyledDialog = styled.dialog<{ $width?: CSS.Property.Width }>`
   --animation-speed: 500ms;
+  --dialog-width: min(90vw, ${p => p.$width ?? '60ch'});
+
+  ${VAR_DIALOG_INNER_WIDTH}: calc(
+    var(--dialog-width) - 2 * ${p => p.theme.margin}rem
+  );
+
   box-sizing: border-box;
   inset: 0px;
   position: relative;
@@ -270,11 +278,9 @@ const StyledDialog = styled.dialog<{ $width?: CSS.Property.Width }>`
   background-color: ${props => props.theme.colors.bg};
   border-radius: ${props => props.theme.radius};
   border: solid 1px ${props => props.theme.colors.bg2};
-  max-inline-size: min(90vw, ${p => p.$width ?? '100ch'});
-  min-inline-size: min(90vw, ${p => p.$width ?? '60ch'});
+  inline-size: var(--dialog-width);
   max-block-size: 100vh;
   height: fit-content;
-  max-height: 90vh;
   overflow: visible;
   box-shadow: ${p => p.theme.boxShadowSoft};
 

diff --git a/browser/data-browser/src/components/ErrorLook.tsx b/browser/data-browser/src/components/ErrorLook.tsx
@@ -25,13 +25,18 @@ export function ErrorBlock({ error, showTrace }: ErrorBlockProps): JSX.Element {
         <FaExclamationTriangle />
         Something went wrong
       </BiggerText>
-      <CodeBlock>{error.message}</CodeBlock>
-      {showTrace && (
-        <>
-          <span>Stack trace:</span>
-          <CodeBlock>{error.stack}</CodeBlock>
-        </>
-      )}
+      <Pre>
+        <code>{error.message}</code>
+        {showTrace && (
+          <>
+            <br />
+            <br />
+            <span>Stack trace:</span>
+            <br />
+            <code>{error.stack}</code>
+          </>
+        )}
+      </Pre>
     </ErrorLookBig>
   );
 }
@@ -45,11 +50,12 @@ const ErrorLookBig = styled.div`
   background-color: ${p => p.theme.colors.bg1};
 `;
 
-const CodeBlock = styled.code`
+const Pre = styled.pre`
   white-space: pre-wrap;
   border-radius: ${p => p.theme.radius};
   padding: ${p => p.theme.margin}rem;
   background-color: ${p => p.theme.colors.bg};
+  font-size: 0.9rem;
 `;
 
 const BiggerText = styled.p`

diff --git a/browser/data-browser/src/components/ExternalLink.tsx b/browser/data-browser/src/components/ExternalLink.tsx
@@ -34,9 +34,11 @@ ExternalLink.defaultProps = {
 };
 
 const ExternalLinkPlain = styled.a`
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.6ch;
+  color: ${props => props.theme.colors.main};
+  text-decoration: none;
 `;
 
 const ExternalLinkButton = styled.a`

diff --git a/browser/data-browser/src/components/HighlightedCodeBlock.tsx b/browser/data-browser/src/components/HighlightedCodeBlock.tsx
@@ -0,0 +1,17 @@
+import { Suspense, lazy } from 'react';
+import type { HiglightedCodeBlockProps } from '../chunks/HighlightedCode/HighlightedCodeBlock';
+
+const CodeBlock = lazy(
+  () => import('../chunks/HighlightedCode/HighlightedCodeBlock'),
+);
+
+export function HighlightedCodeBlock({
+  children,
+  ...props
+}: React.PropsWithChildren<HiglightedCodeBlockProps>): React.JSX.Element {
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <CodeBlock {...props}>{children}</CodeBlock>
+    </Suspense>
+  );
+}
diff --git a/browser/data-browser/src/components/Navigation.tsx b/browser/data-browser/src/components/Navigation.tsx
@@ -216,4 +216,10 @@ const SideBarWrapper = styled('div')`
   bottom: 0;
   left: 0;
   right: 0;
+
+  opacity: 1;
+  transition: opacity 0.3s ease-out;
+  @starting-style {
+    opacity: 0;
+  }
 `;