kdutify 0.16.9-rc.0 → 2.6.0

package/src/util/colorUtils.ts

@@ -0,0 +1,249 @@
+// Utilities
+import { consoleWarn } from './console'
+import { chunk, padEnd } from './helpers'
+import { toXYZ } from './color/transformSRGB'
+
+// Types
+import { KdutifyThemeVariant } from 'types/services/theme'
+
+export type ColorInt = number
+export type XYZ = [number, number, number]
+export type LAB = [number, number, number]
+export type HSV = { h: number, s: number, v: number }
+export type HSVA = HSV & { a: number }
+export type RGB = { r: number, g: number, b: number }
+export type RGBA = RGB & { a: number }
+export type HSL = { h: number, s: number, l: number }
+export type HSLA = HSL & { a: number }
+export type Hex = string
+export type Hexa = string
+export type Color = string | number | {}
+
+export function isCssColor (color?: string | false): boolean {
+  return !!color && !!color.match(/^(#|var\(--|(rgb|hsl)a?\()/)
+}
+
+export function colorToInt (color: Color): ColorInt {
+  let rgb
+
+  if (typeof color === 'number') {
+    rgb = color
+  } else if (typeof color === 'string') {
+    let c = color[0] === '#' ? color.substring(1) : color
+    if (c.length === 3) {
+      c = c.split('').map(char => char + char).join('')
+    }
+    if (c.length !== 6) {
+      consoleWarn(`'${color}' is not a valid rgb color`)
+    }
+    rgb = parseInt(c, 16)
+  } else {
+    throw new TypeError(`Colors can only be numbers or strings, recieved ${color == null ? color : color.constructor.name} instead`)
+  }
+
+  if (rgb < 0) {
+    consoleWarn(`Colors cannot be negative: '${color}'`)
+    rgb = 0
+  } else if (rgb > 0xffffff || isNaN(rgb)) {
+    consoleWarn(`'${color}' is not a valid rgb color`)
+    rgb = 0xffffff
+  }
+
+  return rgb
+}
+
+export function classToHex (
+  color: string,
+  colors: Record<string, Record<string, string>>,
+  currentTheme: Partial<KdutifyThemeVariant>,
+): string {
+  const [colorName, colorModifier] = color
+    .toString().trim().replace('-', '').split(' ', 2) as (string | undefined)[]
+
+  let hexColor = ''
+  if (colorName && colorName in colors) {
+    if (colorModifier && colorModifier in colors[colorName]) {
+      hexColor = colors[colorName][colorModifier]
+    } else if ('base' in colors[colorName]) {
+      hexColor = colors[colorName].base
+    }
+  } else if (colorName && colorName in currentTheme) {
+    hexColor = currentTheme[colorName] as string
+  }
+
+  return hexColor
+}
+
+export function intToHex (color: ColorInt): string {
+  let hexColor: string = color.toString(16)
+
+  if (hexColor.length < 6) hexColor = '0'.repeat(6 - hexColor.length) + hexColor
+
+  return '#' + hexColor
+}
+
+export function colorToHex (color: Color): string {
+  return intToHex(colorToInt(color))
+}
+
+/**
+ * Converts HSVA to RGBA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV
+ *
+ * @param color HSVA color as an array [0-360, 0-1, 0-1, 0-1]
+ */
+export function HSVAtoRGBA (hsva: HSVA): RGBA {
+  const { h, s, v, a } = hsva
+  const f = (n: number) => {
+    const k = (n + (h / 60)) % 6
+    return v - v * s * Math.max(Math.min(k, 4 - k, 1), 0)
+  }
+
+  const rgb = [f(5), f(3), f(1)].map(v => Math.round(v * 255))
+
+  return { r: rgb[0], g: rgb[1], b: rgb[2], a }
+}
+
+/**
+ * Converts RGBA to HSVA. Based on formula from https://en.wikipedia.org/wiki/HSL_and_HSV
+ *
+ * @param color RGBA color as an array [0-255, 0-255, 0-255, 0-1]
+ */
+export function RGBAtoHSVA (rgba: RGBA): HSVA {
+  if (!rgba) return { h: 0, s: 1, v: 1, a: 1 }
+
+  const r = rgba.r / 255
+  const g = rgba.g / 255
+  const b = rgba.b / 255
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+
+  let h = 0
+
+  if (max !== min) {
+    if (max === r) {
+      h = 60 * (0 + ((g - b) / (max - min)))
+    } else if (max === g) {
+      h = 60 * (2 + ((b - r) / (max - min)))
+    } else if (max === b) {
+      h = 60 * (4 + ((r - g) / (max - min)))
+    }
+  }
+
+  if (h < 0) h = h + 360
+
+  const s = max === 0 ? 0 : (max - min) / max
+  const hsv = [h, s, max]
+
+  return { h: hsv[0], s: hsv[1], v: hsv[2], a: rgba.a }
+}
+
+export function HSVAtoHSLA (hsva: HSVA): HSLA {
+  const { h, s, v, a } = hsva
+
+  const l = v - (v * s / 2)
+
+  const sprime = l === 1 || l === 0 ? 0 : (v - l) / Math.min(l, 1 - l)
+
+  return { h, s: sprime, l, a }
+}
+
+export function HSLAtoHSVA (hsl: HSLA): HSVA {
+  const { h, s, l, a } = hsl
+
+  const v = l + s * Math.min(l, 1 - l)
+
+  const sprime = v === 0 ? 0 : 2 - (2 * l / v)
+
+  return { h, s: sprime, v, a }
+}
+
+export function RGBAtoCSS (rgba: RGBA): string {
+  return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`
+}
+
+export function RGBtoCSS (rgba: RGBA): string {
+  return RGBAtoCSS({ ...rgba, a: 1 })
+}
+
+export function RGBAtoHex (rgba: RGBA): Hex {
+  const toHex = (v: number) => {
+    const h = Math.round(v).toString(16)
+    return ('00'.substr(0, 2 - h.length) + h).toUpperCase()
+  }
+
+  return `#${[
+    toHex(rgba.r),
+    toHex(rgba.g),
+    toHex(rgba.b),
+    toHex(Math.round(rgba.a * 255)),
+  ].join('')}`
+}
+
+export function HexToRGBA (hex: Hex): RGBA {
+  const rgba = chunk(hex.slice(1), 2).map((c: string) => parseInt(c, 16))
+
+  return {
+    r: rgba[0],
+    g: rgba[1],
+    b: rgba[2],
+    a: Math.round((rgba[3] / 255) * 100) / 100,
+  }
+}
+
+export function HexToHSVA (hex: Hex): HSVA {
+  const rgb = HexToRGBA(hex)
+  return RGBAtoHSVA(rgb)
+}
+
+export function HSVAtoHex (hsva: HSVA): Hex {
+  return RGBAtoHex(HSVAtoRGBA(hsva))
+}
+
+export function parseHex (hex: string): Hex {
+  if (hex.startsWith('#')) {
+    hex = hex.slice(1)
+  }
+
+  hex = hex.replace(/([^0-9a-f])/gi, 'F')
+
+  if (hex.length === 3 || hex.length === 4) {
+    hex = hex.split('').map(x => x + x).join('')
+  }
+
+  if (hex.length === 6) {
+    hex = padEnd(hex, 8, 'F')
+  } else {
+    hex = padEnd(padEnd(hex, 6), 8, 'F')
+  }
+
+  return `#${hex}`.toUpperCase().substr(0, 9)
+}
+
+export function parseGradient (
+  gradient: string,
+  colors: Record<string, Record<string, string>>,
+  currentTheme: Partial<KdutifyThemeVariant>,
+) {
+  return gradient.replace(/([a-z]+(\s[a-z]+-[1-5])?)(?=$|,)/gi, x => {
+    return classToHex(x, colors, currentTheme) || x
+  }).replace(/(rgba\()#[0-9a-f]+(?=,)/gi, x => {
+    return 'rgba(' + Object.values(HexToRGBA(parseHex(x.replace(/rgba\(/, '')))).slice(0, 3).join(',')
+  })
+}
+
+export function RGBtoInt (rgba: RGBA): ColorInt {
+  return (rgba.r << 16) + (rgba.g << 8) + rgba.b
+}
+
+/**
+ * Returns the contrast ratio (1-21) between two colors.
+ *
+ * @param c1 First color
+ * @param c2 Second color
+ */
+export function contrastRatio (c1: RGBA, c2: RGBA): number {
+  const [, y1] = toXYZ(RGBtoInt(c1))
+  const [, y2] = toXYZ(RGBtoInt(c2))
+
+  return (Math.max(y1, y2) + 0.05) / (Math.min(y1, y2) + 0.05)
+}

package/src/util/colors.ts

@@ -0,0 +1,339 @@
+const red = Object.freeze({
+  base: '#f44336',
+  lighten5: '#ffebee',
+  lighten4: '#ffcdd2',
+  lighten3: '#ef9a9a',
+  lighten2: '#e57373',
+  lighten1: '#ef5350',
+  darken1: '#e53935',
+  darken2: '#d32f2f',
+  darken3: '#c62828',
+  darken4: '#b71c1c',
+  accent1: '#ff8a80',
+  accent2: '#ff5252',
+  accent3: '#ff1744',
+  accent4: '#d50000',
+})
+
+const pink = Object.freeze({
+  base: '#e91e63',
+  lighten5: '#fce4ec',
+  lighten4: '#f8bbd0',
+  lighten3: '#f48fb1',
+  lighten2: '#f06292',
+  lighten1: '#ec407a',
+  darken1: '#d81b60',
+  darken2: '#c2185b',
+  darken3: '#ad1457',
+  darken4: '#880e4f',
+  accent1: '#ff80ab',
+  accent2: '#ff4081',
+  accent3: '#f50057',
+  accent4: '#c51162',
+})
+
+const purple = Object.freeze({
+  base: '#9c27b0',
+  lighten5: '#f3e5f5',
+  lighten4: '#e1bee7',
+  lighten3: '#ce93d8',
+  lighten2: '#ba68c8',
+  lighten1: '#ab47bc',
+  darken1: '#8e24aa',
+  darken2: '#7b1fa2',
+  darken3: '#6a1b9a',
+  darken4: '#4a148c',
+  accent1: '#ea80fc',
+  accent2: '#e040fb',
+  accent3: '#d500f9',
+  accent4: '#aa00ff',
+})
+
+const deepPurple = Object.freeze({
+  base: '#673ab7',
+  lighten5: '#ede7f6',
+  lighten4: '#d1c4e9',
+  lighten3: '#b39ddb',
+  lighten2: '#9575cd',
+  lighten1: '#7e57c2',
+  darken1: '#5e35b1',
+  darken2: '#512da8',
+  darken3: '#4527a0',
+  darken4: '#311b92',
+  accent1: '#b388ff',
+  accent2: '#7c4dff',
+  accent3: '#651fff',
+  accent4: '#6200ea',
+})
+
+const indigo = Object.freeze({
+  base: '#3f51b5',
+  lighten5: '#e8eaf6',
+  lighten4: '#c5cae9',
+  lighten3: '#9fa8da',
+  lighten2: '#7986cb',
+  lighten1: '#5c6bc0',
+  darken1: '#3949ab',
+  darken2: '#303f9f',
+  darken3: '#283593',
+  darken4: '#1a237e',
+  accent1: '#8c9eff',
+  accent2: '#536dfe',
+  accent3: '#3d5afe',
+  accent4: '#304ffe',
+})
+
+const blue = Object.freeze({
+  base: '#2196f3',
+  lighten5: '#e3f2fd',
+  lighten4: '#bbdefb',
+  lighten3: '#90caf9',
+  lighten2: '#64b5f6',
+  lighten1: '#42a5f5',
+  darken1: '#1e88e5',
+  darken2: '#1976d2',
+  darken3: '#1565c0',
+  darken4: '#0d47a1',
+  accent1: '#82b1ff',
+  accent2: '#448aff',
+  accent3: '#2979ff',
+  accent4: '#2962ff',
+})
+
+const lightBlue = Object.freeze({
+  base: '#03a9f4',
+  lighten5: '#e1f5fe',
+  lighten4: '#b3e5fc',
+  lighten3: '#81d4fa',
+  lighten2: '#4fc3f7',
+  lighten1: '#29b6f6',
+  darken1: '#039be5',
+  darken2: '#0288d1',
+  darken3: '#0277bd',
+  darken4: '#01579b',
+  accent1: '#80d8ff',
+  accent2: '#40c4ff',
+  accent3: '#00b0ff',
+  accent4: '#0091ea',
+})
+
+const cyan = Object.freeze({
+  base: '#00bcd4',
+  lighten5: '#e0f7fa',
+  lighten4: '#b2ebf2',
+  lighten3: '#80deea',
+  lighten2: '#4dd0e1',
+  lighten1: '#26c6da',
+  darken1: '#00acc1',
+  darken2: '#0097a7',
+  darken3: '#00838f',
+  darken4: '#006064',
+  accent1: '#84ffff',
+  accent2: '#18ffff',
+  accent3: '#00e5ff',
+  accent4: '#00b8d4',
+})
+
+const teal = Object.freeze({
+  base: '#009688',
+  lighten5: '#e0f2f1',
+  lighten4: '#b2dfdb',
+  lighten3: '#80cbc4',
+  lighten2: '#4db6ac',
+  lighten1: '#26a69a',
+  darken1: '#00897b',
+  darken2: '#00796b',
+  darken3: '#00695c',
+  darken4: '#004d40',
+  accent1: '#a7ffeb',
+  accent2: '#64ffda',
+  accent3: '#1de9b6',
+  accent4: '#00bfa5',
+})
+
+const green = Object.freeze({
+  base: '#4caf50',
+  lighten5: '#e8f5e9',
+  lighten4: '#c8e6c9',
+  lighten3: '#a5d6a7',
+  lighten2: '#81c784',
+  lighten1: '#66bb6a',
+  darken1: '#43a047',
+  darken2: '#388e3c',
+  darken3: '#2e7d32',
+  darken4: '#1b5e20',
+  accent1: '#b9f6ca',
+  accent2: '#69f0ae',
+  accent3: '#00e676',
+  accent4: '#00c853',
+})
+
+const lightGreen = Object.freeze({
+  base: '#8bc34a',
+  lighten5: '#f1f8e9',
+  lighten4: '#dcedc8',
+  lighten3: '#c5e1a5',
+  lighten2: '#aed581',
+  lighten1: '#9ccc65',
+  darken1: '#7cb342',
+  darken2: '#689f38',
+  darken3: '#558b2f',
+  darken4: '#33691e',
+  accent1: '#ccff90',
+  accent2: '#b2ff59',
+  accent3: '#76ff03',
+  accent4: '#64dd17',
+})
+
+const lime = Object.freeze({
+  base: '#cddc39',
+  lighten5: '#f9fbe7',
+  lighten4: '#f0f4c3',
+  lighten3: '#e6ee9c',
+  lighten2: '#dce775',
+  lighten1: '#d4e157',
+  darken1: '#c0ca33',
+  darken2: '#afb42b',
+  darken3: '#9e9d24',
+  darken4: '#827717',
+  accent1: '#f4ff81',
+  accent2: '#eeff41',
+  accent3: '#c6ff00',
+  accent4: '#aeea00',
+})
+
+const yellow = Object.freeze({
+  base: '#ffeb3b',
+  lighten5: '#fffde7',
+  lighten4: '#fff9c4',
+  lighten3: '#fff59d',
+  lighten2: '#fff176',
+  lighten1: '#ffee58',
+  darken1: '#fdd835',
+  darken2: '#fbc02d',
+  darken3: '#f9a825',
+  darken4: '#f57f17',
+  accent1: '#ffff8d',
+  accent2: '#ffff00',
+  accent3: '#ffea00',
+  accent4: '#ffd600',
+})
+
+const amber = Object.freeze({
+  base: '#ffc107',
+  lighten5: '#fff8e1',
+  lighten4: '#ffecb3',
+  lighten3: '#ffe082',
+  lighten2: '#ffd54f',
+  lighten1: '#ffca28',
+  darken1: '#ffb300',
+  darken2: '#ffa000',
+  darken3: '#ff8f00',
+  darken4: '#ff6f00',
+  accent1: '#ffe57f',
+  accent2: '#ffd740',
+  accent3: '#ffc400',
+  accent4: '#ffab00',
+})
+
+const orange = Object.freeze({
+  base: '#ff9800',
+  lighten5: '#fff3e0',
+  lighten4: '#ffe0b2',
+  lighten3: '#ffcc80',
+  lighten2: '#ffb74d',
+  lighten1: '#ffa726',
+  darken1: '#fb8c00',
+  darken2: '#f57c00',
+  darken3: '#ef6c00',
+  darken4: '#e65100',
+  accent1: '#ffd180',
+  accent2: '#ffab40',
+  accent3: '#ff9100',
+  accent4: '#ff6d00',
+})
+
+const deepOrange = Object.freeze({
+  base: '#ff5722',
+  lighten5: '#fbe9e7',
+  lighten4: '#ffccbc',
+  lighten3: '#ffab91',
+  lighten2: '#ff8a65',
+  lighten1: '#ff7043',
+  darken1: '#f4511e',
+  darken2: '#e64a19',
+  darken3: '#d84315',
+  darken4: '#bf360c',
+  accent1: '#ff9e80',
+  accent2: '#ff6e40',
+  accent3: '#ff3d00',
+  accent4: '#dd2c00',
+})
+
+const brown = Object.freeze({
+  base: '#795548',
+  lighten5: '#efebe9',
+  lighten4: '#d7ccc8',
+  lighten3: '#bcaaa4',
+  lighten2: '#a1887f',
+  lighten1: '#8d6e63',
+  darken1: '#6d4c41',
+  darken2: '#5d4037',
+  darken3: '#4e342e',
+  darken4: '#3e2723',
+})
+
+const blueGrey = Object.freeze({
+  base: '#607d8b',
+  lighten5: '#eceff1',
+  lighten4: '#cfd8dc',
+  lighten3: '#b0bec5',
+  lighten2: '#90a4ae',
+  lighten1: '#78909c',
+  darken1: '#546e7a',
+  darken2: '#455a64',
+  darken3: '#37474f',
+  darken4: '#263238',
+})
+
+const grey = Object.freeze({
+  base: '#9e9e9e',
+  lighten5: '#fafafa',
+  lighten4: '#f5f5f5',
+  lighten3: '#eeeeee',
+  lighten2: '#e0e0e0',
+  lighten1: '#bdbdbd',
+  darken1: '#757575',
+  darken2: '#616161',
+  darken3: '#424242',
+  darken4: '#212121',
+})
+
+const shades = Object.freeze({
+  black: '#000000',
+  white: '#ffffff',
+  transparent: 'transparent',
+})
+
+export default Object.freeze({
+  red,
+  pink,
+  purple,
+  deepPurple,
+  indigo,
+  blue,
+  lightBlue,
+  cyan,
+  teal,
+  green,
+  lightGreen,
+  lime,
+  yellow,
+  amber,
+  orange,
+  deepOrange,
+  brown,
+  blueGrey,
+  grey,
+  shades,
+})

package/src/util/component.ts

@@ -0,0 +1,21 @@
+/* eslint-disable max-len, import/export */
+import {
+  ComponentOptions,
+  RecordPropsDefinition,
+  ThisTypedComponentOptionsWithArrayProps,
+  ThisTypedComponentOptionsWithRecordProps,
+} from 'kdu/types/options'
+import { Kdu } from 'kdu/types/kdu'
+import { FunctionalComponentOptions } from 'kdu'
+
+type V = Kdu
+
+// Maybe don't actually use this, it doesn't work very well
+export default function component<Data, Methods, Computed, PropNames extends string = never> (options?: ThisTypedComponentOptionsWithArrayProps<V, Data, Methods, Computed, PropNames>): ThisTypedComponentOptionsWithArrayProps<V, Data, Methods, Computed, PropNames>
+export default function component<Data, Methods, Computed, Props> (options?: ThisTypedComponentOptionsWithRecordProps<V, Data, Methods, Computed, Props>): ThisTypedComponentOptionsWithRecordProps<V, Data, Methods, Computed, Props>
+export default function component<PropNames extends string = never> (definition: FunctionalComponentOptions<Record<PropNames, any>, PropNames[]>): FunctionalComponentOptions<Record<PropNames, any>, PropNames[]>
+export default function component<Props> (definition: FunctionalComponentOptions<Props, RecordPropsDefinition<Props>>): FunctionalComponentOptions<Props, RecordPropsDefinition<Props>>
+export default function component (options?: ComponentOptions<V>): ComponentOptions<V>
+export default function component<T> (options: T): T {
+  return options
+}

package/src/util/console.ts

@@ -0,0 +1,110 @@
+/* eslint-disable no-console */
+import Kdutify from '../framework'
+
+function createMessage (message: string, vm?: any, parent?: any): string | void {
+  if (Kdutify.config.silent) return
+
+  if (parent) {
+    vm = {
+      _isKdu: true,
+      $parent: parent,
+      $options: vm,
+    }
+  }
+
+  if (vm) {
+    // Only show each message once per instance
+    vm.$_alreadyWarned = vm.$_alreadyWarned || []
+    if (vm.$_alreadyWarned.includes(message)) return
+    vm.$_alreadyWarned.push(message)
+  }
+
+  return `[Kdutify] ${message}` + (
+    vm ? generateComponentTrace(vm) : ''
+  )
+}
+
+export function consoleInfo (message: string, vm?: any, parent?: any): void {
+  const newMessage = createMessage(message, vm, parent)
+  newMessage != null && console.info(newMessage)
+}
+
+export function consoleWarn (message: string, vm?: any, parent?: any): void {
+  const newMessage = createMessage(message, vm, parent)
+  newMessage != null && console.warn(newMessage)
+}
+
+export function consoleError (message: string, vm?: any, parent?: any): void {
+  const newMessage = createMessage(message, vm, parent)
+  newMessage != null && console.error(newMessage)
+}
+
+export function deprecate (original: string, replacement: string, vm?: any, parent?: any) {
+  consoleWarn(`[UPGRADE] '${original}' is deprecated, use '${replacement}' instead.`, vm, parent)
+}
+export function breaking (original: string, replacement: string, vm?: any, parent?: any) {
+  consoleError(`[BREAKING] '${original}' has been removed, use '${replacement}' instead.`, vm, parent)
+}
+export function removed (original: string, vm?: any, parent?: any) {
+  consoleWarn(`[REMOVED] '${original}' has been removed. You can safely omit it.`, vm, parent)
+}
+
+const classifyRE = /(?:^|[-_])(\w)/g
+const classify = (str: string) => str
+  .replace(classifyRE, c => c.toUpperCase())
+  .replace(/[-_]/g, '')
+
+function formatComponentName (vm: any, includeFile?: boolean): string {
+  if (vm.$root === vm) {
+    return '<Root>'
+  }
+  const options = typeof vm === 'function' && vm.cid != null
+    ? vm.options
+    : vm._isKdu
+      ? vm.$options || vm.constructor.options
+      : vm || {}
+  let name = options.name || options._componentTag
+  const file = options.__file
+  if (!name && file) {
+    const match = file.match(/([^/\\]+)\.kdu$/)
+    name = match && match[1]
+  }
+
+  return (
+    (name ? `<${classify(name)}>` : `<Anonymous>`) +
+    (file && includeFile !== false ? ` at ${file}` : '')
+  )
+}
+
+function generateComponentTrace (vm: any): string {
+  if (vm._isKdu && vm.$parent) {
+    const tree: any[] = []
+    let currentRecursiveSequence = 0
+    while (vm) {
+      if (tree.length > 0) {
+        const last: any = tree[tree.length - 1]
+        if (last.constructor === vm.constructor) {
+          currentRecursiveSequence++
+          vm = vm.$parent
+          continue
+        } else if (currentRecursiveSequence > 0) {
+          tree[tree.length - 1] = [last, currentRecursiveSequence]
+          currentRecursiveSequence = 0
+        }
+      }
+      tree.push(vm)
+      vm = vm.$parent
+    }
+    return '\n\nfound in\n\n' + tree
+      .map((vm, i) => `${
+        i === 0 ? '---> ' : ' '.repeat(5 + i * 2)
+      }${
+        Array.isArray(vm)
+          ? `${formatComponentName(vm[0])}... (${vm[1]} recursive calls)`
+          : formatComponentName(vm)
+      }`)
+      .join('\n')
+  } else {
+    return `\n\n(found in ${formatComponentName(vm)})`
+  }
+}