Merge pull request #405 from swiiny/feature/stylex

Feature/stylex

.github/CONTRIBUTING.md

@@ -2,27 +2,16 @@
 
 Thank you for considering contributing to this project! Your contributions are greatly appreciated. In this document, you'll find guidelines and tips for making the contribution process smooth and efficient.
 
-## Creating a new template
+## Creating a New Template
 
-If you want to contribute a new template, follow these steps:
+To efficiently contribute a new template to the project, you can utilize the automated script. Here's how to do it:
 
-1. Create a new folder in `./packages` with the name of your template.
+**Run the Template Creation Script**: Execute the script to automate the creation of the new template. Use the command `npm run new-template [template-name]`, replacing `[template-name]` with the desired name of your new template. This command performs the following tasks:
 
-2. Create the following files, taking inspiration from other templates (see `./packages/base` for an example):
+- Creates a new folder in `./packages` with the specified template name.
+- Copies necessary files from the example template (located in `./packages/example`) to the new template folder.
 
-   - `./packages/[template-name]/package.json`
-   - `./packages/[template-name]/pages/index.tsx`
-   - `./packages/[template-name]/tsconfig.json`
-   - `./packages/[template-name]/next.config.js`
-   - `./packages/[template-name]/next-env.d.ts`
-
-3. Open `./scripts/build.js` and add your template to the `templates` array (the name has to be the same as the template directory name in `./packages`).
-
-   - `const templates = ['base', 'mui', 'styled-components', 'new-template-name'];`
-
-4. Go to the project root directory `./` and run `npm run build` to copy the common files to the new template.
-
-5. Navigate to your template folder (`cd ./packages/[template-name]`) and start development with `npm run dev`.
+This automated process simplifies the initial setup, allowing you to focus on developing the new template. Remember to replace `[template-name]` with the actual name of your template when executing the commands.
 
 ## Contribution Guidelines
 
@@ -33,6 +22,7 @@ Please follow these guidelines to ensure a smooth contribution process:
 - Keep your pull requests focused and limited to a single feature or bug fix.
 - Provide a clear and concise description of your changes in the pull request.
 - If your changes are related to an existing issue, reference the issue number in your pull request.
+- **Important**: Ensure you have Husky pre-commit hooks set up by running `npm run husky`. This step is crucial to maintain code quality and consistency.
 
 ## Getting Help
 

.github/workflows/release.yml

@@ -0,0 +1,37 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  create-release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Semantic Release
+        uses: cycjimmy/semantic-release-action@v4
+        id: semantic
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: npm install @octokit/rest
+
+      - name: Rename release
+        run: node scripts/rename_release.js
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+
+package-lock.json

.releaserc.json

@@ -0,0 +1,29 @@
+{
+	"branches": ["main", { "name": "develop", "prerelease": true }],
+	"plugins": [
+		[
+			"@semantic-release/commit-analyzer",
+			{
+				"preset": "angular",
+				"releaseRules": [
+					{ "type": "feat", "section": "Features", "release": "minor" },
+					{ "type": "fix", "section": "Bug Fixes", "release": "patch" },
+					{ "type": "chore", "section": "Maintenance", "release": "patch" },
+					{ "type": "docs", "release": "patch" },
+					{ "type": "style", "release": "patch" },
+					{ "type": "refactor", "section": "♻️ Refactor", "release": "patch" },
+					{ "type": "perf", "release": "patch" },
+					{ "type": "test", "hidden": true, "release": "patch" }
+				],
+				"parserOpts": {
+					"noteKeywords": ["BREAKING CHANGE", "BREAKING CHANGES"]
+				}
+			}
+		],
+		"@semantic-release/release-notes-generator",
+		"@semantic-release/changelog",
+		"@semantic-release/npm",
+		"@semantic-release/git",
+		"@semantic-release/github"
+	]
+}

.vscode/settings.json

@@ -44,5 +44,6 @@
 	},
 	"[css]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	}
+	},
+	"cSpell.words": ["nextjs", "stylex", "stylexjs", "swiiny"]
 }

CHANGELOG.md

@@ -0,0 +1,14 @@
+# [1.6.0-develop.1](https://github.com/swiiny/create-nextjs-dapp/compare/v1.5.3...v1.6.0-develop.1) (2024-01-01)
+
+
+### Bug Fixes
+
+* fix portal component ts issue ([aae5c5d](https://github.com/swiiny/create-nextjs-dapp/commit/aae5c5d40eab00da041b63eafa6cd9b6c1a54926))
+* fix portal component ts issue ([3c2dfe5](https://github.com/swiiny/create-nextjs-dapp/commit/3c2dfe57c1be86433bcd6a8715ec79f7ce80f269))
+* fix releaserc file location ([4561ee2](https://github.com/swiiny/create-nextjs-dapp/commit/4561ee2802f5e1ec04cf86e408f48ce56755f271))
+* set package as private to avoid semantic-release auto deploy to npm ([864b830](https://github.com/swiiny/create-nextjs-dapp/commit/864b8305aae19cbd806451205675865c12894df9))
+
+
+### Features
+
+* add husky & add release automation ([fd23338](https://github.com/swiiny/create-nextjs-dapp/commit/fd233380a6d0428d5ae0e7a6fe24f4a701d64f88))

README.md

@@ -25,6 +25,7 @@ Here is the list of the available templates:
 - [Base](#base) (No UI kit)
 - [MUI](#mui)
 - [Styled Components](#styled-components)
+- [Stylex](#stylex)
 - [Tailwind](#tailwind)
 
 ## Quick start
@@ -54,6 +55,7 @@ Working configuration:
 - [base](#base)
 - [MUI](#mui)
 - [Styled Components](#styled-components)
+- [Stylex](#stylex)
 - [Tailwind](#tailwind)
 
 ### Base
@@ -81,6 +83,10 @@ There are already base functions to add responsive padding, margin, and frames t
 
 ---
 
+### Stylex
+
+The Stylex template leverages [Stylex](https://stylexjs.com/) for styling, blending the benefits of inline styles and CSS without their limitations. It provides a simple JavaScript syntax and compiler for defining component-scoped styles, avoiding specificity issues while supporting media queries. Stylex utilizes atomic CSS to minimize output size, ensuring scalability and maintainability of styles in large projects. Please refer to the [Stylex documentation](https://stylexjs.com/docs/learn/) for more information on how to use the library.
+
 ### Tailwind
 
 The Tailwind template is based on the [Tailwind CSS](https://tailwindcss.com/) framework. It is configured with the [Tailwind CSS](https://tailwindcss.com/docs/installation) library. This template utilizes the utility-first approach to styling, providing a highly customizable and efficient way to build your Dapp.

commitlint.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+	extends: ['@commitlint/config-conventional']
+};

common/components/common/Meta/Meta.tsx

@@ -0,0 +1,30 @@
+import React, { FC } from 'react';
+import Head from 'next/head';
+import { IMeta } from './Meta.type';
+
+// used to add title, description and other meta tags to the page
+const Meta: FC<IMeta> = ({ title, description, children }) => (
+	<Head>
+		<title>{title}</title>
+		<meta property='og:title' content={title} key='title' />
+		<meta name='description' content={description} />
+		<meta property='og:title' content={title} key='title' />
+		<meta property='og:description' content={description} />
+		<meta property='og:image' content='https://create-nextjs-d.app/thumbnail.png' />
+		<meta name='language' content='English' />
+		<meta name='robots' content='index, follow' />
+		<meta name='keywords' content={`Create-Nextjs-Dapp`} />
+
+		<meta name='twitter:card' content='summary' />
+		<meta name='twitter:site' content='@Swiiny_' />
+		<meta name='twitter:creator	' content='@Swiiny_' />
+		<meta name='twitter:title' content={title} />
+		<meta name='twitter:description' content={description} />
+		<meta name='twitter:image' content='https://create-nextjs-d.app/thumbnail.png' />
+		<meta name='twitter:image:alt' content='Create Nextjs Dapp twitter card' />
+
+		{children}
+	</Head>
+);
+
+export { Meta };

common/components/common/Meta/Meta.type.ts

@@ -0,0 +1,7 @@
+interface IMeta {
+	title: string;
+	description?: string;
+	children?: React.ReactNode;
+}
+
+export type { IMeta };

common/components/common/Meta/index.ts

@@ -0,0 +1 @@
+export { Meta as default } from './Meta';

common/components/common/Portal/Portal.tsx

@@ -0,0 +1,18 @@
+import { FC, PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { IPortal } from './Portal.type';
+
+// client only portal
+const Portal: FC<PropsWithChildren<IPortal>> = ({ children, selector }) => {
+	const ref = useRef<any | undefined>();
+	const [mounted, setMounted] = useState<boolean>(false);
+
+	useEffect(() => {
+		ref.current = document.querySelector(selector);
+		setMounted(true);
+	}, [selector]);
+
+	return mounted ? createPortal(children, ref.current) : null;
+};
+
+export { Portal };

common/components/common/Portal/Portal.type.ts

@@ -0,0 +1,5 @@
+interface IPortal {
+	selector: string;
+}
+
+export type { IPortal };

common/components/common/Portal/index.ts

@@ -0,0 +1 @@
+export { Portal as default } from './Portal';

package.json

@@ -1,15 +1,30 @@
 {
 	"name": "create-nextjs-dapp",
-	"version": "1.5.3",
-	"private": false,
+	"version": "1.6.0-develop.1",
+	"private": true,
 	"type": "module",
 	"scripts": {
 		"dev": "npm run dev:styled-components",
 		"dev:mui": "cd ./packages/mui && npm run dev",
 		"dev:base": "cd ./packages/base && npm run dev",
 		"dev:tailwind": "cd ./packages/tailwind && npm run dev",
+		"dev:stylex": "cd ./packages/stylex && npm run dev",
 		"dev:sc": "npm run dev:styled-components",
 		"dev:styled-components": "cd ./packages/styled-components && npm run dev",
-		"build": "node scripts/build.js"
+		"build": "node scripts/share_files.js && node scripts/build.js",
+		"share-files": "node scripts/share_files.js",
+		"new-template": "node scripts/new_template.js",
+		"husky": "husky install"
+	},
+	"dependencies": {
+		"chalk": "^5.3.0"
+	},
+	"devDependencies": {
+		"@commitlint/cli": "^17.8.1",
+		"@commitlint/config-conventional": "^17.8.0",
+		"@semantic-release/changelog": "^6.0.3",
+		"@semantic-release/github": "^9.2.6",
+		"husky": "^8.0.3",
+		"semantic-release": "^22.0.12"
 	}
 }

packages/base/components/common/Portal/Portal.tsx

@@ -1,9 +1,9 @@
-import { FC, useEffect, useRef, useState } from 'react';
+import { FC, PropsWithChildren, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { IPortal } from './Portal.type';
 
 // client only portal
-const Portal: FC<IPortal> = ({ children, selector }) => {
+const Portal: FC<PropsWithChildren<IPortal>> = ({ children, selector }) => {
 	const ref = useRef<any | undefined>();
 	const [mounted, setMounted] = useState<boolean>(false);
 

packages/base/components/common/Portal/Portal.type.ts

@@ -1,7 +1,4 @@
-import { ReactNode } from 'react';
-
 interface IPortal {
-	children: ReactNode;
 	selector: string;
 }
 

packages/base/components/default/Technologies/Technologies.module.scss

@@ -57,11 +57,6 @@
 }
 
 .link {
-	position: relative;
-
 	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
+	inset: 0;
 }

packages/base/components/pages/home/HomePage/HomePage.module.scss

@@ -5,7 +5,7 @@
 	flex-direction: column;
 	justify-content: space-evenly;
 
-	height: 100vh;
+	height: 100dvh;
 
 	padding-top: 100px;