@loadsmart/loadsmart-ui 7.6.0 → 8.0.0-beta.1

package/src/theming/theming.helpers.ts

@@ -1,95 +0,0 @@
-import get from '../utils/toolset/get'
-
-type VariableValue = string | number
-
-type VariableMap = {
-  [key: string]: VariableValue
-}
-
-export function generateColorGetter(
-  colors: VariableMap
-): (name: string, opacity?: number) => VariableValue {
-  /**
-   * Gets color from color token, applying an optional opacity.
-   * @param {string} name - Color token.
-   * @param {number} [opacity] - Opacity value.
-   */
-  return function color(name: string, opacity?: number): VariableValue {
-    const rawColor = get(colors, `color-${name}`)
-
-    if (opacity == null) {
-      return rawColor
-    }
-
-    const opacityAsHex = (opacity * 255).toString(16)
-    return `${rawColor}${opacityAsHex}`
-  }
-}
-
-export function generateSpacingGetter(spacings: VariableMap): (name: string) => VariableValue {
-  return function spacing(name: string): VariableValue {
-    return get(spacings, `space-${name}`)
-  }
-}
-
-export function generateShadowGetter(shadows: VariableMap): (name: string) => VariableValue {
-  return function shadow(name: string): VariableValue {
-    return get(shadows, `shadow-${name}`)
-  }
-}
-
-export function generateFontGetters({
-  families,
-  sizes,
-  weights,
-  heights,
-}: {
-  families: VariableMap
-  sizes: VariableMap
-  weights: VariableMap
-  heights: VariableMap
-}): { [key: string]: (name: string) => VariableValue } {
-  return {
-    family(name) {
-      return get(families, `font-family-${name}`)
-    },
-    size(name) {
-      return get(sizes, `font-size-${name}`)
-    },
-    weight(name) {
-      return get(weights, `font-weight-${name}`)
-    },
-    height(name) {
-      return get(heights, `font-height-${name}`)
-    },
-  }
-}
-
-export function generateOpacityGetter(opacities: VariableMap): (name: string) => VariableValue {
-  return function opacity(name: string): VariableValue {
-    return get(opacities, `opacity-${name}`)
-  }
-}
-
-export function generateBorderGetters({
-  radiuses,
-  widths,
-}: {
-  radiuses: VariableMap
-  widths: VariableMap
-}): Record<string, (name: string) => VariableValue> {
-  return {
-    radius(name) {
-      return get(radiuses, `border-radius-${name}`)
-    },
-    width(name) {
-      return get(widths, `border-width-${name}`)
-    },
-  }
-}
-
-export function generateHeightGetter(heights: VariableMap): (name: string) => VariableValue {
-  return function height(name: string): VariableValue {
-    return get(heights, `height-${name}`)
-  }
-}

package/src/tools/conditional.test.ts

@@ -1,166 +0,0 @@
-import conditional, { whenProps } from './conditional'
-import generator from '../tests/generator'
-
-describe('conditional', () => {
-  describe('whenProps', () => {
-    it('returns functions correctly', () => {
-      expect(typeof whenProps({ a: 1, b: 2 })).toBe('function')
-    })
-
-    it('calculates single `whenProps` condition correctly', () => {
-      const props = {
-        a: 1,
-        b: 2,
-        c: 3,
-      }
-
-      expect(whenProps({ a: 1, b: 2 })(props)).toBe(true)
-      expect(whenProps({ a: 2, b: 2 })(props)).toBe(false)
-
-      expect(whenProps({ b: [1, 2] })(props)).toBe(true)
-      expect(whenProps({ b: [1, 3] })(props)).toBe(false)
-
-      expect(whenProps({ c: 3 })(props)).toBe(true)
-
-      expect(whenProps({ a: (value: number) => value === 1 })(props)).toBe(true)
-      expect(whenProps({ b: (value: number) => value !== 1 })(props)).toBe(true)
-    })
-
-    it('calculates composite `whenProps` condition correctly', () => {
-      const props = {
-        a: 1,
-        b: 2,
-        c: 3,
-      }
-
-      expect(whenProps([{ a: 1 }, { b: 1 }])(props)).toBe(true)
-    })
-
-    it('calculates complex `whenProps` condition correctly', () => {
-      const props = {
-        a: 1,
-        b: 2,
-        c: 3,
-      }
-
-      expect(whenProps([{ a: 1 }, { b: 1 }, { c: [1, 2, 3] }])(props)).toBe(true)
-    })
-
-    it('calculates complex `whenProps` condition correctly', () => {
-      const props = {
-        a: 1,
-        b: 2,
-        c: 3,
-      }
-
-      expect(whenProps([{ a: 1 }, { b: 1 }, { c: [1, 2, 3] }])(props)).toBe(true)
-      expect(whenProps([{ a: 2 }, { b: 3 }, { c: [4, 5, 6] }])(props)).toBe(false)
-    })
-  })
-
-  describe('conditional', () => {
-    const PROPS_WITH_THEME = {
-      theme: {
-        'token-1': `${generator.natural({ min: 1, max: 15 })}px`,
-        'token-2': `${generator.natural({ min: 1, max: 15 })}px`,
-      },
-    }
-
-    it('returns correct value(s) based on primitive booleans', () => {
-      expect(
-        conditional({
-          'value-a': true,
-          'value-b': true,
-          'value-c': true,
-        })(PROPS_WITH_THEME)
-      ).toBe('value-a value-b value-c')
-
-      expect(
-        conditional({
-          'value-a': true,
-          'value-b': false,
-          'value-c': true,
-        })(PROPS_WITH_THEME)
-      ).toBe('value-a value-c')
-
-      expect(
-        conditional({
-          'value-a': true,
-          'value-b': true,
-          'value-c': false,
-        })(PROPS_WITH_THEME)
-      ).toBe('value-a value-b')
-
-      expect(
-        conditional({
-          'value-a': false,
-          'value-b': false,
-          'value-c': false,
-        })(PROPS_WITH_THEME)
-      ).toBe('')
-    })
-
-    it('returns correct value(s) based on `prop` helper return', () => {
-      const props = {
-        ...PROPS_WITH_THEME,
-        a: 1,
-        b: 2,
-        c: 3,
-      }
-
-      expect(
-        conditional({
-          'value-a': whenProps({ a: 1 }),
-          'value-b': whenProps({ b: 2 }),
-          'value-c': whenProps({ c: 3 }),
-        })(props)
-      ).toBe('value-a value-b value-c')
-
-      expect(
-        conditional({
-          'value-a': whenProps({ a: 1 }),
-          'value-b': whenProps({ b: [1, 2, 3] }),
-          'value-c': whenProps({ c: 'any value' }),
-        })(props)
-      ).toBe('value-a value-b')
-
-      expect(
-        conditional({
-          'value-a': whenProps({ a: false }),
-          'value-b': whenProps({ b: [1, 2, 3] }),
-          'value-c': whenProps([{ a: 1 }, { c: 'any value' }]),
-          'value-d': whenProps({ a: 1, b: (value: number) => value === 2 }),
-        })(props)
-      ).toBe('value-b value-c value-d')
-
-      expect(
-        conditional(
-          'value-0',
-          {
-            'value-a': whenProps({ a: false }),
-            'value-b': whenProps({ b: [1, 2, 3] }),
-            'value-c': whenProps([{ a: 1 }, { c: 'any value' }]),
-            'value-d': whenProps({ a: 1 }) && props.b === 2,
-          },
-          'value-n'
-        )(props)
-      ).toBe('value-0 value-b value-c value-d value-n')
-    })
-
-    it('returns a theme token value, if the condition key is a theme token', () => {
-      expect(
-        `margin: ${conditional({
-          'token-1': true,
-          'token-2': false,
-        })(PROPS_WITH_THEME)};`
-      ).toBe(`margin: ${PROPS_WITH_THEME.theme['token-1']};`)
-
-      expect(
-        `margin: ${conditional({
-          'token-2': true,
-          '5px': true,
-        })(PROPS_WITH_THEME)};`
-      ).toBe(`margin: ${PROPS_WITH_THEME.theme['token-2']} 5px;`)
-    })
-  })
-})

package/src/tools/conditional.ts

@@ -1,127 +0,0 @@
-import { isObject } from '@loadsmart/utils-object'
-import { isFunction } from '@loadsmart/utils-function'
-import type { F } from 'ts-toolbelt'
-
-import { getToken } from 'theming'
-import type { ThemeToken, ThemedProps } from 'theming'
-import get from 'utils/toolset/get'
-import toArray from 'utils/toolset/toArray'
-
-type WhenProps<K> = K | undefined | ((value: K) => boolean | undefined)
-
-export type When<P> = {
-  [Key in keyof P]?: WhenProps<P[Key]> | WhenProps<P[Key]>[] | undefined
-}
-
-/**
- * Utility to generate style/class name conditions based on a components props.
- * Expected prop values can be a single value, an array of values or a function/callback.
- * @example
- * ```jsx
- * whenProps({
- *  'prop-a': true, // checks `props['prop-a']` === true`
- *  'prop-b': [1, 2], // checks `toArray([1, 2]).includes(props['prop-b'])`
- *  'prop-c': (value) => value + 1 // checks `Boolean(callback(props['prop-c']))`
- *  'prop-d': Boolean // checks `Boolean(Boolean(props['prop-d']))`
- * })
- * ```
- * @param {...Object} conditions
- * @returns {(props: Object}) => boolean} Returns function that consumes component props.
- */
-export function whenProps<P>(conditions: When<F.Narrow<P>> | When<F.Narrow<P>>[]) {
-  return function (props: P): boolean {
-    const safeConditions = toArray(conditions)
-
-    let res = false
-
-    for (let i = 0; i < safeConditions.length; i++) {
-      const condition = safeConditions[i]
-      const keys = Object.keys(condition)
-
-      let temp = true
-
-      for (let j = 0; j < keys.length && temp; j++) {
-        const key = keys[j]
-        const propValue = get(props, key) as P[keyof P]
-        const conditionValue = condition[key as keyof typeof condition]
-
-        if (Array.isArray(conditionValue)) {
-          temp = temp && toArray(conditionValue).includes(propValue)
-        } else if (isFunction(conditionValue)) {
-          temp = temp && Boolean(conditionValue(propValue))
-        } else {
-          temp = temp && (conditionValue as unknown) === propValue
-        }
-      }
-
-      res = res || temp
-    }
-
-    return res
-  }
-}
-
-type ConditionObject<P> = Record<
-  string,
-  string | number | boolean | ((props: P) => boolean) | undefined
->
-
-function handleConditionObject<P>(condition: ConditionObject<P>, props: P): string {
-  const keys = Object.keys(condition || {})
-
-  const res = keys.reduce((acc, key) => {
-    let value = condition[key]
-
-    if (isFunction(value)) {
-      value = value(props)
-    }
-
-    if (value) {
-      const tokenKey = key as ThemeToken
-      const result = (getToken(tokenKey, props as unknown as ThemedProps) ?? key) as string
-      return [...acc, result]
-    }
-
-    return acc
-  }, [] as string[])
-
-  return res.join(' ')
-}
-
-type Condition<P> = number | string | ConditionObject<P> | ((props: P) => string)
-
-/**
- * Concatenate style properties or class names conditionally.
- * Conditions can be functions that consume components props,
- * objects, strings, or numbers (that will be coerced to strings).
- * @example
- * ```jsx
- * conditional(1, 'some-class', {
- *  'class-a': true,
- *  'class-b': (props) => props.showClassB,
- * }, (props) => props.className)
- * ```
- * @param conditions
- * @returns {(props: ThemedProps) => string} Returns function that consumes component props.
- */
-function conditional<P>(...conditions: Condition<P>[]) {
-  return function (props: P): string {
-    let classes: string[] = []
-
-    for (let i = 0; i < conditions.length; i++) {
-      const condition = conditions[i]
-
-      if (isFunction(condition)) {
-        classes.push(condition(props))
-      } else if (isObject(condition)) {
-        classes = classes.concat(handleConditionObject<P>(condition, props))
-      } else if (condition) {
-        classes.push(String(condition))
-      }
-    }
-
-    return classes.join(' ')
-  }
-}
-
-export default conditional

package/src/tools/index.ts

@@ -1,2 +0,0 @@
-export { default as conditional, whenProps } from './conditional'
-export { default as prop } from './prop'

package/src/tools/prop.test.ts

@@ -1,52 +0,0 @@
-import prop from './prop'
-
-type WithKey<T = unknown> = {
-  key?: T
-}
-
-describe('prop', () => {
-  describe('when theres no default value and only a property name is provided', () => {
-    const get = prop<WithKey>('key')
-
-    it('should always return the value', () => {
-      const allValues = [undefined, null, false, true, NaN, 0, 1, '', 'value', {}]
-
-      allValues.forEach((value) => {
-        expect(get({ key: value })).toEqual(value)
-      })
-    })
-  })
-
-  describe('when a default value is provided', () => {
-    const get = prop<WithKey>('key', 'default')
-
-    it('should return the default value if key has an invalid value', () => {
-      const invalidValues = [undefined, null, false, NaN, '']
-
-      invalidValues.forEach((invalid) => {
-        expect(get({ key: invalid })).toBe('default')
-      })
-    })
-
-    it('should return the value of a valid property value', () => {
-      const validValues = ['value', true, 0, 1, {}]
-
-      validValues.forEach((valid) => {
-        expect(get({ key: valid })).toBe(valid)
-      })
-    })
-  })
-
-  describe('given a comparator function', () => {
-    it('should call it with value and default and return whatever its returns', () => {
-      const comparator = jest.fn(() => 'comparator')
-
-      expect(prop<WithKey>('key', 'default', comparator)({ key: 'value' })).toEqual('comparator')
-
-      expect(comparator).toHaveBeenCalledWith('value', 'default')
-
-      expect(prop<WithKey<number>>('key', 999, Math.min)({ key: 0 })).toEqual(0)
-      expect(prop<WithKey<number>>('key', 999, Math.max)({ key: 0 })).toEqual(999)
-    })
-  })
-})

package/src/tools/prop.ts

@@ -1,36 +0,0 @@
-function compare(...args: any[]): unknown {
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  const [value, defaultValue] = args
-
-  if (value == null || value === false || Number.isNaN(value)) {
-    return defaultValue || value
-  }
-
-  if (typeof value === 'string' && value.length === 0) {
-    return defaultValue || value
-  }
-
-  return value
-}
-
-/**
- * Retrieve the key value from the props object
- * @example
- * ```jsx
- * -transform: scaleY(${(props) => props.$height || 1});
- * +transform: scaleY(${prop('$height', 1)});
- * ```
- * @param name a valid property name from the object
- * @param defaultValue a fallback value in case the property value is invalid
- * @param comparatorFn a function to be used to decide between value or defaultValue
- * @returns {(props: ThemedProps) => string} Returns function that consumes component props.
- */
-function prop<P, K extends keyof P = keyof P>(
-  name: K,
-  defaultValue?: NonNullable<P[K]>,
-  comparatorFn = compare
-) {
-  return (props: P): P[K] => comparatorFn(props[name], defaultValue) as P[K]
-}
-
-export default prop

package/src/utils/toolset/awaitTo.ts

@@ -1,24 +0,0 @@
-/**
- * This is an async wrapper for waiting a promise to be settled without the hussle of handling error.
- * It returns `[error, data]`.
- * @example
- * const [error, data] = await genericTo(myPromise())
- * @param promise - promise to be awaited for.
- * @param errorExt - error to be appended, in case the promise is rejected.
- */
-function genericTo<T>(
-  promise: Promise<T>,
-  errorExt?: Record<string, unknown>
-): Promise<[any, T | undefined]> {
-  return promise
-    .then<[null, T]>((data: T) => [null, data])
-    .catch<[any, undefined]>((err: any) => {
-      if (errorExt) {
-        Object.assign(err, errorExt)
-      }
-
-      return [err, undefined]
-    })
-}
-
-export default genericTo

package/src/utils/toolset/flatten.ts

@@ -1,3 +0,0 @@
-import { flatten } from 'lodash'
-
-export default flatten

package/src/utils/toolset/formatBytes.test.ts

@@ -1,45 +0,0 @@
-import formatBytes from './formatBytes'
-
-describe('formatBytes', () => {
-  it('returns 0B if bytes is falsy', () => {
-    const size = formatBytes(0)
-    const expected = '0B'
-
-    expect(size).toBe(expected)
-  })
-
-  it('returns 0B if bytes is a negative number', () => {
-    const size = formatBytes(-100)
-    const expected = '0B'
-
-    expect(size).toBe(expected)
-  })
-
-  it('returns the size in YB if bytes is greater than 1024^8', () => {
-    const size = formatBytes(Math.pow(1024, 10))
-    const expected = '1YiB'
-
-    expect(size).toBe(expected)
-  })
-
-  it('returns 1KB if bytes is 1042', () => {
-    const size = formatBytes(1024)
-    const expected = '1KiB'
-
-    expect(size).toBe(expected)
-  })
-
-  it('returns the size with the defined amount of decimals', () => {
-    const size = formatBytes(10047, 5)
-    const expected = '9.81152KiB'
-
-    expect(size).toBe(expected)
-  })
-
-  it('returns the size with 2 decimals if not defined', () => {
-    const size = formatBytes(10047)
-    const expected = '9.81KiB'
-
-    expect(size).toBe(expected)
-  })
-})

package/src/utils/toolset/formatBytes.ts

@@ -1,18 +0,0 @@
-export const BYTES_PER_KILOBYTE = 1024
-export const FILE_SIZE_ABBREVIATIONS = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
-
-const formatBytes = (bytes: number, decimals = 2) => {
-  const bytesValue = Number(bytes)
-
-  if (!bytesValue || bytesValue < 0) {
-    return '0B'
-  }
-
-  const dm = Math.max(0, decimals)
-  const unit = Math.floor(Math.log(bytesValue) / Math.log(BYTES_PER_KILOBYTE))
-  const unitAbbr = FILE_SIZE_ABBREVIATIONS[Math.min(unit, FILE_SIZE_ABBREVIATIONS.length - 1)]
-
-  return `${parseFloat((bytesValue / Math.pow(BYTES_PER_KILOBYTE, unit)).toFixed(dm))}${unitAbbr}`
-}
-
-export default formatBytes

package/src/utils/toolset/get.ts

@@ -1,2 +0,0 @@
-import { get } from 'lodash'
-export default get

package/src/utils/toolset/getID.test.ts

@@ -1,57 +0,0 @@
-import { IDGenerator } from './getID'
-
-describe('IDGenerator', () => {
-  const getID = IDGenerator({ maxIDLength: 3, initialIDLength: 1, alphabet: 'abc' })
-
-  it('should generate a valid ID', () => {
-    const expected = [
-      'genid-a',
-      'genid-b',
-      'genid-c',
-      'genid-aa',
-      'genid-ab',
-      'genid-ac',
-      'genid-ba',
-      'genid-bb',
-      'genid-bc',
-      'genid-ca',
-      'genid-cb',
-      'genid-cc',
-      'genid-aaa',
-      'genid-aab',
-      'genid-aac',
-      'genid-aba',
-      'genid-abb',
-      'genid-abc',
-      'genid-aca',
-      'genid-acb',
-      'genid-acc',
-      'genid-baa',
-      'genid-bab',
-      'genid-bac',
-      'genid-bba',
-      'genid-bbb',
-      'genid-bbc',
-      'genid-bca',
-      'genid-bcb',
-      'genid-bcc',
-      'genid-caa',
-      'genid-cab',
-      'genid-cac',
-      'genid-cba',
-      'genid-cbb',
-      'genid-cbc',
-      'genid-cca',
-      'genid-ccb',
-      'genid-ccc',
-    ]
-
-    for (let i = 0; i < expected.length; i++) {
-      expect(getID()).toBe(expected[i])
-    }
-
-    expect(() => {
-      getID()
-    }).toThrow('No more IDs available with the provided alphabet and max length')
-  })
-})