@pareto-engineering/design-system 5.3.0 → 5.4.0

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

@@ -1,29 +0,0 @@
-import { Meta, IconGallery, IconItems } from '@storybook/addon-docs/blocks';
-
-import {
-  charList
-} from './helpers';
-
-<Meta title="StyleGuide/Icons/all" />
-
-
-# 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

@@ -1,55 +0,0 @@
-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)`)
-  }
-  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/AppContext.stories.jsx

@@ -1,44 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.0 */
-import * as React from 'react'
-
-import { AppContextProvider } from 'ui'
-
-export default {
-  title        :'a/AppContext',
-  component    :AppContextProvider,
-  subcomponents:{
-    // Item:AppContext.Item
-  },
-  decorators:[
-    // storyfn => <div className="">{ storyfn() }</div>,
-  ],
-  argTypes:{
-    // backgroundColor:{ control: 'color' },
-  },
-}
-
-export const Base = () => (
-  <AppContextProvider
-    config={{
-      APP:{
-        NAME         :'Pareto',
-        CANONICAL    :'https://pareto.ai',
-        SUPPORT_EMAIL:'support@hellopareto.com',
-        TITLE_SUFFIX :'| Pareto',
-      },
-      SOCIAL:{
-        FACEBOOK :'https://www.facebook.com/hellopareto',
-        INSTAGRAM:'https://www.instagram.com/hellopareto',
-        TWITTER  :'https://www.twitter.com/hellopareto',
-        THREADS  :'https://www.threads.net/@hellopareto',
-        LINKEDIN :'https://www.linkedin.com/company/hellopareto',
-      },
-      EXTRA:{
-        SURVEY:'https://survey.pareto.ai',
-      },
-    }}
-
-  >
-    Sample AppContext
-  </AppContextProvider>
-)

package/src/stories/a/AreaChart.stories.jsx

@@ -1,118 +0,0 @@
-// front/packages/design-system/src/ui/a/AreaChart/AreaChart.stories.jsx
-
-import React from 'react'
-import { AreaChart } from 'ui'
-
-export default {
-  title    :'a/Charts/AreaChart',
-  component:AreaChart,
-}
-
-const data = [
-  {
-    date:'2023-01-01', Average:0.49, Best:0.50, Worst:0.48,
-  },
-  {
-    date:'2023-01-02', Average:0.48, Best:0.49, Worst:0.47,
-  },
-  {
-    date:'2023-01-03', Average:0.47, Best:0.48, Worst:0.46,
-  },
-  {
-    date:'2023-01-04', Average:0.50, Best:0.51, Worst:0.49,
-  },
-  {
-    date:'2023-01-05', Average:0.52, Best:0.53, Worst:0.51,
-  },
-  {
-    date:'2023-01-06', Average:0.51, Best:0.52, Worst:0.50,
-  },
-  {
-    date:'2023-01-07', Average:0.49, Best:0.50, Worst:0.48,
-  },
-]
-
-const data2 = [
-  {
-    date:'2023-01-01', Average:0.60, Best:0.62, Worst:0.58,
-  },
-  {
-    date:'2023-01-02', Average:0.59, Best:0.61, Worst:0.57,
-  },
-  {
-    date:'2023-01-03', Average:0.58, Best:0.60, Worst:0.56,
-  },
-  {
-    date:'2023-01-04', Average:0.61, Best:0.63, Worst:0.59,
-  },
-  {
-    date:'2023-01-05', Average:0.63, Best:0.65, Worst:0.61,
-  },
-  {
-    date:'2023-01-06', Average:0.62, Best:0.64, Worst:0.60,
-  },
-  {
-    date:'2023-01-07', Average:0.60, Best:0.62, Worst:0.58,
-  },
-]
-
-const Template = (args) => (
-  <div style={{ height: '100%', width: '100%' }}>
-    <AreaChart {...args} />
-  </div>
-)
-
-export const Default = Template.bind({})
-Default.args = {
-  data,
-  title :'Approval rate over time',
-  xKey  :'date',
-  yKeys :['Average', 'Best', 'Worst'],
-  xLabel:'Date',
-  yLabel:'Approval rate',
-  colors:['purple', 'green', 'orange'],
-  height:400,
-}
-
-export const Filled = Template.bind({})
-Filled.args = {
-  ...Default.args,
-  filled:true,
-}
-
-const TemplateSideBySide = (args) => (
-  <div style={{ display: 'flex', gap: '20px' }}>
-    <div style={{ flex: 1 }}>
-      {/* eslint-disable-next-line react/destructuring-assignment */}
-      <AreaChart {...args[0]} />
-    </div>
-    <div style={{ flex: 1 }}>
-      {/* eslint-disable-next-line react/destructuring-assignment */}
-      <AreaChart {...args[1]} />
-    </div>
-  </div>
-)
-
-export const SideBySide = TemplateSideBySide.bind({})
-SideBySide.args = [
-  {
-    ...Default.args,
-  },
-  {
-    ...Default.args,
-    title:'Submission rate over time',
-    data :data2,
-  },
-]
-
-export const SideBySideFilled = TemplateSideBySide.bind({})
-SideBySideFilled.args = [
-  {
-    ...Filled.args,
-  },
-  {
-    ...Filled.args,
-    data :data2,
-    title:'Submission rate over time',
-  },
-]

package/src/stories/a/BarChart.stories.jsx

@@ -1,89 +0,0 @@
-// front/packages/design-system/src/ui/a/BarChart/BarChart.stories.jsx
-
-import React from 'react'
-import { BarChart } from 'ui'
-
-export default {
-  title    :'a/Charts/BarChart',
-  component:BarChart,
-}
-
-const data = [
-  {
-    date:'Jan', pendingReview:200, accepted:150, rejected:100, toRevise:250, revised:50,
-  },
-  {
-    date:'Feb', pendingReview:180, accepted:160, rejected:120, toRevise:240, revised:60,
-  },
-  {
-    date:'Mar', pendingReview:220, accepted:140, rejected:110, toRevise:230, revised:70,
-  },
-  {
-    date:'Apr', pendingReview:210, accepted:130, rejected:130, toRevise:220, revised:80,
-  },
-  {
-    date:'May', pendingReview:230, accepted:120, rejected:140, toRevise:210, revised:90,
-  },
-  {
-    date:'Jun', pendingReview:240, accepted:110, rejected:150, toRevise:200, revised:100,
-  },
-  {
-    date:'Jul', pendingReview:250, accepted:100, rejected:160, toRevise:190, revised:110,
-  },
-  {
-    date:'Aug', pendingReview:260, accepted:90, rejected:170, toRevise:180, revised:120,
-  },
-  {
-    date:'Sep', pendingReview:270, accepted:80, rejected:180, toRevise:170, revised:130,
-  },
-  {
-    date:'Oct', pendingReview:280, accepted:70, rejected:190, toRevise:160, revised:140,
-  },
-  {
-    date:'Nov', pendingReview:290, accepted:60, rejected:200, toRevise:150, revised:150,
-  },
-  {
-    date:'Dec', pendingReview:300, accepted:50, rejected:210, toRevise:140, revised:160,
-  },
-]
-
-const Template = (args) => (
-  <div style={{ height: '100%', width: '100%' }}>
-    <BarChart {...args} />
-  </div>
-)
-
-export const Default = Template.bind({})
-Default.args = {
-  data,
-  title :'Throughput',
-  xKey  :'date',
-  yKeys :['pendingReview', 'accepted', 'rejected', 'toRevise', 'revised'],
-  xLabel:'Date',
-  yLabel:'Submissions',
-  colors:['purple', 'green', 'orange', 'blue', 'red'],
-  height:400,
-}
-
-const TemplateSideBySide = (args) => (
-  <div style={{ display: 'flex', gap: '20px' }}>
-    <div style={{ flex: 1 }}>
-      {/* eslint-disable-next-line react/destructuring-assignment */}
-      <BarChart {...args[0]} />
-    </div>
-    <div style={{ flex: 1 }}>
-      {/* eslint-disable-next-line react/destructuring-assignment */}
-      <BarChart {...args[1]} />
-    </div>
-  </div>
-)
-
-export const SideBySide = TemplateSideBySide.bind({})
-SideBySide.args = [
-  {
-    ...Default.args,
-  },
-  {
-    ...Default.args,
-  },
-]

package/src/stories/a/BlurOverlay.stories.jsx

@@ -1,39 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
-import * as React from 'react'
-
-import { BlurOverlay } from 'ui'
-
-export default {
-  title        :'a/BlurOverlay',
-  component    :BlurOverlay,
-  subcomponents:{
-    // Item:BlurOverlay.Item
-  },
-  decorators:[
-    // storyfn => <div className="">{ storyfn() }</div>,
-  ],
-  argTypes:{},
-  controls:{
-    blur:{ type: 'boolean' },
-  },
-}
-
-export const Base = (args) => (
-  <BlurOverlay {...args}>
-    <div style={{
-      height         :'100px',
-      bottom         :'0',
-      minWidth       :'100%',
-      position       :'fixed',
-      backgroundColor:'blue',
-      color          :'white',
-    }}
-    >
-      Sample Foreground Component
-    </div>
-  </BlurOverlay>
-
-)
-Base.args = {
-  blur:true,
-}