Merge pull request #128 from gridaco/feature/lint

(1/2) Design Lint - UI/UX Improvements - Update Plugin sdk backend

app/lib/components/schema-editor/schema-editor.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "../../constants";
 import { useSingleSelection } from "../../utils/plugin-hooks";
-import { PluginSdk } from "../../utils/plugin-provider/plugin-app-sdk";
+import { PluginSdk } from "@plugin-sdk/app";
 import {
   SingleLayerPropertyDefinition,
   ISingleLayerProperty,
@@ -190,7 +190,7 @@ function _Mode_Component(props: { node: nodes.light.IReflectNodeReference }) {
   useEffect(() => {
     Promise.all(
       grandchilds.map((c) => {
-        return PluginSdk.fetchMetadata_bridged<ISingleLayerProperty>(
+        return PluginSdk.fetchMetadata_grida<ISingleLayerProperty>(
           c.id,
           "layer-property-data"
         );

app/lib/components/ui.css

@@ -0,0 +1,328 @@
+/* Overrides */
+
+.button--flex {
+  flex: 1;
+}
+
+.button--full {
+  width: 100%;
+}
+
+button:active,
+button:focus {
+  outline: none;
+}
+
+/* Generic styles */
+
+.button--icon {
+  height: 32px;
+  width: 32px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: none;
+  box-shadow: unset;
+  cursor: pointer;
+  font-size: 18px;
+  background: transparent;
+}
+
+.button--icon:hover {
+  background: #eee;
+}
+
+.button--icon:active {
+  transform: scale3d(0.94, 0.94, 1);
+}
+
+.settings-checkbox-group {
+  display: flex;
+  padding-top: 8px;
+}
+
+.settings-checkbox-group input {
+  margin: 2px 8px 0 0;
+}
+
+.settings-button {
+  border-radius: 8px;
+  background-color: transparent;
+  border: 1px solid rgba(0, 0, 0, 0.8);
+}
+
+.w12 {
+  width: 12px;
+}
+
+/* Plugin specific styles */
+
+/* body {
+  font: 11px sans-serif;
+  font-family: system-ui;
+  margin: 0;
+  overflow: hidden;
+} */
+
+#create {
+  box-shadow: none;
+  background: #18a0fb;
+  color: #fff;
+}
+
+.page {
+  display: flex;
+  flex-flow: column nowrap;
+  width: 100vw;
+  height: calc(100vh - 46px);
+}
+
+.nav {
+  padding: 16px;
+  display: flex;
+  align-content: center;
+  justify-content: flex-start;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.nav-item {
+  padding-right: 16px;
+  font-weight: 500;
+  font-size: 11px;
+  color: #b3b3b3;
+  cursor: pointer;
+}
+
+.nav-item.active {
+  color: #333333;
+}
+
+.bulk-errors-list {
+  height: calc(100vh - 46px);
+  flex: 1;
+  margin: 0;
+  padding: 16px 0 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+}
+
+.list {
+  flex: 1;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+}
+
+.list-arrow {
+  height: 32px;
+  min-width: 16px;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  flex-flow: column;
+}
+
+.list-arrow-icon {
+  opacity: 0;
+  transition: opacity 50ms ease;
+  transform: rotate(-90deg);
+}
+
+.list-item {
+  width: 100%;
+  list-style: none;
+  padding: 0;
+}
+
+.list-item ul {
+  display: none;
+}
+
+.list-item--selected > .list-flex-row {
+  background: #daebf7;
+}
+
+.list-item--selected ul {
+  background: #edf5fa;
+}
+
+.list-item--active > ul {
+  display: block;
+}
+
+.list-item--active > div > .list-arrow > .list-arrow-icon {
+  transform: rotate(0deg);
+}
+
+.list-flex-row {
+  height: 32px;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  justify-content: flex-start;
+  border: 1px solid transparent;
+  transition: border-color 100ms ease;
+  cursor: pointer;
+  position: relative;
+}
+
+.badge {
+  position: absolute;
+  top: 6px;
+  right: 16px;
+  background: #fe6262;
+  color: #fff;
+  height: 16px;
+  min-width: 16px;
+  padding: 2px;
+  border-radius: 32px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.badge.badge-em {
+  padding: 2px 4px;
+}
+
+.dot {
+  position: absolute;
+  right: 21px;
+  background: #fe6262;
+  height: 6px;
+  width: 6px;
+  border-radius: 50%;
+  display: block;
+}
+
+.list-flex-row:hover {
+  border-color: #18a0fb;
+}
+
+.list-flex-row:hover .list-arrow-icon {
+  opacity: 1;
+}
+
+.list-icon {
+  text-align: center;
+  width: 16px;
+  opacity: 0.6;
+}
+
+.list-icon img {
+  height: 12px;
+  width: 12px;
+}
+
+.list-name {
+  margin: 0 8px;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 48px;
+}
+
+.sub-list {
+  /* width: calc(100% - 24px); */
+  margin: 0;
+  padding: 0 0 0 24px;
+}
+
+.frame {
+  font-weight: 400;
+}
+
+.list-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.totals-row {
+  position: relative;
+  font-size: 12px;
+  font-weight: 400;
+  color: #333333;
+  border-top: 1px solid #e5e5e5;
+  display: flex;
+  align-items: center;
+  padding: 0 16px 0 8px;
+}
+
+.totals-row .section-title {
+  flex: 1;
+}
+
+.error-count {
+  min-width: none;
+  min-height: none;
+}
+
+.error-count.success {
+  right: 16px;
+  background: #55db9e;
+  padding: 5px 4px;
+  border-radius: 32px;
+}
+
+.actions-row {
+  padding: 12px 16px;
+  border-top: 1px solid #e5e5e5;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.actions-row button {
+  margin-right: 12px;
+}
+
+.actions-row button:last-child {
+  margin-right: 0;
+}
+
+/* Context menu */
+
+.menu {
+  position: relative;
+}
+
+.menu-trigger {
+  display: block;
+  position: relative;
+  height: 32px;
+  width: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.menu-trigger:hover {
+  background: #eee;
+  border-radius: 16px;
+  cursor: pointer;
+}
+
+.menu-trigger img {
+  height: 20px;
+  width: 20px;
+}
+
+.menu-items {
+  position: absolute;
+  right: 0;
+  top: 32px;
+  width: 132px;
+}
+
+.menu-items .select-menu__list-item {
+  padding-left: 12px;
+}

app/lib/constants/ek.constant.ts

@@ -1,7 +1,6 @@
 /// EK stands for "Event Key"
 /// the event keys constants
 
-export const EK_LINT_FEEDBACK = "EK_LINT_FEEDBACK";
 export const EK_GENERATED_CODE_PLAIN = "EK_GENERATED_CODE_PLAIN";
 export const EK_IMAGE_ASSET_REPOSITORY_MAP = "EK_IMAGE_ASSET_REPOSITORY_MAP";
 export const EK_VANILLA_TRANSPORT = "EK_VANILLA_TRANSPORT";
@@ -11,6 +10,8 @@ export const EK_ICON_DRAG_AND_DROPPED = "assistant/design/icons/add/dropped";
 export const EK_CREATE_ICON = "assistant/design/icons/add/create";
 //
 export const EK_SET_APP_MODE = "EK_SET_APP_MODE";
+/** @deprecated migrate to plugin-sdk */
 export const EK_FOCUS_REQUEST = "EK_FOCUS_REQUEST";
 export const EK_COMPUTE_STARTED = "EK_COMPUTE_STARTED";
+/** @deprecated migrate to custom app event */
 export const EK_REPLACE_FONT = "EK_REPLACE_FONT";

app/lib/lint/README.md

@@ -0,0 +1,3 @@
+# Lint related components & logics
+
+> General Shared components will be placed under /components. only lint-specific-related components shall be placed under this directory.