@pareto-engineering/design-system 0.0.1-alpha.9 → 0.0.8-testing-id.0

package/src/stories/utils/lorem.js

@@ -0,0 +1,15 @@
+export default `Lorem ipsum dolor sit amet consectetur adipisicing elit. Est cupiditate temporibus quos officia, incidunt nesciunt dolorum eligendi, aspernatur voluptates sequi natus tempora autem molestias, illo reprehenderit mollitia. Voluptas, quaerat sequi?
+       Magnam excepturi impedit odit consectetur quaerat, provident, quod facere, ipsa distinctio quae expedita! Doloribus adipisci harum dicta nulla commodi cum incidunt dignissimos? Id accusantium quos ullam placeat necessitatibus. Mollitia, debitis?
+       Repudiandae odio alias odit vel voluptatibus officiis, quod praesentium adipisci, in optio voluptate magnam? Ab saepe maxime, corrupti dolore natus quis accusantium hic iste ullam harum repellat sint commodi cum?
+       Vero et accusamus voluptatibus exercitationem, perspiciatis nisi tempora, autem consectetur deserunt ex fugiat cum iure sed dolore, perferendis eos quia voluptate. Ratione autem minus quas iure dicta doloribus ad nulla!
+       Saepe, ipsum nisi impedit similique vel eligendi ex quidem ea rem officiis praesentium dolores ipsa sit cumque eaque distinctio soluta qui dolore veniam accusamus facilis voluptas minus. Animi, sequi necessitatibus?
+       Explicabo in nisi, id rerum omnis doloribus error! Delectus quasi consequuntur, adipisci tempore eaque, ad ipsa porro consectetur natus architecto iure aut aliquid tenetur totam unde illum saepe, ipsum deserunt!
+       Dicta assumenda odit eius tempora illo veniam ea ab enim? Maxime suscipit quae quas sunt eveniet tempora nesciunt, itaque aliquam deserunt culpa eius enim asperiores eum beatae dolore modi sit.
+       Exercitationem aliquid dicta dolorum sequi odit beatae vitae velit architecto, atque ratione quaerat distinctio eaque voluptatibus voluptate nihil, quibusdam porro, eveniet nostrum voluptas. Sed ex facere, illum dolorum soluta blanditiis.
+       Est possimus reprehenderit fugit asperiores dolores deserunt officia quo, sed dignissimos at inventore nulla officiis quaerat? Quia quam consequuntur aliquid! Laborum suscipit voluptate quod et officia dicta voluptatum odio impedit.
+       Voluptate blanditiis nobis cum non sunt nisi, magni dignissimos qui repellat facilis labore, commodi eveniet totam velit voluptatibus ipsa omnis delectus quod incidunt veniam. Quibusdam amet voluptatum eos reiciendis ullam!
+       Eaque quas laudantium repudiandae quidem similique totam delectus fugit, iusto a vero molestias placeat nisi aspernatur corporis blanditiis excepturi. Illo inventore consectetur ullam magnam labore minus a ex laboriosam iusto.
+       Mollitia deserunt modi neque asperiores temporibus cum quae numquam quidem! Quisquam sequi nisi sed accusamus velit consectetur omnis iusto. Laudantium omnis sunt eius laborum quia iusto minima excepturi officiis veniam.
+       Laboriosam laborum praesentium sunt molestias. Consectetur, fugit laudantium. Facilis odit illum deserunt beatae at alias. Quaerat, quam facere quis, iure autem veniam maiores impedit ea rerum, totam officiis eveniet eum.
+       Maxime, nostrum? Adipisci provident eius cupiditate necessitatibus similique debitis sed amet, suscipit doloribus dicta? Numquam optio mollitia facere eligendi, culpa quibusdam accusamus rerum minus iure, sequi, necessitatibus sunt quas ratione?
+       Delectus, sit architecto ab labore temporibus sunt reiciendis nihil. Ea quaerat numquam molestiae, nostrum, similique adipisci molestias esse beatae incidunt vero ex tempora! Recusandae temporibus, vero saepe fugiat voluptatem asperior`

package/src/stories/utils/relay/EnvironmentProvider.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { RelayEnvironmentProvider } from 'react-relay/hooks'
+
+import environment from './environment'
+
+const RelayEnvProvider = (props) => (
+  <RelayEnvironmentProvider
+    environment={environment}
+    // history={history}
+    {...props}
+  />
+)
+
+export default RelayEnvProvider

package/src/stories/utils/relay/environment.js

@@ -0,0 +1,5 @@
+import { createMockEnvironment } from 'relay-test-utils'
+
+const environment = createMockEnvironment()
+
+export default environment

package/src/stories/utils/relay/index.js

@@ -0,0 +1,4 @@
+export { default as RelayEnvironmentProvider } from './EnvironmentProvider'
+export { default as environment } from './environment'
+export { default as mockResolvers } from './mockResolvers'
+export { default as mockRelayOperation } from './mockRelayOperation'

package/src/stories/utils/relay/mockRelayOperation.js

@@ -0,0 +1,14 @@
+import { MockPayloadGenerator } from 'relay-test-utils'
+import relayEnvironment from './environment'
+import mockResolvers from './mockResolvers'
+
+function mockRelayOperation(overrideMockResolvers = null) {
+  relayEnvironment.mock.queueOperationResolver(
+    (operation) => MockPayloadGenerator.generate(
+      operation,
+      overrideMockResolvers || mockResolvers,
+    ),
+  )
+}
+
+export default mockRelayOperation

package/src/stories/utils/relay/mockResolvers.js

@@ -0,0 +1,299 @@
+const customMockResolvers = {
+  String  :() => 'Test string',
+  UserNode:() => ({
+    id         :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+    firstName  :'Collins',
+    isSuperuser:false,
+  }),
+  TaskNode:() => ({
+    id    :'VGFza05vZGU6MDAwZmQ4N2UtYjNlNS00NWE5LTg5ZjEtNWI0ZDViNWE2NTlj',
+    title :'Task1',
+    status:{
+      id    :'VGFza1N0YXR1c05vZGU6OTczYmM4NTgtMzA0NC00NWNiLTg2MDQtYTRhM2JmNjFmZjEx',
+      status:'In Review',
+    },
+    requester:{
+      id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+      firstName:'Collins',
+    },
+    userTeam:{
+      id  :'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+      name:'Team 1',
+    },
+    manager:{
+      id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+      firstName:'manager',
+    },
+    createdAt  :'2021-09-23',
+    dueDate    :'2021-10-30',
+    requestDate:'2020-01-01',
+    description:'First task',
+  }),
+  TeamNode:() => ({
+    id          :'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+    name        :'Team 1',
+    credits     :20.12,
+    billingEmail:'team1@hellopareto.com',
+    hourlyRate  :20,
+    partner     :{
+      firstName:'Test1',
+      lastName :'assd',
+    },
+
+  }),
+  GroupNode:() => ({
+    id  :'VGFza05vZGU6MDAwZmQ4N2UtYjNlNS00NWE5LTg5ZjEtNWI0ZDViNWE2NTlk',
+    name:'admin',
+  }),
+  TaskNodeConnection:() => ({
+    pageInfo:{
+      hasNextPage    :true,
+      hasPreviousPage:true,
+    },
+    edges:[
+      {
+        node:{
+          id    :'VGFza05vZGU6MDAwZmQ4N2UtYjNlNS00NWE5LTg5ZjEtNWI0ZDViNWE2NTlj',
+          title :'Task1',
+          status:{
+            id    :'VGFza1N0YXR1c05vZGU6OTczYmM4NTgtMzA0NC00NWNiLTg2MDQtYTRhM2JmNjFmZjEx',
+            status:'In Review',
+          },
+          requester:{
+            id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+            firstName:'Collins',
+          },
+          userTeam:{
+            id  :'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+            name:'Team 1',
+          },
+          manager:{
+            id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+            firstName:'manager',
+          },
+          createdAt  :'2021-09-23',
+          dueDate    :'2021-10-30',
+          requestDate:'2020-01-01',
+          description:'First task',
+        },
+      },
+      {
+        node:{
+          id    :'VGFza05vZGU6MDAwZmQ4N2UtYjNlNS00NWE5LTg5ZjEtNWI0ZDViNWE2NTlj',
+          title :'Task2',
+          status:{
+            id    :'VGFza1N0YXR1c05vZGU6OTczYmM4NTgtMzA0NC00NWNiLTg2MDQtYTRhM2JmNjFmZjEx',
+            status:'In Review',
+          },
+          requester:{
+            id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+            firstName:'Collins',
+          },
+          userTeam:{
+            id  :'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+            name:'Team 2',
+          },
+          manager:{
+            id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+            firstName:'manager',
+          },
+          createdAt  :'2021-09-23',
+          dueDate    :'2021-10-30',
+          requestDate:'2020-01-01',
+          description:'Second task',
+        },
+      },
+    ],
+  }),
+  UserNodeConnection:(allArgs) => {
+    const { args :{ first, offset } } = allArgs
+
+    const edges = [
+      {
+        node:{
+          id       :'VXNlck5vZGU6OTZkZTA3M2MtNTE3Ni00ZjgyLTg4OWMtMzIwYmVmYzU5ODFj',
+          firstName:'Collins',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6MDEyN2E1NmItYjAxOS00NmQxLTg2NTEtYWEzOGIxZTUwNTA5',
+          firstName:'Amritha',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6YzcwYWIxMDItZWE2Yy00ZWNhLTk0M2ItOTA2OWQwN2RiMDQ0',
+          firstName:'Marsya',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6OTUyNjg1NWYtZTg3NC00ZTlkLWFlZTgtZDZjODc3NDNlNTRh',
+          firstName:'James',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6OTFmOTE4NTYtNjg0Yi00ODhhLWE0YzktZGU5ZDQ5YmJjM2Mz',
+          firstName:'Adrian',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6OTNkZGU3NGEtYTA2Yi00MDMzLWIwMDAtMTFkZDY0N2Y3OWE4',
+          firstName:'Melissa',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6MjgyYTk1MjctMDI4OS00MDlhLWFjNTktYWJkNTFkODAyMjFj',
+          firstName:'Beto',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6YmIxYzI5YmEtYTk0OS00M2I3LWIxMWEtZDQxMjM5ZWI0ZWI2',
+          firstName:'Romie',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6ZjZhNzBiZTgtY2FkMC00NzNjLWEyODUtNDdkMGVmYjQxYTRl',
+          firstName:'Miguel',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6Y2JlOGM4ZTYtY2Q2Zi00M2RlLWI4YmQtODU3YWRhZjYyMzVj',
+          firstName:'Phoebe',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6NDA5MWM1MDUtYjY1MC00M2Y1LTg3NTEtMDc1NTBkMzJhYTcy',
+          firstName:'Kim',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6ZjE0MGUxYTItM2I4My00NmY1LWIzMDQtYmFiOGZjMTc5ZmU4',
+          firstName:'Liz',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6ZGYyOGE5MDYtM2NhMS00NTVmLWIzZmUtNjY5YWFkZTNiZjRk',
+          firstName:'Deepanshu',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6MjBhMDBkYjgtZDExNi00YzAyLWEyOTUtYWM5MzIwMjUwMWU3',
+          firstName:'Jennica',
+        },
+      },
+      {
+        node:{
+          id       :'VXNlck5vZGU6MjczNDllYjMtYzNmYi00ZmVkLWE1N2YtNTFjZGJlODI0MWU2',
+          firstName:'Michelle',
+        },
+      },
+    ]
+
+    return ({
+      pageInfo:{
+        hasNextPage    :true,
+        hasPreviousPage:true,
+      },
+      edges:edges.slice(offset, offset + first),
+    })
+  },
+  WorkHoursNodeConnection:() => ({
+    pageInfo:{
+      hasNextPage    :true,
+      hasPreviousPage:true,
+    },
+    edges:[
+      {
+        node:{
+          id       :'V29ya0hvdXJzTm9kZTplYWJlYmEyNC0wNTlmLTQxMjEtODIzYi0yYmU2YzMxMmZlNzA=',
+          associate:{
+            firstName:'Des',
+            lastName :'assd',
+          },
+          timeSpent  :15,
+          log        :'asd',
+          paidOut    :false,
+          sentInvoice:true,
+          createdAt  :'2021-09-05T17:08:49.000-0430',
+          startedAt  :'2021-09-05T17:08:49.000-0430',
+        },
+      },
+      {
+        node:{
+          id       :'V29ya0hvdXJzTm9kZTplYmZiZTllZS04NWNkLTRhNDktYTZhMi0zNmNhMTU0M2EwMDU=',
+          associate:{
+            firstName:'Ella',
+            lastName :'asdasd',
+          },
+          timeSpent  :25,
+          log        :'aasdasdsd',
+          paidOut    :true,
+          sentInvoice:false,
+          createdAt  :'2021-09-15T17:08:49.000-0430',
+          startedAt  :'2021-09-15T17:08:49.000-0430',
+        },
+      },
+    ],
+  }),
+  TeamNodeConnection:() => ({
+    pageInfo:{
+      hasNextPage    :true,
+      hasPreviousPage:true,
+    },
+    edges:[
+      {
+        node:{
+          id          :'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+          name        :'Team 1',
+          credits     :20.12,
+          billingEmail:'team1@hellopareto.com',
+          hourlyRate  :20,
+          partner     :{
+            firstName:'Test1',
+            lastName :'assd',
+          },
+        },
+      },
+      {
+        node:{
+          id          :'VGVhbU5vZGU6MDA0N2U4MzktODY0Zi00N2U5LTg3ZjgtZGUwMmM2Yzg1YWJm',
+          name        :'Team 2',
+          credits     :20.12,
+          billingEmail:'team2@hellopareto.com',
+          hourlyRate  :20,
+          partner     :{
+            firstName:'Test2',
+            lastName :'assd',
+          },
+        },
+      },
+      {
+        node:{
+          id          :'VGVhbU5vZGU6MDExMmEyZmEtYzE0YS00MGRhLThiNWQtMDMzNTkyNDQ3ZDI2',
+          name        :'Team 3',
+          credits     :20.12,
+          billingEmail:'team3@hellopareto.com',
+          hourlyRate  :20,
+          partner     :{
+            firstName:'Test3',
+            lastName :'assd',
+          },
+        },
+      },
+    ],
+  }),
+}
+
+export default customMockResolvers

package/src/stories/utils/testData.js

@@ -0,0 +1,63 @@
+export const fruits = [
+  'Apple',
+  'Apricot',
+  'Avocado',
+  'Banana',
+  'Bilberry',
+  'Blackberry',
+  'Blackcurrant',
+  'Blueberry',
+  'Currant',
+  'Cherry',
+  'Cherimoya',
+  'Clementine',
+  'Date',
+  'Damson',
+  'Durian',
+  'Eggplant',
+  'Elderberry',
+  'Feijoa',
+  'Gooseberry',
+  'Grape',
+  'Grapefruit',
+  'Guava',
+  'Huckleberry',
+  'Jackfruit',
+  'Jambul',
+  'Kiwi fruit',
+  'Kumquat',
+  'Legume',
+  'Lemon',
+  'Lime',
+  'Lychee',
+  'Mango',
+  'Mangostine',
+  'Melon',
+  'Cantaloupe',
+  'Honeydew melon',
+  'Rock melon',
+  'Nectarine',
+  'Orange',
+  'Peach',
+  'Pear',
+  'Williams pear or Bartlett pear',
+  'Pitaya',
+  'Physalis',
+  'Plum/prune (dried plum)',
+  'Pineapple',
+  'Pomegranate',
+  'Raisin',
+  'Raspberry',
+  'Western raspberry (blackcap)',
+  'Rambutan',
+  'Redcurrant',
+  'Salal berry',
+  'Satsuma',
+  'Star fruit',
+  'Strawberry',
+  'Tangerine',
+  'Tomato',
+  'Ugli fruit',
+  'Watermelon',
+  'Ziziphus mauritiana',
+]

package/src/ui/a/Alert/Alert.jsx

@@ -0,0 +1,144 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useState, useEffect, useLayoutEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import { Button } from 'ui/b'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'alert'
+
+/**
+ * This is the component description.
+ */
+const Alert = ({
+  id,
+  className:userClassName,
+  style,
+  children,
+  type,
+  withCloseIcon,
+  primaryPosition,
+  secondaryPosition,
+  autoCloseMs,
+  width,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const [hideAlert, setHideAlert] = useState(false)
+
+  const handleCloseAlert = () => setHideAlert(true)
+
+  useEffect(() => {
+    if (autoCloseMs) {
+      setTimeout(() => {
+        setHideAlert(true)
+      }, autoCloseMs)
+    }
+  }, [autoCloseMs])
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+        `x-${type}`,
+        hideAlert && 'hide',
+        primaryPosition,
+        secondaryPosition,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={{
+        ...style,
+        '--width':width,
+      }}
+      // {...otherProps}
+    >
+      <div className="bar" />
+      {withCloseIcon && (
+      <div className="close">
+        <Button isSimple color="heading" onClick={handleCloseAlert}>
+          <span className="f-icons">Y</span>
+        </Button>
+      </div>
+      )}
+      <div className="content">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+Alert.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id:PropTypes.string,
+
+  /**
+   * The HTML class names for this element
+   */
+  className:PropTypes.string,
+
+  /**
+   * The React-written, css properties for this element.
+   */
+  style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The children JSX
+   */
+  children:PropTypes.node,
+
+  /**
+   *  Whether the alert should have a close Icon
+   */
+  withCloseIcon:PropTypes.bool,
+
+  /**
+   *  The primary position of the alert
+   */
+  primaryPosition:PropTypes.oneOf(['top', 'bottom', 'center']),
+
+  /**
+   *  The secondary position of the alert
+   */
+  secondaryPosition:PropTypes.oneOf(['left', 'right']),
+
+  /**
+   *  The number milisseconds to wait for before closing the alert
+   */
+  autoCloseMs:PropTypes.number,
+
+  /**
+   *  The type of the alert
+   */
+  type:PropTypes.oneOf(['success', 'warning', 'error']),
+
+  /**
+   *  The width of the alert
+   */
+  width:PropTypes.number,
+}
+
+Alert.defaultProps = {
+  withCloseIcon  :true,
+  primaryPosition:'top',
+}
+
+export default Alert

package/src/ui/a/Alert/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as Alert } from './Alert'

package/src/ui/a/Alert/styles.scss

@@ -0,0 +1,74 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-padding: 1em;
+$default-bar-height: .3em;
+$default-alert-desktop-width: var(--width, 30em);
+
+.#{bem.$base}.alert {
+    border: var(--theme-border);
+    padding-bottom: $default-padding * 1.5;
+    width: 100%;
+    position: absolute;
+    z-index: 1;
+
+    &.center {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    &.top {
+        top: 0;
+    }
+
+    &.bottom {
+        bottom: 0;
+    }
+
+    &.right {
+        right: 0;
+    }
+
+    &.left {
+        left: 0;
+    }
+
+    &.hide {
+        display: none;
+    }
+
+    >.bar {
+        background-color: var(--x);
+        height: $default-bar-height;
+    }
+
+    >.close {
+        display: flex;
+        justify-content: flex-end;
+
+        span {
+            padding: $default-padding / 2;
+            font-size: calc(var(--s-2) * 1em);
+        }
+    }
+
+    .bar+.content {
+        padding-top: $default-padding * 1.5;
+    }
+
+    >.content {
+        padding-inline: $default-padding;
+
+        .icon {
+            color: var(--x)
+        }
+    }
+
+    // Desktop styles
+    @include mixins.media($from: $sm-md) {
+        width: $default-alert-desktop-width;
+    }
+}