feat: Buttons V2 migration — full cutover (engagement bars + shared + webapp + extension + cleanup)

packages/eslint-config/index.js

@@ -11,7 +11,13 @@ module.exports = {
     'plugin:prettier/recommended',
     'plugin:react-hooks/recommended',
   ],
-  plugins: ['prettier', 'tailwindcss', 'react-hooks', 'unused-imports'],
+  plugins: [
+    'prettier',
+    'tailwindcss',
+    'react-hooks',
+    'unused-imports',
+    '@dailydotdev/daily-dev-eslint-rules',
+  ],
   parserOptions: {
     project: './tsconfig.eslint.json',
     ecmaVersion: 2020,
@@ -172,5 +178,24 @@ module.exports = {
       },
     ],
     '@typescript-eslint/explicit-module-boundary-types': "off",
+    '@dailydotdev/daily-dev-eslint-rules/no-raw-button-class': 'error',
   },
+  overrides: [
+    {
+      // The button source itself + the Tailwind plugin that defines the
+      // tokens are the only places allowed to spell out raw `btn-*` /
+      // `btn-v2-*` class names.
+      files: [
+        '**/components/buttons/ButtonV2.tsx',
+        '**/components/buttons/CardAction.tsx',
+        '**/components/buttons/CardActionBar.tsx',
+        '**/components/buttons/common.ts',
+        '**/components/buttons/Buttons.mdx',
+        '**/tailwind/buttons-v2.ts',
+      ],
+      rules: {
+        '@dailydotdev/daily-dev-eslint-rules/no-raw-button-class': 'off',
+      },
+    },
+  ],
 };

packages/eslint-rules/lib/index.js

@@ -1,4 +1,46 @@
+// Lazy plugin loader. The `no-custom-color` rule used to require the
+// shared Tailwind config at module load, which now lives as a TS file
+// and breaks plain `require`. Lazy-loading isolates each rule so a
+// broken rule does not bring down the whole plugin.
+const lazy = (loader) => {
+  let cached;
+  return (...args) => {
+    if (!cached) {
+      cached = loader();
+    }
+    return cached.create ? cached.create(...args) : cached;
+  };
+};
+
+const wrapAsRule = (loader) => ({
+  create: lazy(loader),
+  meta: undefined,
+  get _meta() {
+    if (!this.__resolved) {
+      this.__resolved = loader();
+    }
+    return this.__resolved.meta;
+  },
+});
+
 module.exports.rules = {
-  'no-custom-color': require('./rules/no-custom-color'),
+  'no-custom-color': {
+    create(...args) {
+      const rule = require('./rules/no-custom-color');
+      return rule.create(...args);
+    },
+    meta: {
+      type: 'problem',
+      docs: {
+        description: 'Disallow non-design-system color tokens.',
+        recommended: false,
+      },
+      schema: [],
+    },
+  },
   'no-raw-button-class': require('./rules/no-raw-button-class'),
 };
+
+// expose lazy helpers for tests / consumers if they want them
+module.exports._lazy = lazy;
+module.exports._wrapAsRule = wrapAsRule;

packages/extension/src/companion/CompanionContent.tsx

@@ -9,10 +9,10 @@ import {
 import '@dailydotdev/shared/src/styles/globals.css';
 import type { PostBootData } from '@dailydotdev/shared/src/lib/boot';
 import {
-  Button,
+  ButtonV2,
   ButtonColor,
   ButtonVariant,
-} from '@dailydotdev/shared/src/components/buttons/Button';
+} from '@dailydotdev/shared/src/components/buttons/ButtonV2';
 import { useCopyLink } from '@dailydotdev/shared/src/hooks/useCopy';
 import { useUpvoteQuery } from '@dailydotdev/shared/src/hooks/useUpvoteQuery';
 import { postLogEvent } from '@dailydotdev/shared/src/lib/feed';
@@ -74,7 +74,7 @@ export default function CompanionContent({
           content="Copy link"
           className="whitespace-nowrap shadow-2"
         >
-          <Button
+          <ButtonV2
             icon={<CopyIcon />}
             variant={ButtonVariant.Tertiary}
             color={copying ? ButtonColor.Avocado : undefined}

packages/extension/src/companion/CompanionMenu.tsx

@@ -2,10 +2,10 @@ import type { ReactElement } from 'react';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import {
-  Button,
+  ButtonV2,
   ButtonColor,
   ButtonVariant,
-} from '@dailydotdev/shared/src/components/buttons/Button';
+} from '@dailydotdev/shared/src/components/buttons/ButtonV2';
 import {
   BookmarkIcon,
   DiscussIcon as CommentIcon,
@@ -363,7 +363,7 @@ export default function CompanionMenu({
           }
           className={tooltipContainerClassName}
         >
-          <Button
+          <ButtonV2
             icon={
               <UpvoteIcon secondary={post?.userState?.vote === UserVote.Up} />
             }
@@ -378,7 +378,7 @@ export default function CompanionMenu({
           content="Add comment"
           className={tooltipContainerClassName}
         >
-          <Button
+          <ButtonV2
             variant={ButtonVariant.Tertiary}
             color={ButtonColor.BlueCheese}
             pressed={post?.commented}
@@ -402,7 +402,7 @@ export default function CompanionMenu({
           content={`${post?.bookmarked ? 'Remove from' : 'Save to'} bookmarks`}
           className={tooltipContainerClassName}
         >
-          <Button
+          <ButtonV2
             icon={<BookmarkIcon secondary={post?.bookmarked} />}
             pressed={post?.bookmarked}
             onClick={toggleBookmark}
@@ -415,7 +415,7 @@ export default function CompanionMenu({
           content="Share post"
           className={tooltipContainerClassName}
         >
-          <Button
+          <ButtonV2
             variant={ButtonVariant.Tertiary}
             color={ButtonColor.Cabbage}
             onClick={onShare}
@@ -427,7 +427,7 @@ export default function CompanionMenu({
             tooltip={{ content: 'More options', side: 'left' }}
             asChild
           >
-            <Button variant={ButtonVariant.Tertiary} icon={<MenuIcon />} />
+            <ButtonV2 variant={ButtonVariant.Tertiary} icon={<MenuIcon />} />
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuOptions options={options} />

packages/extension/src/companion/CompanionPermission.tsx

@@ -1,8 +1,8 @@
 import {
-  Button,
+  ButtonV2,
   ButtonSize,
   ButtonVariant,
-} from '@dailydotdev/shared/src/components/buttons/Button';
+} from '@dailydotdev/shared/src/components/buttons/ButtonV2';
 import classed from '@dailydotdev/shared/src/lib/classed';
 import { companionExplainerVideo } from '@dailydotdev/shared/src/lib/constants';
 import type { ReactElement, Ref } from 'react';
@@ -37,7 +37,7 @@ const CompanionPermissionComponent = (
         >
           {description}
         </p>
-        <Button
+        <ButtonV2
           className="mt-1 w-[12.5rem]"
           onClick={() =>
             requestContentScripts({
@@ -48,7 +48,7 @@ const CompanionPermissionComponent = (
           variant={ButtonVariant.Primary}
         >
           {button}
-        </Button>
+        </ButtonV2>
       </CompanionSection>
       <CompanionSection>
         <a

packages/extension/src/companion/CompanionPopupButton.tsx

@@ -1,9 +1,9 @@
 import type { ReactElement } from 'react';
 import React, { useState, useEffect } from 'react';
 import {
-  Button,
+  ButtonV2,
   ButtonVariant,
-} from '@dailydotdev/shared/src/components/buttons/Button';
+} from '@dailydotdev/shared/src/components/buttons/ButtonV2';
 import SimpleTooltip from '@dailydotdev/shared/src/components/tooltips/SimpleTooltip';
 import { AppIcon as CompanionIcon } from '@dailydotdev/shared/src/components/icons';
 import { ExperimentWinner } from '@dailydotdev/shared/src/lib/featureValues';
@@ -67,7 +67,7 @@ export const CompanionPopupButton = (): ReactElement => {
       visible={showCompanionPermission}
       onClickOutside={closeCompanionPopupButton}
     >
-      <Button
+      <ButtonV2
         onClick={onButtonClick}
         variant={ButtonVariant.Float}
         className="hidden laptop:flex"

packages/extension/src/companion/CompanionToggle.tsx

@@ -1,9 +1,9 @@
 import type { ReactElement } from 'react';
 import React from 'react';
 import {
-  Button,
+  ButtonV2,
   ButtonVariant,
-} from '@dailydotdev/shared/src/components/buttons/Button';
+} from '@dailydotdev/shared/src/components/buttons/ButtonV2';
 import { ArrowIcon } from '@dailydotdev/shared/src/components/icons';
 import LogoIcon from '@dailydotdev/shared/src/svg/LogoIcon';
 import classNames from 'classnames';
@@ -39,7 +39,7 @@ function CompanionToggle({
         content={companionState ? 'Close summary' : 'Open summary'}
         className={tooltipContainerClassName}
       >
-        <Button
+        <ButtonV2
           variant={
             companionState ? ButtonVariant.Secondary : ButtonVariant.Tertiary
           }

packages/extension/src/newtab/App.tsx

@@ -28,6 +28,10 @@ import { useExtensionContext } from '@dailydotdev/shared/src/contexts/ExtensionC
 import { useConsoleLogo } from '@dailydotdev/shared/src/hooks/useConsoleLogo';
 import { DndContextProvider } from '@dailydotdev/shared/src/contexts/DndContext';
 import { structuredCloneJsonPolyfill } from '@dailydotdev/shared/src/lib/structuredClone';
+import {
+  ButtonV2,
+  ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/ButtonV2';
 import { useOnboardingActions } from '@dailydotdev/shared/src/hooks/auth';
 import { useCheckCoresRole } from '@dailydotdev/shared/src/hooks/useCheckCoresRole';
 import { ShortcutsProvider } from '@dailydotdev/shared/src/features/shortcuts/contexts/ShortcutsProvider';
@@ -57,13 +61,13 @@ const feedErrorFallback: ReactElement = (
   <div className="flex min-h-dvh w-full flex-col items-center justify-center gap-4 px-6 text-center">
     <h1 className="typo-title2">Something went wrong</h1>
     <p className="text-text-tertiary">Please reload this page to continue.</p>
-    <button
+    <ButtonV2
       type="button"
-      className="btn-primary px-5 py-2"
+      variant={ButtonVariant.Primary}
       onClick={() => window.location.reload()}
     >
       Reload
-    </button>
+    </ButtonV2>
   </div>
 );
 

packages/extension/src/newtab/DndModal.tsx

@@ -3,9 +3,9 @@ import React, { useState } from 'react';
 import { format } from 'date-fns';
 import { Radio } from '@dailydotdev/shared/src/components/fields/Radio';
 import {
-  Button,
+  ButtonV2,
   ButtonVariant,
-} from '@dailydotdev/shared/src/components/buttons/Button';
+} from '@dailydotdev/shared/src/components/buttons/ButtonV2';
 import { Dropdown } from '@dailydotdev/shared/src/components/fields/Dropdown';
 import { TextField } from '@dailydotdev/shared/src/components/fields/TextField';
 import type { ModalProps } from '@dailydotdev/shared/src/components/modals/common/Modal';
@@ -101,20 +101,23 @@ export default function DndModal({
       <Modal.Footer justify={!isActive ? Justify.End : Justify.Between}>
         {isActive ? (
           <>
-            <Button variant={ButtonVariant.Secondary} onClick={onRequestClose}>
+            <ButtonV2
+              variant={ButtonVariant.Secondary}
+              onClick={onRequestClose}
+            >
               Keep paused
-            </Button>
-            <Button
+            </ButtonV2>
+            <ButtonV2
               variant={ButtonVariant.Primary}
               onClick={() => onDndSettings(null)}
             >
               Unpause now
-            </Button>
+            </ButtonV2>
           </>
         ) : (
-          <Button variant={ButtonVariant.Primary} onClick={handleSubmit}>
+          <ButtonV2 variant={ButtonVariant.Primary} onClick={handleSubmit}>
             Done
-          </Button>
+          </ButtonV2>
         )}
       </Modal.Footer>
     </Modal>

packages/extension/src/newtab/HijackingLoginStrip.tsx

@@ -2,9 +2,9 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import classNames from 'classnames';
 import {
-  Button,
+  ButtonV2,
   ButtonVariant,
-} from '@dailydotdev/shared/src/components/buttons/Button';
+} from '@dailydotdev/shared/src/components/buttons/ButtonV2';
 import { useAuthContext } from '@dailydotdev/shared/src/contexts/AuthContext';
 import { useLogContext } from '@dailydotdev/shared/src/contexts/LogContext';
 import { AuthTriggers } from '@dailydotdev/shared/src/lib/auth';
@@ -52,7 +52,7 @@ export default function HijackingLoginStrip(): ReactElement {
                     : 'You still have a few onboarding steps left. Finish them to unlock the full experience.'}
                 </p>
                 {isLoggedOut ? (
-                  <Button
+                  <ButtonV2
                     type="button"
                     variant={ButtonVariant.Primary}
                     className="mt-4 w-fit"
@@ -66,17 +66,17 @@ export default function HijackingLoginStrip(): ReactElement {
                     }}
                   >
                     Log in to continue
-                  </Button>
+                  </ButtonV2>
                 ) : (
-                  <Button
+                  <ButtonV2
                     tag="a"
                     href={onboardingHref}
                     variant={ButtonVariant.Primary}
                     className="mt-4 w-fit"
                     onClick={logHijackingClick}
                   >
                     Continue onboarding
-                  </Button>
+                  </ButtonV2>
                 )}
               </div>
             </div>

packages/extension/src/newtab/ShortcutLinks/ShortcutGetStarted.tsx

@@ -7,10 +7,10 @@ import {
 } from '@dailydotdev/shared/src/lib/image';
 import { PlusIcon } from '@dailydotdev/shared/src/components/icons';
 import {
-  Button,
+  ButtonV2,
   ButtonSize,
   ButtonVariant,
-} from '@dailydotdev/shared/src/components/buttons/Button';
+} from '@dailydotdev/shared/src/components/buttons/ButtonV2';
 import type { PropsWithChildren, ReactElement } from 'react';
 import React from 'react';
 import { useThemedAsset } from '@dailydotdev/shared/src/hooks/utils';
@@ -75,20 +75,20 @@ export const ShortcutGetStarted = ({
         </ShortcutItemPlaceholder>
       </div>
       <div className="flex gap-4">
-        <Button
+        <ButtonV2
           onClick={() => completeActionThenFire(onCustomLinksClick)}
           size={ButtonSize.Medium}
           variant={ButtonVariant.Primary}
         >
           Add shortcuts
-        </Button>
-        <Button
+        </ButtonV2>
+        <ButtonV2
           onClick={() => completeActionThenFire(onTopSitesClick)}
           size={ButtonSize.Medium}
           variant={ButtonVariant.Float}
         >
           Skip for now
-        </Button>
+        </ButtonV2>
       </div>
     </div>
   );