@pareto-engineering/design-system 5.3.0 → 5.4.0

package/src/ui/g/FormBuilder/common/Renderer/styles.scss

@@ -1,30 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-
-@use "@pareto-engineering/bem";
-
-$default-margin: 1rem;
-
-.#{bem.$base}.renderer {
-  > form {
-    > .#{bem.$base}.section {
-      margin-bottom: calc($default-margin * 2);
-
-      > p {
-        margin: 0;
-      }
-      > .#{bem.$base}.expandable-lexical-preview {
-        margin-bottom: $default-margin;
-      }
-    }
-
-    > .navigator-container {
-      display: flex;
-      gap: var(--gap);
-      justify-content: space-between;
-
-      > .previous-button {
-        align-items: center;
-      }
-    }
-  }
-}

package/src/ui/g/FormBuilder/common/index.js

@@ -1,2 +0,0 @@
-export { Builder } from './Builder'
-export { Renderer } from './Renderer'

package/src/ui/g/FormBuilder/index.js

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

package/src/ui/g/FormBuilder/styles.scss

@@ -1,25 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-
-@use "@pareto-engineering/bem";
-
-$default-border: 1px solid var(--ui-lines);
-$default-border-radius: .5em;
-$default-max-height: 10em;
-$default-padding: calc(var(--gap) / 2);
-$default-margin: var(--gap);
-
-.#{bem.$base}.form-builder {
-  > .task-data {
-    background: var(--background-inputs);
-    border: $default-border;
-    border-radius: $default-border-radius;
-    color: var(--on-background-far);
-    height: $default-max-height;
-    margin-bottom: $default-margin;
-    max-width: 100%;
-    overflow: auto;
-    padding: $default-padding;
-    resize: vertical;
-    text-wrap: wrap;
-  }
-}

package/src/ui/g/index.js

@@ -1,3 +0,0 @@
-export { ExpandableLexicalPreview } from './ExpandableLexicalPreview'
-export { DragAndDrop } from './DragAndDrop'
-export { FormBuilder } from './FormBuilder'

package/src/ui/index.js

@@ -1,8 +0,0 @@
-export * from './a'
-export * from './b'
-export * from './c'
-export * from './d'
-export * from './f'
-export * from './g'
-export * from './utils'
-export * from './test'

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

@@ -1,41 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { useEffect, Suspense } from 'react'
-
-import { useQueryLoader, graphql } 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

package/src/ui/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js

@@ -1,68 +0,0 @@
-/**
- * @flow
- */
-
-/* eslint-disable */
-
-'use strict';
-
-/*::
-import type { ConcreteRequest } from 'relay-runtime';
-export type QueryLoaderHelloQueryVariables = {||};
-export type QueryLoaderHelloQueryResponse = {|
-  +hello: ?string
-|};
-export type QueryLoaderHelloQuery = {|
-  variables: QueryLoaderHelloQueryVariables,
-  response: QueryLoaderHelloQueryResponse,
-|};
-*/
-
-
-/*
-query QueryLoaderHelloQuery {
-  hello
-}
-*/
-
-const node/*: ConcreteRequest*/ = (function(){
-var v0 = [
-  {
-    "alias": null,
-    "args": null,
-    "kind": "ScalarField",
-    "name": "hello",
-    "storageKey": null
-  }
-];
-return {
-  "fragment": {
-    "argumentDefinitions": [],
-    "kind": "Fragment",
-    "metadata": null,
-    "name": "QueryLoaderHelloQuery",
-    "selections": (v0/*: any*/),
-    "type": "Query",
-    "abstractKey": null
-  },
-  "kind": "Request",
-  "operation": {
-    "argumentDefinitions": [],
-    "kind": "Operation",
-    "name": "QueryLoaderHelloQuery",
-    "selections": (v0/*: any*/)
-  },
-  "params": {
-    "cacheID": "463f9ee8a82dd6ec8dedeb28649cce74",
-    "id": null,
-    "metadata": {},
-    "name": "QueryLoaderHelloQuery",
-    "operationKind": "query",
-    "text": "query QueryLoaderHelloQuery {\n  hello\n}\n"
-  }
-};
-})();
-// prettier-ignore
-(node/*: any*/).hash = 'b92d001ab0208bd484a99f77c274d5ef';
-
-module.exports = node;

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

@@ -1,51 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import PropTypes from 'prop-types'
-
-import { usePreloadedQuery } from 'react-relay'
-
-/**
- * This is the component description.
- */
-const PreloadedTestData = ({
-  query,
-  queryReference,
-  // ...otherProps
-}) => {
-  const data = usePreloadedQuery(query, queryReference)
-
-  return (
-    <pre>
-      {JSON.stringify(data, null, 2)}
-    </pre>
-  )
-}
-
-PreloadedTestData.propTypes = {
-  /**
-   * The query to be used to query the test data
-   */
-  query:PropTypes.objectOf(
-    PropTypes.PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.object,
-    ]),
-  ),
-
-  /**
-   *  The query reference to be used to access the preloaded data
-   */
-  queryReference:PropTypes.objectOf(
-    PropTypes.PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.object,
-    ]),
-  ),
-}
-
-PreloadedTestData.defaultProps = {
-  // someProp:false
-}
-
-export default PreloadedTestData

package/src/ui/test/QueryLoader/common/PreloadedTestData/index.js

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

package/src/ui/test/QueryLoader/common/index.js

@@ -1 +0,0 @@
-export { PreloadedTestData } from './PreloadedTestData'

package/src/ui/test/QueryLoader/index.js

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

package/src/ui/test/index.js

@@ -1 +0,0 @@
-export { QueryLoader } from './QueryLoader'

package/src/ui/utils/applyCharacterLimit.js

@@ -1,80 +0,0 @@
-export const applyCharacterLimit = (setMaxLength = true) => {
-  setTimeout(() => {
-    document.querySelectorAll("[class*='limit-character-count-']").forEach((parent) => {
-      const match = parent.className.match(/limit-character-count-(\d+)/)
-      if (!match) return
-
-      const maxLength = parseInt(match[1], 10)
-
-      const fields = parent.matches("input[type='text'], input[type='email'], input[type='password'], input[type='search'], textarea")
-        ? [parent]
-        : Array.from(parent.querySelectorAll("input[type='text'], input[type='email'], input[type='password'], input[type='search'], textarea"))
-
-      if (!fields.length) return
-
-      const characterCounterBaseClassName = 's-2 character-counter'
-      const characterCounterClassName = `${characterCounterBaseClassName} x-paragraph c-x`
-      const characterCounterWarningClassName = `${characterCounterBaseClassName} x-orange c-x`
-      const characterCounterErrorClassName = `${characterCounterBaseClassName} x-error c-x`
-
-      fields.forEach((field) => {
-        if (field.parentNode.querySelector('.character-counter')) return
-
-        if (setMaxLength) {
-          field.setAttribute('maxlength', maxLength)
-        }
-
-        const counter = document.createElement('span')
-        counter.className = characterCounterClassName
-        counter.style.position = 'absolute'
-        counter.style.right = '10px'
-        counter.style.bottom = '-20px'
-        counter.style.pointerEvents = 'none'
-
-        let wrapper
-        const { parentNode } = field
-        const computedStyle = window.getComputedStyle(parentNode)
-        if ((parentNode.style && parentNode.style.position === 'relative') || computedStyle.getPropertyValue('position') === 'relative') {
-          wrapper = parentNode
-        } else {
-          wrapper = document.createElement('div')
-          wrapper.style.position = 'relative'
-          wrapper.style.display = 'inline-block'
-          wrapper.style.width = '100%'
-          field.parentNode.insertBefore(wrapper, field)
-          wrapper.appendChild(field)
-        }
-
-        wrapper.appendChild(counter)
-
-        function updateCounter() {
-          if (field.value.length > maxLength) {
-            // eslint-disable-next-line no-param-reassign
-            field.value = field.value.substring(0, maxLength)
-          }
-
-          const { length } = field.value
-          counter.textContent = `${length}/${maxLength}`
-
-          if (length >= maxLength) {
-            counter.className = characterCounterErrorClassName
-          } else if (length >= maxLength * 0.9) {
-            counter.className = characterCounterWarningClassName
-          } else {
-            counter.className = characterCounterClassName
-          }
-        }
-
-        field.removeEventListener('input', updateCounter)
-        field.removeEventListener('paste', updateCounter)
-
-        field.addEventListener('input', updateCounter)
-        field.addEventListener('paste', () => {
-          setTimeout(updateCounter, 0)
-        })
-
-        updateCounter()
-      })
-    })
-  }, 100) // Small delay to ensure DOM is ready
-}

package/src/ui/utils/formatting.js

@@ -1,142 +0,0 @@
-export const DATE_FORMATS = {
-  HUMAN_READABLE          :'human_readable',
-  HUMAN_READABLE_WITH_TIME:'human_readable_with_time',
-  TIME                    :'time',
-  DATETIME                :'datetime',
-  CHART_DATE              :'chart_date',
-  CHART_TIME              :'chart_time',
-  WEEKDAY_DATE            :'weekday_date',
-  DAY_VIEW                :'day_view',
-}
-
-const isValidDate = (date) => date instanceof Date && !Number.isNaN(date)
-
-const isTimeSliceFormat = (input) => {
-  const timeSliceRegex = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/
-  return timeSliceRegex.test(input)
-}
-
-const createTimeFromSlice = (timeSlice) => {
-  const [hours, minutes] = timeSlice.split(':').map(Number)
-  const date = new Date()
-  date.setHours(hours, minutes, 0, 0)
-  return date
-}
-
-const format12Hour = (date) => {
-  const hour = date.getHours()
-  const ampm = hour >= 12 ? 'PM' : 'AM'
-  const hour12 = hour % 12 || 12
-  return `${hour12} ${ampm}`
-}
-
-const shouldShowYear = (date) => {
-  const currentYear = new Date().getFullYear()
-  return date.getFullYear() !== currentYear
-}
-
-export const formatTime = (seconds) => {
-  if (!seconds) return '0s'
-
-  const hours = Math.floor(seconds / 3600)
-  const minutes = Math.floor((seconds % 3600) / 60)
-  const remainingSeconds = Math.floor(seconds % 60)
-
-  const parts = []
-  if (hours > 0) parts.push(`${hours}h`)
-  if (minutes > 0 || (hours > 0 && remainingSeconds > 0)) parts.push(`${minutes}m`)
-  if (remainingSeconds > 0) parts.push(`${remainingSeconds}s`)
-
-  // Cater for decimal seconds
-  if (parts.length === 0) return '0s'
-
-  return parts.join(' ')
-}
-
-const formatStrategies = {
-  [DATE_FORMATS.CHART_DATE]:(date) => {
-    const monthDay = date.toLocaleDateString('en-US', {
-      month   :'short',
-      day     :'numeric',
-      timeZone:'UTC',
-    })
-    return shouldShowYear(date)
-      ? `${monthDay} ${date.getFullYear()}`
-      : monthDay
-  },
-
-  [DATE_FORMATS.CHART_TIME]:(date) => format12Hour(date),
-
-  [DATE_FORMATS.HUMAN_READABLE]:(date) => date.toLocaleDateString('en-US', {
-    year    :'numeric',
-    month   :'short',
-    day     :'numeric',
-    timeZone:'UTC',
-  }),
-
-  [DATE_FORMATS.HUMAN_READABLE_WITH_TIME]:(date) => date.toLocaleString('en-US', {
-    year    :'numeric',
-    month   :'short',
-    day     :'numeric',
-    hour    :'2-digit',
-    timeZone:'UTC',
-  }),
-
-  default:(date) => date.toISOString(),
-}
-
-export const parseDate = (input) => {
-  if (input instanceof Date) return input
-  if (typeof input === 'number') return new Date(input)
-
-  if (typeof input === 'string') {
-    if (isTimeSliceFormat(input)) {
-      return createTimeFromSlice(input)
-    }
-
-    const parsed = new Date(input)
-    if (isValidDate(parsed)) return parsed
-
-    const timestamp = parseInt(input, 10)
-    if (!Number.isNaN(timestamp)) {
-      const date = new Date(timestamp * 1000)
-      if (isValidDate(date)) return date
-    }
-  }
-
-  return null
-}
-
-export const formatDate = (input, format = DATE_FORMATS.HUMAN_READABLE) => {
-  try {
-    if (typeof input === 'string' && isTimeSliceFormat(input)) {
-      if (format === DATE_FORMATS.CHART_TIME || format === DATE_FORMATS.TIME) {
-        const date = createTimeFromSlice(input)
-        if (format === DATE_FORMATS.CHART_TIME) {
-          return format12Hour(date)
-        }
-        return date.toLocaleTimeString('en-US', {
-          hour    :'2-digit',
-          minute  :'2-digit',
-          timeZone:'UTC',
-        })
-      }
-      return input
-    }
-
-    const date = parseDate(input)
-    if (!date && (typeof input === 'string' || typeof input === 'number')) {
-      return input.toString()
-    }
-
-    const formatStrategy = formatStrategies[format] || formatStrategies.default
-    return formatStrategy(date)
-  } catch (error) {
-    return 'Invalid Date'
-  }
-}
-
-export const snakeCaseToTitleCase = (word) => {
-  const result = word.replace(/([A-Z])/g, ' $1')
-  return result.charAt(0).toUpperCase() + result.slice(1)
-}

package/src/ui/utils/hooks/index.js

@@ -1,3 +0,0 @@
-export { default as useWindowSize } from './useWindowSize'
-export { default as useDynamicPosition } from './useDynamicPosition'
-export { default as useOutsideClick } from './useOutsideClick'

package/src/ui/utils/hooks/useDynamicPosition.js

@@ -1,104 +0,0 @@
-import {
-  useState, useEffect, useMemo, useCallback,
-} from 'react'
-import throttle from 'lodash/throttle'
-import useWindowSize from './useWindowSize'
-
-const verticalPositions = ['top', 'bottom']
-const horizontalPositions = ['left', 'right']
-
-const findCompatiblePositions = (primary, secondaryArray) => {
-  if (verticalPositions.includes(primary)) {
-    return secondaryArray.filter((secondary) => horizontalPositions.includes(secondary))
-  } if (horizontalPositions.includes(primary)) {
-    return secondaryArray.filter((secondary) => verticalPositions.includes(secondary))
-  }
-  return []
-}
-
-const useDynamicPosition = ({
-  elementRef,
-  parentRef,
-  preferredPrimaryOrder,
-  preferredSecondaryOrder,
-  // offsetYPx,
-  offsetXPx,
-  throttleMs = 200,
-}) => {
-  const isClient = typeof window === 'object'
-  const {
-    height:currentHeight,
-    width:currentWidth,
-  } = useWindowSize()
-
-  const [primaryPosition, setPrimaryPosition] = useState(preferredPrimaryOrder[0])
-  const compatibleSecondaryPositions = useMemo(
-    () => findCompatiblePositions(
-      primaryPosition,
-      preferredSecondaryOrder,
-    ), [primaryPosition, preferredSecondaryOrder],
-  )
-  const [secondaryPosition, setSecondaryPosition] = useState(compatibleSecondaryPositions[0])
-
-  const handle = useCallback(
-    throttle(() => {
-      const parentNode = parentRef?.current
-      const elementNode = elementRef?.current
-
-      const {
-        top:parentTop,
-        bottom: parentBottom,
-        right: parentRight,
-        left: parentLeft,
-      } = parentNode?.getBoundingClientRect() || {}
-
-      const {
-        width:elementWidth,
-        height:elementHeight,
-      } = elementNode?.getBoundingClientRect() || {}
-
-      const availablePositions = {
-        top   :parentTop >= elementHeight,
-        bottom:currentHeight - parentBottom >= elementHeight,
-        right :parentRight >= elementWidth,
-        left  :currentWidth - parentLeft >= elementWidth,
-      }
-
-      for (let i = 0; i < preferredPrimaryOrder.length; i += 1) {
-        const position = preferredPrimaryOrder[i]
-        if (availablePositions[position]) {
-          setPrimaryPosition(position)
-          break
-        }
-      }
-
-      for (let i = 0; i < compatibleSecondaryPositions.length; i += 1) {
-        const position = compatibleSecondaryPositions[i]
-        if (availablePositions[position]) {
-          setSecondaryPosition(position)
-          break
-        }
-      }
-    }, throttleMs),
-    [elementRef, offsetXPx, throttleMs],
-  )
-
-  useEffect(() => {
-    if (!isClient) {
-      return false
-    }
-
-    handle()
-    window.addEventListener('scroll', handle)
-    window.addEventListener('resize', handle)
-
-    return () => {
-      window.removeEventListener('scroll', handle)
-      window.removeEventListener('resize', handle)
-    }
-  }, [handle])
-
-  return { primaryPosition, secondaryPosition }
-}
-
-export default useDynamicPosition

package/src/ui/utils/hooks/useOutsideClick.js

@@ -1,23 +0,0 @@
-import { useEffect } from 'react'
-
-const useOutsideClick = (ref, callback) => {
-  // const ref = useRef(null)
-
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        callback()
-      }
-    }
-
-    document.addEventListener('mousedown', handleClickOutside)
-    document.addEventListener('touchstart', handleClickOutside)
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-      document.removeEventListener('touchstart', handleClickOutside)
-    }
-  }, [callback])
-}
-
-export default useOutsideClick

package/src/ui/utils/hooks/useWindowSize.js

@@ -1,32 +0,0 @@
-import { useCallback, useState, useEffect } from 'react'
-import debounce from 'lodash/debounce'
-
-const useWindowSize = (debounceMs = 700) => {
-  const isClient = typeof window === 'object'
-
-  const getSize = () => ({
-    width :isClient ? window.innerWidth : undefined,
-    height:isClient ? window.innerHeight : undefined,
-  })
-
-  const [windowSize, setWindowSize] = useState(getSize)
-
-  const handle = useCallback(
-    debounce(() => {
-      setWindowSize(getSize())
-    }, debounceMs),
-  )
-
-  useEffect(() => {
-    if (!isClient) {
-      return false
-    }
-
-    window.addEventListener('resize', handle)
-    return () => window.removeEventListener('resize', handle)
-  }, [getSize, handle, isClient])
-
-  return windowSize
-}
-
-export default useWindowSize

package/src/ui/utils/index.js

@@ -1,5 +0,0 @@
-export { useWindowSize, useDynamicPosition, useOutsideClick } from './hooks'
-export {
-  formatTime, formatDate, DATE_FORMATS, parseDate, snakeCaseToTitleCase,
-} from './formatting'
-export { applyCharacterLimit } from './applyCharacterLimit'

package/stylelint.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  extends:['@pareto-engineering/stylelint-config'],
-}

package/tests/Storyshots.test.js

@@ -1,3 +0,0 @@
-import initStoryshots from '@storybook/addon-storyshots'
-
-initStoryshots()