#228 Add folder with listview

.github/workflows/build.yml

@@ -43,14 +43,15 @@ jobs:
       # This is needed when playwright is used in tests #70
       - run: pnpm lint-fix
       - run: pnpm build
+      - run: pnpm typecheck
       # Mayb we can do without these?
       # - run: npx playwright install-deps
       # - run: npx playwright install
       - name: Start dev server
         run: nohup pnpm start &
       - name: Run atomic-server docker image in background (for testing)
         run: nohup docker run -p 80:80 -p 443:443 -v atomic-storage:/atomic-storage joepmeneer/atomic-server --initialize &
-      - run: pnpx playwright install
+      - run: pnpm playwright-install
       - run: SERVER_URL=http://localhost pnpm test
       - name: Upload failed e2e test screenshots
         uses: actions/upload-artifact@v3

.vscode/settings.json

@@ -2,7 +2,7 @@
   "editor.rulers": [
     80
   ],
-  "files.exclude": {
+  "search.exclude": {
     "**/.git": true,
     "**/node_modules": true,
     "**/build": true,

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 This changelog covers all three packages, as they are (for now) updated as a whole
 
+## UNRELEASED
+
+- Add folders with list & grid views, allow drag & drop uploads #228
+- Show icons in sidebar
+
 ## v0.32.1
 
 - Lock ed25519 version #230

data-browser/index.html

@@ -92,11 +92,19 @@
 
   <!-- Service worker -->
   <script>
-    if ('serviceWorker' in navigator) {
-      window.addEventListener('load', () => {
-        navigator.serviceWorker.register('sw.js');
-      })
-    }
+    const registerServiceWorker = async () => {
+        if ('serviceWorker' in navigator) {
+          try {
+            await navigator.serviceWorker.register('/sw.js', {
+              scope: '/',
+            });
+          } catch (error) {
+            console.error(`Registration failed with ${error}`);
+          }
+        }
+      };
+
+      registerServiceWorker();
   </script>
 </body>
 

data-browser/package.json

@@ -57,7 +57,7 @@
     "url": "https://github.com/atomicdata-dev/atomic-data-browser/"
   },
   "scripts": {
-    "build": "tsc && vite build",
+    "build": "vite build",
     "deploy": "gh-pages -d build",
     "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
     "lint-fix": "eslint ./src --ext .js,.jsx,.ts,.tsx --fix",

data-browser/public/sw.js

@@ -0,0 +1,3 @@
+self.addEventListener('install', () => {
+  // TODO: Do something.
+});

data-browser/src/components/AllPropsSimple.tsx

@@ -0,0 +1,88 @@
+import {
+  datatypes,
+  JSONValue,
+  properties,
+  Resource,
+  useResource,
+  useSubject,
+  useTitle,
+} from '@tomic/react';
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+
+export interface AllPropsSimpleProps {
+  resource: Resource;
+}
+
+/** Renders a simple list of all properties on the resource. Will not render any link or other interactive element. */
+export function AllPropsSimple({ resource }: AllPropsSimpleProps): JSX.Element {
+  return (
+    <ul>
+      {[...resource.getPropVals()].map(([prop, val]) => (
+        <Row key={prop} prop={prop} val={val} />
+      ))}
+    </ul>
+  );
+}
+
+interface RowProps {
+  prop: string;
+  val: JSONValue;
+}
+
+function Row({ prop, val }: RowProps): JSX.Element {
+  const propResource = useResource(prop);
+  const [propName] = useTitle(propResource);
+  const [dataType] = useSubject(propResource, properties.datatype);
+
+  const value = useMemo(() => {
+    if (dataType === datatypes.atomicUrl) {
+      return <Value val={val as string} />;
+    }
+
+    if (dataType === datatypes.resourceArray) {
+      return <ResourceArray val={val as string[]} />;
+    }
+
+    return <>{val as string}</>;
+  }, [val, dataType]);
+
+  return (
+    <List>
+      <Key>{propName}</Key>: {value}
+    </List>
+  );
+}
+
+const Key = styled.span`
+  font-weight: bold;
+`;
+
+const List = styled.ul`
+  list-style: none;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: ${p => p.theme.colors.textLight};
+`;
+
+function ResourceArray({ val }: { val: string[] }): JSX.Element {
+  return (
+    <>
+      {val.map((v, i) => (
+        <>
+          <Value val={v} key={v} />
+          {i === val.length - 1 ? '' : ', '}
+        </>
+      ))}
+    </>
+  );
+}
+
+function Value({ val }: { val: string }): JSX.Element {
+  const valueResource = useResource(val);
+  const [valueName] = useTitle(valueResource);
+
+  return <>{valueName}</>;
+}

data-browser/src/components/AtomicLink.tsx

@@ -6,7 +6,8 @@ import { FaExternalLinkAlt } from 'react-icons/fa';
 import { ErrorLook } from '../components/ErrorLook';
 import { isRunningInTauri } from '../helpers/tauri';
 
-export interface AtomicLinkProps {
+export interface AtomicLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   children?: ReactNode;
   /** An http URL to an Atomic Data resource, opened in this app and fetched as JSON-AD */
   subject?: string;
@@ -115,7 +116,6 @@ export const LinkView = styled.a<LinkViewProps>`
   pointer-events: ${props => (props.disabled ? 'none' : 'inherit')};
 
   svg {
-    margin-left: 0.3rem;
     font-size: 60%;
   }
 

data-browser/src/components/ButtonGroup.tsx

@@ -0,0 +1,129 @@
+import React, { useCallback, useId, useState } from 'react';
+import styled from 'styled-components';
+
+export interface ButtonGroupOption {
+  label: string;
+  icon: React.ReactNode;
+  value: string;
+  checked?: boolean;
+}
+
+export interface ButtonGroupProps {
+  options: ButtonGroupOption[];
+  name: string;
+  onChange: (value: string) => void;
+}
+
+export function ButtonGroup({
+  options,
+  name,
+  onChange,
+}: ButtonGroupProps): JSX.Element {
+  const [selected, setSelected] = useState(
+    () => options.find(o => o.checked)?.value,
+  );
+
+  const handleChange = useCallback(
+    (checked: boolean, value: string) => {
+      if (checked) {
+        onChange(value);
+        setSelected(value);
+      }
+    },
+    [onChange],
+  );
+
+  return (
+    <Group>
+      {options.map(option => (
+        <ButtonGroupItem
+          {...option}
+          key={option.value}
+          onChange={handleChange}
+          checked={selected === option.value}
+          name={name}
+        />
+      ))}
+    </Group>
+  );
+}
+
+interface ButtonGroupItemProps extends ButtonGroupOption {
+  onChange: (checked: boolean, value: string) => void;
+  name: string;
+}
+
+function ButtonGroupItem({
+  onChange,
+  icon,
+  label,
+  name,
+  value,
+  checked,
+}: ButtonGroupItemProps): JSX.Element {
+  const id = useId();
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.checked, value);
+  };
+
+  return (
+    <Item>
+      <Input
+        id={id}
+        type='radio'
+        onChange={handleChange}
+        name={name}
+        value={value}
+        checked={checked}
+      />
+      <Label htmlFor={id} title={label}>
+        {icon}
+      </Label>
+    </Item>
+  );
+}
+
+const Group = styled.form`
+  display: flex;
+  height: 2rem;
+  gap: 0.5rem;
+`;
+
+const Item = styled.div`
+  position: relative;
+  width: 2rem;
+  aspect-ratio: 1/1;
+`;
+
+const Label = styled.label`
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  aspect-ratio: 1/1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: ${p => p.theme.radius};
+  color: ${p => p.theme.colors.textLight};
+  cursor: pointer;
+
+  transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
+
+  input:checked + & {
+    background-color: ${p => p.theme.colors.bg1};
+    color: ${p => p.theme.colors.text};
+  }
+
+  :hover {
+    background-color: ${p => p.theme.colors.bg1};
+  }
+`;
+
+const Input = styled.input`
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  aspect-ratio: 1/1;
+  visibility: hidden;
+`;