Merge pull request #55 from kfirfitousi/update-deps

Update dependencies
kfirfitousi · Apr 23, 2023 · 4557140 · 4557140 · vercel · Apr 23, 2023
2 parents 30eb4ae + 6731137
commit 4557140
Show file tree

Hide file tree

Showing 12 changed files with 2,505 additions and 3,208 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,6 +1,6 @@
 import '@/styles/globals.css';
 import 'react-tooltip/dist/react-tooltip.css';
-import { Red_Hat_Display } from '@next/font/google';
+import { Red_Hat_Display } from 'next/font/google';
 import type { Decorator, Parameters } from '@storybook/react';
 import type { GlobalTypes } from '@storybook/types';
 

diff --git a/app/og/route.tsx b/app/og/route.tsx
@@ -1,13 +1,10 @@
-import { type PageConfig } from 'next';
 import { NextRequest } from 'next/server';
 import { ImageResponse } from '@vercel/og';
 import colors from 'tailwindcss/colors';
 
 import { blogConfig } from '@/config';
 
-export const config: PageConfig = {
-  runtime: 'edge',
-};
+export const runtime = 'edge';
 
 const fontRegular = fetch(
   new URL('../../public/assets/RedHatDisplay-Regular.ttf', import.meta.url),

diff --git a/components/callout.tsx b/components/callout.tsx
@@ -39,7 +39,7 @@ export const Callout = ({ type, children }: CalloutProps) => {
     >
       <div
         className={cn(
-          'absolute left-3 -top-3 h-6 w-fit rounded-md p-2',
+          'absolute -top-3 left-3 h-6 w-fit rounded-md p-2',
           'flex flex-row items-center justify-center space-x-1',
           type === 'update' &&
             'bg-slate-600 text-slate-300 dark:bg-slate-300 dark:text-slate-600',

diff --git a/components/code-block.tsx b/components/code-block.tsx
@@ -30,7 +30,7 @@ export function CodeBlock({ children }: CodeBlockProps) {
     >
       {showCopy && (
         <button
-          className="absolute top-2 right-2 flex h-7 w-7 items-center justify-center rounded bg-white dark:bg-slate-800"
+          className="absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded bg-white dark:bg-slate-800"
           onClick={copy}
           disabled={isCopied}
         >

diff --git a/components/footer.tsx b/components/footer.tsx
@@ -25,12 +25,11 @@ export function Footer() {
             rel="noopener noreferrer"
           >
             <Github
-              id="github"
               className="icon-base"
               data-tooltip-content="My GitHub profile"
+              data-tooltip-id="footer-tooltip"
               aria-label="My GitHub profile"
             />
-            <Tooltip anchorId="github" />
           </a>
         )}
         {footerLinks?.twitter && (
@@ -40,12 +39,11 @@ export function Footer() {
             rel="noopener noreferrer"
           >
             <Twitter
-              id="twitter"
               className="icon-base"
               data-tooltip-content="My Twitter profile"
+              data-tooltip-id="footer-tooltip"
               aria-label="My Twitter profile"
             />
-            <Tooltip anchorId="twitter" />
           </a>
         )}
         {footerLinks?.linkedin && (
@@ -55,23 +53,21 @@ export function Footer() {
             rel="noopener noreferrer"
           >
             <Linkedin
-              id="linkedin"
               className="icon-base"
               data-tooltip-content="My LinkedIn profile"
+              data-tooltip-id="footer-tooltip"
               aria-label="My LinkedIn profile"
             />
-            <Tooltip anchorId="linkedin" />
           </a>
         )}
         {footerLinks?.email && (
           <a href={`mailto:${footerLinks.email}`}>
             <AtSign
-              id="email"
               className="icon-base"
               data-tooltip-content="My Email"
+              data-tooltip-id="footer-tooltip"
               aria-label="My Email"
             />
-            <Tooltip anchorId="email" />
           </a>
         )}
         {footerLinks?.storybook && (
@@ -81,7 +77,6 @@ export function Footer() {
             rel="noopener noreferrer"
           >
             <svg
-              id="storybook"
               xmlns="http://www.w3.org/2000/svg"
               width="24px"
               height="24px"
@@ -92,11 +87,11 @@ export function Footer() {
               strokeWidth="2.6"
               className="icon-base"
               data-tooltip-content="Storybook"
+              data-tooltip-id="footer-tooltip"
               aria-label="Storybook"
             >
               <path d="M21.786 0.318l-0.161 3.615c-0.005 0.203 0.229 0.328 0.391 0.203l1.411-1.068 1.198 0.932c0.156 0.104 0.365 0 0.375-0.188l-0.135-3.677 1.776-0.135c0.922-0.063 1.708 0.672 1.708 1.599v28.802c0 0.917-0.766 1.646-1.682 1.599l-21.469-0.958c-0.833-0.036-1.505-0.708-1.531-1.547l-1-26.401c-0.052-0.885 0.62-1.646 1.505-1.693l17.599-1.109zM17.693 12.401c0 0.625 4.214 0.318 4.786-0.109 0-4.266-2.292-6.521-6.479-6.521-4.198 0-6.531 2.297-6.531 5.724 0 5.932 8 6.036 8 9.276 0 0.938-0.427 1.469-1.401 1.469-1.281 0-1.802-0.651-1.734-2.88 0-0.479-4.865-0.641-5.026 0-0.359 5.375 2.974 6.932 6.797 6.932 3.724 0 6.63-1.984 6.63-5.573 0-6.359-8.135-6.188-8.135-9.333 0-1.292 0.964-1.464 1.505-1.464 0.604 0 1.667 0.094 1.589 2.49z" />
             </svg>
-            <Tooltip anchorId="storybook" />
           </a>
         )}
         {footerLinks?.buyMeAPizza && (
@@ -109,11 +104,12 @@ export function Footer() {
               id="pizza"
               className="icon-base"
               data-tooltip-content="Buy me a pizza"
+              data-tooltip-id="footer-tooltip"
               aria-label="Buy me a pizza"
             />
-            <Tooltip anchorId="pizza" />
           </a>
         )}
+        <Tooltip id="footer-tooltip" />
       </div>
 
       <div className="flex h-6 flex-row items-center justify-center space-x-1 text-slate-600 dark:text-slate-300">
@@ -122,7 +118,7 @@ export function Footer() {
       </div>
 
       <button
-        className="absolute left-8 bottom-4 h-full w-fit"
+        className="absolute bottom-4 left-8 h-full w-fit"
         onClick={() => {
           document.body.scrollTop = 0;
           document.documentElement.scrollTop = 0;
@@ -147,7 +143,7 @@ export function Footer() {
           <line x1="12" y1="38" x2="12" y2="5"></line>
           <polyline points="5 12 12 5 19 12"></polyline>
         </svg>
-        <Tooltip anchorId="scroll-to-top" place="right" />
+        <Tooltip anchorSelect="#scroll-to-top" place="right" />
       </button>
     </footer>
   );

diff --git a/components/mdx-components.tsx b/components/mdx-components.tsx
@@ -48,7 +48,7 @@ function img({ src, alt }: React.HTMLProps<HTMLImageElement>) {
 
   return (
     <figure
-      className="mx-auto mt-3 mb-6 flex h-fit w-fit flex-col rounded bg-slate-300/20 dark:bg-rose-50/25"
+      className="mx-auto mb-6 mt-3 flex h-fit w-fit flex-col rounded bg-slate-300/20 dark:bg-rose-50/25"
       aria-label={_alt}
     >
       <Image

diff --git a/components/stories/tooltip.stories.tsx b/components/stories/tooltip.stories.tsx
@@ -7,29 +7,23 @@ import { Center } from './decorators';
 const meta: Meta<typeof Tooltip> = {
   title: 'Tooltip',
   component: Tooltip,
-  decorators: [
-    (Story, ctx) => (
-      <>
-        <Github
-          id="github"
-          className="icon-base"
-          data-tooltip-content={ctx.args.content}
-          aria-label={ctx.args.content}
-        />
-        <Story />
-      </>
-    ),
-    Center,
-  ],
+  render: (args) => (
+    <>
+      <Github
+        id="github"
+        className="icon-base"
+        data-tooltip-content={args.content}
+        data-tooltip-id="tooltip"
+        aria-label={args.content}
+      />
+      <Tooltip id="tooltip" {...args} />
+    </>
+  ),
+  decorators: [Center],
+  args: {
+    content: 'My GitHub profile',
+  },
   argTypes: {
-    anchorId: {
-      control: false,
-      defaultValue: 'github',
-    },
-    content: {
-      control: 'text',
-      defaultValue: 'My GitHub profile',
-    },
     place: {
       control: false,
     },

diff --git a/components/toolbar.tsx b/components/toolbar.tsx
@@ -59,10 +59,10 @@ export function Toolbar({ fontControls, className }: ToolbarProps) {
             'icon-base h-5 w-5 mix-blend-color-dodge xs:h-6 xs:w-6',
             isSearching && 'text-accent/60 dark:text-accent-dark/80',
           )}
-          data-tooltip-content="Search Posts"
           aria-label="Search Posts"
+          data-tooltip-content="Search Posts"
+          data-tooltip-id="toolbar-tooltip"
         />
-        <Tooltip anchorId="search" />
       </button>
 
       {fontControls && (
@@ -78,10 +78,10 @@ export function Toolbar({ fontControls, className }: ToolbarProps) {
                 'icon-base h-5 w-5 mix-blend-color-dodge xs:h-6 xs:w-6',
                 'group-disabled:text-accent/60 dark:group-disabled:text-accent-dark/80',
               )}
-              data-tooltip-content="Decrease font size"
               aria-label="Decrease font size"
+              data-tooltip-content="Decrease font size"
+              data-tooltip-id="toolbar-tooltip"
             />
-            <Tooltip anchorId="decrease-font-size" place="bottom" />
           </button>
           <button
             onClick={increaseFontSize}
@@ -96,8 +96,8 @@ export function Toolbar({ fontControls, className }: ToolbarProps) {
               )}
               aria-label="Increase font size"
               data-tooltip-content="Increase font size"
+              data-tooltip-id="toolbar-tooltip"
             />
-            <Tooltip anchorId="increase-font-size" place="bottom" />
           </button>
         </>
       )}
@@ -110,11 +110,16 @@ export function Toolbar({ fontControls, className }: ToolbarProps) {
             isSerif && 'text-accent/60 dark:text-accent-dark/80',
           )}
           data-tooltip-content="Toggle serif font"
+          data-tooltip-id="toolbar-tooltip"
           aria-label="Toggle serif font"
         />
-        <Tooltip anchorId="serif" place="bottom" />
       </button>
-      <button onClick={toggleDarkAndApply} id="theme-toggle">
+      <button
+        onClick={toggleDarkAndApply}
+        id="theme-toggle"
+        data-tooltip-content={`Switch to ${isDark ? 'light' : 'dark'} mode`}
+        data-tooltip-id="toolbar-tooltip"
+      >
         {isDark ? (
           <Moon
             className="icon-base h-5 w-5 mix-blend-color-dodge xs:h-6 xs:w-6"
@@ -126,12 +131,9 @@ export function Toolbar({ fontControls, className }: ToolbarProps) {
             aria-label="Switch to dark mode"
           />
         )}
-        <Tooltip
-          anchorId="theme-toggle"
-          place="bottom"
-          content={`Switch to ${isDark ? 'light' : 'dark'} mode`}
-        />
       </button>
+
+      <Tooltip id="toolbar-tooltip" />
     </div>
   );
 }
diff --git a/package.json b/package.json
@@ -15,73 +15,72 @@
     "build-storybook": "npx contentlayer build && storybook build"
   },
   "dependencies": {
-    "@giscus/react": "^2.2.6",
-    "@next/font": "^13.2.3",
-    "@vercel/analytics": "^0.1.10",
-    "@vercel/og": "^0.1.0",
+    "@giscus/react": "^2.2.8",
+    "@vercel/analytics": "^1.0.0",
+    "@vercel/og": "^0.5.3",
     "clsx": "^1.2.1",
-    "contentlayer": "^0.3.0",
+    "contentlayer": "^0.3.1",
     "contentlayer-mock": "^0.0.11",
     "date-fns": "^2.29.3",
-    "eslint": "8.34.0",
-    "eslint-config-next": "13.2.3",
+    "eslint": "8.39.0",
+    "eslint-config-next": "13.3.1",
     "grapheme-splitter": "^1.0.4",
     "hastscript": "^7.2.0",
-    "lucide-react": "^0.115.0",
-    "next": "13.2.3",
-    "next-contentlayer": "^0.3.0",
-    "next-sitemap": "^3.1.52",
+    "lucide-react": "^0.176.0",
+    "next": "13.3.1",
+    "next-contentlayer": "^0.3.1",
+    "next-sitemap": "^4.0.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-tooltip": "5.8.3",
+    "react-tooltip": "5.11.1",
     "react-typist-component": "^1.0.5",
     "react-wrap-balancer": "^0.4.0",
     "rehype-autolink-headings": "^6.1.1",
-    "rehype-pretty-code": "^0.9.4",
+    "rehype-pretty-code": "^0.9.5",
     "rehype-slug": "^5.1.0",
     "remark-gfm": "^3.0.1",
     "shiki": "^0.14.1",
-    "tailwind-merge": "^1.10.0",
+    "tailwind-merge": "^1.12.0",
     "unified": "^10.1.2",
-    "vitest": "^0.28.5",
-    "zustand": "^4.3.3"
+    "vitest": "^0.30.1",
+    "zustand": "^4.3.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.0",
-    "@ianvs/prettier-plugin-sort-imports": "^3.7.1",
-    "@next/env": "^13.2.3",
-    "@storybook/addon-essentials": "^7.0.0-beta.28",
-    "@storybook/addon-interactions": "^7.0.0-beta.28",
-    "@storybook/addon-links": "^7.0.0-beta.28",
-    "@storybook/addons": "^7.0.0-beta.29",
-    "@storybook/api": "^7.0.0-beta.29",
-    "@storybook/blocks": "^7.0.0-alpha.8",
-    "@storybook/components": "^7.0.0-beta.29",
-    "@storybook/core-events": "^7.0.0-beta.29",
-    "@storybook/nextjs": "^7.0.0-beta.15",
-    "@storybook/react": "^7.0.0-beta.28",
-    "@storybook/testing-library": "^0.0.14-next.1",
-    "@storybook/theming": "^7.0.0-beta.29",
-    "@storybook/types": "^7.0.0-alpha.44",
+    "@babel/core": "^7.21.4",
+    "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
+    "@next/env": "^13.3.1",
+    "@storybook/addon-essentials": "^7.0.6",
+    "@storybook/addon-interactions": "^7.0.6",
+    "@storybook/addon-links": "^7.0.6",
+    "@storybook/addons": "^7.0.6",
+    "@storybook/api": "^7.0.6",
+    "@storybook/blocks": "^7.0.6",
+    "@storybook/components": "^7.0.6",
+    "@storybook/core-events": "^7.0.6",
+    "@storybook/nextjs": "^7.0.6",
+    "@storybook/react": "^7.0.6",
+    "@storybook/testing-library": "^0.1.0",
+    "@storybook/theming": "^7.0.6",
+    "@storybook/types": "^7.0.6",
     "@tailwindcss/typography": "^0.5.9",
-    "@types/node": "18.14.1",
-    "@types/react": "18.0.28",
+    "@types/node": "18.16.0",
+    "@types/react": "18.0.38",
     "@types/react-dom": "18.0.11",
-    "autoprefixer": "^10.4.13",
+    "autoprefixer": "^10.4.14",
     "css-loader": "^6.7.3",
     "eslint-plugin-storybook": "^0.6.11",
-    "eslint-plugin-tailwindcss": "^3.9.0",
-    "postcss": "^8.4.21",
-    "postcss-loader": "^7.0.2",
-    "prettier": "2.8.4",
-    "prettier-plugin-tailwindcss": "^0.2.3",
+    "eslint-plugin-tailwindcss": "^3.11.0",
+    "postcss": "^8.4.23",
+    "postcss-loader": "^7.2.4",
+    "prettier": "2.8.8",
+    "prettier-plugin-tailwindcss": "^0.2.7",
     "prop-types": "^15.8.1",
-    "storybook": "^7.0.0-beta.28",
-    "storybook-tailwind-dark-mode": "^1.0.15",
-    "style-loader": "^3.3.1",
-    "tailwindcss": "^3.2.7",
+    "storybook": "^7.0.6",
+    "storybook-tailwind-dark-mode": "^1.0.22",
+    "style-loader": "^3.3.2",
+    "tailwindcss": "^3.3.1",
     "ts-node": "^10.9.1",
-    "typescript": "^4.9.5",
-    "webpack": "^5.75.0"
+    "typescript": "^5.0.4",
+    "webpack": "^5.80.0"
   }
-}
+}