@elice/material-shared-utils 1.220803.0

package/README.md

@@ -0,0 +1,3 @@
+# elice-material-shared-utils
+
+Shared utils for elice material projects.

package/cjs/components/MaterialIntlProvider.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare type MaterialIntlProviderPhrases = Record<string, Record<string, string>>;
+export interface MaterialIntlProviderProps {
+    children?: React.ReactNode;
+    /** Locale code. (default: `ko`) */
+    locale?: string;
+    /** I18n phrases. */
+    phrases?: MaterialIntlProviderPhrases;
+}
+/**
+ * IntlProvider for material components.
+ */
+declare const MaterialIntlProvider: React.FC<MaterialIntlProviderProps>;
+export default MaterialIntlProvider;

package/cjs/components/MaterialIntlProvider.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const INTL_DEFAULT_LOCALE = 'ko';
+const INTL_DEFAULT_PHRASES = {};
+/**
+ * IntlProvider for material components.
+ */
+
+const MaterialIntlProvider = ({
+  children,
+  locale = INTL_DEFAULT_LOCALE,
+  phrases = INTL_DEFAULT_PHRASES
+}) => {
+  const messages = React__default["default"].useMemo(() => locale in phrases ? phrases[locale] : phrases[INTL_DEFAULT_LOCALE], [locale, phrases]);
+  return React__default["default"].createElement(reactIntl.IntlProvider, {
+    children: children,
+    locale: locale,
+    defaultLocale: INTL_DEFAULT_LOCALE,
+    messages: messages
+  });
+};
+
+module.exports = MaterialIntlProvider;

package/cjs/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MaterialIntlProvider } from './MaterialIntlProvider';
+export type { MaterialIntlProviderProps, MaterialIntlProviderPhrases, } from './MaterialIntlProvider';

package/cjs/hooks/index.d.ts

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

package/cjs/hooks/useCallbackProp.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useCallbackProp: <T>(cb: T) => React.MutableRefObject<T>;

package/cjs/hooks/useCallbackProp.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const useCallbackProp = cb => {
+  const cbRef = React__default["default"].useRef(cb);
+  React__default["default"].useEffect(() => {
+    cbRef.current = cb;
+  }, [cb]);
+  return cbRef;
+};
+
+exports.useCallbackProp = useCallbackProp;

package/cjs/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './hooks';
+export * from './material-config';
+export * from './material-fetch';
+export * from './material-hoc';

package/cjs/index.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MaterialIntlProvider = require('./components/MaterialIntlProvider.js');
+var useCallbackProp = require('./hooks/useCallbackProp.js');
+var MaterialConfigProvider = require('./material-config/MaterialConfigProvider.js');
+var useMaterialConfig = require('./material-config/useMaterialConfig.js');
+var useMaterialConfigApiClientUpdate = require('./material-config/useMaterialConfigApiClientUpdate.js');
+var utils = require('./material-config/utils.js');
+var useMaterialFetch = require('./material-fetch/useMaterialFetch.js');
+var useMaterialInitFetch = require('./material-fetch/useMaterialInitFetch.js');
+var withMaterial = require('./material-hoc/withMaterial.js');
+
+
+
+exports.MaterialIntlProvider = MaterialIntlProvider;
+exports.useCallbackProp = useCallbackProp.useCallbackProp;
+exports.MaterialConfigProvider = MaterialConfigProvider;
+exports.useMaterialConfig = useMaterialConfig.useMaterialConfig;
+exports.useMaterialConfigApiClientUpdate = useMaterialConfigApiClientUpdate.useMaterialConfigApiClientUpdate;
+exports.updateMaterialConfigSessionKey = utils.updateMaterialConfigSessionKey;
+exports.useMaterialFetch = useMaterialFetch.useMaterialFetch;
+exports.useMaterialInitFetch = useMaterialInitFetch.useMaterialInitFetch;
+exports.withForwardRefMaterial = withMaterial.withForwardRefMaterial;
+exports.withMaterial = withMaterial.withMaterial;

package/cjs/material-config/MaterialConfigContext.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { BehaviorSubject } from 'rxjs';
+export declare type MaterialConfigSessionKey = null | string;
+export interface MaterialConfig {
+    /** Origin of API server. Should start with `http(s?)://` */
+    apiOriginUrl: string;
+    /** Origin of API websocket server. Should start with `ws(s?)://` */
+    apiWsOriginUrl: string;
+    /** Organization name short. */
+    orgNameShort: string;
+    /** Elice API session key. */
+    sessionKey: MaterialConfigSessionKey;
+}
+export declare const MaterialConfigContext: import("react").Context<MaterialConfig>;
+export declare const sessionKeySubject$: BehaviorSubject<MaterialConfigSessionKey>;

package/cjs/material-config/MaterialConfigContext.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var rxjs = require('rxjs');
+
+const MaterialConfigContext = React.createContext(null);
+const sessionKeySubject$ = new rxjs.BehaviorSubject(null);
+
+exports.MaterialConfigContext = MaterialConfigContext;
+exports.sessionKeySubject$ = sessionKeySubject$;

package/cjs/material-config/MaterialConfigProvider.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { MaterialConfig } from './MaterialConfigContext';
+declare type MaterialConfigProviderProps = Omit<MaterialConfig, 'sessionKey'>;
+declare const MaterialConfigProvider: React.FC<MaterialConfigProviderProps>;
+export default MaterialConfigProvider;

package/cjs/material-config/MaterialConfigProvider.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var React = require('react');
+var MaterialConfigContext = require('./MaterialConfigContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const MaterialConfigProvider = ({
+  children,
+  apiOriginUrl,
+  apiWsOriginUrl,
+  orgNameShort: orgNameShortProp = 'academy'
+}) => {
+  const [orgNameShort, setOrgNameShort] = React__default["default"].useState(orgNameShortProp);
+  const [sessionKey, setSessionKey] = React__default["default"].useState(null); //
+  // Update org name short.
+  //
+
+  React__default["default"].useEffect(() => setOrgNameShort(orgNameShortProp), [orgNameShortProp]); //
+  // Update session key when session key subject emits.
+  //
+
+  React__default["default"].useEffect(() => {
+    const sub = MaterialConfigContext.sessionKeySubject$.subscribe(setSessionKey);
+    return () => {
+      sub.unsubscribe();
+    };
+  }, []); //
+  //
+  //
+
+  return React__default["default"].createElement(MaterialConfigContext.MaterialConfigContext.Provider, {
+    children: children,
+    value: {
+      apiOriginUrl,
+      apiWsOriginUrl,
+      orgNameShort,
+      sessionKey
+    }
+  });
+};
+
+module.exports = MaterialConfigProvider;

package/cjs/material-config/index.d.ts

@@ -0,0 +1,4 @@
+export { default as MaterialConfigProvider } from './MaterialConfigProvider';
+export * from './useMaterialConfig';
+export * from './useMaterialConfigApiClientUpdate';
+export * from './utils';

package/cjs/material-config/useMaterialConfig.d.ts

@@ -0,0 +1 @@
+export declare const useMaterialConfig: () => import("./MaterialConfigContext").MaterialConfig;

package/cjs/material-config/useMaterialConfig.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var MaterialConfigContext = require('./MaterialConfigContext.js');
+
+const useMaterialConfig = () => {
+  const context = React.useContext(MaterialConfigContext.MaterialConfigContext);
+
+  if (context === undefined) {
+    throw new Error('Oops, `useMaterialConfig` must be used within a `MaterialConfigProvider`');
+  }
+
+  return context;
+};
+
+exports.useMaterialConfig = useMaterialConfig;

package/cjs/material-config/useMaterialConfigApiClientUpdate.d.ts

@@ -0,0 +1,3 @@
+import type { config as eliceApiClientConfig } from '@elice/api-client';
+export declare type MaterialConfigApiClientUpdateCallback = typeof eliceApiClientConfig.init;
+export declare const useMaterialConfigApiClientUpdate: (callback: MaterialConfigApiClientUpdateCallback) => boolean;

package/cjs/material-config/useMaterialConfigApiClientUpdate.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactUse = require('react-use');
+var MaterialConfigContext = require('./MaterialConfigContext.js');
+
+const useMaterialConfigApiClientUpdate = callback => {
+  const context = React.useContext(MaterialConfigContext.MaterialConfigContext);
+
+  if (!context) {
+    throw new Error('Oops, Elice material component must be used within a `MaterialConfigProvider`');
+  }
+
+  const [isReady, setReady] = React.useState(false);
+  reactUse.useDeepCompareEffect(() => {
+    var _a;
+
+    callback({
+      apiBaseUrl: context.apiOriginUrl,
+      orgNameShort: context.orgNameShort,
+      sessionkey: (_a = context.sessionKey) !== null && _a !== void 0 ? _a : undefined
+    });
+    setReady(Boolean(context.apiOriginUrl && context.orgNameShort && context.sessionKey));
+  }, [context]);
+  return isReady;
+};
+
+exports.useMaterialConfigApiClientUpdate = useMaterialConfigApiClientUpdate;

package/cjs/material-config/utils.d.ts

@@ -0,0 +1,5 @@
+import type { MaterialConfigSessionKey as SessionKey } from './MaterialConfigContext';
+/**
+ * Update session key.
+ */
+export declare function updateMaterialConfigSessionKey(sessionKey: SessionKey): void;

package/cjs/material-config/utils.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MaterialConfigContext = require('./MaterialConfigContext.js');
+
+/**
+ * Update session key.
+ */
+
+function updateMaterialConfigSessionKey(sessionKey) {
+  MaterialConfigContext.sessionKeySubject$.next(sessionKey);
+}
+
+exports.updateMaterialConfigSessionKey = updateMaterialConfigSessionKey;

package/cjs/material-fetch/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useMaterialFetch';
+export * from './useMaterialInitFetch';

package/cjs/material-fetch/useMaterialFetch.d.ts

@@ -0,0 +1,21 @@
+import type { EliceApiResponse } from '@elice/api-client';
+import type { APIStatus } from '@elice/material-shared-types';
+declare type FetchFn<R> = (signal: AbortSignal) => Promise<EliceApiResponse<R>>;
+/**
+ * Init api client and fetch material for contaner.
+ *
+ * @param fn API client wrapped with `React.useCallback` to fetch material.
+ * @param isReady Is ready to fetch material.
+ *
+ * @example
+ * const [materialPdf, materialPdfStatus] =
+ *   useMaterialFetch<GetOrgMaterialPdfGetResponses>(
+ *     React.useCallback(
+ *       signal => getOrgMaterialPdfGet({ materialPdfId }, { signal }),
+ *       [materialPdfId]
+ *     ),
+ *     isReady // boolean
+ *   );
+ */
+export declare const useMaterialFetch: <R = any>(fn: FetchFn<R>, isReady?: boolean) => [R | null, APIStatus];
+export {};

package/cjs/material-fetch/useMaterialFetch.js

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * Init api client and fetch material for contaner.
+ *
+ * @param fn API client wrapped with `React.useCallback` to fetch material.
+ * @param isReady Is ready to fetch material.
+ *
+ * @example
+ * const [materialPdf, materialPdfStatus] =
+ *   useMaterialFetch<GetOrgMaterialPdfGetResponses>(
+ *     React.useCallback(
+ *       signal => getOrgMaterialPdfGet({ materialPdfId }, { signal }),
+ *       [materialPdfId]
+ *     ),
+ *     isReady // boolean
+ *   );
+ */
+
+const useMaterialFetch = (fn, isReady = true) => {
+  const [material, setMaterial] = React.useState(null);
+  const [materialStatus, setMaterialStatus] = React.useState('idle');
+  React.useEffect(() => {
+    if (!isReady) {
+      return;
+    }
+
+    setMaterial(null);
+    setMaterialStatus('pending');
+    const abortCtrl = new AbortController();
+    fn(abortCtrl.signal).then(res => {
+      setMaterial(res);
+      setMaterialStatus('resolved');
+    }).catch(err => {
+      if (err.name !== 'AbortError') {
+        setMaterial(null);
+        setMaterialStatus('rejected');
+      }
+    });
+    return () => {
+      abortCtrl.abort();
+    };
+  }, [isReady, fn]);
+  return [material, materialStatus];
+};
+
+exports.useMaterialFetch = useMaterialFetch;

package/cjs/material-fetch/useMaterialInitFetch.d.ts

@@ -0,0 +1,22 @@
+import type { EliceApiClientConfigs, EliceApiResponse } from '@elice/api-client';
+import type { APIStatus } from '@elice/material-shared-types';
+declare type ApiInitFn = (config: EliceApiClientConfigs) => void;
+declare type FetchFn<R> = (signal: AbortSignal) => Promise<EliceApiResponse<R>>;
+/**
+ * Init api client and fetch material for contaner.
+ *
+ * @param init Init api client.
+ * @param fn API client wrapped with `React.useCallback` to fetch material.
+ *
+ * @example
+ * const [materialPdf, materialPdfStatus] =
+ *   useMaterialInitFetch<GetOrgMaterialPdfGetResponses>(
+ *     eliceApiClientConfigs.init,
+ *     React.useCallback(
+ *       signal => getOrgMaterialPdfGet({ materialPdfId }, { signal }),
+ *       [materialPdfId]
+ *     ),
+ *   );
+ */
+export declare const useMaterialInitFetch: <R = any>(init: ApiInitFn, fn: FetchFn<R>) => [R | null, APIStatus];
+export {};

package/cjs/material-fetch/useMaterialInitFetch.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+require('../material-config/MaterialConfigContext.js');
+var useMaterialConfigApiClientUpdate = require('../material-config/useMaterialConfigApiClientUpdate.js');
+
+/**
+ * Init api client and fetch material for contaner.
+ *
+ * @param init Init api client.
+ * @param fn API client wrapped with `React.useCallback` to fetch material.
+ *
+ * @example
+ * const [materialPdf, materialPdfStatus] =
+ *   useMaterialInitFetch<GetOrgMaterialPdfGetResponses>(
+ *     eliceApiClientConfigs.init,
+ *     React.useCallback(
+ *       signal => getOrgMaterialPdfGet({ materialPdfId }, { signal }),
+ *       [materialPdfId]
+ *     ),
+ *   );
+ */
+
+const useMaterialInitFetch = (init, fn) => {
+  const [material, setMaterial] = React.useState(null);
+  const [materialStatus, setMaterialStatus] = React.useState('idle');
+  const isReady = useMaterialConfigApiClientUpdate.useMaterialConfigApiClientUpdate(init);
+  React.useEffect(() => {
+    if (!isReady) {
+      return;
+    }
+
+    setMaterial(null);
+    setMaterialStatus('pending');
+    const abortCtrl = new AbortController();
+    fn(abortCtrl.signal).then(res => {
+      setMaterial(res);
+      setMaterialStatus('resolved');
+    }).catch(err => {
+      if (err.name !== 'AbortError') {
+        setMaterial(null);
+        setMaterialStatus('rejected');
+      }
+    });
+    return () => {
+      abortCtrl.abort();
+    };
+  }, [isReady, fn]);
+  return [material, materialStatus];
+};
+
+exports.useMaterialInitFetch = useMaterialInitFetch;

package/cjs/material-hoc/index.d.ts

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

package/cjs/material-hoc/withMaterial.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { MaterialIntlProviderPhrases } from '../components/MaterialIntlProvider';
+import type { MaterialConfigApiClientUpdateCallback } from '../material-config';
+declare type AnyObject = Record<string, any>;
+/**
+ * Options for `withMaterial` HOC.
+ */
+export interface WithMaterialOptions {
+    /**
+     * If override is true, this root will create a new Recoil scope.
+     * - ref: https://recoiljs.org/docs/api-reference/core/RecoilRoot/#props -> `override`
+     */
+    overrideRecoilScope?: boolean;
+    /**
+     * Phrases for `IntlProvider`.
+     */
+    phrases?: MaterialIntlProviderPhrases;
+}
+/**
+ * Common props for material components.
+ */
+export interface MaterialCommponentCommonProps {
+    locale?: string;
+}
+/**
+ * HOC for material components.
+ *
+ * wrapped with:
+ * - `<RecoilRoot />`
+ * - `<IntlProvider />`
+ */
+export declare const withMaterial: <P extends AnyObject>(Component: React.VFC<P & MaterialCommponentCommonProps>, eliceApiClientConfigInit: MaterialConfigApiClientUpdateCallback, options?: WithMaterialOptions) => React.VFC<P & MaterialCommponentCommonProps>;
+/**
+ * HOC for material forward ref exotic components.
+ *
+ * wrapped with:
+ * - `<RecoilRoot />`
+ * - `<IntlProvider />`
+ */
+export declare const withForwardRefMaterial: <T, P extends AnyObject>(Component: React.ForwardRefExoticComponent<P & MaterialCommponentCommonProps & React.RefAttributes<T>>, eliceApiClientConfigInit: MaterialConfigApiClientUpdateCallback, options?: WithMaterialOptions) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P & MaterialCommponentCommonProps> & React.RefAttributes<T>>;
+export {};

package/cjs/material-hoc/withMaterial.js

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var blocks = require('@elice/blocks');
+var recoil = require('recoil');
+var MaterialIntlProvider = require('../components/MaterialIntlProvider.js');
+require('../material-config/MaterialConfigContext.js');
+var useMaterialConfigApiClientUpdate = require('../material-config/useMaterialConfigApiClientUpdate.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+//
+//
+
+/**
+ * HOC for material components.
+ *
+ * wrapped with:
+ * - `<RecoilRoot />`
+ * - `<IntlProvider />`
+ */
+
+const withMaterial = (Component, eliceApiClientConfigInit, options = {}) => {
+  return props => {
+    var _a;
+
+    const isReady = useMaterialConfigApiClientUpdate.useMaterialConfigApiClientUpdate(eliceApiClientConfigInit); // do not render component, if material config is not ready
+
+    if (!isReady) {
+      return React__default["default"].createElement(blocks.Flex, {
+        justify: "center",
+        align: "center",
+        width: "100%",
+        height: "100%"
+      }, React__default["default"].createElement(blocks.Spinner, {
+        size: "small"
+      }));
+    }
+
+    return React__default["default"].createElement(recoil.RecoilRoot, {
+      override: (_a = options.overrideRecoilScope) !== null && _a !== void 0 ? _a : false
+    }, React__default["default"].createElement(MaterialIntlProvider, {
+      locale: props.locale,
+      phrases: options.phrases
+    }, React__default["default"].createElement(Component, Object.assign({}, props))));
+  };
+};
+/**
+ * HOC for material forward ref exotic components.
+ *
+ * wrapped with:
+ * - `<RecoilRoot />`
+ * - `<IntlProvider />`
+ */
+
+const withForwardRefMaterial = (Component, eliceApiClientConfigInit, options = {}) => {
+  return React.forwardRef((props, ref) => {
+    var _a;
+
+    const isReady = useMaterialConfigApiClientUpdate.useMaterialConfigApiClientUpdate(eliceApiClientConfigInit); // do not render component, if material config is not ready
+
+    if (!isReady) {
+      return React__default["default"].createElement(blocks.Flex, {
+        justify: "center",
+        align: "center",
+        width: "100%",
+        height: "100%"
+      }, React__default["default"].createElement(blocks.Spinner, {
+        size: "small"
+      }));
+    }
+
+    return React__default["default"].createElement(recoil.RecoilRoot, {
+      override: (_a = options.overrideRecoilScope) !== null && _a !== void 0 ? _a : false
+    }, React__default["default"].createElement(MaterialIntlProvider, {
+      locale: props.locale,
+      phrases: options.phrases
+    }, React__default["default"].createElement(Component, Object.assign({}, props, {
+      ref: ref
+    }))));
+  });
+};
+
+exports.withForwardRefMaterial = withForwardRefMaterial;
+exports.withMaterial = withMaterial;

package/es/components/MaterialIntlProvider.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare type MaterialIntlProviderPhrases = Record<string, Record<string, string>>;
+export interface MaterialIntlProviderProps {
+    children?: React.ReactNode;
+    /** Locale code. (default: `ko`) */
+    locale?: string;
+    /** I18n phrases. */
+    phrases?: MaterialIntlProviderPhrases;
+}
+/**
+ * IntlProvider for material components.
+ */
+declare const MaterialIntlProvider: React.FC<MaterialIntlProviderProps>;
+export default MaterialIntlProvider;

package/es/components/MaterialIntlProvider.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+
+const INTL_DEFAULT_LOCALE = 'ko';
+const INTL_DEFAULT_PHRASES = {};
+/**
+ * IntlProvider for material components.
+ */
+
+const MaterialIntlProvider = ({
+  children,
+  locale = INTL_DEFAULT_LOCALE,
+  phrases = INTL_DEFAULT_PHRASES
+}) => {
+  const messages = React.useMemo(() => locale in phrases ? phrases[locale] : phrases[INTL_DEFAULT_LOCALE], [locale, phrases]);
+  return React.createElement(IntlProvider, {
+    children: children,
+    locale: locale,
+    defaultLocale: INTL_DEFAULT_LOCALE,
+    messages: messages
+  });
+};
+
+export { MaterialIntlProvider as default };

package/es/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MaterialIntlProvider } from './MaterialIntlProvider';
+export type { MaterialIntlProviderProps, MaterialIntlProviderPhrases, } from './MaterialIntlProvider';

package/es/hooks/index.d.ts

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

package/es/hooks/useCallbackProp.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useCallbackProp: <T>(cb: T) => React.MutableRefObject<T>;

package/es/hooks/useCallbackProp.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const useCallbackProp = cb => {
+  const cbRef = React.useRef(cb);
+  React.useEffect(() => {
+    cbRef.current = cb;
+  }, [cb]);
+  return cbRef;
+};
+
+export { useCallbackProp };

package/es/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './hooks';
+export * from './material-config';
+export * from './material-fetch';
+export * from './material-hoc';

package/es/index.js

@@ -0,0 +1,9 @@
+export { default as MaterialIntlProvider } from './components/MaterialIntlProvider.js';
+export { useCallbackProp } from './hooks/useCallbackProp.js';
+export { default as MaterialConfigProvider } from './material-config/MaterialConfigProvider.js';
+export { useMaterialConfig } from './material-config/useMaterialConfig.js';
+export { useMaterialConfigApiClientUpdate } from './material-config/useMaterialConfigApiClientUpdate.js';
+export { updateMaterialConfigSessionKey } from './material-config/utils.js';
+export { useMaterialFetch } from './material-fetch/useMaterialFetch.js';
+export { useMaterialInitFetch } from './material-fetch/useMaterialInitFetch.js';
+export { withForwardRefMaterial, withMaterial } from './material-hoc/withMaterial.js';

package/es/material-config/MaterialConfigContext.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { BehaviorSubject } from 'rxjs';
+export declare type MaterialConfigSessionKey = null | string;
+export interface MaterialConfig {
+    /** Origin of API server. Should start with `http(s?)://` */
+    apiOriginUrl: string;
+    /** Origin of API websocket server. Should start with `ws(s?)://` */
+    apiWsOriginUrl: string;
+    /** Organization name short. */
+    orgNameShort: string;
+    /** Elice API session key. */
+    sessionKey: MaterialConfigSessionKey;
+}
+export declare const MaterialConfigContext: import("react").Context<MaterialConfig>;
+export declare const sessionKeySubject$: BehaviorSubject<MaterialConfigSessionKey>;

package/es/material-config/MaterialConfigContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+import { BehaviorSubject } from 'rxjs';
+
+const MaterialConfigContext = createContext(null);
+const sessionKeySubject$ = new BehaviorSubject(null);
+
+export { MaterialConfigContext, sessionKeySubject$ };

package/es/material-config/MaterialConfigProvider.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { MaterialConfig } from './MaterialConfigContext';
+declare type MaterialConfigProviderProps = Omit<MaterialConfig, 'sessionKey'>;
+declare const MaterialConfigProvider: React.FC<MaterialConfigProviderProps>;
+export default MaterialConfigProvider;

package/es/material-config/MaterialConfigProvider.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { sessionKeySubject$, MaterialConfigContext } from './MaterialConfigContext.js';
+
+const MaterialConfigProvider = ({
+  children,
+  apiOriginUrl,
+  apiWsOriginUrl,
+  orgNameShort: orgNameShortProp = 'academy'
+}) => {
+  const [orgNameShort, setOrgNameShort] = React.useState(orgNameShortProp);
+  const [sessionKey, setSessionKey] = React.useState(null); //
+  // Update org name short.
+  //
+
+  React.useEffect(() => setOrgNameShort(orgNameShortProp), [orgNameShortProp]); //
+  // Update session key when session key subject emits.
+  //
+
+  React.useEffect(() => {
+    const sub = sessionKeySubject$.subscribe(setSessionKey);
+    return () => {
+      sub.unsubscribe();
+    };
+  }, []); //
+  //
+  //
+
+  return React.createElement(MaterialConfigContext.Provider, {
+    children: children,
+    value: {
+      apiOriginUrl,
+      apiWsOriginUrl,
+      orgNameShort,
+      sessionKey
+    }
+  });
+};
+
+export { MaterialConfigProvider as default };

package/es/material-config/index.d.ts

@@ -0,0 +1,4 @@
+export { default as MaterialConfigProvider } from './MaterialConfigProvider';
+export * from './useMaterialConfig';
+export * from './useMaterialConfigApiClientUpdate';
+export * from './utils';

package/es/material-config/useMaterialConfig.d.ts

@@ -0,0 +1 @@
+export declare const useMaterialConfig: () => import("./MaterialConfigContext").MaterialConfig;

package/es/material-config/useMaterialConfig.js

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+import { MaterialConfigContext } from './MaterialConfigContext.js';
+
+const useMaterialConfig = () => {
+  const context = useContext(MaterialConfigContext);
+
+  if (context === undefined) {
+    throw new Error('Oops, `useMaterialConfig` must be used within a `MaterialConfigProvider`');
+  }
+
+  return context;
+};
+
+export { useMaterialConfig };

package/es/material-config/useMaterialConfigApiClientUpdate.d.ts

@@ -0,0 +1,3 @@
+import type { config as eliceApiClientConfig } from '@elice/api-client';
+export declare type MaterialConfigApiClientUpdateCallback = typeof eliceApiClientConfig.init;
+export declare const useMaterialConfigApiClientUpdate: (callback: MaterialConfigApiClientUpdateCallback) => boolean;

package/es/material-config/useMaterialConfigApiClientUpdate.js

@@ -0,0 +1,26 @@
+import { useContext, useState } from 'react';
+import { useDeepCompareEffect } from 'react-use';
+import { MaterialConfigContext } from './MaterialConfigContext.js';
+
+const useMaterialConfigApiClientUpdate = callback => {
+  const context = useContext(MaterialConfigContext);
+
+  if (!context) {
+    throw new Error('Oops, Elice material component must be used within a `MaterialConfigProvider`');
+  }
+
+  const [isReady, setReady] = useState(false);
+  useDeepCompareEffect(() => {
+    var _a;
+
+    callback({
+      apiBaseUrl: context.apiOriginUrl,
+      orgNameShort: context.orgNameShort,
+      sessionkey: (_a = context.sessionKey) !== null && _a !== void 0 ? _a : undefined
+    });
+    setReady(Boolean(context.apiOriginUrl && context.orgNameShort && context.sessionKey));
+  }, [context]);
+  return isReady;
+};
+
+export { useMaterialConfigApiClientUpdate };

package/es/material-config/utils.d.ts

@@ -0,0 +1,5 @@
+import type { MaterialConfigSessionKey as SessionKey } from './MaterialConfigContext';
+/**
+ * Update session key.
+ */
+export declare function updateMaterialConfigSessionKey(sessionKey: SessionKey): void;

package/es/material-config/utils.js

@@ -0,0 +1,11 @@
+import { sessionKeySubject$ } from './MaterialConfigContext.js';
+
+/**
+ * Update session key.
+ */
+
+function updateMaterialConfigSessionKey(sessionKey) {
+  sessionKeySubject$.next(sessionKey);
+}
+
+export { updateMaterialConfigSessionKey };

package/es/material-fetch/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useMaterialFetch';
+export * from './useMaterialInitFetch';

package/es/material-fetch/useMaterialFetch.d.ts

@@ -0,0 +1,21 @@
+import type { EliceApiResponse } from '@elice/api-client';
+import type { APIStatus } from '@elice/material-shared-types';
+declare type FetchFn<R> = (signal: AbortSignal) => Promise<EliceApiResponse<R>>;
+/**
+ * Init api client and fetch material for contaner.
+ *
+ * @param fn API client wrapped with `React.useCallback` to fetch material.
+ * @param isReady Is ready to fetch material.
+ *
+ * @example
+ * const [materialPdf, materialPdfStatus] =
+ *   useMaterialFetch<GetOrgMaterialPdfGetResponses>(
+ *     React.useCallback(
+ *       signal => getOrgMaterialPdfGet({ materialPdfId }, { signal }),
+ *       [materialPdfId]
+ *     ),
+ *     isReady // boolean
+ *   );
+ */
+export declare const useMaterialFetch: <R = any>(fn: FetchFn<R>, isReady?: boolean) => [R | null, APIStatus];
+export {};

package/es/material-fetch/useMaterialFetch.js

@@ -0,0 +1,47 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Init api client and fetch material for contaner.
+ *
+ * @param fn API client wrapped with `React.useCallback` to fetch material.
+ * @param isReady Is ready to fetch material.
+ *
+ * @example
+ * const [materialPdf, materialPdfStatus] =
+ *   useMaterialFetch<GetOrgMaterialPdfGetResponses>(
+ *     React.useCallback(
+ *       signal => getOrgMaterialPdfGet({ materialPdfId }, { signal }),
+ *       [materialPdfId]
+ *     ),
+ *     isReady // boolean
+ *   );
+ */
+
+const useMaterialFetch = (fn, isReady = true) => {
+  const [material, setMaterial] = useState(null);
+  const [materialStatus, setMaterialStatus] = useState('idle');
+  useEffect(() => {
+    if (!isReady) {
+      return;
+    }
+
+    setMaterial(null);
+    setMaterialStatus('pending');
+    const abortCtrl = new AbortController();
+    fn(abortCtrl.signal).then(res => {
+      setMaterial(res);
+      setMaterialStatus('resolved');
+    }).catch(err => {
+      if (err.name !== 'AbortError') {
+        setMaterial(null);
+        setMaterialStatus('rejected');
+      }
+    });
+    return () => {
+      abortCtrl.abort();
+    };
+  }, [isReady, fn]);
+  return [material, materialStatus];
+};
+
+export { useMaterialFetch };

package/es/material-fetch/useMaterialInitFetch.d.ts

@@ -0,0 +1,22 @@
+import type { EliceApiClientConfigs, EliceApiResponse } from '@elice/api-client';
+import type { APIStatus } from '@elice/material-shared-types';
+declare type ApiInitFn = (config: EliceApiClientConfigs) => void;
+declare type FetchFn<R> = (signal: AbortSignal) => Promise<EliceApiResponse<R>>;
+/**
+ * Init api client and fetch material for contaner.
+ *
+ * @param init Init api client.
+ * @param fn API client wrapped with `React.useCallback` to fetch material.
+ *
+ * @example
+ * const [materialPdf, materialPdfStatus] =
+ *   useMaterialInitFetch<GetOrgMaterialPdfGetResponses>(
+ *     eliceApiClientConfigs.init,
+ *     React.useCallback(
+ *       signal => getOrgMaterialPdfGet({ materialPdfId }, { signal }),
+ *       [materialPdfId]
+ *     ),
+ *   );
+ */
+export declare const useMaterialInitFetch: <R = any>(init: ApiInitFn, fn: FetchFn<R>) => [R | null, APIStatus];
+export {};

package/es/material-fetch/useMaterialInitFetch.js

@@ -0,0 +1,50 @@
+import { useState, useEffect } from 'react';
+import '../material-config/MaterialConfigContext.js';
+import { useMaterialConfigApiClientUpdate } from '../material-config/useMaterialConfigApiClientUpdate.js';
+
+/**
+ * Init api client and fetch material for contaner.
+ *
+ * @param init Init api client.
+ * @param fn API client wrapped with `React.useCallback` to fetch material.
+ *
+ * @example
+ * const [materialPdf, materialPdfStatus] =
+ *   useMaterialInitFetch<GetOrgMaterialPdfGetResponses>(
+ *     eliceApiClientConfigs.init,
+ *     React.useCallback(
+ *       signal => getOrgMaterialPdfGet({ materialPdfId }, { signal }),
+ *       [materialPdfId]
+ *     ),
+ *   );
+ */
+
+const useMaterialInitFetch = (init, fn) => {
+  const [material, setMaterial] = useState(null);
+  const [materialStatus, setMaterialStatus] = useState('idle');
+  const isReady = useMaterialConfigApiClientUpdate(init);
+  useEffect(() => {
+    if (!isReady) {
+      return;
+    }
+
+    setMaterial(null);
+    setMaterialStatus('pending');
+    const abortCtrl = new AbortController();
+    fn(abortCtrl.signal).then(res => {
+      setMaterial(res);
+      setMaterialStatus('resolved');
+    }).catch(err => {
+      if (err.name !== 'AbortError') {
+        setMaterial(null);
+        setMaterialStatus('rejected');
+      }
+    });
+    return () => {
+      abortCtrl.abort();
+    };
+  }, [isReady, fn]);
+  return [material, materialStatus];
+};
+
+export { useMaterialInitFetch };

package/es/material-hoc/index.d.ts

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

package/es/material-hoc/withMaterial.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { MaterialIntlProviderPhrases } from '../components/MaterialIntlProvider';
+import type { MaterialConfigApiClientUpdateCallback } from '../material-config';
+declare type AnyObject = Record<string, any>;
+/**
+ * Options for `withMaterial` HOC.
+ */
+export interface WithMaterialOptions {
+    /**
+     * If override is true, this root will create a new Recoil scope.
+     * - ref: https://recoiljs.org/docs/api-reference/core/RecoilRoot/#props -> `override`
+     */
+    overrideRecoilScope?: boolean;
+    /**
+     * Phrases for `IntlProvider`.
+     */
+    phrases?: MaterialIntlProviderPhrases;
+}
+/**
+ * Common props for material components.
+ */
+export interface MaterialCommponentCommonProps {
+    locale?: string;
+}
+/**
+ * HOC for material components.
+ *
+ * wrapped with:
+ * - `<RecoilRoot />`
+ * - `<IntlProvider />`
+ */
+export declare const withMaterial: <P extends AnyObject>(Component: React.VFC<P & MaterialCommponentCommonProps>, eliceApiClientConfigInit: MaterialConfigApiClientUpdateCallback, options?: WithMaterialOptions) => React.VFC<P & MaterialCommponentCommonProps>;
+/**
+ * HOC for material forward ref exotic components.
+ *
+ * wrapped with:
+ * - `<RecoilRoot />`
+ * - `<IntlProvider />`
+ */
+export declare const withForwardRefMaterial: <T, P extends AnyObject>(Component: React.ForwardRefExoticComponent<P & MaterialCommponentCommonProps & React.RefAttributes<T>>, eliceApiClientConfigInit: MaterialConfigApiClientUpdateCallback, options?: WithMaterialOptions) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P & MaterialCommponentCommonProps> & React.RefAttributes<T>>;
+export {};

package/es/material-hoc/withMaterial.js

@@ -0,0 +1,80 @@
+import React, { forwardRef } from 'react';
+import { Flex, Spinner } from '@elice/blocks';
+import { RecoilRoot } from 'recoil';
+import MaterialIntlProvider from '../components/MaterialIntlProvider.js';
+import '../material-config/MaterialConfigContext.js';
+import { useMaterialConfigApiClientUpdate } from '../material-config/useMaterialConfigApiClientUpdate.js';
+
+//
+//
+
+/**
+ * HOC for material components.
+ *
+ * wrapped with:
+ * - `<RecoilRoot />`
+ * - `<IntlProvider />`
+ */
+
+const withMaterial = (Component, eliceApiClientConfigInit, options = {}) => {
+  return props => {
+    var _a;
+
+    const isReady = useMaterialConfigApiClientUpdate(eliceApiClientConfigInit); // do not render component, if material config is not ready
+
+    if (!isReady) {
+      return React.createElement(Flex, {
+        justify: "center",
+        align: "center",
+        width: "100%",
+        height: "100%"
+      }, React.createElement(Spinner, {
+        size: "small"
+      }));
+    }
+
+    return React.createElement(RecoilRoot, {
+      override: (_a = options.overrideRecoilScope) !== null && _a !== void 0 ? _a : false
+    }, React.createElement(MaterialIntlProvider, {
+      locale: props.locale,
+      phrases: options.phrases
+    }, React.createElement(Component, Object.assign({}, props))));
+  };
+};
+/**
+ * HOC for material forward ref exotic components.
+ *
+ * wrapped with:
+ * - `<RecoilRoot />`
+ * - `<IntlProvider />`
+ */
+
+const withForwardRefMaterial = (Component, eliceApiClientConfigInit, options = {}) => {
+  return forwardRef((props, ref) => {
+    var _a;
+
+    const isReady = useMaterialConfigApiClientUpdate(eliceApiClientConfigInit); // do not render component, if material config is not ready
+
+    if (!isReady) {
+      return React.createElement(Flex, {
+        justify: "center",
+        align: "center",
+        width: "100%",
+        height: "100%"
+      }, React.createElement(Spinner, {
+        size: "small"
+      }));
+    }
+
+    return React.createElement(RecoilRoot, {
+      override: (_a = options.overrideRecoilScope) !== null && _a !== void 0 ? _a : false
+    }, React.createElement(MaterialIntlProvider, {
+      locale: props.locale,
+      phrases: options.phrases
+    }, React.createElement(Component, Object.assign({}, props, {
+      ref: ref
+    }))));
+  });
+};
+
+export { withForwardRefMaterial, withMaterial };

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@elice/material-shared-utils",
+  "version": "1.220803.0",
+  "description": "Shared typings for elice material projects",
+  "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
+  "license": "UNLICENSED",
+  "main": "./cjs/index.js",
+  "module": "./es/index.js",
+  "types": "./es/index.d.ts",
+  "files": [
+    "es",
+    "cjs",
+    "package.json",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": "~16.14",
+    "yarn": ">=1.20 <2"
+  },
+  "scripts": {
+    "start": "run-s watch",
+    "prebuild": "run-s clean",
+    "build": "run-p build:es build:cjs",
+    "build:es": "rollup -c ../../rollup.config.ts -f es",
+    "build:cjs": "rollup -c ../../rollup.config.ts -f cjs",
+    "watch": "rollup -c ../../rollup.config.ts -f es -w",
+    "lint": "eslint --ext .ts,.tsx ./src --max-warnings=0",
+    "clean": "del-cli \"es/*\" \"cjs/*\" \"dist/*\""
+  },
+  "peerDependencies": {
+    "@elice/api-client": "^1.220802.1",
+    "@elice/material-shared-types": "22.7.2-1",
+    "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+    "react-use": "^17.0.0",
+    "recoil": "~0.7.3"
+  },
+  "dependencies": {
+    "tslib": "^2.3.1"
+  },
+  "devDependencies": {
+    "@elice/api-client": "^1.220802.1",
+    "@elice/material-shared-types": "1.220803.0",
+    "@elice/types": "^1.220802.1",
+    "@types/react": "~17.0.9",
+    "react-use": "^17.2.4"
+  },
+  "gitHead": "21c6b42ae6550e7899c57bf39fa78cea0f47e64c"
+}