@douyinfe/semi-ui 2.1.3 → 2.1.4-alpha.0

package/gulpfile.js

@@ -0,0 +1,116 @@
+const path = require('path');
+const { Buffer } = require('buffer');
+const through2 = require('through2');
+const merge2 = require('merge2');
+const gulp = require('gulp');
+const gulpTS = require('gulp-typescript');
+const gulpBabel = require('gulp-babel');
+const sass = require('gulp-sass')(require('sass'));
+const replace = require('gulp-replace');
+const del = require('del');
+const tsConfig = require('./tsconfig.json');
+const getBabelConfig = require('./getBabelConfig');
+
+gulp.task('cleanLib', function cleanLib() {
+    return del(['lib/**/*']);
+});
+
+gulp.task('compileTSXForESM', function compileTSXForESM() {
+    const tsStream = gulp.src(['**/*.tsx', '**/*.ts', '!**/node_modules/**/*.*', '!**/_story/**/*.*'])
+        .pipe(gulpTS({
+            ...tsConfig.compilerOptions,
+            rootDir: path.join(__dirname, '..')
+        }));
+    const jsStream = tsStream.js
+        .pipe(gulpBabel(getBabelConfig({ isESM: true })))
+        .pipe(replace(/(import\s+)['"]@douyinfe\/semi-foundation\/([^'"]+)['"]/g, '$1\'@douyinfe/semi-foundation/lib/es/$2\''))
+        .pipe(replace(/((?:import|export)\s+.+from\s+)['"]@douyinfe\/semi-foundation\/([^'"]+)['"]/g, '$1\'@douyinfe/semi-foundation/lib/es/$2\''))
+        .pipe(replace(/(import\s+)['"]([^'"]+)(\.scss)['"]/g, '$1\'$2.css\''))
+        .pipe(gulp.dest('lib/es'));
+    const dtsStream = tsStream.dts
+        .pipe(replace(/(import\s+)['"]@douyinfe\/semi-foundation\/([^'"]+)['"]/g, '$1\'@douyinfe/semi-foundation/lib/es/$2\''))
+        .pipe(replace(/((?:import|export)\s+.+from\s+)['"]@douyinfe\/semi-foundation\/([^'"]+)['"]/g, '$1\'@douyinfe/semi-foundation/lib/es/$2\''))
+        .pipe(replace(/(import\(['"])@douyinfe\/semi-foundation\/(.+)/g, '$1@douyinfe/semi-foundation/lib/es/$2'))
+        .pipe(replace(/(import\s+)['"]([^'"]+)(\.scss)['"]/g, '$1\'$2.css\''))
+        .pipe(gulp.dest('lib/es'));
+    return merge2([jsStream, dtsStream]);
+});
+
+gulp.task('compileTSXForCJS', function compileTSXForCJS() {
+    const tsStream = gulp.src(['**/*.tsx', '**/*.ts', '!**/node_modules/**/*.*', '!**/_story/**/*.*'])
+        .pipe(gulpTS({
+            ...tsConfig.compilerOptions,
+            rootDir: path.join(__dirname, '..')
+        }));
+    const jsStream = tsStream.js
+        .pipe(gulpBabel(getBabelConfig({ isESM: false })))
+        .pipe(replace(/(require\(['"])@douyinfe\/semi-foundation\/([^'"]+)(['"]\))/g, '$1@douyinfe/semi-foundation/lib/cjs/$2$3'))
+        .pipe(replace(/(require\(['"])([^'"]+)(\.scss)(['"]\))/g, '$1$2.css$4'))
+        .pipe(gulp.dest('lib/cjs'));
+    const dtsStream = tsStream.dts
+        .pipe(replace(/(import\s+)['"]@douyinfe\/semi-foundation\/([^'"]+)['"]/g, '$1\'@douyinfe/semi-foundation/lib/cjs/$2\''))
+        .pipe(replace(/((?:import|export)\s+.+from\s+)['"]@douyinfe\/semi-foundation\/([^'"]+)['"]/g, '$1\'@douyinfe/semi-foundation/lib/cjs/$2\''))
+        .pipe(replace(/(import\(['"])@douyinfe\/semi-foundation\/(.+)/g, '$1@douyinfe/semi-foundation/lib/cjs/$2'))
+        .pipe(replace(/(import\s+)['"]([^'"]+)(\.scss)['"]/g, '$1\'$2.css\''))
+        .pipe(gulp.dest('lib/cjs'));
+    return merge2([jsStream, dtsStream]);
+});
+
+gulp.task('compileScss', function compileScss() {
+    return gulp.src(['**/*.scss', '!**/node_modules/**/*.*', '!**/_story/**/*.scss'])
+        .pipe(through2.obj(
+            function (chunk, enc, cb) {
+                const rootPath = path.join(__dirname, '../../');
+                const scssVarStr = `@import "${rootPath}/packages/semi-theme-default/scss/index.scss";\n`;
+                const cssVarStr = `@import "${rootPath}/packages/semi-theme-default/scss/global.scss";\n`;
+                const scssBuffer = Buffer.from(scssVarStr);
+                const buffers = [scssBuffer];
+                if (/_base\/base\.scss/.test(chunk.path)) {
+                    buffers.push(Buffer.from(cssVarStr));
+                }
+                chunk.contents = Buffer.concat([...buffers, chunk.contents]);
+                cb(null, chunk);
+            }
+        ))
+        .pipe(sass({
+            importer: (url, prev) => {
+                const rootPath = path.join(__dirname, '../../');
+                let realUrl = url;
+                if (/~@douyinfe\/semi-foundation/.test(url)) {
+                    const semiUIPath = path.join(rootPath, 'packages/semi-foundation');
+                    realUrl = url.replace(/~@douyinfe\/semi-foundation/, semiUIPath);
+                }
+                return { url: realUrl };
+            }
+        }).on('error', sass.logError))
+        .pipe(gulp.dest('lib/es'))
+        .pipe(gulp.dest('lib/cjs'));
+});
+
+function moveScss(isESM) {
+    const moduleTarget = isESM ? 'es' : 'cjs';
+    const targetDir = isESM ? 'lib/es' : 'lib/cjs';
+    return gulp.src(['**/*.scss', '!**/node_modules/**/*.*', '!**/_story/**/*.scss'])
+        .pipe(replace(/(@import\s+['"]~)(@douyinfe\/semi-foundation\/)/g, `$1@douyinfe/semi-foundation/lib/${moduleTarget}/`))
+        .pipe(gulp.dest(targetDir));
+}
+
+gulp.task('moveScssForESM', function moveScssForESM() {
+    return moveScss(true);
+});
+
+gulp.task('moveScssForCJS', function moveScssForCJS() {
+    return moveScss(false);
+});
+
+gulp.task('compileLib', 
+    gulp.series(
+        [
+            'cleanLib', 
+            'compileScss', 
+            gulp.parallel('moveScssForESM', 'moveScssForCJS'),
+            gulp.parallel('compileTSXForESM', 'compileTSXForCJS')
+        ]
+    )
+);
+

package/iconButton/_story/iconButton.stories.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import IconButton from '../index';
+
+const stories = storiesOf('IconButton', module);
+
+stories.add(`IconButton`, () => (
+    <div>
+        <IconButton icon={'user'} />
+        <IconButton icon={'delete'} />
+        <IconButton icon={'apps'} />
+        <IconButton icon={'camera'} type={'tertiary'} />
+        <IconButton icon={'globe'} theme={'solid'} />
+    </div>
+));

package/iconButton/index.tsx

@@ -0,0 +1,130 @@
+/* eslint-disable eqeqeq */
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/button/constants';
+import { strings as iconStrings } from '@douyinfe/semi-foundation/icons/constants';
+import Button, { Theme, ButtonProps } from '../button/Button';
+import SpinIcon from '../spin/icon';
+import { IconSize } from '@douyinfe/semi-icons';
+import { noop } from 'lodash';
+import '@douyinfe/semi-foundation/button/iconButton.scss';
+
+const iconSizes = iconStrings.SIZE;
+
+export type HorizontalPaddingType = 'left' | 'right';
+
+export interface IconButtonProps extends ButtonProps {
+    icon?: React.ReactNode;
+    iconPosition?: 'left' | 'right';
+    iconSize?: IconSize;
+    iconStyle?: React.CSSProperties;
+    loading?: boolean;
+    theme?: Theme;
+    style?: React.CSSProperties;
+    className?: string;
+    disabled?: boolean;
+    noHorizontalPadding?: boolean | HorizontalPaddingType | HorizontalPaddingType[];
+    prefixCls?: string;
+}
+
+// TODO: add a buttonGroup component
+// TODO: icon configuration
+class IconButton extends PureComponent<IconButtonProps> {
+    static defaultProps = {
+        iconPosition: strings.DEFAULT_ICON_POSITION,
+        prefixCls: cssClasses.PREFIX,
+        loading: false,
+        noHorizontalPadding: false, //  true same as ['left', 'right']
+        onMouseEnter: noop,
+        onMouseLeave: noop,
+    };
+
+    static propTypes = {
+        iconStyle: PropTypes.object,
+        style: PropTypes.object,
+        loading: PropTypes.bool,
+        prefixCls: PropTypes.string,
+        icon: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.node]),
+        iconSize: PropTypes.oneOf(iconSizes),
+        noHorizontalPadding: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.array]),
+        children: PropTypes.node,
+        theme: PropTypes.string,
+        iconPosition: PropTypes.oneOf(strings.iconPositions),
+        className: PropTypes.string,
+        onMouseEnter: PropTypes.func,
+        onMouseLeave: PropTypes.func,
+    };
+
+    render() {
+        const {
+            children: originChildren,
+            iconPosition,
+            iconSize,
+            iconStyle,
+            style: originStyle,
+            icon,
+            noHorizontalPadding,
+            theme,
+            className,
+            prefixCls,
+            loading,
+            ...otherProps
+        } = this.props;
+
+        const style = { ...originStyle };
+        // TODO: review check
+        if (Array.isArray(noHorizontalPadding)) {
+            noHorizontalPadding.includes('left') && (style.paddingLeft = 0);
+            noHorizontalPadding.includes('right') && (style.paddingRight = 0);
+        } else if (noHorizontalPadding === true) {
+            style.paddingLeft = 0;
+            style.paddingRight = 0;
+        }
+
+        let finalChildren = null;
+
+        let IconElem = null;
+
+        if (loading && !otherProps.disabled) {
+            IconElem = <SpinIcon />;
+        } else if (React.isValidElement(icon)) {
+            IconElem = icon;
+        }
+
+        const btnTextCls = classNames({
+            [`${prefixCls}-content-left`]: iconPosition === 'right',
+            [`${prefixCls}-content-right`]: iconPosition === 'left',
+        });
+
+        const children = originChildren != null ? <span className={btnTextCls}>{originChildren}</span> : null;
+
+        if (iconPosition === 'left') {
+            finalChildren = (
+                <>
+                    {IconElem}
+                    {children}
+                </>
+            );
+        } else {
+            finalChildren = (
+                <>
+                    {children}
+                    {IconElem}
+                </>
+            );
+        }
+
+        const iconBtnCls = classNames(className, `${prefixCls}-with-icon`, {
+            [`${prefixCls}-with-icon-only`]: children == null || (children as any) === '',
+            [`${prefixCls}-loading`]: loading,
+        });
+        return (
+            <Button {...otherProps} className={iconBtnCls} theme={theme} style={style}>
+                {finalChildren}
+            </Button>
+        );
+    }
+}
+
+export default IconButton;

package/icons/_story/Others/add-template-icon.svg

@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0)">
+        <path fill="#9B9EA0" d="M23.0834 17.2498C23.7738 17.2498 24.3334 16.6902 24.3334 15.9998C24.3334 15.3095 23.7738 14.7498 23.0834 14.7498L17.2501 14.7498L17.2501 8.9165C17.2501 8.22615 16.6904 7.6665 16.0001 7.6665C15.3097 7.6665 14.7501 8.22615 14.7501 8.9165L14.7501 14.7498L8.91675 14.7498C8.22639 14.7498 7.66675 15.3095 7.66675 15.9998C7.66675 16.6902 8.22639 17.2498 8.91675 17.2498L14.7501 17.2498V23.0832C14.7501 23.7735 15.3097 24.3332 16.0001 24.3332C16.6904 24.3332 17.2501 23.7735 17.2501 23.0832V17.2498L23.0834 17.2498Z"/>
+    </g>
+    <defs>
+        <clipPath id="clip0">
+            <path d="M6 6H26V26H6V6Z" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>

package/icons/_story/Others/hangup.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 2C2.67157 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67157 22 3.5 22C4.32843 22 5 21.3284 5 20.5V3.5C5 2.67157 4.32843 2 3.5 2ZM6.12276 4.79964C6.4688 4.29286 7.58797 3 10 3C11.5 3 12.75 3.75 14 4.5C15.25 5.25 16.5 6 18 6C19.536 6 20.5477 5.73787 21.1693 5.48202C21.4989 5.34639 22 5.60932 22 5.96569V15.5858C22 15.851 21.8923 16.1051 21.6637 16.2395C21.1606 16.5354 20.045 17 18 17C16.5 17 15.25 16.25 14 15.5C12.75 14.75 11.5 14 10 14C8.45779 14 7.44411 14.5285 6.82312 15.0422C6.57919 15.244 6 15.0457 6 14.7292V5.23607C6 5.08082 6.03522 4.92785 6.12276 4.79964Z" fill="currentColor"/>
+</svg>

package/icons/_story/Others/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Icon from '../../index';
+
+const Add = () => (
+    <svg width="32" height="32" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <g clipPath="url(#clip0)">
+            <path fill="#9B9EA0" d="M23.0834 17.2498C23.7738 17.2498 24.3334 16.6902 24.3334 15.9998C24.3334 15.3095 23.7738 14.7498 23.0834 14.7498L17.2501 14.7498L17.2501 8.9165C17.2501 8.22615 16.6904 7.6665 16.0001 7.6665C15.3097 7.6665 14.7501 8.22615 14.7501 8.9165L14.7501 14.7498L8.91675 14.7498C8.22639 14.7498 7.66675 15.3095 7.66675 15.9998C7.66675 16.6902 8.22639 17.2498 8.91675 17.2498L14.7501 17.2498V23.0832C14.7501 23.7735 15.3097 24.3332 16.0001 24.3332C16.6904 24.3332 17.2501 23.7735 17.2501 23.0832V17.2498L23.0834 17.2498Z" />
+        </g>
+        <defs>
+            <clipPath id="clip0">
+                <path d="M6 6H26V26H6V6Z" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+);
+
+
+export default function Demo() {
+    return (
+        <>
+            <Icon svg={<Add />} style={{ color: '#f93920' }} />
+        </>
+    );
+}

package/icons/_story/Others/xianglin.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.1 0.5C0.940202 0.5 0 1.4402 0 2.6V12.4C0 13.5598 0.940202 14.5 2.1 14.5H11.9C13.0598 14.5 14 13.5598 14 12.4V2.6C14 1.4402 13.0598 0.5 11.9 0.5H2.1ZM2.1 4.35C2.1 3.7701 2.5701 3.3 3.15 3.3C3.7299 3.3 4.2 3.7701 4.2 4.35V10.65C4.2 11.2299 3.7299 11.7 3.15 11.7C2.5701 11.7 2.1 11.2299 2.1 10.65V4.35ZM5.6 4C5.6 3.6134 5.9134 3.3 6.3 3.3H7.7C10.15 3.3 11.9 5.1804 11.9 7.5C11.9 9.8196 10.15 11.7 7.7 11.7H6.3C5.9134 11.7 5.6 11.3866 5.6 11V4ZM7.7 9.6C8.75 9.6 9.8 9.03456 9.8 7.5C9.8 5.96544 8.75 5.4 7.7 5.4V9.6Z" fill="currentColor"/>
+</svg>

package/icons/_story/icon.stories.js

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import Others from './Others';
+import {
+  IconHome,
+  IconLock,
+  IconClear,
+  IconTickCircle,
+  IconTick,
+  IconClose,
+  IconCaretup,
+} from '@douyinfe/semi-icons';
+
+export default {
+  title: 'Icon'
+}
+
+export {
+  Others
+}
+
+export const IconDemo = () => (
+  <div>
+    <div>
+      <IconHome size="large" />
+      <IconLock size="small" />
+      <IconLock />
+      <IconClear />
+      <IconTickCircle />
+      <IconTick />
+      <IconClose />
+      <IconCaretup />
+    </div>
+    <div
+      style={{
+        color: 'red',
+      }}
+    >
+      <IconHome size="large" />
+      <IconLock size="small" />
+      <IconLock />
+      <IconClear />
+      <IconTickCircle />
+      <IconTick />
+      <IconClose />
+      <IconCaretup />
+    </div>
+    <div
+      style={{
+        color: 'pink',
+      }}
+    >
+      <IconHome size="large" />
+      <IconLock size="small" />
+      <IconLock />
+      <IconClear />
+      <IconTickCircle />
+      <IconTick />
+      <IconClose />
+      <IconCaretup />
+    </div>
+  </div>
+);

package/icons/_story/icon.stories.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { IconHome, IconLock, IconClear, IconTickCircle, IconTick, IconClose, IconCaretUp } from '@douyinfe/semi-icons';
+const stories = storiesOf('Icon', module);
+stories.add('Icon', () => (
+    <div>
+        <div>
+            <IconHome size="large" />
+            <IconLock size="small" />
+            <IconLock />
+            <IconClear />
+            <IconTickCircle />
+            <IconTick />
+            <IconClose />
+            <IconCaretUp />
+        </div>
+        <div
+            style={{
+                color: 'red',
+            }}
+        >
+            <IconHome size="large" />
+            <IconLock size="small" />
+            <IconLock />
+            <IconClear />
+            <IconTickCircle />
+            <IconTick />
+            <IconClose />
+            <IconCaretUp />
+        </div>
+        <div
+            style={{
+                color: 'pink',
+            }}
+        >
+            <IconHome size="large" />
+            <IconLock size="small" />
+            <IconLock />
+            <IconClear />
+            <IconTickCircle />
+            <IconTick />
+            <IconClose />
+            <IconCaretUp />
+        </div>
+    </div>
+));

package/icons/index.tsx

@@ -0,0 +1,5 @@
+import Icon, { IconProps, IconSize } from '@douyinfe/semi-icons';
+
+export { IconProps, IconSize };
+
+export default Icon;

package/index.ts

@@ -0,0 +1,94 @@
+import './_base/base.scss';
+export { default as Anchor } from './anchor';
+export { default as AutoComplete } from './autoComplete';
+export { default as Avatar } from './avatar';
+export { default as AvatarGroup } from './avatar/avatarGroup';
+export { default as BackTop } from './backtop';
+export { default as Badge } from './badge';
+export { default as Banner } from './banner';
+export { default as Breadcrumb } from './breadcrumb';
+export { default as Button } from './button';
+export { default as ButtonGroup } from './button/buttonGroup';
+export { default as Calendar } from './calendar';
+export { default as Card } from './card';
+export { default as CardGroup } from './card/cardGroup';
+export { default as Cascader } from './cascader';
+export { default as Checkbox } from './checkbox';
+export { default as CheckboxGroup } from './checkbox/checkboxGroup';
+export { default as Collapse } from './collapse';
+export { default as Collapsible } from './collapsible';
+export { default as ConfigProvider } from './configProvider';
+export { default as DatePicker } from './datePicker';
+export { default as Descriptions } from './descriptions';
+export { default as Empty } from './empty';
+export { default as Modal } from './modal';
+export { default as Dropdown } from './dropdown';
+export { default as DropdownMenu } from './dropdown/dropdownMenu';
+export { default as DropdownItem } from './dropdown/dropdownItem';
+export { default as DropdownDivider } from './dropdown/dropdownDivider';
+
+export { Row, Col } from './grid';
+export { Layout } from './layout';
+export { default as List } from './list';
+export { default as IconButton } from './iconButton';
+export { default as Icon } from './icons';
+export { default as Input } from './input';
+export { default as InputGroup } from './input/inputGroup';
+export { default as TextArea } from './input/textarea';
+export { default as InputNumber } from './inputNumber';
+export { default as Nav } from './navigation';
+export { default as NavItem } from './navigation/Item';
+export { default as SubNav } from './navigation/SubNav';
+export { default as Notification } from './notification';
+export { default as OverflowList } from './overflowList';
+export { default as Pagination } from './pagination';
+export { default as Popconfirm } from './popconfirm';
+export { default as Popover } from './popover';
+export { default as Progress } from './progress';
+export { default as Radio } from './radio';
+export { default as RadioGroup } from './radio/radioGroup';
+export { default as Rating } from './rating';
+export { default as ScrollList } from './scrollList';
+export { default as ScrollItem } from './scrollList/scrollItem';
+export { default as Select } from './select';
+export { default as SideSheet } from './sideSheet';
+export { default as Skeleton } from './skeleton';
+
+export { default as Slider } from './slider';
+export { default as Space } from './space';
+export { default as Spin } from './spin';
+export { default as SplitButtonGroup } from './button/splitButtonGroup';
+export { default as Step } from './steps/step';
+export { default as Steps } from './steps';
+export { default as Switch } from './switch';
+
+export { default as Table } from './table';
+export { default as Tabs } from './tabs';
+export { default as TabPane } from './tabs/TabPane';
+export { default as Tag } from './tag';
+export { default as TagGroup } from './tag/group';
+export { default as TagInput } from './tagInput';
+export { default as Timeline } from './timeline';
+export { default as TimePicker } from './timePicker';
+export { default as Toast, ToastFactory } from './toast';
+export { default as Tooltip } from './tooltip';
+export { default as Tree } from './tree';
+export { default as TreeSelect } from './treeSelect';
+export { default as Upload } from './upload';
+export { default as Typography } from './typography';
+export { default as Transfer } from './transfer';
+
+export { default as LocaleProvider } from './locale/localeProvider';
+
+/** Form */
+export {
+    Form,
+    useFormApi,
+    useFormState,
+    useFieldApi,
+    useFieldState,
+    withFormState,
+    withFormApi,
+    withField,
+    ArrayField,
+} from './form';