@ossy/connected-components 0.0.9 → 0.0.15

package/build/cjs/index.js

@@ -1,656 +0,0 @@
-'use strict';
-
-var React$1 = require('react');
-var sdk = require('@ossy/sdk');
-var sdkReact = require('@ossy/sdk-react');
-var designSystem = require('@ossy/design-system');
-var routerReact = require('@ossy/router-react');
-var designSystemExtras = require('@ossy/design-system-extras');
-
-const overlayStyles = {
-  background: 'transparent',
-  display: 'content',
-  pointerEvents: 'none'
-};
-const blobStyles = {
-  boxShadow: '2px 2px 5px hsla(0, 0%, 0%, .2)',
-  borderRadius: '999px',
-  position: 'absolute',
-  right: 'var(--space-m)',
-  bottom: 'var(--space-m)',
-  cursor: 'pointer',
-  transition: 'transform .5s',
-  pointerEvents: 'auto',
-  padding: 'var(--space-m)'
-};
-const editorContainerStyles = {
-  position: 'absolute',
-  right: '0',
-  top: '0',
-  height: '100%',
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'flex-end',
-  alignItems: 'stretch',
-  padding: '8px 32px'
-};
-const editorStyles = {
-  width: '100%',
-  maxWidth: '350px',
-  height: '100%',
-  boxShadow: '2px 2px 5px hsla(0, 0%, 0%, .2)',
-  padding: '16px 16px 76px 16px',
-  overflowX: 'none',
-  overflowY: 'auto',
-  pointerEvents: 'auto'
-};
-const ThemeSwitcher = () => {
-  const {
-    activeTheme,
-    setTheme,
-    themes
-  } = designSystem.useTheme();
-  return /*#__PURE__*/React.createElement(designSystem.View, {
-    gap: "s"
-  }, /*#__PURE__*/React.createElement(designSystem.Text, null, "Theme"), /*#__PURE__*/React.createElement(designSystem.View, {
-    layout: "row-wrap",
-    gap: "s"
-  }, themes.map(themeName => /*#__PURE__*/React.createElement(designSystem.Button, {
-    variant: themeName === activeTheme ? 'tag-active' : 'tag',
-    onClick: () => setTheme(themeName)
-  }, themeName))));
-};
-const ThemeEditor = () => {
-  const {
-    updateResourceContent
-  } = sdkReact.useResource('PCX53TaGviq4_8KvK-VOp');
-  const [isEditorOpen, setIsEditorOpen] = React$1.useState(false);
-  const [viewCount, setViewCount] = React$1.useState(0);
-  // const [theme, temporarilyUpdateTheme] = useTheme()
-  const theme = {};
-  const toggleStyles = React$1.useMemo(() => !isEditorOpen ? blobStyles : {
-    ...blobStyles,
-    transform: 'rotate(-45deg)'
-  }, [isEditorOpen]);
-  const onToggle = React$1.useCallback(() => {
-    setIsEditorOpen(!isEditorOpen);
-  }, [isEditorOpen, setIsEditorOpen]);
-  const onThemeChange = event => {
-    const name = event.target.dataset.name;
-    const updatedValue = event.target.value;
-    if (!name) return;
-    if (!updatedValue) return;
-  };
-  const onSaveTheme = event => {
-    event.preventDefault();
-    updateResourceContent(theme);
-  };
-  React$1.useEffect(() => {
-    if (!isEditorOpen) return;
-    const views = document.querySelectorAll('[data-view]');
-    views.forEach(view => view.style.border = '1px solid red');
-    setViewCount(views.length);
-  }, [isEditorOpen]);
-  return /*#__PURE__*/React.createElement(designSystem.Overlay, {
-    isVisible: true,
-    style: overlayStyles
-  }, isEditorOpen && /*#__PURE__*/React.createElement("div", {
-    style: editorContainerStyles
-  }, /*#__PURE__*/React.createElement(designSystem.View, {
-    surface: "primary",
-    roundness: "m",
-    gap: "m",
-    style: editorStyles
-  }, /*#__PURE__*/React.createElement(designSystem.View, {
-    as: "form",
-    gap: "s",
-    onSubmit: onSaveTheme,
-    onChange: onThemeChange
-  }, Object.entries(theme).map(([name, value]) => /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginBottom: '16px'
-    }
-  }, /*#__PURE__*/React.createElement("label", {
-    style: {
-      display: 'block',
-      fontFamily: 'sans-serif',
-      marginBottom: '4px',
-      fontWeight: 'bold'
-    }
-  }, name), /*#__PURE__*/React.createElement("input", {
-    value: value,
-    "data-name": name,
-    style: {
-      width: '100%',
-      padding: '4px'
-    }
-  }))), /*#__PURE__*/React.createElement(designSystem.Button, {
-    type: "submit",
-    variant: "cta"
-  }, "Save")), /*#__PURE__*/React.createElement(ThemeSwitcher, null), /*#__PURE__*/React.createElement(designSystem.Text, null, "Views: ", viewCount))), /*#__PURE__*/React.createElement(designSystem.Button, {
-    variant: "cta",
-    prefix: "math-plus",
-    style: toggleStyles,
-    onClick: onToggle
-  }));
-};
-
-const useAppSettings = () => React$1.useContext(AppContext);
-function defaultAppSettings() {
-  return {
-    workspaceId: undefined,
-    defaultLanguage: undefined,
-    supportedLanguages: [],
-    theme: undefined,
-    themes: undefined,
-    routes: [],
-    initialEntries: [],
-    initialIndex: 0,
-    router: 'browser',
-    gaId: undefined,
-    apiUrl: undefined,
-    devMode: false
-  };
-}
-
-const AppContext = /*#__PURE__*/React$1.createContext(defaultAppSettings());
-const App = _appSettings => {
-  const appSettings = {
-    ...defaultAppSettings(),
-    ..._appSettings
-  };
-  const sdk$1 = sdk.SDK.of({
-    apiUrl: appSettings.apiUrl,
-    workspaceId: appSettings.workspaceId
-  });
-  return /*#__PURE__*/React$1.createElement(AppContext.Provider, {
-    value: appSettings
-  }, /*#__PURE__*/React$1.createElement(designSystem.Theme, {
-    theme: appSettings.theme,
-    themes: appSettings.themes
-  }, /*#__PURE__*/React$1.createElement(sdkReact.WorkspaceProvider, {
-    sdk: sdk$1
-  }, /*#__PURE__*/React$1.createElement(routerReact.Router, _appSettings), appSettings.devMode && /*#__PURE__*/React$1.createElement(ThemeEditor, null))));
-};
-
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-
-const Layout = ({
-  layoutId,
-  ...props
-}) => {
-  const {
-    status,
-    resource
-  } = sdkReact.useResource(layoutId);
-  const layoutStyles = React$1.useMemo(() => !resource.data ? {} : {
-    display: 'grid',
-    gridTemplateRows: resource.data.rows,
-    gridTemplateColumns: resource.data.columns,
-    gridTemplateAreas: resource.data.areas
-  }, [resource]);
-  return status === sdkReact.AsyncStatus.Success ? /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    style: layoutStyles
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null);
-};
-
-// https://twitter.com/jh3yy/status/1762979019446698310
-// button:hover span:after {
-//     animation: flip 0.2s calc(var(--i) * 0.05s);
-//   }
-//   @​keyframes flip {
-//   20% { content: '_'; }
-//   40% { content: var(--c1); }
-//   60% { content: var(--c2); }
-//   }
-
-// <button>
-//   <span style="--i: 0; --c1: 'x'; --c2: '$'; --c3: '≈';">C</span>
-//   <span style="--i: 1; --c1: 'ç'; --c2: '&'; --c3: 'π';">l</span>
-//   <!-- Other characters -->
-//   <span class="sr-only">Click Me</span>
-// </button>
-
-const Ossybot = ({
-  style = {},
-  surface = "cta",
-  icon,
-  ...props
-}) => {
-  return /*#__PURE__*/React$1.createElement(React$1.Fragment, null, /*#__PURE__*/React$1.createElement("style", {
-    href: "@ossy/design-system/ossybot",
-    precedence: "high"
-  }, `
-          @keyframes flip {
-            0% {
-              content: '_';
-            }
-            60% {
-              content: var(--c1);
-            }
-            100% {
-              content: var(--c2);
-            }
-          }
-
-          /* Define the animation */
-          [data-animation="flip"] {
-            animation: flip 0.2s calc(var(--i) * 0.05s) infinite;
-          }
-        `), /*#__PURE__*/React$1.createElement(designSystem.Button, _extends({
-    "data-animation": "flip",
-    prefix: {
-      name: icon,
-      size: 'm'
-    },
-    variant: surface
-  }, props, {
-    style: {
-      '--size': '64px',
-      width: 'var(--size)',
-      height: 'var(--size)',
-      padding: 'var(--space-m)',
-      borderRadius: '999px',
-      ...style
-    }
-  })));
-};
-
-const appendSlash = string => string[string.length - 1] === '/' ? string : `${string}/`;
-const prependSlash = string => string[0] === '/' ? string : `/${string}`;
-const padWithSlash = string => appendSlash(prependSlash(string));
-const Predicates = {
-  byLength: desiredLength => route => {
-    const routeParts = route.split('/').filter(x => !!x);
-    return routeParts.length === desiredLength;
-  },
-  byParamPlaceHolders: activePathname => route => {
-    const routeParts = route.split('/').filter(x => !!x).reduce((parts, part) => part.startsWith(':') ? [...parts, '.+?'] : [...parts, part], []).join('/');
-    const regex = new RegExp(`^${padWithSlash(routeParts)}$`);
-    const passes = regex.test(activePathname);
-    return passes;
-  }
-};
-const useActivePageLocation = path => {
-  console.log('useActivePageLocation path', path);
-  const {
-    routes: pages
-  } = useAppSettings();
-  if (!path) return;
-
-  // TODO: this needs tests because I don't think it works right
-  const activePathname = path === '' ? '/' : padWithSlash(path);
-  const registeredPageRoutes = pages.map(page => padWithSlash(page.path));
-  const exactRouteMatch = registeredPageRoutes.find(route => route === activePathname);
-  let activePageLocation;
-  if (!!exactRouteMatch) {
-    activePageLocation = exactRouteMatch;
-  } else {
-    const activePathnameParts = activePathname.split('/').filter(x => !!x);
-    const dynamicRouteMatch = registeredPageRoutes.find(route => Predicates.byLength(activePathnameParts.length)(route) && Predicates.byParamPlaceHolders(activePathname)(route));
-    activePageLocation = dynamicRouteMatch;
-  }
-  console.log('useActivePageLocation exactRouteMatch', exactRouteMatch);
-  console.log('useActivePageLocation activePageLocation', activePageLocation);
-  return activePageLocation;
-};
-
-// import { useParams } from '../use-params'
-// import { AppHeader } from './AppHeader'
-// import { AppFooter } from './AppFooter'
-// import { AccentBorder } from './AccentBorder'
-// import { ContactUsContent } from './ContactUsContent'
-// import { ResourcesContent } from './ResourcesContent'
-// import { ResourceContent } from './ResourceContent'
-// import { HomeHero } from './HomeHero'
-// import { HomeContent } from './HomeContent'
-// import { ConsultantsContent } from './ConsultantsContent'
-// import { CommandBar } from './CommandBar'
-// import { ConsultantPage } from './ConsultantPage'
-
-const components = {
-  // AppHeader: AppHeader,
-  // AppFooter: AppFooter,
-  // CommandBar: CommandBar,
-  // AccentBorder: AccentBorder,
-  // HomeHero: HomeHero,
-  // HomeContent: HomeContent,
-  // ContactUsContent: ContactUsContent,
-  // ConsultantsContent: ConsultantsContent,
-  // ResourcesContent: ResourcesContent,
-  // ResourceContent: ResourceContent,
-  // ConsultantContent: ConsultantPage
-};
-const Section = ({
-  slotName,
-  componentId,
-  componentProps: pageSpecificProps = ''
-}) => {
-  const params = useParams();
-  const Component = components[componentId] || (() => /*#__PURE__*/React.createElement(React.Fragment, null, "No component found"));
-  const [componentProps, setComponentProps] = React$1.useState({});
-  const {
-    status: defaultPropsStatus,
-    resources: defaultPropsQuery
-  } = sdkReact.useQuery({
-    location: `/design-system/${componentId}/`,
-    name: 'default',
-    type: '7Bb2zDh2EK65rV_0XHo_W'
-  });
-  const {
-    status: languageSpecificPropsStatus,
-    resources: languageSpecificPropsQuery
-  } = sdkReact.useQuery({
-    location: `/design-system/${componentId}/`,
-    name: params.marketCode,
-    type: '7Bb2zDh2EK65rV_0XHo_W'
-  });
-  const loaded = React$1.useMemo(() => [defaultPropsStatus, languageSpecificPropsStatus].every(status => status === sdkReact.AsyncStatus.Success), [defaultPropsStatus, languageSpecificPropsStatus]);
-  const slotStyles = React$1.useMemo(() => ({
-    gridArea: slotName
-  }), [slotName]);
-  React$1.useEffect(() => {
-    let props = {};
-    if (!!defaultPropsQuery.length && !!defaultPropsQuery[0].data.props) {
-      const parsedProps = JSON.parse(defaultPropsQuery[0].data.props);
-      props = {
-        ...props,
-        ...parsedProps
-      };
-    }
-    if (!!languageSpecificPropsQuery.length && !!languageSpecificPropsQuery[0].data.props) {
-      const parsedProps = JSON.parse(languageSpecificPropsQuery[0].data.props);
-      props = {
-        ...props,
-        ...parsedProps
-      };
-    }
-    if (!!pageSpecificProps) {
-      const parsedProps = JSON.parse(pageSpecificProps);
-      props = {
-        ...props,
-        ...parsedProps
-      };
-    }
-    setComponentProps(props);
-  }, [pageSpecificProps, defaultPropsQuery, languageSpecificPropsQuery]);
-  return /*#__PURE__*/React.createElement("div", {
-    style: slotStyles
-  }, loaded && /*#__PURE__*/React.createElement(Component, componentProps));
-};
-
-const Page = () => {
-  const activePageLocation = useActivePageLocation();
-  const {
-    resources: folder
-  } = sdkReact.useResources(`/pages${activePageLocation}`);
-  const pageSettings = folder.find(entry => entry.name === 'Page settings');
-  const sections = folder.filter(entry => entry.name.endsWith('Section'));
-  pageSettings?.data?.title;
-  pageSettings?.data?.layout;
-  if (!pageSettings) return;
-  setSections(sections);
-  return !!pageSettings && /*#__PURE__*/React.createElement(Layout, {
-    layoutId: pageSettings.layout
-  }, sections.map(section => /*#__PURE__*/React.createElement(Section, {
-    key: section.data.slotName,
-    slotName: section.data.slotName,
-    componentId: section.data.componentId,
-    componentProps: section.data.componentProps
-  })));
-};
-
-const getLoadingPageSettings = () => ({
-  title: 'Loading...'
-});
-const getErrorPageSettings = () => ({
-  title: 'Error'
-});
-const getNotFoundPageSettings = () => ({
-  title: 'Not found'
-});
-const getDefaultPageSettings = () => ({
-  title: undefined
-});
-const PageStatus = {
-  Loading: 'Loading',
-  Error: 'Error',
-  Success: 'Success',
-  NotFound: 'NotFound'
-};
-const PageDataLoader = ({
-  children
-}) => {
-  const activePageLocation = useActivePageLocation();
-  const {
-    status,
-    resources: folder
-  } = sdkReact.useResources(`/pages${activePageLocation}`);
-  const [pageStatus, setPageStatus] = React$1.useState(PageStatus.Loading);
-  const [pageSettings, setPageSettings] = React$1.useState(getLoadingPageSettings());
-  designSystem.useDocumentTitle(pageSettings.title);
-  React$1.useEffect(() => {
-    if ([sdkReact.AsyncStatus.NotInitialized, sdkReact.AsyncStatus.Loading].includes(status)) {
-      setPageSettings(getLoadingPageSettings());
-      return setPageStatus(PageStatus.Loading);
-    } else if ([sdkReact.AsyncStatus.Error].includes(status)) {
-      setPageSettings(getErrorPageSettings());
-      return setPageStatus(PageStatus.Error);
-    } else if ([sdkReact.AsyncStatus.Success].includes(status)) {
-      const pageSettings = folder.find(entry => entry.name === 'Page settings');
-      if (!pageSettings) {
-        setPageSettings(getNotFoundPageSettings());
-        return setPageStatus(PageStatus.NotFound);
-      }
-      setPageSettings({
-        title: pageSettings.data.title,
-        layout: pageSettings.data.layout,
-        slots: pageSettings.data.slots
-      });
-      setPageStatus(PageStatus.Success);
-    }
-    return () => {
-      setPageSettings(getDefaultPageSettings());
-    };
-  }, [status, folder]);
-  return /*#__PURE__*/React.createElement(designSystem.Switch, {
-    on: pageStatus
-  }, /*#__PURE__*/React.createElement(designSystem.Switch.Case, {
-    match: [PageStatus.NotFound]
-  }, "Page not found"), /*#__PURE__*/React.createElement(designSystem.Switch.Case, {
-    match: [PageStatus.Error]
-  }, "Couldn't load the page"), /*#__PURE__*/React.createElement(designSystem.Switch.Case, {
-    match: [PageStatus.Loading]
-  }, "Page Loading"), /*#__PURE__*/React.createElement(designSystem.Switch.Case, {
-    match: [PageStatus.Success]
-  }, children));
-};
-
-const PagesModule = () => /*#__PURE__*/React.createElement(PageDataLoader, null, /*#__PURE__*/React.createElement(Page, null));
-
-const translations = {
-  en: {
-    tags: 'Experience with',
-    work: 'Work',
-    projects: 'Projects',
-    education: 'Education',
-    other: 'Other',
-    download: 'Download',
-    all: 'All'
-  }
-};
-const getProfile = resources => {
-  const image = resources?.find(x => x.type.startsWith('image/'));
-  const {
-    id,
-    content
-  } = resources?.find(x => x.type === 'resume-summary') || {
-    content: {}
-  };
-  const profile = {
-    id: id,
-    name: content.Name || content['Consultant Name'],
-    role: content.Role,
-    image: image?.content?.src,
-    summary: content.Summary,
-    tags: content?.Tags?.split(','),
-    links: []
-  };
-  content.Mobile && profile.links.push({
-    icon: 'phone',
-    label: content.Mobile,
-    href: `tel:${content.Mobile}`,
-    target: '_blank'
-  });
-  content.Email && profile.links.push({
-    icon: 'mail',
-    label: content.Email,
-    href: `mailto:${content.Email}`
-  });
-  content.Website && profile.links.push({
-    icon: 'globe-alt',
-    label: content.Website.replace('https://', '').replace('http://', ''),
-    href: content.Website,
-    target: '_blank'
-  });
-  return profile;
-};
-const getExperiences = resources => resources.filter(x => x.type === 'resume-experience').map(resource => ({
-  id: resource.id,
-  title: resource.content.Title,
-  subTitle: resource.content['Sub Title'],
-  date: resource.content.Date,
-  description: resource.content.Description,
-  website: resource.content.Website,
-  github: resource.content.GitHub,
-  tags: resource.content?.Tags?.split(',')?.map(x => x.trim()).filter(x => !!x),
-  typeOfExperience: resource.content['Type of experience']
-}));
-const useMergeAsyncStatus = (...statuses) => {
-  return statuses.reduce((acc, status) => {
-    if (acc === 'Loading' || status === 'Loading' || status === 'NotInitialized') {
-      return 'Loading';
-    }
-    if (acc === 'Error' || status === 'Error') {
-      return 'Error';
-    }
-    if (acc === 'AuthenticationError' || status === 'AuthenticationError') {
-      return 'AuthenticationError';
-    }
-    return 'Success';
-  }, 'NotInitialized');
-};
-const location = '/@ossy/resumes/';
-const useResume = resumeId => {
-  const resumeDirectory = sdkReact.useResource(resumeId);
-  const resumeResources = sdkReact.useResources(resumeDirectory?.resource?.name ? location + resumeDirectory?.resource?.name + '/' : undefined);
-  const status = useMergeAsyncStatus(resumeDirectory.status, resumeResources.status);
-  return {
-    status,
-    translations: translations.en,
-    profile: getProfile(resumeResources.resources),
-    experiences: getExperiences(resumeResources.resources)
-  };
-};
-
-const Resume = ({
-  resumeId,
-  ...props
-}) => {
-  const resumeProps = useResume(resumeId);
-  return resumeProps.status === 'Success' ? /*#__PURE__*/React$1.createElement(designSystemExtras.Resume, _extends({}, resumeProps, {
-    profileCardVariant: "resume"
-  }, props)) : /*#__PURE__*/React$1.createElement(React$1.Fragment, null);
-};
-
-const ResumeTemplates = [{
-  name: 'Resume Experience',
-  id: 'resume-experience',
-  fields: [{
-    name: 'Title',
-    type: 'text'
-  }, {
-    name: 'Sub Title',
-    type: 'text'
-  }, {
-    name: 'Date',
-    type: 'text'
-  }, {
-    name: 'Description',
-    type: 'textarea'
-  }, {
-    name: 'Type of experience',
-    type: 'select',
-    options: ['Work', 'Education', 'Other', 'Project']
-  }, {
-    name: 'Website',
-    type: 'text'
-  }, {
-    name: 'Tags',
-    type: 'text'
-  }, {
-    name: 'GitHub',
-    type: 'text'
-  }]
-}, {
-  name: 'Resume Summary',
-  id: 'resume-summary',
-  fields: [{
-    name: 'Name',
-    type: 'text'
-  }, {
-    name: 'Role',
-    type: 'text'
-  }, {
-    name: 'Summary',
-    type: 'textarea'
-  }, {
-    name: 'Mobile',
-    type: 'text'
-  }, {
-    name: 'Email',
-    type: 'text'
-  }, {
-    name: 'Website',
-    type: 'text'
-  }, {
-    name: 'Tags',
-    type: 'textarea'
-  }]
-}];
-
-const ThemeProvider = props => {
-  const {
-    status,
-    resource: theme
-  } = sdkReact.useResource('PCX53TaGviq4_8KvK-VOp');
-  return status === sdkReact.AsyncStatus.Success ? /*#__PURE__*/React.createElement(designSystem.Theme, _extends({
-    theme: theme.data
-  }, props)) : /*#__PURE__*/React.createElement(React.Fragment, null);
-};
-
-exports.App = App;
-exports.AppContext = AppContext;
-exports.Layout = Layout;
-exports.Ossybot = Ossybot;
-exports.Page = Page;
-exports.PageDataLoader = PageDataLoader;
-exports.PagesModule = PagesModule;
-exports.Resume = Resume;
-exports.ResumeTemplates = ResumeTemplates;
-exports.ThemeEditor = ThemeEditor;
-exports.ThemeProvider = ThemeProvider;
-exports.defaultAppSettings = defaultAppSettings;
-exports.location = location;
-exports.useActivePageLocation = useActivePageLocation;
-exports.useAppSettings = useAppSettings;
-exports.useMergeAsyncStatus = useMergeAsyncStatus;
-exports.useResume = useResume;