🎨 move kitchen/next/link to kitchen/link compatible with next

.changeset/fair-bottles-nail.md

@@ -0,0 +1,5 @@
+---
+"@tonightpass/kitchen": minor
+---
+
+Move kitchen/next/link to kitchen/link compatible with next

docs/components/Footer/index.tsx

@@ -1,11 +1,11 @@
 import Logo from "@components/Logo/TonightPass";
 import kitchen, {
   Container,
+  Link,
   Footer,
   FooterGroup,
   FooterLink,
 } from "@tonightpass/kitchen";
-import { Link } from "@tonightpass/kitchen/next";
 import { ThemeSwitch } from "nextra-theme-docs";
 
 const navigation = {

docs/components/Landing/Featured/index.tsx

@@ -1,5 +1,11 @@
-import { Button, Container, Text, Image, useTheme } from "@tonightpass/kitchen";
-import { Link } from "@tonightpass/kitchen/next";
+import {
+  Button,
+  Container,
+  Link,
+  Text,
+  Image,
+  useTheme,
+} from "@tonightpass/kitchen";
 
 const Featured: React.FC = () => {
   const { theme } = useTheme();

docs/components/Landing/Showcase/List/index.tsx

@@ -1,5 +1,4 @@
-import kitchen, { Container, Text } from "@tonightpass/kitchen";
-import { Link } from "@tonightpass/kitchen/next";
+import kitchen, { Container, Text, Link } from "@tonightpass/kitchen";
 import showcases from "data/showcases";
 
 import ShowcaseCard from "./Card";

docs/pages/docs/frameworks/nextjs.mdx

@@ -6,9 +6,8 @@ category: frameworks
 ---
 
 import Playground from "@components/Playground";
-import kitchen, { Container } from "@tonightpass/kitchen";
+import kitchen, { Container, FragmentLink, Link } from "@tonightpass/kitchen";
 import { Tab, Tabs } from "nextra-theme-docs";
-import { FragmentLink, Link } from "@tonightpass/kitchen/next";
 
 # Getting Started with Next.js
 
@@ -77,148 +76,3 @@ Deploy the example using [Vercel](https://vercel.com/new/clone?repository-url=ht
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/tonightpass/kitchen/tree/master/examples/next-typescript&project-name=kitchen-next&repository-name=kitchen-next)
 
 In addition, here is a complete [project example](https://github.com/tonightpass/kitchen/tree/master/examples/next-typescript) using Kitchen with Next.js.
-
-## Kitchen with Next.js Link
-
-If you're using Next.js 13, we've provided a `@tonightpass/kitchen/next` package that
-gives you a smoother experience when using Kitchen Link component with
-`next/link`.
-
-export const Card = kitchen(Container)`
-  border: 1px solid ${({ theme }) => theme.colors.layout.dark};
-  border-radius: 8px;
-  padding: 16px;
-`;
-
-### Usage
-
-First of all, you need to import the `Link` component from the `@tonightpass/kitchen` package.
-
-```js
-import { Link } from "@tonightpass/kitchen"
-```
-
-### Default
-
-<Playground
-scope={{ Link }}
-  code={`
-  <Link href="/">Return to the home page</Link>
-`}
-/>
-
-### Using onClick
-
-<Playground
-scope={{ Link }}
-  code={`
-  <Link onClick={() => router.push("/")}>Return to the home page</Link>
-`}
-/>
-
-### Disabled
-
-<Playground
-scope={{ Link }}
-  code={`
-<Container gap={"small"}>
-  <Link disabled>Disabled link</Link>
-  <Link href={undefined} onClick={undefined}>
-    Disabled link (no href or onClick)
-  </Link>
-  <Link href="#" disabled>
-    {"Disabled link (href=#)"}
-  </Link>
-</Container>
-`}
-/>
-
-### Non text
-
-<Playground
-scope={{ Link, Card }}
-  code={`
-<Link href="/">
-  <Card>This entire div is wrapped in a link</Card>
-</Link>
-`}
-/>
-
-### Variants
-
-<Playground
-scope={{ Link }}
-  code={`
-<Container gap={"small"}>
-  <Container gap={"small"}>
-    <Text size={"small"}>highlight</Text>
-    <Link href="#" variant="highlight">
-      Highlight variant
-    </Link>
-  </Container>
-  <Container gap={"small"}>
-    <Text size={"small"}>primary</Text>
-      <Link href="#" variant="primary">
-        Primary variant
-      </Link>
-  </Container>
-  <Container gap={"small"} align={"flex-start"}>
-    <Text size={"small"}>secondary</Text>
-      <Link href="#" variant="secondary">
-        Secondary variant
-      </Link>
-  </Container>
-  <Container gap={"small"}>
-    <Text size={"small"}>blend</Text>
-    <Note type="danger" label={false}>
-      <Link href="#" variant="blend">
-        Blend variant
-      </Link>{" "}
-      works well with themed components.
-    </Note>
-  </Container>
-</Container>
-`}
-/>
-
-### Fragment link (anchor)
-
-<Playground
-scope={{ FragmentLink }}
-  code={`
-<FragmentLink id="fragment-link-example">
-  Click on this to jump to this section of the page
-</FragmentLink>
-`}
-/>
-
-### Internal href
-
-<Playground
-scope={{ Link }}
-  code={`
-<Link href="/">Click on this to jump back to the home page</Link>
-`}
-/>
-
-### External href
-
-<Playground
-scope={{ Link }}
-  code={`
-<Link href="https://tonightpass.com/">
-  Click on this to go to our website
-</Link>
-`}
-/>
-
-### Props
-
-| Name | Type | Default | Required | Description | Accepted values |
-| :--- | :--- | :-----: | :------: | :---------- | :-------------- |
-| `href` | `string` \| `UrlObject` | - | - | The href of the link. | - |
-| `locale` | `string` | - | - | The locale of the link. | - |
-| `className` | `string` | - | - | The classname of the link. | - |
-| `onClick` | `(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void` | - | - | The click event handler of the link. | - |
-| `disabled` | `boolean` | `false` | - | The status (disabled or not) of the link. | - |
-| `variant` | `string` | `primary` | - | The variant of the link. | `highlight`, `primary`, `secondary`, `blend` |

examples/next-typescript/src/pages/index.tsx

@@ -3,9 +3,9 @@ import kitchen, {
   convertRGBToRGBA,
   Image,
   Text,
+  Link,
   rotate,
 } from "@tonightpass/kitchen";
-import { Link } from "@tonightpass/kitchen/next";
 import Head from "next/head";
 
 const IndexPage = () => {

packages/kitchen/src/components/GlobalStyle/main.ts

@@ -74,8 +74,7 @@ const mainCss = css`
 
   a {
     text-decoration: none;
-    color: ${({ theme }) => theme.colors.text.lightest};
-    transition: all 0.2s;
+    color: inherit;
     cursor: pointer;
 
     &:hover {

packages/kitchen/src/components/Link/Fragment/index.tsx

@@ -2,14 +2,20 @@ import React from "react";
 import styled from "styled-components";
 
 import Link, { LinkProps } from "..";
+import { KitchenComponent } from "../../../types";
 
-export type FragmentLinkProps = LinkProps & {
+type Props = LinkProps & {
   /**
    * The link's id.
    */
   id: string;
 };
 
+export type FragmentLinkProps = KitchenComponent<
+  Props,
+  React.AnchorHTMLAttributes<HTMLAnchorElement>
+>;
+
 const FragmentLink = styled(({ id, ...props }: FragmentLinkProps) => {
   const href = `#${id}`;
   return <Link id={id} href={href} {...props} />;

packages/kitchen/src/components/Link/index.tsx

@@ -56,10 +56,7 @@ const Link = styled(
     };
 
     if (isString(href)) {
-      href = href as string;
-      // regex to check if the href is internal or external
-
-      const internal = href.match(/^(\/(?!\/)[^#]*|#.*)$/);
+      const internal = (href as string).match(/^(\/(?!\/)[^#]*|#.*)$/);
       if (!internal) {
         return (
           <Component
@@ -76,6 +73,23 @@ const Link = styled(
       }
     }
 
+    if (typeof window !== "undefined" && window.next) {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const NextLink = require("next/link").default;
+      if (href && NextLink) {
+        return (
+          <NextLink
+            href={href}
+            className={className}
+            onClick={handleClick}
+            {...props}
+          >
+            {children}
+          </NextLink>
+        );
+      }
+    }
+
     return (
       <Component
         className={className}

packages/kitchen/src/index.ts

@@ -71,6 +71,8 @@ export { default as UnorderedList } from "./components/List/Unordered";
 
 export { default as Link } from "./components/Link";
 export type { LinkProps } from "./components/Link";
+export { default as FragmentLink } from "./components/Link/Fragment";
+export type { FragmentLinkProps } from "./components/Link/Fragment";
 
 export { default as Modal } from "./components/Modal";
 export type { ModalProps, ModalActionProps } from "./components/Modal";