tiny-ui 0.0.92 → 0.0.95

package/.stylelintrc

@@ -0,0 +1,19 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": [
+          "function",
+          "if",
+          "each",
+          "include",
+          "mixin",
+          "for",
+          "extend"
+        ]
+      }
+    ]
+  }
+}

package/CHANGELOG.md

@@ -8,6 +8,21 @@ Tiny UI strictly follows [Semantic Versioning 2.0.0](https://semver.org/).
 - **z version**: patch version at the end of every week for routine bugfix (anytime for urgent bugfix).
 
 
+### [0.0.94](https://github.com/wangdicoder/tiny-ui/compare/v0.0.93...v0.0.94) (2020-10-25)
+
+
+### Bug Fixes
+
+* `<Button />` danger type ([c280e07](https://github.com/wangdicoder/tiny-ui/commit/c280e0703614acd33670879af14b1b0817320093))
+* `<Split />` - resizer `onMouseDown` event ([73d74eb](https://github.com/wangdicoder/tiny-ui/commit/73d74eb09bafc2e925144e266716d2a708bb0262))
+
+### [0.0.93](https://github.com/wangdicoder/tiny-ui/compare/v0.0.92...v0.0.93) (2020-08-09)
+
+
+### Bug Fixes
+
+* `<Button />` - fix ButtonGroup style in focus state ([#9](https://github.com/wangdicoder/tiny-ui/issues/9)) ([29e88ac](https://github.com/wangdicoder/tiny-ui/commit/29e88ac4fff455ffdb4240f368e394bbcfc71bfb))
+
 ### [0.0.92](https://github.com/wangdicoder/tiny-ui/compare/v0.0.91...v0.0.92) (2020-07-25)
 
 

package/babel.config.js

@@ -0,0 +1,30 @@
+const isDev = process.env.NODE_ENV === 'development';
+const plugins = [
+  '@babel/plugin-transform-runtime',
+  '@babel/plugin-syntax-dynamic-import',
+  '@babel/plugin-transform-async-to-generator',
+  'transform-class-properties',
+];
+
+module.exports = (api) => {
+  api.cache(true);
+  return {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          corejs: 3.9,
+          useBuiltIns: 'usage',
+        },
+      ],
+      [
+        '@babel/preset-react',
+        {
+          runtime: 'automatic',
+        },
+      ],
+      '@babel/preset-typescript',
+    ],
+    plugins: isDev ? [...plugins, 'react-refresh/babel'] : [...plugins],
+  };
+};

package/components/_utils/dom.ts

@@ -9,7 +9,7 @@ export const getScroll = (node: Target, isVertical = true): number => {
   return node === window ? (node as Window)[windowProp] : (node as HTMLElement)[elementProp];
 };
 
-export const getRect = (node: Target = window): ClientRect => {
+export const getRect = (node: Target = window) => {
   return node !== window
     ? (node as HTMLElement).getBoundingClientRect()
     : {

package/components/alert/__tests__/alert.test.tsx

@@ -8,58 +8,56 @@ describe('<Alert />', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should render correct', () => {
-    const wrapper = render(<Alert>Alert</Alert>);
-    const element = wrapper.getByRole('alert');
-    expect(element).toBeInTheDocument();
-    expect(element).toHaveClass('ty-alert');
+  it('should render correctly', () => {
+    const { container } = render(<Alert>Alert</Alert>);
+    expect(container.firstChild).toHaveClass('ty-alert');
   });
 
   it('should render correct types', () => {
-    expect(
-      render(
-        <Alert type="success" data-testid="success">
-          Alert
-        </Alert>
-      ).getByTestId('success')
-    ).toHaveClass('ty-alert_success');
-    expect(
-      render(
-        <Alert type="info" data-testid="info">
-          Alert
-        </Alert>
-      ).getByTestId('info')
-    ).toHaveClass('ty-alert_info');
-    expect(
-      render(
-        <Alert type="warning" data-testid="warning">
-          Alert
-        </Alert>
-      ).getByTestId('warning')
-    ).toHaveClass('ty-alert_warning');
-    expect(
-      render(
-        <Alert type="error" data-testid="error">
-          Alert
-        </Alert>
-      ).getByTestId('error')
-    ).toHaveClass('ty-alert_error');
+    expect(render(<Alert type="success">Alert</Alert>).container.firstChild).toHaveClass(
+      'ty-alert_success'
+    );
+
+    expect(render(<Alert type="info">Alert</Alert>).container.firstChild).toHaveClass(
+      'ty-alert_info'
+    );
+
+    expect(render(<Alert type="warning">Alert</Alert>).container.firstChild).toHaveClass(
+      'ty-alert_warning'
+    );
+
+    expect(render(<Alert type="error">Alert</Alert>).container.firstChild).toHaveClass(
+      'ty-alert_error'
+    );
+  });
+
+  it('should render title', () => {
+    const { container } = render(<Alert title="This is a title">Alert Component</Alert>);
+    expect(container.querySelector('.ty-alert__title')).toBeTruthy();
   });
 
   it('should render cross icon', () => {
-    const wrapper = render(<Alert closable>This is closable.</Alert>);
-    expect(wrapper.getByText('✕')).toBeInTheDocument();
+    const { container } = render(<Alert closable>This is closable.</Alert>);
+    expect(container.querySelector('.ty-alert__close-btn')).toBeTruthy();
+  });
+
+  it('should render custom close text', () => {
+    const { container } = render(<Alert closeText="close now">This is closable.</Alert>);
+    expect(container.querySelector('.ty-alert__close-btn')).toBeTruthy();
+    expect(container.querySelector('.ty-alert__close-btn')?.innerHTML).toBe('close now');
   });
 
   it('should trigger onClose event', () => {
-    const mockCallback = jest.fn();
+    const fn = jest.fn();
     const wrapper = render(
-      <Alert closable onClose={mockCallback}>
+      <Alert closable onClose={fn}>
         This is a alert
       </Alert>
     );
     const closeBtn = wrapper.getByText('✕');
+
     fireEvent.click(closeBtn);
-    expect(mockCallback).toHaveBeenCalled();
+
+    expect(fn).toHaveBeenCalledTimes(1);
   });
 });

package/components/anchor/anchor.tsx

@@ -44,7 +44,7 @@ const Anchor = (props: AnchorProps): JSX.Element => {
   const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>, anchorName: string) => {
     const { location } = window;
     let url;
-    // if it is a HashRouter mode, prevent the default event nad update the query.
+    // if it is a HashRouter mode, prevent the default event and update the query.
     if (location.pathname.includes('/#/')) {
       url = location.protocol + '//' + location.host + location.pathname + `?anchor=${anchorName}`;
     } else {

package/components/aspect-ratio/__tests__/aspect-ratio.test.tsx

@@ -9,15 +9,18 @@ describe('<AspectRatio />', () => {
   });
 
   it('should render children', () => {
-    const wrapper = render(<AspectRatio>children</AspectRatio>);
-    expect(wrapper.getByText('children')).toBeInTheDocument();
+    const { container } = render(<AspectRatio>children</AspectRatio>);
+    expect(container.firstChild).toHaveStyle({ width: '100%' });
+    expect(container).toContainHTML('children');
   });
 
   it('should render correct ratio container', () => {
-    // const wrapper = render(<AspectRatio ratio={4 / 3} width={40} />);
+    const { container } = render(<AspectRatio ratio={4 / 3} />);
+    expect(container.querySelector('.ty-aspect-ratio__padding')).toHaveStyle({ paddingTop: '75%' });
   });
 
   it('should render correct width', () => {
-    // const wrapper = render(<AspectRatio width={20} />);
+    const { container } = render(<AspectRatio width={20} />);
+    expect(container.firstChild).toHaveStyle({ width: '20px' });
   });
 });

package/components/button/__tests__/button-group.test.tsx

@@ -13,12 +13,53 @@ describe('<ButtonGroup />', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  // it('should render child button correctly', () => {
-  //   const wrapper = mount(
-  //     <ButtonGroup btnType="primary">
-  //       <Button>Default</Button>
-  //     </ButtonGroup>
-  //   );
-  //   expect(wrapper.childAt(0).find('.ty-btn_primary').length).toBe(1);
-  // });
+  it('should render two buttons', () => {
+    const { container } = render(
+      <ButtonGroup>
+        <Button>Default</Button>
+        <Button>Default</Button>
+      </ButtonGroup>
+    );
+    expect(container.querySelectorAll('.ty-btn_default').length).toBe(2);
+  });
+
+  it('should render correct type of buttons', () => {
+    const { container } = render(
+      <ButtonGroup btnType="primary">
+        <Button>Default</Button>
+        <Button>Default</Button>
+      </ButtonGroup>
+    );
+    expect(container.querySelectorAll('.ty-btn_primary').length).toBe(2);
+  });
+
+  it('should render correct size of buttons', () => {
+    const { container } = render(
+      <ButtonGroup size="lg">
+        <Button>Default</Button>
+        <Button>Default</Button>
+      </ButtonGroup>
+    );
+    expect(container.querySelectorAll('.ty-btn_lg').length).toBe(2);
+  });
+
+  it('should render correct disabled of buttons', () => {
+    const { container } = render(
+      <ButtonGroup disabled>
+        <Button>Default</Button>
+        <Button>Default</Button>
+      </ButtonGroup>
+    );
+    expect(container.querySelectorAll('.ty-btn_disabled').length).toBe(2);
+  });
+
+  it('should only disable one button', () => {
+    const { container } = render(
+      <ButtonGroup>
+        <Button disabled>Default</Button>
+        <Button>Default</Button>
+      </ButtonGroup>
+    );
+    expect(container.querySelectorAll('.ty-btn_disabled').length).toBe(1);
+  });
 });

package/components/button/__tests__/button.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import Button from '../button';
+import Icon from '../../icon';
 
 describe('<Button />', () => {
   it('should match the snapshot', () => {
@@ -8,13 +9,100 @@ describe('<Button />', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should render primary correctly', () => {
-    const wrapper = render(<Button btnType="primary">Primary Button</Button>);
-    expect(wrapper.getByRole('button')).toHaveClass('ty-btn_primary');
+  describe('button type', () => {
+    it('should render default button by default', () => {
+      const { container } = render(<Button>Default Button</Button>);
+      expect(container.firstChild).toHaveClass('ty-btn');
+      expect(container.firstChild).toHaveClass('ty-btn_default');
+    });
+
+    it('should render primary button', () => {
+      const { container } = render(<Button btnType="primary">Primary Button</Button>);
+      expect(container.firstChild).toHaveClass('ty-btn_primary');
+    });
+
+    it('should render outline button', () => {
+      const { container } = render(<Button btnType="outline">Outline Button</Button>);
+      expect(container.firstChild).toHaveClass('ty-btn_outline');
+    });
+
+    it('should render ghost button', () => {
+      const { container } = render(<Button btnType="ghost">Ghost Button</Button>);
+      expect(container.firstChild).toHaveClass('ty-btn_ghost');
+    });
+
+    it('should render link button', () => {
+      const { container } = render(<Button btnType="link">Link Button</Button>);
+      expect(container.firstChild).toHaveClass('ty-btn_link');
+    });
+
+    it('should render success button', () => {
+      const { container } = render(<Button btnType="success">Success Button</Button>);
+      expect(container.firstChild).toHaveClass('ty-btn_success');
+    });
+
+    it('should render info button', () => {
+      const { container } = render(<Button btnType="info">Info Button</Button>);
+      expect(container.firstChild).toHaveClass('ty-btn_info');
+    });
+
+    it('should render warning button', () => {
+      const { container } = render(<Button btnType="warning">Warning Button</Button>);
+      expect(container.firstChild).toHaveClass('ty-btn_warning');
+    });
+
+    it('should render danger button', () => {
+      const { container } = render(<Button btnType="danger">Danger Button</Button>);
+      expect(container.firstChild).toHaveClass('ty-btn_danger');
+    });
+  });
+
+  describe('button size', () => {
+    it('should render medium size by default', () => {
+      const { container } = render(<Button>Medium Button</Button>);
+      expect(container.firstChild).toHaveClass('ty-btn_md');
+    });
+
+    it('should render small size', () => {
+      const { container } = render(<Button size="sm">Small Button</Button>);
+      expect(container.firstChild).toHaveClass('ty-btn_sm');
+    });
+
+    it('should render large size', () => {
+      const { container } = render(<Button size="lg">Large Button</Button>);
+      expect(container.firstChild).toHaveClass('ty-btn_lg');
+    });
+  });
+
+  it('should have loading icon', () => {
+    const { container } = render(<Button loading>Loading</Button>);
+    expect(container.firstChild).toHaveClass('ty-btn_loading');
+    expect(container.querySelector('.ty-btn__loader')).toBeTruthy();
   });
 
-  it('should disabled', () => {
-    const wrapper = render(<Button disabled>Disabled</Button>);
-    expect(wrapper.getByRole('button')).toHaveClass('ty-btn_disabled');
+  it('should have icon placement', () => {
+    const { container } = render(<Button icon={<Icon name="wifi" />}>Icon</Button>);
+    expect(container.querySelector('.ty-btn__icon-container')).toBeTruthy();
+  });
+
+  it('should be disabled', () => {
+    const { container } = render(<Button disabled>Disabled</Button>);
+    expect(container.firstChild).toHaveClass('ty-btn_disabled');
+    expect(container.firstChild).toBeDisabled();
+  });
+
+  it('should be a block style', () => {
+    const { container } = render(<Button block>Block</Button>);
+    expect(container.firstChild).toHaveClass('ty-btn_block');
+  });
+
+  it('should fire event when clicking the button', () => {
+    const fn = jest.fn();
+    const { container } = render(<Button onClick={fn}>Button</Button>);
+
+    const btn = container.firstChild;
+    btn && fireEvent.click(btn);
+
+    expect(fn).toHaveBeenCalledTimes(1);
   });
 });

package/components/button/button-group.tsx

@@ -20,10 +20,14 @@ const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
     const configContext = useContext(ConfigContext);
     const prefixCls = getPrefixCls('btn-group', configContext.prefixCls, customisedCls);
     const btnSize = props.size || configContext.componentSize || size;
-    const cls = classNames(prefixCls, className, {
-      [`${prefixCls}_round`]: round,
-      [`${prefixCls}_${btnType}`]: btnType,
-    });
+    const cls = classNames(
+      prefixCls,
+      {
+        [`${prefixCls}_round`]: round,
+        [`${prefixCls}_${btnType}`]: btnType,
+      },
+      className
+    );
     return (
       <div {...otherProps} className={cls} ref={ref}>
         {React.Children.map(children, (child) => {

package/components/button/button.tsx

@@ -23,13 +23,18 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props: ButtonPr
   const configContext = useContext(ConfigContext);
   const prefixCls = getPrefixCls('btn', configContext.prefixCls, customisedCls);
   const btnSize = props.size || configContext.componentSize || size;
-  const cls = classNames(prefixCls, className, `${prefixCls}_${btnSize}`, {
-    [`${prefixCls}_${btnType}`]: btnType,
-    [`${prefixCls}_block`]: block,
-    [`${prefixCls}_round`]: round,
-    [`${prefixCls}_disabled`]: disabled,
-    [`${prefixCls}_loading`]: loading,
-  });
+  const cls = classNames(
+    prefixCls,
+    `${prefixCls}_${btnSize}`,
+    {
+      [`${prefixCls}_${btnType}`]: btnType,
+      [`${prefixCls}_block`]: block,
+      [`${prefixCls}_round`]: round,
+      [`${prefixCls}_disabled`]: disabled,
+      [`${prefixCls}_loading`]: loading,
+    },
+    className
+  );
 
   const btnOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     if (disabled || loading) {

package/components/button/style/_mixin.scss

@@ -22,6 +22,7 @@
     color: $hover-color;
     background: $hover-background;
     border-color: $hover-border;
+    z-index: 1;
   }
 
   &:active {

package/components/button/types.ts

@@ -8,7 +8,7 @@ export type ButtonType =
   | 'ghost'
   | 'link'
   | 'info'
-  | 'error'
+  | 'danger'
   | 'warning'
   | 'success';
 

package/components/checkbox/checkbox.tsx

@@ -46,10 +46,10 @@ const Checkbox = React.forwardRef<HTMLLabelElement, CheckboxProps>(
     };
 
     useEffect(() => {
-      if ('value' in checkboxGroupContext && 'value' in props) {
-        setChecked((checkboxGroupContext.value as string[]).includes(value as string));
+      if ('value' in checkboxGroupContext && typeof checkboxGroupContext.value !== 'undefined' && 'value' in props ) {
+        setChecked((checkboxGroupContext.value).includes(value as string));
       }
-      'checked' in props && setChecked(props.checked as boolean);
+      'checked' in props && typeof props.checked !== 'undefined' && setChecked(props.checked);
     }, [props, checkboxGroupContext, value]);
 
     return (

package/components/dropdown/demo/placement.md

@@ -19,17 +19,6 @@ class PlacementExample extends React.PureComponent {
   render() {
     return (
       <div>
-        <Dropdown overlay={this.renderOverlay()} placement="bottom-start">
-          <Button>bottomLeft</Button>
-        </Dropdown>
-        <Dropdown overlay={this.renderOverlay()} placement="bottom">
-          <Button>bottomCenter</Button>
-        </Dropdown>
-        <Dropdown overlay={this.renderOverlay()} placement="bottom-end">
-          <Button>bottomRight</Button>
-        </Dropdown>
-        <br />
-        <br />
         <Dropdown overlay={this.renderOverlay()} placement="top-start">
           <Button>topLeft</Button>
         </Dropdown>
@@ -38,6 +27,19 @@ class PlacementExample extends React.PureComponent {
         </Dropdown>
         <Dropdown overlay={this.renderOverlay()} placement="top-end">
           <Button>topRight</Button>
+        </Dropdown>     
+   
+        <br />
+        <br />
+
+        <Dropdown overlay={this.renderOverlay()} placement="bottom-start">
+          <Button>bottomLeft</Button>
+        </Dropdown>
+        <Dropdown overlay={this.renderOverlay()} placement="bottom">
+          <Button>bottomCenter</Button>
+        </Dropdown>
+        <Dropdown overlay={this.renderOverlay()} placement="bottom-end">
+          <Button>bottomRight</Button>
         </Dropdown>
       </div> 
     );

package/components/dropdown/style/_index.scss

@@ -21,6 +21,10 @@
     }
   }
 
+  .#{$prefix}-menu:before{
+    content: none;
+  }
+
   .#{$prefix}-menu-item-group {
     &__title {
       padding: 8px 10px;

package/components/grid/style/_index.scss

@@ -54,11 +54,11 @@
   @mixin grid($size: '') {
     @for $i from 1 through 24 {
       &#{$size}-#{$i} {
-        width: 100% / (24 / $i);
+        width: calc(100% / (24 / $i));
       }
 
       &#{$size}-offset-#{$i} {
-        margin-left: 100% / (24 / $i);
+        margin-left: calc(100% / (24 / $i));
       }
 
       &#{$size}-order-#{$i} {

package/components/index.ts

@@ -1,3 +1,5 @@
+import 'intersection-observer';
+
 export { default as Alert } from './alert';
 export { default as Anchor } from './anchor';
 export { default as AspectRatio } from './aspect-ratio';
@@ -8,7 +10,7 @@ export { default as Badge } from './badge';
 export { default as Breadcrumb } from './breadcrumb';
 export { default as Button } from './button';
 export { default as Card } from './card';
-export { default as Carousel } from './carousel';
+// export { default as Carousel } from './carousel';
 export { default as Checkbox } from './checkbox';
 export { default as ConfigProvider } from './config-provider';
 export { default as CopyToClipboard } from './copy-to-clipboard';
@@ -53,12 +55,13 @@ export { default as Select } from './select';
 export { default as Skeleton } from './skeleton';
 export { default as Slider } from './slider';
 export { default as Split } from './split';
+export { default as SplitButton } from './split-button';
 export { default as Space } from './space';
 export { default as Steps } from './steps';
 export { default as Sticky } from './sticky';
 export { default as StrengthIndicator } from './strength-indicator';
 export { default as Switch } from './switch';
-export { default as Tabs } from './tabs';
+// export { default as Tabs } from './tabs';
 export { default as Tag } from './tag';
 export { default as Textarea } from './textarea';
 export { default as Timeline } from './timeline';
@@ -69,5 +72,5 @@ export { default as Transition } from './transition';
 export { default as Tree } from './tree';
 export { default as Typography } from './typography';
 export { default as Upload } from './upload';
-// export { default as Waterfall } from './waterfall';
+
 export { withLocale } from './intl-provider/with-locale';

package/components/input/input.tsx

@@ -92,7 +92,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     }, [inputPadding]);
 
     useEffect(() => {
-      'value' in props && setValue(props.value as string);
+      'value' in props && typeof props.value !== 'undefined' && setValue(props.value);
     }, [props]);
 
     return (

package/components/layout/layout.tsx

@@ -8,7 +8,7 @@ import { LayoutProps } from './types';
 /**
  * Layout component
  */
-const Layout = React.forwardRef<HTMLDivElement, LayoutProps>(
+const Layout = React.forwardRef<HTMLElement, LayoutProps>(
   (props: LayoutProps, ref): JSX.Element => {
     const { className, children, prefixCls: customisedCls, ...otherProps } = props;
     const [hasSidebar, setHasSidebar] = useState(false);

package/components/link/__test__/__snapshots__/link.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Link /> should match the snapshot 1`] = `
+<DocumentFragment>
+  <a
+    aria-disabled="false"
+    class="ty-link"
+    href="#"
+    role="link"
+    target="_blank"
+  >
+    <span>
+      Link
+    </span>
+  </a>
+</DocumentFragment>
+`;

package/components/link/__test__/link.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Link from '../index';
+
+describe('<Link />', () => {
+  it('should match the snapshot', () => {
+    const { asFragment } = render(<Link href="#">Link</Link>);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  describe('external', () => {
+    it('should set _blank to target attribute by default', () => {
+      const { container } = render(<Link>Link</Link>);
+      expect(container.firstChild).toHaveAttribute('target', '_blank');
+    });
+
+    it('should set _self to target attribute by default', () => {
+      const { container } = render(<Link external={false}>Link</Link>);
+      expect(container.firstChild).toHaveAttribute('target', '_self');
+    });
+  });
+
+  it('should be disabled', () => {
+    const { container } = render(<Link disabled>Link</Link>);
+    expect(container.firstChild).toHaveClass('ty-link_disabled');
+  });
+});