@availity/mui-spaces 0.1.0

package/dist/index.mjs

@@ -0,0 +1,428 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/lib/Spaces.tsx
+import { createContext, useContext, useReducer, useEffect } from "react";
+import { useQueries } from "@tanstack/react-query";
+
+// src/lib/spaces-data.tsx
+import { avWebQLApi } from "@availity/api-axios";
+var actions = {
+  SPACES: (currentState, { spaces, spacesByConfig, spacesByPayer }) => ({
+    previousSpacesMap: spaces,
+    previousSpacesByConfigMap: spacesByConfig,
+    previousSpacesByPayerMap: spacesByPayer,
+    error: void 0,
+    loading: false
+  }),
+  ERROR: (state, { error }) => __spreadProps(__spreadValues({}, state), {
+    loading: false,
+    error
+  }),
+  LOADING: (state, { loading }) => __spreadProps(__spreadValues({}, state), {
+    loading: loading !== void 0 ? loading : !state.loading
+  })
+};
+var spacesReducer = (state, action) => {
+  const { type } = action;
+  return actions[type](state, action);
+};
+var normalizeSpaces = (spaces) => {
+  let spacesToReduce = spaces;
+  if (Array.isArray(spaces[0])) {
+    spacesToReduce = spaces[0];
+  }
+  const pairFields = ["images", "metadata", "colors", "icons", "mapping"];
+  return spacesToReduce.reduce((accum, spc) => {
+    var _b;
+    if (!spc)
+      return accum;
+    const _a = spc, { images, metadata, colors, icons, mapping } = _a, rest = __objRest(_a, ["images", "metadata", "colors", "icons", "mapping"]);
+    const normalizedSpace = __spreadValues({}, rest);
+    for (const field of pairFields) {
+      if (spc[field] && Array.isArray(spc[field])) {
+        normalizedSpace[field] = (_b = spc[field]) == null ? void 0 : _b.reduce((_accum, { name, value }) => {
+          _accum[name] = value;
+          return _accum;
+        }, {});
+      }
+    }
+    accum.push(normalizedSpace);
+    return accum;
+  }, []);
+};
+var fetchSpaces = (_0) => __async(void 0, [_0], function* ({ query, clientId, variables }) {
+  const {
+    data: {
+      data: { configurationPagination }
+    }
+  } = yield avWebQLApi.create(
+    {
+      query,
+      variables: __spreadValues({}, variables)
+    },
+    { headers: { "X-Client-ID": clientId } }
+  );
+  const {
+    pageInfo: { currentPage, hasNextPage },
+    items
+  } = configurationPagination;
+  return {
+    items,
+    currentPage,
+    hasNextPage
+  };
+});
+var fetchAllSpaces = (_0) => __async(void 0, [_0], function* ({
+  query,
+  clientId,
+  variables,
+  _spaces = []
+}) {
+  const { items, currentPage, hasNextPage } = yield fetchSpaces({ query, clientId, variables });
+  _spaces.push(...items);
+  if (hasNextPage) {
+    const vars = __spreadProps(__spreadValues({}, variables), {
+      page: currentPage + 1
+    });
+    return fetchAllSpaces({ query, clientId, variables: vars, _spaces });
+  }
+  return _spaces;
+});
+
+// src/lib/configurationFindMany.tsx
+var configurationFindMany_default = `query configurationFindMany($ids: [String!], $payerIDs: [ID!], $types: [TypeEnum!]) {
+  configurationPagination(filter: { ids: $ids, payerIds: $payerIDs, types: $types }) {
+    pageInfo {
+      hasNextPage
+      currentPage
+    }
+    items {
+      ... on Configuration {
+        configurationId
+        name
+        shortName
+        type
+        activeDate
+        isNew
+        description
+        payerIDs
+        parentIDs
+        metadataPairs {
+          name
+          value
+        }
+      }
+
+      ... on Node {
+        id
+      }
+
+      ... on Alert {
+        link {
+          text
+          target
+          url
+        }
+      }
+
+      ... on Container {
+        link {
+          text
+          target
+          url
+        }
+        images {
+          tile
+          promotional
+          logo
+          billboard
+        }
+      }
+
+      ... on PayerSpace {
+        link {
+          text
+          target
+          url
+        }
+        images {
+          tile
+          logo
+          billboard
+        }
+        url
+      }
+
+      ... on Application {
+        link {
+          text
+          target
+          url
+        }
+      }
+
+      ... on Resource {
+        link {
+          text
+          target
+          url
+        }
+      }
+
+      ... on Navigation {
+        icons {
+          dashboard
+          navigation
+        }
+        images {
+          promotional
+        }
+      }
+
+      ... on Learning {
+        images {
+          promotional
+        }
+      }
+
+      ... on Proxy {
+        url
+      }
+
+      ... on File {
+        url
+      }
+    }
+  }
+}`;
+
+// src/lib/Spaces.tsx
+import { jsx } from "react/jsx-runtime";
+var INITIAL_STATE = {
+  loading: true
+};
+var SpacesContext = createContext(INITIAL_STATE);
+var useSpacesContext = () => useContext(SpacesContext);
+var Spaces = ({
+  query = configurationFindMany_default,
+  variables = { types: ["PAYERSPACE"] },
+  clientId,
+  children,
+  payerIds,
+  spaceIds,
+  spaces: spacesFromProps
+}) => {
+  const [{ previousSpacesMap, previousSpacesByConfigMap, previousSpacesByPayerMap, loading, error }, dispatch] = useReducer(spacesReducer, INITIAL_STATE);
+  const spacesMap = new Map(previousSpacesMap);
+  const configIdsMap = new Map(previousSpacesByConfigMap);
+  const payerIdsMap = new Map(previousSpacesByPayerMap);
+  const spaceIdsToQuery = /* @__PURE__ */ new Set();
+  const payerIdsToQuery = /* @__PURE__ */ new Set();
+  if (spacesFromProps && spacesFromProps.length > 0) {
+    for (const space of spacesFromProps) {
+      if (space.id && !spacesMap.has(space.id)) {
+        spacesMap.set(space.id, space);
+      }
+      if (space.configurationId && !configIdsMap.has(space.configurationId)) {
+        configIdsMap.set(space.configurationId, space);
+      }
+      if (space.payerIDs) {
+        for (const pId of space.payerIDs) {
+          const currentSpacesForPayerId = payerIdsMap.get(pId);
+          if (currentSpacesForPayerId) {
+            payerIdsMap.set(pId, [...currentSpacesForPayerId, space]);
+          } else {
+            payerIdsMap.set(pId, [space]);
+          }
+        }
+      }
+    }
+  }
+  if (spaceIds && spaceIds.length > 0) {
+    for (const id of spaceIds) {
+      if (!(spacesMap.has(id) || configIdsMap.has(id))) {
+        spaceIdsToQuery.add(id);
+      }
+    }
+  }
+  if (payerIds && payerIds.length > 0) {
+    for (const pid of payerIds) {
+      if (!payerIdsMap.has(pid)) {
+        payerIdsToQuery.add(pid);
+      }
+    }
+  }
+  const spaceIdVars = __spreadProps(__spreadValues({}, variables), { ids: [...spaceIdsToQuery.keys()] });
+  const payerIdVars = __spreadProps(__spreadValues({}, variables), { payerIds: [...payerIdsToQuery.keys()] });
+  const [
+    { data: spacesBySpaceIds, isFetching: isLoadingBySpaceIds, error: errorBySpaceIds },
+    { data: spacesByPayerIds, isFetching: isLoadingByPayerIds, error: errorByPayerIds }
+  ] = useQueries({
+    queries: [
+      {
+        queryKey: ["id", spaceIdVars],
+        queryFn: () => fetchAllSpaces({ query, clientId, variables: spaceIdVars }),
+        enabled: spaceIdsToQuery.size > 0
+      },
+      {
+        queryKey: ["id", payerIdVars],
+        queryFn: () => fetchAllSpaces({ query, clientId, variables: payerIdVars }),
+        enabled: payerIdsToQuery.size > 0
+      }
+    ]
+  });
+  useEffect(() => {
+    if (errorByPayerIds || errorBySpaceIds) {
+      dispatch({
+        type: "ERROR",
+        error: (errorByPayerIds == null ? void 0 : errorByPayerIds.message) || (errorBySpaceIds == null ? void 0 : errorBySpaceIds.message),
+        loading: false
+      });
+    }
+  }, [errorByPayerIds, errorBySpaceIds]);
+  useEffect(() => {
+    dispatch({
+      type: "LOADING",
+      loading: true
+    });
+    if (spaceIdsToQuery.size === 0 && payerIdsToQuery.size === 0) {
+      dispatch({
+        type: "LOADING",
+        loading: false
+      });
+      return;
+    }
+    if (spacesBySpaceIds) {
+      for (const space of spacesBySpaceIds) {
+        if (!spacesMap.has(space.id)) {
+          spacesMap.set(space.id, space);
+        }
+        if (!configIdsMap.has(space.configurationId)) {
+          configIdsMap.set(space.configurationId, space);
+        }
+        if (space.payerIDs) {
+          for (const pId of space.payerIDs) {
+            const currentSpacesForPayerId = payerIdsMap.get(pId);
+            if (currentSpacesForPayerId) {
+              payerIdsMap.set(pId, [...currentSpacesForPayerId, space]);
+            } else {
+              payerIdsMap.set(pId, [space]);
+            }
+          }
+        }
+      }
+    }
+    if (payerIdsToQuery.size > 0) {
+      if (spacesByPayerIds) {
+        for (const space of spacesByPayerIds) {
+          if (!spacesMap.has(space.id)) {
+            spacesMap.set(space.id, space);
+          }
+          if (!configIdsMap.has(space.configurationId)) {
+            configIdsMap.set(space.configurationId, space);
+          }
+          if (space.payerIDs) {
+            for (const pId of space.payerIDs) {
+              const currentSpacesForPayerId = payerIdsMap.get(pId);
+              if (currentSpacesForPayerId) {
+                payerIdsMap.set(pId, [...currentSpacesForPayerId, space]);
+              } else {
+                payerIdsMap.set(pId, [space]);
+              }
+            }
+          }
+        }
+      }
+    }
+    dispatch({
+      type: "SPACES",
+      spaces: spacesMap,
+      spacesByConfig: configIdsMap,
+      spacesByPayer: payerIdsMap,
+      loading: false
+    });
+  }, [spacesBySpaceIds, spacesByPayerIds, payerIds, spaceIds]);
+  return /* @__PURE__ */ jsx(
+    SpacesContext.Provider,
+    {
+      children,
+      value: {
+        spaces: spacesMap,
+        spacesByConfig: configIdsMap,
+        spacesByPayer: payerIdsMap,
+        loading: loading || isLoadingByPayerIds || isLoadingBySpaceIds,
+        error
+      }
+    }
+  );
+};
+var useSpaces = (...ids) => {
+  const { spaces, spacesByConfig, spacesByPayer } = useSpacesContext();
+  const idsIsEmpty = !ids || ids.length === 0;
+  const callerIsExpectingFirstSpace = (ids == null ? void 0 : ids.length) === 1 && ids[0] === void 0;
+  const shouldReturnAllSpaces = idsIsEmpty || callerIsExpectingFirstSpace;
+  if (shouldReturnAllSpaces) {
+    console.warn(`You did not pass in an ID to find a space, returning all spaces.`);
+    return spaces && normalizeSpaces([...spaces.values()]);
+  }
+  const matchedSpaces = ids.map((id) => (spaces == null ? void 0 : spaces.get(id)) || (spacesByConfig == null ? void 0 : spacesByConfig.get(id)) || (spacesByPayer == null ? void 0 : spacesByPayer.get(id)));
+  const normalized = normalizeSpaces(matchedSpaces);
+  return normalized;
+};
+export {
+  INITIAL_STATE,
+  Spaces,
+  SpacesContext,
+  useSpaces,
+  useSpacesContext
+};

package/introduction.stories.mdx

@@ -0,0 +1,7 @@
+import { Markdown } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs';
+import ReadMe from './README.md?raw';
+
+<Meta title="Components/Spaces/Introduction" />
+
+<Markdown>{ReadMe}</Markdown>

package/jest.config.js

@@ -0,0 +1,7 @@
+const global = require('../../jest.config.global');
+
+module.exports = {
+  ...global,
+  displayName: 'spaces',
+  coverageDirectory: '../../coverage/spaces',
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@availity/mui-spaces",
+  "version": "0.1.0",
+  "description": "Availity MUI Spaces Component - part of the @availity/element design system",
+  "keywords": [
+    "react",
+    "typescript",
+    "availity",
+    "mui"
+  ],
+  "homepage": "https://availity.github.io/element/?path=/docs/components-spaces-introduction--docs",
+  "bugs": {
+    "url": "https://github.com/Availity/element/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/element.git",
+    "directory": "packages/spaces"
+  },
+  "license": "MIT",
+  "author": "Availity Developers <AVOSS@availity.com>",
+  "browser": "./dist/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts",
+    "clean": "rm -rf dist",
+    "clean:nm": "rm -rf node_modules",
+    "publish": "yarn npm publish --tolerate-republish --access public",
+    "publish:canary": "yarn npm publish --access public --tag canary"
+  },
+  "devDependencies": {
+    "@mui/material": "^5.15.15",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5.11.9",
+    "react": ">=16.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@availity/api-axios": "^8.0.7",
+    "@availity/message-core": "^6.1.2",
+    "@availity/mui-button": "^0.6.7",
+    "@availity/mui-modal": "^0.1.3",
+    "@availity/mui-typography": "^0.1.8",
+    "@tanstack/react-query": "^5.32.0",
+    "dayjs": "^1.11.10",
+    "qs": "^6.12.1",
+    "react-markdown": "^9.0.1"
+  }
+}

package/project.json

@@ -0,0 +1,41 @@
+{
+  "name": "mui-spaces",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/spaces/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "eslintConfig": ".eslintrc.json",
+        "silent": false,
+        "fix": false,
+        "cache": true,
+        "cacheLocation": "./node_modules/.cache/spaces/.eslintcache",
+        "maxWarnings": -1,
+        "quiet": false,
+        "noEslintrc": false,
+        "hasTypeAwareRules": true,
+        "cacheStrategy": "metadata"
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/spaces"],
+      "options": {
+        "jestConfig": "packages/spaces/jest.config.js"
+      }
+    },
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "preset": "conventional",
+        "commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
+        "tagPrefix": "@availity/{projectName}@",
+        "trackDeps": true,
+        "skipCommitTypes": ["docs"]
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/Spaces';

package/src/lib/Spaces.stories.tsx

@@ -0,0 +1,75 @@
+// Each exported component in the package should have its own stories file
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Paper } from '@availity/mui-paper';
+import { Typography } from '@availity/mui-typography';
+import { Divider } from '@availity/mui-divider';
+import { Stack } from '@availity/mui-layout';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Spaces, useSpaces, useSpacesContext } from './Spaces';
+import { SpacesProps } from './spaces-types';
+
+const meta: Meta<typeof Spaces> = {
+  title: 'Components/Spaces/Spaces',
+  component: Spaces,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const queryClient = new QueryClient();
+
+const SpaceComponent = ({ spaceId }: { spaceId: string }) => {
+  const spaces = useSpaces(spaceId);
+
+  const space = spaces?.find((space) => space.configurationId === spaceId);
+  return (
+    <div>
+      <span id={`space-for-${spaceId}`}>
+        {space ? `Space ${space?.configurationId} is in provider` : `Space ${spaceId} is not in provider`}
+      </span>
+    </div>
+  );
+};
+
+const SpaceContainer = ({ children }: { children?: React.ReactNode }): JSX.Element => {
+  const { loading } = useSpacesContext();
+  return loading ? <span>loading...</span> : <div>{children}</div>;
+};
+
+export const _Spaces: StoryObj<typeof Spaces> = {
+  render: (args: SpacesProps) => {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <Spaces {...args}>
+          <SpaceContainer>
+            <Stack spacing={2}>
+              <Paper>
+                <Typography>Space 1 was passed in the props.</Typography>
+                <SpaceComponent spaceId="1" />
+              </Paper>
+              <Paper>
+                <Typography>Space 2 was fetched from the api via the spaceId passed in the props.</Typography>
+                <SpaceComponent spaceId="2" />
+              </Paper>
+              <Paper>
+                <Typography>Space 3 was not returned.</Typography>
+                <SpaceComponent spaceId="3" />
+              </Paper>
+              <Paper>
+                <Typography>Space 11 was fetched from the api via the payerId passed in the props.</Typography>
+                <SpaceComponent spaceId="11" />
+              </Paper>
+            </Stack>
+          </SpaceContainer>
+        </Spaces>
+      </QueryClientProvider>
+    );
+  },
+  args: {
+    clientId: 'my-client-id',
+    spaces: [{ id: '1', configurationId: '1', type: 'space', name: 'Space 1' }],
+    spaceIds: ['2'],
+    payerIds: ['a'],
+  },
+};