@meridian-ui/meridian 1.0.0

package/src/renderer/renderer.scss

@@ -0,0 +1,72 @@
+.odi-wrapper {
+  flex: 1;
+  position: inherit;
+  height: inherit;
+
+  &.popup-active {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    position: relative;
+  }
+}
+
+.odi-wrapper-container {
+  display: flex;
+}
+
+.malleability-tooltip {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  background-color: white;
+  padding: 2px;
+  border-radius: 4px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  z-index: 50;
+}
+
+.pop-up {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 40;
+  overflow: hidden;
+
+  .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    opacity: 0.3;
+  }
+  .detail-view-wrapper {
+    width: 80%;
+    max-width: 1000px;
+    // width: fit-content;
+    max-height: 90%;
+    height: fit-content;
+    background-color: white;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    z-index: 10;
+    overflow: auto;
+    position: relative;
+  }
+}
+
+body.no-scroll {
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}

package/src/renderer/renderer.tsx

@@ -0,0 +1,450 @@
+'use client';
+
+import {
+  AttributeType,
+  Overview,
+  DetailView,
+  ODI,
+  OverviewType,
+  ItemView,
+  ItemViewConfig,
+} from '../spec/spec';
+import { useODI } from '../store/odi.store';
+import { OverviewBasicList } from '../components/overviews/overview-basic-list';
+import '../index.css';
+import { OverviewBasicGrid } from '../components/overviews/overview-basic-grid';
+import { DetailBasic } from '../components/detail-views/detail-basic';
+import { JSX, ReactNode, useEffect } from 'react';
+import { denormalizeODI } from './renderer.denormalize';
+import {
+  getFirstDetail,
+  getFirstOverview,
+  filterItemAttributes,
+  mapRecursiveAttributes,
+} from './renderer.filter';
+import React from 'react';
+import { MalleabilityAttributesToggle } from '../components/malleability/malleability-content-toggle';
+import { ItemProfile } from '../components/item-views/item-profile';
+import { attributeInScope, rolesToIds } from '../helpers/attribute.helper';
+import { MalleabilityOvervewTabs } from '../components/malleability/malleability-overview-tabs';
+import { OverviewBasicMap } from '../components/overviews/overview-basic-map';
+import {
+  addDetailViewType,
+  addItemViewType,
+  addOverviewType,
+  CustomDetailViewType,
+  CustomItemViewType,
+  CustomOverviewType,
+  DetailViewTypeConfig,
+  detailViewTypesMap,
+  getOverviewTypesMap,
+  itemViewTypesMap,
+  ItemViewTypeConfig,
+  OverviewTypeConfig,
+  overviewTypesMap,
+} from './renderer.defaults';
+import {
+  getBottomCenter,
+  checkDataLists,
+  getDataBindingById,
+  findItemDetailViewToOpen,
+  findOverviewById,
+  getAttributeDataBindingById,
+} from '../helpers/view.helper';
+import {
+  mapDataToFetchedItems,
+  getFetchedODIFromData,
+} from './renderer.data-bind';
+import {
+  FetchedItemType,
+  FetchedODI,
+  ViewOptions,
+  FetchedAttributeType,
+  FetchedAttributeGroupType,
+} from '../spec/spec.internal';
+import skeletonData from '../assets/dummy-data/skeleton.json';
+import { skeletonODI } from '../assets/dummy-data/skeleton';
+
+// const ODIRenderer: React.FC<{ odi: BookingODI }> = ({ odi }) => {
+//   return (
+//     <div>
+//       {odi.overviews.map((overview, index) => {
+//         switch (overview.type) {
+//           case 'basic-list':
+//             return <BasicListComponent key={index} {...overview} />;
+//           case 'basic-map':
+//             return <BasicMapComponent key={index} {...overview} />;
+//           default:
+//             return null;
+//         }
+//       })}
+//     </div>
+//   );
+// };
+
+export const MeridianOverview = ({
+  overviewIdToShow,
+  attribute,
+}: {
+  overviewIdToShow?: string;
+  attribute?: FetchedAttributeGroupType;
+}) => {
+  const {
+    selectedItemEntity,
+    odi,
+    data: dataLists,
+    getSelectedAttributeSet,
+    onOpenDetailNewPage,
+    onOpenOverviewNewPage,
+    enabledMalleableContent,
+    malleableCompositionSetting,
+    activeOverview,
+  } = useODI();
+
+  if (!odi) return <></>;
+  if (overviewIdToShow) {
+    const overview = findOverviewById(odi, overviewIdToShow);
+
+    if (overview) {
+      const OverviewComponent =
+        overviewTypesMap[overview.type]?.view ?? OverviewBasicList;
+      const OverviewWrapper = React.Fragment;
+
+      let items: FetchedItemType[] = [];
+
+      if (attribute) {
+        const attributeItems = (getAttributeDataBindingById(
+          odi,
+          overview.bindingId,
+          attribute
+        )?.attributes ?? []) as unknown as FetchedItemType[];
+
+        const parentItems = getDataBindingById(odi, overview.bindingId).items;
+
+        const mappedAttributeItems = mapRecursiveAttributes(
+          attributeItems,
+          parentItems,
+          overview.id ?? ''
+        );
+
+        // console.log('1', attributeItems, mappedAttributeItems);
+
+        items = filterItemAttributes(
+          mappedAttributeItems,
+          rolesToIds(
+            [...parentItems, ...attributeItems],
+            overview.shownAttributes ?? []
+          ),
+          rolesToIds(attributeItems, overview.hiddenAttributes ?? []),
+          ''
+        ).map((item) => ({
+          ...item,
+          id: item.itemId,
+        }));
+      } else {
+        items = filterItemAttributes(
+          getDataBindingById(odi, overview.bindingId).items,
+          overview.shownAttributes,
+          overview.hiddenAttributes,
+          overview?.id ?? ''
+        );
+      }
+
+      // console.log('2', getDataBindingById(odi, overview.bindingId).items);
+
+      // console.log('overview', overview, overview.shownAttributes);
+      return (
+        <OverviewWrapper key={`${overview.id}-${0}`}>
+          {!attribute && enabledMalleableContent() && (
+            <MalleabilityAttributesToggle />
+          )}
+          <OverviewComponent
+            overview={overview}
+            items={items}
+            viewType={'overview'}
+            onOpenDetailNewPage={onOpenDetailNewPage ?? (() => {})}
+            onOpenOverviewNewPage={onOpenOverviewNewPage ?? (() => {})}
+          />
+        </OverviewWrapper>
+      );
+    }
+  }
+
+  console.log('bbbb', odi);
+
+  return (
+    <div>
+      <div className="flex flex-col">
+        {malleableCompositionSetting().includes('tabs') && (
+          <MalleabilityOvervewTabs />
+        )}
+        {enabledMalleableContent() && <MalleabilityAttributesToggle />}
+      </div>
+      {odi.overviews
+        .filter(
+          (overview) =>
+            !malleableCompositionSetting().includes('tabs') ||
+            activeOverview === overview.id
+        )
+        .map((overview, index) => {
+          const OverviewComponent =
+            overviewTypesMap[overview.type]?.view ?? OverviewBasicList;
+          const OverviewWrapper = React.Fragment;
+          const items = filterItemAttributes(
+            getDataBindingById(odi, overview.bindingId).items,
+            overview.shownAttributes,
+            overview.hiddenAttributes,
+            '6734625345' // It's empty because I don't need to filter by viewId. This basically removes attributes with the same id as the overview.
+          );
+
+          return (
+            <OverviewWrapper key={`${overview.id}-${index}`}>
+              <OverviewComponent
+                overview={overview}
+                items={items}
+                viewType={'overview'}
+                onOpenDetailNewPage={onOpenDetailNewPage ?? (() => {})}
+                onOpenOverviewNewPage={onOpenOverviewNewPage ?? (() => {})}
+              />
+            </OverviewWrapper>
+          );
+        })}
+      {
+        // ---- SIDE BY SIDE VIEW ----
+        selectedItemEntity?.detail.openIn === 'side-by-side' && (
+          <div className="">
+            <MeridianDetail
+              dataLists={dataLists}
+              odi={odi}
+              itemId={selectedItemEntity?.itemId}
+            />
+          </div>
+        )
+      }
+    </div>
+  );
+};
+
+export const MeridianItem = ({
+  options,
+  item,
+  index,
+  itemView,
+  style,
+  className,
+}: {
+  options: ViewOptions;
+  item: FetchedItemType;
+  index: number;
+  itemView?: ItemView;
+  style?: React.CSSProperties;
+  className?: string;
+}) => {
+  const {
+    odi,
+    selectedItemEntity,
+    setSelectedItemEntity,
+    getSelectedAttributeSet,
+    highlightAttributes,
+    onOpenDetailNewPage,
+    onOpenOverviewNewPage,
+  } = useODI();
+
+  const itemViewType =
+    itemView?.type ??
+    overviewTypesMap[options.overview.type]?.defaultSpec.itemView?.type ??
+    'profile';
+
+  const ItemComponent = itemViewTypesMap[itemViewType]?.view ?? ItemProfile;
+
+  // console.log('detailToOpen', options, odi);
+  // Find the detail view that should open from clicking this attribute
+  const detailToOpen = findItemDetailViewToOpen(options, odi);
+
+  return (
+    <div
+      // className="w-fit relative"
+      className={`${className}`}
+      style={{
+        cursor: detailToOpen && !highlightAttributes ? 'pointer' : 'auto',
+        ...style,
+      }}
+      onClick={(e) => {
+        if (detailToOpen && !highlightAttributes) {
+          setSelectedItemEntity(
+            detailToOpen,
+            item.overviewIndex ?? 0,
+            item.itemId,
+            {
+              ...options,
+              viewType: 'detail',
+              overview: {
+                ...options.overview,
+                detailViews: options.overview.detailViews,
+              },
+              // details: detailToOpen.details,
+            },
+            { x: e.clientX, y: e.clientY }
+          );
+        }
+        if (detailToOpen?.openIn === 'new-page') {
+          // If open in new page, run callback function to route.
+          options.onOpenDetailNewPage(options.items[index]);
+        }
+      }}
+    >
+      {odi &&
+        selectedItemEntity?.itemId === item.itemId &&
+        selectedItemEntity?.detail.openIn === 'tooltip' && (
+          <div
+            className="absolute w-[400px] h-fit max-h-[500px] bg-white shadow-2xl h-[96%] rounded-md z-10 overflow-scroll"
+            style={{
+              left: 'calc(50% - 200px)',
+              top: -520,
+            }}
+          >
+            <MeridianDetail odi={odi} itemId={item.itemId} />
+          </div>
+        )}
+      <ItemComponent
+        options={options}
+        item={item}
+        index={index}
+        className={className + (detailToOpen ? ' item-hover' : '')}
+        style={style}
+      />
+    </div>
+  );
+};
+
+// * Another application idea, that's not really ODI toolkit, but more specification+demo:
+// * 1. Specification --> UI --> Screenshot can then provide more info about the spec from the UI
+// * 2. A coding framework for ODIs through the spec??
+export const MeridianDetail = ({
+  odi: fetchedODI,
+  dataLists,
+  itemId,
+  detailId,
+  onAction,
+}: {
+  odi?: FetchedODI; // Accept either FetchedODI or ODI
+  dataLists?: any[][];
+  itemId: string | undefined;
+  // item: FetchedItemType | undefined;
+  detailId?: string;
+  onAction?: React.MouseEventHandler<HTMLButtonElement>;
+}) => {
+  const {
+    odi,
+    setODI,
+    setOriginalODI,
+    selectedItemEntity,
+    setSelectedItemEntity,
+    getSelectedAttributeSet,
+    setOnOpenNewPage,
+  } = useODI();
+
+  // Only set the ODI from the imported spec variable if DNE in the store.
+  useEffect(() => {
+    if (fetchedODI && !odi && dataLists) {
+      if (fetchedODI) {
+        setODI(denormalizeODI(fetchedODI));
+        setOriginalODI(denormalizeODI(fetchedODI));
+      }
+    }
+  }, [fetchedODI]);
+
+  // Get default overview and detail view if selected detail content isn't found in the store.
+  useEffect(() => {
+    if (!selectedItemEntity && odi) {
+      if (detailId) {
+        const allDetailViews = odi.overviews
+          .flatMap((overview) =>
+            overview.detailViews
+              ?.map((d) => {
+                // Convert string references to actual detail view objects
+                const detailView =
+                  typeof d === 'string'
+                    ? odi.detailViews?.find((dv) => dv.id === d)
+                    : d;
+                return detailView ? { detailView, overview } : null;
+              })
+              .filter(Boolean)
+          )
+          .concat(
+            odi.detailViews?.map((d) => ({
+              detailView: d,
+              overview: odi.overviews[0],
+            })) || []
+          );
+        const overviewDetailObject = allDetailViews.find(
+          (detail) => detail?.detailView.id === detailId
+        );
+
+        if (overviewDetailObject && itemId) {
+          setSelectedItemEntity(
+            overviewDetailObject.detailView,
+            odi.overviews.findIndex(
+              (overview) => overview.id === overviewDetailObject.overview.id
+            ),
+            itemId,
+            {
+              overview: overviewDetailObject.overview,
+              items:
+                getDataBindingById(
+                  odi,
+                  overviewDetailObject?.overview?.bindingId ??
+                    overviewDetailObject?.detailView?.bindingId
+                )?.items || [],
+              viewType: 'detail',
+              onOpenDetailNewPage: () => {},
+              onOpenOverviewNewPage: () => {},
+            },
+            { x: 0, y: 0 }
+          );
+        }
+      } else {
+        const firstOverview = getFirstOverview(odi);
+        const firstDetail = getFirstDetail(odi);
+        if (itemId) {
+          setSelectedItemEntity(
+            firstDetail,
+            0,
+            itemId,
+            {
+              overview: firstOverview,
+              items:
+                getDataBindingById(
+                  odi,
+                  firstOverview?.bindingId ?? firstDetail?.bindingId
+                )?.items || [],
+              viewType: 'detail',
+              onOpenDetailNewPage: () => {},
+              onOpenOverviewNewPage: () => {},
+            },
+            { x: 0, y: 0 }
+          );
+        }
+      }
+    }
+  }, [itemId, odi]);
+
+  const selectedItem = getSelectedAttributeSet();
+  if (selectedItem && odi) {
+    const DetailComponent =
+      detailViewTypesMap[selectedItemEntity?.detail.type ?? 'basic']?.view ??
+      DetailBasic;
+
+    return (
+      <div className="">
+        {(odi?.malleability?.disabled === false ||
+          odi?.malleability?.disabled === undefined) && (
+          <MalleabilityAttributesToggle />
+        )}
+        <DetailComponent item={selectedItem} />
+      </div>
+    );
+  } else {
+    return <div></div>;
+  }
+};