@ossy/connected-components 0.0.1-alpha → 0.0.1

package/src/resume/Resume.template.js

@@ -0,0 +1,80 @@
+export 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'
+      }
+    ]
+  }
+]

package/src/resume/index.js

@@ -0,0 +1,3 @@
+export * from './Resume.jsx'
+export * from './useResume.js'
+export * from './Resume.template.js'

package/src/resume/useResume.js

@@ -0,0 +1,112 @@
+import React, { useState, useEffect } from 'react'
+import { useResources, useResource } from '@ossy/sdk-react'
+
+const translations = {
+  sv: {
+    tags: 'Erfarenhet med',
+    work: 'Arbete',
+    projects: 'Projekt',
+    education: 'Utbildning',
+    other: 'Övrigt',
+    download: 'Ladda ner',
+    all: 'Alla'
+  },
+  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']
+  }))
+
+  export 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')
+  }
+
+export const location = '/@ossy/resumes/'
+
+export const useResume = resumeId => {
+  const resumeDirectory = useResource(resumeId)
+  const resumeResources = 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),
+  }
+}

package/src/section/Section.jsx

@@ -0,0 +1,93 @@
+import { useMemo, useEffect, useState } from 'react'
+import { useQuery, AsyncStatus } from '@ossy/sdk-react'
+// 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
+}
+
+export const Section = ({
+  slotName,
+  componentId,
+  componentProps: pageSpecificProps = ''
+}) => {
+  const params = useParams()
+  const Component = components[componentId] || (() => <>No component found</>)
+  const [componentProps, setComponentProps] = useState({})
+
+  const {
+    status: defaultPropsStatus,
+    resources: defaultPropsQuery
+  } = useQuery({
+    location: `/design-system/${componentId}/`,
+    name: 'default',
+    type: '7Bb2zDh2EK65rV_0XHo_W'
+  })
+
+  const {
+    status: languageSpecificPropsStatus,
+    resources: languageSpecificPropsQuery
+  } = useQuery({
+    location: `/design-system/${componentId}/`,
+    name: params.marketCode,
+    type: '7Bb2zDh2EK65rV_0XHo_W'
+  })
+
+  const loaded = useMemo(() => (
+    [defaultPropsStatus, languageSpecificPropsStatus].every(status => status === AsyncStatus.Success)
+  ), [defaultPropsStatus, languageSpecificPropsStatus])
+
+  const slotStyles = useMemo(() => ({
+    gridArea: slotName
+  }), [slotName])
+
+  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 (
+    <div style={slotStyles}>
+      { loaded && <Component {...componentProps}/> }
+    </div>
+  )
+}

package/src/section/Section.stories.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Section } from './Section.jsx'
+
+export default {
+  title: 'Connected components/Section',
+  component: Section,
+  parameters: {
+   layout: 'fullscreen',
+   workspaceId: '36zDqF0TKZZ5KkJdyg7NH',
+   renderInsideApp: true,
+ },
+}
+
+const Story = props => <Section {...props}/>
+
+export const Default = Story.bind({})
+Default.args = { }

package/src/section/index.js

@@ -0,0 +1 @@
+export * from './Section.jsx'

package/src/stories/Button.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+import './button.css';
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  backgroundColor = null,
+  size = 'medium',
+  label,
+  ...props
+}) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={backgroundColor && { backgroundColor }}
+      {...props}
+    >
+      {label}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  /** Is this the principal call to action on the page? */
+  primary: PropTypes.bool,
+  /** What background color to use */
+  backgroundColor: PropTypes.string,
+  /** How large should the button be? */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /** Button contents */
+  label: PropTypes.string.isRequired,
+  /** Optional click handler */
+  onClick: PropTypes.func,
+};

package/src/stories/Button.stories.js

@@ -0,0 +1,49 @@
+import { fn } from '@storybook/test';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+export default {
+  title: 'Example/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onClick: fn() },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};