@pareto-engineering/design-system 2.0.0-alpha.5 → 2.0.0-alpha.50

package/src/ui/c/SocialMediaShareButton/SocialMediaShareButton.jsx

@@ -0,0 +1,113 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useLayoutEffect } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'social-media-share-button'
+
+/**
+ * This is the component description.
+ */
+const SocialMediaShareButton = ({
+  id,
+  className:userClassName,
+  style,
+  icon,
+  // children,
+  type,
+  color,
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const isServer = typeof window === 'undefined'
+
+  const title = isServer ? '' : document.title
+  const link = isServer ? '' : window.location.href
+
+  const defaultsMap = {
+    facebook:{
+      icon:'f',
+      link:`https://www.facebook.com/sharer/sharer.php?u=${link}&quote=${title}`,
+    },
+    twitter:{
+      icon:'t',
+      link:`https://twitter.com/intent/tweet?text=${title}&url=${link}`,
+    },
+  }
+
+  return (
+    <a
+      href={defaultsMap[type].link}
+      target="_blank"
+      rel="noreferrer"
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        `x-${color || type}`,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <button type="button">
+        { icon || defaultsMap[type].icon }
+      </button>
+    </a>
+  )
+}
+
+SocialMediaShareButton.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,
+
+  /**
+   * The Social Media to Target.
+   * If blank, you need to provide both an icon letter (from glyphter) and a link.
+   */
+  type:PropTypes.oneOf(['twitter', 'facebook']),
+
+  /**
+   * The icon of the social media
+   */
+  icon:PropTypes.string,
+
+  /**
+   * The button color
+   */
+  color:PropTypes.string,
+}
+
+SocialMediaShareButton.defaultProps = {
+  // someProp:false
+}
+
+export default SocialMediaShareButton

package/src/ui/c/SocialMediaShareButton/index.js

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

package/src/ui/c/SocialMediaShareButton/styles.scss

@@ -0,0 +1,39 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+@use "@aztlan/stylebook/src/mixins";
+@use "@aztlan/stylebook/src/globals" as *;
+
+$default-dimensions: 2em;
+$mobile-dimensions: 2.75em;
+
+.#{bem.$base}.social-media-share-button{
+
+  > button {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    border-radius: 3em;
+    color: var(--x);
+    cursor: pointer;
+    font-family: "icons", sans-serif;
+    height: $default-dimensions;
+    transition: all .3s;
+    width: $default-dimensions;
+
+    @include mixins.media($to:$sm-md) {
+      height: $mobile-dimensions;
+      width: $mobile-dimensions;
+    }
+
+    &:hover {
+      background: var(--x);
+      color: var(--on-x);
+    }
+
+    &:focus, &:active {
+      background: var(--light-x);
+      color: var(--on-x);
+    }
+  }
+}

package/src/ui/c/index.js

@@ -1,3 +1,4 @@
 export { Hero } from './Hero'
 export { ContentSlides, useContentSlides } from './ContentSlides'
 export { Shortener } from './Shortener'
+export { SocialMediaShareButton } from './SocialMediaShareButton'

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'
 
@@ -10,6 +10,8 @@ import {
   TextareaInput,
   ChoicesInput,
   SelectInput,
+  QueryCombobox,
+  QuerySelect,
 } from '../fields'
 
 // Local Definitions
@@ -28,6 +30,10 @@ const FormInput = ({
   disabled,
   ...otherProps
 }) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
   const newClassName = [
     className,
     componentClassName,
@@ -60,6 +66,24 @@ const FormInput = ({
       />
     )
   }
+  if (type === 'query-combobox') {
+    return (
+      <QueryCombobox
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+  if (type === 'query-select') {
+    return (
+      <QuerySelect
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
   if (extraTypes?.[type]) {
     const Component = extraTypes[type]
     return (
@@ -102,6 +126,7 @@ FormInput.propTypes = {
     'select',
     'choices',
     'textarea',
+    'query-combobox',
     // to be removed
     'extendedTypeInput',
   ]),

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/common/Debugger/Debugger.jsx

@@ -41,7 +41,7 @@ const Debugger = ({
         .join(' ')}
       style={style}
     >
-      <Button onClick={toggleDebugger} color="main1">
+      <Button onClick={toggleDebugger} color="main2">
         { isOpen
           ? 'Close FormDebugger'
           : 'Open FormDebugger'}

package/src/ui/f/common/Label/Label.jsx

@@ -90,7 +90,7 @@ Label.propTypes = {
 Label.defaultProps = {
   // someProp:false
   as   :'label',
-  color:'main1',
+  color:'main2',
 }
 
 export default Label

package/src/ui/f/common/Label/styles.scss

@@ -5,7 +5,7 @@
 
 
 .#{bem.$base}.label {
- color: var(--x);
+ color: var(--dark-x);
 }
 
 

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

@@ -148,7 +148,7 @@ ChoicesInput.defaultProps = {
   gridColumnsMobile :2,
   gridColumnsDesktop:3,
   color             :'background2',
-  colorChecked      :'main1',
+  colorChecked      :'main2',
   disabled          :false,
 }
 

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

@@ -29,10 +29,21 @@ $default-transition:all .3s;
         z-index: -1;
       }
 
+      input:disabled + label {
+        background-color: var(--dark-x);
+      }
+
+      input:not(:disabled) + label {
+        &:hover {
+          border-color: var(--light-y);
+        }
+      }
+
       label {
-        background: var(--x);
-        border-radius: var(--theme-border-radius);
+        border: var(--theme-border-style) var(--dark-x);
+        background: var(--light-x);
         color: var(--on-x);
+        border-radius: var(--theme-border-radius);
         display: block;
         height: 100%;
         padding: $default-padding;
@@ -44,6 +55,10 @@ $default-transition:all .3s;
       input:checked + label {
         background: var(--y);
         color: var(--on-y);
+
+        &:hover {
+          border-color: var(--y);
+        }
       }
     }
   }

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

@@ -0,0 +1,227 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+import * as React from 'react'
+
+import { useState, useLayoutEffect } from 'react'
+
+import { useField } from 'formik'
+
+import { useRelayEnvironment, fetchQuery } from 'react-relay'
+
+import PropTypes from 'prop-types'
+
+// Local Definitions
+
+import { Combobox, MultipleCombobox } from './common'
+
+/**
+ * This is the component description.
+ */
+const QueryCombobox = ({
+  id,
+  style,
+  className,
+  query,
+  multiple,
+  name,
+  label,
+  color,
+  description,
+  disabled,
+  debounceMs,
+  searchVariable,
+  extraVariables,
+  optionsKeyMap,
+  minLength,
+  transformSearch,
+  // ...otherProps
+}) => {
+  useLayoutEffect(() => {
+    import('./styles.scss')
+  }, [])
+
+  const [, meta, helpers] = useField(name)
+
+  const { setValue, setError } = helpers
+
+  const { error, value } = meta
+
+  const environment = useRelayEnvironment()
+
+  const [isFetching, setIsFetching] = useState(false)
+
+  const [options, setOptions] = useState([])
+
+  const { graphql, accessor } = query
+
+  const getOptions = (inputValue) => {
+    if (isFetching) return
+
+    let variables = { [searchVariable]: inputValue }
+
+    if (extraVariables) {
+      variables = {
+        ...variables,
+        ...extraVariables,
+      }
+    }
+
+    fetchQuery(
+      environment,
+      graphql,
+      variables,
+    )
+      .subscribe({
+        start:() => {
+          setIsFetching(true)
+        },
+        complete:() => {
+          setIsFetching(false)
+        },
+        error:(fetchError) => {
+          setIsFetching(false)
+          if (setError)setError(fetchError.message)
+        },
+        next:(data) => {
+          setOptions(data[accessor].edges.map(({ node }) => ({
+            value:node[optionsKeyMap.value],
+            label:optionsKeyMap.getLabel(node),
+          })))
+        },
+      })
+  }
+
+  const comboboxProps = {
+    id,
+    style,
+    options,
+    getOptions,
+    debounceMs,
+    disabled,
+    name,
+    label,
+    description,
+    setValue,
+    error,
+    value,
+    color,
+    isFetching,
+    className,
+    minLength,
+    transformSearch,
+  }
+
+  const Input = multiple ? MultipleCombobox : Combobox
+
+  return <Input {...comboboxProps} />
+}
+
+QueryCombobox.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 name of the custom select input
+   */
+  name:PropTypes.string,
+
+  /**
+   * The label of the custom select input
+   */
+  label:PropTypes.string,
+
+  /**
+   * The custom select input description
+   */
+  description:PropTypes.string,
+
+  /**
+   * Whether the input should be disabled
+   */
+  disabled:PropTypes.bool,
+
+  /**
+   * The base color of the custom select input
+   */
+  color:PropTypes.string,
+
+  /**
+   * The debounce time in milliseconds
+   */
+  debounceMs:PropTypes.number,
+
+  /**
+   * The graphql query to fetch the options and the accessor to destructure the results from
+   */
+  query:PropTypes.shape({
+    accessor:PropTypes.string,
+    graphql :PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.object,
+    ]).isRequired,
+  }),
+
+  /**
+   *  The extra variables required to be used in the query.
+   */
+  extraVariables:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   *  The select option keys to be used to map the data to the select options.
+   * i.e `{ value: 'id', label: 'name' }`
+   */
+  optionsKeyMap:PropTypes.shape({
+    value   :PropTypes.string.isRequired,
+    getLabel:PropTypes.func.isRequired,
+  }),
+
+  /**
+   * Whether to allow multiple items selection
+   */
+  multiple:PropTypes.bool,
+
+  /**
+   * The graphql node to be used to destructure the fetched data
+   */
+  graphQlNode:PropTypes.string.isRequired,
+
+  /**
+   * The variable to be used to search the data
+   */
+  searchVariable:PropTypes.string,
+
+  /**
+   * The minimum length of the search input to start fetching the options
+   */
+  minLength:PropTypes.number,
+
+  /**
+   * The function to transform the search input
+   */
+  transformSearch:PropTypes.func,
+}
+
+QueryCombobox.defaultProps = {
+  optionsKeyMap:{
+    value   :'id',
+    getLabel:(node) => node.name,
+  },
+  multiple       :false,
+  color          :'background2',
+  searchVariable :'search',
+  transformSearch:(search) => search,
+  minLength      :2,
+}
+
+export default QueryCombobox