feat: add key to components

Author: louistiti

src/components/button/button.tsx

@@ -1,5 +1,6 @@
 import classNames from 'clsx'
 
+import { generateKeyId } from '../../lib/utils'
 import { Flexbox, Icon, Loader } from '../..'
 
 import './button.sass'
@@ -52,6 +53,7 @@ export function Button({
 
   return (
     <button
+      key={`aurora-button_${generateKeyId()}`}
       type={type}
       name={name}
       value={value}

src/components/card/card.tsx

@@ -1,5 +1,7 @@
 import classNames from 'clsx'
 
+import { generateKeyId } from '../../lib/utils'
+
 import './card.sass'
 
 export interface CardProps {
@@ -12,6 +14,7 @@ export interface CardProps {
 export function Card({ children, fullWidth }: CardProps) {
   return (
     <div
+      key={`aurora-card_${generateKeyId()}`}
       className={classNames('aurora-card', {
         'aurora-card--full-width': fullWidth
       })}

src/components/checkbox/checkbox.tsx

@@ -8,6 +8,7 @@ import {
 } from '@ark-ui/react'
 
 import { Icon } from '../icon'
+import { generateKeyId } from '../../lib/utils'
 
 import './checkbox.sass'
 
@@ -40,6 +41,7 @@ export function Checkbox({
 
   return (
     <ArkCheckbox
+      key={`aurora-checkbox_${generateKeyId()}`}
       className="aurora-checkbox"
       name={name}
       value={value}

src/components/circular-progress/circular-progress.tsx

@@ -1,5 +1,7 @@
 import classNames from 'clsx'
 
+import { generateKeyId } from '../../lib/utils'
+
 import './circular-progress.sass'
 
 export interface CircularProgressProps {
@@ -19,6 +21,7 @@ export function CircularProgress({
 
   return (
     <div
+      key={`aurora-circular-progress_${generateKeyId()}`}
       className={classNames('aurora-circular-progress', {
         [`aurora-circular-progress--${size}`]: size
       })}

src/components/flexbox/flexbox.tsx

@@ -1,6 +1,7 @@
 import classNames from 'clsx'
 
 import { type Size } from '../../lib/types'
+import { generateKeyId } from '../../lib/utils'
 
 import './flexbox.sass'
 
@@ -44,6 +45,7 @@ export function Flexbox({
 }: FlexboxProps) {
   return (
     <div
+      key={`aurora-flexbox_${generateKeyId()}`}
       className={classNames('aurora-flexbox', {
         'aurora-flexbox--full-width': fullWidth,
         'aurora-flexbox--padding': padding,

src/components/form/form.tsx

@@ -1,3 +1,5 @@
+import { generateKeyId } from '../../lib/utils'
+
 import './form.sass'
 
 export interface FormProps {
@@ -37,7 +39,12 @@ export function Form({ children, onSubmit }: FormProps) {
   }
 
   return (
-    <form autoComplete="off" className="aurora-form" onSubmit={handleSubmit}>
+    <form
+      autoComplete="off"
+      className="aurora-form"
+      onSubmit={handleSubmit}
+      key={`aurora-form_${generateKeyId()}`}
+    >
       {children}
     </form>
   )

src/components/icon-button/icon-button.tsx

@@ -3,6 +3,7 @@ import classNames from 'clsx'
 
 import { Icon, Loader } from '../..'
 import { type IconProps } from '../icon'
+import { generateKeyId } from '../../lib/utils'
 
 import './icon-button.sass'
 
@@ -55,6 +56,7 @@ export function IconButton({
 
   return (
     <button
+      key={`aurora-icon-button_${generateKeyId()}`}
       type={type}
       name={name}
       value={value}

src/components/icon/icon.tsx

@@ -1,6 +1,7 @@
 import classNames from 'clsx'
 
 import type { Color, Size, IconType } from '../../lib/types'
+import { generateKeyId } from '../../lib/utils'
 
 import './icon.sass'
 
@@ -47,6 +48,7 @@ export function Icon({
 
   return (
     <span
+      key={`aurora-icon_${generateKeyId()}`}
       className={classNames('aurora-icon', {
         [`aurora-icon--${size}`]: size,
         [`aurora-icon--${bgShape}`]: bgShape,

src/components/image/image.tsx

@@ -1,5 +1,7 @@
 import classNames from 'clsx'
 
+import { generateKeyId } from '../../lib/utils'
+
 import './image.sass'
 
 export interface ImageProps {
@@ -31,6 +33,7 @@ export function Image({
 }: ImageProps) {
   return (
     <div
+      key={`aurora-image_${generateKeyId()}`}
       className={classNames('aurora-image', {
         [`aurora-image--${shape}`]: shape,
         [`aurora-image--${borderColor}-border`]: borderColor,

src/components/input/input.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import classNames from 'clsx'
 
 import { Text, Icon } from '../..'
+import { generateKeyId } from '../../lib/utils'
 
 import './input.sass'
 
@@ -68,7 +69,10 @@ export function Input({
   }
 
   return (
-    <div className="aurora-input-container">
+    <div
+      className="aurora-input-container"
+      key={`aurora-input_${generateKeyId()}`}
+    >
       {multiline ? (
         <textarea
           name={name}

src/components/link/link.tsx

@@ -2,6 +2,7 @@ import classNames from 'clsx'
 
 import { Text } from '../..'
 import { type Size } from '../../lib/types'
+import { generateKeyId } from '../../lib/utils'
 
 import './link.sass'
 
@@ -15,7 +16,12 @@ export interface LinkProps {
 
 export function Link({ href, children, fontSize }: LinkProps) {
   return (
-    <a className={classNames('aurora-link')} href={href} target="_blank">
+    <a
+      className={classNames('aurora-link')}
+      href={href}
+      target="_blank"
+      key={`aurora-link_${generateKeyId()}`}
+    >
       <Text fontSize={fontSize}>{children}</Text>
     </a>
   )

src/components/lists/list-header/list-header.tsx

@@ -1,6 +1,7 @@
 import classNames from 'clsx'
 
 import { Text } from '../../..'
+import { generateKeyId } from '../../../lib/utils'
 
 export interface ListHeaderProps {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -12,6 +13,7 @@ export interface ListHeaderProps {
 export function ListHeader({ children, align }: ListHeaderProps) {
   return (
     <div
+      key={`aurora-list-header_${generateKeyId()}`}
       className={classNames('aurora-list-header', {
         [`aurora-list-header--${align}`]: align
       })}

src/components/lists/list-item/list-item.tsx

@@ -1,5 +1,6 @@
 import classNames from 'clsx'
 
+import { generateKeyId } from '../../../lib/utils'
 import { Icon } from '../../..'
 
 interface ListItemOnClickData {
@@ -32,6 +33,7 @@ export function ListItem({
 
   return (
     <li
+      key={`aurora-list-item_${generateKeyId()}`}
       data-aurora-name={name}
       value={value}
       className={classNames('aurora-list-item', {

src/components/lists/list/list.tsx

@@ -1,3 +1,5 @@
+import { generateKeyId } from '../../../lib/utils'
+
 import './list.sass'
 
 export interface ListProps {
@@ -7,5 +9,9 @@ export interface ListProps {
 }
 
 export function List({ children }: ListProps) {
-  return <ul className="aurora-list">{children}</ul>
+  return (
+    <ul className="aurora-list" key={`aurora-list_${generateKeyId()}`}>
+      {children}
+    </ul>
+  )
 }

src/components/loader/loader.tsx

@@ -1,3 +1,5 @@
+import { generateKeyId } from '../../lib/utils'
+
 import './loader.sass'
 
 // interface Props {
@@ -8,7 +10,10 @@ export interface LoaderProps {}
 
 export function Loader() {
   return (
-    <span className="aurora-loader" />
+    <span
+      className="aurora-loader"
+      key={`aurora-loader_${generateKeyId()}`}
+    />
     /*<span
       className={classNames('aurora-loader', {
         [`aurora-loader--${size}`]: size

src/components/progress/progress.tsx

@@ -1,5 +1,7 @@
 import classNames from 'clsx'
 
+import { generateKeyId } from '../../lib/utils'
+
 import './progress.sass'
 
 export interface ProgressProps {
@@ -15,6 +17,7 @@ export function Progress({
 }: ProgressProps) {
   return (
     <div
+      key={`aurora-progress_${generateKeyId()}`}
       className={classNames('aurora-progress', {
         [`aurora-progress--${orientation}`]: orientation,
         [`aurora-progress--${size}`]: size

src/components/radios/radio-group/radio-group.tsx

@@ -3,6 +3,8 @@ import {
   type RadioGroupProps as ArkRadioGroupProps
 } from '@ark-ui/react'
 
+import { generateKeyId } from '../../../lib/utils'
+
 import './radio-group.sass'
 
 interface RadioGroupOnChangeData {
@@ -29,6 +31,7 @@ export function RadioGroup({
 }: RadioGroupProps) {
   return (
     <ArkRadioGroup
+      key={`aurora-radio-group_${generateKeyId()}`}
       className="aurora-radio-group"
       name={name}
       defaultValue={defaultValue}

src/components/radios/radio/radio.tsx

@@ -6,13 +6,20 @@ import {
   type RadioProps as ArkRadioProps
 } from '@ark-ui/react'
 
+import { generateKeyId } from '../../../lib/utils'
+
 export interface RadioProps extends Pick<ArkRadioProps, 'value' | 'disabled'> {
   label: string
 }
 
 export function Radio({ label, value, disabled }: RadioProps) {
   return (
-    <ArkRadio className="aurora-radio" value={value} disabled={disabled}>
+    <ArkRadio
+      key={`aurora-radio_${generateKeyId()}`}
+      className="aurora-radio"
+      value={value}
+      disabled={disabled}
+    >
       <RadioInput />
       <RadioControl className="aurora-radio-control" />
       <RadioLabel className="aurora-radio-label">{label}</RadioLabel>

src/components/range-slider/range-slider.tsx

@@ -9,6 +9,8 @@ import {
   type SliderProps as ArkSliderProps
 } from '@ark-ui/react'
 
+import { generateKeyId } from '../../lib/utils'
+
 import './range-slider.sass'
 
 interface RangeSliderOnChangeData {
@@ -54,6 +56,7 @@ export function RangeSlider({
 
   return (
     <div
+      key={`aurora-range-slider_${generateKeyId()}`}
       className="aurora-range-slider-container"
       style={{
         width,

src/components/scroll-container/scroll-container.tsx

@@ -1,5 +1,7 @@
 import classNames from 'clsx'
 
+import { generateKeyId } from '../../lib/utils'
+
 import './scroll-container.sass'
 
 export interface ScrollContainerProps {
@@ -18,6 +20,7 @@ export function ScrollContainer({
 }: ScrollContainerProps) {
   return (
     <div
+      key={`aurora-scroll-container_${generateKeyId()}`}
       className={classNames(
         'aurora-scroll-container',
         `aurora-scroll-container--${orientation}`

src/components/selects/select-option/select-option.tsx

@@ -3,6 +3,8 @@ import {
   type SelectOptionProps as ArkSelectOptionProps
 } from '@ark-ui/react'
 
+import { generateKeyId } from '../../../lib/utils'
+
 export interface SelectOptionProps
   extends Pick<ArkSelectOptionProps, 'label' | 'value'> {
   disabled?: boolean
@@ -17,6 +19,7 @@ export function SelectOption({
 }: SelectOptionProps) {
   return (
     <ArkSelectOption
+      key={`aurora-select-option_${generateKeyId()}`}
       className="aurora-select-option"
       label={label}
       value={value}

src/components/selects/select/select.tsx

@@ -9,6 +9,7 @@ import {
 import classNames from 'clsx'
 
 import { Flexbox, Icon } from '../../..'
+import { generateKeyId } from '../../../lib/utils'
 
 import './select.sass'
 
@@ -42,6 +43,7 @@ export function Select({
 }: SelectProps) {
   return (
     <ArkSelect
+      key={`aurora-select_${generateKeyId()}`}
       closeOnSelect
       selectedOption={selectedOption}
       defaultValue={defaultValue}

src/components/status/status.tsx

@@ -2,6 +2,7 @@ import classNames from 'clsx'
 
 import type { IconType } from '../../lib/types'
 import { Icon, Flexbox } from '../..'
+import { generateKeyId } from '../../lib/utils'
 
 import './status.sass'
 
@@ -21,6 +22,7 @@ export function Status({
 }: StatusProps) {
   return (
     <div
+      key={`aurora-status_${generateKeyId()}`}
       className={classNames('aurora-status', {
         [`aurora-status--${color}`]: color
       })}