Add TagPage

atomicdata-dev · Jul 1, 2024 · 76eade1 · 76eade1
1 parent 69b9599
commit 76eade1
Show file tree

Hide file tree

Showing 40 changed files with 707 additions and 255 deletions.
diff --git a/browser/CHANGELOG.md b/browser/CHANGELOG.md
@@ -14,10 +14,17 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 - Updated the look & feel of the sidebar a bit.
 - [#893](https://github.com/atomicdata-dev/atomic-server/issues/893) Fix tables not showing any rows when viewing from a different server.
 - Fix an issue where the resource-array properties would be set to an empty array instead of removing the property when removing all items in the input.
+- Fix an issue where dropdown menus sometimes jump from the upper left corner of the screen.
+- Added a full page view for tags.
+
+### @tomic/lib
+
+- Added `LocalChange` event to `Resource`.
 
 ### @tomic/react
 
 - BREAKING CHANGE: Removed the `useLocalStorage` hook.
+- When using any `useValue` type hook, values will now update when local changes are made to the resource from elsewhere in the app.
 
 ## v0.38.0
 

diff --git a/browser/data-browser/package.json b/browser/data-browser/package.json
@@ -14,7 +14,7 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emoji-mart/react": "^1.1.1",
     "@emotion/is-prop-valid": "^1.2.1",
-    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-scroll-area": "^1.0.1",
     "@radix-ui/react-tabs": "^1.0.4",
     "@tiptap/extension-image": "^2.4.0",
@@ -26,7 +26,7 @@
     "@tiptap/starter-kit": "^2.3.0",
     "@tiptap/suggestion": "^2.4.0",
     "@tomic/react": "workspace:*",
-    "emoji-mart": "^5.5.2",
+    "emoji-mart": "^5.6.0",
     "polished": "^4.1.0",
     "prismjs": "^1.29.0",
     "query-string": "^7.0.0",

diff --git a/browser/data-browser/src/chunks/EmojiInput/EmojiInput.tsx b/browser/data-browser/src/chunks/EmojiInput/EmojiInput.tsx
@@ -5,7 +5,7 @@ import * as RadixPopover from '@radix-ui/react-popover';
 import { transition } from '../../helpers/transition';
 import { Popover } from '../../components/Popover';
 
-interface EmojiInputProps {
+export interface EmojiInputProps {
   initialValue?: string;
   onChange: (value: string | undefined) => void;
 }
@@ -25,7 +25,7 @@ const fetchAndCacheData = async () => {
   return data;
 };
 
-export default function EmojiInput({
+export default function EmojiInputASYNC({
   initialValue,
   onChange,
 }: EmojiInputProps): JSX.Element {
@@ -63,7 +63,8 @@ export default function EmojiInput({
 }
 
 const Preview = styled.span`
-  transition: ${transition('font-size')};
+  will-change: font-size;
+  ${transition('font-size')};
 `;
 
 const Placeholder = styled(Preview)`
@@ -74,10 +75,10 @@ const PickerButton = styled(RadixPopover.Trigger)`
   border: none;
   border-radius: ${({ theme }) => theme.radius};
   width: 2rem;
+  height: 2rem;
   background: transparent;
   padding: 0;
   cursor: pointer;
-
   user-select: none;
 
   &:hover > ${Preview} {

diff --git a/browser/data-browser/src/chunks/MarkdownEditor/BubbleMenu.tsx b/browser/data-browser/src/chunks/MarkdownEditor/BubbleMenu.tsx
@@ -72,6 +72,7 @@ export function BubbleMenu(): React.JSX.Element {
           <FaCode />
         </ToggleButton>
         <StyledPopover
+          modal
           open={linkMenuOpen}
           onOpenChange={setLinkMenuOpen}
           Trigger={

diff --git a/browser/data-browser/src/components/Card.tsx b/browser/data-browser/src/components/Card.tsx
@@ -1,5 +1,8 @@
 import { styled } from 'styled-components';
-import { getTransitionStyle } from '../helpers/transitionName';
+import {
+  RESOURCE_PAGE_TRANSITION_TAG,
+  getTransitionStyle,
+} from '../helpers/transitionName';
 
 type CardProps = {
   /** Adds a colorful border */
@@ -11,7 +14,7 @@ type CardProps = {
 /** A Card with a border. */
 export const Card = styled.div.attrs<CardProps>(p => ({
   // When we render a lot of cards it is more performant to use styles instead of classes when each card has a unique style
-  style: getTransitionStyle('resource-page', p.about),
+  style: getTransitionStyle(RESOURCE_PAGE_TRANSITION_TAG, p.about),
 }))`
   background-color: ${props => props.theme.colors.bg};
 

diff --git a/browser/data-browser/src/components/Details.tsx b/browser/data-browser/src/components/Details.tsx
@@ -10,6 +10,7 @@ export interface DetailsProps {
   disabled?: boolean;
   /** Event that fires when a user opens or closes the details */
   onStateToggle?: (state: boolean) => void;
+  noIndent?: boolean;
 }
 
 /** A collapsible item with a title. Similar to the <details> HTML element. */
@@ -19,6 +20,7 @@ export function Details({
   children,
   title,
   disabled,
+  noIndent,
   onStateToggle,
 }: PropsWithChildren<DetailsProps>): JSX.Element {
   const [isOpen, setIsOpen] = useState(initialState);
@@ -27,6 +29,10 @@ export function Details({
     setIsOpen(open);
   }, [open]);
 
+  useEffect(() => {
+    setIsOpen(initialState);
+  }, [initialState]);
+
   const toggleOpen = useCallback(() => {
     setIsOpen(p => {
       onStateToggle?.(!p);
@@ -49,7 +55,9 @@ export function Details({
         </IconButton>
         <TitleWrapper>{title}</TitleWrapper>
       </SummaryWrapper>
-      <StyledCollapse open={!!isOpen}>{children}</StyledCollapse>
+      <StyledCollapse open={!!isOpen} noIndent={noIndent}>
+        {children}
+      </StyledCollapse>
     </>
   );
 }
@@ -108,7 +116,7 @@ const IconButton = styled.button<IconButtonProps>`
   }
 `;
 
-const StyledCollapse = styled(Collapse)`
+const StyledCollapse = styled(Collapse)<{ noIndent?: boolean }>`
   overflow-x: hidden;
-  margin-left: ${({ theme }) => theme.margin}rem;
+  margin-left: ${p => (p.noIndent ? 0 : p.theme.margin) + 'rem'};
 `;
diff --git a/browser/data-browser/src/components/EditableTitle.tsx b/browser/data-browser/src/components/EditableTitle.tsx
@@ -3,7 +3,10 @@ import { useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { FaPencil } from 'react-icons/fa6';
 import { styled, css } from 'styled-components';
-import { transitionName } from '../helpers/transitionName';
+import {
+  PAGE_TITLE_TRANSITION_TAG,
+  transitionName,
+} from '../helpers/transitionName';
 import { ViewTransitionProps } from '../helpers/ViewTransitionProps';
 
 export interface EditableTitleProps {
@@ -110,7 +113,7 @@ const Title = styled.h1<TitleProps & ViewTransitionProps>`
   cursor: ${props => (props.canEdit ? 'pointer' : 'initial')};
   opacity: ${props => (props.subtle ? 0.5 : 1)};
 
-  ${props => transitionName('page-title', props.subject)};
+  ${props => transitionName(PAGE_TITLE_TRANSITION_TAG, props.subject)};
 `;
 
 const TitleInput = styled.input`

diff --git a/browser/data-browser/src/components/Main.tsx b/browser/data-browser/src/components/Main.tsx
@@ -1,9 +1,11 @@
 import { PropsWithChildren, memo } from 'react';
 import { VisuallyHidden } from './VisuallyHidden';
 import { styled } from 'styled-components';
-import { transitionName } from '../helpers/transitionName';
+import {
+  RESOURCE_PAGE_TRANSITION_TAG,
+  transitionName,
+} from '../helpers/transitionName';
 import { ViewTransitionProps } from '../helpers/ViewTransitionProps';
-import { PARENT_PADDING_BLOCK } from './Parent';
 import { MAIN_CONTAINER } from '../helpers/containers';
 
 /** Main landmark. Every page should have one of these.
@@ -26,9 +28,5 @@ export function Main({
 
 const StyledMain = memo(styled.main<ViewTransitionProps>`
   container: ${MAIN_CONTAINER} / inline-size;
-  /* Makes the contents fit the entire page */
-  /* height: calc(
-    100% - (${p => p.theme.heights.breadCrumbBar} + ${PARENT_PADDING_BLOCK} * 2)
-  ); */
-  ${p => transitionName('resource-page', p.subject)}
+  ${p => transitionName(RESOURCE_PAGE_TRANSITION_TAG, p.subject)}
 `);
diff --git a/browser/data-browser/src/components/PalettePicker.tsx b/browser/data-browser/src/components/PalettePicker.tsx
@@ -38,11 +38,16 @@ const PaletteButton = styled.button<PaletteButtonProps>`
   border-radius: 50%;
   cursor: pointer;
   transform-origin: center;
-  transition: ${transition('transform')};
+  transform: scale(1);
+  ${transition('transform')};
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     outline: none;
     transform: scale(1.3);
   }
+
+  &:active {
+    transform: scale(1.1);
+  }
 `;
diff --git a/browser/data-browser/src/components/Popover.tsx b/browser/data-browser/src/components/Popover.tsx
@@ -24,6 +24,7 @@ export interface PopoverProps {
   className?: string;
   noArrow?: boolean;
   noLock?: boolean;
+  modal?: boolean;
 }
 
 export function Popover({
@@ -33,6 +34,7 @@ export function Popover({
   defaultOpen,
   noArrow,
   noLock,
+  modal,
   onOpenChange,
   Trigger,
 }: PropsWithChildren<PopoverProps>): JSX.Element {
@@ -57,7 +59,7 @@ export function Popover({
 
   return (
     <RadixPopover.Root
-      modal
+      modal={modal}
       open={open}
       onOpenChange={handleOpenChange}
       defaultOpen={defaultOpen}
@@ -95,7 +97,6 @@ const Content = styled(RadixPopover.Content)`
   backdrop-filter: blur(10px);
   box-shadow: ${p => p.theme.boxShadowSoft};
   border-radius: ${p => p.theme.radius};
-  position: relative;
   z-index: 10000000;
   animation: ${fadeIn} 0.1s ease-in-out;
 

diff --git a/browser/data-browser/src/components/ResourceUsage/ReferenceUsage.tsx b/browser/data-browser/src/components/ResourceUsage/ReferenceUsage.tsx
@@ -0,0 +1,27 @@
+import { useCollection, type Resource } from '@tomic/react';
+import { UsageCard } from './UsageCard';
+
+interface ReferenceUsageProps {
+  resource: Resource;
+  initialOpenState?: boolean;
+}
+
+export function ReferenceUsage({
+  resource,
+  initialOpenState,
+}: ReferenceUsageProps) {
+  const { collection } = useCollection({ value: resource.subject });
+
+  return (
+    <UsageCard
+      initialOpenState={initialOpenState}
+      collection={collection}
+      title={
+        <span>
+          <strong>{collection.totalMembers}</strong> resources reference{' '}
+          {resource.title}
+        </span>
+      }
+    />
+  );
+}
diff --git a/browser/data-browser/src/components/ResourceUsage/ResourceUsage.tsx b/browser/data-browser/src/components/ResourceUsage/ResourceUsage.tsx
@@ -1,10 +1,10 @@
-import { Resource, core, useCollection } from '@tomic/react';
+import { Resource, core } from '@tomic/react';
 
 import { PropertyUsage } from './PropertyUsage';
-import { UsageCard } from './UsageCard';
 import { ClassUsage } from './ClassUsage';
 import { ChildrenUsage } from './ChildrenUsage';
 import { Column } from '../Row';
+import { ReferenceUsage } from './ReferenceUsage';
 
 interface ResourceUsageProps {
   resource: Resource;
@@ -23,22 +23,10 @@ export function ResourceUsage({ resource }: ResourceUsageProps): JSX.Element {
 }
 
 function BasicUsage({ resource }: ResourceUsageProps): JSX.Element {
-  const { collection } = useCollection({
-    value: resource.subject,
-  });
-
   return (
     <Column>
       <ChildrenUsage resource={resource} />
-      <UsageCard
-        collection={collection}
-        title={
-          <span>
-            <strong>{collection.totalMembers}</strong> resources reference{' '}
-            {resource.title}
-          </span>
-        }
-      />
+      <ReferenceUsage resource={resource} />
     </Column>
   );
 }