Skip to content

Commit ddb3651

Browse files
Dhaiwat10Dhaiwat10
authored
feat: 🎸 Add a Chakra UI template (#13)
You can now use a `--chakra` option to initialize a project using ChakraUI instead of Tailwind. ✅ Closes: #12
1 parent 8c22905 commit ddb3651

File tree

16 files changed

+5115
-15
lines changed

16 files changed

+5115
-15
lines changed

‎create-app.ts

Lines changed: 35 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,25 @@ import type { PackageManager } from './helpers/get-pkg-manager';
1414

1515
export class DownloadError extends Error {}
1616

17+
type CSSLibrary = 'tailwind' | 'chakra-ui';
18+
1719
export async function createApp({
1820
appPath,
1921
packageManager,
2022
typescript,
23+
cssLibrary = 'tailwind',
2124
}: {
2225
appPath: string;
2326
packageManager: PackageManager;
2427
typescript?: boolean;
28+
cssLibrary?: CSSLibrary;
2529
}): Promise<void> {
26-
const template = typescript ? 'typescript' : 'default';
30+
const template =
31+
cssLibrary === 'chakra-ui'
32+
? 'chakra'
33+
: typescript
34+
? 'typescript'
35+
: 'default';
2736

2837
const root = path.resolve(appPath);
2938

@@ -48,14 +57,6 @@ export async function createApp({
4857
const isOnline = !useYarn || (await getOnline());
4958
const originalDirectory = process.cwd();
5059

51-
console.log(`
52-
::::::::: :::::::::
53-
:+: :+: :+: :+:
54-
+:+ +:+ +:+ +:+
55-
+#+ +:+ +#+ +:+
56-
+#+ +#+ +#+ +#+
57-
#+# #+# #+# #+#
58-
######### ########## ######### `);
5960
console.log(`🚀 Setting up your new Web3 frontend in ${chalk.green(root)}.`);
6061
console.log();
6162

@@ -91,31 +92,50 @@ export async function createApp({
9192
* These flags will be passed to `install()`.
9293
*/
9394
const installFlags = { packageManager, isOnline };
95+
96+
/**
97+
* CSS library dependencies.
98+
*/
99+
const cssLibDependencies =
100+
cssLibrary === 'tailwind'
101+
? []
102+
: [
103+
'@chakra-ui/react',
104+
'@emotion/react@^11',
105+
'@emotion/styled@^11',
106+
'framer-motion@^6',
107+
];
108+
109+
/**
110+
* CSS library dev dependencies.
111+
*/
112+
const cssLibDevDependencies =
113+
cssLibrary === 'tailwind' ? ['autoprefixer', 'postcss', 'tailwindcss'] : [];
114+
94115
/**
95116
* Default dependencies.
96117
*/
97118
const dependencies = [
98-
'react@17.0.0',
99-
'react-dom@17.0.0',
119+
'react@^18',
120+
'react-dom@^18',
100121
'next',
101122
'[email protected]',
102123
'ethers',
103124
'@rainbow-me/[email protected]',
125+
...cssLibDependencies,
104126
];
105127
/**
106128
* Default devDependencies.
107129
*/
108130
const devDependencies = [
109131
'eslint',
110132
'eslint-config-next',
111-
'autoprefixer',
112-
'postcss',
113-
'tailwindcss',
133+
...cssLibDevDependencies,
114134
];
115135
/**
116136
* TypeScript projects will have type definitions and other devDependencies.
117137
*/
118-
if (typescript) {
138+
if (typescript || cssLibrary === 'chakra-ui') {
119139
devDependencies.push(
120140
'typescript',
121141
'@types/react',

‎index.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,12 @@ const program = new Commander.Command(packageJson.name)
2525
Initialize as a TypeScript project.
2626
`
2727
)
28+
.option(
29+
'--chakra, --chakra-ui',
30+
`
31+
Use Chakra UI instead of Tailwind.
32+
`
33+
)
2834
.option(
2935
'--use-npm',
3036
`
@@ -110,6 +116,7 @@ async function run(): Promise<void> {
110116
appPath: resolvedProjectPath,
111117
packageManager,
112118
typescript: program.typescript,
119+
cssLibrary: program.chakraUi ? 'chakra-ui' : 'tailwind',
113120
});
114121
} catch (reason) {
115122
if (!(reason instanceof DownloadError)) {
@@ -132,6 +139,7 @@ async function run(): Promise<void> {
132139
appPath: resolvedProjectPath,
133140
packageManager,
134141
typescript: program.typescript,
142+
cssLibrary: program.chakraUi ? 'chakra-ui' : 'tailwind',
135143
});
136144
}
137145
}

‎templates/chakra/.eslintrc.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎templates/chakra/README-template.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# 🚀 create-web3-frontend
2+
3+
This is a [Next.js](https://nextjs.org) project bootstrapped with [create-web3-frontend](https://github.com/dhaiwat10/create-web3-frontend).
4+
5+
## 🛠 Tech used
6+
7+
[Chakra UI](https://chakra-ui.com/), [Rainbowkit](https://rainbowkit.com) and [wagmi](https://wagmi.sh).
8+
9+
## ⚡️ Run the app
10+
11+
```bash
12+
yarn dev # your app will be served on http://localhost:3000
13+
```
14+
15+
## ⚙️ Customization
16+
17+
This starter kit has been setup to work on Polygon Mainnet. You can customize it to work on any other network by editing the `_app.tsx` file.
18+
19+
You can either grab a free RPC for any network of your choice from [Ankr](https://www.ankr.com/protocol/) or use any other RPC provider of your choice. More on that [here](https://www.rainbowkit.com/docs/installation).

‎templates/chakra/README.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# 🚀 create-web3-frontend
2+
3+
This is a [Next.js](https://nextjs.org) project bootstrapped with [create-web3-frontend](https://github.com/dhaiwat10/create-web3-frontend).
4+
5+
## 🛠 Tech used
6+
7+
[Chakra UI](https://chakra-ui.com/), [Rainbowkit](https://rainbowkit.com) and [wagmi](https://wagmi.sh).
8+
9+
## ⚡️ Run the app
10+
11+
```bash
12+
yarn dev # your app will be served on http://localhost:3000
13+
```
14+
15+
## ⚙️ Customization
16+
17+
This starter kit has been setup to work on Polygon Mainnet. You can customize it to work on any other network by editing the `_app.tsx` file.
18+
19+
You can either grab a free RPC for any network of your choice from [Ankr](https://www.ankr.com/protocol/) or use any other RPC provider of your choice. More on that [here](https://www.rainbowkit.com/docs/installation).

‎templates/chakra/gitignore

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
.pnpm-debug.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel

‎templates/chakra/next-env.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/basic-features/typescript for more information.

‎templates/chakra/next.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {
3+
reactStrictMode: true,
4+
}
5+
6+
module.exports = nextConfig

‎templates/chakra/package.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "next-chakra-rainbowkit-wagmi-starter",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "next build",
8+
"start": "next start",
9+
"lint": "next lint"
10+
},
11+
"dependencies": {
12+
"@chakra-ui/react": "^2.1.2",
13+
"@emotion/react": "^11",
14+
"@emotion/styled": "^11",
15+
"@rainbow-me/rainbowkit": "^0.2.2",
16+
"ethers": "^5.6.8",
17+
"framer-motion": "^6",
18+
"next": "12.1.6",
19+
"react": "18.1.0",
20+
"react-dom": "18.1.0",
21+
"wagmi": "^0.4.6"
22+
},
23+
"devDependencies": {
24+
"@types/react": "^18.0.14",
25+
"eslint": "8.16.0",
26+
"eslint-config-next": "12.1.6",
27+
"typescript": "^4.7.4"
28+
}
29+
}

‎templates/chakra/pages/_app.tsx

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import '../styles/globals.css';
2+
import '@rainbow-me/rainbowkit/styles.css';
3+
import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
4+
import { chain, configureChains, createClient, WagmiConfig } from 'wagmi';
5+
import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
6+
import { publicProvider } from 'wagmi/providers/public';
7+
import { ChakraProvider } from '@chakra-ui/react';
8+
9+
const { chains, provider } = configureChains(
10+
[chain.polygon], // you can add more chains here like chain.mainnet, chain.optimism etc.
11+
[
12+
jsonRpcProvider({
13+
rpc: () => {
14+
return {
15+
http: 'https://rpc.ankr.com/polygon', // go to https://www.ankr.com/protocol/ to get a free RPC for your network if you're not using Polygon
16+
};
17+
},
18+
}),
19+
publicProvider(),
20+
]
21+
);
22+
23+
const { connectors } = getDefaultWallets({
24+
appName: 'Next.js Chakra Rainbowkit Wagmi Starter',
25+
chains,
26+
});
27+
28+
const wagmiClient = createClient({
29+
autoConnect: false,
30+
connectors,
31+
provider,
32+
});
33+
34+
function MyApp({ Component, pageProps }) {
35+
return (
36+
<ChakraProvider>
37+
<WagmiConfig client={wagmiClient}>
38+
<RainbowKitProvider chains={chains}>
39+
<Component {...pageProps} />
40+
</RainbowKitProvider>
41+
</WagmiConfig>
42+
</ChakraProvider>
43+
);
44+
}
45+
46+
export default MyApp;

0 commit comments

Comments
 (0)