@bigbinary/neeto-editor 0.2.0 → 0.2.1

package/src/examples/index.js

@@ -1,10 +1,10 @@
 import React, { useRef } from "react";
 
-import CodeBlock from "../Common/CodeBlock";
-import Description from "../Common/Description";
-import Heading from "../Common/Heading";
-import HighlightText from "../Common/HighlightText";
-import ListItems from "../Common/ListItems";
+import CodeBlock from "common/CodeBlock";
+import Description from "common/Description";
+import Heading from "common/Heading";
+import HighlightText from "common/HighlightText";
+import ListItems from "common/ListItems";
 import Editor from "../Editor";
 import {
   EDITOR_FEATURES,
@@ -37,7 +37,7 @@ const Example = () => {
         </button>
       </div>
       <hr className="my-2 border-gray-100" />
-      <Editor ref={ref} variables={SAMPLE_VARIABLES} />
+      <Editor ref={ref} />
       <Heading type="sub">Features</Heading>
       <ListItems items={EDITOR_FEATURES} ordered />
 
@@ -127,26 +127,26 @@ const Example = () => {
       <Description>
         The editor can have placeholder texts for different nodes. These value
         is accepted as <HighlightText>placeholder</HighlightText> prop.
-        <ul className="list-disc list-inside">
-          <li>
-            Value as object: Each type of node can have corresponding
-            placeholder, in which case the value should be of type{" "}
-            <HighlightText>{"{node_name: placeholder_text}"}</HighlightText>.
-          </li>
-          <li>
-            Value as string: When plain string is provided as value for
-            placeholder, all the nodes will be using the same placeholder text
-            irrespective of their type in which case the value should be of type{" "}
-          </li>
-          <li>
-            Value as function: the <HighlightText>placeholder</HighlightText>{" "}
-            prop can also accepts a function. For each node in the document, the
-            function receives node as argument and return the corresponding
-            placeholder string. eg:{" "}
-            <HighlightText>{"({node}) => placeholder_text"}</HighlightText>
-          </li>
-        </ul>
       </Description>
+      <ul className="list-disc list-inside">
+        <li>
+          Value as object: Each type of node can have corresponding placeholder,
+          in which case the value should be of type{" "}
+          <HighlightText>{"{node_name: placeholder_text}"}</HighlightText>.
+        </li>
+        <li>
+          Value as string: When plain string is provided as value for
+          placeholder, all the nodes will be using the same placeholder text
+          irrespective of their type in which case the value should be of type{" "}
+        </li>
+        <li>
+          Value as function: the <HighlightText>placeholder</HighlightText> prop
+          can also accepts a function. For each node in the document, the
+          function receives node as argument and return the corresponding
+          placeholder string. eg:{" "}
+          <HighlightText>{"({node}) => placeholder_text"}</HighlightText>
+        </li>
+      </ul>
 
       <div className="flex">
         <CodeBlock>{STRINGS.placeholderSampleCode}</CodeBlock>

package/src/hooks/useTabBar.js

@@ -0,0 +1,9 @@
+import { useState } from "react";
+
+const useTabBar = (options) => {
+  const [activeTab, setActiveTab] = useState(options[0]?.key);
+
+  return [activeTab, (option) => setActiveTab(option.key)];
+};
+
+export default useTabBar;

package/src/index.scss

@@ -13,6 +13,11 @@
 @import "./styles/components/editor";
 @import "./styles/components/avatar";
 @import "./styles/components/fixed-menu";
+@import "./styles/components/image-uploader";
+@import "./styles/components/tab";
+@import "./styles/components/button";
+@import "./styles/components/tooltip";
+@import "./styles/components/input";
 
 body {
   margin: 0;

package/src/styles/abstracts/_neeto-ui-variables.scss

@@ -1,36 +1,107 @@
+// Color palette
+
+// primary
 $neeto-ui-white: #ffffff;
 $neeto-ui-black: #1b1f23;
-
+// content
 $neeto-ui-gray-800: #2f3941;
 $neeto-ui-gray-700: #49545c;
 $neeto-ui-gray-600: #68737d;
 $neeto-ui-gray-500: #87929d;
+$neeto-ui-gray-400: #c2c8cc;
 $neeto-ui-gray-300: #d8dcde;
 $neeto-ui-gray-200: #e9ebed;
 $neeto-ui-gray-100: #f8f9f9;
 // states
 $neeto-ui-success: #00ba88;
+$neeto-ui-info: #276ef1;
 $neeto-ui-warning: #f3cd82;
+$neeto-ui-error: #f56a58;
+// pastel
+$neeto-ui-pastel-blue: #eaf3fc;
+$neeto-ui-pastel-green: #ebf5ec;
+$neeto-ui-pastel-yellow: #fff2d7;
+$neeto-ui-pastel-red: #ffefed;
+$neeto-ui-pastel-teal: #98f3f4;
+// secondary
+$neeto-ui-secondary-indigo: #5e5ce6;
+$neeto-ui-secondary-green: #00ba88;
+$neeto-ui-secondary-teal: #64d2ff;
+
+// Font Weights
+$neeto-ui-font-thin: 100;
+$neeto-ui-font-extralight: 200;
+$neeto-ui-font-light: 300;
+$neeto-ui-font-normal: 400;
+$neeto-ui-font-medium: 500;
+$neeto-ui-font-semibold: 600;
+$neeto-ui-font-bold: 700;
+$neeto-ui-font-extrabold: 800;
+$neeto-ui-font-black: 900;
 
 // Font Sizes
 $neeto-ui-text-xxs: 10px;
 $neeto-ui-text-xs: 12px;
 $neeto-ui-text-sm: 14px;
+$neeto-ui-text-base: 16px;
 $neeto-ui-text-lg: 18px;
+$neeto-ui-text-xl: 20px;
 $neeto-ui-text-2xl: 24px;
+$neeto-ui-text-3xl: 32px;
+$neeto-ui-text-4xl: 48px;
 
-// Shadow
-$box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 10px 20px rgba(0, 0, 0, 0.1);
-$neeto-ui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-  0 2px 4px -1px rgba(0, 0, 0, 0.06);
+// Line Heights
+$neeto-ui-leading-none: 1;
+$neeto-ui-leading-tight: 1.25;
+$neeto-ui-leading-snug: 1.375;
+$neeto-ui-leading-normal: 1.5;
+$neeto-ui-leading-relaxed: 1.625;
+$neeto-ui-leading-loose: 2;
+
+// Text-transform
+$neeto-ui-text-transform-none: none;
+$neeto-ui-text-transform-capitalize: capitalize;
+$neeto-ui-text-transform-uppercase: uppercase;
+$neeto-ui-text-transform-lowercase: lowercase;
+$neeto-ui-text-transform-fullwidth: full-width;
+$neeto-ui-text-transform-inherit: inherit;
+$neeto-ui-text-transform-initial: initial;
+$neeto-ui-text-transform-revert: revert;
+$neeto-ui-text-transform-unset: unset;
 
 // Border Radius
+$neeto-ui-rounded-none: 0;
 $neeto-ui-rounded-sm: 2px;
+$neeto-ui-rounded: 4px;
+$neeto-ui-rounded-md: 6px;
+$neeto-ui-rounded-lg: 8px;
+$neeto-ui-rounded-xl: 10px;
 $neeto-ui-rounded-full: 999px;
 
-// Font Weights
-$neeto-ui-font-normal: 400;
-$neeto-ui-font-semibold: 600;
-
 // Transition
 $neeto-ui-transition: all 0.3s ease-in-out;
+
+// Shadows
+$neeto-ui-shadow: 0px 0px 0px 3px $neeto-ui-gray-200;
+$neeto-ui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+  0 2px 4px -1px rgba(0, 0, 0, 0.06);
+
+// Box Shadows
+$neeto-ui-shadow-xs: 0px 1px 4px -1px rgba(28, 48, 74, 0.12);
+$neeto-ui-shadow-s: 0px 3px 12px -1px rgba(28, 52, 84, 0.12),
+  0px 2px 4px -1px rgba(28, 55, 90, 0.08);
+$neeto-ui-shadow-m: 0px 8px 24px -4px rgba(28, 50, 79, 0.12),
+  0px 2px 6px -1px rgba(28, 55, 90, 0.08);
+$neeto-ui-shadow-l: 0px 12px 48px -6px rgba(28, 50, 79, 0.12),
+  0px 3px 18px -2px rgba(28, 55, 90, 0.08);
+$neeto-ui-shadow-xl: 0px 18px 64px -8px rgba(28, 50, 79, 0.12),
+  0px 4px 24px -3px rgba(28, 55, 90, 0.08);
+
+// neeto-ui-shadows-map
+$neeto-ui-shadows: (
+  "xs": $neeto-ui-shadow-xs,
+  "s": $neeto-ui-shadow-s,
+  "m": $neeto-ui-shadow-m,
+  "l": $neeto-ui-shadow-l,
+  "xl": $neeto-ui-shadow-xl,
+);

package/src/styles/abstracts/_variables.scss

@@ -1,10 +1,13 @@
 // Colors
 $color-steel-blue: steelblue;
+$color-link-blue: #1053f9;
 $color-solid-white: #fff;
 $color-solid-black: #000000;
 $color-translucent-black: #00000010;
 $color-aqua-blue: #68cef8;
+$color-indigo: #5e5ce6;
 $color-dark-green: #00ffaa40;
 
+// Font Sizes
 
-
+$font-size-lg: 16px;

package/src/styles/components/_button.scss

@@ -0,0 +1,161 @@
+.neeto-ui-btn {
+  display: inline-flex;
+  align-items: center;
+  font-size: $neeto-ui-text-sm;
+  font-weight: $neeto-ui-font-medium;
+  border-radius: $neeto-ui-rounded-sm;
+  line-height: 1.2;
+  transition: $neeto-ui-transition;
+  position: relative;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  user-select: none;
+  padding: 4px 8px;
+  min-height: 28px;
+  letter-spacing: -0.15px;
+  outline: none;
+
+  &--icon-only {
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  .neeto-ui-btn__icon:last-child:not(:first-child),
+  .neeto-ui-btn__spinner:last-child:not(:first-child) {
+    margin-left: 8px;
+  }
+}
+
+.neeto-ui-btn--icon-left {
+  flex-direction: row-reverse;
+  .neeto-ui-btn__icon:last-child:not(:first-child),
+  .neeto-ui-btn__spinner:last-child:not(:first-child) {
+    margin-right: 8px;
+    margin-left: 0;
+  }
+}
+
+.neeto-ui-btn__icon,
+.neeto-ui-btn__spinner,
+.neeto-ui-btn__spinner-wrapper {
+  color: inherit;
+  svg {
+    color: inherit !important;
+  }
+}
+
+// width
+.neeto-ui-btn--width-full {
+  width: 100% !important;
+  justify-content: center;
+}
+
+// size
+.neeto-ui-btn--size-large {
+  font-size: $neeto-ui-text-base;
+  padding: 6px 12px;
+  min-height: 32px;
+
+  &.neeto-ui-btn--icon-only {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
+
+// styles
+.neeto-ui-btn--style {
+  &-primary {
+    color: $neeto-ui-white;
+    background-color: $neeto-ui-gray-800;
+
+    &:hover:not(:disabled),
+    &:active {
+      color: $neeto-ui-white;
+      background-color: $neeto-ui-gray-700;
+    }
+
+    &:focus-visible {
+      color: $neeto-ui-white;
+      box-shadow: 0 0 0 3px #e5e5e5;
+    }
+  }
+
+  &-secondary {
+    color: $neeto-ui-gray-800;
+    background-color: $neeto-ui-gray-200;
+
+    &:hover:not(:disabled),
+    &:active {
+      color: $neeto-ui-gray-800;
+      background-color: $neeto-ui-gray-400;
+    }
+
+    &:focus-visible {
+      color: $neeto-ui-gray-800;
+      box-shadow: 0 0 0 3px #e5e5e5;
+    }
+  }
+
+  &-text {
+    color: $neeto-ui-gray-800;
+
+    &:hover:not(:disabled),
+    &:active {
+      color: $neeto-ui-gray-800;
+      background-color: $neeto-ui-gray-200;
+    }
+
+    &:focus-visible {
+      color: $neeto-ui-gray-800;
+      box-shadow: 0 0 0 3px #e5e5e5;
+    }
+  }
+
+  &-link {
+    color: $neeto-ui-secondary-indigo;
+    min-height: initial;
+    padding: 0;
+
+    &:hover:not(:disabled),
+    &:active,
+    &:focus {
+      opacity: 0.8;
+      color: $neeto-ui-secondary-indigo;
+    }
+
+    &:focus-visible {
+      color: darken($neeto-ui-secondary-indigo, 25%);
+    }
+  }
+
+  &-danger {
+    color: $neeto-ui-error;
+    background-color: $neeto-ui-pastel-red;
+
+    &:hover:not(:disabled),
+    &:active {
+      color: $neeto-ui-error;
+      background-color: darken($neeto-ui-pastel-red, 2.5%);
+    }
+
+    &:focus-visible {
+      color: $neeto-ui-error;
+      box-shadow: 0 0 0 3px darken($neeto-ui-pastel-red, 2.5%);
+    }
+  }
+}

package/src/styles/components/_editor.scss

@@ -72,6 +72,10 @@ $list-item-color: #1a141f;
   font-family: "JetBrains Mono", monospace;
 }
 
+.prose a[href] {
+  color: $color-link-blue;
+}
+
 .prose {
   max-width: 100% !important;
 }

package/src/styles/components/_fixed-menu.scss

@@ -5,6 +5,10 @@
   border-radius: $neeto-ui-rounded-sm $neeto-ui-rounded-sm 0px 0px;
   background: $neeto-ui-gray-200;
 
+  button {
+    outline: none;
+  }
+
   .editor-fixed-menu--item {
     &:hover {
       background: $neeto-ui-gray-300;

package/src/styles/components/_image-uploader.scss

@@ -0,0 +1,109 @@
+.image-uploader__root {
+  $color-primary: $color-indigo;
+
+  .label--primary {
+    color: $neeto-ui-gray-700;
+    display: block;
+    margin-bottom: 5px;
+    font-size: $neeto-ui-text-sm;
+  }
+
+  .label--secondary {
+    color: $neeto-ui-gray-400;
+    font-size: $neeto-ui-text-xs;
+  }
+
+  margin: 8px;
+  display: flex;
+  flex-direction: column;
+  min-height: 176px;
+  width: 488px;
+
+  .image-uploader__content {
+    flex: 1;
+    display: flex;
+    margin-top: 10px;
+  }
+
+  // ProgressBar
+  .progress-bar__root {
+    width: 100%;
+    max-width: 256px;
+    margin-top: 11px;
+    .progress-bar__indicator {
+      position: relative;
+      width: 100%;
+      height: 6px;
+      border-radius: 100px;
+      overflow: hidden;
+      background: rgba($color-primary, 0.2);
+      margin-top: 5px;
+    }
+
+    .progress-bar__indicator-inner {
+      background: $color-primary;
+    }
+
+    .progress-bar__percent-text {
+      font-size: $neeto-ui-text-xs;
+      color: $neeto-ui-gray-800;
+    }
+  }
+
+  // Local upload component related styles
+  .local-upload__root {
+    display: flex;
+    flex: 1;
+    border: 1px dashed $neeto-ui-gray-400;
+    box-sizing: border-box;
+    border-radius: 2px;
+
+    // DragDrop
+    .uppy-DragDrop-container {
+      width: 100%;
+      height: 100%;
+      background-color: $color-solid-white;
+      cursor: pointer;
+
+      // firefox fix: removes thin dotted outline
+      &::-moz-focus-inner {
+        border: 0;
+      }
+    }
+
+    .uppy-DragDrop-inner {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      margin: 0;
+      line-height: 1.4;
+      text-align: center;
+      font-weight: $neeto-ui-font-normal;
+    }
+
+    .uppy-DragDrop-arrow {
+      visibility: hidden;
+      display: none;
+    }
+
+    .uppy-DragDrop--isDraggingOver {
+      background: $neeto-ui-gray-200;
+      border: 2px dashed $color-primary;
+    }
+
+    .uppy-DragDrop-label {
+      @extend .label--primary;
+    }
+
+    .uppy-DragDrop-browse {
+      color: $color-primary;
+      font-size: $font-size-lg;
+      font-weight: $neeto-ui-font-semibold;
+      cursor: pointer;
+    }
+
+    .uppy-DragDrop-note {
+      @extend .label--secondary;
+    }
+  }
+}

package/src/styles/components/_input.scss

@@ -0,0 +1,165 @@
+.neeto-ui-input__wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-grow: 1;
+
+  .neeto-ui-label {
+    margin-bottom: 4px;
+  }
+
+  .neeto-ui-input {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    font-size: $neeto-ui-text-sm;
+    line-height: 1.6;
+    transition: $neeto-ui-transition;
+    border-radius: $neeto-ui-rounded-sm;
+    border: thin solid $neeto-ui-gray-400;
+    background-color: $neeto-ui-white;
+    color: $neeto-ui-gray-800;
+    overflow: hidden;
+
+    &.neeto-ui-input--textarea {
+      padding: 8px;
+    }
+
+    input,
+    textarea {
+      width: 100%;
+      background-color: transparent;
+      color: inherit;
+      border: none;
+      font-size: inherit;
+      line-height: inherit;
+      box-shadow: none;
+      outline: none;
+
+      &::placeholder {
+        color: $neeto-ui-gray-400;
+      }
+
+      &:focus {
+        outline-color: transparent;
+      }
+    }
+
+    input {
+      padding: 8px;
+    }
+
+    textarea {
+      padding: 0;
+      max-height: 224px;
+      overflow-y: auto;
+    }
+
+    &:focus-within:not(.neeto-ui-input--naked, .neeto-ui-input--error) {
+      border-color: $neeto-ui-gray-800;
+      box-shadow: $neeto-ui-shadow;
+    }
+
+    &:hover:not(.neeto-ui-input--naked, .neeto-ui-input--error, .neeto-ui-input--disabled) {
+      border-color: $neeto-ui-gray-700;
+    }
+
+    &.neeto-ui-input--error {
+      border-color: $neeto-ui-error;
+
+      &:focus-within:not(.neeto-ui-input--naked) {
+        box-shadow: 0 0 0 3px $neeto-ui-pastel-red;
+      }
+
+      textarea {
+        resize: none;
+      }
+    }
+
+    &.neeto-ui-input--disabled {
+      background-color: $neeto-ui-gray-100;
+      cursor: not-allowed;
+
+      input {
+        cursor: not-allowed;
+      }
+
+      textarea {
+        cursor: not-allowed;
+      }
+    }
+
+    &.neeto-ui-input--small {
+      input {
+        padding: 6px 8px;
+        line-height: 1.3;
+      }
+    }
+
+    &.neeto-ui-input--naked {
+      padding: 0;
+      border: none;
+      box-shadow: none;
+
+      .neeto-ui-input__prefix {
+        margin-left: 0;
+      }
+
+      .neeto-ui-input__suffix {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .neeto-ui-input__prefix,
+  .neeto-ui-input__suffix {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    font-size: 14px;
+    color: $neeto-ui-gray-600;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  .neeto-ui-input__prefix {
+    margin-left: 10px;
+  }
+  .neeto-ui-input__suffix {
+    margin-right: 10px;
+  }
+
+  .neeto-ui-input--block-add-on {
+    .neeto-ui-input__prefix,
+    .neeto-ui-input__suffix {
+      margin: 0;
+      padding: 8px 10px;
+      background-color: $neeto-ui-gray-100;
+    }
+    .neeto-ui-input__prefix {
+      border-right: thin solid $neeto-ui-gray-300;
+    }
+    .neeto-ui-input__suffix {
+      border-left: thin solid $neeto-ui-gray-300;
+    }
+  }
+}
+
+.neeto-ui-input__help-text {
+  margin-top: 8px;
+  font-size: $neeto-ui-text-xs;
+  color: $neeto-ui-gray-500;
+  line-height: 1.6;
+}
+
+.neeto-ui-input__error {
+  margin-top: 4px;
+  font-size: $neeto-ui-text-xs;
+  color: $neeto-ui-error;
+}