@ossy/connected-components 0.0.1-alpha → 0.0.1-beta

package/.storybook/main.js

@@ -0,0 +1,19 @@
+
+
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions"
+  ],
+  "framework": {
+    "name": "@storybook/react-vite",
+    "options": {}
+  }
+};
+export default config;

package/.storybook/preview.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+       color: /(background|color)$/i,
+       date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/build/cjs/index.js

@@ -0,0 +1,656 @@
+'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;