@odigos/ui-kit 0.0.5 → 0.0.7

package/lib/index-DRT_7tQl.js

@@ -0,0 +1,659 @@
+import { ENTITY_TYPES } from './types.js';
+import React from 'react';
+import { keyframes } from 'styled-components';
+
+const createStoreImpl = (createState) => {
+  let state;
+  const listeners = /* @__PURE__ */ new Set();
+  const setState = (partial, replace) => {
+    const nextState = typeof partial === "function" ? partial(state) : partial;
+    if (!Object.is(nextState, state)) {
+      const previousState = state;
+      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
+      listeners.forEach((listener) => listener(state, previousState));
+    }
+  };
+  const getState = () => state;
+  const getInitialState = () => initialState;
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const api = { setState, getState, getInitialState, subscribe };
+  const initialState = state = createState(setState, getState, api);
+  return api;
+};
+const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;
+
+const identity = (arg) => arg;
+function useStore(api, selector = identity) {
+  const slice = React.useSyncExternalStore(
+    api.subscribe,
+    () => selector(api.getState()),
+    () => selector(api.getInitialState())
+  );
+  React.useDebugValue(slice);
+  return slice;
+}
+const createImpl = (createState) => {
+  const api = createStore(createState);
+  const useBoundStore = (selector) => useStore(api, selector);
+  Object.assign(useBoundStore, api);
+  return useBoundStore;
+};
+const create = (createState) => createState ? createImpl(createState) : createImpl;
+
+function createJSONStorage(getStorage, options) {
+  let storage;
+  try {
+    storage = getStorage();
+  } catch (e) {
+    return;
+  }
+  const persistStorage = {
+    getItem: (name) => {
+      var _a;
+      const parse = (str2) => {
+        if (str2 === null) {
+          return null;
+        }
+        return JSON.parse(str2, undefined );
+      };
+      const str = (_a = storage.getItem(name)) != null ? _a : null;
+      if (str instanceof Promise) {
+        return str.then(parse);
+      }
+      return parse(str);
+    },
+    setItem: (name, newValue) => storage.setItem(
+      name,
+      JSON.stringify(newValue, undefined )
+    ),
+    removeItem: (name) => storage.removeItem(name)
+  };
+  return persistStorage;
+}
+const toThenable = (fn) => (input) => {
+  try {
+    const result = fn(input);
+    if (result instanceof Promise) {
+      return result;
+    }
+    return {
+      then(onFulfilled) {
+        return toThenable(onFulfilled)(result);
+      },
+      catch(_onRejected) {
+        return this;
+      }
+    };
+  } catch (e) {
+    return {
+      then(_onFulfilled) {
+        return this;
+      },
+      catch(onRejected) {
+        return toThenable(onRejected)(e);
+      }
+    };
+  }
+};
+const persistImpl = (config, baseOptions) => (set, get, api) => {
+  let options = {
+    storage: createJSONStorage(() => localStorage),
+    partialize: (state) => state,
+    version: 0,
+    merge: (persistedState, currentState) => ({
+      ...currentState,
+      ...persistedState
+    }),
+    ...baseOptions
+  };
+  let hasHydrated = false;
+  const hydrationListeners = /* @__PURE__ */ new Set();
+  const finishHydrationListeners = /* @__PURE__ */ new Set();
+  let storage = options.storage;
+  if (!storage) {
+    return config(
+      (...args) => {
+        console.warn(
+          `[zustand persist middleware] Unable to update item '${options.name}', the given storage is currently unavailable.`
+        );
+        set(...args);
+      },
+      get,
+      api
+    );
+  }
+  const setItem = () => {
+    const state = options.partialize({ ...get() });
+    return storage.setItem(options.name, {
+      state,
+      version: options.version
+    });
+  };
+  const savedSetState = api.setState;
+  api.setState = (state, replace) => {
+    savedSetState(state, replace);
+    void setItem();
+  };
+  const configResult = config(
+    (...args) => {
+      set(...args);
+      void setItem();
+    },
+    get,
+    api
+  );
+  api.getInitialState = () => configResult;
+  let stateFromStorage;
+  const hydrate = () => {
+    var _a, _b;
+    if (!storage) return;
+    hasHydrated = false;
+    hydrationListeners.forEach((cb) => {
+      var _a2;
+      return cb((_a2 = get()) != null ? _a2 : configResult);
+    });
+    const postRehydrationCallback = ((_b = options.onRehydrateStorage) == null ? undefined : _b.call(options, (_a = get()) != null ? _a : configResult)) || undefined;
+    return toThenable(storage.getItem.bind(storage))(options.name).then((deserializedStorageValue) => {
+      if (deserializedStorageValue) {
+        if (typeof deserializedStorageValue.version === "number" && deserializedStorageValue.version !== options.version) {
+          if (options.migrate) {
+            const migration = options.migrate(
+              deserializedStorageValue.state,
+              deserializedStorageValue.version
+            );
+            if (migration instanceof Promise) {
+              return migration.then((result) => [true, result]);
+            }
+            return [true, migration];
+          }
+          console.error(
+            `State loaded from storage couldn't be migrated since no migrate function was provided`
+          );
+        } else {
+          return [false, deserializedStorageValue.state];
+        }
+      }
+      return [false, undefined];
+    }).then((migrationResult) => {
+      var _a2;
+      const [migrated, migratedState] = migrationResult;
+      stateFromStorage = options.merge(
+        migratedState,
+        (_a2 = get()) != null ? _a2 : configResult
+      );
+      set(stateFromStorage, true);
+      if (migrated) {
+        return setItem();
+      }
+    }).then(() => {
+      postRehydrationCallback == null ? undefined : postRehydrationCallback(stateFromStorage, undefined);
+      stateFromStorage = get();
+      hasHydrated = true;
+      finishHydrationListeners.forEach((cb) => cb(stateFromStorage));
+    }).catch((e) => {
+      postRehydrationCallback == null ? undefined : postRehydrationCallback(undefined, e);
+    });
+  };
+  api.persist = {
+    setOptions: (newOptions) => {
+      options = {
+        ...options,
+        ...newOptions
+      };
+      if (newOptions.storage) {
+        storage = newOptions.storage;
+      }
+    },
+    clearStorage: () => {
+      storage == null ? undefined : storage.removeItem(options.name);
+    },
+    getOptions: () => options,
+    rehydrate: () => hydrate(),
+    hasHydrated: () => hasHydrated,
+    onHydrate: (cb) => {
+      hydrationListeners.add(cb);
+      return () => {
+        hydrationListeners.delete(cb);
+      };
+    },
+    onFinishHydration: (cb) => {
+      finishHydrationListeners.add(cb);
+      return () => {
+        finishHydrationListeners.delete(cb);
+      };
+    }
+  };
+  if (!options.skipHydration) {
+    hydrate();
+  }
+  return stateFromStorage || configResult;
+};
+const persist = persistImpl;
+
+const useDarkMode = create()(persist((set) => ({
+    darkMode: true,
+    setDarkMode: (bool) => set({ darkMode: bool }),
+}), {
+    name: 'odigos-dark-mode',
+    storage: typeof window !== 'undefined' ? createJSONStorage(() => localStorage) : undefined,
+}));
+
+const useDrawerStore = create((set) => ({
+    drawerType: null,
+    drawerEntityId: null,
+    setDrawerType: (value) => set({ drawerType: value }),
+    setDrawerEntityId: (value) => set({ drawerEntityId: value }),
+}));
+
+const getEntityId = (item) => {
+    if ('ruleId' in item && !!item.ruleId) {
+        // Instrumentation Rule
+        return item.ruleId;
+    }
+    else if ('id' in item && !!item.id) {
+        // Destination or Action
+        return item.id;
+    }
+    else if ('namespace' in item && !!item.namespace && 'kind' in item && !!item.kind && 'name' in item && !!item.name) {
+        // Source
+        return {
+            namespace: item.namespace,
+            name: item.name,
+            kind: item.kind,
+        };
+    }
+    console.warn('getEntityId() - cannot get ID of entity:', item);
+    return undefined;
+};
+
+const isTimeElapsed = (originDate, difference = 0) => {
+    const now = new Date().getTime();
+    const compareWith = new Date(originDate).getTime();
+    return now - compareWith >= difference;
+};
+
+const useEntityStore = create((set) => ({
+    sourcesLoading: false,
+    sources: [],
+    destinationsLoading: false,
+    destinations: [],
+    actionsLoading: false,
+    actions: [],
+    instrumentationRulesLoading: false,
+    instrumentationRules: [],
+    setEntitiesLoading: (entityType, bool) => {
+        const KEY = entityType === ENTITY_TYPES.SOURCE
+            ? 'sourcesLoading'
+            : entityType === ENTITY_TYPES.DESTINATION
+                ? 'destinationsLoading'
+                : entityType === ENTITY_TYPES.ACTION
+                    ? 'actionsLoading'
+                    : entityType === ENTITY_TYPES.INSTRUMENTATION_RULE
+                        ? 'instrumentationRulesLoading'
+                        : 'NONE';
+        if (KEY === 'NONE')
+            return;
+        set({ [KEY]: bool });
+    },
+    setEntities: (entityType, payload) => {
+        const KEY = entityType === ENTITY_TYPES.SOURCE
+            ? 'sources'
+            : entityType === ENTITY_TYPES.DESTINATION
+                ? 'destinations'
+                : entityType === ENTITY_TYPES.ACTION
+                    ? 'actions'
+                    : entityType === ENTITY_TYPES.INSTRUMENTATION_RULE
+                        ? 'instrumentationRules'
+                        : 'NONE';
+        if (KEY === 'NONE')
+            return;
+        set({ [KEY]: payload });
+    },
+    addEntities: (entityType, entities) => {
+        const KEY = entityType === ENTITY_TYPES.SOURCE
+            ? 'sources'
+            : entityType === ENTITY_TYPES.DESTINATION
+                ? 'destinations'
+                : entityType === ENTITY_TYPES.ACTION
+                    ? 'actions'
+                    : entityType === ENTITY_TYPES.INSTRUMENTATION_RULE
+                        ? 'instrumentationRules'
+                        : 'NONE';
+        if (KEY === 'NONE')
+            return;
+        set((state) => {
+            const prev = [...state[KEY]];
+            entities.forEach((newItem) => {
+                const foundIdx = prev.findIndex((oldItem) => JSON.stringify(getEntityId(oldItem)) === JSON.stringify(getEntityId(newItem)));
+                if (foundIdx !== -1) {
+                    prev[foundIdx] = { ...prev[foundIdx], ...newItem };
+                }
+                else {
+                    prev.push(newItem);
+                }
+            });
+            return { [KEY]: prev };
+        });
+    },
+    removeEntities: (entityType, entityIds) => {
+        const KEY = entityType === ENTITY_TYPES.SOURCE
+            ? 'sources'
+            : entityType === ENTITY_TYPES.DESTINATION
+                ? 'destinations'
+                : entityType === ENTITY_TYPES.ACTION
+                    ? 'actions'
+                    : entityType === ENTITY_TYPES.INSTRUMENTATION_RULE
+                        ? 'instrumentationRules'
+                        : 'NONE';
+        if (KEY === 'NONE')
+            return;
+        set((state) => {
+            const prev = [...state[KEY]];
+            entityIds.forEach((id) => {
+                const foundIdx = prev.findIndex((entity) => entityType === ENTITY_TYPES.SOURCE ? JSON.stringify(getEntityId(entity)) === JSON.stringify(getEntityId(id)) : getEntityId(entity) === id);
+                if (foundIdx !== -1) {
+                    prev.splice(foundIdx, 1);
+                }
+            });
+            return { [KEY]: prev };
+        });
+    },
+}));
+
+const getEmptyState = () => ({
+    searchText: '',
+    statuses: [],
+    platformTypes: [],
+    namespaces: [],
+    kinds: [],
+    monitors: [],
+    languages: [],
+    errors: [],
+    onlyErrors: false,
+});
+const useFilterStore = create((set) => ({
+    searchText: '',
+    setSearchText: (searchText) => set({ searchText }),
+    statuses: [],
+    setStatuses: (statuses) => set({ statuses }),
+    platformTypes: [],
+    setPlatformTypes: (platformTypes) => set({ platformTypes }),
+    namespaces: [],
+    setNamespaces: (namespaces) => set({ namespaces }),
+    kinds: [],
+    setKinds: (kinds) => set({ kinds }),
+    monitors: [],
+    setMonitors: (monitors) => set({ monitors }),
+    languages: [],
+    setLanguages: (languages) => set({ languages }),
+    errors: [],
+    setErrors: (errors) => set({ errors }),
+    onlyErrors: false,
+    setOnlyErrors: (onlyErrors) => set({ onlyErrors }),
+    setAll: (params) => set(params),
+    clearAll: () => set(getEmptyState()),
+    getEmptyState,
+}));
+
+const useInstrumentStore = create((set) => ({
+    isAwaitingInstrumentation: false,
+    sourcesToCreate: 0,
+    sourcesCreated: 0,
+    sourcesToDelete: 0,
+    sourcesDeleted: 0,
+    setInstrumentAwait: (v) => set({ isAwaitingInstrumentation: v }),
+    setInstrumentCount: (k, v) => set({ [k]: v }),
+}));
+
+const useModalStore = create((set) => ({
+    currentModal: '',
+    setCurrentModal: (str) => set({ currentModal: str }),
+}));
+
+const useNotificationStore = create((set, get) => ({
+    notifications: [],
+    addNotification: (notif) => {
+        const date = new Date();
+        const id = `${date.getTime().toString()}${!!notif.target ? `#${notif.target}` : ''}`;
+        // This is to prevent duplicate notifications within a 10 second time-frame.
+        // This is useful for notifications that are triggered multiple times in a short period, like failed API queries...
+        const foundThisNotif = !!get().notifications.find((n) => n.type === notif.type && n.title === notif.title && n.message === notif.message && !isTimeElapsed(n.time, 3000)); // 3 seconds
+        if (!foundThisNotif) {
+            set((state) => ({
+                notifications: [
+                    {
+                        ...notif,
+                        id,
+                        time: date.toISOString(),
+                        dismissed: false,
+                        seen: false,
+                    },
+                    ...state.notifications,
+                ],
+            }));
+        }
+    },
+    markAsDismissed: (id) => {
+        set((state) => {
+            const foundIdx = state.notifications.findIndex((notif) => notif.id === id);
+            if (foundIdx !== -1) {
+                state.notifications[foundIdx].dismissed = true;
+            }
+            return {
+                notifications: state.notifications,
+            };
+        });
+    },
+    markAsSeen: (id) => {
+        set((state) => {
+            const foundIdx = state.notifications.findIndex((notif) => notif.id === id);
+            if (foundIdx !== -1) {
+                state.notifications[foundIdx].seen = true;
+            }
+            return {
+                notifications: state.notifications,
+            };
+        });
+    },
+    removeNotification: (id) => {
+        set((state) => {
+            const foundIdx = state.notifications.findIndex((notif) => notif.id === id);
+            if (foundIdx !== -1) {
+                state.notifications.splice(foundIdx, 1);
+            }
+            return {
+                notifications: state.notifications,
+            };
+        });
+    },
+    removeNotifications: (target) => {
+        if (!target)
+            return;
+        set((state) => {
+            const filtered = state.notifications.filter((notif) => notif.id.split('#')[1] !== target);
+            return {
+                notifications: filtered,
+            };
+        });
+    },
+}));
+
+const itemsAreEqual = (item1, item2) => {
+    const entityTypesEqual = item1.entityType === item2.entityType;
+    const idsEqual = typeof item1.entityId === 'string' && typeof item2.entityId === 'string'
+        ? item1.entityId === item2.entityId
+        : typeof item1.entityId === 'object' && typeof item2.entityId === 'object'
+            ? item1.entityId.namespace === item2.entityId.namespace && item1.entityId.name === item2.entityId.name && item1.entityId.kind === item2.entityId.kind
+            : !item1.entityId && !item2.entityId;
+    return entityTypesEqual && idsEqual;
+};
+const usePendingStore = create((set, get) => ({
+    pendingItems: [],
+    setPendingItems: (arr) => set({ pendingItems: arr }),
+    addPendingItems: (arr) => set((state) => ({
+        pendingItems: state.pendingItems.concat(arr.filter((addItem) => !state.pendingItems.some((existingItem) => itemsAreEqual(existingItem, addItem)))),
+    })),
+    removePendingItems: (arr) => set((state) => ({
+        pendingItems: state.pendingItems.filter((existingItem) => !arr.find((removeItem) => itemsAreEqual(existingItem, removeItem))),
+    })),
+    // Pass an item to check if it's in the pending items array.
+    // This is used to show loading spinners, toasts etc.
+    isThisPending: (item) => {
+        const { pendingItems } = get();
+        let bool = false;
+        for (let i = 0; i < pendingItems.length; i++) {
+            const pendingItem = pendingItems[i];
+            if (pendingItem.entityType === item.entityType &&
+                (!item.entityId ||
+                    (pendingItem.entityType === ENTITY_TYPES.SOURCE
+                        ? !!pendingItem.entityId &&
+                            !!item.entityId &&
+                            pendingItem.entityId.namespace === item.entityId.namespace &&
+                            pendingItem.entityId.name === item.entityId.name &&
+                            pendingItem.entityId.kind === item.entityId.kind
+                        : pendingItem.entityId === item.entityId))) {
+                bool = true;
+                break;
+            }
+        }
+        return bool;
+    },
+}));
+
+const useSelectedStore = create((set) => ({
+    selectedSources: {},
+    setSelectedSources: (payload) => set({ selectedSources: payload }),
+    resetSelectedState: () => set(() => ({ selectedSources: {} })),
+}));
+
+const useSetupStore = create((set) => ({
+    availableSources: {},
+    configuredSources: {},
+    configuredFutureApps: {},
+    configuredDestinations: [],
+    setAvailableSources: (payload) => set({ availableSources: payload }),
+    setConfiguredSources: (payload) => set({ configuredSources: payload }),
+    setConfiguredFutureApps: (payload) => set({ configuredFutureApps: payload }),
+    setConfiguredDestinations: (payload) => set({ configuredDestinations: payload }),
+    addConfiguredDestination: (payload) => set((state) => ({ configuredDestinations: [...state.configuredDestinations, payload] })),
+    removeConfiguredDestination: (payload) => set((state) => ({ configuredDestinations: state.configuredDestinations.filter(({ stored }) => stored.type !== payload.type) })),
+    resetState: () => set(() => ({ availableSources: {}, configuredSources: {}, configuredFutureApps: {}, configuredDestinations: [] })),
+}));
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = "/* Preload key fonts in your global CSS */\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@100;200;300;400;500;600;700&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');\n\n* {\n  scrollbar-color: black transparent;\n  scrollbar-width: thin;\n}\n\nsvg {\n  transition: all 0.3s;\n}\n\n/*\n  The input styles below are to override the browser \":-webkit-autofill\" default style declarations.\n  The issue is when someone autocompletes an input field, the browser will apply its own styles (and the browser applies \"!important\" preventing direct overrides).\n  With the following, we're able to delay the browser styles to be applied for 50000s (13.8 hours), so the user will not see the browser styles applied.\n*/\n\ninput {\n  all: unset;\n}\n\ninput:-webkit-autofill,\ninput:-webkit-autofill:hover,\ninput:-webkit-autofill:focus,\ninput:-webkit-autofill:active {\n  -webkit-transition: all 50000s ease-in-out 0s;\n  transition: all 50000s ease-in-out 0s;\n}\n";
+styleInject(css_248z);
+
+const slide = {
+    in: {
+        left: keyframes `
+      from { transform: translateX(-100%); }
+      to { transform: translateX(0); }
+    `,
+        right: keyframes `
+      from { transform: translateX(100%); }
+      to { transform: translateX(0); }
+    `,
+        top: keyframes `
+      from { transform: translateY(-100%); }
+      to { transform: translateY(0); }
+    `,
+        bottom: keyframes `
+      from { transform: translateY(100%); }
+      to { transform: translateY(0); }
+    `,
+        center: keyframes `
+      from { transform: translate(-50%, 100%); }
+      to { transform: translate(-50%, -50%); }
+    `,
+    },
+    out: {
+        left: keyframes `
+      from { transform: translateX(0); }
+      to { transform: translateX(-100%); }
+    `,
+        right: keyframes `
+      from { transform: translateX(0); }
+      to { transform: translateX(100%); }
+    `,
+        top: keyframes `
+      from { transform: translateY(0); }
+      to { transform: translateY(-100%); }
+    `,
+        bottom: keyframes `
+      from { transform: translateY(0); }
+      to { transform: translateY(100%); }
+    `,
+        center: keyframes `
+      from { transform: translate(-50%, -50%); }
+      to { transform: translate(-50%, 100%); }
+    `,
+    },
+};
+const progress = {
+    in: keyframes `
+    from { width: 0%; }
+    to { width: 100%; }
+  `,
+    out: keyframes `
+    from { width: 100%; }
+    to { width: 0%; }
+  `,
+};
+const ping = keyframes `
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+`;
+const shimmer = keyframes `
+  0% {
+    background-position: -500px 0;
+  }
+  100% {
+    background-position: 500px 0;
+  }
+`;
+
+var animations = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ping: ping,
+  progress: progress,
+  shimmer: shimmer,
+  slide: slide
+});
+
+export { useDrawerStore as a, useEntityStore as b, useFilterStore as c, useInstrumentStore as d, useModalStore as e, useNotificationStore as f, usePendingStore as g, useSelectedStore as h, useSetupStore as i, animations as j, getEntityId as k, isTimeElapsed as l, styleInject as s, useDarkMode as u };