@pareto-engineering/design-system 2.0.0-alpha.43 → 2.0.0-alpha.44

package/scripts/fetchSchema.js

@@ -0,0 +1,74 @@
+const https = require('https')
+const fs = require('fs')
+
+require('dotenv').config({ path: '.env.scripts' })
+
+const {
+  GITHUB_BACKEND_ORG,
+  GITHUB_BACKEND_REPO,
+  GITHUB_READONLY_PAT,
+  DEBUG,
+} = process.env
+
+const isDebug = DEBUG === 'True'
+
+const host = 'api.github.com'
+const contentEndpoint = `/repos/${GITHUB_BACKEND_ORG}/${GITHUB_BACKEND_REPO}/contents/schema.graphql`
+const authToken = GITHUB_READONLY_PAT
+
+const defaultBranch = 'development'
+const indexOfRefArg = process.argv.findIndex((arg) => arg === '--ref')
+const selectedRef = (indexOfRefArg > -1) ? process.argv[indexOfRefArg + 1] : defaultBranch
+
+const filename = 'schema.graphql'
+
+const processContent = (data) => {
+  if (data.content) {
+    if (isDebug) {
+      console.log(Buffer.from(data.content, 'base64').toString('utf-8'))
+    }
+    fs.writeFile(filename, Buffer.from(data.content, 'base64'), 'utf8', (err) => {
+      if (err) {
+        console.log(err)
+      } else {
+        console.log(`${filename} successfully saved`)
+      }
+    })
+  } else {
+    console.error('Error in downloading the schema.')
+  }
+}
+
+function performRequest(success) {
+  console.log(`Fetching schema from ref=${selectedRef}`)
+  const options = {
+    host,
+    path   :`${contentEndpoint}?ref=${selectedRef}`,
+    method :'GET',
+    headers:{
+      Authorization:`token ${authToken}`,
+      'User-Agent' :'Nodejs CI script',
+    },
+  }
+
+  const req = https.request(options, (res) => {
+    res.setEncoding('utf-8')
+
+    let responseString = ''
+
+    res.on('data', (data) => {
+      responseString += data
+    })
+
+    res.on('end', () => {
+      // console.log(responseString)
+      const responseObject = JSON.parse(responseString)
+      success(responseObject)
+    })
+  })
+
+  // req.write()
+  req.end()
+}
+
+performRequest(processContent)

package/src/__snapshots__/Storyshots.test.js.snap

@@ -2663,7 +2663,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  in 6 months
+  in 4 months
 </p>
 `;
 
@@ -10361,7 +10361,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base select-input form-input y-background2"
   >
     <label
-      className="base label input-label x-main2"
+      className="base label x-main2"
       htmlFor="food"
     >
       What do you want for dinner ?
@@ -10550,7 +10550,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base select-input form-input y-background2"
   >
     <label
-      className="base label input-label x-main2"
+      className="base label x-main2"
       htmlFor="food"
     >
       What do you want for dinner ?
@@ -11995,7 +11995,7 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label input-label x-main2"
+      className="base label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -12059,7 +12059,7 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label input-label x-main2"
+      className="base label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -12135,7 +12135,7 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label input-label x-main2"
+      className="base label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -12193,7 +12193,7 @@ exports[`Storyshots f/fields/SelectInput Required Select 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label input-label x-main2"
+      className="base label x-main2"
       htmlFor="activity"
     >
       Activity Type
@@ -12251,7 +12251,7 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label input-label x-main2"
+      className="base label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -12674,3 +12674,5 @@ exports[`Storyshots f/fields/TextareaInput Validation 1`] = `
 exports[`Storyshots r/SwitchRouteMap Base 1`] = `"This component does not need a visual test."`;
 
 exports[`Storyshots r/common/PrivateRoute Base 1`] = `"This component does not need a visual test."`;
+
+exports[`Storyshots test/QueryLoader Base 1`] = `null`;

package/src/stories/test/QueryLoader.stories.jsx

@@ -0,0 +1,36 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { QueryLoader } from 'ui'
+
+import {
+  RelayEnvironmentProvider,
+  mockRelayOperation,
+} from '../utils/relay'
+
+export default {
+  title        :'test/QueryLoader',
+  component    :QueryLoader,
+  subcomponents:{
+    // Item:QueryLoader.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+    (storyfn) => (
+      <RelayEnvironmentProvider>
+        { storyfn() }
+      </RelayEnvironmentProvider>
+    ),
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Base = () => {
+  mockRelayOperation()
+
+  return (
+    <QueryLoader />
+  )
+}

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/ui/f/FormInput/FormInput.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
-import { memo } from 'react'
+import { memo, useLayoutEffect } from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -28,6 +28,10 @@ const FormInput = ({
   disabled,
   ...otherProps
 }) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
   const newClassName = [
     className,
     componentClassName,

package/src/ui/f/FormInput/styles.scss

@@ -0,0 +1,11 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-margin: 1em;
+
+.#{bem.$base}.form-input {
+    &+& {
+        margin-top: $default-margin;
+    }
+}

package/src/ui/f/fields/SelectInput/SelectInput.jsx

@@ -55,7 +55,7 @@ const SelectInput = ({
       style={style}
       // {...otherProps}
     >
-      <FormLabel className="input-label" name={name}>{label}</FormLabel>
+      <FormLabel name={name}>{label}</FormLabel>
       <select className="input" {...field} value={field.value || ''} id={name} disabled={disabled}>
         {
         options.map((option) => {

package/src/ui/f/fields/SelectInput/styles.scss

@@ -6,24 +6,27 @@
 
 
 $default-padding: 0.75em;
-
+$default-margin: 1em;
 
 .#{bem.$base}.select-input {
   display: flex;
   flex-direction: column;
 
+  .#{bem.$base}.label {
+    margin-bottom: $default-margin
+  }
 
   .input {
     border: var(--theme-border-style) var(--dark-y);
     background: var(--light-y);
-    color:var(--on-y);
+    color: var(--on-y);
     padding: $default-padding;
 
-     &:not(:disabled):hover{
+    &:not(:disabled):hover {
       border: var(--theme-border-style) var(--light-background4);
     }
 
-     &:disabled {
+    &:disabled {
       background-color: var(--dark-y);
     }
 
@@ -31,5 +34,4 @@ $default-padding: 0.75em;
       background: var(--y);
     }
   }
-}
-
+}

package/src/ui/index.js

@@ -5,3 +5,4 @@ export * from './c'
 export * from './d'
 export * from './f'
 export * from './utils'
+export * from './test'

package/src/ui/test/QueryLoader/QueryLoader.jsx

@@ -0,0 +1,41 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useEffect, Suspense } from 'react'
+
+import { useQueryLoader } from 'react-relay'
+
+// Local Definitions
+
+import { PreloadedTestData } from './common'
+
+const testQuery = graphql`
+  query QueryLoaderHelloQuery {
+    hello
+  }
+`
+
+/**
+ * This is the component description.
+ */
+const QueryLoader = () => {
+  const [queryReference, loadQuery] = useQueryLoader(testQuery)
+
+  useEffect(() => {
+    loadQuery({})
+  }, [])
+
+  return (
+    <Suspense fallback="loading">
+      {queryReference ? (
+        <PreloadedTestData queryReference={queryReference} query={testQuery} />
+      ) : null}
+    </Suspense>
+  )
+}
+
+QueryLoader.defaultProps = {
+  // someProp:false
+}
+
+export default QueryLoader