Feat/add sortable name to file tree

components/auto-complete/auto-complete-dropdown.tsx

@@ -48,7 +48,8 @@ const AutoCompleteDropdown: React.FC<
       parent={ref}
       visible={visible}
       disableMatchWidth={disableMatchWidth}
-      getPopupContainer={getPopupContainer}>
+      getPopupContainer={getPopupContainer}
+    >
       <div className={classes} style={dropdownStyle} onClick={clickHandler}>
         {children}
         <style jsx>{`

components/auto-complete/auto-complete.tsx

@@ -221,7 +221,8 @@ const AutoCompleteComponent = React.forwardRef<
             disableMatchWidth={disableMatchWidth}
             className={dropdownClassName}
             dropdownStyle={dropdownStyle}
-            getPopupContainer={getPopupContainer}>
+            getPopupContainer={getPopupContainer}
+          >
             {autoCompleteItems}
           </AutoCompleteDropdown>
 

components/button-dropdown/button-dropdown-context.ts

@@ -15,9 +15,8 @@ const defaultContext = {
   loading: false,
 }
 
-export const ButtonDropdownContext = React.createContext<ButtonDropdownConfig>(
-  defaultContext,
-)
+export const ButtonDropdownContext =
+  React.createContext<ButtonDropdownConfig>(defaultContext)
 
 export const useButtonDropdown = (): ButtonDropdownConfig =>
   React.useContext<ButtonDropdownConfig>(ButtonDropdownContext)

components/button-dropdown/button-dropdown.tsx

@@ -91,7 +91,8 @@ const ButtonDropdownComponent: React.FC<React.PropsWithChildren<ButtonDropdownPr
         ref={ref}
         className={useClasses('btn-dropdown', className)}
         onClick={stopPropagation}
-        {...props}>
+        {...props}
+      >
         {mainItemChildren}
         <details open={visible}>
           <summary onClick={clickHandler}>
@@ -103,7 +104,8 @@ const ButtonDropdownComponent: React.FC<React.PropsWithChildren<ButtonDropdownPr
                     color: colors.color,
                     height: SCALES.height(2.5),
                     width: SCALES.height(2.5),
-                  }}>
+                  }}
+                >
                   {icon}
                 </span>
               ) : (

components/button-dropdown/icon.tsx

@@ -17,7 +17,8 @@ const ButtonDropdownIcon: React.FC<Props> = ({ color, height }) => {
       strokeLinecap="round"
       strokeLinejoin="round"
       fill="none"
-      shapeRendering="geometricPrecision">
+      shapeRendering="geometricPrecision"
+    >
       <path d="M6 9l6 6 6-6" />
 
       <style jsx>{`

components/button/button.tsx

@@ -139,7 +139,8 @@ const ButtonComponent = React.forwardRef<
         className={useClasses('btn', className)}
         disabled={disabled}
         onClick={clickHandler}
-        {...props}>
+        {...props}
+      >
         {loading && <ButtonLoading color={color} />}
         {childrenWithIcon}
         {dripShow && (

components/collapse/collapse-icon.tsx

@@ -14,7 +14,8 @@ const CollapseIcon: React.FC<Props> = ({ active }) => {
       strokeLinejoin="round"
       fill="none"
       shapeRendering="geometricPrecision"
-      style={{ color: 'currentColor' }}>
+      style={{ color: 'currentColor' }}
+    >
       <path d="M6 9l6 6 6-6" />
 
       <style jsx>{`

components/drawer/drawer-wrapper.tsx

@@ -65,7 +65,8 @@ const DrawerWrapper: React.FC<React.PropsWithChildren<DrawerWrapperProps>> = ({
         tabIndex={-1}
         onKeyDown={onKeyDown}
         ref={modalContent}
-        {...props}>
+        {...props}
+      >
         <div tabIndex={0} className="hide-tab start" aria-hidden="true" ref={tabStart} />
         {children}
         <div tabIndex={0} className="hide-tab end" aria-hidden="true" ref={tabEnd} />

components/drawer/drawer.tsx

@@ -76,7 +76,8 @@ const DrawerComponent: React.FC<React.PropsWithChildren<DrawerProps>> = ({
       onContentClick={onContentClick}
       visible={visible}
       width="100%"
-      {...bindings}>
+      {...bindings}
+    >
       <DrawerWrapper visible={visible} className={wrapClassName} {...props}>
         {children}
       </DrawerWrapper>

components/fieldset/fieldset-group.tsx

@@ -65,7 +65,8 @@ const FieldsetGroupComponent: React.FC<React.PropsWithChildren<FieldsetGroupProp
             <button
               onClick={() => clickHandle(item.value)}
               key={item.value}
-              className={selfVal === item.value ? 'active' : ''}>
+              className={selfVal === item.value ? 'active' : ''}
+            >
               {item.label}
             </button>
           ))}

components/grid/__tests__/index.test.tsx

@@ -35,12 +35,14 @@ describe('Grid', () => {
         alignItems="center"
         alignContent="center"
         direction="column"
-        wrap="wrap">
+        wrap="wrap"
+      >
         <Grid
           justify="center"
           alignItems="center"
           alignContent="center"
-          direction="column">
+          direction="column"
+        >
           test
         </Grid>
       </Grid.Container>,

components/input/input-icon-clear.tsx

@@ -27,7 +27,8 @@ const InputIconClear: React.FC<Props> = ({ onClick, disabled, visible }) => {
         strokeLinecap="round"
         strokeLinejoin="round"
         fill="none"
-        shapeRendering="geometricPrecision">
+        shapeRendering="geometricPrecision"
+      >
         <path d="M18 6L6 18" />
         <path d="M6 6l12 12" />
       </svg>

components/input/password-icon.tsx

@@ -14,7 +14,8 @@ const PasswordIcon: React.FC<Props> = ({ visible }) => {
       strokeLinejoin="round"
       fill="none"
       shapeRendering="geometricPrecision"
-      style={{ color: 'currentColor' }}>
+      style={{ color: 'currentColor' }}
+    >
       {!visible ? (
         <>
           <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />

components/link/icon.tsx

@@ -12,7 +12,8 @@ export const LinkIconComponent: React.FC<unknown> = () => {
       strokeLinejoin="round"
       fill="none"
       shapeRendering="geometricPrecision"
-      className="icon">
+      className="icon"
+    >
       <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" />
       <path d="M15 3h6v6" />
       <path d="M10 14L21 3" />

components/modal/modal-action.tsx

@@ -97,7 +97,8 @@ const ModalActionComponent = React.forwardRef<
         className={classes}
         onClick={clickHandler}
         disabled={disabled}
-        {...overrideProps}>
+        {...overrideProps}
+      >
         {children}
         {styles}
       </Button>

components/modal/modal-wrapper.tsx

@@ -60,7 +60,8 @@ const ModalWrapper: React.FC<React.PropsWithChildren<ModalWrapperProps>> = ({
         tabIndex={-1}
         onKeyDown={onKeyDown}
         ref={modalContent}
-        {...props}>
+        {...props}
+      >
         <div tabIndex={0} className="hide-tab" aria-hidden="true" ref={tabStart} />
         {children}
         <div tabIndex={0} className="hide-tab" aria-hidden="true" ref={tabEnd} />

components/modal/modal.tsx

@@ -98,7 +98,8 @@ const ModalComponent: React.FC<React.PropsWithChildren<ModalProps>> = ({
         positionClassName={positionClassName}
         backdropClassName={backdropClassName}
         layerClassName={layerClassName}
-        {...bindings}>
+        {...bindings}
+      >
         <ModalWrapper visible={visible} className={wrapClassName}>
           {withoutActionsChildren}
           {hasActions && <ModalActions>{ActionsChildren}</ModalActions>}

components/pagination/pagination-ellipsis.tsx

@@ -13,7 +13,8 @@ const PaginationEllipsis: React.FC<Props> = ({ isBefore, onClick }) => {
     <PaginationItem
       onClick={e => onClick && onClick(e)}
       onMouseEnter={() => setShowMore(true)}
-      onMouseLeave={() => setShowMore(false)}>
+      onMouseLeave={() => setShowMore(false)}
+    >
       {showMore ? (
         <svg
           className="more"
@@ -23,7 +24,8 @@ const PaginationEllipsis: React.FC<Props> = ({ isBefore, onClick }) => {
           strokeLinecap="round"
           strokeLinejoin="round"
           fill="none"
-          shapeRendering="geometricPrecision">
+          shapeRendering="geometricPrecision"
+        >
           <path d="M13 17l5-5-5-5" />
           <path d="M6 17l5-5-5-5" />
         </svg>
@@ -34,7 +36,8 @@ const PaginationEllipsis: React.FC<Props> = ({ isBefore, onClick }) => {
           strokeLinecap="round"
           strokeLinejoin="round"
           fill="none"
-          shapeRendering="geometricPrecision">
+          shapeRendering="geometricPrecision"
+        >
           <circle cx="12" cy="12" r="1" fill="currentColor" />
           <circle cx="19" cy="12" r="1" fill="currentColor" />
           <circle cx="5" cy="12" r="1" fill="currentColor" />

components/pagination/pagination-pages.tsx

@@ -30,7 +30,8 @@ const PaginationPages: React.FC<Props> = ({ limit, count, current, setPage }) =>
       <PaginationItem
         key={`pagination-item-${value}`}
         active={value === active}
-        onClick={() => setPage(value)}>
+        onClick={() => setPage(value)}
+      >
         {value}
       </PaginationItem>
     ),
@@ -47,7 +48,8 @@ const PaginationPages: React.FC<Props> = ({ limit, count, current, setPage }) =>
       <PaginationItem
         key={`pagination-middle-${index}`}
         active={index + 1 === middleNumber}
-        onClick={() => setPage(value)}>
+        onClick={() => setPage(value)}
+      >
         {value}
       </PaginationItem>
     )
@@ -66,7 +68,8 @@ const PaginationPages: React.FC<Props> = ({ limit, count, current, setPage }) =>
             <PaginationItem
               key={`pagination-item-${value}`}
               active={value === current}
-              onClick={() => setPage(value)}>
+              onClick={() => setPage(value)}
+            >
               {value}
             </PaginationItem>
           )

components/pagination/pagination-previous.tsx

@@ -13,7 +13,8 @@ const PaginationPrevious: React.FC<React.PropsWithChildren<PaginationPreviousPro
     <PaginationItem
       onClick={() => update && update('prev')}
       disabled={isFirst}
-      {...props}>
+      {...props}
+    >
       {children}
     </PaginationItem>
   )

components/popover/popover.tsx

@@ -88,7 +88,8 @@ const PopoverComponent: React.FC<React.PropsWithChildren<PopoverProps>> = ({
         portalClassName={classes}
         visible={visible}
         onVisibleChange={onPopoverVisibleChange}
-        {...props}>
+        {...props}
+      >
         {children}
         <style jsx>{`
           :global(.tooltip-content.popover > .inner) {

components/rating/rating-icon.tsx

@@ -11,7 +11,8 @@ const RatingIcon: React.FC<unknown> = () => {
       strokeLinecap="round"
       strokeLinejoin="round"
       fill="none"
-      shapeRendering="geometricPrecision">
+      shapeRendering="geometricPrecision"
+    >
       <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
     </svg>
   )

components/rating/rating.tsx

@@ -97,7 +97,8 @@ const RatingComponent: React.FC<RatingProps> = ({
           })}
           key={index}
           onMouseEnter={() => mouseEnterHandler(index + 1)}
-          onClick={() => clickHandler(index + 1)}>
+          onClick={() => clickHandler(index + 1)}
+        >
           {icon}
         </div>
       ))}

components/select/select-dropdown.tsx

@@ -50,7 +50,8 @@ const SelectDropdown = React.forwardRef<
         parent={ref}
         visible={visible}
         disableMatchWidth={disableMatchWidth}
-        getPopupContainer={getPopupContainer}>
+        getPopupContainer={getPopupContainer}
+      >
         <div ref={internalDropdownRef} className={classes} style={dropdownStyle}>
           {children}
           <style jsx>{`

components/select/select-icon-clear.tsx

@@ -22,7 +22,8 @@ const SelectIconClear: React.FC<Props> = ({ onClick }) => {
         strokeLinecap="round"
         strokeLinejoin="round"
         fill="none"
-        shapeRendering="geometricPrecision">
+        shapeRendering="geometricPrecision"
+      >
         <path d="M18 6L6 18" />
         <path d="M6 6l12 12" />
       </svg>

components/select/select-icon.tsx

@@ -8,7 +8,8 @@ const SelectIconComponent: React.FC<unknown> = () => {
       strokeLinecap="round"
       strokeLinejoin="round"
       fill="none"
-      shapeRendering="geometricPrecision">
+      shapeRendering="geometricPrecision"
+    >
       <path d="M6 9l6 6 6-6" />
       <style jsx>{`
         svg {

components/select/select.tsx

@@ -176,7 +176,8 @@ const SelectComponent = React.forwardRef<SelectRef, React.PropsWithChildren<Sele
         return (
           <SelectMultipleValue
             disabled={disabled}
-            onClear={clearable ? () => updateValue(child.props.value) : null}>
+            onClear={clearable ? () => updateValue(child.props.value) : null}
+          >
             {el}
           </SelectMultipleValue>
         )
@@ -203,7 +204,8 @@ const SelectComponent = React.forwardRef<SelectRef, React.PropsWithChildren<Sele
           ref={ref}
           onClick={clickHandler}
           onMouseDown={mouseDownHandler}
-          {...props}>
+          {...props}
+        >
           <SelectInput
             ref={inputRef}
             visible={visible}
@@ -225,7 +227,8 @@ const SelectComponent = React.forwardRef<SelectRef, React.PropsWithChildren<Sele
             className={dropdownClassName}
             dropdownStyle={dropdownStyle}
             disableMatchWidth={disableMatchWidth}
-            getPopupContainer={getPopupContainer}>
+            getPopupContainer={getPopupContainer}
+          >
             {children}
           </SelectDropdown>
           {!pure && (

components/shared/__tests__/dropdown.test.tsx

@@ -176,7 +176,8 @@ describe('Dropdown', () => {
             <Dropdown
               parent={ref}
               visible
-              getPopupContainer={() => customContainer.current}>
+              getPopupContainer={() => customContainer.current}
+            >
               <span>test-value</span>
             </Dropdown>
           </div>

components/shared/backdrop.tsx

@@ -58,12 +58,14 @@ const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>> = React.memo(
           className={useClasses('backdrop', backdropClassName)}
           onClick={clickHandler}
           onMouseUp={mouseUpHandler}
-          {...props}>
+          {...props}
+        >
           <div className={useClasses('layer', layerClassName)} />
           <div
             onClick={onContentClick}
             className={useClasses('position', positionClassName)}
-            onMouseDown={() => setIsContentMouseDown(true)}>
+            onMouseDown={() => setIsContentMouseDown(true)}
+          >
             {children}
           </div>
           <style jsx>{`

components/slider/slider.tsx

@@ -161,7 +161,8 @@ const SliderComponent: React.FC<React.PropsWithChildren<SliderProps>> = ({
       className={useClasses('slider', className)}
       onClick={clickHandler}
       ref={sliderRef}
-      {...props}>
+      {...props}
+    >
       <SliderDot disabled={disabled} ref={dotRef} isClick={isClick} left={currentRatio}>
         {hideValue || value}
       </SliderDot>

components/snippet/snippet-icon.tsx

@@ -10,7 +10,8 @@ const SnippetIconComponent: React.FC<unknown> = () => {
       strokeLinejoin="round"
       fill="none"
       shapeRendering="geometricPrecision"
-      style={{ color: 'currentcolor' }}>
+      style={{ color: 'currentcolor' }}
+    >
       <path d="M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z" />
       <style jsx>{`
         svg {