tiny-ui 0.0.94 → 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/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/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/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/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';
@@ -59,7 +61,7 @@ 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';
@@ -70,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');
+  });
+});

package/components/popup/index.tsx

@@ -43,6 +43,9 @@ const Popup = (props: PopupProps): JSX.Element => {
   const delayDisplayPopupTimer = useRef<number | undefined>(undefined);
   const delayHidePopupTimer = useRef<number | undefined>(undefined);
   const popperRef = useRef<Instance | undefined>(undefined);
+  const elementProps = {
+    ref: (ref: HTMLElement | null) => (targetRef.current = ref),
+  };
 
   const displayPopup = useCallback(() => {
     setPopupVisible(true);
@@ -255,10 +258,6 @@ const Popup = (props: PopupProps): JSX.Element => {
     </Transition>
   );
 
-  const elementProps = {
-    ref: (ref: HTMLElement | null) => (targetRef.current = ref),
-  };
-
   return (
     <>
       {React.cloneElement(children, elementProps)}

package/components/popup/style/_index.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @import '../../style/variables';
 
 .#{$prefix}-popup {
@@ -43,7 +44,7 @@
 
   &[data-popper-placement^='top'] {
     & > .#{$prefix}-popup__arrow {
-      bottom: -$popover-arrow-size / 2;
+      bottom: math.div(-$popover-arrow-size, 2);
 
       &:before {
         box-shadow: 3px 3px 7px rgba(0, 0, 0, .07);
@@ -53,7 +54,7 @@
 
   &[data-popper-placement^='bottom'] {
     > .#{$prefix}-popup__arrow {
-      top: -$popover-arrow-size / 2;
+      top: math.div(-$popover-arrow-size, 2);
 
       &:before {
         box-shadow: -2px -2px 5px rgba(0, 0, 0, .06);
@@ -63,7 +64,7 @@
 
   &[data-popper-placement^='left'] {
     > .#{$prefix}-popup__arrow {
-      right: -$popover-arrow-size / 2;
+      right: math.div(-$popover-arrow-size, 2);
 
       &:before {
         box-shadow: 3px -3px 7px rgba(0, 0, 0, .07);
@@ -73,7 +74,7 @@
 
   &[data-popper-placement^='right'] {
     > .#{$prefix}-popup__arrow {
-      left: -$popover-arrow-size / 2;
+      left: math.div(-$popover-arrow-size, 2);
 
       &:before {
         box-shadow: -3px 3px 7px rgba(0, 0, 0, .07);

package/components/radio/radio.tsx

@@ -46,7 +46,7 @@ const Radio = React.forwardRef<HTMLLabelElement, RadioProps>(
 
     useEffect(() => {
       'value' in radioGroupContext && setChecked(value === radioGroupContext.value);
-      'checked' in props && setChecked(props.checked as boolean);
+      'checked' in props && typeof props.checked !== 'undefined' && setChecked(props.checked);
     }, [props, radioGroupContext, value]);
 
     return (

package/components/sticky/style/_index.scss

@@ -1,5 +1,8 @@
 @import '../../style/variables';
 
 .#{$prefix}-sticky {
-  transform: translateZ(0);
+
+  &_fixed {
+    position: fixed;
+  }
 }

package/components/style/_animation.scss

@@ -2,6 +2,7 @@
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
@@ -11,6 +12,7 @@
   from {
     transform: rotate(0);
   }
+
   to {
     transform: rotate(-360deg);
   }
@@ -21,6 +23,7 @@
     transform: scale(0.8);
     opacity: 0.5;
   }
+
   100% {
     transform: scale(2.8);
     opacity: 0;

package/components/style/_component.scss

@@ -67,4 +67,3 @@
 @import "../tree/style/index";
 @import "../typography/style/index";
 @import "../upload/style/index";
-@import "../waterfall/style/index";