@pareto-engineering/design-system 4.0.0-alpha.9 → 4.0.0

package/src/stories/colors.js

@@ -1,44 +1,44 @@
 const THEME = [
-  'main1',
+  'main',
   'main2',
-  'main3',
-  'main4',
 ]
 
-/*
-const WHEEL = [
+const MODALS = [
   'red',
-  'orange',
-  'yellow',
-  'olive',
   'green',
-  'indigo',
-  'azure',
+  'orange',
+  'gray',
   'blue',
-  'violet',
-  'pink',
-]
-  */
-
-const MODALS = [
-  'success',
-  'warning',
-  'error',
+  'purple',
+  'yellow',
+  'seagreen',
+  'deepblue',
+  'light-blue',
+  'light-purple',
+  'light-seagreen',
 ]
 
 const UI = [
-  'background1',
-  'background2',
-  'background3',
-  'background4',
-  'background5',
-  'background6',
+  'ui-main',
+  'ui-main-2',
+  'ui-lines',
+  'ui-icons',
   'heading',
   'paragraph',
   'subtitle',
   'metadata',
   'link',
-  'navlink',
+  'disabled',
+  'shadow',
+  'transparent',
+  'highlighted',
+  'interactive',
+  'background-far',
+  'background-near',
+  'background-inputs',
+  'background-cards',
+  'background-mesh',
+  'outline-inputs',
 ]
 
 const SM = [
@@ -59,7 +59,6 @@ const MONOCHROME = [
 const ALL_COLORS = [
   ...THEME,
   ...MODALS,
-  // ...WHEEL,
   ...UI,
   ...SM,
   ...MONOCHROME,
@@ -68,7 +67,6 @@ const ALL_COLORS = [
 export {
   THEME,
   MODALS,
-  // WHEEL,
   UI,
   SM,
   MONOCHROME,

package/src/stories/f/Checkbox.stories.jsx

@@ -28,6 +28,7 @@ export default {
   ],
   argTypes:{
     label       :{ control: 'text' },
+    labelColor  :{ control: 'text' },
     description :{ control: 'text' },
     defaultValue:{ control: 'boolean' },
     disabled    :{ control: 'boolean' },
@@ -49,10 +50,16 @@ const Template = ({ defaultValue, ...args }) => {
     }, [defaultValue])
 
     return (
-      <>
+      <div
+        style={{
+          display      :'flex',
+          flexDirection:'column',
+          gap          :'1rem',
+        }}
+      >
         <Checkbox {...args} />
         <FormDebugger />
-      </>
+      </div>
     )
   }
 

package/src/stories/f/ChoicesInput.stories.jsx

@@ -22,11 +22,11 @@ export default {
     ),
   ],
   argTypes:{
-    // backgroundColor:{ control: 'color' },
-    multiple          :{ control: 'boolean' },
-    gridColumnsDesktop:{ control: 'number' },
-    disabled          :{ control: 'boolean' },
-    optional          :{ control: 'boolean' },
+    color     :{ control: 'color' },
+    labelColor:{ control: 'color' },
+    multiple  :{ control: 'boolean' },
+    disabled  :{ control: 'boolean' },
+    optional  :{ control: 'boolean' },
   },
 }
 
@@ -78,10 +78,16 @@ const Template = ({ defaultValue, ...args }) => {
     }, [defaultValue])
 
     return (
-      <>
+      <div
+        style={{
+          display      :'flex',
+          flexDirection:'column',
+          gap          :'1rem',
+        }}
+      >
         <ChoicesInput {...args} />
         <FormDebugger />
-      </>
+      </div>
     )
   }
   return <Content />
@@ -113,13 +119,6 @@ MultipleWithDefaultFormikValue.args = {
   defaultValue:['brown', 'violet'],
 }
 
-export const MultipleWithGrid = Template.bind({})
-MultipleWithGrid.args = {
-  ...Base.args,
-  multiple          :true,
-  gridColumnsDesktop:2,
-}
-
 export const ChoicesWithLabel = Template.bind({})
 ChoicesWithLabel.args = {
   ...Base.args,

package/src/stories/f/EditorInput.stories.jsx

@@ -0,0 +1,81 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { Formik, Form } from 'formik'
+
+import { EditorInput, FormDebugger } from 'ui'
+
+export default {
+  title        :'f/fields/EditorInput',
+  component    :EditorInput,
+  subcomponents:{
+    // Item:TextareaInput.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ instructions: '' }}
+      >
+        <Form>
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    name              :{ control: 'text' },
+    label             :{ control: 'text' },
+    labelColor        :{ control: 'text' },
+    disabled          :{ control: 'boolean' },
+    labelAsDescription:{ control: 'boolean' },
+    optional          :{ control: 'boolean' },
+    showDebugger      :{ control: 'boolean' },
+  },
+}
+
+const Template = (args) => (
+  <div
+    style={{
+      display      :'flex',
+      flexDirection:'column',
+      gap          :'1rem',
+    }}
+  >
+    <EditorInput {...args} />
+    <FormDebugger />
+  </div>
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  name :'instructions',
+  label:'Project Instructions',
+}
+
+export const Optional = Template.bind({})
+Optional.args = {
+  ...Base.args,
+  optional:true,
+}
+
+// const validate = (value) => {
+//   let errorMessage = ''
+//   const isValid = value.length > 3
+
+//   if (!isValid) {
+//     errorMessage = 'Value should be greater than 3 characters'
+//   }
+//   return errorMessage
+// }
+
+// export const Validation = Template.bind({})
+// Validation.args = {
+//   ...Base.args,
+//   validate,
+// }
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  ...Base.args,
+  disabled:true,
+}

package/src/stories/f/LinkInput.stories.jsx

@@ -0,0 +1,93 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+import { Formik, Form } from 'formik'
+
+import {
+  LinkInput,
+  FormDebugger,
+} from 'ui'
+
+export default {
+  title        :'f/fields/LinkInput',
+  component    :LinkInput,
+  subcomponents:{
+    // Item:TextInput.Item
+  },
+  decorators:[
+    (storyfn) => (
+      <Formik
+        initialValues={{ email: '', name: '', company: '' }}
+      >
+        <Form>
+
+          { storyfn() }
+        </Form>
+      </Formik>
+    ),
+  ],
+  argTypes:{
+    // backgroundColor:{ control: 'color' },
+    placeholder :{ control: 'text' },
+    autoComplete:{ control: 'select', options: ['off', 'on'] },
+    disabled    :{ control: 'boolean' },
+    name        :{ control: 'text' },
+    label       :{ control: 'text' },
+    labelColor  :{ control: 'text' },
+    optional    :{ control: 'boolean' },
+    symbol      :{ control: 'text' },
+  },
+}
+
+// eslint-disable-next-line react/prop-types
+const Template = (args) => (
+  <div
+    style={{
+      display      :'flex',
+      flexDirection:'column',
+      gap          :'1rem',
+    }}
+  >
+    <LinkInput {...args} />
+    <FormDebugger />
+  </div>
+)
+
+export const Base = Template.bind({})
+Base.args = {
+  name :'link',
+  label:'Spreadsheet Link',
+}
+
+export const Optional = Template.bind({})
+Optional.args = {
+  ...Base.args,
+  optional:true,
+}
+
+const validate = (value) => {
+  let errorMessage = ''
+  const isValid = value.length > 3
+
+  if (!isValid) {
+    errorMessage = 'Value should be greater than 3 characters'
+  }
+  return errorMessage
+}
+
+export const WithValidation = Template.bind({})
+WithValidation.args = {
+  ...Base.args,
+  validate,
+}
+
+export const WithPlaceholder = Template.bind({})
+WithPlaceholder.args = {
+  ...Base.args,
+  placeholder:'Email address',
+}
+
+export const WithDisabled = Template.bind({})
+WithDisabled.args = {
+  ...Base.args,
+  disabled:true,
+}

package/src/stories/f/QueryChoices.stories.jsx

@@ -28,8 +28,11 @@ export default {
     ),
   ],
   argTypes:{
-    isLoading:{ control: 'boolean' },
-    optional :{ control: 'boolean' },
+    color     :{ control: 'color' },
+    labelColor:{ control: 'color' },
+    multiple  :{ control: 'boolean' },
+    isLoading :{ control: 'boolean' },
+    optional  :{ control: 'boolean' },
   },
 }
 
@@ -96,7 +99,13 @@ const Template = ({ isLoading, defaultFormikState, ...args }) => {
   }
 
   const Content = () => (
-    <>
+    <div
+      style={{
+        display      :'flex',
+        flexDirection:'column',
+        gap          :'1rem',
+      }}
+    >
       <QueryChoices
         name="status"
         label="Select Status"
@@ -111,7 +120,7 @@ const Template = ({ isLoading, defaultFormikState, ...args }) => {
         {...args}
       />
       <FormDebugger />
-    </>
+    </div>
   )
 
   const initialValues = defaultFormikState ?? { status: '' }

package/src/stories/f/QueryCombobox.stories.jsx

@@ -29,10 +29,14 @@ export default {
     ),
   ],
   argTypes:{
-    // backgroundColor:{ control: 'color' },
-    multiple:{ control: 'boolean' },
-    disabled:{ control: 'boolean' },
-    optional:{ control: 'boolean' },
+    disabled  :{ control: 'boolean' },
+    type      :{ control: 'text' },
+    name      :{ control: 'text' },
+    color     :{ control: 'text' },
+    label     :{ control: 'text' },
+    labelColor:{ control: 'text' },
+    multiple  :{ control: 'boolean' },
+    optional  :{ control: 'boolean' },
   },
 }
 
@@ -121,7 +125,13 @@ const ResolvedTemplate = ({ defaultFormikState, ...otherProps }) => {
     }
 
     return (
-      <>
+      <div
+        style={{
+          display      :'flex',
+          flexDirection:'column',
+          gap          :'1rem',
+        }}
+      >
         <QueryCombobox
           label="Search for a team"
           optionsKeyMap={{
@@ -136,13 +146,7 @@ const ResolvedTemplate = ({ defaultFormikState, ...otherProps }) => {
           searchVariable="name_Icontains"
           {...otherProps}
         />
-        <div
-          style={{
-            display      :'flex',
-            alignItems   :'flex-end',
-            flexDirection:'column',
-          }}
-        >
+        <div>
           <FormDebugger />
           <Button
             onClick={updateFormikState}
@@ -150,7 +154,7 @@ const ResolvedTemplate = ({ defaultFormikState, ...otherProps }) => {
             {multiple ? 'Add formik values' : 'Replace formik value'}
           </Button>
         </div>
-      </>
+      </div>
     )
   }
 
@@ -178,6 +182,17 @@ Optional.args = {
   optional:true,
 }
 
+export const WithPlaceholder = ResolvedTemplate.bind({})
+WithPlaceholder.args = {
+  placeholder:'Search for a team',
+}
+
+export const WithPromptToCreateNewOption = ResolvedTemplate.bind({})
+WithPromptToCreateNewOption.args = {
+  placeholder          :'Search for a team',
+  promptCreateNewOption:true,
+}
+
 export const SingleSelect = ResolvedTemplate.bind({})
 SingleSelect.args = {
   multiple:false,
@@ -200,6 +215,13 @@ MultipleSelect.args = {
   defaultFormikState:{ teams: [] },
 }
 
+export const MultipleSelectWithPromptForNewOptions = ResolvedTemplate.bind({})
+MultipleSelectWithPromptForNewOptions.args = {
+  multiple             :true,
+  promptCreateNewOption:true,
+  defaultFormikState   :{ teams: [] },
+}
+
 export const MultipleSelectWithDefaultFormikState = ResolvedTemplate.bind({})
 MultipleSelectWithDefaultFormikState.args = {
   multiple          :true,
@@ -208,10 +230,32 @@ MultipleSelectWithDefaultFormikState.args = {
       {
         value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
         label:'Apple',
+        color:'red',
+      },
+      {
+        value:'VGVhbU5vZGU6MDA0N2U4MzktODY0Zi00N2U5LTg3ZjgtZGUwMmM2Yzg1YWJm',
+        label:'Pear',
+        color:'green',
+      },
+    ],
+  },
+}
+
+export const MultipleSelectWithGetTagColorFunction = ResolvedTemplate.bind({})
+MultipleSelectWithGetTagColorFunction.args = {
+  multiple          :true,
+  getTagColor       :(tag) => tag.color,
+  defaultFormikState:{
+    teams:[
+      {
+        value:'VGVhbU5vZGU6MDAxZTIyOGEtYzA5My00MGI0LWE1MTUtYTNkMTM1NTE1MDNl',
+        label:'Apple',
+        color:'red',
       },
       {
         value:'VGVhbU5vZGU6MDA0N2U4MzktODY0Zi00N2U5LTg3ZjgtZGUwMmM2Yzg1YWJm',
         label:'Pear',
+        color:'green',
       },
     ],
   },

package/src/stories/f/QuerySelect.stories.jsx

@@ -28,9 +28,11 @@ export default {
     ),
   ],
   argTypes:{
-    // backgroundColor:{ control: 'color' },
-    isLoading:{ control: 'boolean' },
-    optional :{ control: 'boolean' },
+    color     :{ control: 'text' },
+    label     :{ control: 'text' },
+    labelColor:{ control: 'text' },
+    isLoading :{ control: 'boolean' },
+    optional  :{ control: 'boolean' },
   },
 }
 const statuses = [
@@ -93,7 +95,13 @@ const Template = ({ isLoading, defaultFormikState, ...args }) => {
   }
 
   const Content = () => (
-    <>
+    <div
+      style={{
+        display      :'flex',
+        flexDirection:'column',
+        gap          :'1rem',
+      }}
+    >
       <QuerySelect
         name="status"
         label="Select Task Status"
@@ -108,7 +116,7 @@ const Template = ({ isLoading, defaultFormikState, ...args }) => {
         {...args}
       />
       <FormDebugger />
-    </>
+    </div>
   )
 
   const initialValues = defaultFormikState ?? { status: '' }

package/src/stories/f/RatingsInput.stories.jsx

@@ -27,6 +27,7 @@ export default {
     ratingCount        :{ control: 'number' },
     name               :{ control: 'text' },
     label              :{ control: 'text' },
+    labelColor         :{ control: 'text' },
     showRatingValue    :{ control: 'boolean' },
     displayRatingsLabel:{ control: 'boolean' },
     labelMax           :{ control: 'text' },
@@ -36,10 +37,16 @@ export default {
 }
 
 const Template = (args) => (
-  <>
+  <div
+    style={{
+      display      :'flex',
+      flexDirection:'column',
+      gap          :'1rem',
+    }}
+  >
     <RatingsInput {...args} />
     <FormDebugger />
-  </>
+  </div>
 )
 
 export const Base = Template.bind({})

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

@@ -11,9 +11,9 @@ export default {
     // Item:SelectInput.Item
   },
   decorators:[
-    (storyfn) => (
+    (storyfn, { args }) => (
       <Formik
-        initialValues={{ workType: '' }}
+        initialValues={{ workType: args?.testOverride ? 'Training' : '' }}
       >
         <Form>
           { storyfn() }
@@ -22,17 +22,25 @@ export default {
     ),
   ],
   argTypes:{
-    // backgroundColor:{ control: 'color' },
-    disabled:{ control: 'boolean' },
-    optional:{ control: 'boolean' },
+    color     :{ control: 'text' },
+    label     :{ control: 'text' },
+    labelColor:{ control: 'text' },
+    disabled  :{ control: 'boolean' },
+    optional  :{ control: 'boolean' },
   },
 }
 
 const Template = (args) => (
-  <>
+  <div
+    style={{
+      display      :'flex',
+      flexDirection:'column',
+      gap          :'1rem',
+    }}
+  >
     <SelectInput {...args} />
     <FormDebugger />
-  </>
+  </div>
 )
 
 export const Base = Template.bind({})
@@ -85,3 +93,34 @@ DisabledWithDescriptionSelectInput.args = {
   disabled   :true,
   description:'This is a description',
 }
+
+export const Multiple = Template.bind({})
+Multiple.args = {
+  name       :'status',
+  label      :'Status',
+  getTagColor:(tag) => tag.color,
+  options    :[
+    { value: 'Approved', label: 'Approved', color: 'green' },
+    { value: 'To be reviewed', label: 'To be reviewed', color: 'purple' },
+    { value: 'Revised', label: 'Revised', color: 'blue' },
+    { value: 'Rejected', label: 'Rejected', color: 'red' },
+  ],
+  placeholder:'Type to search',
+  multiple   :true,
+}
+
+export const WithDefault = {
+  args:{
+    ...Base.args,
+    hasDefault:true,
+    options   :[...Base.args.options.map((e, i) => (i === 2 ? { ...e, isDefault: true } : e))],
+  },
+}
+
+export const WithDefaultNoOverride = {
+  ...WithDefault,
+  args:{
+    ...WithDefault.args,
+    testOverride:true,
+  },
+}

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

@@ -33,13 +33,21 @@ export default {
     type        :{ control: 'text' },
     name        :{ control: 'text' },
     label       :{ control: 'text' },
+    labelColor  :{ control: 'text' },
     optional    :{ control: 'boolean' },
+    symbol      :{ control: 'text' },
   },
 }
 
 // eslint-disable-next-line react/prop-types
 const Template = (args) => (
-  <div className=" u2 pb-u">
+  <div
+    style={{
+      display      :'flex',
+      flexDirection:'column',
+      gap          :'1rem',
+    }}
+  >
     <TextInput {...args} />
     <FormDebugger />
   </div>
@@ -104,3 +112,9 @@ Time.args = {
   name :'time',
   label:'Select time',
 }
+
+export const HasSymbol = Template.bind({})
+HasSymbol.args = {
+  ...Base.args,
+  symbol:"'$'",
+}

package/src/stories/f/TextareaInput.stories.jsx

@@ -27,6 +27,7 @@ export default {
     // backgroundColor:{ control: 'color' },
     name              :{ control: 'text' },
     label             :{ control: 'text' },
+    labelColor        :{ control: 'text' },
     placeholder       :{ control: 'text' },
     disabled          :{ control: 'boolean' },
     labelAsDescription:{ control: 'boolean' },
@@ -35,10 +36,16 @@ export default {
 }
 
 const Template = (args) => (
-  <>
+  <div
+    style={{
+      display      :'flex',
+      flexDirection:'column',
+      gap          :'1rem',
+    }}
+  >
     <TextareaInput {...args} />
     <FormDebugger />
-  </>
+  </div>
 )
 
 export const Base = Template.bind({})