Fix double tap on ios + move new resource buttons #896

browser/.eslintrc.cjs

@@ -59,6 +59,7 @@ module.exports = {
     // "import/extensions": ["error", "ignorePackages"],
     "import/no-unresolved": "off",
     'import/no-dynamic-require': 'off', // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-dynamic-require.md
+    'import/no-named-as-default': 'off',
     'no-inner-declarations': 'off', // https://eslint.org/docs/rules/no-inner-declarations// New rules
     'class-methods-use-this': 'off',
     //Allow underscores https://stackoverflow.com/questions/57802057/eslint-configuring-no-unused-vars-for-typescript

browser/CHANGELOG.md

@@ -8,11 +8,28 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 
 - [#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.
+- [#896](https://github.com/atomicdata-dev/atomic-server/issues/896) Fix an issue where sidebar items require a double tap on iOS.
 - Updated look of the default resource form.
+- [#896](https://github.com/atomicdata-dev/atomic-server/issues/896) Fix an issue where sidebar items require a double tap on iOS.
+- 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.
+- Redesigned the ontology page.
+- Moved the resource context menu to the top of the page.
+- [#861](https://github.com/atomicdata-dev/atomic-server/issues/861) Fix long usernames overflowing on the share page.
+- [#906](https://github.com/atomicdata-dev/atomic-server/issues/906) Reset changes after clicking the cancel button in a form or navigating away.
+
+### @tomic/lib
+
+- Added `LocalChange` event to `Resource`.
+- Added `resource.refresh()` method.
 
 ### @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
 
@@ -39,6 +56,7 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 - Added `resource.setVersion()` method.
 - Added `collection.getMembersOnPage()` method.
 - Added `collection.totalPages`.
+- Fix lib not working in non-secure browser contexts.
 - BREAKING CHANGE: Renamed `resource.getCommitsCollection` to `resource.getCommitsCollectionSubject`.
 - BREAKING CHANGE: `resource.getChildrenCollection()` now returns a `Promise<Collection>` instead of a subject.
 - BREAKING CHANGE: `resource.createSubject()` no longer accepts a class name as an argument and defaults to a fully random subject.

browser/cli/package.json

@@ -22,7 +22,7 @@
     "prepublishOnly": "pnpm run build && pnpm run lint-fix",
     "watch": "tsc --build --watch",
     "start": "pnpm watch",
-    "tsc": "tsc --build",
+    "tsc": "pnpm exec tsc --build",
     "typecheck": "pnpm exec tsc --noEmit"
   },
   "bin": {

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",
@@ -57,6 +57,9 @@
   "devDependencies": {
     "@swc/plugin-styled-components": "^1.5.110",
     "@types/prismjs": "^1.26.4",
+    "@types/react": "^18.2.34",
+    "@types/react-dom": "^18.2.14",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-pdf": "^6.2.0",
     "@types/react-window": "^1.8.7",
     "@vitejs/plugin-react-swc": "^3.5.0",

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} {

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={

browser/data-browser/src/components/Button.tsx

@@ -195,7 +195,7 @@ export const ButtonSubtle = styled(ButtonDefault)`
   --button-text-color: ${p => p.theme.colors.textLight};
   --button-text-color-hover: ${p => p.theme.colors.main};
 
-  box-shadow: ${p => p.theme.boxShadow};
+  box-shadow: ${p => (p.theme.darkMode ? 'none' : p.theme.boxShadow)};
 `;
 
 export const ButtonAlert = styled(ButtonDefault)`

browser/data-browser/src/components/Card.tsx

@@ -1,5 +1,9 @@
 import { styled } from 'styled-components';
-import { getTransitionStyle } from '../helpers/transitionName';
+import {
+  RESOURCE_PAGE_TRANSITION_TAG,
+  getTransitionStyle,
+} from '../helpers/transitionName';
+import { CARD_CONTAINER } from '../helpers/containers';
 
 type CardProps = {
   /** Adds a colorful border */
@@ -11,22 +15,21 @@ 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};
-
+  background-color: ${p => p.theme.colors.bg};
+  container: ${CARD_CONTAINER} / inline-size;
   border: solid 1px
-    ${props =>
-      props.highlight ? props.theme.colors.main : props.theme.colors.bg2};
-  box-shadow: ${props =>
-    props.highlight
-      ? `0 0 0 1px ${props.theme.colors.main}, ${props.theme.boxShadow}`
-      : props.theme.boxShadow};
-
-  padding: ${props => props.theme.margin}rem;
-  border-radius: ${props => props.theme.radius};
-  max-height: ${props => (props.small ? '10rem' : 'none')};
-  overflow: ${props => (props.small ? 'hidden' : 'visible')};
+    ${p => (p.highlight ? p.theme.colors.main : p.theme.colors.bg2)};
+  box-shadow: ${p =>
+    p.highlight
+      ? `0 0 0 1px ${p.theme.colors.main}, ${p.theme.boxShadow}`
+      : p.theme.boxShadow};
+
+  padding: ${p => p.theme.size()};
+  border-radius: ${p => p.theme.radius};
+  max-height: ${p => (p.small ? p.theme.size(12) : 'initial')};
+  overflow: ${p => (p.small ? 'hidden' : 'visible')};
 `;
 
 export interface CardRowProps {
@@ -35,20 +38,19 @@ export interface CardRowProps {
 
 /** A Row in a Card. Should probably be used inside a CardInsideFull */
 export const CardRow = styled.div<CardRowProps>`
-  --border: solid 1px ${props => props.theme.colors.bg2};
+  --border: solid 1px ${p => p.theme.colors.bg2};
   display: block;
-  border-top: ${props => (props.noBorder ? 'none' : 'var(--border)')};
-  padding: ${props => props.theme.margin / 3}rem
-    ${props => props.theme.margin}rem;
+  border-top: ${p => (p.noBorder ? 'none' : 'var(--border)')};
+  padding: ${p => p.theme.size(2)} ${p => p.theme.size()};
 `;
 
 /** A block inside a Card which has full width */
 export const CardInsideFull = styled.div`
-  margin-left: -${props => props.theme.margin}rem;
-  margin-right: -${props => props.theme.margin}rem;
+  margin-left: -${p => p.theme.size()};
+  margin-right: -${p => p.theme.size()};
 `;
 
 export const Margin = styled.div`
   display: block;
-  height: ${props => props.theme.margin}rem;
+  height: ${p => p.theme.size()};
 `;

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'};
 `;

browser/data-browser/src/components/Dropdown/index.tsx

@@ -129,9 +129,7 @@ export function DropdownMenu({
 
   const handleClose = useCallback(() => {
     triggerRef.current?.focus();
-    setTimeout(() => {
-      setIsActive(false);
-    }, 100);
+    setIsActive(false);
   }, [setIsActive]);
 
   useClickAwayListener([triggerRef, dropdownRef], handleClose, isActive, [
@@ -140,8 +138,6 @@ export function DropdownMenu({
 
   const normalizedItems = useMemo(() => normalizeItems(items), [items]);
 
-  const [x, setX] = useState(0);
-  const [y, setY] = useState(0);
   const getNewIndex = createIndexOffset(normalizedItems);
   const [selectedIndex, setSelectedIndex] = useState<number>(getNewIndex(0, 0));
   // if the keyboard is used to navigate the menu items
@@ -167,25 +163,21 @@ export function DropdownMenu({
 
       // If the top is outside of the screen, render it below
       if (topPos < 0) {
-        setY(triggerRect.y + triggerRect.height / 2);
+        dropdownRef.current.style.top = `${triggerRect.y + triggerRect.height / 2}px`;
       } else {
-        setY(topPos + triggerRect.height / 2);
+        dropdownRef.current.style.top = `${topPos + triggerRect.height / 2}px`;
       }
 
       const leftPos = triggerRect.x - menuRect.width;
 
       // If the left is outside of the screen, render it to the right
       if (leftPos < 0) {
-        setX(triggerRect.x);
+        dropdownRef.current.style.left = `${triggerRect.x}px`;
       } else {
-        setX(triggerRect.x - menuRect.width + triggerRect.width);
+        dropdownRef.current.style.left = `${triggerRect.x - menuRect.width + triggerRect.width}px`;
       }
 
-      // The dropdown is hidden at first because in the first few frames it is still position at 0,0.
-      // We only want to show the dropdown after it has been positioned correctly.
-      requestAnimationFrame(() => {
-        dropdownRef.current!.style.visibility = 'visible';
-      });
+      dropdownRef.current.style.visibility = 'visible';
     });
   }, [isActive, setIsActive]);
 
@@ -285,8 +277,6 @@ export function DropdownMenu({
           <Menu
             ref={dropdownRef}
             isActive={isActive}
-            x={x}
-            y={y}
             id={menuId}
             onMouseOver={handleMouseOverMenu}
             onBlur={handleBlur}
@@ -338,8 +328,6 @@ const DropdownPortal = ({ children }: PropsWithChildren) => {
 
 interface MenuProps {
   isActive: boolean;
-  x: number;
-  y: number;
 }
 
 export interface MenuItemSidebarProps extends MenuItemMinimial {
@@ -457,11 +445,12 @@ const Menu = styled.div<MenuProps>`
   border-radius: 8px;
   position: fixed;
   z-index: ${p => p.theme.zIndex.dropdown};
-  top: ${p => p.y}px;
-  left: ${p => p.x}px;
   width: auto;
   box-shadow: ${p => p.theme.boxShadowSoft};
   opacity: ${p => (p.isActive ? 1 : 0)};
 
+  @starting-style {
+    opacity: 0;
+  }
   ${transition('opacity')};
 `;