@meridian-ui/meridian 1.0.0

package/src/index.css

@@ -0,0 +1,149 @@
+@import "tailwindcss";
+
+:root {
+  font-optical-sizing: auto;
+  font-style: normal;
+
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
+    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
+    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
+
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+
+  --primaryPoints-glow: conic-gradient(
+    from 180deg at 50% 50%,
+    #16abff33 0deg,
+    #0885ff33 55deg,
+    #54d6ff33 120deg,
+    #0071ff33 160deg,
+    transparent 360deg
+  );
+  --secondaryPoints-glow: radial-gradient(
+    rgba(255, 255, 255, 1),
+    rgba(255, 255, 255, 0)
+  );
+
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(
+    #00000080,
+    #00000040,
+    #00000030,
+    #00000020,
+    #00000010,
+    #00000010,
+    #00000080
+  );
+
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+}
+
+/* * {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+} */
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+.gm-style iframe + div {
+  border: none !important;
+}
+
+h1 {
+  font-weight: 700;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+}
+
+a {
+  color: inherit;
+  /* color: red; */
+  /* text-decoration: underline; */
+}
+
+a:hover {
+  color: rgb(0, 64, 255);
+  cursor: pointer;
+}
+
+input {
+  font-style: italic;
+  background-color: white;
+}
+
+input::placeholder {
+  transition: ease;
+}
+
+.white-input {
+}
+
+.white-input::placeholder {
+  font-style: italic;
+  color: #9ca3af; /* Tailwind gray: md-gray-400 */
+}
+
+hr {
+  border: none; /* Remove default border */
+  border-top: 1px solid #d1d5db; /* Top border with 1px thickness and gray color */
+  margin: 0; /* Optional: Remove margin if needed */
+  padding: 0; /* Optional: Remove padding if needed */
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+/* button {
+  background-color: #ececec;
+  border-radius: 6px;
+  padding: 3px 10px;
+  transition: 0.2s ease;
+  outline: none;
+}
+
+button:hover {
+  background-color: #d2d2d2;
+}
+
+button:active {
+  background-color: #bfbfbf;
+} */
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}
+
+.loader {
+  border: 2px solid transparent; /* Light grey */
+  border-top: 2px solid #6b7280; /* Blue */
+  border-left: 2px solid #6b7280; /* Blue */
+  border-right: 2px solid #6b7280; /* Blue */
+  border-radius: 50%;
+  width: 12px;
+  height: 12px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+import 'index.css'

package/src/renderer/attribute.scss

@@ -0,0 +1,59 @@
+.attribute {
+  // display: flex;
+  // flex-direction: column;
+  // border: 1px solid red;
+  // // flex-direction: row;
+  // // flex-wrap: wrap;
+  // gap: 8px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 8px;
+  }
+}
+
+  .attribute-item {
+    display: flex;
+  }
+  .attribute-label {
+    font-weight: 300;
+  }
+
+.attribute-render {
+  // flex: 1;
+  z-index: 0;
+}
+
+.attribute-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+}
+
+.highlight-attributes {
+  background: #00000020;
+  border-radius: 2px;
+  opacity: 0.6;
+}
+
+.highlight-attributes:hover {
+  background: #00000030;
+  opacity: 0.8;
+}
+
+.highlight-attributes:active {
+  background: #00000050;
+  opacity: 1;
+}
+
+.attribute-selected {
+  outline: 2px solid #446f49b0;
+  /* outline-offset: 2px; */
+  background: #446f4950;
+  /* background: none; */
+  opacity: 1;
+  /* background: red; */
+}

package/src/renderer/attribute.tsx

@@ -0,0 +1,305 @@
+import './attribute.scss';
+import { CSSProperties, ReactElement } from 'react';
+import { useODI } from '../store/odi.store';
+import React from 'react';
+import { attributeInScope } from '../helpers/attribute.helper';
+import { getFirstDetail, getFirstOverview } from '../renderer/renderer.filter';
+import {
+  FetchedAttributeType,
+  FetchedAttributeGroupType,
+  FetchedODI,
+  ViewOptions,
+} from '../spec/spec.internal';
+import { isAttributeType } from '../helpers/spec.helper';
+import { attributeTypesMap } from './renderer.defaults';
+import { DetailView } from '../spec/spec';
+import { findDetailViewToOpen } from '../helpers/view.helper';
+import { MeridianOverview } from './renderer';
+
+// export const AttributeOver
+
+export const Attribute = ({
+  attribute,
+  children,
+  options,
+  // itemIndex,
+  onAction,
+  showLabel,
+  className,
+  style,
+}: {
+  attribute: FetchedAttributeType | FetchedAttributeType[] | undefined;
+  children?: ReactElement;
+  showLabel?: boolean;
+  options: ViewOptions;
+  // itemIndex: number;
+  onAction?: React.MouseEventHandler<HTMLButtonElement>;
+  className?: string;
+  style?: CSSProperties;
+}) => {
+  const {
+    odi,
+    selectedItemEntity,
+    setSelectedItemEntity,
+    highlightAttributes,
+    toggleSelectedAttribute,
+    attributeIsSelected,
+    setLastSelected,
+  } = useODI();
+
+  const viewId =
+    (options.viewType === 'overview'
+      ? options.overview.id ?? (odi ? getFirstOverview(odi).id : '')
+      : selectedItemEntity?.detail.id ?? (odi ? getFirstDetail(odi).id : '')) ??
+    '';
+
+  if (!attribute) return <></>;
+
+  // const classNameString = `${children.className} ${className}`;
+  const classNameString = `${className}`; //${attribute?.className}`;
+  const styleObject = { ...style }; //...attribute?.style };
+
+  const AttributeItem = ({
+    attribute,
+    children,
+  }: {
+    attribute: FetchedAttributeType;
+    children?: ReactElement;
+  }) => {
+    if (!attribute) return <></>;
+
+    if (children) {
+      return children;
+    }
+
+    // console.log(
+    //   'attribute',
+    //   attribute.type,
+    //   attribute.type && attributeTypesMap[attribute.type]
+    // );
+
+    // Check if the attribute type has a custom renderer in attributeTypesMap
+    if (attribute.type && attributeTypesMap[attribute.type]) {
+      const AttributeComponent = attributeTypesMap[attribute.type].view;
+      return (
+        <AttributeComponent
+          attribute={attribute}
+          options={options}
+          item={options.items[attribute.itemIndex ?? 0]}
+        />
+      );
+    }
+
+    // If the attribute is an overview, return the overview component
+    if (attribute.type === 'overview') {
+      // console.log('overview', attribute);
+      return (
+        <MeridianOverview
+          overviewIdToShow={attribute.id}
+          attribute={attribute as FetchedAttributeGroupType}
+        />
+      );
+    }
+
+    // Default fallback types
+    if (!isAttributeType(attribute)) {
+      return (
+        <div
+          // ${attribute?.direction === 'row' ? 'flex-row flex-wrap' : 'flex-col'}
+          className={`attribute ${classNameString}`}
+          // style={attribute?.style}
+        >
+          {attribute.attributes
+            .filter(
+              (a) =>
+                a &&
+                ((isAttributeType(a) && a.value) ||
+                  (!isAttributeType(a) && a.attributes))
+            )
+            .map((attributeSet, index) => (
+              <Attribute
+                className={classNameString}
+                // style={attributeSet?.style}
+                key={index}
+                options={options}
+                attribute={attributeSet}
+              >
+                {children}
+              </Attribute>
+            ))}
+        </div>
+      );
+    } else if (
+      attribute.type === 'element' ||
+      React.isValidElement(attribute.value)
+    ) {
+      return (
+        <div className={classNameString} style={styleObject}>
+          {attribute.value as ReactElement}
+        </div>
+      );
+    } else if (attribute.type === 'image') {
+      return (
+        <div
+          className={`attribute ${classNameString}`}
+          style={{
+            ...styleObject,
+            overflow: 'hidden',
+            width: options.overview.type === 'table' ? '200px' : 'auto',
+            padding: options.overview.type === 'table' ? '6px' : '0px',
+          }}
+        >
+          <img src={attribute.value?.toString()} />
+        </div>
+      );
+    } else if (attribute.type === 'link') {
+      return (
+        <a
+          className={classNameString}
+          style={styleObject}
+          href={attribute.value?.toString()}
+        >
+          {attribute.label ?? attribute.value?.toString()}
+        </a>
+      );
+    } else if (attribute.type === 'button') {
+      return (
+        <button
+          className={classNameString}
+          style={styleObject}
+          onClick={onAction}
+        >
+          {attribute.value?.toString()}
+        </button>
+      );
+    } else {
+      return (
+        <div className={`${classNameString}`} style={styleObject}>
+          {/* {attribute.value?.toString()}: {attribute.id} */}
+          {/* {showLabel ? (
+            <>
+              <div className="attribute-label">{attribute.label}</div>
+              <div className="attribute-value">{attribute.value?.toString()}</div>
+            </>
+          ) : (
+            <div className="attribute-value">{attribute.value?.toString()}</div>
+          )} */}
+          {/* {classNameString} */}
+          {attribute.value?.toString()}
+        </div>
+      );
+    }
+  };
+
+  const RenderAttribute = ({
+    attribute,
+    children,
+  }: {
+    attribute: FetchedAttributeType;
+    children?: ReactElement;
+  }) => {
+    if (!attribute) return <></>;
+
+    const detailToOpen = findDetailViewToOpen(options, odi, attribute);
+
+    // console.log('detailToOpen', detailToOpen);
+
+    const toHighlight =
+      highlightAttributes &&
+      isAttributeType(attribute) &&
+      attribute.type !== 'overview';
+
+    return (
+      <div
+        key={`${attribute.itemIndex}-${attribute.index}-${attribute.id}-render`}
+        className={`attribute-render ${
+          attributeIsSelected(attribute) ? 'attribute-selected' : ''
+        } ${toHighlight ? 'highlight-attributes' : ''}`}
+        style={{
+          cursor: detailToOpen || toHighlight ? 'pointer' : 'auto',
+          transition: 'opacity ease 0.15s, background ease 0.15s',
+        }}
+        onClick={(e) => {
+          if (toHighlight) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            // console.log('aa', attribute);
+            toggleSelectedAttribute(attribute);
+            setLastSelected(
+              e.clientX + 20,
+              e.clientY + 20,
+              options.viewType,
+              viewId
+            );
+          } else if (detailToOpen) {
+            const generalItem = options.items.at(attribute.itemIndex ?? 0);
+            if (generalItem && !('value' in generalItem)) {
+              e.stopPropagation();
+              // console.log('test', detailToOpen, options, attribute.itemIndex);
+              setSelectedItemEntity(
+                detailToOpen,
+                generalItem.overviewIndex ?? 0,
+                generalItem.itemId,
+                {
+                  ...options,
+                  viewType: 'detail',
+                  overview: {
+                    ...options.overview,
+                    detailViews: options.overview.detailViews,
+                  },
+                },
+                { x: e.clientX, y: e.clientY }
+              );
+            }
+            if (detailToOpen.openIn === 'new-page') {
+              e.stopPropagation();
+              // If open in new page, run callback function to route.
+              options.onOpenDetailNewPage(
+                options.items[attribute.itemIndex ?? 0]
+              );
+            }
+          }
+        }}
+      >
+        {/* {overviewOptions.items.at(0)?.index} */}
+        {showLabel &&
+        isAttributeType(attribute) &&
+        attribute.value !== undefined &&
+        attribute.value !== null ? (
+          <span
+            className={`attribute-item ${classNameString}`}
+            style={{
+              ...styleObject,
+              fontWeight: '300',
+            }}
+          >
+            {attribute.label}:&nbsp;
+            <AttributeItem attribute={attribute} children={children} />
+          </span>
+        ) : (
+          <AttributeItem attribute={attribute} children={children} />
+        )}
+      </div>
+    );
+  };
+
+  if (Array.isArray(attribute) && attribute.length > 0) {
+    return attribute.map((attr, idx) => {
+      return (
+        <RenderAttribute
+          key={`${attr?.itemIndex}-${attr?.index}-${attr?.id}-${idx}`}
+          attribute={attr as FetchedAttributeType}
+        >
+          {children}
+        </RenderAttribute>
+      );
+    });
+  } else {
+    return (
+      <RenderAttribute attribute={attribute as FetchedAttributeType}>
+        {children}
+      </RenderAttribute>
+    );
+  }
+};