#25 Fix some styling issues

data-browser/src/components/AllProps.tsx

@@ -1,6 +1,6 @@
 import { Resource } from '@tomic/react';
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import PropVal from './PropVal';
 
 type Props = {
@@ -14,27 +14,21 @@ type Props = {
    * but only on large screens.
    */
   columns?: boolean;
+  basic?: boolean;
 };
 
-const AllPropsWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  border-radius: ${p => p.theme.radius};
-  border: 1px solid ${p => p.theme.colors.bg2};
-`;
-
 /** Lists all PropVals for some resource. Optionally ignores a bunch of subjects */
-function AllProps({ resource, except = [], editable, columns }: Props) {
+function AllProps({ resource, except = [], editable, columns, basic }: Props) {
   return (
-    <AllPropsWrapper>
+    <AllPropsWrapper basic={basic}>
       {[...resource.getPropVals()]
         .filter(([prop]) => !except.includes(prop))
         .map(
           ([prop]): JSX.Element => (
             <StyledPropVal
               columns={columns}
               key={prop}
+              basic={basic}
               propertyURL={prop}
               resource={resource}
               editable={!!editable}
@@ -45,15 +39,27 @@ function AllProps({ resource, except = [], editable, columns }: Props) {
   );
 }
 
-const StyledPropVal = styled(PropVal)`
-  padding: 0.5rem;
-  &:nth-child(1) {
-    border-top-left-radius: ${p => p.theme.radius};
-    border-top-right-radius: ${p => p.theme.radius};
-  }
-  &:nth-child(odd) {
-    background-color: ${p => p.theme.colors.bg1};
-  }
+const AllPropsWrapper = styled.div<{ basic: boolean | undefined }>`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  border-radius: ${p => p.theme.radius};
+  border: ${p => (p.basic ? 'none' : `1px solid ${p.theme.colors.bg2}`)};
+`;
+
+const StyledPropVal = styled(PropVal)<{ basic: boolean | undefined }>`
+  ${p =>
+    !p.basic &&
+    css`
+      padding: 0.5rem;
+      &:nth-child(1) {
+        border-top-left-radius: ${p.theme.radius};
+        border-top-right-radius: ${p.theme.radius};
+      }
+      &:nth-child(odd) {
+        background-color: ${p.theme.colors.bgBody};
+      }
+    `}
 `;
 
 export default AllProps;

data-browser/src/components/TableEditor/hooks/useTableEditorKeyboardNavigation.tsx

@@ -108,7 +108,9 @@ export function useTableEditorKeyboardNavigation(
       multiSelectCornerRow,
       multiSelectCornerColumn,
       tableContext,
-      commands,
+      commands.copy,
+      commands.undo,
+      commands.expand,
       hasControlLock,
     ],
   );

data-browser/src/components/forms/DropdownInput.tsx

@@ -180,7 +180,7 @@ export const DropdownInput: React.FC<DropDownListProps> = ({
             <ResourceInputOverlayWrapper>
               {selectedItem && !isFocus && (
                 <StyledInputOverlay>
-                  <ResourceInline subject={selectedItem} untabbable />
+                  <ResourceInline subject={selectedItem} untabbable basic />
                 </StyledInputOverlay>
               )}
               <InputStyled

data-browser/src/views/Card/ResourceCard.tsx

@@ -125,7 +125,12 @@ export function ResourceCardDefault({
         propertyURL={urls.properties.description}
       />
       {!small && (
-        <AllProps resource={resource} except={defaultHiddenProps} editable />
+        <AllProps
+          basic
+          resource={resource}
+          except={defaultHiddenProps}
+          editable
+        />
       )}
     </React.Fragment>
   );

data-browser/src/views/ClassPage.tsx

@@ -12,7 +12,7 @@ import { ContainerNarrow } from '../components/Containers';
 import { ValueForm } from '../components/forms/ValueForm';
 import NewInstanceButton from '../components/NewInstanceButton';
 import { Title } from '../components/Title';
-import { Row } from '../components/Row';
+import { Column, Row } from '../components/Row';
 import { ResourcePageProps } from './ResourcePage';
 import { defaultHiddenProps } from './ResourcePageDefault';
 
@@ -29,23 +29,25 @@ export function ClassPage({ resource }: ResourcePageProps) {
       <Title resource={resource} />
       <ClassDetail resource={resource} />
       <ValueForm resource={resource} propertyURL={properties.description} />
-      <AllProps
-        resource={resource}
-        except={defaultHiddenProps}
-        editable
-        columns
-      />
-      <Row>
-        <NewInstanceButton icon={true} klass={resource.getSubject()} />
-        <Button
-          subtle
-          onClick={async () =>
-            setTSdef(await classToTypescriptDefinition(resource, store))
-          }
-        >
-          typescript interface
-        </Button>
-      </Row>
+      <Column>
+        <AllProps
+          resource={resource}
+          except={defaultHiddenProps}
+          editable
+          columns
+        />
+        <Row>
+          <NewInstanceButton icon={true} klass={resource.getSubject()} />
+          <Button
+            subtle
+            onClick={async () =>
+              setTSdef(await classToTypescriptDefinition(resource, store))
+            }
+          >
+            typescript interface
+          </Button>
+        </Row>
+      </Column>
       {tsDef && <CodeBlock content={tsDef} />}
     </ContainerNarrow>
   );

data-browser/src/views/ResourceInline/ResourceInline.tsx

@@ -13,18 +13,20 @@ export type ResourceInlineInstanceProps = {
 type ResourceInlineProps = {
   untabbable?: boolean;
   className?: string;
+  basic?: boolean;
 } & ResourceInlineInstanceProps;
 
 /** Renders a Resource in a compact, inline link. Shows tooltip on hover. */
 export function ResourceInline({
   subject,
   untabbable,
+  basic,
   className,
 }: ResourceInlineProps): JSX.Element {
   const resource = useResource(subject, { allowIncomplete: true });
   const [isA] = useArray(resource, urls.properties.isA);
 
-  const Comp = classMap.get(isA[0]) ?? DefaultInline;
+  const Comp = basic ? DefaultInline : classMap.get(isA[0]) ?? DefaultInline;
 
   if (!subject) {
     return <ErrorLook>No subject passed</ErrorLook>;

data-browser/src/views/ResourceLine.tsx

@@ -35,7 +35,7 @@ function ResourceLine({ subject, clickable, className }: Props): JSX.Element {
   return (
     <span about={subject} className={className}>
       {clickable ? (
-        <ResourceInline untabbable subject={subject} />
+        <ResourceInline untabbable subject={subject} basic />
       ) : (
         <b>{title}</b>
       )}

lib/src/client.ts

@@ -27,6 +27,12 @@ export interface HeadersObject {
   [key: string]: string;
 }
 
+export type FileLike = { blob: Blob; name: string };
+export type FileOrFileLike = File | FileLike;
+
+const isFileLike = (file: FileOrFileLike): file is FileLike =>
+  'blob' in file && 'name' in file;
+
 const JSON_AD_MIME = 'application/ad+json';
 
 interface FetchResourceOptions extends ParseOpts {
@@ -235,7 +241,7 @@ export class Client {
    * Returns the newly created resources
    */
   public async uploadFiles(
-    files: File[],
+    files: FileOrFileLike[],
     serverUrl: string,
     agent: Agent,
     parent: string,
@@ -244,7 +250,11 @@ export class Client {
     const formData = new FormData();
 
     files.map(file => {
-      formData.append('assets', file, file.name);
+      if (isFileLike(file)) {
+        formData.append('assets', file.blob, file.name);
+      } else {
+        formData.append('assets', file, file.name);
+      }
     });
 
     const uploadURL = new URL(`${serverUrl}/upload`);
@@ -261,6 +271,7 @@ export class Client {
     };
 
     const resp = await this.fetch(uploadURL.toString(), options);
+
     const body = await resp.text();
 
     if (resp.status !== 200) {

lib/src/store.ts

@@ -14,6 +14,7 @@ import {
   urls,
   Commit,
   JSONADParser,
+  FileOrFileLike,
 } from './index.js';
 import { authenticate, fetchWebSocket, startWebsocket } from './websockets.js';
 
@@ -691,7 +692,13 @@ export class Store {
     return this.eventManager.register(event, callback);
   }
 
-  public async uploadFiles(files: File[], parent: string): Promise<string[]> {
+  /** Uploads files to atomic server and create resources for them, then returns the subjects.
+   * If using this in Node.js and it does not work, try injecting node-fetch using `Store.injectFetch()` Some versions of Node create mallformed FormData when using the build-in fetch.
+   */
+  public async uploadFiles(
+    files: FileOrFileLike[],
+    parent: string,
+  ): Promise<string[]> {
     const agent = this.getAgent();
 
     if (!agent) {