From c715ef3abff1c069790657b251d9c1f9f231949a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rados=C5=82aw=20Napora?= Date: Wed, 17 Jan 2024 23:22:58 +0100 Subject: [PATCH 1/4] feat(tailwind.config): update tailwind theme --- tailwind.config.ts | 63 +++++++++++++++++++++++++++++++++++++++------- 1 file changed, 54 insertions(+), 9 deletions(-) diff --git a/tailwind.config.ts b/tailwind.config.ts index 13d21fa..8b245ad 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,17 +1,62 @@ import type { Config } from 'tailwindcss'; +import { fontFamily } from 'tailwindcss/defaultTheme'; const config: Config = { - content: [ - './src/pages/**/*.{js,ts,jsx,tsx,mdx}', - './src/components/**/*.{js,ts,jsx,tsx,mdx}', - './src/app/**/*.{js,ts,jsx,tsx,mdx}', - ], + content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], theme: { + container: { + center: true, + }, extend: { - backgroundImage: { - 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', - 'gradient-conic': - 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', + colors: { + grey: { + '200': 'oklch(97.91% 0 0)', // #f8f8f8 - extended/grey/lightest + '300': 'oklch(93.13% 0.001 286.37)', // #e8e8e9 - extended/grey/lighter + '500': 'oklch(78.9% 0.004 271.36)', // #b9babd - text/grey-base + '600': 'oklch(64% 0.008 268.51)', // #8a8c91 - text/grey-dark + }, + neutral: { + '300': 'oklch(83.57% 0.003 264.54)', // #c8c9cb - core/neutral/neutral-300 + '700': 'oklch(42.59% 0.013 280.15)', // #4d4e56 - core/neutral/neutral-700 + '800': 'oklch(36.17% 0.012 279.31)', // #3C3D44 - core/neutral/neutral-800 + '950': 'oklch(29.09% 0.013 279.13)', // #2A2B32 - text/text-primary + }, + blue: { + '50': 'oklch(97.45% 0.008 253.85)', // #f3f7fc - core/blue/blue-0 + '400': 'oklch(64.32% 0.19 261.38)', // #4687ff - primary/blue-base + '500': 'oklch(67.55% 0.162 267.48)', // 6b90fa - core/blue/blue-500 + '600': 'oklch(56.44% 0.24 268.30)', // 3E5FFF - core/blue/blue-600 + '700': 'oklch(44.97% 0.22 267.56)', // #243dcc - core/blue/blue-700 + }, + red: { + '500': 'oklch(66.43% 0.20 17.51)', // #f64f64 - primary/red/base + '600': 'oklch(58.56% 0.22 20.59)', // #e21c3e + '700': 'oklch(51.43% 0.20 20.13)', // #bf1133 + }, + + black: 'oklch(35.51% 0.013 261.73)', // #383c43 - text/grey-darkest + }, + fontFamily: { + sans: ['var(--font-inter)', ...fontFamily.sans], + }, + fontSize: { + xs: ['0.75rem', '1.125rem'], + sm: ['0.875rem', '1.25rem'], + base: ['1rem', '1.5rem'], + md: ['1.25rem', '1.75rem'], + lg: ['1.75rem', '2.5rem'], + xl: ['2rem', '2.75rem'], + '2xl': ['3rem', '4rem'], + }, + letterSpacing: { + tightest: '-0.96px', + tighter: '-0.64px', + tight: '-0.56px', + thin: '-0.4px', + }, + boxShadow: { + sm: '0px 8px 14px 0px rgba(21, 24, 35, 0.15), 0px 0px 0px 0px rgba(21, 24, 35, 0.07), 0px 15px 20px 0px rgba(21, 24, 35, 0.00)', + base: '0px 15px 20px 0px rgba(55, 59, 66, 0.12), 0px 0px 0px 0px rgba(55, 59, 66, 0.07)', }, }, }, From f1be73fac7dee6fc3a215ca840b399c2b4741115 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rados=C5=82aw=20Napora?= Date: Wed, 17 Jan 2024 23:23:17 +0100 Subject: [PATCH 2/4] feat(dependencies): add class-variance-authority, clsx, and tailwind-merge packages --- package-lock.json | 48 +++++++++++++++++++++++++++++++++++++++++++---- package.json | 5 ++++- 2 files changed, 48 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0ca0d60..6971ef5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,9 +10,12 @@ "hasInstallScript": true, "license": "MIT", "dependencies": { + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.0", "next": "14.0.4", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "tailwind-merge": "^2.2.0" }, "devDependencies": { "@commitlint/cli": "^18.4.4", @@ -243,7 +246,6 @@ "version": "7.23.8", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz", "integrity": "sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==", - "dev": true, "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -1807,6 +1809,25 @@ "node": ">= 6" } }, + "node_modules/class-variance-authority": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz", + "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==", + "dependencies": { + "clsx": "2.0.0" + }, + "funding": { + "url": "https://joebell.co.uk" + } + }, + "node_modules/class-variance-authority/node_modules/clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/cli-cursor": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz", @@ -1944,6 +1965,14 @@ "url": "https://github.com/chalk/wrap-ansi?sponsor=1" } }, + "node_modules/clsx": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", + "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -5883,8 +5912,7 @@ "node_modules/regenerator-runtime": { "version": "0.14.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", - "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", - "dev": true + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" }, "node_modules/regexp.prototype.flags": { "version": "1.5.1", @@ -6650,6 +6678,18 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/tailwind-merge": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.2.0.tgz", + "integrity": "sha512-SqqhhaL0T06SW59+JVNfAqKdqLs0497esifRrZ7jOaefP3o64fdFNDMrAQWZFMxTLJPiHVjRLUywT8uFz1xNWQ==", + "dependencies": { + "@babel/runtime": "^7.23.5" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz", diff --git a/package.json b/package.json index b363408..b725f5a 100644 --- a/package.json +++ b/package.json @@ -15,9 +15,12 @@ "postinstall": "husky install" }, "dependencies": { + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.0", "next": "14.0.4", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "tailwind-merge": "^2.2.0" }, "devDependencies": { "@commitlint/cli": "^18.4.4", From 0286e1936877100fd240ed331bd66a43ce5a5729 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rados=C5=82aw=20Napora?= Date: Wed, 17 Jan 2024 23:25:36 +0100 Subject: [PATCH 3/4] feat(utils): add cn function for merging class names and corresponding tests --- src/utils/cn.test.ts | 18 ++++++++++++++++++ src/utils/cn.ts | 4 ++++ 2 files changed, 22 insertions(+) create mode 100644 src/utils/cn.test.ts create mode 100644 src/utils/cn.ts diff --git a/src/utils/cn.test.ts b/src/utils/cn.test.ts new file mode 100644 index 0000000..914c2dc --- /dev/null +++ b/src/utils/cn.test.ts @@ -0,0 +1,18 @@ +import { cn } from './cn'; + +describe('cn', () => { + it('should return a string with merged class names', () => { + const result = cn('class1', 'class2', 'class3'); + expect(result).toBe('class1 class2 class3'); + }); + + it('should handle empty inputs', () => { + const result = cn(); + expect(result).toBe(''); + }); + + it('should handle falsy inputs', () => { + const result = cn('class1', null, undefined, false, 0); + expect(result).toBe('class1'); + }); +}); diff --git a/src/utils/cn.ts b/src/utils/cn.ts new file mode 100644 index 0000000..6c2f036 --- /dev/null +++ b/src/utils/cn.ts @@ -0,0 +1,4 @@ +import { clsx, type ClassValue } from 'clsx'; +import { twMerge } from 'tailwind-merge'; + +export const cn = (...inputs: ClassValue[]) => twMerge(clsx(...inputs)); From b0d537f019a06bf1ab37886872301753d26487b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rados=C5=82aw=20Napora?= Date: Wed, 17 Jan 2024 23:27:24 +0100 Subject: [PATCH 4/4] feat(.vscode): add recommended extensions and settings configuration --- .vscode/extensions.json | 10 ++++++++++ .vscode/settings.json | 7 +++++++ 2 files changed, 17 insertions(+) create mode 100644 .vscode/extensions.json create mode 100644 .vscode/settings.json diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..7676390 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,10 @@ +{ + "recommendations": [ + "mikestead.dotenv", + "dbaeumer.vscode-eslint", + "github.vscode-github-actions", + "esbenp.prettier-vscode", + "snyk-security.snyk-vulnerability-scanner", + "bradlc.vscode-tailwindcss", + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..2fd86a5 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "editor.wordWrap": "on", + "tailwindCSS.experimental.classRegex": [ + ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"], + ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"] + ], +} \ No newline at end of file