WIP #747 New Resource Refactor

Author: Polleps

browser/data-browser/src/App.tsx

@@ -69,6 +69,7 @@ if (isDev()) {
 }
 
 import isPropValid from '@emotion/is-prop-valid';
+import { NewResourceUIProvider } from './components/forms/NewForm/useNewResourceUI';
 
 // This implements the default behavior from styled-components v5
 function shouldForwardProp(propName, target) {
@@ -107,10 +108,12 @@ function App(): JSX.Element {
                           <DialogContainer>
                             <PopoverContainer>
                               <DropdownContainer>
-                                <SkipNav />
-                                <NavWrapper>
-                                  <AppRoutes />
-                                </NavWrapper>
+                                <NewResourceUIProvider>
+                                  <SkipNav />
+                                  <NavWrapper>
+                                    <AppRoutes />
+                                  </NavWrapper>
+                                </NewResourceUIProvider>
                               </DropdownContainer>
                             </PopoverContainer>
                             <NetworkIndicator />

browser/data-browser/src/components/IconButton/IconButton.story.mdx

@@ -89,7 +89,7 @@ const IconButtonBase = styled.button<ButtonBaseProps>`
   color: ${p => p.theme.colors.text};
   font-size: ${p => p.size ?? '1em'};
   border: none;
-
+  user-select: none;
   padding: var(--button-padding);
   width: calc(${p => p.size} + var(--button-padding) * 2);
   height: calc(${p => p.size} + var(--button-padding) * 2);
@@ -115,7 +115,7 @@ const SimpleIconButton = styled(IconButtonBase)<ButtonStyleProps>`
       background-color: ${p => p.theme.colors.bg1};
     }
 
-    :active {
+    &:active {
       background-color: ${p => p.theme.colors.bg2};
     }
   }

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

@@ -1,4 +1,4 @@
-import { classes, properties, useResource, useTitle } from '@tomic/react';
+import { dataBrowser, properties, useResource, useTitle } from '@tomic/react';
 import { FormEvent, useCallback, useState } from 'react';
 import { Button } from '../Button';
 import {
@@ -38,19 +38,22 @@ export function NewBookmarkButton({
 
   const [dialogProps, show, hide] = useDialog();
 
-  const createResourceAndNavigate = useCreateAndNavigate(klass, parent);
+  const createResourceAndNavigate = useCreateAndNavigate();
 
   const onDone = useCallback(
     (e: FormEvent) => {
       e.preventDefault();
 
       const normalizedUrl = normalizeWebAddress(url);
 
-      createResourceAndNavigate('bookmark', {
-        [properties.name]: 'New Bookmark',
-        [properties.bookmark.url]: normalizedUrl,
-        [properties.isA]: [classes.bookmark],
-      });
+      createResourceAndNavigate(
+        dataBrowser.classes.bookmark,
+        {
+          [properties.name]: 'New Bookmark',
+          [properties.bookmark.url]: normalizedUrl,
+        },
+        parent,
+      );
     },
     [url],
   );

browser/data-browser/src/components/NewInstanceButton/NewBookmarkButton.tsx

@@ -1,20 +1,8 @@
-import {
-  Datatype,
-  classes,
-  properties,
-  useResource,
-  validateDatatype,
-} from '@tomic/react';
-import { FormEvent, useCallback, useState } from 'react';
-import { Button } from '../Button';
-import { Dialog, DialogActions, DialogContent, useDialog } from '../Dialog';
-import Field from '../forms/Field';
-import { InputStyled, InputWrapper } from '../forms/InputStyles';
+import { core, useResource } from '@tomic/react';
 import { Base } from './Base';
-import { useCreateAndNavigate } from './useCreateAndNavigate';
 import { NewInstanceButtonProps } from './NewInstanceButtonProps';
-import { stringToSlug } from '../../helpers/stringToSlug';
-import { styled } from 'styled-components';
+import { useNewResourceUI } from '../forms/NewForm/useNewResourceUI';
+import { useSettings } from '../../helpers/AppSettings';
 
 export function NewOntologyButton({
   klass,
@@ -26,91 +14,24 @@ export function NewOntologyButton({
   label,
 }: NewInstanceButtonProps): JSX.Element {
   const ontology = useResource(klass);
-  const [shortname, setShortname] = useState('');
-  const [valid, setValid] = useState(false);
+  const { drive } = useSettings();
 
-  const createResourceAndNavigate = useCreateAndNavigate(klass, parent);
+  const showNewResourceUI = useNewResourceUI();
 
-  const onSuccess = useCallback(async () => {
-    createResourceAndNavigate('ontology', {
-      [properties.shortname]: shortname,
-      [properties.isA]: [classes.ontology],
-      [properties.description]: 'description',
-      [properties.classes]: [],
-      [properties.properties]: [],
-      [properties.instances]: [],
-    });
-  }, [shortname, createResourceAndNavigate]);
-
-  const [dialogProps, show, hide] = useDialog({ onSuccess });
-
-  const onShortnameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = stringToSlug(e.target.value);
-    setShortname(value);
-
-    try {
-      validateDatatype(value, Datatype.SLUG);
-      setValid(true);
-    } catch (_) {
-      setValid(false);
-    }
+  const show = () => {
+    showNewResourceUI(core.classes.ontology, parent ?? drive);
   };
 
   return (
-    <>
-      <Base
-        onClick={show}
-        title={ontology.title}
-        icon={icon}
-        IconComponent={IconComponent}
-        subtle={subtle}
-        label={label}
-      >
-        {children}
-      </Base>
-      <Dialog {...dialogProps}>
-        <H1>New Ontology</H1>
-        <DialogContent>
-          <form
-            onSubmit={(e: FormEvent) => {
-              e.preventDefault();
-              hide(true);
-            }}
-          >
-            <Explanation>
-              An ontology is a collection of classes and properties that
-              together describe a concept. Great for data models.
-            </Explanation>
-            <Field required label='Shortname'>
-              <InputWrapper>
-                <InputStyled
-                  placeholder='my-ontology'
-                  value={shortname}
-                  autoFocus={true}
-                  onChange={onShortnameChange}
-                />
-              </InputWrapper>
-            </Field>
-          </form>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => hide(false)} subtle>
-            Cancel
-          </Button>
-          <Button onClick={() => hide(true)} disabled={!valid}>
-            Create
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </>
+    <Base
+      onClick={show}
+      title={ontology.title}
+      icon={icon}
+      IconComponent={IconComponent}
+      subtle={subtle}
+      label={label}
+    >
+      {children}
+    </Base>
   );
 }
-
-const H1 = styled.h1`
-  margin: 0;
-`;
-
-const Explanation = styled.p`
-  color: ${p => p.theme.colors.textLight};
-  max-width: 60ch;
-`;