@pareto-engineering/design-system 3.0.0-alpha.29 → 4.0.0-alpha.13

package/package.json

@@ -1,109 +1,71 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "3.0.0-alpha.29",
+  "version": "4.0.0-alpha.13",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
   "scripts": {
-    "storybook": "start-storybook --no-manager-cache -p 6006 -s ./src/assets/images,../../node_modules/@pareto-engineering/assets/images,../../node_modules/@pareto-engineering/assets/fonts",
-    "build-storybook": "build-storybook -s ./src/assets/images,../../node_modules/@pareto-engineering/assets/images,../../node_modules/@pareto-engineering/assets/fonts",
-    "vercel-build": "build-storybook --quiet -o public",
-    "copy-css:cjs": "copyfiles -u 2 src/ui/**/*.scss dist/cjs",
-    "copy-css:es": "copyfiles -u 2 src/ui/**/*.scss dist/es",
-    "compile:cjs": "COMPILE_ENV=cjs babel src/ui --extensions '.js,.jsx' --out-dir dist/cjs",
-    "compile:es": "COMPILE_ENV=es babel src/ui --extensions '.js,.jsx' --out-dir dist/es",
-    "build:cjs": "npm run compile:cjs && npm run copy-css:cjs",
-    "build:es": "npm run compile:es && npm run copy-css:es",
-    "compile": "npm run build:es && npm run build:cjs",
-    "chromatic": "chromatic --project-token=b63af653a850",
-    "prepare": "npm run compile",
-    "prepare:watch": "nodemon --watch src --ignore 'src/stories' --exec  'npm run build:es' && echo done",
-    "postinstall:old": "node ../../scripts/postinstall.js",
-    "upgrade": "../../scripts/upgrade.sh",
     "test": "npm run test:stylelint && npm run test:eslint && npm run test:jest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "testconfig:stylelint": "stylelint src/local.scss",
     "testconfig:eslint": "eslint src/**/*.jsx",
     "test:jest": "jest",
     "test:jest:update": "jest --updateSnapshot",
     "test:eslint": "eslint --ext .jsx,.js src/",
-    "test:stylelint": "stylelint src/**/*.scss --rd --rdd --risd --color --formatter verbose",
+    "test:stylelint": "stylelint 'src/**/*.scss' --rd --rdd --risd --color --formatter verbose",
     "fix:stylelint": "npm run test:stylelint -- --fix",
     "fix:eslint": "npm run test:eslint -- --fix",
-    "link:assets": "npm link @pareto-engineering/assets",
-    "link:bem": "npm link @pareto-engineering/bem",
-    "link:styles": "npm link @pareto-engineering/styles",
-    "link:all": "npm run link:bem && npm run link:styles && npm run link:assets",
-    "relay": "relay-compiler",
-    "fetch-schema:prod": "node ../../scripts/fetchSchema.js -- --ref production",
-    "fetch-schema": "npm run fetch-schema:prod"
+    "copy-css:cjs": "copyfiles -u 2 src/ui/**/*.scss dist/cjs",
+    "copy-css:es": "copyfiles -u 2 src/ui/**/*.scss dist/es",
+    "compile:cjs": "TARGET=cjs babel src/ui --extensions '.js,.jsx' --out-dir dist/cjs",
+    "compile:es": "TARGET=es babel src/ui --extensions '.js,.jsx' --out-dir dist/es",
+    "build:cjs": "npm run compile:cjs && npm run copy-css:cjs",
+    "build:es": "npm run compile:es && npm run copy-css:es",
+    "compile": "npm run build:es && npm run build:cjs",
+    "prepare": "npm run compile"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@babel/cli": "^7.14.5",
-    "@babel/core": "^7.14.6",
-    "@babel/preset-env": "^7.14.7",
-    "@babel/preset-react": "^7.14.5",
-    "@mdx-js/react": "^2.2.1",
-    "@pareto-engineering/eslint-config": "^3.0.0-alpha.29",
-    "@pareto-engineering/stylelint-config": "^3.0.0-alpha.29",
-    "@storybook/addon-actions": "^6.3.3",
-    "@storybook/addon-essentials": "^6.3.3",
-    "@storybook/addon-links": "^6.3.3",
-    "@storybook/addon-storyshots": "^6.3.3",
-    "@storybook/builder-webpack5": "^6.5.15",
-    "@storybook/manager-webpack5": "^6.5.15",
-    "@storybook/mdx2-csf": "^0.0.3",
-    "@storybook/react": "^6.3.3",
-    "babel-jest": "^27.0.6",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "babel-plugin-relay": "^13.2.0",
-    "chromatic": "^5.9.2",
+    "@babel/cli": "^7.21.0",
+    "@pareto-engineering/eslint-config": "*",
+    "@pareto-engineering/stylelint-config": "*",
+    "@storybook/addon-essentials": "^7.0.6",
+    "@storybook/addon-interactions": "^7.0.6",
+    "@storybook/addon-links": "^7.0.6",
+    "@storybook/addon-storyshots": "^7.0.6",
+    "@storybook/blocks": "^7.0.6",
+    "@storybook/react": "^7.0.6",
+    "@storybook/react-webpack5": "^7.0.6",
+    "@storybook/testing-library": "^0.1.0",
+    "babel-plugin-relay": "^15.0.0",
     "copyfiles": "^2.4.1",
-    "css-mqpacker": "^7.0.0",
-    "cssnano": "^5.0.6",
-    "faker": "^5.5.3",
-    "graphql": "^15.8.0",
+    "css-loader": "^6.7.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.0.6",
-    "jsonlint": "^1.6.3",
-    "nodemon": "^2.0.9",
-    "postcss": "^8.3.5",
-    "postcss-cli": "^8.3.1",
-    "postcss-preset-env": "^6.7.0",
-    "postcss-scss": "^4.0.0",
-    "relay-compiler": "^11.0.2",
-    "relay-config": "^11.0.2",
-    "sass": "^1.35.1",
-    "sass-loader": "=10.1.1",
-    "storybook-addon-themes": "^6.1.0",
-    "webpack": "^5.75.0"
+    "jest-environment-jsdom": "^29.5.0",
+    "sass-loader": "^13.2.2",
+    "storybook": "^7.0.6",
+    "style-loader": "^3.3.2"
   },
   "dependencies": {
-    "@pareto-engineering/assets": "^3.0.0-alpha.29",
-    "@pareto-engineering/bem": "^3.0.0-alpha.29",
-    "@pareto-engineering/styles": "^3.0.0-alpha.29",
-    "date-fns": "^2.22.1",
-    "downshift": "^6.1.7",
+    "@pareto-engineering/assets": "^4.0.0-alpha.11",
+    "@pareto-engineering/bem": "^4.0.0-alpha.11",
+    "@pareto-engineering/styles": "^4.0.0-alpha.13",
+    "date-fns": "^2.29.3",
+    "downshift": "^6.1.12",
     "formik": "^2.2.9",
-    "hamburgers": "^1.1.3",
+    "hamburgers": "^1.2.1",
     "lodash": "^4.17.21",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-countup": "^4.4.0",
-    "react-dom": "^17.0.2",
-    "react-helmet": "^6.1.0",
-    "react-relay": "^11.0.2",
-    "react-router-dom": "^5.2.0",
-    "react-visibility-sensor": "^5.1.1",
-    "relay-runtime": "^11.0.2",
-    "relay-test-utils": "^11.0.2",
-    "style-loader": "^3.3.1",
-    "swiper": "^6.7.5",
-    "typed.js": "^2.0.12"
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0",
+    "react-relay": "^15.0.0",
+    "react-router-dom": "^5.3.4",
+    "relay-test-utils": "^15.0.0"
   },
-  "browserslist": "> 2%, not ie > 0, not opera > 0, not op_mini > 0",
-  "gitHead": "f4943cacda9688d55d7e496f955c6f388102d16d"
+  "browserslist": "> 2%",
+  "gitHead": "d571c08a1a329aeaa3ed92d1ee298f1977d438ad"
 }

package/src/stories/a/MetaCard.stories.jsx

@@ -0,0 +1,35 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { MetaCard } from 'ui'
+
+export default {
+  title        :'a/MetaCard',
+  component    :MetaCard,
+  subcomponents:{},
+  decorators   :[],
+  controls     :{
+    hasBackgroundBlur:{ type: 'boolean' },
+  },
+}
+
+const Template = (args) => (
+  <div style={{ backgroundImage: 'linear-gradient(purple, white)', padding: '1em' }}>
+    <MetaCard {...args}>
+      <h3 style={{ gridColumn: '2/-1' }}>
+        Column 2
+      </h3>
+      <p style={{ gridColumn: '3/-1' }}>
+        Column 3
+      </p>
+    </MetaCard>
+  </div>
+)
+
+export const Base = Template.bind({})
+Base.args = {}
+
+export const WithBlur = Template.bind({})
+WithBlur.args = {
+  hasBackgroundBlur:true,
+}

package/src/stories/a/TextSteps.stories.jsx

@@ -0,0 +1,19 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { TextSteps } from 'ui'
+
+export default {
+  title    :'a/TextSteps',
+  component:TextSteps,
+}
+
+const items = [
+  'Join Pareto in minutes. Share your business goals to match with a Project Partner.',
+  'Receive initial output in 24 hours. Give feedback to fine-tune results and level up your Pareto team.',
+  'Tap into economies of scale with tried and true playbooks: Benefit from strategic project recommendations. Enjoy continuous workflow improvement and documented learnings.',
+]
+
+export const Base = () => (
+  <div className="grid span-8 md-span-14"><TextSteps items={items} /></div>
+)

package/src/stories/a/Tip.stories.jsx

@@ -0,0 +1,28 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Tip } from 'ui'
+
+export default {
+  title        :'a/Tip',
+  component    :Tip,
+  subcomponents:{
+    // Item:Quote.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    color:{ control: 'color' },
+  },
+}
+
+const Template = (args) => (
+  <Tip {...args} />
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  children:'Remember to wash your vegetables before eating them.',
+  color   :'main',
+}

package/src/stories/b/{Button.stories.jsx → Button/Button.stories.jsx}

@@ -19,6 +19,7 @@ export default {
     isGhost   :{ control: { type: 'boolean' } },
     isSimple  :{ control: { type: 'boolean' } },
     isAnimated:{ control: { type: 'boolean' } },
+    isGradient:{ control: { type: 'boolean' } },
   },
 }
 
@@ -57,6 +58,11 @@ Simple.args = {
   isSimple:true,
 }
 
+export const Gradient = MultipleTemplate.bind({})
+Gradient.args = {
+  isGradient:true,
+}
+
 export const Compact = MultipleTemplate.bind({})
 Compact.args = {
   isCompact:true,
@@ -105,3 +111,12 @@ ArrowRightSimple.args = {
   arrowDirection:'right',
   isSimple      :true,
 }
+
+const GroupTemplate = (args) => (
+  <Button.Group {...args}>
+    <MultipleTemplate />
+  </Button.Group>
+)
+
+export const ButtonGroup = GroupTemplate.bind({})
+ButtonGroup.args = {}

package/src/stories/b/Button/Group.stories.jsx

@@ -0,0 +1,35 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Button } from 'ui'
+
+import { ALL_COLORS } from 'stories/colors'
+
+export default {
+  title     :'b/Button/Group',
+  component :Button.Group,
+  decorators:[
+    // (storyfn) => <Router>{storyfn()}</Router>,
+  ],
+  argTypes:{
+  },
+}
+
+const Template = (args) => (
+  <Button.Group {...args}>
+    {
+      ALL_COLORS.map((colorName) => (
+        <Button {...args} color={colorName} key={colorName}>
+          This is a
+          {' '}
+          {colorName}
+          {' '}
+          button
+        </Button>
+      ))
+    }
+  </Button.Group>
+)
+
+export const Base = Template.bind({})
+Base.args = {}

package/src/stories/b/Card/Card.stories.jsx

@@ -0,0 +1,59 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Card } from 'ui'
+
+export default {
+  title        :'b/Card',
+  component    :Card,
+  subcomponents:{
+    'Card.Section':Card.Section,
+    'Card.Group'  :Card.Group,
+  },
+  decorators:[
+    // (storyfn) => <Router>{storyfn()}</Router>,
+  ],
+  argTypes:{
+    progress:{ control: 'number' },
+  },
+}
+
+const Template = ({ isImage, ...args }) => (
+  <Card
+    {...args}
+  >
+    { isImage && (
+      <Card.Section isImage>
+        <img src="https://miro.medium.com/max/1124/1*v9We8Bevk2FFA5YadZNwcQ.jpeg" alt="test" />
+      </Card.Section>
+    )}
+    <Card.Section>
+      <h1>
+        Section One
+      </h1>
+    </Card.Section>
+    <Card.Section>
+      <h2>
+        Section Two
+      </h2>
+    </Card.Section>
+    <Card.Section>
+      <h3>
+        Section Three
+      </h3>
+    </Card.Section>
+  </Card>
+)
+
+export const Base = Template.bind({})
+Base.args = {}
+
+export const CardWithProgress = Template.bind({})
+CardWithProgress.args = {
+  progress:50,
+}
+
+export const CardWithImageSection = Template.bind({})
+CardWithImageSection.args = {
+  isImage:true,
+}

package/src/stories/b/Card/Group.stories.jsx

@@ -0,0 +1,59 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Card } from 'ui'
+
+export default {
+  title     :'b/Card/Group',
+  component :Card.Group,
+  decorators:[
+    // (storyfn) => <Router>{storyfn()}</Router>,
+  ],
+  argTypes:{
+    type       :{ control: 'select', options: ['vertical-flexbox', 'grid', 'snap-scroller'] },
+    desktopType:{ control: 'select', options: ['vertical-flexbox', 'grid'] },
+  },
+}
+
+const Template = ({ ...args }) => (
+  <Card.Group
+    className="span-8"
+    {...args}
+  >
+    <Card className="span-2">
+      <Card.Section>
+        <h1>
+          Span Two on Grid
+        </h1>
+      </Card.Section>
+    </Card>
+    <Card>
+      <Card.Section>
+        <h1>
+          Card Two
+        </h1>
+      </Card.Section>
+    </Card>
+    <Card>
+      <Card.Section>
+        <h1>
+          Card Three
+        </h1>
+      </Card.Section>
+    </Card>
+  </Card.Group>
+)
+
+export const Base = Template.bind({})
+Base.args = {}
+
+export const CardGroupGridOnDesktop = Template.bind({})
+CardGroupGridOnDesktop.args = {
+  desktopType:'grid',
+}
+
+export const CardGroupNotSnapScroller = Template.bind({})
+CardGroupNotSnapScroller.args = {
+  type       :'vertical-flexbox',
+  desktopType:'vertical-flexbox',
+}

package/src/stories/b/Page.stories.jsx

@@ -1,7 +1,12 @@
 /* @pareto-engineering/generator-front 1.0.0 */
 import * as React from 'react'
 
-import { Page } from 'ui'
+import {
+  Page,
+  // AnimatedGradient,
+  // AnimatedBlobs,
+} from 'ui'
+import { HelmetProvider } from 'react-helmet-async'
 
 export default {
   title        :'b/Page',
@@ -11,7 +16,7 @@ export default {
     'Page.Section':Page.Section,
   },
   decorators:[
-    // storyfn => <div className="">{ storyfn() }</div>,
+    (storyfn) => <HelmetProvider>{ storyfn() }</HelmetProvider>,
   ],
   argTypes:{
     id      :{ control: 'text' },
@@ -51,9 +56,21 @@ export const WithSections = () => (
     <Page.Section id="s1">
       Section 1
     </Page.Section>
-    <Page.Section id="s2">
+    <Page.Section id="s2" spaced className="x-main b-x">
       Section 2.
-      Inspect source for details.
+      This section is spaced
     </Page.Section>
   </Page>
 )
+
+// Story is commented out due to snapshots and animations
+// export const WithAnimatedBlobsBackground = () => (
+//   <Page
+//     id="with-sections"
+//     Background={AnimatedBlobs}
+//   >
+//     <Page.Section id="s1">
+//       Section 1
+//     </Page.Section>
+//   </Page>
+// )

package/src/stories/colors.js

@@ -1,4 +1,6 @@
 const THEME = [
+  'main',
+  'interactive',
   'main1',
   'main2',
   'main3',
@@ -27,12 +29,10 @@ const MODALS = [
 ]
 
 const UI = [
-  'background1',
-  'background2',
-  'background3',
-  'background4',
-  'background5',
-  'background6',
+  'background-far',
+  'background-near',
+  'background-cards',
+  'background-mesh',
   'heading',
   'paragraph',
   'subtitle',

package/src/stories/f/SelectInput.stories.jsx

@@ -78,3 +78,10 @@ DisabledSelectInput.args = {
   ...Base.args,
   disabled:true,
 }
+
+export const DisabledWithDescriptionSelectInput = Template.bind({})
+DisabledWithDescriptionSelectInput.args = {
+  ...Base.args,
+  disabled   :true,
+  description:'This is a description',
+}

package/src/stories/f/TextInput.stories.jsx

@@ -16,7 +16,7 @@ export default {
   decorators:[
     (storyfn) => (
       <Formik
-        initialValues={{ firstName: '', date: '', time: '' }}
+        initialValues={{ email: '', name: '', company: '' }}
       >
         <Form>
 
@@ -47,8 +47,8 @@ const Template = (args) => (
 
 export const Base = Template.bind({})
 Base.args = {
-  name :'firstName',
-  label:"What's your first name ?",
+  name :'email',
+  label:'How can we reach you ?',
 }
 
 export const Optional = Template.bind({})
@@ -76,7 +76,7 @@ WithValidation.args = {
 export const WithPlaceholder = Template.bind({})
 WithPlaceholder.args = {
   ...Base.args,
-  placeholder:'First Name',
+  placeholder:'Email address',
 }
 
 export const WithAutoCompleteOff = Template.bind({})

package/src/stories/original/Button.jsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import './button.css'
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+  primary, backgroundColor, size, label, ...props
+}) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'
+  const [state, setState] = useState('not clicked')
+  return (
+    <button
+      type="button"
+      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      style={backgroundColor && { backgroundColor }}
+      {...props}
+      onClick={() => setState('clicked')}
+    >
+      { state }
+      {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,
+}
+
+Button.defaultProps = {
+  backgroundColor:null,
+  primary        :false,
+  size           :'medium',
+  onClick        :undefined,
+}

package/src/stories/original/Button.stories.js

@@ -0,0 +1,39 @@
+import { Button } from './Button'
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+export default {
+  title    :'Example/Button',
+  component:Button,
+  tags     :['autodocs'],
+  argTypes :{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/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',
+  },
+}