clean up unnecessary id and data-attrs

MyArtverse-Project · Oct 23, 2023 · 09db949 · 09db949
1 parent 5a77bcd
commit 09db949
Show file tree

Hide file tree

Showing 41 changed files with 43 additions and 112 deletions.
diff --git a/apps/website/src/app/dashboard/layout.tsx b/apps/website/src/app/dashboard/layout.tsx
@@ -6,7 +6,6 @@ export default function DashboardLayout({
   return (
     <div className="flex">
       <nav
-        data-d-nav-drawer=""
         style={{ width: 250 }}
         className="sticky top-16 [align-self:flex-start] h-[calc(100dvh-4rem)] border-r border-r-separator"
       >

diff --git a/apps/website/src/app/profile/[profile]/(gallery)/gallery/page.tsx b/apps/website/src/app/profile/[profile]/(gallery)/gallery/page.tsx
@@ -15,7 +15,7 @@ export async function generateMetadata(
 export default function GalleryPage({ params }: SlugRouteProps) {
   return (
     <>
-      <div data-profile-contents="" className="py-4 max-w-screen-2xl">
+      <div className="py-4 max-w-screen-2xl">
         <div className="grid py-16 text-center border rounded-md place-items-center border-error w-full prose-p:mx-auto prose-p:leading-6 prose-p:mt-2">
           <div>
             <img src="/img/hero/ozzy-banner.png" alt="" className="w-4 h-4" />

diff --git a/apps/website/src/app/profile/[profile]/(overview)/page.tsx b/apps/website/src/app/profile/[profile]/(overview)/page.tsx
@@ -17,9 +17,9 @@ export async function generateMetadata(
 
 export default function Page() {
   return (
-    <div data-group-mode="visual" className="flex w-full gap-3">
-      <div id="l-seperator" className="flex-shrink-0 w-1/2"></div>
-      <div id="r-seperator" className="flex-shrink-0 w-1/2">
+    <div className="flex w-full gap-3">
+      <div className="flex-shrink-0 w-1/2"></div>
+      <div className="flex-shrink-0 w-1/2">
         <Group>
           <Group.Header>About Username</Group.Header>
           <Group.HeaderButtons>

diff --git a/apps/website/src/app/profile/[profile]/CharacterMasthead.tsx b/apps/website/src/app/profile/[profile]/CharacterMasthead.tsx
@@ -56,7 +56,7 @@ export default function CharacterMasthead({
   }, [setPeeking])
 
   return (
-    <div id="masthead-root" className="contents">
+    <div className="contents">
       <div ref={profileDetailsRef} className="px-12 mx-auto max-w-screen-2xl">
         <Button
           href={`/@${owner}`}
@@ -88,7 +88,7 @@ export default function CharacterMasthead({
             <div className="flex justify-between">
               <h2 className="text-3xl not-prose font-inter font-bold flex items-center gap-x-1.5">
                 <span>{name}</span>
-                <span id="badge-shelf" aria-hidden>
+                <span aria-hidden>
                   {/* <Badge
                     label="Visible to followers"
                     varient="default"
@@ -114,24 +114,17 @@ export default function CharacterMasthead({
             </div>
             {/* layer 2 - handles and followers */}
             <div className="flex gap-x-3.5">
-              <span id="user-handle" className="font-semibold text-700">
-                {species}
-              </span>
-
-              <span id="user-followers" className="text-700">
-                {pronouns}
-              </span>
+              <span className="font-semibold text-700">{species}</span>
+              <span className="text-700">{pronouns}</span>
             </div>
             {/* layer 3 - Fursona Info */}
             <div className="flex gap-x-2.5 pt-1.5">
-              <span id="user-followers" className="text-700">
-                Created by {creator}
-              </span>
+              <span className="text-700">Created by {creator}</span>
             </div>
             {/* layer 3 - Toyhouse/Notices */}
             <div className="flex gap-x-2.5 pt-1.5">
               {/* TODO: Temporary */}
-              {/* <span id="user-followers" className="text-700">
+              {/* <span className="text-700">
                 {toyhouseLink && (
                   <span className="flex flex-row items-center">
                     <InfoIcon size={16} className="mr-2" /> This character has

diff --git a/apps/website/src/app/profile/[profile]/ProfileMasthead.tsx b/apps/website/src/app/profile/[profile]/ProfileMasthead.tsx
@@ -74,10 +74,9 @@ export default function ProfileMasthead({
   }, [setPeeking])
 
   return (
-    <div id="masthead-root" className="contents">
+    <div className="contents">
       {/* Banner */}
       {/* <div
-          data-edit-banner-layout=""
           className="absolute inset-0 grid place-items-center z-[4]"
         >
           <span>Change banner</span>
@@ -116,7 +115,7 @@ export default function ProfileMasthead({
             <div className="flex justify-between">
               <h2 className="text-3xl not-prose font-inter font-bold flex items-center gap-x-1.5">
                 <span>Username</span>
-                <span id="badge-shelf" aria-hidden></span>
+                <span aria-hidden></span>
               </h2>
               <div className="flex items-start gap-x-2.5 relative z-2">
                 <Button
@@ -153,19 +152,13 @@ export default function ProfileMasthead({
             </div>
             {/* layer 2 - handles and followers */}
             <div className="flex gap-x-3.5">
-              <span id="user-handle" className="font-semibold text-700">
-                @{handle}
-              </span>
+              <span className="font-semibold text-700">@{handle}</span>
               <span className="inline-flex items-center font-semibold gap-x-1 bg-error px-1 text-xs rounded-md">
                 <AlertTriangleIcon size={17} />
                 <span>NSFW</span>
               </span>
-              <span id="user-followers" className="text-700">
-                69 followers
-              </span>
-              <span id="user-following" className="text-700">
-                21 following
-              </span>
+              <span className="text-700">69 followers</span>
+              <span className="text-700">21 following</span>
             </div>
             {/* layer 3 - socials */}
             <div className="flex gap-x-2.5 pt-1.5">

diff --git a/apps/website/src/components/layouts/global/Footer.tsx b/apps/website/src/components/layouts/global/Footer.tsx
@@ -98,10 +98,7 @@ export default function Footer() {
             ))}
           </div>
         </section>
-        <section
-          id="copyright"
-          className="p-4 text-center text-sm text-subtext prose-p:my-4"
-        >
+        <section className="p-4 text-center text-sm text-subtext prose-p:my-4">
           <p>
             {`MyFursona is an open source project licensed under Apache License 2.0.
              © 2022-${new Date().getFullYear()} Fusky Labs Software Ltd.`}

diff --git a/apps/website/src/components/layouts/global/NavbarProfilePeek.tsx b/apps/website/src/components/layouts/global/NavbarProfilePeek.tsx
@@ -34,7 +34,7 @@ export default function NavbarProfilePeek() {
   }
 
   return (
-    <div id="profile-peek" className="relative flex items-center">
+    <div className="relative flex items-center">
       <Link href="/" aria-label="Home" draggable={false}>
         <MyFursona logoOnly size={0.7} />
       </Link>
@@ -64,7 +64,6 @@ export default function NavbarProfilePeek() {
       </motion.div>
       {/* User avatar and handle */}
       <motion.div
-        id="handle-wrapper"
         variants={peekVariants}
         initial={"down"}
         animate={handlePeekRoutes && !isPeeking ? "visible" : "down"}

diff --git a/apps/website/src/components/ui/BuiImage.tsx b/apps/website/src/components/ui/BuiImage.tsx
@@ -55,7 +55,6 @@ export default function BuiImage({
 
   return (
     <div
-      id="img-shield"
       className="relative before:absolute before:inset-0 before:z-[2]"
       style={{
         aspectRatio,

diff --git a/apps/website/src/components/ui/BuiLink.tsx b/apps/website/src/components/ui/BuiLink.tsx
@@ -14,7 +14,6 @@ export default function BuiLink({
 
   return (
     <Link
-      id="biro-ui-link"
       className="underline text-blue-400 hover:text-blue-500 inline-flex items-center w-fit"
       href={href as unknown as UrlObject}
       target={hasHTTPInUrl ? "_blank" : undefined}

diff --git a/apps/website/src/components/ui/Buttons/Avatar.tsx b/apps/website/src/components/ui/Buttons/Avatar.tsx
@@ -13,7 +13,6 @@ export default function Avatar({
 }) {
   return (
     <div
-      id="avatar"
       aria-label={username}
       style={{ height: `${size}px`, width: `${size}px` }}
       className={className ?? "overflow-hidden rounded-full"}

diff --git a/apps/website/src/components/ui/Buttons/Button.tsx b/apps/website/src/components/ui/Buttons/Button.tsx
@@ -99,7 +99,6 @@ const Button = forwardRef(
     return (
       <DynamicElement
         ref={ref as React.LegacyRef<HTMLAnchorElement & HTMLButtonElement>}
-        data-button-variant-debug={className ? "custom" : variant ?? "primary"}
         // @ts-ignore
         href={href ?? undefined}
         type={!href ? type ?? "button" : undefined}

diff --git a/apps/website/src/components/ui/Cards/ColorPalette.tsx b/apps/website/src/components/ui/Cards/ColorPalette.tsx
@@ -10,11 +10,7 @@ export default function ColorPalette({
   height?: number | string
 }) {
   return (
-    <ul
-      data-color-palette=""
-      className="grid grid-flow-col"
-      style={{ width, height }}
-    >
+    <ul className="grid grid-flow-col" style={{ width, height }}>
       {palette.map(({ color, name }, index) => {
         return (
           <li

diff --git a/apps/website/src/components/ui/Cards/CommissionListing.tsx b/apps/website/src/components/ui/Cards/CommissionListing.tsx
@@ -14,10 +14,7 @@ export default function CommissionsListing({
   description: string
 }) {
   return (
-    <div
-      id="listing"
-      className="flex flex-col justify-start items-center w-fit my-4"
-    >
+    <div className="flex flex-col justify-start items-center w-fit my-4">
       <div className="relative w-[568px] h-[156px] rounded-md overflow-hidden">
         <div className="hover:scale:90">
           <BuiImage src={img} />

diff --git a/apps/website/src/components/ui/Carousel.tsx b/apps/website/src/components/ui/Carousel.tsx
@@ -14,7 +14,7 @@ export default function Carousel({
   seeAllLink?: string
 }) {
   return (
-    <Element id="carousel-root">
+    <Element>
       <div className="flex items-center justify-between gap-x-1 px-3.5 py-2">
         <div>{title}</div>
         <Button
@@ -27,7 +27,8 @@ export default function Carousel({
         </Button>
       </div>
       <Separator dir="horizontal" padding="0.25rem" />
-      <div id="carousel-contents">{children}</div>
+      {/* Carousel contents */}
+      <div>{children}</div>
     </Element>
   )
 }
diff --git a/apps/website/src/components/ui/Dashboard/Group.tsx b/apps/website/src/components/ui/Dashboard/Group.tsx
@@ -6,7 +6,7 @@ export default function Group({
   children?: React.ReactNode
 }) {
   return (
-    <div data-dashboard-group="">
+    <div>
       <h2 className="not-prose font-inter block">{title}</h2>
       <div>{children}</div>
     </div>

diff --git a/apps/website/src/components/ui/Dashboard/GroupNested.tsx b/apps/website/src/components/ui/Dashboard/GroupNested.tsx
@@ -6,7 +6,7 @@ export default function GroupNested({
   children?: React.ReactNode
 }) {
   return (
-    <div data-dashboard-nested-group="">
+    <div>
       <h3 className="not-prose block">{title}</h3>
       <div>{children}</div>
     </div>

diff --git a/apps/website/src/components/ui/Dashboard/Heading.tsx b/apps/website/src/components/ui/Dashboard/Heading.tsx
@@ -6,7 +6,7 @@ export default function Heading({
   buttons?: NonNullable<React.ReactElement>
 }) {
   return (
-    <div data-d-heading="" className="flex justify-between items-center">
+    <div className="flex justify-between items-center">
       <span>{title}</span>
       <div>{buttons}</div>
     </div>

diff --git a/apps/website/src/components/ui/Drop/DropZone.tsx b/apps/website/src/components/ui/Drop/DropZone.tsx
@@ -69,7 +69,6 @@ export default function DropZone() {
         >
           <input
             type="file"
-            id="fileInput"
             style={{ display: "none" }}
             onChange={handleFileInputChange}
           />
@@ -86,7 +85,6 @@ export default function DropZone() {
         >
           <input
             type="file"
-            id="fileInput"
             style={{ display: "none" }}
             onChange={handleFileInputChange}
           />

diff --git a/apps/website/src/components/ui/EmptySection/EmptySection.tsx b/apps/website/src/components/ui/EmptySection/EmptySection.tsx
@@ -8,10 +8,7 @@ export default function EmptySection({
   icon?: IconType
 }) {
   return (
-    <div
-      id="empty-section-root"
-      className="grid px-4 py-32 text-center border rounded-md place-items-center border-error prose-p:w-2/3 prose-p:mx-auto prose-p:leading-6 prose-p:mt-2"
-    >
+    <div className="grid px-4 py-32 text-center border rounded-md place-items-center border-error prose-p:w-2/3 prose-p:mx-auto prose-p:leading-6 prose-p:mt-2">
       <div className="p-4 rounded-lg bg-error-hl">
         <Icon size={48} strokeWidth={2} />
       </div>

diff --git a/apps/website/src/components/ui/Field.tsx b/apps/website/src/components/ui/Field.tsx
@@ -13,7 +13,6 @@ export default function Field({
 }) {
   return (
     <div
-      id="field"
       className={clsx(
         "inline-flex flex-col gap-y-1 px-2 py-1.5",
         !full ? "w-1/2" : "w-full"

diff --git a/apps/website/src/components/ui/Fieldset/Fieldset.tsx b/apps/website/src/components/ui/Fieldset/Fieldset.tsx
@@ -8,10 +8,7 @@ export default function Fieldset({
   description?: NonNullable<React.ReactElement> | string
 }) {
   return (
-    <section
-      id="biro-ui-fieldset"
-      className="p-6 rounded-lg border border-300 bg-200"
-    >
+    <section className="p-6 rounded-lg border border-300 bg-200">
       <div>
         {heading ? <h5 className="mb-4">{heading}</h5> : null}
         {description ? <span>{description}</span> : null}

diff --git a/apps/website/src/components/ui/Folders/FolderContents.tsx b/apps/website/src/components/ui/Folders/FolderContents.tsx
@@ -3,9 +3,5 @@ export default function FolderContents({
 }: {
   children: React.ReactNode
 }) {
-  return (
-    <div id="folder-contents" className="w-full">
-      {children}
-    </div>
-  )
+  return <div className="w-full">{children}</div>
 }
diff --git a/apps/website/src/components/ui/Folders/FolderItem.tsx b/apps/website/src/components/ui/Folders/FolderItem.tsx
@@ -81,11 +81,9 @@ export default function FolderItem({
 
   return (
     <div
-      id="folder-item"
       className={clsx(!nestedItem ? "w-full" : "w-full relative")}
       aria-expanded={!children ? undefined : isExpand}
       // Data attribute for debugging purposes in production
-      data-has-subitems={!children ? undefined : ""}
       {...attributes}
     >
       <Button

diff --git a/apps/website/src/components/ui/Folders/FolderView.tsx b/apps/website/src/components/ui/Folders/FolderView.tsx
@@ -9,9 +9,7 @@ export default function FolderView({
 }) {
   return (
     <FolderViewProvider>
-      <div id="folder-view-wrapper" className="flex gap-x-4">
-        {children}
-      </div>
+      <div className="flex gap-x-4">{children}</div>
     </FolderViewProvider>
   )
 }
diff --git a/apps/website/src/components/ui/Forms/FormWithProgress.tsx b/apps/website/src/components/ui/Forms/FormWithProgress.tsx
@@ -17,7 +17,7 @@ export default function FormWithProgress({
 
   const FormProgress = () => {
     return (
-      <div id="form-progress-wrapper">
+      <div>
         {progress.map(({ item, isComplete }, i) => (
           <div key={i} className="px-5 flex gap-x-4 items-center pt-3 pb-1.5">
             <div
@@ -45,10 +45,7 @@ export default function FormWithProgress({
   }
 
   return (
-    <div
-      data-biro-ui-form-progress=""
-      className="flex mx-auto max-w-screen-xl px-9 gap-x-4 mt-12"
-    >
+    <div className="flex mx-auto max-w-screen-xl px-9 gap-x-4 mt-12">
       <div className="w-1/4 flex-shrink-0">
         <aside className="sticky top-24 flex flex-col gap-y-5">
           <FormProgress />

diff --git a/apps/website/src/components/ui/Forms/InputField.tsx b/apps/website/src/components/ui/Forms/InputField.tsx
@@ -46,7 +46,8 @@ export default function InputField({
           spellCheck={false}
         />
       </label>
-      <div data-error-boundary=""></div>
+      {/* Error boundary */}
+      <div></div>
     </div>
   )
 }
diff --git a/apps/website/src/components/ui/GridResponsive.tsx b/apps/website/src/components/ui/GridResponsive.tsx
@@ -34,7 +34,6 @@ export default function GridResponsive({
 
   return (
     <div
-      id="grid-responsive-wrapper"
       style={{
         display: "grid",
         gridTemplateColumns: `repeat(${constraint}, minmax(${breakpoint}px, 1fr))`

diff --git a/apps/website/src/components/ui/Group/Comment.tsx b/apps/website/src/components/ui/Group/Comment.tsx
@@ -15,5 +15,5 @@ export default function Comment({
   editable?: boolean
   favCount?: number
 }) {
-  return <div id="comment">{children}</div>
+  return <div>{children}</div>
 }
diff --git a/apps/website/src/components/ui/Group/Group.tsx b/apps/website/src/components/ui/Group/Group.tsx
@@ -12,7 +12,6 @@ export default function GroupContents({
        * i.e. "l" for left and "r" for right, ff. by the index number
        */
       data-group-placement="l5"
-      id="group-wrapper"
       className="grid grid-cols-[minmax(0,1fr)_auto] grid-rows-[auto_1fr] gap-x-2.5 gap-y-3"
     >
       {children}

diff --git a/apps/website/src/components/ui/Group/GroupButtons.tsx b/apps/website/src/components/ui/Group/GroupButtons.tsx
@@ -3,9 +3,5 @@ export default function GroupButtons({
 }: {
   children: React.ReactNode
 }) {
-  return (
-    <div id="group-buttons-wrapper" className="flex items-center">
-      {children}
-    </div>
-  )
+  return <div className="flex items-center">{children}</div>
 }