diff --git a/.changeset/fair-bottles-nail.md b/.changeset/fair-bottles-nail.md new file mode 100644 index 000000000..884cf47ce --- /dev/null +++ b/.changeset/fair-bottles-nail.md @@ -0,0 +1,5 @@ +--- +"@tonightpass/kitchen": minor +--- + +Move kitchen/next/link to kitchen/link compatible with next diff --git a/docs/components/Footer/index.tsx b/docs/components/Footer/index.tsx index 4d5fc28ad..d95c759a1 100644 --- a/docs/components/Footer/index.tsx +++ b/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 = { diff --git a/docs/components/Landing/Featured/index.tsx b/docs/components/Landing/Featured/index.tsx index 20b6e9383..c0f408b10 100644 --- a/docs/components/Landing/Featured/index.tsx +++ b/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(); diff --git a/docs/components/Landing/Showcase/List/index.tsx b/docs/components/Landing/Showcase/List/index.tsx index d7f562e20..2a247885e 100644 --- a/docs/components/Landing/Showcase/List/index.tsx +++ b/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"; diff --git a/docs/pages/docs/frameworks/nextjs.mdx b/docs/pages/docs/frameworks/nextjs.mdx index 34998df91..d8ebcb3ff 100644 --- a/docs/pages/docs/frameworks/nextjs.mdx +++ b/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 - -Return to the home page -`} -/> - -### Using onClick - - router.push("/")}>Return to the home page -`} -/> - -### Disabled - - - Disabled link - - Disabled link (no href or onClick) - - - {"Disabled link (href=#)"} - - -`} -/> - -### Non text - - - This entire div is wrapped in a link - -`} -/> - -### Variants - - - - highlight - - Highlight variant - - - - primary - - Primary variant - - - - secondary - - Secondary variant - - - - blend - - - Blend variant - {" "} - works well with themed components. - - - -`} -/> - -### Fragment link (anchor) - - - Click on this to jump to this section of the page - -`} -/> - -### Internal href - -Click on this to jump back to the home page -`} -/> - -### External href - - - Click on this to go to our website - -`} -/> - -### 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) => 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` | diff --git a/examples/next-typescript/src/pages/index.tsx b/examples/next-typescript/src/pages/index.tsx index c7d2f60d4..5069a749e 100644 --- a/examples/next-typescript/src/pages/index.tsx +++ b/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 = () => { diff --git a/packages/kitchen/src/components/GlobalStyle/main.ts b/packages/kitchen/src/components/GlobalStyle/main.ts index 36e12b1e0..0649d20a4 100644 --- a/packages/kitchen/src/components/GlobalStyle/main.ts +++ b/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 { diff --git a/packages/kitchen/src/components/Link/Fragment/index.tsx b/packages/kitchen/src/components/Link/Fragment/index.tsx index 358ca8c4e..d531a4a9e 100644 --- a/packages/kitchen/src/components/Link/Fragment/index.tsx +++ b/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 +>; + const FragmentLink = styled(({ id, ...props }: FragmentLinkProps) => { const href = `#${id}`; return ; diff --git a/packages/kitchen/src/components/Link/index.tsx b/packages/kitchen/src/components/Link/index.tsx index 051911986..3bf0c64c0 100644 --- a/packages/kitchen/src/components/Link/index.tsx +++ b/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 ( + {children} + + ); + } + } + return ( { - const href = `#${id}`; - return ; -})``; - -export default FragmentLink; diff --git a/packages/kitchen/src/next/components/Link/index.tsx b/packages/kitchen/src/next/components/Link/index.tsx deleted file mode 100644 index a47f9e55b..000000000 --- a/packages/kitchen/src/next/components/Link/index.tsx +++ /dev/null @@ -1,167 +0,0 @@ -import NextLink from "next/link"; -import React from "react"; -import styled from "styled-components"; -import { UrlObject } from "url"; - -import { KitchenComponent } from "../../../types"; -import isString from "../../../utils/isString"; - -export type Props = { - /** - * The link's href. - */ - href?: string | UrlObject; - - /** - * The link's locale. - */ - locale?: string; - - /** - * The link's classname. - */ - className?: string; - - /** - * The link's onClick. - */ - onClick?: (event: React.MouseEvent) => void; - - /** - * The link's status (if it's disabled or not). - */ - disabled?: boolean; - - /** - * The link's variant. - */ - variant?: "highlight" | "primary" | "secondary" | "blend"; -}; - -export type LinkProps = KitchenComponent< - Props, - React.AnchorHTMLAttributes ->; - -const Link = styled( - ({ - as: Component = "a", - href, - locale, - className, - disabled, - onClick, - variant, - children, - ...props - }: LinkProps) => { - disabled = disabled || (!onClick && !href); - - const handleClick = (event: React.MouseEvent) => { - if (disabled) return event.preventDefault(); - if (onClick) onClick(event); - }; - - if (isString(href)) { - href = href as string; - // regex to check if the href is internal or external - - const internal = href.match(/^(\/(?!\/)[^#]*|#.*)$/); - if (!internal) { - return ( - - {children} - - ); - } - } - - if (href) { - return ( - - {children} - - ); - } - - return ( - - {children} - - ); - }, -)` - box-sizing: border-box; - display: inline-flex; - font-size: ${({ theme }) => theme.size.normal}; - font-weight: ${({ theme, variant }) => - variant === "blend" ? theme.weight.medium : theme.weight.regular}; - text-decoration: none; - transition: opacity filter 0.2s ease-in-out; - line-height: 1.25; - ${({ variant }) => - variant === "blend" && - ` - background-image: linear-gradient(currentColor, currentColor); - background-size: 100% 1px; - background-position: 0 100%; - background-repeat: no-repeat;`}; - - color: ${({ theme, variant }) => { - if (variant === "highlight") { - return theme.colors.accent.primary; - } else if (variant === "blend") { - return "inherit"; - } else if (variant === "secondary") { - return theme.colors.text.lighter; - } else { - return theme.colors.text.lightest; - } - }}; - - &:hover { - ${({ theme, disabled, variant, onClick, href }) => { - disabled = disabled || (!onClick && !href); - - return ` - cursor: ${disabled ? "default" : "pointer"}; - filter: ${ - (variant && variant !== "blend") || disabled - ? "none" - : "brightness(0.8)" - }; - ${ - variant === "secondary" - ? ` - background-image: linear-gradient(currentColor, currentColor); - background-size: 100% 1px; - background-position: 0 100%; - background-repeat: no-repeat; - color: ${theme.colors.text.lightest};` - : "" - }; - `; - }} - } -`; - -export default Link; diff --git a/packages/kitchen/src/next/index.ts b/packages/kitchen/src/next/index.ts index 1e3f180c2..69530f130 100644 --- a/packages/kitchen/src/next/index.ts +++ b/packages/kitchen/src/next/index.ts @@ -1,9 +1,3 @@ export { default as KitchenDocument } from "./components/Document"; export { default as withKitchenConfig } from "./hoc/withKitchenConfig"; - -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"; diff --git a/packages/kitchen/src/types/index.ts b/packages/kitchen/src/types/index.ts index a3737fce5..0fc15e780 100644 --- a/packages/kitchen/src/types/index.ts +++ b/packages/kitchen/src/types/index.ts @@ -1,5 +1,6 @@ export * from "./theme"; export * from "./styled-components"; +export * from "./window"; export type KitchenComponent> = { /** diff --git a/packages/kitchen/src/types/window.ts b/packages/kitchen/src/types/window.ts new file mode 100644 index 000000000..d16b6b111 --- /dev/null +++ b/packages/kitchen/src/types/window.ts @@ -0,0 +1,7 @@ +declare global { + interface Window { + next?: any; + } +} + +export type window = object; diff --git a/workshop/pages/link.tsx b/workshop/pages/link.tsx index ad55ec6c7..f4b969f2a 100644 --- a/workshop/pages/link.tsx +++ b/workshop/pages/link.tsx @@ -1,6 +1,10 @@ -import kitchen, { Container, Note, Text } from "@tonightpass/kitchen"; -import { FragmentLink, Link } from "@tonightpass/kitchen/next"; -import { NextPage } from "next"; +import kitchen, { + Container, + Link, + Note, + Text, + FragmentLink, +} from "@tonightpass/kitchen"; import { useRouter } from "next/router"; const LinkPage: NextPage = () => { diff --git a/workshop/pages/template.tsx b/workshop/pages/template.tsx index df351b9ac..9363b1d36 100644 --- a/workshop/pages/template.tsx +++ b/workshop/pages/template.tsx @@ -3,9 +3,9 @@ import kitchen, { convertRGBToRGBA, Image, Text, + Link, rotate, } from "@tonightpass/kitchen"; -import { Link } from "@tonightpass/kitchen/next"; const TemplatePage = () => { return (