feat(ui): org registration visuals & validation store (#280)

* Validation logic extracted into validation.ts * UI components for org registration flow Co-authored-by: Rūdolfs Ošiņš <rudolfs@osins.org>
radicle-dev · May 1, 2020 · 9e62e30 · 9e62e30
1 parent 9685ccb
commit 9e62e30
Show file tree

Hide file tree

Showing 24 changed files with 499 additions and 127 deletions.
diff --git a/ui/App.svelte b/ui/App.svelte
@@ -16,6 +16,7 @@
   import Org from "./Screen/Org.svelte";
   import Profile from "./Screen/Profile.svelte";
   import Project from "./Screen/Project.svelte";
+  import OrgRegistration from "./Screen/OrgRegistration.svelte";
   import RegisterProject from "./Screen/RegisterProject.svelte";
   import UserRegistration from "./Screen/UserRegistration.svelte";
   import Search from "./Screen/Search.svelte";
@@ -55,6 +56,7 @@
     "/network": Network,
     "/profile": Profile,
     "/profile/*": Profile,
+    "/orgs/register": OrgRegistration,
     "/orgs/:id": Org,
     "/orgs/:id/*": Org,
     "/projects/new": CreateProject,

diff --git a/ui/DesignSystem/Component/IdentityAvatar.svelte b/ui/DesignSystem/Component/IdentityAvatar.svelte
@@ -13,4 +13,4 @@
   title={showTitle && identity.metadata.handle}
   avatarFallback={identity.avatarFallback}
   imageUrl={identity.metadata.avatarUrl}
-  variant="user" />
+  variant="circle" />
diff --git a/ui/DesignSystem/Component/Registration/NavigationButtons.svelte b/ui/DesignSystem/Component/Registration/NavigationButtons.svelte
@@ -0,0 +1,40 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import { Button } from "../../Primitive";
+
+  export let disableSubmit = null;
+  export let submitLabel = "Next";
+  export let cancelLabel = "Cancel";
+
+  export let style = null;
+
+  const dispatch = createEventDispatcher();
+  const cancel = () => dispatch("cancel");
+  const submit = () => dispatch("submit");
+</script>
+
+<style>
+  .container {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>
+
+<div class="container" {style}>
+  <div>
+    <Button
+      dataCy="cancel-button"
+      variant="transparent"
+      on:click={cancel}
+      style="margin-right: 24px;">
+      {cancelLabel}
+    </Button>
+  </div>
+
+  <div>
+    <Button disabled={disableSubmit} on:click={submit} variant="primary">
+      {submitLabel}
+    </Button>
+  </div>
+</div>
diff --git a/ui/DesignSystem/Component/Sidebar.svelte b/ui/DesignSystem/Component/Sidebar.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { location, link } from "svelte-spa-router";
+  import { location, link, push } from "svelte-spa-router";
 
   /* TODO(rudolfs): fetch the actual org list */
   import { orgMocks } from "../../lib/orgMocks.js";
@@ -180,7 +180,7 @@
           <Avatar
             imageUrl={org.metadata.avatarUrl}
             avatarFallback={org.avatarFallback}
-            variant="project"
+            variant="square"
             size="medium" />
         </a>
 
@@ -191,8 +191,7 @@
     {/each}
 
     <li class="item">
-      <AddOrgButton on:click={() => console.log('event(add-org)')} />
-
+      <AddOrgButton on:click={() => push(path.orgRegistration())} />
       <div class="tooltip">
         <Title>Add org</Title>
       </div>

diff --git a/ui/DesignSystem/Component/SourceBrowser/Readme.svelte b/ui/DesignSystem/Component/SourceBrowser/Readme.svelte
@@ -29,16 +29,6 @@
     margin-left: 0.5rem;
   }
 
-  .line-numbers {
-    font-family: var(--typeface-mono-regular);
-    font-size: 14px;
-    background-color: var(--color-foreground-level-1);
-    color: var(--color-foreground-level-5);
-    text-align: center;
-    flex: 0 0 49px;
-    user-select: none;
-  }
-
   .code {
     font-family: var(--typeface-mono-regular);
     font-size: 16px;

diff --git a/ui/DesignSystem/Component/SourceBrowser/RevisionSelector.svelte b/ui/DesignSystem/Component/SourceBrowser/RevisionSelector.svelte
@@ -111,7 +111,7 @@
       title={revisions[0].identity.metadata.handle}
       avatarFallback={revisions[0].identity.avatarFallback}
       size="small"
-      variant="user" />
+      variant="circle" />
   </div>
   <div class="selector-branch">{currentRevision}</div>
   <div class="selector-expand">
@@ -129,7 +129,7 @@
           title={repo.identity.metadata.handle}
           avatarFallback={repo.identity.avatarFallback}
           size="small"
-          variant="user" />
+          variant="circle" />
       </div>
       <ul>
         {#each repo.branches as branch}

diff --git a/ui/DesignSystem/Component/Transaction.svelte b/ui/DesignSystem/Component/Transaction.svelte
@@ -29,7 +29,7 @@
       title={subject.name}
       imageUrl={subject.imageUrl}
       avatarFallback={subject.avatarFallback}
-      variant={subject.kind}
+      variant={subject.kind === 'user' ? 'circle' : 'square'}
       style="color: var(--color-foreground)" />
   </div>
 </Row>

diff --git a/ui/DesignSystem/Component/index.js b/ui/DesignSystem/Component/index.js
@@ -2,6 +2,7 @@ import AdditionalActionsDropdown from "./AdditionalActionsDropdown.svelte";
 import Copyable from "./Copyable.svelte";
 import HorizontalMenu from "./HorizontalMenu.svelte";
 import IdentityAvatar from "./IdentityAvatar.svelte";
+import NavigationButtons from "./Registration/NavigationButtons.svelte";
 import Notification from "./Notification.svelte";
 import NotificationFaucet from "./NotificationFaucet.svelte";
 import ModalLayout from "./ModalLayout.svelte";
@@ -27,6 +28,7 @@ export {
   Copyable,
   HorizontalMenu,
   IdentityAvatar,
+  NavigationButtons,
   Notification,
   NotificationFaucet,
   ModalLayout,
@@ -36,6 +38,7 @@ export {
   Rad,
   RadioOption,
   Remote,
+  Row,
   Sidebar,
   SidebarLayout,
   StepCounter,
@@ -44,6 +47,5 @@ export {
   Transaction,
   TransactionAccordion,
   TransactionStatusbar,
-  Row,
   UserCard
 };
diff --git a/ui/DesignSystem/Primitive/Avatar.svelte b/ui/DesignSystem/Primitive/Avatar.svelte
@@ -9,8 +9,8 @@
   export let avatarFallback = null; // {emoji: <emoji>, background: {r: <r>, g: <g>, b: <b>}};
   export let title = null;
 
-  export let variant = "user"; // user | project
-  export let size = "regular"; // regular | medium | big | huge
+  export let variant = "circle"; // circle | square
+  export let size = "regular"; // small | regular | medium | big | huge
 
   const fmt = background => {
     return `rgb(${background.r}, ${background.g}, ${background.b})`;
@@ -20,56 +20,61 @@
 </script>
 
 <style>
-  .user.small {
+  .circle.small {
     width: 24px;
     height: 24px;
     border-radius: 16px;
   }
 
   img,
-  .user.regular {
+  .circle.regular {
     width: 32px;
     height: 32px;
     border-radius: 16px;
   }
 
-  .user.medium {
+  .circle.medium {
     width: 36px;
     height: 36px;
     border-radius: 18px;
   }
 
-  .user.big {
+  .circle.big {
     width: 68px;
     height: 68px;
     border-radius: 34px;
   }
 
-  .user.huge {
+  .circle.huge {
     width: 72px;
     height: 72px;
     border-radius: 36px;
   }
 
-  .avatar.user.big {
+  .avatar.circle.big {
     line-height: 68px;
   }
 
-  .project {
+  .square {
     border-radius: 2px;
   }
 
-  .project.regular {
+  .square.small {
+    width: 24px;
+    height: 24px;
+  }
+
+  .square.regular {
     width: 32px;
     height: 32px;
   }
 
-  .project.medium {
+  .square.medium {
     width: 36px;
     height: 36px;
   }
 
-  .project.big {
+  .square.big {
     width: 64px;
     height: 64px;
   }

diff --git a/ui/DesignSystem/Primitive/Input/Directory.svelte b/ui/DesignSystem/Primitive/Input/Directory.svelte
@@ -6,9 +6,8 @@
 
   export let placeholder = null;
   export let style = null;
-  export let valid = true;
   export let path = null;
-  export let validationMessage = null;
+  export let validation = null;
 
   const openFileDialog = async () => {
     path = await getDirectoryPath();
@@ -25,9 +24,8 @@
 <div class="wrapper" {style}>
   <TextInput
     {placeholder}
-    {validationMessage}
+    {validation}
     value={path}
-    {valid}
     disabled
     style="margin-right: 16px; flex: 1" />
 

diff --git a/ui/DesignSystem/Primitive/Input/Text.svelte b/ui/DesignSystem/Primitive/Input/Text.svelte
@@ -1,20 +1,22 @@
 <script>
   import Text from "../Text.svelte";
   import Icon from "../Icon";
-  import Avatar from "../Avatar.svelte";
+
+  import { ValidationStatus } from "../../../src/validation.ts";
 
   export let style = null;
   export let placeholder = null;
   export let value = null;
   export let dataCy = null;
 
   export let disabled = null;
-  export let valid = true;
-  export let validationMessage = null;
-  export let variant = "vanilla"; // vanilla | handle
-  export let imageUrl = null;
-  export let avatarFallback = null;
-  export let validationPending = false;
+
+  // TODO(sos): replace with actual slot presence check once
+  // https://github.com/sveltejs/svelte/issues/2106 is solved
+  let slotFallback;
+
+  export let validation = null;
+  export let showSuccessCheck = false;
 </script>
 
 <style>
@@ -35,7 +37,7 @@
     background-color: var(--color-background);
   }
 
-  input.handle {
+  input.avatar {
     padding: 0 40px 0 38px;
   }
 
@@ -68,48 +70,54 @@
     margin-top: 12px;
     margin-left: 12px;
   }
+
+  .avatar-wrapper {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    padding-left: 8px;
+    display: flex;
+    height: 40px;
+    justify-content: center;
+    align-items: center;
+  }
 </style>
 
 <div {style} class="wrapper">
   <input
     data-cy={dataCy}
-    class:invalid={!valid && !validationPending}
-    class:handle={variant === 'handle'}
+    class:invalid={validation && validation.status === ValidationStatus.Error}
+    class:avatar={!slotFallback}
     {placeholder}
     bind:value
     {disabled}
     on:change
     on:input />
-  {#if variant === 'handle'}
-    <Avatar
-      {avatarFallback}
-      {imageUrl}
-      variant="user"
-      size="small"
-      style="width: 24px; height: 40px; justify-content: flex-start; position:
-      absolute; top: 0px; left: 8px" />
-  {/if}
 
-  {#if variant === 'handle'}
-    {#if validationPending}
+  <div class="avatar-wrapper">
+    <slot name="avatar">
+      <div bind:this={slotFallback} />
+    </slot>
+  </div>
+
+  {#if validation}
+    {#if validation.status === ValidationStatus.Loading}
       <Icon.Spinner
         style="justify-content: flex-start; position: absolute; top: 8px; right:
-        8px;" />
-    {:else if value && valid}
+        10px;" />
+    {:else if validation.status === ValidationStatus.Success && showSuccessCheck}
       <Icon.CheckCircle
         style="fill: var(--color-positive); justify-content: flex-start;
-        position: absolute; top: 8px; right: 8px;" />
+        position: absolute; top: 8px; right: 10px;" />
+    {:else if validation.status === ValidationStatus.Error}
+      <Icon.Important
+        style="fill: var(--color-negative); justify-content: flex-start;
+        position: absolute; top: 8px; right: 10px;" />
+      <div class="validation-row">
+        <Text style="color: var(--color-negative); text-align: left;">
+          {validation.message}
+        </Text>
+      </div>
     {/if}
   {/if}
-
-  {#if !validationPending && !valid && validationMessage}
-    <Icon.Important
-      style="fill: var(--color-negative); justify-content: flex-start; position:
-      absolute; top: 8px; right: 8px;" />
-    <div class="validation-row">
-      <Text style="color: var(--color-negative); text-align: left;">
-        {validationMessage}
-      </Text>
-    </div>
-  {/if}
 </div>