@ossy/design-system-extras 0.0.1-beta

package/src/templates/resume/Resume.jsx

@@ -0,0 +1,305 @@
+import React from 'react'
+import {
+  Button,
+  Title,
+  Dropdown,
+  ContextMenu,
+  Tags,
+  Tabs,
+  ProfileCard,
+  ResumeExperience,
+} from "@ossy/design-system"
+import { useResume } from './useResume'
+
+export const Resume = ({
+  status,
+  profile,
+  experiences,
+  translations,
+  profileCardProps = { },
+  actions = []
+}) => {
+
+  const {
+    work,
+    education,
+    project,
+    other,
+    tags,
+    categories,
+    activeTags,
+    toggleActiveTag,
+    activeExperienceType,
+    toggleActiveExperienceType,
+  } = useResume(experiences)
+
+  const tabs = [
+    {
+      id: 'All',
+      label: translations.all,
+    },
+    {
+      id: 'Work',
+      label: translations.work,
+    },
+    {
+      id: 'Project',
+      label: translations.projects,
+    },
+    {
+      id: 'Education',
+      label: translations.education,
+    },
+    {
+      id: 'Other',
+      label: translations.other,
+    }
+  ].filter(x => x.id === 'All'
+    ? x
+    : categories.includes(x.id)
+  )
+
+  const sections = [
+    {
+      title: translations.work,
+      experiences: work
+    },
+    {
+      title: translations.projects,
+      experiences: project
+    },
+    {
+      title: translations.education,
+      experiences: education
+    },
+    {
+      title: translations.other,
+      experiences: other
+    }
+  ]
+
+  const print = () => {
+    window.print()
+  }
+
+  return (
+    <div data-component="@design-system-extras/resume" data-status={status}>
+
+      <style href="@design-system-extras/resume" precedence="high">{`
+        [data-component="@design-system-extras/resume"] {
+
+          --padding: var(--resume-padding, 0);
+          --background: var(--resume-background, transparent);
+          --header-padding: var(--resume-header-padding, 8px 24px 8px 0);
+          --header-justify-content: var(--resume-header-justify-content, center);
+          --filter-padding: var(--resume-filter-padding, var(--space-s) var(--space-m));
+          --content-background: var(--resume-content-background, transparent);
+
+          background: var(--background);
+          padding: var(--padding);
+          display: grid;
+          grid-template-columns: 1fr;
+          grid-template-rows: fit-content fit-content fit-content;
+          grid-template-areas:
+            "profile-summary"
+            "actions"
+            "content";
+        }
+
+        [data-component="@design-system-extras/resume"] [data-slot="actions"] {
+          min-width: 0;
+          box-sizing: border-box;
+          grid-area: actions;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: var(--header-padding);
+        }
+
+        [data-component="@design-system-extras/resume"] [data-slot="actions"]::-webkit-scrollbar {
+          display: none;
+        }
+
+        [data-component="@design-system-extras/resume"] .secondary-actions {
+          display: none;
+          gap: var(--space-s);
+        }
+
+        [data-component="@design-system-extras/resume"] [data-slot="profile-summary"] {
+          grid-area: profile-summary;
+          z-index: 1;
+        }
+
+        [data-component="@design-system-extras/resume"] [data-slot="content"] {
+          display: flex;
+          width: 100%;
+          flex-direction: column;
+          align-items: center;
+          justify-content: flex-start;
+          grid-area: content;
+          padding: var(--space-l) var(--space-m);
+          margin: var(--content-margin);
+          gap: var(--space-xl);
+          background: var(--content-background);
+        }
+
+        [data-component="@design-system-extras/resume"] [data-animation="fade-in"] {
+          opacity: 0;
+          transition-property: opacity, transform;
+          transition-duration: 1s, 1s;
+          transition-timing-function: ease-in-out;
+          transform: translateZ(0);
+        }
+
+        [data-component="@design-system-extras/resume"] [data-scroll] {
+          scrollbar-width: none;
+          overflow-y: auto;
+        }
+
+        [data-component="@design-system-extras/resume"] [data-scroll]::-webkit-scrollbar {
+          display: none;
+        }
+
+        [data-component="@design-system-extras/resume"][data-status="Success"] [data-animation="fade-in"] {
+          opacity: 1;
+        }
+
+        [data-component="@design-system-extras/resume"] .content-section {
+          display: flex;
+          flex-direction: column;
+          gap: var(--space-l);
+          width: 100%;
+          max-width: 700px;
+        }
+
+        @media (min-width: 1200px) {
+          [data-component="@design-system-extras/resume"] {
+            height: 100vh;
+            grid-template-columns: 400px 1fr;
+            grid-template-rows: min-content 1fr;
+            grid-template-areas:
+              "profile-summary actions"
+              "profile-summary content";
+          }
+
+          [data-component="@design-system-extras/resume"] [data-slot="actions"] {
+            justify-content: space-between;
+          }
+
+          [data-component="@design-system-extras/resume"] .secondary-actions {
+            display: flex;
+          }
+        }
+
+        @media (min-width: 1900px) {
+          [data-component="@design-system-extras/resume"] [data-slot="content"] {
+            grid-column-start: profile-summary;
+            grid-column-end: content;
+            grid-row-start: content;
+            grid-row-end: content;
+          }
+        }
+      `}</style>
+
+      <ProfileCard
+        data-scroll
+        data-slot="profile-summary"
+        activeTags={activeTags}
+        onTagClick={toggleActiveTag}
+        translations={translations}
+        surface="primary"
+        {...profileCardProps}
+        {...profile}
+      />
+
+      <header className="actions" data-slot="actions" data-surface="primary">
+
+        <Tabs
+          tabs={tabs}
+          activeTabId={activeExperienceType || 'All'}
+          onTabClick={(_, tab) => toggleActiveExperienceType(tab.id)}
+          style={{
+            borderBottom: !!tags.length ? 'var(--header-border-bottom)' : undefined
+          }}
+        />
+
+        <div className="secondary-actions">
+        {
+          actions.map(({ label, contextMenu, ...buttonProps }) => (
+            !contextMenu
+              ? (
+                <Button {...buttonProps}>
+                  {label}
+                </Button>
+              ) : (
+                <Dropdown trigger={(
+                  <Button {...buttonProps}>
+                    {label}
+                  </Button>
+                )}>
+                  <ContextMenu>
+                    { contextMenu.map(menuItem => (
+                      <ContextMenu.Item {...menuItem}>
+                        {menuItem.label}
+                      </ContextMenu.Item>
+                    ))}
+                  </ContextMenu>
+
+                </Dropdown>
+              )
+
+          ))
+        }
+        </div>
+
+
+        {
+          !!tags.length && (
+            <Tags
+              tags={tags}
+              activeTags={activeTags}
+              onSelect={toggleActiveTag}
+              style={{
+                padding: 'var(--filter-padding)',
+                display: 'flex',
+                // overflowY: 'auto'
+              }}
+            />
+          )
+        }
+      </header>
+
+
+      <main className="content" data-slot="content" data-scroll>
+
+        {
+          sections
+            .filter(x => !!x.experiences.length)
+            .map(({ title, experiences }) => (
+              <section className="content-section" key={title}>
+                <Title variant="primary" style={{ textAlign: 'center' }}>{title}</Title>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-l)'}}>
+                  {
+                    experiences.map(experience =>
+                      <ResumeExperience
+                        key={experience.id || experience.title}
+                        title={experience.title}
+                        subTitle={experience.subTitle}
+                        date={experience.date}
+                        description={experience.description}
+                        website={experience.website}
+                        github={experience.github}
+                        tags={experience.tags}
+                      />
+                    )
+                  }
+                </div>
+              </section>
+          ))
+        }
+
+      </main>
+
+  </div>
+  )
+}

package/src/templates/resume/Resume.stories.jsx

@@ -0,0 +1,237 @@
+import React from 'react'
+import { Resume } from './Resume.jsx'
+
+export default {
+  title: 'Design System Extras/Templates/Resume',
+  component: Resume,
+  parameters: {
+   layout: 'fullscreen',
+ },
+}
+
+const Story = props => {
+
+  return (
+    <Resume {...props}/>
+  )
+}
+
+export const Default = Story.bind({})
+Default.args = {
+  status: 'Success',
+  actions: [
+    {
+      variant: 'neutral',
+      label: 'Theme: light',
+      contextMenu: [
+        { label: 'EN', onClick: () => console.log('EN') },
+        { label: 'SV', onClick: () => console.log('SV') },
+      ]
+    },
+    {
+      variant: 'neutral',
+      label: 'EN',
+      contextMenu: [
+        { label: 'EN', onClick: () => console.log('EN') },
+        { label: 'SV', onClick: () => console.log('SV') },
+      ]
+    },
+    {
+      variant: 'cta',
+      label: 'View in Google Drive',
+      href: '',
+      target: '_blank'
+    }
+  ],
+  translations: {
+    tags: 'Experience with',
+    work: 'Work',
+    projects: 'Projects',
+    education: 'Education',
+    other: 'Other',
+    download: 'Download',
+    all: 'All',
+  },
+  profile: {
+    name: 'John Doe',
+    role: 'Software Engineer',
+    image: 'https://d1yuixo7x29bj4.cloudfront.net/36zDqF0TKZZ5KkJdyg7NH/rJ2RHNDMS1tSw6-Akz1D8.jpeg',
+    summary: `
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    Sed id arcu arcu. Suspendisse orci sapien, accumsan eu turpis a,
+    tristique pretium est. Cras tempor sagittis iaculis.
+    Vestibulum congue ullamcorper odio vel varius.
+    Etiam ornare volutpat leo quis pretium.
+    Vestibulum eu tincidunt est.
+    Nunc id quam at lectus condimentum laoreet ac nec nibh. Aenean a tortor hendrerit,
+    congue lectus sit amet, condimentum sem.
+
+    Mauris vitae dui massa. In sed dignissim elit. Nunc viverra tempus ante,
+    facilisis aliquet augue sagittis vel.
+    Morbi convallis dolor nec urna mollis, et auctor nisl bibendum.
+    Vivamus eget ornare justo. Morbi ut malesuada augue,
+    vitae luctus felis. Pellentesque egestas quam ut ante mattis,
+    ut viverra dolor sodales.
+    `,
+    tags: ['JavaScript', 'TypeScript', 'React', 'Angular'],
+    links: [
+      {
+        icon: 'Call',
+        label: '+46 072 11 11'
+      },
+      {
+        icon: 'Email',
+        label: 'john.doe@example.com'
+      },
+      {
+        icon: 'Website',
+        label: 'https://github.com'
+      },
+    ]
+  },
+  experiences: [
+    {
+      title: 'Small undertaking',
+      'Sub Title': 'Software Engineer',
+      date: 'Jan 2017',
+      description: `
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Sed id arcu arcu. Suspendisse orci sapien, accumsan eu turpis a,
+        tristique pretium est. Cras tempor sagittis iaculis.
+        Vestibulum congue ullamcorper odio vel varius.
+        Etiam ornare volutpat leo quis pretium.
+        Vestibulum eu tincidunt est.
+        Nunc id quam at lectus condimentum laoreet ac nec nibh. Aenean a tortor hendrerit,
+        congue lectus sit amet, condimentum sem.
+      `,
+      typeOfExperience: 'Work',
+      tags: ['JavaScript', 'Angular']
+    },
+    {
+      title: 'Foo Company',
+      'Sub Title': 'Software Engineer',
+      date: '2022 - 2023',
+      description: `
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Sed id arcu arcu. Suspendisse orci sapien, accumsan eu turpis a,
+        tristique pretium est. Cras tempor sagittis iaculis.
+        Vestibulum congue ullamcorper odio vel varius.
+        Etiam ornare volutpat leo quis pretium.
+        Vestibulum eu tincidunt est.
+        Nunc id quam at lectus condimentum laoreet ac nec nibh. Aenean a tortor hendrerit,
+        congue lectus sit amet, condimentum sem.
+      `,
+      typeOfExperience: 'Work',
+      tags: ['JavaScript', 'Angular']
+    },
+    {
+      title: 'Bar Company',
+      'Sub Title': 'Software Engineer',
+      date: '2018 - 2019',
+      description: `
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Sed id arcu arcu. Suspendisse orci sapien, accumsan eu turpis a,
+        tristique pretium est. Cras tempor sagittis iaculis.
+        Vestibulum congue ullamcorper odio vel varius.
+        Etiam ornare volutpat leo quis pretium.
+        Vestibulum eu tincidunt est.
+        Nunc id quam at lectus condimentum laoreet ac nec nibh. Aenean a tortor hendrerit,
+        congue lectus sit amet, condimentum sem.
+      `,
+      typeOfExperience: 'Work',
+      tags: ['JavaScript', 'React']
+    },
+    {
+      title: 'Baz Company',
+      'Sub Title': 'Software Engineer',
+      date: '2019 - 2021',
+      description: `
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Sed id arcu arcu. Suspendisse orci sapien, accumsan eu turpis a,
+        tristique pretium est. Cras tempor sagittis iaculis.
+        Vestibulum congue ullamcorper odio vel varius.
+        Etiam ornare volutpat leo quis pretium.
+        Vestibulum eu tincidunt est.
+        Nunc id quam at lectus condimentum laoreet ac nec nibh. Aenean a tortor hendrerit,
+        congue lectus sit amet, condimentum sem.
+      `,
+      typeOfExperience: 'Work',
+      tags: ['TypeScript', 'Angular']
+    },
+    {
+      title: 'Project Baz',
+      'Sub Title': 'Fun little side project',
+      date: 'Apr 2019',
+      description: `
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Sed id arcu arcu. Suspendisse orci sapien, accumsan eu turpis a,
+        tristique pretium est. Cras tempor sagittis iaculis.
+      `,
+      typeOfExperience: 'Project',
+      tags: ['TypeScript', 'Angular'],
+      gitHub: "https://github.com",
+      website: "https://ossy.se"
+    },
+    {
+      title: 'Project with a longer name',
+      'Sub Title': 'Way too big of an undertaking',
+      date: 'Jan 2020',
+      description: `
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        Sed id arcu arcu. Suspendisse orci sapien, accumsan eu turpis a,
+        tristique pretium est. Cras tempor sagittis iaculis.
+        Vestibulum congue ullamcorper odio vel varius.
+        Etiam ornare volutpat leo quis pretium.
+        Vestibulum eu tincidunt est.
+        Nunc id quam at lectus condimentum laoreet ac nec nibh. Aenean a tortor hendrerit,
+        congue lectus sit amet, condimentum sem.
+      `,
+      typeOfExperience: 'Project',
+      tags: ['TypeScript', 'Angular'],
+      gitHub: "https://github.com",
+      website: "https://ossy.se"
+    },
+    {
+      title: 'Upper secondary school',
+      'Sub Title': 'It program',
+      date: '2016 - 2018',
+      description: `
+        Nunc id quam at lectus condimentum laoreet ac nec nibh. Aenean a tortor hendrerit,
+        congue lectus sit amet, condimentum sem.
+      `,
+      typeOfExperience: 'Education',
+      tags: ['TypeScript', 'JavaScript', 'React']
+    },
+    {
+      title: 'A good course',
+      'Sub Title': 'I learned a lot',
+      date: 'Feb 2021',
+      description: `
+        Nunc id quam at lectus condimentum laoreet ac nec nibh. Aenean a tortor hendrerit,
+        congue lectus sit amet, condimentum sem.
+      `,
+      typeOfExperience: 'Education',
+      tags: ['TypeScript', 'JavaScript', 'React']
+    },
+    {
+      title: 'School',
+      'Sub Title': 'It was boring',
+      date: '2000 - 2008',
+      description: `
+        Nunc id quam at lectus condimentum laoreet ac nec nibh. Aenean a tortor hendrerit,
+        congue lectus sit amet, condimentum sem.
+      `,
+      typeOfExperience: 'Education'
+    },
+    {
+      title: 'I like rocks',
+      'Sub Title': 'Wanna see my rock collection?',
+      date: '2024',
+      description: `
+        Nunc id quam at lectus condimentum laoreet ac nec nibh. Aenean a tortor hendrerit,
+        congue lectus sit amet, condimentum sem.
+      `,
+      typeOfExperience: 'Other'
+    }
+  ]
+}

package/src/templates/resume/index.js

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

package/src/templates/resume/useResume.js

@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from 'react'
+
+const categorizeExperiences = experiences => experiences.reduce((categories, exp) => {
+  categories[exp.typeOfExperience || 'Other'].push(exp)
+  return categories
+}, { Work: [], Education: [], Project: [], Other: [] })
+
+const experienceByDate = (a, b) => {
+  const getDate = x => x?.date?.split(' - ')?.[0] || '1900'
+  const dateA = new Date(getDate(a))
+  const dateB = new Date(getDate(b))
+  return dateB - dateA
+}
+
+export const useResume = (experiences = []) => {
+  // Haram to do it in place I know,
+  // but feels unneccecary to do it each time we filter them
+  experiences.sort(experienceByDate)
+
+  const [work, setWork] = useState([])
+  const [education, setEducation] = useState([])
+  const [project, setProject] = useState([])
+  const [other, setOther] = useState([])
+  const [activeTags, setActiveTags] = useState([])
+  const [activeExperienceType, setActiveExperienceType] = useState()
+
+  const tags = Object.keys(
+    experiences
+      .flatMap(x => x.tags)
+      .filter(x => !!x)
+      .reduce((acc, x) => ({ [x]: '', ...acc }), {})
+  )
+
+  const categories = Object.keys(
+    experiences // get uniquie typeOfExperience
+      .reduce((acc, x) => ({ [x.typeOfExperience]: '', ...acc }), {})
+  )
+
+  useEffect(() => {
+    let filteredExperiences = experiences
+
+    if (!!activeTags.length) {
+      filteredExperiences = experiences.filter(experience => experience?.tags
+        ?.map(x => x.toLowerCase())
+        ?.some(tag => activeTags.map(x => x.toLowerCase()).includes(tag)))
+    }
+
+    if (!!activeExperienceType) {
+      filteredExperiences = filteredExperiences
+        .filter(x => x.typeOfExperience === activeExperienceType)
+    }
+
+    const categorizedExperiences = categorizeExperiences(filteredExperiences)
+    setWork(categorizedExperiences.Work)
+    setEducation(categorizedExperiences.Education)
+    setProject(categorizedExperiences.Project)
+    setOther(categorizedExperiences.Other)
+
+  }, [activeTags, experiences, activeExperienceType])
+
+  const toggleActiveExperienceType = type => {
+    if (type === activeExperienceType) return
+    setActiveExperienceType(type === 'All' ? undefined : type)
+  }
+
+  const toggleActiveTag = tag => {
+    setActiveTags(tags => tags.includes(tag)
+      ? tags.filter(x => x !== tag)
+      : [...tags, tag]
+    )
+  }
+
+  return {
+    work,
+    education,
+    project,
+    other,
+    tags: [],
+    categories,
+    activeTags,
+    toggleActiveTag,
+    activeExperienceType,
+    toggleActiveExperienceType
+  }
+}