Add missing keys

Nuvotion-Visuals · May 23, 2024 · 9507396 · 9507396
1 parent d1eb748
commit 9507396
Show file tree

Hide file tree

Showing 20 changed files with 120 additions and 91 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.125",
+  "version": "1.0.126",
   "description": "Formation is a comprehensive component library powered by React, Styled Components, and CSS variables for creating apps and websites that demand responsive, unified cross-platform experiences.",
   "resolutions": {
     "string-width": "^4",

diff --git a/src/components/Checkboxes/Checkboxes.tsx b/src/components/Checkboxes/Checkboxes.tsx
@@ -1,9 +1,9 @@
-import { IconName, IconPrefix } from '@fortawesome/fontawesome-common-types'
-import React, { useState } from 'react'
+import React from 'react'
 import styled from 'styled-components'
 
-import { Icon, Box, LineBreak, Gap, Item, ItemProps } from '../../internal'
+import { Box, LineBreak, Item, ItemProps } from '../../internal'
 
+// @ts-ignore
 interface Props extends ItemProps {
   options: ItemProps[],
   value: string[],
@@ -48,19 +48,23 @@ export const Checkboxes = (props : Props) => {
   return <S.Checkboxes minimal={minimal || false}><Box wrap width='100%'>
     {
       (icon || label) &&
-      <Item
-        label={label} icon={icon} iconPrefix={iconPrefix}
-        {
-          ...props
-        }
-      />
+        // @ts-ignore
+        <Item
+          label={label} icon={icon} iconPrefix={iconPrefix}
+          {
+            ...props
+          }
+        />
     }
 
     { !minimal && <LineBreak light />}
 
     {
       options.map((option, index) => 
-      <S.OptionLabel htmlFor={option.name}>
+      <S.OptionLabel 
+        key={index}
+        htmlFor={option.name}
+      >
           <Item 
             {
               ...option

diff --git a/src/components/DateAndTimePicker/DateAndTimePicker.tsx b/src/components/DateAndTimePicker/DateAndTimePicker.tsx
@@ -97,8 +97,6 @@ export const DateAndTimePicker = ({
   }
 
   const setValue = (index: number, field: 'date' | 'startTime' | 'endTime', fieldValue: string) => {
-
-    console.log(value, 'value')
     onChange(
       value?.map((day, i) =>
         index === i

diff --git a/src/components/Fit/Fit.tsx b/src/components/Fit/Fit.tsx
@@ -39,7 +39,7 @@ export const Fit: React.FC<FitProps> = ({ children, disableRadius, gap }) => {
     <S.Fit disableRadius={disableRadius} gap={gapValue}>
       {
         React.Children.map(children, child => (
-          <>{child}</>
+          <>{ child }</>
         ))
       }
     </S.Fit>

diff --git a/src/components/LabelColorPicker/LabelColorPicker.tsx b/src/components/LabelColorPicker/LabelColorPicker.tsx
@@ -36,8 +36,9 @@ const Dropdown = ({
 
   return <S.DropdownDropdown ref={scrollContainerRef}>
     {
-      options.map(item => 
+      options.map((item, index) => 
         <LabelColorCircle
+          key={index}
           labelColor={item as any}
           ref={value === item ? scrollToRef : null}
           onClick={() => {

diff --git a/src/components/LabelManager/LabelManager.tsx b/src/components/LabelManager/LabelManager.tsx
@@ -75,7 +75,7 @@ export const LabelManager = ({ value, onChange }: Props) => {
     {
       value.map(({ name, description, labelColor }, index) =>
       <>
-        <Box p={.5}>
+        <Box p={.5} key={index}>
           <Gap autoWidth={true}>
           {
             editingIndex === index

diff --git a/src/components/ListEditor/ExpandableLists.tsx b/src/components/ListEditor/ExpandableLists.tsx
@@ -82,7 +82,11 @@ export const ExpandableLists = ({
           : <>
               {
                 value?.map((expandableList, index) => 
-                  <ExpandableList {...expandableList} onExpand={() => onExpand(index)}/>  
+                  <ExpandableList 
+                    key={index}
+                    {...expandableList} 
+                    onExpand={() => onExpand(index)}
+                  />  
                 )
               }
             </>

diff --git a/src/components/ListEditor/List.tsx b/src/components/ListEditor/List.tsx
@@ -54,12 +54,12 @@ export const List = React.memo(({
               placeholder={<Item primary={true} name={' '} labelColor='none' />}
             >
               {
-                value.map(props => <Item {...props} indent={indent}/>)
+                value.map((props, index) => <Item key={index} {...props} indent={indent}/>)
               }
             </Reorder>
           : <>
               {
-                value.map(props => <Item {...props} indent={indent} />)
+                value.map((props, index) => <Item key={index} {...props} indent={indent} />)
               }
             </>
       }

diff --git a/src/components/NavSpaces/Channels.tsx b/src/components/NavSpaces/Channels.tsx
@@ -29,9 +29,10 @@ export const Channels = ({ channels }: Props) => {
       }
 
       {
-        channels?.map(channel =>
+        channels?.map((channel, index) =>
           channel.name
             ? <Item
+                key={index}
                 icon={channel.icon}
                 iconPrefix={channel.iconPrefix}
                 href={channel.href}

diff --git a/src/components/Sliders/RC-Slider/Handles/index.tsx b/src/components/Sliders/RC-Slider/Handles/index.tsx
@@ -41,33 +41,35 @@ const Handles = React.forwardRef((props: HandlesProps, ref: React.Ref<HandlesRef
 
   return (
     <>
-      {values.map((value, index) => (
-        <Handle
-          ref={(node) => {
-            if (!node) {
-              delete handlesRef.current[index];
-            } else {
-              handlesRef.current[index] = node;
-            }
-          }}
-          dragging={draggingIndex === index}
-          prefixCls={prefixCls}
-          style={getIndex(style, index)}
-          key={index}
-          value={value}
-          valueIndex={index}
-          onStartMove={onStartMove}
-          onOffsetChange={onOffsetChange}
-          render={handleRender}
-          {...restProps}
-        />
-      ))}
+      {
+        values.map((value, index) => (
+          <Handle
+            ref={(node) => {
+              if (!node) {
+                delete handlesRef.current[index];
+              } else {
+                handlesRef.current[index] = node;
+              }
+            }}
+            dragging={draggingIndex === index}
+            prefixCls={prefixCls}
+            style={getIndex(style, index)}
+            key={index}
+            value={value}
+            valueIndex={index}
+            onStartMove={onStartMove}
+            onOffsetChange={onOffsetChange}
+            render={handleRender}
+            {...restProps}
+          />
+        ))
+      }
     </>
-  );
-});
+  )
+})
 
 if (process.env.NODE_ENV !== 'production') {
-  Handles.displayName = 'Handles';
+  Handles.displayName = 'Handles'
 }
 
-export default Handles;
+export default Handles
diff --git a/src/components/Sliders/RC-Slider/Marks/index.tsx b/src/components/Sliders/RC-Slider/Marks/index.tsx
@@ -29,18 +29,20 @@ export default function Marks(props: MarksProps) {
 
   return (
     <div className={markPrefixCls}>
-  {/* @ts-ignore */}
-      {marks.map(({ value, style, label }) => (
-        <Mark
-          key={value}
-          prefixCls={markPrefixCls}
-          style={style}
-          value={value}
-          onClick={onClick}
-        >
-          {label}
-        </Mark>
-      ))}
+      {
+        // @ts-ignore
+        marks.map(({ value, style, label }) => (
+          <Mark
+            key={value}
+            prefixCls={markPrefixCls}
+            style={style}
+            value={value}
+            onClick={onClick}
+          >
+            {label}
+          </Mark>
+        ))
+      }
     </div>
   );
 }
diff --git a/src/components/Sliders/RC-Slider/Steps/index.tsx b/src/components/Sliders/RC-Slider/Steps/index.tsx
@@ -37,15 +37,17 @@ export default function Steps(props: StepsProps) {
 
   return (
     <div className={`${prefixCls}-step`}>
-      {stepDots.map((dotValue) => (
-        <Dot
-          prefixCls={prefixCls}
-          key={dotValue}
-          value={dotValue}
-          style={style}
-          activeStyle={activeStyle}
-        />
-      ))}
+      {
+        stepDots.map((dotValue, index) => (
+          <Dot
+            prefixCls={prefixCls}
+            key={dotValue}
+            value={dotValue}
+            style={style}
+            activeStyle={activeStyle}
+          />
+        ))
+      }
     </div>
   );
 }
diff --git a/src/components/Steps/Steps.tsx b/src/components/Steps/Steps.tsx
@@ -14,8 +14,11 @@ export const Steps = React.memo(({
   return (
     <S.Steps>
       {
-        new Array(numberOfSteps).fill(0).map((step, stepIndex) =>
-          <S.Step active={stepIndex <= activeStepIndex} />
+        new Array(numberOfSteps).fill(0).map((_, stepIndex) =>
+          <S.Step 
+            key={stepIndex}
+            active={stepIndex <= activeStepIndex} 
+          />
         )
       }
     </S.Steps>

diff --git a/src/components/Tags/Tags.tsx b/src/components/Tags/Tags.tsx
@@ -97,9 +97,8 @@ export const Tags = ({
       <S.Tags ref={ref} onScroll={onScroll} noPadding={noPadding}>
         {
           allTags.map((tag, index) => 
-
             tag.name !== undefined  
-                ?<S.ButtonContainer key={`tag${index}`}>
+              ? <S.ButtonContainer key={`tag${index}`}>
                   <Button 
                     text={tag.name}
                     primary={activeTags.includes(tag.name)}
@@ -108,9 +107,9 @@ export const Tags = ({
                     labelColor={tag.labelColor}
                     compact
                   />
-              </S.ButtonContainer>
-              :<></>)
-
+                </S.ButtonContainer>
+              : <></>
+          )
         }
         <S.Padding_R />
       </S.Tags>

diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
@@ -277,9 +277,8 @@ export const TextInput = React.memo(({
           && <Box mr={-.5}>
                 <S.Divider />
                 {
-                  buttons.map(buttonProps => <Button {...buttonProps}/>)
+                  buttons.map((buttonProps, index) => <Button key={index} {...buttonProps}/>)
                 }
-
               </Box>
       }
 

diff --git a/src/components/Tile/Tile.tsx b/src/components/Tile/Tile.tsx
@@ -74,8 +74,8 @@ export const Tile = ({
         footers &&
           <S.Footers>
             {
-              footers.map(footer =>
-                <S.FooterWrapper>
+              footers.map((footer, index) =>
+                <S.FooterWrapper key={index}>
                   <Item { ...footer } />
                 </S.FooterWrapper>
               )

diff --git a/src/components/TileGridPlaceholder/TileGridPlaceholder.tsx b/src/components/TileGridPlaceholder/TileGridPlaceholder.tsx
@@ -54,7 +54,10 @@ export const TileGridPlaceholder = React.memo(({
         <Grid maxWidth={maxWidth} gap={.125}>
           {
             Array(tiles).fill(0).map((_, index) =>
-              <S.TilePlaceholder disableRounded={disableRounded}>
+              <S.TilePlaceholder 
+                disableRounded={disableRounded}
+                key={index}
+              >
                 <AspectRatio ratio={4/3}>
                 </AspectRatio>
               </S.TilePlaceholder>

diff --git a/src/components/TimePicker/TimePicker.tsx b/src/components/TimePicker/TimePicker.tsx
@@ -123,7 +123,6 @@ const Times = ({
         '11:00 PM',
         '11:30 PM',
       ].map((item, index) =>
-
         <S.Item 
           key={index}
           onClick={() => {

diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx
@@ -159,8 +159,13 @@ export const Clip = ({
         }}
       >
         {
-          clipData.previews.map(preview =>
-            <img src={preview} style={{height: '100%'}} draggable="false" />
+          clipData.previews.map((preview, index) =>
+            <img 
+              src={preview} 
+              style={{height: '100%'}} 
+              draggable="false" 
+              key={index}
+            />
           )
         }
       </Tk.DragHandleInner>
@@ -250,8 +255,9 @@ export const Track = ({
   return (
     <L.Track>
       {
-        clipData.map(clip =>
+        clipData.map((clip, index) =>
           <Clip 
+            key={index}
             width={((clip.out - clip.in) / totalDuration) * 100} 
             offset={(clip.offset / totalDuration) * 100}
             clipData={clip} 
@@ -1040,8 +1046,11 @@ export const Timeline = ({ }: TimelineProps) => {
                 mediaMode === 'grid'
                   ?  <Grid maxWidth={mediaMode === 'grid' ? mediaZoom : 100} gap={.25}>
                       {
-                        clipData.filter(clip => clip.name.toLowerCase().includes(mediaSearch)).map(clip =>
-                          <DragOrigin data={{origin: 'media', clip}}>
+                        clipData.filter(clip => clip.name.toLowerCase().includes(mediaSearch)).map((clip, index) =>
+                          <DragOrigin 
+                            key={index}
+                            data={{origin: 'media', clip}}
+                          >
                             <VideoPreview
                               text={`${clip.name.slice(0, 10)}...`}
                               imageUrl={clip.previews[0]}
@@ -1055,8 +1064,11 @@ export const Timeline = ({ }: TimelineProps) => {
                     </Grid>
                   : <Gap>
                    {
-                      clipData.filter(clip => clip.name.toLowerCase().includes(mediaSearch)).map(clip =>
-                        <DragOrigin data={{origin: 'media', clip}}>
+                      clipData.filter(clip => clip.name.toLowerCase().includes(mediaSearch)).map((clip, index) =>
+                        <DragOrigin 
+                          key={index}
+                          data={{origin: 'media', clip}}
+                        >
                           <Item
                             text={clip.name}
                             subtitle={`${clip.type} - ${clip.dimensions.width}x${clip.dimensions.height}`}