@symbo.ls/uikit 1.2.2 → 1.2.6

package/components/Slider/index.js

@@ -1,105 +0,0 @@
-'use strict'
-
-import style from './style'
-
-import { set, opacify } from '@symbo.ls/scratch'
-import { isFunction } from '@domql/utils'
-
-import { SquareButton } from '@symbo.ls/button'
-
-set({
-  theme: {
-    sliderThumb: {
-      background: 'white 0.2',
-
-      '&::-webkit-slider-thumb': {
-        background: '#232526',
-        borderColor: opacify('#454646', 0.75)
-      },
-
-      '&:hover': {
-        '&::-webkit-slider-thumb': {
-          borderColor: opacify('#fff', 0.35)
-        }
-      },
-
-      '&:focus, &:active': {
-        '&::-webkit-slider-thumb': {
-          borderColor: '#3C6AC0'
-        }
-      }
-    }
-  }
-})
-
-export const RangeSlider = {
-  style,
-  props: {
-    theme: 'sliderThumb'
-  },
-
-  tag: 'input',
-  attr: { type: 'range' }
-}
-
-const listenProp = (el, prop, def) => {
-  const val = el.props && el.props[prop]
-  const r = (isFunction(val) ? val() : val) || (def !== undefined ? def : 50)
-  // if (prop === 'value') console.log(r)
-  return r
-}
-
-export const Slider = {
-  button0: {
-    extend: [SquareButton],
-    props: {
-      icon: 'minus'
-    },
-    on: {
-      click: (ev, el, s) => {
-        el.props && isFunction(el.props.click) && el.props.click(ev, el, s)
-        const input = el.parent.input
-        const props = input.props
-        const value = isFunction(props.value) ? props.value() : props.value
-        input.node.value = value
-      }
-    }
-  },
-  value: {
-    style: { width: '4ch' },
-    tag: 'span',
-    text: (el, s) => {
-      const value = listenProp(el.parent.input, 'value')
-      const unit = listenProp(el.parent.input, 'unit', '')
-      return '' + value + unit
-    }
-  },
-  range: {
-    extend: RangeSlider,
-    attr: {
-      value: (el, s) => listenProp(el, 'value', 50),
-      min: (el, s) => listenProp(el, 'min', 0),
-      max: (el, s) => listenProp(el, 'max', 100),
-      step: (el, s) => listenProp(el, 'step', 1)
-    },
-    on: {
-      input: (ev, el, s) => el.props && isFunction(el.props.input) && el.props.input(ev, el, s),
-      change: (ev, el, s) => el.props && isFunction(el.props.change) && el.props.change(ev, el, s)
-    }
-  },
-  button1: {
-    extend: [SquareButton],
-    props: {
-      icon: 'plus'
-    },
-    on: {
-      click: (ev, el, s) => {
-        el.props && isFunction(el.props.click) && el.props.click(ev, el, s)
-        const input = el.parent.input
-        const props = input.props
-        const value = isFunction(props.value) ? props.value() : props.value
-        input.node.value = value
-      }
-    }
-  }
-}

package/components/Slider/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "@symbo.ls/slider",
-  "version": "1.2.0",
-  "main": "index.js",
-  "license": "MIT",
-  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
-  "dependencies": {
-    "@domql/utils": "latest",
-    "@symbo.ls/button": "latest",
-    "@symbo.ls/scratch": "latest"
-  },
-  "source": "src/index.js"
-}

package/components/Slider/style.js

@@ -1,19 +0,0 @@
-'use strict'
-
-export default {
-  appearance: 'none',
-  width: '100%',
-  height: '2px',
-  outline: 'none',
-  flex: 1,
-  '&::-webkit-slider-thumb': {
-    boxSizing: 'content-box',
-    appearance: 'none',
-    width: '8px',
-    height: '8px',
-    borderWidth: '2px',
-    borderStyle: 'solid',
-    borderRadius: '100%',
-    opacity: '.8'
-  }
-}

package/components/TextArea/index.js

@@ -1,15 +0,0 @@
-'use strict'
-
-import { Input } from '@symbo.ls/atoms'
-
-const props = {
-  height: 'E',
-  lineHeight: 1.4,
-  style: { resize: 'none' }
-}
-
-export const TextArea = {
-  extend: [Input],
-  props,
-  tag: 'textarea'
-}

package/components/TextArea/package.json

@@ -1,11 +0,0 @@
-{
-  "name": "@symbo.ls/textarea",
-  "version": "1.2.1",
-  "main": "index.js",
-  "license": "MIT",
-  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
-  "dependencies": {
-    "@symbo.ls/atoms": "latest"
-  },
-  "source": "src/index.js"
-}

package/components/Tooltip/index.js

@@ -1,37 +0,0 @@
-'use strict'
-
-import { Flex } from '@symbo.ls/atoms'
-
-export const Tooltip = {
-  extend: Flex,
-  props: {
-    background: 'black',
-    color: 'white',
-    flow: 'column',
-    shape: 'tooltip',
-    shapeDirection: 'top',
-    padding: 'Z1 A',
-    round: 'Y2',
-    minWidth: 'D2',
-    gap: 'X',
-    textAlign: 'center',
-
-    title: {
-      fontWeight: 500,
-      color: 'gray12',
-      text: 'And tooltip is coming'
-    },
-    p: {
-      fontSize: 'Z2',
-      margin: '0',
-      color: 'gray6',
-      text: 'and winter too',
-      fontWeight: '400'
-    }
-  },
-
-  attr: { tooltip: true },
-
-  title: {},
-  p: {}
-}

package/components/Tooltip/package.json

@@ -1,11 +0,0 @@
-{
-  "name": "@symbo.ls/tooltip",
-  "version": "1.2.0",
-  "main": "index.js",
-  "license": "MIT",
-  "gitHead": "54fa6500c697604b3f48ba33a573545d7bff35fa",
-  "dependencies": {
-    "@symbo.ls/atoms": "latest"
-  },
-  "source": "src/index.js"
-}

package/components/Tooltip/style.js

@@ -1,12 +0,0 @@
-'use strict'
-
-export default {
-  textAlign: 'center',
-  padding: '1.2em',
-  caption: {
-    whiteSpace: 'nowrap'
-  },
-  span: {
-    opacity: '.5'
-  }
-}

package/lerna.json

@@ -1,9 +0,0 @@
-{
-  "packages": [
-    "components/*",
-    "react/*",
-    "packages/*"
-  ],
-  "npmClient": "yarn",
-  "version": "1.2.4"
-}

package/packages/react/index.js

@@ -1,5 +0,0 @@
-'use strict'
-
-
-export * from '@symbo.ls/atoms'
-export * from '@symbo.ls/react-box'

package/packages/react/package.json

@@ -1,16 +0,0 @@
-{
-  "name": "@symbo.ls/react",
-  "version": "1.2.0",
-  "main": "index.js",
-  "license": "MIT",
-  "gitHead": "6378f05ba88065ef932810a1582f45e0384feafc",
-  "dependencies": {
-    "@symbo.ls/atoms": "latest",
-    "@symbo.ls/convert": "latest",
-    "@symbo.ls/react-box": "latest"
-  },
-  "peerDependencies": {
-    "domql": "latest"
-  },
-  "source": "src/index.js"
-}

package/packages/uikit/README.md

@@ -1,38 +0,0 @@
-# Symbols
-
-UI Library in composition of [Scratch](https://github.com/symbo.ls/scratch) and [DOMQL](https://github.com/symbo.ls/domql) or [DOMQL](https://github.com/symbo-ls/smbls/tree/main/packages/all/packages/react)
-
-Check out the [documentation page](https://docs.symbols.app/).
-
-[![npm version](https://badge.fury.io/js/smbls.svg)](https://badge.fury.io/js/smbls)
-
-### UI Components
-
-Library consists with packages. Components can be invoked individually.
-
-
-### Setup
-
-1. Installation
-```
-yarn add 'smbls'
-```
-
-2. Import the component from Symbols
-```
-import { Box } from 'smbls'
-```
-
-3. Use it inside your DOMQL code
-### DOMQL
-```javascript
-const Header = {
-  proto: Box,
-  // ...Other Properties
-}
-```
-
-### React
-```javascript
-<Box {...props} />
-```

package/packages/uikit/package.json

@@ -1,40 +0,0 @@
-{
-  "name": "@symbo.ls/uikit",
-  "description": "UI Library built on Scratch and DOMQL",
-  "version": "1.2.1",
-  "author": "symbo.ls",
-  "repository": "https://github.com/symbo-ls/smbls",
-  "main": "index.js",
-  "files": [
-    "index.js",
-    "react.js"
-  ],
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org"
-  },
-  "dependencies": {
-    "@symbo.ls/atoms": "latest",
-    "@symbo.ls/avatar": "latest",
-    "@symbo.ls/banner": "latest",
-    "@symbo.ls/box": "latest",
-    "@symbo.ls/button": "latest",
-    "@symbo.ls/buttonset": "latest",
-    "@symbo.ls/datepicker": "latest",
-    "@symbo.ls/dropdown": "latest",
-    "@symbo.ls/field": "latest",
-    "@symbo.ls/icon": "latest",
-    "@symbo.ls/img": "latest",
-    "@symbo.ls/input": "latest",
-    "@symbo.ls/label": "latest",
-    "@symbo.ls/link": "latest",
-    "@symbo.ls/notification": "latest",
-    "@symbo.ls/pills": "latest",
-    "@symbo.ls/select": "latest",
-    "@symbo.ls/slider": "latest",
-    "@symbo.ls/textarea": "latest",
-    "@symbo.ls/tooltip": "latest"
-  },
-  "browserslist": "> 0.5%, last 2 versions, not dead",
-  "gitHead": "6378f05ba88065ef932810a1582f45e0384feafc",
-  "source": "src/index.js"
-}

package/react/box/README.md

@@ -1,114 +0,0 @@
-# react-box
-
-React Box
-
-
-## Table of Contents
-
-* [Installation](#installation)
-* [API documentation](#api-documentation)
-* [Examples](#examples)
-* [Properties](#props)
-
-<!-- ## Browsers support -->
-
-<!-- | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
-| --------- | --------- | --------- | --------- | --------- |
-| IE 8 + ✔ | Firefox 31.0+ ✔ | Chrome 31.0+ ✔ | Safari 7.0+ ✔ | Opera 30.0+ ✔ | -->
-
-
-## Install
-
-To install, you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com):
-
-    $ npm install --save @symbo.ls/react-box
-    $ yarn add  @symbo.ls/react-box
-
-
-## Usage
-
-Box element which can be used with
-
-
-## Examples
-```javascript
-import { Box } from '@symbo.ls/react'
-
-// example 1
-const buttonProps = {
-  theme: 'primary',
-  size: 'A',
-  padding: 'B Z'
-}
-
-const Button2 = () => <Box tag="button" ...buttonProps />
-
-// example 2
-const buttonConf = {
-  tag: 'button',
-  props: {
-    theme: 'primary',
-    size: 'A',
-    padding: 'B Z'
-  }
-}
-
-const Button3 = () => <Box ...buttonConf />
-```
-
-## API
-The primary documentation for react-box is the reference book, which describes the API and gives examples of its usage.
-
-### Props
-
-Properties:
- className
- ref 
- href - link destination of the element
- target - link target
- src - Source path (eg Link) of the image
- alt - Alternative text in case image does not load
- title - Title when hovering the image
- ariaLabel
-
-
-style properties:
-`width` - Width of the element
-`height` - Height of the element
-`boxSize` - [`width`, `heigh`]
-
-`maxWidth` - Max width of the box
-`minWidth` - Min width of the box
-`widthRange` - Min and Max width range of the box
-
-`maxHeight` - Max height of the box
-`minHeight` - Min height of the box
-`heightRange` - Min and Max height range of the box
-
-`aspectRatio` - Aspect ratio of the box (1/3, 3/7…)
-`padding` - Inner space of the element
-`margin` - Outer space of the element
-`gap` - Space between children inside the element
-
-`flexFlow` - 
-`flexAlign` - `display: flex`, `alignItems` and `justifyContent`
-
-`flow`
-`flexDirection`
-`alignItems`
-`justifyContent`
-`gap`
-
-`text` - Text value in the element
-`size` - Text size of the element
-
-`direction` - Language direction of the component
-
-    values: `ltr`, `rtl`
-## Important Note
-
-
-
-## License
-
-`@symbo.ls/react-box` is released under the MIT license.

package/react/box/index.d.ts

@@ -1,3 +0,0 @@
-import { Box } from './';
-
-export { Box };

package/react/box/index.js

@@ -1,63 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import * as React from "react";
-import { useRef, useImperativeHandle, forwardRef } from "react";
-import { transformClassname, transformEmotion } from 'css-in-props'
-
-
-var Box = function Box(props, ref) {
-  var className = props.className,
-    tag = props.tag,
-    href = props.href,
-    target = props.target,
-    ariaLabel = props.ariaLabel,
-    src = props.src,
-    alt = props.alt,
-    title = props.title,
-    type = props.type,
-    name = props.name,
-    checked = props.checked,
-    id = props.id,
-    onClick = props.onClick,
-    restProps = _objectWithoutProperties(props, ["tag", "className"]);
-
-  var domRef = useRef(null);
-  useImperativeHandle(ref, function () {
-    return domRef.current;
-  });
-
-  var extraProps = _objectSpread({}, restProps, restProps.props);
-
-  var tag = props.tag || extraProps.tag || "div";
-
-  var children = props.text ? props.text : props.children;
-
-  const propsClass = transformEmotion(transformClassname(props)) 
-
-  const style = { ...props.style  };
-
-  return /*#DOMQL GOES HERE*/ React.createElement(
-    tag,
-    _extends({
-      className: `${className ?? ""} ${propsClass}` ,
-      ref: domRef,
-      style: style,
-      href,
-      target,
-      src,
-      alt,
-      type,
-      name,
-      checked,
-      id,
-      onClick,
-      title,
-      "aria-label": ariaLabel,
-    }),
-    children
-  );
-};
-
-export default /*#__PURE__*/ forwardRef(Box);

package/react/box/package.json

@@ -1,33 +0,0 @@
-{
-  "name": "@symbo.ls/react-box",
-  "version": "1.2.0",
-  "description": "React Box",
-  "keywords": [
-    "@symbo.ls/react-box"
-  ],
-  "homepage": "https://docs.symbols.app/box",
-  "repository": {
-    "type": "git",
-    "url": ""
-  },
-  "license": "MIT",
-  "files": [
-    "dist",
-    "lib"
-  ],
-  "main": "index.js",
-  "module": "index.js",
-  "dependencies": {
-    "@babel/runtime": "^7.11.2",
-    "css-in-props": "latest"
-  },
-  "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not op_mini all"
-  ]
-}

package/svgSprite.config.js

@@ -1,7 +0,0 @@
-const path = require('path')
-
-module.exports = {
-  getSymbolId: (filePath, fileContent, fileHash) => {
-    return path.basename(filePath, '.svg')
-  }
-}

package/watch.js

@@ -1,12 +0,0 @@
-const fs = require('fs')
-
-const oldPath = '../react-starter-kit/package.json'
-const tempPath = '../react-starter-kit/package1.json'
-
-fs.rename(oldPath, tempPath, function (err) {
-  if (err) throw err
-  fs.rename(tempPath, oldPath, function (err) {
-    if (err) throw err
-    console.log('Successfully renamed - AKA moved!')
-  })
-})