@pareto-engineering/design-system 1.0.2 → 2.0.0-alpha.4

package/src/local.scss

@@ -0,0 +1,14 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");
+
+:root {
+  --font-default: inter, helvetica, helvetica neue, arial, verdana, sans-serif;
+  --theme-border-style: 1px solid;
+  --theme-border-color: var(--paragraph);
+  --theme-border: var(--theme-border-style) var(--theme-border-color);
+}
+
+html {
+  font-family: var(--font-default);
+  font-size: 18px;
+}
+

package/src/stories/StyleGuide/colors.stories.mdx

@@ -0,0 +1,73 @@
+import { Meta, ColorItem, ColorPalette } from '@storybook/addon-docs/blocks';
+
+import { 
+  brandMap, 
+  modalsMap, 
+  uiMap ,
+  smMap,
+  monochromeMap
+} from './helpers';
+
+<Meta title="StyleGuide/Colors" />
+
+# Colors
+
+The colors are defined in [@pareto-engineering/styles/src/swatch](https://github.com/HelloPareto/styles/tree/main/src/swatch) and make use of the open source library [@aztlan/swatch](https://github.com/AztlanEngineering/swatch).
+
+## Colorschemes
+
+Color are collections of colors that put together, make a UI theme.
+
+### Light
+
+ <ColorPalette>
+   { brandMap.map((e,i) =>
+     <ColorItem
+       key={i}
+       { ...e }
+     />
+   ) }
+ </ColorPalette>
+ <ColorPalette>
+   { modalsMap.map((e,i) =>
+     <ColorItem
+       key={i}
+       { ...e }
+     />
+   ) }
+ </ColorPalette>
+ <ColorPalette>
+   { uiMap.map((e,i) =>
+     <ColorItem
+       key={i}
+       { ...e }
+     />
+   ) }
+ </ColorPalette>
+
+
+## Palettes
+
+Palettes are collections of colors that are independent of colorschemes. 
+
+### Monochrome
+
+ <ColorPalette>
+   { monochromeMap.map((e,i) =>
+     <ColorItem
+       key={i}
+       { ...e }
+     />
+   ) }
+ </ColorPalette>
+
+### Social Media
+
+ <ColorPalette>
+   { smMap.map((e,i) =>
+     <ColorItem
+       key={i}
+       { ...e }
+     />
+   ) }
+ </ColorPalette>

package/src/stories/StyleGuide/cssClasses.stories.mdx

@@ -0,0 +1,16 @@
+import { Meta} from '@storybook/addon-docs/blocks';
+
+<Meta title="StyleGuide/CSSClasses" />
+
+# CSS Classes
+
+The CSS classes are defined in [@pareto-engineering/styles/src/swatch](https://github.com/HelloPareto/styles/tree/main/src/swatch) and make use of the open source library [@aztlan/swatch](https://github.com/AztlanEngineering/swatch).
+
+## Font Sizes
+
+Color are collections of colors that put together, make a UI theme.
+
+## Padding / Margin
+
+Color are collections of colors that put together, make a UI theme.
+

package/src/stories/StyleGuide/helpers.js

@@ -0,0 +1,48 @@
+import {
+  THEME,
+  // WHEEL,
+  MODALS,
+  UI,
+  SM,
+  MONOCHROME,
+} from '../colors'
+
+const getColorMap = (prefix, list) => {
+  const a = []
+  list.forEach((color) => a.push({
+    title :`${prefix}.${color}`,
+    // subtitle:'',
+    colors:[
+      `var(--dark-${color})`,
+      `var(--${color})`,
+      `var(--light-${color})`,
+      `var(--on-${color})`,
+    ],
+  }))
+  return a
+}
+
+const brandMap = getColorMap('colorschemes.light.brand', THEME)
+// const wheelMap = getColorMap('colorschemes.light.wheel', WHEEL)
+const modalsMap = getColorMap('colorschemes.light.modals', MODALS)
+const uiMap = getColorMap('colorschemes.light.ui', UI)
+
+const smMap = getColorMap('palettes.social-media', SM)
+const monochromeMap = getColorMap('palettes.momochrome', MONOCHROME)
+
+const charList = [' ', '!', '"', '#', '$', '%', '&', '\'', '(', ')', '*', '+', ',', '-', '.', '/',
+  '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ':', ';', '<', '=', '>', '?',
+  '@', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
+  'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '[', '\\', ']', '^', '_', '`',
+  'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
+  'u', 'v', 'w', 'x', 'y', 'z', '{', '|', '}', '~']
+
+export {
+  brandMap,
+  // wheelMap,
+  modalsMap,
+  uiMap,
+  smMap,
+  monochromeMap,
+  charList,
+}

package/src/stories/StyleGuide/icons.stories.mdx

@@ -0,0 +1,29 @@
+import { Meta, IconGallery, IconItems } from '@storybook/addon-docs/blocks';
+
+import { 
+  charList
+} from './helpers';
+
+<Meta title="StyleGuide/Icons" />
+
+
+# Icons                                                                                                                             
+                                                                                                                                    
+The icons are defined in [@pareto-engineering/assets/fonts/icons.woff](https://github.com/HelloPareto/assets/tree/master/fonts),              
+imported in [@pareto-engineering/styles/src/stylebook.scss](https://github.com/HelloPareto/styles/blob/master/src/stylebook.scss).            
+                                                                                                                                    
+To add more fonts, connect to [glyphter](https://glyphter.com).                                                                     
+                                                                                                                                    
+<div style={{ display:'grid', 'grid-template-columns':'repeat(auto-fill, minmax(100px, 150px))' }}>                                 
+{ charList.map(letter =>                                                                                                          
+<div>                                                                                                                               
+<div style={{ textAlign:'center', padding:'.5em', fontWeight:'bold', outline:'1px solid #DCDCDC', color:'#ACACAC' }}>               
+{ letter }                                                                                                                          
+</div>                                                                                                                              
+<div style={{ outline:'1px solid #DCDCDC', padding:'2em', 'text-align':'center', 'font-family':'icons', 'font-size':'2em' }}>       
+{ letter }                                                                                                                          
+</div>                                                                                                                              
+</div>                                                                                                                              
+) }                                                                                                                                 
+</div>
+

package/src/stories/StyleGuide/typography.stories.mdx

@@ -0,0 +1,56 @@
+import { Typeset, Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="StyleGuide/Typography" />
+
+# Typography
+
+The fonts are imported in [@pareto-engineering/styles/src/main.scss](https://github.com/HelloPareto/styles/blob/main/src/main.scss). The granular typography style guide is defined in the same file as well.
+
+## Headings font
+
+In css, consume with `font-family:var(--font-heading)`
+
+<Typeset
+  fontSizes={
+    [
+      '-3',
+      '-2',
+      '-1',
+      0,
+      1,
+      2,
+      3,
+      4,
+      5,
+      6,
+    ].map((e) => `calc(var(--s${e}) * 1rem)`)
+  }
+  fontWeight={'bold'}
+  sampleText={'Voix ambiguë d\'un cœur qui, au zéphyr, préfère les jattes de kiwis'}
+  fontFamily={ 'var(--font-paragraph)' }
+/>
+
+## Paragraph (body) font
+
+In css, consume with `font-family:var(--font-paragraph)`
+
+<Typeset
+  fontSizes={
+    [
+      '-3',
+      '-2',
+      '-1',
+      0,
+      1,
+      2,
+      3,
+      4,
+      5,
+      6,
+    ].map((e) => `calc(var(--s${e}) * 1rem)`)
+  }
+  //fontWeight={'bold'}
+  sampleText={'Voix ambiguë d\'un cœur qui, au zéphyr, préfère les jattes de kiwis'}
+  fontFamily={ 'var(--font-paragraph)' }
+/>
+

package/src/stories/a/AnimatedCounter.stories.jsx

@@ -0,0 +1,34 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { AnimatedCounter } from 'ui'
+
+export default {
+  title        :'a/AnimatedCounter',
+  component    :AnimatedCounter,
+  subcomponents:{
+    // Item:AnimatedCounter.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <AnimatedCounter delay={5} number={100.555} after="%" />
+)
+
+export const Before = () => (
+  <AnimatedCounter delay={5} number={100} before="%" />
+)
+
+export const After = () => (
+  <AnimatedCounter delay={5} number={100} after="%" />
+)
+
+export const BeforeAndAfter = () => (
+  <AnimatedCounter delay={5} number={100} before="%" after="+" />
+)

package/src/stories/a/ContentCard.stories.jsx

@@ -0,0 +1,158 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Title, Conversation, ContentCard } from 'ui'
+
+export default {
+  title        :'a/ContentCard',
+  component    :ContentCard,
+  subcomponents:{
+    'ContentCard.Section':ContentCard.Section,
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const LayoutLeft = () => {
+  const conversations = [
+    {
+      message:'Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
+      sender :'Camille',
+      from   :'ours',
+    },
+    {
+      message:'Hi Camille, please compile an assesment of top 4 firms/brand providers for the listed fields in the US.',
+      sender :'HUMBL',
+      from   :'theirs',
+    },
+    {
+      message:'Hi Camille, please compile an assesment of top 3 firms/brand providers for the listed fields in the US.',
+      sender :'Camille',
+      from   :'ours',
+    },
+  ]
+
+  return (
+    <div className="u1 p-u" style={{ backgroundColor: 'green' }}>
+      <ContentCard>
+        <ContentCard.Section layout="left" className="p-u">
+          <Title
+            heading="Task Followup"
+            className="content p-u"
+            headingAs="p"
+            headingClassName="heading h1"
+            subtitle="Camille shows Humbl the initial progress to verify that the work aligns with the needs. She shares the document populated with one hour of work"
+            subtitleClassName="subtitle"
+          />
+          <Conversation className="illustration">
+            {conversations.map((conversation) => (
+              <Conversation.Message key={conversation.message} {...conversation} />
+            ))}
+          </Conversation>
+        </ContentCard.Section>
+      </ContentCard>
+    </div>
+  )
+}
+
+export const LayoutRight = () => {
+  const conversations = [
+    {
+      message:'Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
+      sender :'Camille',
+      from   :'ours',
+    },
+    {
+      message:'Hi Camille, please compile an assesment of top 4 firms/brand providers for the listed fields in the US.',
+      sender :'HUMBL',
+      from   :'theirs',
+    },
+    {
+      message:'Hi Camille, please compile an assesment of top 3 firms/brand providers for the listed fields in the US.',
+      sender :'Camille',
+      from   :'ours',
+    },
+  ]
+
+  return (
+    <div className="u1 p-u" style={{ backgroundColor: 'green' }}>
+      <ContentCard>
+        <ContentCard.Section layout="right" className="p-u">
+          <Title
+            heading="Task Followup"
+            className="content p-u"
+            headingAs="p"
+            headingClassName="heading h1"
+            subtitle="Camille shows Humbl the initial progress to verify that the work aligns with the needs. She shares the document populated with one hour of work"
+            subtitleClassName="subtitle"
+          />
+          <Conversation className="illustration">
+            {conversations.map((conversation) => (
+              <Conversation.Message key={conversation.message} {...conversation} />
+            ))}
+          </Conversation>
+        </ContentCard.Section>
+      </ContentCard>
+    </div>
+  )
+}
+
+export const LayoutCenter = () => (
+  <div className="u1 p-u" style={{ backgroundColor: 'green' }}>
+    <ContentCard color="background1">
+      <ContentCard.Section layout="center" className="p-u">
+        <p className="content p-u">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit asperiores facilis,
+          praesentium porro accusantium id ducimus adipisci repudiandae ab totam, sit provident.
+          Quisquam aliquam facere delectus est vel illo nobis?
+        </p>
+      </ContentCard.Section>
+    </ContentCard>
+  </div>
+)
+
+export const ContentAfter = () => {
+  const conversations = [
+    {
+      message:'Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
+      sender :'Camille',
+      from   :'ours',
+    },
+    {
+      message:'Hi Camille, please compile an assesment of top 4 firms/brand providers for the listed fields in the US.',
+      sender :'HUMBL',
+      from   :'theirs',
+    },
+    {
+      message:'Hi Camille, please compile an assesment of top 3 firms/brand providers for the listed fields in the US.',
+      sender :'Camille',
+      from   :'ours',
+    },
+  ]
+
+  return (
+    <div className="u1 p-u" style={{ backgroundColor: 'green' }}>
+      <ContentCard>
+        <ContentCard.Section layout="right" className="p-u" contentAfter>
+          <Title
+            heading="Task Followup"
+            className="content p-u"
+            headingAs="p"
+            headingClassName="heading h1"
+            subtitle="Camille shows Humbl the initial progress to verify that the work aligns with the needs. She shares the document populated with one hour of work"
+            subtitleClassName="subtitle"
+          />
+          <Conversation className="illustration">
+            {conversations.map((conversation) => (
+              <Conversation.Message key={conversation.message} {...conversation} />
+            ))}
+          </Conversation>
+        </ContentCard.Section>
+      </ContentCard>
+    </div>
+  )
+}

package/src/stories/a/Conversation.stories.jsx

@@ -0,0 +1,46 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Conversation } from 'ui'
+
+export default {
+  title        :'a/Conversation',
+  component    :Conversation,
+  subcomponents:{
+    'Conversation.Message':Conversation.Message,
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  const conversations = [
+    {
+      message:'Hi Camille, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
+      sender :'HUMBL',
+      from   :'theirs',
+    },
+    {
+      message:'Hi Humbl, please compile an assesment of top 5 firms/brand providers for the listed fields in the US.',
+      sender :'CAMILLE',
+      from   :'ours',
+    },
+    {
+      message:'Hi Camille, please compile an assesment of top 6 firms/brand providers for the listed fields in the US.',
+      sender :'HUMBL',
+      from   :'theirs',
+    },
+  ]
+
+  return (
+    <Conversation>
+      {conversations.map((conversation) => (
+        <Conversation.Message key={conversation.message} {...conversation} />
+      ))}
+    </Conversation>
+  )
+}

package/src/stories/a/CustomerLogos.stories.jsx

@@ -0,0 +1,35 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { CustomerLogos } from 'ui'
+
+export default {
+  title        :'a/CustomerLogos',
+  component    :CustomerLogos,
+  subcomponents:{
+    // Item:CustomerLogos.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  const logosMap = [
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/1517-logo.png', altText: '1517 VC logo' },
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/yc-logo.png', altText: 'YC logo' },
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/stanford-logo.png', altText: 'Stanford University logo' },
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/startx-logo.png', altText: 'StartX logo' },
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/techstars-logo.png', altText: 'Techstars logo' },
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/contrary-logo.png', altText: 'Contrary Capital logo' },
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/alchemist-logo.png', altText: 'Alchemist Accelerator logo' },
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/community-logos/pear-logo.png', altText: 'Pear logo' },
+  ]
+
+  return (
+    <CustomerLogos logosMap={logosMap} />
+  )
+}

package/src/stories/a/CustomerStat.stories.jsx

@@ -0,0 +1,22 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { CustomerStat } from 'ui'
+
+export default {
+  title        :'a/CustomerStat',
+  component    :CustomerStat,
+  subcomponents:{
+    // Item:AnimatedCounter.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => (
+  <CustomerStat description="Company Name" label="Pareto Inc." />
+)

package/src/stories/a/DashboardNavbar.stories.jsx

@@ -0,0 +1,57 @@
+/* @pareto-engineering/generator-front 0.2.3 */
+import * as React from 'react'
+
+import { DashboardNavbar } from 'ui'
+
+export default {
+  title        :'a/DashboardNavbar',
+  // component: DashboardNavbar,
+  subcomponents:{
+    // Item:DashboardNavbar.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  let navMap
+  /*
+  const navMap = [
+    {
+      name: 'home',
+      url: '/home',
+      emoji: 'home',
+    },
+    {
+      name: 'tasks',
+      url: '/tasks',
+      emoji: 'tasks',
+    },
+    {
+      name: 'settings',
+      url: '/settings',
+      emoji: 'setting-wheel',
+      children: [
+        {
+          name: 'general',
+          url: '/settings#general',
+        },
+        {
+          name: 'notifications',
+          url: '/settings#notifications',
+        },
+      ],
+    },
+  ] */
+  return (
+    <DashboardNavbar navMap={navMap}>
+      <DashboardNavbar.Item>Home</DashboardNavbar.Item>
+      <DashboardNavbar.Item>Tasks</DashboardNavbar.Item>
+      <DashboardNavbar.Item>Profile</DashboardNavbar.Item>
+    </DashboardNavbar>
+  )
+}

package/src/stories/a/DotInfo.stories.jsx

@@ -0,0 +1,32 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { DotInfo } from 'ui'
+
+export default {
+  title        :'a/DotInfo',
+  component    :DotInfo,
+  subcomponents:{
+    // Item:DotInfo.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const True = () => (
+  <DotInfo booleanValue />
+)
+export const False = () => (
+  <DotInfo booleanValue={false} />
+)
+
+export const Nullish = () => (
+  <>
+    <DotInfo />
+    <DotInfo booleanValue={null} />
+  </>
+)

package/src/stories/a/FeaturedOn.stories.jsx

@@ -0,0 +1,33 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { FeaturedOn } from 'ui'
+
+export default {
+  title        :'a/FeaturedOn',
+  component    :FeaturedOn,
+  subcomponents:{
+    // Item:FeaturedOn.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  const featuresMap = [
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/publication-logos/bloomberg.png', altText: 'Bloomberg logo', link: 'https://www.bloomberg.com/press-releases/2020-12-30/thiel-foundation-announces-2020-thiel-fellows' },
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/publication-logos/marginal_revolution.png', altText: 'Marginal Revolution logo', link: 'https://marginalrevolution.com/marginalrevolution/2020/05/tuesday-assorted-links-261.html' },
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/publication-logos/lysten_network.png', altText: 'Lysten Network logo', link: 'https://lystennetwork.com/3-things-to-consider-when-hiring-and-why-good-hiring-is-important/' },
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/publication-logos/the_new_yorker.png', altText: 'New Yorker logo', link: 'https://www.newyorker.com/magazine/2020/12/07/what-if-you-could-outsource-your-to-do-list' },
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/publication-logos/product_hunt.png', altText: 'Product Hunt logo', link: 'https://www.producthunt.com/posts/pareto' },
+    { img: 'https://pareto-v1.s3-us-west-2.amazonaws.com/publication-logos/stanford_daily.png', altText: 'Stanford Daily logo', link: 'https://www.stanforddaily.com/2020/04/28/stanford-startups-stay-strong-during-covid-19-crisis/' },
+  ]
+
+  return (
+    <FeaturedOn featuresMap={featuresMap} />
+  )
+}