@avilang/practical-ui 0.1.5 → 0.2.1

package/lib/button/style/button.scss

@@ -1,195 +0,0 @@
-@import '../../variables';
-
-.#{$prefix}-button-reset {
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-  appearance: button;
-
-  &::-moz-focus-inner {
-    padding: 0;
-    border-style: none;
-  }
-
-  &:-moz-focusring {
-    outline: 1px dotted ButtonText;
-  }
-}
-
-.#{$prefix}-button-default {
-  box-sizing: border-box;
-  display: inline-block;
-  height: 34px;
-  padding: 5px 12px;
-  font-family: inherit;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: $line-height;
-  color: $primary-text;
-  text-align: center;
-  touch-action: manipulation;
-  cursor: pointer;
-  user-select: none;
-  background-color: #fff;
-  border-color: $border-color;
-  border-style: solid;
-  border-width: 1px;
-  border-radius: 2px;
-  outline: none;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-
-  &,
-  &:active,
-  &:focus {
-    outline: 0;
-  }
-
-  &:hover {
-    color: $blue-6;
-    border-color: $blue-6;
-  }
-
-  & > span {
-    display: inline-block;
-    margin-top: 1px;
-  }
-
-  &.#{$prefix}-button-block {
-    width: 100%;
-  }
-
-  &.#{$prefix}-button-primary {
-    color: #fff;
-    background-color: $blue-6;
-    border-color: $blue-6;
-
-    &:hover {
-      background-color: $blue-5;
-      border-color: $blue-5;
-    }
-  }
-
-  &.#{$prefix}-button-secondary {
-    color: #fff;
-    background-color: $green-6;
-    border-color: $green-6;
-
-    &:hover {
-      background-color: $green-5;
-      border-color: $green-5;
-    }
-  }
-
-  &.#{$prefix}-button-dashed {
-    border-style: dashed;
-  }
-
-  &.#{$prefix}-button-danger {
-    color: $red-6;
-    border-color: $red-6;
-
-    &:hover {
-      opacity: 0.7;
-    }
-  }
-
-  &.#{$prefix}-button-primary.#{$prefix}-button-danger,
-  &.#{$prefix}-button-secondary.#{$prefix}-button-danger {
-    color: #fff;
-    background-color: $red-6;
-    border-color: $red-6;
-  }
-
-  &.#{$prefix}-button-text {
-    height: auto;
-    padding: 0;
-    background-color: transparent;
-    border-color: transparent;
-    border-width: 0;
-
-    & > span {
-      margin-top: 0;
-    }
-
-    &:hover {
-      color: $primary-text;
-      background-color: transparent;
-      border-color: transparent;
-      opacity: 1;
-
-      & > span {
-        text-decoration: underline;
-      }
-    }
-
-    &.#{$prefix}-button-primary {
-      color: $blue-6;
-    }
-    &.#{$prefix}-button-secondary {
-      color: $green-6;
-    }
-    &.#{$prefix}-button-danger {
-      color: $red-6;
-    }
-
-    &.#{$prefix}-button-primary.#{$prefix}-button-danger,
-    &.#{$prefix}-button-secondary.#{$prefix}-button-danger {
-      color: $red-6;
-      background-color: transparent;
-      border-color: transparent;
-    }
-  }
-
-  &[disabled] {
-    &,
-    &:hover,
-    &:focus,
-    &:active,
-    &.#{$prefix}-button-danger {
-      color: $disable-text;
-      cursor: not-allowed;
-      background-color: $background-color;
-      border-color: $border-color;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-
-    &.#{$prefix}-button-text,
-    &.#{$prefix}-button-danger.#{$prefix}-button-text {
-      color: $disable-text;
-      cursor: not-allowed;
-      background-color: transparent;
-      border-color: transparent;
-    }
-
-    &.#{$prefix}-button-text:hover {
-      opacity: 1;
-
-      & > span {
-        text-decoration: none;
-      }
-    }
-  }
-
-  &.#{$prefix}-button-loading {
-    position: relative;
-    pointer-events: none;
-
-    &::before {
-      position: absolute;
-      top: -1px;
-      right: -1px;
-      bottom: -1px;
-      left: -1px;
-      z-index: 1;
-      pointer-events: none;
-      content: '';
-      background: #fff;
-      border-radius: inherit;
-      opacity: 0.35;
-      transition: opacity 0.2s;
-    }
-  }
-}

package/lib/checkbox/Checkbox.js

@@ -1,46 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import classNames from 'classnames';
-import './style/checkbox.scss';
-
-function Checkbox(props) {
-  const { children, checked, indeterminate, disabled, onChange, ...rest } = props;
-  const classes = classNames('practical-checkbox', {
-    'practical-checkbox-checked': checked,
-    'practical-checkbox-disabled': disabled,
-    'practical-checkbox-indeterminate': checked === false && indeterminate
-  });
-  const handleChange = (e) => {
-    if (disabled) return;
-    onChange && onChange(e, e.target.checked);
-  };
-
-  return (
-    // eslint-disable-next-line jsx-a11y/label-has-associated-control
-    <label className={classes} {...rest}>
-      <span className="practical-checkbox-sign">
-        <input type="checkbox" checked={checked} onChange={handleChange} />
-      </span>
-      {children && <span className="practical-checkbox-text">{children}</span>}
-    </label>
-  );
-}
-
-Checkbox.displayName = 'PracticalUi.Checkbox';
-Checkbox.defaultProps = {
-  checked: false,
-  disabled: false,
-  indeterminate: false
-};
-Checkbox.propTypes = {
-  /** 指定当前是否选中 */
-  checked: PropTypes.bool,
-  /** 失效状态 */
-  disabled: PropTypes.bool,
-  /** 设置 indeterminate 状态，只负责样式控制 */
-  indeterminate: PropTypes.bool,
-  /** 变化时回调函数 | (event, checked) => void | checked 参数为 checkbox 的 checked 状态值 */
-  onChange: PropTypes.func
-};
-
-export default Checkbox;

package/lib/checkbox/doc/checkbox.mdx

@@ -1,82 +0,0 @@
----
-name: Checkbox 多选框
-route: /checkbox
----
-
-import { Playground, Props } from 'docz';
-import { Checkbox } from '../index';
-
-# Checkbox 多选框
-
-## 基本用法
-
-<Playground>
-  {() => {
-    const [checked, setChecked] = React.useState(true);
-    return (
-      <>
-        <Checkbox
-          checked={checked}
-          onChange={(e, status) => {
-            setChecked(status);
-          }}
-        >
-          苹果
-        </Checkbox>
-        <Checkbox style={{ marginLeft: 16 }}>香蕉</Checkbox>
-        <Checkbox style={{ marginLeft: 16 }} />
-      </>
-    );
-  }}
-</Playground>
-
-## 不可用
-
-<Playground>
-  <Checkbox checked disabled>
-    香蕉
-  </Checkbox>
-  <Checkbox style={{ marginLeft: 16 }} disabled>
-    雪梨
-  </Checkbox>
-</Playground>
-
-## 全选
-
-在实现全选效果时，你可能会用到 indeterminate 属性。
-
-<Playground>
-  {() => {
-    const [checkedA, setCheckedA] = React.useState(true);
-    const [checkedB, setCheckedB] = React.useState(false);
-    return (
-      <>
-        <Checkbox indeterminate={checkedA || checkedB} checked={checkedA && checkedB}>
-          全部
-        </Checkbox>
-        <Checkbox
-          style={{ marginLeft: 16 }}
-          checked={checkedB}
-          onChange={(e, status) => {
-            setCheckedB(status);
-          }}
-        >
-          菠萝
-        </Checkbox>
-        <Checkbox
-          style={{ marginLeft: 16 }}
-          checked={checkedA}
-          onChange={(e, status) => {
-            setCheckedA(status);
-          }}
-        >
-          西瓜
-        </Checkbox>
-      </>
-    );
-  }}
-</Playground>
-
-## API
-
-<Props of={Checkbox} />

package/lib/checkbox/index.js

@@ -1 +0,0 @@
-export { default as Checkbox } from './Checkbox';

package/lib/checkbox/style/checkbox.scss

@@ -1,127 +0,0 @@
-@import '../../variables';
-
-.#{$prefix}-checkbox {
-  box-sizing: border-box;
-  display: inline-block;
-  padding: 0;
-  margin: 0;
-  font-size: 14px;
-  line-height: $line-height;
-  color: $primary-text;
-  list-style: none;
-  touch-action: manipulation;
-  cursor: pointer;
-
-  & > span {
-    vertical-align: middle;
-  }
-
-  &:hover {
-    .#{$prefix}-checkbox-sign {
-      border-color: $blue-6;
-    }
-  }
-}
-
-.#{$prefix}-checkbox-checked {
-  .#{$prefix}-checkbox-sign {
-    background-color: $blue-6;
-    border-color: $blue-6;
-
-    &::after {
-      position: absolute;
-      top: 50%;
-      left: 22%;
-      box-sizing: border-box;
-      display: table;
-      width: 5.71428571px;
-      height: 9.14285714px;
-      content: ' ';
-      border: 2px solid #fff;
-      border-top: 0;
-      border-left: 0;
-      opacity: 1;
-      transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
-      transform: rotate(45deg) scale(1) translate(-50%, -50%);
-    }
-  }
-}
-
-.#{$prefix}-checkbox-indeterminate {
-  .#{$prefix}-checkbox-sign {
-    &::after {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      box-sizing: border-box;
-      display: table;
-      width: 8px;
-      height: 8px;
-      content: ' ';
-      background-color: $blue-6;
-      border: 0;
-      border-radius: 2px;
-      opacity: 1;
-      transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
-      transform: translate(-50%, -50%) scale(1);
-    }
-  }
-}
-
-.#{$prefix}-checkbox-disabled {
-  color: $disable-text;
-  cursor: not-allowed;
-
-  .#{$prefix}-checkbox-sign {
-    background-color: $background-color;
-    border-color: $border-color;
-
-    &::after {
-      border-color: rgba(0, 0, 0, 0.25);
-    }
-  }
-
-  &:hover {
-    .#{$prefix}-checkbox-sign {
-      border-color: $border-color;
-    }
-  }
-
-  &.#{$prefix}-checkbox-indeterminate {
-    .#{$prefix}-checkbox-sign {
-      &::after {
-        background-color: rgba(0, 0, 0, 0.25);
-      }
-    }
-  }
-}
-
-.#{$prefix}-checkbox-sign {
-  position: relative;
-  top: -1px;
-  box-sizing: border-box;
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  overflow: hidden;
-  background-color: #fff;
-  border: 1px solid $border-color;
-  border-radius: 2px;
-  transition: all 0.3s;
-
-  & > input {
-    position: absolute;
-    top: 0;
-    left: -18px;
-    padding: 0;
-    margin: 0;
-    overflow: visible;
-    outline: none;
-    opacity: 0;
-    appearance: auto;
-  }
-}
-
-.#{$prefix}-checkbox-text {
-  padding-left: 4px;
-}

package/lib/icon/Icon.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import '../_fonts/icomoon-practical-v1.0/style.css';
-import './style/icon.scss';
-
-function Icon(props) {
-  const { type, style, spin } = props;
-  const classes = classNames('practical-sign', {
-    [`practical-icon-${type}`]: true,
-    'practical-sign-spin': spin
-  });
-
-  return <span className={classes} style={style} />;
-}
-
-Icon.displayName = 'PracticalUi.Icon';
-Icon.defaultProps = {
-  style: {},
-  spin: false
-};
-Icon.propTypes = {
-  type: PropTypes.string.isRequired,
-  /** 设置图标的样式，例如 fontSize 和 color */
-  style: PropTypes.object,
-  /** 是否有旋转动画 */
-  spin: PropTypes.bool
-};
-
-export default Icon;

package/lib/icon/doc/icon.mdx

@@ -1,45 +0,0 @@
----
-name: Icon 图标
-route: /icon
----
-
-import { Playground, Props } from 'docz';
-import { Icon } from '../index';
-
-export const inlineStyleForIconWrap = {
-  display: 'inline-block',
-  textAlign: 'center',
-  marginRight: 20
-};
-export const inlineStyleForIconBox = {
-  width: 30,
-  height: 30,
-  border: '1px solid #ccc',
-  borderRadius: '3px',
-  boxSizing: 'border-box',
-  display: 'inline-block'
-};
-export const inlineStyleForIconText = { display: 'block', fontSize: 14 };
-
-# Icon 图标
-
-## 图标类型
-
-<Playground>
-  <div style={inlineStyleForIconWrap}>
-    <div style={inlineStyleForIconBox}>
-      <Icon type="loading" spin />
-    </div>
-    <span style={inlineStyleForIconText}>loading</span>
-  </div>
-  <div style={inlineStyleForIconWrap}>
-    <div style={inlineStyleForIconBox}>
-      <Icon type="search" style={{ color: 'red' }} />
-    </div>
-    <span style={inlineStyleForIconText}>search</span>
-  </div>
-</Playground>
-
-## API
-
-<Props of={Icon} />

package/lib/icon/index.js

@@ -1 +0,0 @@
-export { default as Icon } from './Icon';

package/lib/icon/style/icon.scss

@@ -1,20 +0,0 @@
-@import '../../variables';
-
-@keyframes iconLoadingCircle {
-  to {
-    transform: rotate(1turn);
-  }
-}
-
-.#{$prefix}-sign {
-  display: inline-block;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  line-height: 0;
-  text-transform: none;
-  text-rendering: optimizeLegibility;
-}
-
-.#{$prefix}-sign-spin {
-  animation: iconLoadingCircle 1s linear infinite;
-}

package/lib/input/Input.js

@@ -1,3 +0,0 @@
-function Input() {}
-
-export default Input;

package/lib/input/index.js

@@ -1 +0,0 @@
-export { default as Input } from './Input';

package/lib/util/index.js

@@ -1 +0,0 @@
-export { default as useThrottleFn } from './useThrottleFn';

package/lib/util/useThrottleFn.js

@@ -1,31 +0,0 @@
-import { useRef, useEffect, useCallback } from 'react';
-
-function useThrottleFn(fn, delay) {
-  const { current } = useRef({ fn, timer: null });
-  useEffect(
-    function () {
-      current.fn = fn;
-    },
-    [fn]
-  );
-
-  useEffect(() => {
-    return () => {
-      if (current.timer) {
-        clearTimeout(current.timer);
-        current.timer = null;
-      }
-    };
-  }, []);
-
-  return useCallback(function (...args) {
-    if (!current.timer) {
-      current.timer = setTimeout(() => {
-        current.timer = null;
-      }, delay);
-      current.fn.call(this, ...args);
-    }
-  }, []);
-}
-
-export default useThrottleFn;

package/prettier.config.js

@@ -1,20 +0,0 @@
-module.exports = {
-  printWidth: 100,
-  tabWidth: 2,
-  useTabs: false,
-  semi: true,
-  singleQuote: true,
-  quoteProps: 'as-needed',
-  jsxSingleQuote: false,
-  trailingComma: 'none',
-  bracketSpacing: true,
-  jsxBracketSameLine: false,
-  arrowParens: 'always',
-  rangeStart: 0,
-  rangeEnd: Infinity,
-  requirePragma: false,
-  insertPragma: false,
-  proseWrap: 'preserve',
-  htmlWhitespaceSensitivity: 'css',
-  endOfLine: 'auto'
-};

package/rollup.config.js

@@ -1,30 +0,0 @@
-import { babel } from '@rollup/plugin-babel';
-import { nodeResolve } from '@rollup/plugin-node-resolve';
-import postcss from 'rollup-plugin-postcss';
-import commonjs from '@rollup/plugin-commonjs';
-
-export default {
-  input: {
-    button: 'lib/button/index.js',
-    icon: 'lib/icon/index.js',
-    checkbox: 'lib/checkbox/index.js'
-  },
-  output: {
-    dir: 'dist',
-    entryFileNames: '[name]/index.js',
-    chunkFileNames: '[name]-shared.js',
-    format: 'es'
-  },
-  plugins: [
-    nodeResolve(),
-    commonjs({ include: /node_modules/ }),
-    postcss({ extract: 'index.css' }),
-    babel({
-      babelHelpers: 'bundled',
-      presets: ['@babel/preset-env', '@babel/preset-react'],
-      exclude: 'node_modules/**'
-      // plugins: ['@babel/plugin-transform-runtime']
-    })
-  ],
-  external: ['react', 'prop-types']
-};

package/src/gatsby-theme-docz/wrapper.js

@@ -1,9 +0,0 @@
-export default ({ children }) => (
-  <div
-    style={{
-      fontFamily: 'tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif'
-    }}
-  >
-    {children}
-  </div>
-);