feat!: support spread attributes

taskany-inc · Aug 11, 2023 · b6c4c71 · b6c4c71
1 parent 49bb4dd
commit b6c4c71
Show file tree

Hide file tree

Showing 51 changed files with 269 additions and 387 deletions.
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
@@ -2,11 +2,12 @@ import React from 'react';
 import styled from 'styled-components';
 import { gray7, gray9, radiusL } from '@taskany/colors';
 
-interface BadgeProps {
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
     size?: 's' | 'm';
     color?: string;
-    children: React.ReactNode;
     className?: string;
+
     onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
 
@@ -38,10 +39,8 @@ const StyledBadge = styled.div<{ size: BadgeProps['size']; color?: BadgeProps['c
     }
 `;
 
-export const Badge: React.FC<BadgeProps> = ({ size = 's', children, className, onClick }) => (
-    <StyledBadge className={className} size={size} onClick={onClick}>
+export const Badge: React.FC<BadgeProps> = ({ size = 's', children, ...props }) => (
+    <StyledBadge size={size} {...props}>
         {children}
     </StyledBadge>
 );
-
-export default Badge;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -331,5 +331,3 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         );
     },
 );
-
-export default Button;
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -9,5 +9,3 @@ export const Card = styled.div`
     border: 1px solid ${gray4};
     border-radius: ${radiusM};
 `;
-
-export default Card;
diff --git a/src/components/CardActions.tsx b/src/components/CardActions.tsx
@@ -11,5 +11,3 @@ export const CardActions = styled.div`
     left: 0;
     padding: 20px 12px 10px;
 `;
-
-export default CardActions;
diff --git a/src/components/CardComment.tsx b/src/components/CardComment.tsx
@@ -6,5 +6,3 @@ export const CardComment = styled.div`
     padding: 12px 14px 12px;
     user-select: auto;
 `;
-
-export default CardComment;
diff --git a/src/components/CardContent.tsx b/src/components/CardContent.tsx
@@ -5,5 +5,3 @@ export const CardContent = styled.div`
     box-sizing: border-box;
     padding: 12px 14px;
 `;
-
-export default CardContent;
diff --git a/src/components/CardInfo.tsx b/src/components/CardInfo.tsx
@@ -15,16 +15,14 @@ const StyledCardInfo = styled(Text)`
     border-top-right-radius: ${radiusM};
 `;
 
-interface CardInfoProps {
+interface CardInfoProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
     children?: React.ReactNode;
     onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
 }
 
-export const CardInfo: React.FC<CardInfoProps> = ({ className, children, onClick }) => (
-    <StyledCardInfo className={className} size="xs" weight="bold" color={gray8} onClick={onClick}>
+export const CardInfo: React.FC<CardInfoProps> = ({ children, ...props }) => (
+    <StyledCardInfo size="xs" weight="bold" color={gray8} {...props}>
         {children}
     </StyledCardInfo>
 );
-
-export default CardInfo;
diff --git a/src/components/CircleProgressBar.tsx b/src/components/CircleProgressBar.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { brandColor, gray5 } from '@taskany/colors';
 import styled from 'styled-components';
 
-import Text from './Text';
+import { Text } from './Text';
 
-interface CircleProgressBarProps {
+interface CircleProgressBarProps extends React.HTMLAttributes<HTMLSpanElement> {
     value: number;
     size?: 's' | 'm' | 'l';
     className?: string;
@@ -41,7 +41,7 @@ const StyledCircle = styled.circle`
     transition: stroke-dasharray, stroke-dashoffset 100ms ease-in-out;
 `;
 
-export const CircleProgressBar: React.FC<CircleProgressBarProps> = ({ value, size = 'm', className }) => {
+export const CircleProgressBar: React.FC<CircleProgressBarProps> = ({ value, size = 'm', ...props }) => {
     const diameter = sizeMap[size];
     const strokeWidth = size === 's' ? 2 : 3;
     const radius = diameter / 2;
@@ -51,7 +51,7 @@ export const CircleProgressBar: React.FC<CircleProgressBarProps> = ({ value, siz
     const offset = circumReference - (value / 100) * circumReference;
 
     return (
-        <StyledCircleProgressBar className={className}>
+        <StyledCircleProgressBar {...props}>
             <StyledCircleProgressBarAligner>
                 <StyledCircleProgressBarValue>
                     <Text weight="bold" color={brandColor} size={size === 'l' ? 'xs' : 'xxs'} as="span">
@@ -82,5 +82,3 @@ export const CircleProgressBar: React.FC<CircleProgressBarProps> = ({ value, siz
         </StyledCircleProgressBar>
     );
 };
-
-export default CircleProgressBar;
diff --git a/src/components/CleanButton.tsx b/src/components/CleanButton.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { gray10, gray7, gray8 } from '@taskany/colors';
 
-interface CleanButtonProps {
+interface CleanButtonProps extends React.HTMLAttributes<HTMLDivElement> {
     className?: string;
 
     onClick?: (e: React.MouseEvent) => void;
@@ -35,10 +35,4 @@ const StyledCleanButton = styled.div`
     }
 `;
 
-export const CleanButton: React.FC<CleanButtonProps> = ({ className, onClick }) => (
-    <StyledCleanButton className={className} onClick={onClick}>
-        +
-    </StyledCleanButton>
-);
-
-export default CleanButton;
+export const CleanButton: React.FC<CleanButtonProps> = (props) => <StyledCleanButton {...props}>+</StyledCleanButton>;
diff --git a/src/components/ComboBox.tsx b/src/components/ComboBox.tsx
@@ -33,7 +33,7 @@ interface ComboBoxItemProps {
     onClick: (value?: any) => void;
 }
 
-interface ComboBoxProps {
+interface ComboBoxProps extends React.HTMLAttributes<HTMLDivElement> {
     renderInput: (props: ComboBoxInputProps) => React.ReactNode;
     renderItem: (props: ComboBoxItemProps) => React.ReactNode | Record<any, any>;
     renderTrigger?: (props: ComboBoxTriggerProps) => React.ReactNode;
@@ -98,6 +98,7 @@ export const ComboBox = forwardRef<HTMLDivElement, ComboBoxProps>(
             onChange,
             onClose,
             onClickOutside,
+            ...attrs
         },
         ref,
     ) => {
@@ -207,6 +208,7 @@ export const ComboBox = forwardRef<HTMLDivElement, ComboBoxProps>(
                     minWidth={minWidth}
                     maxWidth={maxWidth}
                     offset={offset}
+                    {...attrs}
                 >
                     <div ref={popupContentRef} {...onESC}>
                         {renderItems ? renderItems(children as React.ReactNode) : (children as React.ReactNode)}
@@ -216,5 +218,3 @@ export const ComboBox = forwardRef<HTMLDivElement, ComboBoxProps>(
         );
     },
 );
-
-export default ComboBox;
diff --git a/src/components/Dot.tsx b/src/components/Dot.tsx
@@ -3,7 +3,7 @@ import { colorPrimary, danger9, gray5, warn0 } from '@taskany/colors';
 
 type ViewType = 'default' | 'primary' | 'warning' | 'danger';
 
-interface DotProps {
+interface DotProps extends React.HTMLAttributes<HTMLSpanElement> {
     size?: 's' | 'm';
     view?: ViewType;
 }
@@ -37,5 +37,3 @@ export const Dot = styled.span<DotProps>`
             `,
         }[size])}
 `;
-
-export default Dot;
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
@@ -8,9 +8,9 @@ import { useKeyPress } from '../hooks/useKeyPress';
 import { useKeyboard, KeyCode } from '../hooks/useKeyboard';
 
 import { Popup } from './Popup';
-import Input from './Input';
+import { Input } from './Input';
 import { CrossIcon } from './Icon/CrossIcon';
-import MenuItem from './MenuItem';
+import { MenuItem } from './MenuItem';
 
 interface DropdownTriggerProps {
     ref: React.RefObject<HTMLButtonElement>;
@@ -30,7 +30,7 @@ export interface DropdownItemProps {
     onClick: (value?: any) => void;
 }
 
-export interface DropdownProps {
+export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
     renderItem: (props: DropdownItemProps) => React.ReactNode;
     renderTrigger: (props: DropdownTriggerProps) => React.ReactNode;
     text?: string;
@@ -88,6 +88,7 @@ export const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
             placement = 'bottom-start',
             arrow = false,
             offset = [-4, 8],
+            ...attrs
         },
         ref,
     ) => {
@@ -195,6 +196,7 @@ export const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
                     minWidth={100}
                     maxWidth={250}
                     offset={offset}
+                    {...attrs}
                 >
                     <div {...onESC}>
                         {nullable(onSearchChange, () => (

diff --git a/src/components/Fieldset.tsx b/src/components/Fieldset.tsx
@@ -6,7 +6,7 @@ import { Text } from './Text';
 
 type FieldsetViewType = 'default' | 'warning' | 'danger';
 
-interface FieldsetProps {
+interface FieldsetProps extends React.HTMLAttributes<HTMLFieldSetElement> {
     title?: string;
     view?: FieldsetViewType;
     children: React.ReactNode;
@@ -30,9 +30,9 @@ const colorsMap: Record<FieldsetViewType, string> = {
     danger: danger0,
 };
 
-export const Fieldset: React.FC<FieldsetProps> = ({ view = 'default', title, children, className }) => {
+export const Fieldset: React.FC<FieldsetProps> = ({ view = 'default', title, children, ...props }) => {
     return (
-        <StyledFieldset className={className}>
+        <StyledFieldset {...props}>
             <StyledLegend as="legend" size="m" weight="bold" color={colorsMap[view]}>
                 {title}
             </StyledLegend>
@@ -41,5 +41,3 @@ export const Fieldset: React.FC<FieldsetProps> = ({ view = 'default', title, chi
         </StyledFieldset>
     );
 };
-
-export default Fieldset;
diff --git a/src/components/FiltersContainers.tsx b/src/components/FiltersContainers.tsx
@@ -2,8 +2,9 @@ import React from 'react';
 import styled from 'styled-components';
 import { gapM, gapS, gray5, gray6, gray9, radiusXl, textColor } from '@taskany/colors';
 
-import Text from './Text';
+import { Text } from './Text';
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const FiltersPanelContainer = styled(({ loading, ...props }) => <div {...props} />)<{ loading?: boolean }>`
     margin: ${gapM} 0;
     padding: ${gapS} 0;

diff --git a/src/components/FiltersCounter.tsx b/src/components/FiltersCounter.tsx
@@ -1,11 +1,16 @@
 import React, { FC } from 'react';
 import { textColor } from '@taskany/colors';
 
-import Badge from './Badge';
-import Text from './Text';
+import { Badge } from './Badge';
+import { Text } from './Text';
 
-export const FiltersCounter: FC<{ counter?: number; total: number }> = ({ counter, total }) => (
-    <Badge size="m">
+interface FiltersCounterProps extends React.HTMLAttributes<HTMLDivElement> {
+    counter?: number;
+    total: number;
+}
+
+export const FiltersCounter: FC<FiltersCounterProps> = ({ counter, total, ...attrs }) => (
+    <Badge size="m" {...attrs}>
         {counter === undefined || total === counter ? (
             total
         ) : (

diff --git a/src/components/FiltersDropdown.tsx b/src/components/FiltersDropdown.tsx
@@ -2,7 +2,7 @@
 import React, { useCallback, useMemo, useState, ReactNode } from 'react';
 
 import { Dropdown, DropdownItemProps, DropdownProps } from './Dropdown';
-import MenuItem from './MenuItem';
+import { MenuItem } from './MenuItem';
 import { FiltersMenuItem } from './FiltersContainers';
 
 export type FilterDropdownItem<T> = {

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { gray0 } from '@taskany/colors';
 
 import { SheepLogo } from './SheepLogo';
-import Text from './Text';
+import { Text } from './Text';
 
 const StyledFooter = styled.footer`
     display: grid;
@@ -19,19 +19,17 @@ const StyledFooterMenu = styled.div`
 export const FooterItem = styled(Text)`
     padding: 0px 10px;
 `;
-interface FooterProps {
-    className?: string;
+interface FooterProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
+    className?: string;
 }
 
-export const Footer: React.FC<FooterProps> = ({ className, children }) => {
+export const Footer: React.FC<FooterProps> = ({ className, children, ...attrs }) => {
     return (
-        <StyledFooter className={className}>
+        <StyledFooter className={className} {...attrs}>
             <Text color={gray0}>{`© ${new Date().getFullYear()} Taskany, Inc.`}</Text>
             <StyledFooterMenu>{children}</StyledFooterMenu>
             <SheepLogo />
         </StyledFooter>
     );
 };
-
-export default Footer;
diff --git a/src/components/Form.tsx b/src/components/Form.tsx
@@ -5,7 +5,7 @@ import { gray3 } from '@taskany/colors';
 import { KeyCode, KeyMod, useKeyboard } from '../hooks/useKeyboard';
 import { formContext } from '../context/form';
 
-interface FormProps {
+interface FormProps extends React.HTMLAttributes<HTMLFormElement> {
     children: React.ReactNode;
     disabled?: boolean;
     submitHotkey?: Array<number>;
@@ -19,7 +19,7 @@ const StyledForm = styled.form`
     background-color: ${gray3};
 `;
 
-export const Form: React.FC<FormProps> = ({ children, disabled, submitHotkey = submitKeys, onSubmit }) => {
+export const Form: React.FC<FormProps> = ({ children, disabled, submitHotkey = submitKeys, onSubmit, ...attrs }) => {
     const handleSubmit = (e?: React.SyntheticEvent) => {
         e?.preventDefault();
 
@@ -33,11 +33,9 @@ export const Form: React.FC<FormProps> = ({ children, disabled, submitHotkey = s
 
     return (
         <formContext.Provider value={{ disabled }}>
-            <StyledForm {...keyboard} onSubmit={handleSubmit}>
+            <StyledForm {...keyboard} onSubmit={handleSubmit} {...attrs}>
                 {children}
             </StyledForm>
         </formContext.Provider>
     );
 };
-
-export default Form;
diff --git a/src/components/FormAction.tsx b/src/components/FormAction.tsx
@@ -39,5 +39,3 @@ export const FormAction = styled.div<{ left?: boolean; right?: boolean; columns?
             }
         `}
 `;
-
-export default FormAction;
diff --git a/src/components/FormActions.tsx b/src/components/FormActions.tsx
@@ -42,5 +42,3 @@ export const FormActions = styled(({ flat, focused, ...props }: FormActionsProps
             border-bottom-right-radius: 0;
         `}
 `;
-
-export default FormActions;
diff --git a/src/components/FormCard.tsx b/src/components/FormCard.tsx
@@ -9,5 +9,3 @@ export const FormCard = styled.div`
     border: 1px solid ${gray4};
     border-radius: ${radiusM};
 `;
-
-export default FormCard;