@startupjs-ui/core 0.1.1 → 0.1.3

package/helpers/colorToRGBA.js

@@ -0,0 +1,13 @@
+import Color from 'color'
+
+const DEFAULT_OPACITY = 1
+
+export default function colorToRGBA (color, alpha) {
+  try {
+    const fadeRatio = (DEFAULT_OPACITY * 100 - alpha * 100) / 100
+    return Color(color).fade(fadeRatio).toString()
+  } catch (err) {
+    console.error('ERROR:', err.message)
+    return color
+  }
+}

package/helpers/index.js

@@ -0,0 +1,3 @@
+export { default as u } from './u'
+export { default as colorToRGBA } from './colorToRGBA'
+export { $ui } from './path'

package/helpers/path.js

@@ -0,0 +1,3 @@
+import { $ } from 'startupjs'
+
+export const $ui = $.session.ui

package/helpers/u.js

@@ -0,0 +1,3 @@
+export default function u (value = 0) {
+  return value * 8
+}

package/hooks/index.js

@@ -0,0 +1,4 @@
+export { default as useMedia } from './useMedia'
+export { default as useCssVariables } from './useCssVariables'
+export { default as useTransformCssVariables } from './useTransformCssVariables'
+export { default as useColors } from './useColors'

package/hooks/useColors.js

@@ -0,0 +1,16 @@
+import { useCallback } from 'react'
+import { variables as singletonVariables, defaultVariables } from 'startupjs'
+
+export default function useColors () {
+  return useCallback(getColor, [])
+}
+
+export function getColor (color, { prefix = '--color', convertToString = true } = {}) {
+  if (!color) return
+
+  const cssVar = `${prefix}-${color}`
+  const colorInstance = singletonVariables[cssVar] || defaultVariables[cssVar]
+  if (!colorInstance) return
+
+  return convertToString ? colorInstance.toString() : colorInstance
+}

package/hooks/useCssVariables.js

@@ -0,0 +1,5 @@
+import { variables as singletonVariables } from 'startupjs'
+
+export default function useCssVariables () {
+  return singletonVariables
+}

package/hooks/useMedia.en.mdx

@@ -0,0 +1,28 @@
+import useMedia from '../hooks/useMedia'
+import Button from './../components/Button/'
+import { faHome } from '@fortawesome/free-solid-svg-icons'
+
+# useMedia
+
+Allows you to determine a device resolution. Hook returns an object where key is media breakpoint (`wide`, `desktop`, `tablet`) and value is `true/false`. For example, using this hook you can create media queries.
+
+```jsx
+import { useMedia } from 'startupjs/ui'
+```
+
+## Media query example
+
+For the test, you need to change the width of the screen, the inscription "Home" from the button should disappear
+
+```jsx example
+const media = useMedia()
+const props = {}
+if (media.tablet) props.children = 'Home'
+return (
+  <Button
+    icon={faHome}
+    onPress={()=> alert('For testing, follow the described instructions')}
+    {...props}
+  />
+)
+```

package/hooks/useMedia.js

@@ -0,0 +1,37 @@
+import { Dimensions } from 'react-native'
+import { observable } from '@nx-js/observer-util'
+import debounce from 'lodash/debounce'
+import STYLES from './useMedia.styl'
+
+const { media } = STYLES
+
+const { mobile, ...MEDIA } = media // mobile is DEPRECATED
+const DIMENSIONS_UPDATE_DELAY = 200
+const mediaFlags = observable({})
+
+const debouncedUpdateMedia = debounce(
+  updateMediaFlags,
+  DIMENSIONS_UPDATE_DELAY,
+  { leading: false, trailing: true }
+)
+
+listenForMediaUpdates()
+
+export default function useMedia () {
+  return mediaFlags
+}
+
+function updateMediaFlags ({ window }) {
+  for (const breakpoint of Object.keys(MEDIA).reverse()) {
+    if (window.width >= MEDIA[breakpoint]) {
+      if (!mediaFlags[breakpoint]) mediaFlags[breakpoint] = true
+    } else {
+      if (mediaFlags[breakpoint]) mediaFlags[breakpoint] = false
+    }
+  }
+}
+
+function listenForMediaUpdates () {
+  updateMediaFlags({ window: Dimensions.get('window') })
+  Dimensions.addEventListener('change', debouncedUpdateMedia)
+}

package/hooks/useMedia.ru.mdx

@@ -0,0 +1,28 @@
+import useMedia from '../hooks/useMedia'
+import Button from './../components/Button/'
+import { faHome } from '@fortawesome/free-solid-svg-icons'
+
+# useMedia
+
+Позволяет определить разрешение устройства. Хук возвращает объект, где ключ - это медиа-точка останова (`wide`, `desktop`, `tablet`), а значение - `true/false`. Например, с помощью этого хука вы можете создавать медиа-запросы.
+
+```jsx
+import { useMedia } from 'startupjs/ui'
+```
+
+## Пример медиа-запроса
+
+Для теста нужно изменить ширину экрана, должна пропасть надпись "Home" из кнопки
+
+```jsx example
+const media = useMedia()
+const props = {}
+if (media.tablet) props.children = 'Home'
+return (
+  <Button
+    icon={faHome}
+    onPress={()=> alert('Для тестирования следуйте описанным инструкциям.')}
+    {...props}
+  />
+)
+```

package/hooks/useMedia.styl

@@ -0,0 +1,2 @@
+:export
+  media: $UI.media

package/hooks/useTransformCssVariables.js

@@ -0,0 +1,37 @@
+import { useCallback } from 'react'
+import { variables as singletonVariables } from 'startupjs'
+
+const VARS_REGEX = /"var\(\s*(--[A-Za-z0-9_-]+)\s*,?\s*(.*?)\s*\)"/g
+
+export default function useTransformCssVariables (styles) {
+  return useCallback(transformCssVariable, [])
+}
+
+function transformCssVariable (styles) {
+  let strStyles = JSON.stringify(styles)
+  strStyles = strStyles.replace(VARS_REGEX, (match, varName, varDefault) => {
+    let res
+    if (singletonVariables[varName] != null) {
+      res = singletonVariables[varName]
+    } else {
+      res = varDefault
+    }
+    if (typeof res === 'string') {
+      res = res.trim()
+      // replace 'px' value with a pure number
+      res = res.replace(/px$/, '')
+      // sometimes compiler returns wrapped brackets. Remove them
+      const bracketsCount = res.match(/^\(+/)?.[0]?.length || 0
+      res = res.substring(bracketsCount, res.length - bracketsCount)
+    }
+    if (!isNumeric(res)) {
+      res = `"${res}"`
+    }
+    return res
+  })
+  return JSON.parse(strStyles)
+}
+
+function isNumeric (num) {
+  return (typeof num === 'number' || (typeof num === 'string' && num.trim() !== '')) && !isNaN(num)
+}

package/index.d.ts

@@ -0,0 +1,79 @@
+import type * as React from 'react'
+
+export function u (value?: number): number
+
+export function colorToRGBA (color: string, alpha?: number): string
+
+export interface GetCssVariableOptions {
+  convertToString?: boolean
+}
+
+export type CssVariableValue = string | undefined | Record<string, any>
+
+export function getCssVariable (
+  cssVarName: string,
+  options?: GetCssVariableOptions
+): CssVariableValue
+
+export interface CssVariablesMeta {
+  palette?: Record<string, any>
+  colors?: Record<string, any>
+  componentColors?: Record<string, any>
+}
+
+export interface CssVariablesProps {
+  meta?: CssVariablesMeta
+  clear?: boolean
+  children?: React.ReactNode
+}
+
+export const CssVariables: React.ComponentType<CssVariablesProps>
+
+export const palette: Record<string, any>
+
+export function generateColors (
+  palette: Record<string, any>,
+  overrides?: Record<string, any>
+): Record<string, any>
+
+export function useCssVariablesMeta (options: {
+  staticOverrides?: Record<string, any>
+  palette?: Record<string, any>
+  colors?: Record<string, any>
+  componentColors?: Record<string, any>
+}): CssVariablesMeta | undefined
+
+export const StyleContext: React.Context<any>
+
+export class Palette {
+  constructor (palette?: Record<string, any>)
+  colors: Record<string, any>
+  generateColors (overrides?: Record<string, any>, componentOverrides?: Record<string, any>): Record<string, any>
+  Color (name: string, level?: any, options?: { alpha?: number }): any
+}
+
+export const Colors: Record<string, string>
+
+export const ThemeProvider: React.Provider<any>
+
+export const ThemeContext: React.Context<any>
+
+export interface GetColorOptions {
+  prefix?: string
+  convertToString?: boolean
+}
+
+export type ColorValue = string | undefined
+
+export type GetColor = (color?: string, options?: GetColorOptions) => ColorValue
+
+export function useColors (): GetColor
+
+export function useMedia (): any
+
+export interface ThemedOptions {
+  name?: string
+}
+
+export function themed<P> (name: string, component: React.ComponentType<P>): React.ComponentType<P>
+export function themed<P> (component: React.ComponentType<P>): React.ComponentType<P>

package/index.js

@@ -0,0 +1,15 @@
+export { default as u } from './helpers/u.js'
+export { default as colorToRGBA } from './helpers/colorToRGBA.js'
+export { default as themed } from './theming/themed.js'
+export { default as palette } from './theming/palette.json'
+export { default as generateColors } from './theming/generateColors.js'
+export { default as getCssVariable } from './theming/getCssVariable.js'
+export { default as CssVariables } from './theming/CssVariables.js'
+export { default as useCssVariablesMeta } from './theming/useCssVariablesMeta.js'
+export { default as StyleContext } from './theming/StyleContext.js'
+export { default as Palette } from './theming/Palette.js'
+export { default as Colors } from './theming/Colors.js'
+export { default as ThemeProvider } from './theming/ThemeProvider.js'
+export { default as ThemeContext } from './theming/ThemeContext.js'
+export { default as useColors } from './hooks/useColors.js'
+export { default as useMedia } from './hooks/useMedia.js'

package/package.json

@@ -4,8 +4,23 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js"
+  },
+  "dependencies": {
+    "@nx-js/observer-util": "^4.1.3",
+    "color": "^3.1.2",
+    "lodash": "^4.17.20"
+  },
+  "peerDependencies": {
+    "lodash": "^4.17.20",
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
   "license": "MIT",
-  "gitHead": "da5f3c2a20f6d976d8c48f679a1242ca98217f00"
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
 }

package/styles/colors.styl

@@ -0,0 +1,74 @@
+$UI.colors = {
+  mainText: $UI.palette.black,
+  secondaryText: rgba($UI.palette.black, 0.5),
+
+  white: $UI.palette.white,
+  whiteLight: rgba($UI.palette.white, 0.5),
+  whiteLighter: rgba($UI.palette.white, 0.25),
+  whiteLightest: rgba($UI.palette.white, 0.05),
+
+  dark: $UI.palette.black,
+  darkLight: rgba($UI.palette.black, 0.5),
+  darkLighter: rgba($UI.palette.black, 0.25),
+  darkLightest: rgba($UI.palette.black, 0.05),
+
+  primary: $UI.palette.blue,
+  primaryLight: rgba($UI.palette.blue, 0.5),
+  primaryLighter: rgba($UI.palette.blue, 0.25),
+  primaryLightest: rgba($UI.palette.blue, 0.05),
+
+  secondary: $UI.palette.black,
+  secondaryLight: rgba($UI.palette.black, 0.5),
+  secondaryLighter: rgba($UI.palette.black, 0.25),
+  secondaryLightest: rgba($UI.palette.black, 0.05),
+
+  success: $UI.palette.green,
+  successLight: rgba($UI.palette.green, 0.5),
+  successLighter: rgba($UI.palette.green, 0.25),
+  successLightest: rgba($UI.palette.green, 0.05),
+
+  warning: $UI.palette.yellow,
+  warningLight: rgba($UI.palette.yellow, 0.5),
+  warningLighter: rgba($UI.palette.yellow, 0.25),
+  warningLightest: rgba($UI.palette.yellow, 0.05),
+
+  error: $UI.palette.red,
+  errorLight: rgba($UI.palette.red, 0.5),
+  errorLighter: rgba($UI.palette.red, 0.25),
+  errorLightest: rgba($UI.palette.red, 0.05),
+
+  attention: $UI.palette.red,
+  attentionLight: rgba($UI.palette.red, 0.5),
+  attentionLighter: rgba($UI.palette.red, 0.25),
+  attentionLightest: rgba($UI.palette.red, 0.05),
+
+  additional0: $UI.palette.orange,
+  additional0Light: rgba($UI.palette.orange, 0.5),
+  additional0Lighter: rgba($UI.palette.orange, 0.25),
+  additional0Lightest: rgba($UI.palette.orange, 0.05),
+
+  additional1: $UI.palette.cyan,
+  additional1Light: rgba($UI.palette.cyan, 0.5),
+  additional1Lighter: rgba($UI.palette.cyan, 0.25),
+  additional1Lightest: rgba($UI.palette.cyan, 0.05),
+
+  additional2: $UI.palette.purple,
+  additional2Light: rgba($UI.palette.purple, 0.5),
+  additional2Lighter: rgba($UI.palette.purple, 0.25),
+  additional2Lightest: rgba($UI.palette.purple, 0.05),
+
+  additional3: $UI.palette.lime,
+  additional3Light: rgba($UI.palette.lime, 0.5),
+  additional3Lighter: rgba($UI.palette.lime, 0.25),
+  additional3Lightest: rgba($UI.palette.lime, 0.05),
+
+  additional4: $UI.palette.ochre,
+  additional4Light: rgba($UI.palette.ochre, 0.5),
+  additional4Lighter: rgba($UI.palette.ochre, 0.25),
+  additional4Lightest: rgba($UI.palette.ochre, 0.05),
+
+  additional5: $UI.palette.violet,
+  additional5Light: rgba($UI.palette.violet, 0.5),
+  additional5Lighter: rgba($UI.palette.violet, 0.25),
+  additional5Lightest: rgba($UI.palette.violet, 0.05)
+}

package/styles/helpers.styl

@@ -0,0 +1,82 @@
+from(num)
+  condition = 'screen and (min-width: %s)' % num
+  @media condition
+    {block}
+
+to(num)
+  condition = 'screen and (max-width: %s)' % ((num - 1))
+  @media condition
+    {block}
+
+// DEPRECATED
+mobile()
+  +to($UI.media.mobile)
+    {block}
+
+tablet()
+  +from($UI.media.tablet)
+    {block}
+
+desktop()
+  +from($UI.media.desktop)
+    {block}
+
+wide()
+  +from($UI.media.wide)
+    {block}
+
+between(num1, num2)
+  condition = 'screen and (min-width: %s) and (max-width: %s)' % (num1 (num2 - 1))
+  @media condition
+    {block}
+
+betweenHeight(num1, num2)
+  condition = 'screen and (min-height: %s) and (max-height: %s)' % (num1 (num2 - 1))
+  @media condition
+    {block}
+
+portrait()
+  @media (orientation: portrait)
+    {block}
+
+landscape()
+  @media (orientation: landscape)
+    {block}
+
+web()
+  if __WEB__ is defined
+    {block}
+
+android()
+  if __ANDROID__ is defined
+    {block}
+
+ios()
+  if __IOS__ is defined
+    {block}
+
+windows()
+  if __WINDOWS__ is defined
+    {block}
+
+macos()
+  if __MACOS__ is defined
+    {block}
+
+native()
+  unless __WEB__ is defined
+    {block}
+
+bleed(left = 2u, right = left)
+  padding-left left
+  padding-right right
+  margin-left (- left)
+  margin-right (- right)
+
+radius(key = m)
+  if key is m
+    border-radius 4px
+  else if key is l
+    border-radius 8px
+  else if key is circle
+    border-radius 9999px

package/styles/index.styl

@@ -0,0 +1,8 @@
+if !($UI is defined)
+  $UI = {}
+@require('./palette')
+@require('./colors')
+@require('./variables')
+@require('./shadows')
+@require('./helpers')
+@require('./typography')

package/styles/palette.styl

@@ -0,0 +1,14 @@
+$UI.palette = {
+  white: #fff,
+  black: #3E4657,
+  blue: #2962FF,
+  violet: #6772E5,
+  green: #24B47E,
+  yellow: #F5BE59,
+  red: #E25950,
+  orange: #FF7900,
+  cyan: #00AED6,
+  purple: #B200FF,
+  lime: #A6D800,
+  ochre: #F5A623
+}

package/styles/shadows.styl

@@ -0,0 +1,34 @@
+$UI.shadows = {
+  '0': {
+    // HACK: 'box-shadow none' does not work correctly on ios
+    // it darkens all View component with background in project
+    // and it blurs text when there is no background-color is set
+    // therefore we using 'box-shadow 0 0 0 rgba(black, 0)'
+    box-shadow: 0 0 0 rgba(black, 0)
+    elevation: 0
+  },
+  '1': {
+    box-shadow: 0 1px 2px var(--color-shadow-main)
+    elevation: 3
+  },
+  '2': {
+    box-shadow: 0 3px 5px var(--color-shadow-main-strong)
+    elevation: 6
+  },
+  '3': {
+    box-shadow: 0 5px 8px var(--color-shadow-main-strong)
+    elevation: 12
+  },
+  '4': {
+    box-shadow: 0 8px 12px var(--color-shadow-main)
+    elevation: 18
+  }
+}
+
+shadow(level = 1)
+  _shadow = $UI.shadows['' + level]
+  if (_shadow) {
+    {_shadow}
+  } else {
+    error('ERROR! Wrong shadow level ' + level + ' passed to shadow() mixin. Such level does not exist in $UI.shadows')
+  }

package/styles/typography.styl

@@ -0,0 +1,99 @@
+$fontWeightNamesMap = {
+  '100': 'Thin',
+  '200': 'ExtraLight',
+  '300': 'Light',
+  '400': 'Regular',
+  '500': 'Medium',
+  '600': 'SemiBold',
+  '700': 'Bold',
+  '800': 'ExtraBold'
+  '900': 'Black',
+  normal: 'Regular',
+  bold: 'Bold'
+}
+
+DEPRECATED_SIZES = default xs 's' m l xl xxl xxxl xxxxl xxxxxl
+
+font(size = $UI.defaultFontSize, weight = $UI.fontWeights.normal)
+  // Workaround global built-in function s()
+  // http://stylus-lang.com/docs/bifs.html#sfmt-
+  size = 's' if size is s
+  size = body2 if size is default // DEPRECATED
+
+  if size in DEPRECATED_SIZES
+    p('font() mixin: size ' + size + ' is deprecated')
+
+  fontFamily($UI.fontFamilies[size], $UI.fontWeights[size] || weight)
+
+  font-size: $UI.fontSizes[size]
+  line-height: $UI.lineHeights[size]
+
+  if $UI.letterSpacings && $UI.letterSpacings[size]
+    letter-spacing: $UI.letterSpacings[size]
+
+  if $UI.textTransforms && $UI.textTransforms[size]
+    text-transform: $UI.textTransforms[size]
+
+text(key = default) // DEPRECATED
+  p('text() mixin is deprecated, use font() instead')
+  // color
+  if key is description
+    color: var(--color-text-description)
+  else
+    color: var(--color-text-main)
+
+  // font, line
+  if key is default
+    font()
+  else if key is description
+    font()
+  else if key is h1
+    font(xxxxxl)
+  else if key is h2
+    font(xxxxl)
+  else if key is h3
+    font(xxxl)
+  else if key is h4
+    font(xxl)
+  else if key is h5
+    font(xl)
+  else if key is h6
+    font(l)
+
+fontFamily(
+  fontName = 'normal',
+  fontWeight = $UI.fontWeights.normal,
+  fontStyle = 'normal'
+)
+  fontName = fontName or 'normal'
+  fontWeight = fontWeight or $UI.fontWeights.normal
+  fontStyle = fontStyle or 'normal'
+
+  defaultFontFamilies = $UI.fontFamilies.default || {}
+  platformFontFamilies = $UI.fontFamilies[$PLATFORM] || {}
+  fontFamily = defaultFontFamilies[fontName] or platformFontFamilies[fontName] or fontName
+
+  if (isCustomFont(fontFamily)) {
+    thickness = $fontWeightNamesMap[fontWeight]
+    isRegular = thickness is 'Regular'
+    isItalic = fontStyle is italic
+
+    fontFamily += '-'
+    // add thickness
+    // don't add thickness to font family name if regular and italic
+    if (!isRegular || !isItalic) {
+      fontFamily += $fontWeightNamesMap['' + fontWeight]
+    }
+    // add style
+    if (isItalic) {
+      fontFamily += 'Italic'
+    }
+  } else {
+    font-weight fontWeight
+    font-style fontStyle
+  }
+
+  font-family fontFamily
+
+isCustomFont(fontFamily)
+  return index($UI.customFontFamilies, fontFamily) isnt null