diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 942d5cbf..85299d6e 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -14,15 +14,13 @@ jobs: steps: - name: "Checkout repo" - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: "Set up pnpm" - uses: pnpm/action-setup@v2 - with: - version: 8 + uses: pnpm/action-setup@v4 - name: "Set up latest Node LTS" - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: "lts/*" cache: pnpm diff --git a/.github/workflows/cli-e2e.yml b/.github/workflows/cli-e2e.yml index 0c43c28c..1e994abd 100644 --- a/.github/workflows/cli-e2e.yml +++ b/.github/workflows/cli-e2e.yml @@ -13,15 +13,13 @@ jobs: steps: - name: "Checkout repo" - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: "Set up pnpm" - uses: pnpm/action-setup@v2 - with: - version: 8 + uses: pnpm/action-setup@v4 - name: "Set up latest Node LTS" - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: "lts/*" cache: pnpm @@ -58,15 +56,13 @@ jobs: steps: - name: "Checkout repo" - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: "Set up pnpm" - uses: pnpm/action-setup@v2 - with: - version: 8 + uses: pnpm/action-setup@v4 - name: "Set up latest Node LTS" - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: "lts/*" cache: pnpm diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 3091e936..a323ca90 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -20,15 +20,13 @@ jobs: steps: - name: "Checkout repo" - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: "Set up pnpm" - uses: pnpm/action-setup@v2 - with: - version: 8 + uses: pnpm/action-setup@v4 - name: "Set up latest Node LTS" - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: "lts/*" registry-url: "https://registry.npmjs.org" diff --git a/.gitignore b/.gitignore index 81cba6bb..20ec8a71 100644 --- a/.gitignore +++ b/.gitignore @@ -18,6 +18,8 @@ **/lib **/tmp +# typescript +*.tsbuildinfo # misc .DS_Store diff --git a/.husky/pre-commit b/.husky/pre-commit index 780b9d9f..e7c1e254 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,5 +1,2 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" - pnpm run update-readmes npx lint-staged diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index fbbc77d1..c8b72883 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -77,11 +77,9 @@ Make sure you are set up locally by following the [Getting Started](#getting-sta Make sure you are set up locally by following the [Getting Started](#getting-started) section above. 1. Create a new branch from `develop` with a descriptive name. - - `git checkout -b feature/support-my-favorite-technology` 2. Make sure you check out the [scripts](#scripts) section above. Most notably: - - `build:watch` - Make sure to have `build:watch` running if you are running tests, as tests are run on the built files. - `unit:watch` - Some of these tests were specifically made to ease the plugin authoring process, so don't forget this one. - `e2e` - Runs e2e tests. Note that this will run all e2e tests, which can take quite a while. @@ -91,7 +89,6 @@ Make sure you are set up locally by following the [Getting Started](#getting-sta - `clean` - Removes all generated files, including build files and the `create-next-stack-tests` directory created by the e2e tests. 3. Add a new .ts file for your plugin in the plugins directory at [`packages/create-next-stack/src/main/plugins`](packages/create-next-stack/src/main/plugins) - - See the [Writing a plugin section](#writing-a-plugin) below to learn how to write a Create Next Stack plugin. 4. Add new flags to the `create-next-stack` command in [`create-next-stack.ts`](packages/create-next-stack/src/main/commands/create-next-stack.ts). diff --git a/apps/website/.eslintrc.json b/apps/website/.eslintrc.json deleted file mode 100644 index b7a2e329..00000000 --- a/apps/website/.eslintrc.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": ["next/core-web-vitals", "eslint-config-prettier"], - "rules": { - "@next/next/no-page-custom-font": "off" - } -} diff --git a/apps/website/app/layout.tsx b/apps/website/app/layout.tsx new file mode 100644 index 00000000..d9cd05f1 --- /dev/null +++ b/apps/website/app/layout.tsx @@ -0,0 +1,45 @@ +import "@mantine/core/styles.css" + +import { ColorSchemeScript, mantineHtmlProps } from "@mantine/core" +import type { Metadata } from "next" +import PlausibleProvider from "next-plausible" +import { Providers } from "./providers" + +export const metadata: Metadata = { + title: "Create your Next.js project today! | Create Next Stack", + description: + "Create your Next.js project today! Create Next Stack is a website and CLI tool used to easily set up the boilerplate of new Next.js apps.", + openGraph: { + title: "Create your Next.js project today! | Create Next Stack", + description: + "Create your Next.js project today! Create Next Stack is a website and CLI tool used to easily set up the boilerplate of new Next.js apps.", + type: "website", + images: ["https://www.create-next-stack.com/thumbnail.png"], + }, + icons: { + icon: "/favicon.ico", + }, +} + +export default function RootLayout({ + children, +}: { + children: React.ReactNode +}) { + return ( + + + + + + + + {children} + + + + ) +} diff --git a/apps/website/app/page.tsx b/apps/website/app/page.tsx new file mode 100644 index 00000000..3aa049a5 --- /dev/null +++ b/apps/website/app/page.tsx @@ -0,0 +1,5 @@ +import LandingPageTemplate from "../templates/LandingPage/LandingPageTemplate" + +export default function Page() { + return +} diff --git a/apps/website/app/providers.tsx b/apps/website/app/providers.tsx new file mode 100644 index 00000000..063159fb --- /dev/null +++ b/apps/website/app/providers.tsx @@ -0,0 +1,12 @@ +"use client" + +import { MantineProvider } from "@mantine/core" +import { theme } from "../theme" + +export function Providers({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ) +} diff --git a/apps/website/components/Anchor.tsx b/apps/website/components/Anchor.tsx index 080a9f88..e8750aa1 100644 --- a/apps/website/components/Anchor.tsx +++ b/apps/website/components/Anchor.tsx @@ -1,6 +1,20 @@ -import { Link } from "@chakra-ui/react" -import { ComponentProps, FC } from "react" +"use client" -export const Anchor: FC> = (props) => { - return +import { Anchor as MantineAnchor } from "@mantine/core" +import { ReactNode } from "react" + +type AnchorProps = { + href?: string + target?: string + children?: ReactNode + c?: string + fw?: string | number +} + +export const Anchor = ({ + c = "#319bff", + fw = "bold", + ...props +}: AnchorProps) => { + return } diff --git a/apps/website/components/Checkbox.tsx b/apps/website/components/Checkbox.tsx index 03feda00..9b5b32c7 100644 --- a/apps/website/components/Checkbox.tsx +++ b/apps/website/components/Checkbox.tsx @@ -1,6 +1,8 @@ -import { Checkbox as ChakraCheckbox } from "@chakra-ui/react" -import { ComponentProps, FC } from "react" +"use client" -export const Checkbox: FC> = (props) => { - return +import { Checkbox as MantineCheckbox, CheckboxProps } from "@mantine/core" +import { FC } from "react" + +export const Checkbox: FC = (props) => { + return } diff --git a/apps/website/components/Page.tsx b/apps/website/components/Page.tsx deleted file mode 100644 index c6975c33..00000000 --- a/apps/website/components/Page.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import Head from "next/head" -import React from "react" -import WithDefaultGlobalStyles from "./WithDefaultGlobalStyles" - -type PageProps = { - title: string - description: string - ogImageUrl: string - children?: React.ReactNode -} -const Page: React.FC = ({ - title, - description, - ogImageUrl, - children, -}) => { - return ( - - - {title} - - - - - - - - - - - {children} - - ) -} - -export default Page diff --git a/apps/website/components/Radio.tsx b/apps/website/components/Radio.tsx index de83c71f..d92c4d26 100644 --- a/apps/website/components/Radio.tsx +++ b/apps/website/components/Radio.tsx @@ -1,6 +1,8 @@ -import { Radio as ChakraRadio } from "@chakra-ui/react" -import { ComponentProps, FC } from "react" +"use client" -export const Radio: FC> = (props) => { - return +import { Radio as MantineRadio, RadioProps } from "@mantine/core" +import { FC } from "react" + +export const Radio: FC = (props) => { + return } diff --git a/apps/website/components/Section.tsx b/apps/website/components/Section.tsx index f80894ad..14bcfa25 100644 --- a/apps/website/components/Section.tsx +++ b/apps/website/components/Section.tsx @@ -1,32 +1,30 @@ -import { Flex } from "@chakra-ui/react" -import { ComponentProps, FC } from "react" +import { Box, Flex, FlexProps } from "@mantine/core" +import { FC, ReactNode } from "react" -type SectionProps = ComponentProps & { - innerProps?: ComponentProps +type SectionProps = Omit & { + innerProps?: FlexProps + children?: ReactNode + as?: "section" | "header" | "footer" } export const Section: FC = ({ innerProps, children, + as: Element = "section", ...props }) => { return ( - - - {children} + + + + {children} + - + ) } diff --git a/apps/website/components/SocialIcons.tsx b/apps/website/components/SocialIcons.tsx index cc2cfdca..81449181 100644 --- a/apps/website/components/SocialIcons.tsx +++ b/apps/website/components/SocialIcons.tsx @@ -1,12 +1,12 @@ -import { Flex, Stack } from "@chakra-ui/react" -import React, { ComponentProps } from "react" +import { Flex, FlexProps } from "@mantine/core" +import { FC } from "react" import { FaDiscord, FaGithub, FaTwitter } from "react-icons/fa" -export const SocialIcons: React.FC> = (props) => { +export const SocialIcons: FC = (props) => { return ( diff --git a/apps/website/components/WithDefaultGlobalStyles.tsx b/apps/website/components/WithDefaultGlobalStyles.tsx deleted file mode 100644 index 123293a4..00000000 --- a/apps/website/components/WithDefaultGlobalStyles.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { css, Global } from "@emotion/react" -import React from "react" - -const globalStyles = css` - // No global styles -` - -type WithDefaultGlobalStylesProps = { - children?: React.ReactNode -} -const WithDefaultGlobalStyles: React.FC = ({ - children, -}) => { - return ( - <> - - {children} - - ) -} - -export default WithDefaultGlobalStyles diff --git a/apps/website/eslint.config.mjs b/apps/website/eslint.config.mjs new file mode 100644 index 00000000..148a1479 --- /dev/null +++ b/apps/website/eslint.config.mjs @@ -0,0 +1,23 @@ +import { defineConfig, globalIgnores } from "eslint/config" +import nextVitals from "eslint-config-next/core-web-vitals" +import nextTs from "eslint-config-next/typescript" +import eslintConfigPrettier from "eslint-config-prettier" + +const eslintConfig = defineConfig([ + ...nextVitals, + ...nextTs, + eslintConfigPrettier, + { + rules: { + "@next/next/no-page-custom-font": "off", + "@next/next/no-img-element": "off", + "@typescript-eslint/no-unused-vars": [ + "warn", + { argsIgnorePattern: "^_", varsIgnorePattern: "^_" }, + ], + }, + }, + globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts"]), +]) + +export default eslintConfig diff --git a/apps/website/next-env.d.ts b/apps/website/next-env.d.ts index 4f11a03d..7a70f65a 100644 --- a/apps/website/next-env.d.ts +++ b/apps/website/next-env.d.ts @@ -1,5 +1,6 @@ /// /// +import "./.next/types/routes.d.ts" // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/apps/website/next.config.js b/apps/website/next.config.js deleted file mode 100644 index 55dd01cf..00000000 --- a/apps/website/next.config.js +++ /dev/null @@ -1,11 +0,0 @@ -const { withPlausibleProxy } = require("next-plausible") - -/** @type {import('next').NextConfig} */ -const config = { - reactStrictMode: true, - compiler: { - emotion: true, - }, -} - -module.exports = withPlausibleProxy()(config) diff --git a/apps/website/next.config.ts b/apps/website/next.config.ts new file mode 100644 index 00000000..0fa32508 --- /dev/null +++ b/apps/website/next.config.ts @@ -0,0 +1,8 @@ +import type { NextConfig } from "next" +import { withPlausibleProxy } from "next-plausible" + +const config: NextConfig = { + reactStrictMode: true, +} + +export default withPlausibleProxy()(config) diff --git a/apps/website/package.json b/apps/website/package.json index 7f074eec..125befb1 100644 --- a/apps/website/package.json +++ b/apps/website/package.json @@ -2,33 +2,33 @@ "name": "create-next-stack-website", "version": "0.1.0", "private": true, + "engines": { + "node": "24.x" + }, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", - "lint": "next lint" + "lint": "eslint" }, "dependencies": { - "@chakra-ui/icons": "^2.0.18", - "@chakra-ui/react": "2.3.6", - "@emotion/react": "^11.10.6", - "@emotion/styled": "^11.10.6", - "framer-motion": "^10.12.4", - "next": "^13.3.0", - "next-plausible": "^3.7.2", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-hook-form": "^7.43.9", - "react-icons": "^4.8.0", - "validate-npm-package-name": "^5.0.0" + "@mantine/core": "^8.0.0", + "@mantine/hooks": "^8.0.0", + "next": "^16.0.0", + "next-plausible": "^3.12.0", + "react": "^19.0.0", + "react-dom": "^19.0.0", + "react-hook-form": "^7.54.0", + "react-icons": "^5.4.0" }, "devDependencies": { - "@emotion/babel-plugin": "^11.10.6", - "@types/node": "^18.15.13", - "@types/react": "^18.0.37", - "@types/validate-npm-package-name": "^4.0.0", - "eslint": "^8.38.0", - "eslint-config-next": "^13.3.0", - "eslint-config-prettier": "^8.8.0" + "@types/node": "^25.0.0", + "@types/react": "^19.0.0", + "eslint": "^9.0.0", + "eslint-config-next": "^16.0.0", + "eslint-config-prettier": "^10.0.0", + "postcss": "^8.0.0", + "postcss-preset-mantine": "^1.0.0", + "postcss-simple-vars": "^7.0.0" } } diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx deleted file mode 100644 index 947f8cf9..00000000 --- a/apps/website/pages/_app.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { ChakraProvider } from "@chakra-ui/react" -import PlausibleProvider from "next-plausible" -import { AppProps } from "next/app" -import { theme } from "../theme" - -const CustomApp = ({ Component, pageProps }: AppProps) => { - return ( - - - - - - ) -} - -export default CustomApp diff --git a/apps/website/pages/_document.tsx b/apps/website/pages/_document.tsx deleted file mode 100644 index c4cf1b16..00000000 --- a/apps/website/pages/_document.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { ColorModeScript } from "@chakra-ui/react" -import NextDocument, { Head, Html, Main, NextScript } from "next/document" -import { theme } from "../theme" - -export default class Document extends NextDocument { - render() { - return ( - - - - -
- - - - ) - } -} diff --git a/apps/website/pages/index.tsx b/apps/website/pages/index.tsx deleted file mode 100644 index 9f10516a..00000000 --- a/apps/website/pages/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { NextPage } from "next" -import Page from "../components/Page" -import LandingPageTemplate from "../templates/LandingPage/LandingPageTemplate" - -const title = "Create your Next.js project today! | Create Next Stack" -const description = - "Create your Next.js project today! Create Next Stack is a website and CLI tool used to easily set up the boilerplate of new Next.js apps." - -const Index: NextPage = () => { - return ( - - - - ) -} - -export default Index diff --git a/apps/website/postcss.config.cjs b/apps/website/postcss.config.cjs new file mode 100644 index 00000000..4f222669 --- /dev/null +++ b/apps/website/postcss.config.cjs @@ -0,0 +1,14 @@ +module.exports = { + plugins: { + "postcss-preset-mantine": {}, + "postcss-simple-vars": { + variables: { + "mantine-breakpoint-xs": "36em", + "mantine-breakpoint-sm": "48em", + "mantine-breakpoint-md": "62em", + "mantine-breakpoint-lg": "75em", + "mantine-breakpoint-xl": "88em", + }, + }, + }, +} diff --git a/apps/website/templates/LandingPage/LandingPageTemplate.tsx b/apps/website/templates/LandingPage/LandingPageTemplate.tsx index d245444e..622cc8e0 100644 --- a/apps/website/templates/LandingPage/LandingPageTemplate.tsx +++ b/apps/website/templates/LandingPage/LandingPageTemplate.tsx @@ -1,6 +1,7 @@ -import { Box, Flex } from "@chakra-ui/react" -import { Global, css } from "@emotion/react" -import { ComponentProps, FC } from "react" +"use client" + +import { Box, Flex } from "@mantine/core" +import { FC, ReactNode } from "react" import { Section } from "../../components/Section" import { Description } from "./components/Description" import { Footer } from "./components/Footer" @@ -8,51 +9,45 @@ import { HeaderSection } from "./components/Header" import { Newsletter } from "./components/NewsletterSection" import { TechnologiesForm } from "./components/TechnologiesForm" -const globalStyles = css` - body { - background-color: #eee; - } -` - -const Card: FC> = (props) => ( +const Card: FC<{ children?: ReactNode }> = ({ children }) => ( + w="100%" + style={{ + borderRadius: "clamp(30px, 5vw, 50px)", + boxShadow: "0 10px 50px rgba(0,0,0,0.1)", + }} + p={{ base: 30, sm: 50, md: 70 }} + bg="white" + > + {children} + ) const LandingPageTemplate = () => { return ( - <> - - - - -
- -
-
- - - -
- -
- + + + +
+ +
+
+ + +
-