@pareto-engineering/design-system 5.2.1 → 5.4.0

package/src/stories/Introduction.stories.mdx

@@ -1,193 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
-
-<Meta title="Example/Introduction" />
-
-<style>{`
-  .subheading {
-    --mediumdark: '#999999';
-    font-weight: 900;
-    font-size: 13px;
-    color: #999;
-    letter-spacing: 6px;
-    line-height: 24px;
-    text-transform: uppercase;
-    margin-bottom: 12px;
-    margin-top: 40px;
-  }
-  .link-list {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
-    row-gap: 10px;
-  }
-  @media (min-width: 620px) {
-    .link-list {
-      row-gap: 20px;
-      column-gap: 20px;
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-  @media all and (-ms-high-contrast:none) {
-  .link-list {
-      display: -ms-grid;
-      -ms-grid-columns: 1fr 1fr;
-      -ms-grid-rows: 1fr 1fr;
-    }
-  }
-  .link-item {
-    display: block;
-    padding: 20px 30px 20px 15px;
-    border: 1px solid #00000010;
-    border-radius: 5px;
-    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-    color: #333333;
-    display: flex;
-    align-items: flex-start;
-  }
-  .link-item:hover {
-    border-color: #1EA7FD50;
-    transform: translate3d(0, -3px, 0);
-    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-  }
-  .link-item:active {
-    border-color: #1EA7FD;
-    transform: translate3d(0, 0, 0);
-  }
-  .link-item strong {
-    font-weight: 700;
-    display: block;
-    margin-bottom: 2px;
-  }
-  .link-item img {
-    height: 40px;
-    width: 40px;
-    margin-right: 15px;
-    flex: none;
-  }
-  .link-item span {
-    font-size: 14px;
-    line-height: 20px;
-  }
-  .tip {
-    display: inline-block;
-    border-radius: 1em;
-    font-size: 11px;
-    line-height: 12px;
-    font-weight: 700;
-    background: #E7FDD8;
-    color: #66BF3C;
-    padding: 4px 12px;
-    margin-right: 10px;
-    vertical-align: top;
-  }
-  .tip-wrapper {
-    font-size: 13px;
-    line-height: 20px;
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-  .tip-wrapper code {
-    font-size: 12px;
-    display: inline-block;
-  }
-`}</style>
-
-# Welcome to Storybook
-
-Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
-
-Browse example stories now by navigating to them in the sidebar.
-View their code in the `src/stories` directory to learn how they work.
-We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
-
-<div className="subheading">Configure</div>
-
-<div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs/react/addons/addon-types" target="_blank">
-    <img src={Plugin} alt="plugin" />
-    <span>
-      <strong>Presets for popular tools</strong>
-      Easy setup for TypeScript, SCSS and more.
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
-    <img src={StackAlt} alt="Build" />
-    <span>
-      <strong>Build configuration</strong>
-      How to customize webpack and Babel
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
-    <img src={Colors} alt="colors" />
-    <span>
-      <strong>Styling</strong>
-      How to load and configure CSS libraries
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
-  >
-    <img src={Flow} alt="flow" />
-    <span>
-      <strong>Data</strong>
-      Providers and mocking for data libraries
-    </span>
-  </a>
-</div>
-
-<div className="subheading">Learn</div>
-
-<div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <img src={Repo} alt="repo" />
-    <span>
-      <strong>Storybook documentation</strong>
-      Configure, customize, and extend
-    </span>
-  </a>
-  <a className="link-item" href="https://www.learnstorybook.com" target="_blank">
-    <img src={Direction} alt="direction" />
-    <span>
-      <strong>In-depth guides</strong>
-      Best practices from leading teams
-    </span>
-  </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
-    <img src={Code} alt="code" />
-    <span>
-      <strong>GitHub project</strong>
-      View the source and add issues
-    </span>
-  </a>
-  <a className="link-item" href="https://discord.gg/UUt2PJb" target="_blank">
-    <img src={Comments} alt="comments" />
-    <span>
-      <strong>Discord chat</strong>
-      Chat with maintainers and the community
-    </span>
-  </a>
-</div>
-
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
-  <code>src/stories/Introduction.stories.mdx</code>
-</div>

package/src/stories/StyleGuide/Sprites.stories.mdx

@@ -1,25 +0,0 @@
-import { Canvas, Story, Meta } from '@storybook/addon-docs/blocks';
-
-import { SVG } from '../../ui'
-
-import { spritesMap } from './helpers.js'
-
-<Meta title="StyleGuide/Sprites" />
-
-
-# Sprites
-
-<div className="y-paragraph x-main3">
-  <Canvas>
-    { spritesMap.map((item) =>
-      item.targets.map((target) => 
-      <SVG
-        width="200"
-        height="200"
-        sprite={item.sprite}
-        target={target}
-        key={target}
-      />
-    ))}
-  </Canvas>
-</div>

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

@@ -1,27 +0,0 @@
-import { Meta,  } from '@storybook/addon-docs/blocks';
-
-import {
-  charList
-} from './helpers';
-
-<Meta title="StyleGuide/Icons/ai" />
-
-# AI Icons
-
-The icons are defined in [@pareto-engineering/assets/fonts/ai-icons.woff](https://github.com/HelloPareto/front/tree/development/packages/assets/fonts),
-imported and configured in [@pareto-engineering/styles/src/mixins/_font.scss](https://github.com/HelloPareto/front/blob/development/packages/styles/src/mixins/_font.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':'ai-icons', 'font-size':'2em' }}>
-{ letter }
-</div>
-</div>
-) }
-</div>

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

@@ -1,73 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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(--hard-${color})`,
-      `var(--${color})`,
-      `var(--soft-${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', '{', '|', '}', '~']
-
-const spritesMap = [
-  {
-    sprite :'/homepage.sprite.svg',
-    targets:['grow-faster', 'secret-superpower', 'women-led'],
-  },
-  {
-    sprite :'/illustrations.sprite.svg',
-    targets:['building-1', 'building-2', 'building-3', 'building-4', 'building-5', 'woman-1', 'woman-2', 'woman-3', 'man-1', 'man-2', 'man-3'],
-  },
-  {
-    sprite :'/solutions.sprite.svg',
-    targets:['custom-data', 'vetting', 'contact-gen', 'research', 'tracking'],
-  },
-]
-
-export {
-  brandMap,
-  // wheelMap,
-  modalsMap,
-  uiMap,
-  smMap,
-  monochromeMap,
-  charList,
-  spritesMap,
-}

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',
-  },
-]