From 939081bf089c74bd5167932abb1a27180b994570 Mon Sep 17 00:00:00 2001 From: takanome_dev Date: Thu, 5 Jan 2023 16:20:03 +0000 Subject: [PATCH 1/3] feat: update file structure --- README.md | 15 ++++--- apps/client/next.config.js | 6 +-- apps/client/package.json | 5 +-- .../src/components/atoms/Button/index.tsx | 36 +++++++++++++++++ .../Footer/index.tsx} | 0 .../Header/index.tsx} | 5 ++- apps/client/src/pages/index.tsx | 6 +-- packages/atoms/Button.tsx | 21 ---------- packages/atoms/index.tsx | 2 - packages/atoms/package.json | 22 ---------- packages/atoms/tsconfig.json | 5 --- packages/eslint-config-custom/eslint-next.js | 5 +++ pnpm-lock.yaml | 40 +------------------ 13 files changed, 60 insertions(+), 108 deletions(-) create mode 100644 apps/client/src/components/atoms/Button/index.tsx rename apps/client/src/components/{Footer.tsx => molecules/Footer/index.tsx} (100%) rename apps/client/src/components/{Header.tsx => molecules/Header/index.tsx} (81%) delete mode 100644 packages/atoms/Button.tsx delete mode 100644 packages/atoms/index.tsx delete mode 100644 packages/atoms/package.json delete mode 100644 packages/atoms/tsconfig.json diff --git a/README.md b/README.md index ff83db3..ed586a0 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ A community-driven platform for bloggers to improve their skills and connect with like-minded individuals -## :construction: Status :construction: +## :construction: Status :construction BlogHive is currently _early_ in the development cycle. This app is not yet functional but is being actively developed. Please "watch" the project and leave a star and help us build this platform. @@ -39,8 +39,12 @@ not yet functional but is being actively developed. Please "watch" the project a │ │ ├── README.md │ │ ├── src │ │ │ ├── components -│ │ │ │ ├── Footer.tsx -│ │ │ │ └── Header.tsx +│ │ │ │ ├── atoms +│ │ │ │ │ └─── ... +│ │ │ │ ├── molecules +│ │ │ │ │ └─── ... +│ │ │ │ └── organisms +│ │ │ │ └─── ... │ │ │ ├── pages │ │ │ │ ├── _app.tsx │ │ │ │ └── index.tsx @@ -69,11 +73,6 @@ not yet functional but is being actively developed. Please "watch" the project a ├── LICENSE ├── package.json ├── packages -│ ├── atoms -│ │ ├── Button.tsx -│ │ ├── index.tsx -│ │ ├── package.json -│ │ └── tsconfig.json │ ├── eslint-config-custom │ │ ├── eslint-next.js │ │ ├── eslint-server.js diff --git a/apps/client/next.config.js b/apps/client/next.config.js index 16964ea..da1bb77 100644 --- a/apps/client/next.config.js +++ b/apps/client/next.config.js @@ -1,5 +1,3 @@ -const withTM = require("next-transpile-modules")(["atoms"]); - -module.exports = withTM({ +module.exports = { reactStrictMode: true, -}); +}; diff --git a/apps/client/package.json b/apps/client/package.json index 5b27af7..f9a6838 100644 --- a/apps/client/package.json +++ b/apps/client/package.json @@ -12,10 +12,10 @@ "format": "prettier --write **/*.{js,ts,tsx,css,md,json,yml,yaml}" }, "dependencies": { + "clsx": "^1.2.1", "next": "13.1.1", "react": "18.2.0", - "react-dom": "18.2.0", - "atoms": "workspace:*" + "react-dom": "18.2.0" }, "devDependencies": { "@types/node": "^18.0.0", @@ -23,7 +23,6 @@ "autoprefixer": "^10.4.13", "eslint": "8.30.0", "eslint-config-custom": "workspace:*", - "next-transpile-modules": "10.0.0", "postcss": "^8.4.20", "prettier": "^2.7.1", "prettier-config-custom": "workspace:*", diff --git a/apps/client/src/components/atoms/Button/index.tsx b/apps/client/src/components/atoms/Button/index.tsx new file mode 100644 index 0000000..950358a --- /dev/null +++ b/apps/client/src/components/atoms/Button/index.tsx @@ -0,0 +1,36 @@ +import clsx from 'clsx'; +import * as React from 'react'; + +interface ButtonProps extends React.HTMLAttributes { + children: React.ReactNode; + color?: 'primary' | 'default' | 'outline' | 'link'; + type?: 'button' | 'submit'; +} + +const style = { + primary: 'bg-blue-500 border-blue-500 text-white hover:bg-blue-600 focus:ring-blue-200', + default: 'bg-slate-100 border-slate-300 text-slate-900 hover:bg-slate-100 focus:ring-slate-200', + outline: 'bg-slate-100 border-slate-500 text-slate-900 hover:bg-blue-100 focus:ring-blue-200', + link: 'text-blue-600 hover:bg-blue-100', +}; + +export const Button: React.FC = ({ + children, + color = 'default', + type = 'button', + className, + ...props +}) => ( + +); \ No newline at end of file diff --git a/apps/client/src/components/Footer.tsx b/apps/client/src/components/molecules/Footer/index.tsx similarity index 100% rename from apps/client/src/components/Footer.tsx rename to apps/client/src/components/molecules/Footer/index.tsx diff --git a/apps/client/src/components/Header.tsx b/apps/client/src/components/molecules/Header/index.tsx similarity index 81% rename from apps/client/src/components/Header.tsx rename to apps/client/src/components/molecules/Header/index.tsx index 2e74521..06328da 100644 --- a/apps/client/src/components/Header.tsx +++ b/apps/client/src/components/molecules/Header/index.tsx @@ -1,8 +1,9 @@ -import { Button } from 'atoms'; import Image from 'next/image'; import Link from 'next/link'; import React from 'react'; +import { Button } from '@/components/atoms/Button'; + import logoTextBlack from '@/public/logo-text-black.png'; const Header = () => ( @@ -10,7 +11,7 @@ const Header = () => ( Logo - + ); diff --git a/apps/client/src/pages/index.tsx b/apps/client/src/pages/index.tsx index 026a8d6..8d34556 100644 --- a/apps/client/src/pages/index.tsx +++ b/apps/client/src/pages/index.tsx @@ -1,9 +1,9 @@ import Image from 'next/image'; -import { Button } from 'atoms'; -import Header from '@/components/Header'; -import Footer from '@/components/Footer'; +import Header from '@/components/molecules/Header'; +import Footer from '@/components/molecules/Footer'; import communityImg from '@/public/community.png'; +import { Button } from '@/components/atoms/Button'; export default function IndexPage() { return ( diff --git a/packages/atoms/Button.tsx b/packages/atoms/Button.tsx deleted file mode 100644 index 171d4b3..0000000 --- a/packages/atoms/Button.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from "react"; -import clsx from "clsx"; - -interface ButtonProps extends React.HTMLAttributes { - children: React.ReactNode; - color?: "primary" | "default" | "outline" | "link"; -} - -const style = { - primary: "bg-blue-500 border-blue-500 hover:bg-blue-600", - default: "bg-slate-100 border-slate-300 text-slate-900 hover:bg-slate-100", - outline: "bg-slate-100 border-slate-500 text-slate-900 hover:bg-blue-100", - link: "text-blue-600 hover:bg-blue-100" -}; - -export const Button: React.FC = (props) => { - return ; -}; diff --git a/packages/atoms/index.tsx b/packages/atoms/index.tsx deleted file mode 100644 index 916730e..0000000 --- a/packages/atoms/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import * as React from "react"; -export * from "./Button"; diff --git a/packages/atoms/package.json b/packages/atoms/package.json deleted file mode 100644 index a222845..0000000 --- a/packages/atoms/package.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "name": "atoms", - "version": "0.0.0", - "main": "./index.tsx", - "types": "./index.tsx", - "license": "MIT", - "scripts": { - "lint": "eslint *.ts*" - }, - "devDependencies": { - "@types/react": "^18.0.0", - "@types/react-dom": "^18.0.0", - "eslint": "^8.0.0", - "eslint-config-custom": "workspace:*", - "react": "^18.0.0", - "tsconfig": "workspace:*", - "typescript": "^4.5.2" - }, - "dependencies": { - "clsx": "^1.2.1" - } -} diff --git a/packages/atoms/tsconfig.json b/packages/atoms/tsconfig.json deleted file mode 100644 index 945987d..0000000 --- a/packages/atoms/tsconfig.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": "tsconfig/nextjs.json", - "include": ["."], - "exclude": ["dist", "build", "node_modules"] -} diff --git a/packages/eslint-config-custom/eslint-next.js b/packages/eslint-config-custom/eslint-next.js index 18a462d..abb7a33 100644 --- a/packages/eslint-config-custom/eslint-next.js +++ b/packages/eslint-config-custom/eslint-next.js @@ -81,6 +81,11 @@ module.exports = { "prefer-spread": "error", "prefer-template": "error", "quotes": ["error", "single"], + "react/button-has-type": [true, { + "button": true, + "submit": true, + "reset": false + }], "react/function-component-definition": "off", "react/prop-types": "off", "react/jsx-props-no-spreading": "off", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3d0b215..75202c8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,12 +32,11 @@ importers: specifiers: '@types/node': ^18.0.0 '@types/react': 18.0.26 - atoms: workspace:* autoprefixer: ^10.4.13 + clsx: ^1.2.1 eslint: 8.30.0 eslint-config-custom: workspace:* next: 13.1.1 - next-transpile-modules: 10.0.0 postcss: ^8.4.20 prettier: ^2.7.1 prettier-config-custom: workspace:* @@ -48,7 +47,7 @@ importers: tsconfig: workspace:* typescript: ^4.5.3 dependencies: - atoms: link:../../packages/atoms + clsx: 1.2.1 next: 13.1.1_biqbaboplfbrettd7655fr4n2y react: 18.2.0 react-dom: 18.2.0_react@18.2.0 @@ -58,7 +57,6 @@ importers: autoprefixer: 10.4.13_postcss@8.4.20 eslint: 8.30.0 eslint-config-custom: link:../../packages/eslint-config-custom - next-transpile-modules: 10.0.0 postcss: 8.4.20 prettier: 2.8.1 prettier-config-custom: link:../../packages/prettier-config-custom @@ -130,27 +128,6 @@ importers: tsconfig-paths: 4.1.1 typescript: 4.7.4 - packages/atoms: - specifiers: - '@types/react': ^18.0.0 - '@types/react-dom': ^18.0.0 - clsx: ^1.2.1 - eslint: ^8.0.0 - eslint-config-custom: workspace:* - react: ^18.0.0 - tsconfig: workspace:* - typescript: ^4.5.2 - dependencies: - clsx: 1.2.1 - devDependencies: - '@types/react': 18.0.26 - '@types/react-dom': 18.0.9 - eslint: 8.30.0 - eslint-config-custom: link:../eslint-config-custom - react: 18.2.0 - tsconfig: link:../tsconfig - typescript: 4.8.4 - packages/eslint-config-custom: specifiers: '@typescript-eslint/eslint-plugin': ^5.27.1 @@ -1676,12 +1653,6 @@ packages: resolution: {integrity: sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==} dev: true - /@types/react-dom/18.0.9: - resolution: {integrity: sha512-qnVvHxASt/H7i+XG1U1xMiY5t+IHcPGUK7TDMDzom08xa7e86eCeKOiLZezwCKVxJn6NEiiy2ekgX8aQssjIKg==} - dependencies: - '@types/react': 18.0.26 - dev: true - /@types/react/18.0.26: resolution: {integrity: sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==} dependencies: @@ -5663,13 +5634,6 @@ packages: resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==} dev: true - /next-transpile-modules/10.0.0: - resolution: {integrity: sha512-FyeJ++Lm2Fq31gbThiRCrJlYpIY9QaI7A3TjuhQLzOix8ChQrvn5ny4MhfIthS5cy6+uK1AhDRvxVdW17y3Xdw==} - deprecated: All features of next-transpile-modules are now natively built-in Next.js 13.1. Please use Next's transpilePackages option :) - dependencies: - enhanced-resolve: 5.10.0 - dev: true - /next/13.1.1_biqbaboplfbrettd7655fr4n2y: resolution: {integrity: sha512-R5eBAaIa3X7LJeYvv1bMdGnAVF4fVToEjim7MkflceFPuANY3YyvFxXee/A+acrSYwYPvOvf7f6v/BM/48ea5w==} engines: {node: '>=14.6.0'} From f5bc76613a40c0f7b75ac4ba4c03fb76e8070710 Mon Sep 17 00:00:00 2001 From: takanome_dev Date: Thu, 5 Jan 2023 16:22:31 +0000 Subject: [PATCH 2/3] docs: update readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ed586a0..553e0ec 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ A community-driven platform for bloggers to improve their skills and connect with like-minded individuals -## :construction: Status :construction +## :construction: Status BlogHive is currently _early_ in the development cycle. This app is not yet functional but is being actively developed. Please "watch" the project and leave a star and help us build this platform. From e0d91eec50c9190029796184d0801f80ce7f2bfc Mon Sep 17 00:00:00 2001 From: takanome_dev Date: Tue, 7 Feb 2023 22:25:41 +0000 Subject: [PATCH 3/3] refactor: update file structures --- apps/client/package.json | 4 +- .../src/components/atoms/Button/index.tsx | 36 ------------ .../Footer/index.tsx => footer.tsx} | 0 apps/client/src/components/header.tsx | 20 +++++++ .../src/components/molecules/Header/index.tsx | 18 ------ apps/client/src/components/ui/button.tsx | 55 +++++++++++++++++++ apps/client/src/components/ui/label.tsx | 19 +++++++ apps/client/src/lib/utils.ts | 6 ++ apps/client/src/pages/index.tsx | 32 +++++------ apps/client/tailwind.config.js | 8 --- apps/client/tsconfig.json | 4 +- pnpm-lock.yaml | 19 +++++++ 12 files changed, 139 insertions(+), 82 deletions(-) delete mode 100644 apps/client/src/components/atoms/Button/index.tsx rename apps/client/src/components/{molecules/Footer/index.tsx => footer.tsx} (100%) create mode 100644 apps/client/src/components/header.tsx delete mode 100644 apps/client/src/components/molecules/Header/index.tsx create mode 100644 apps/client/src/components/ui/button.tsx create mode 100644 apps/client/src/components/ui/label.tsx create mode 100644 apps/client/src/lib/utils.ts diff --git a/apps/client/package.json b/apps/client/package.json index f9a6838..e74dd0f 100644 --- a/apps/client/package.json +++ b/apps/client/package.json @@ -12,10 +12,12 @@ "format": "prettier --write **/*.{js,ts,tsx,css,md,json,yml,yaml}" }, "dependencies": { + "class-variance-authority": "^0.4.0", "clsx": "^1.2.1", "next": "13.1.1", "react": "18.2.0", - "react-dom": "18.2.0" + "react-dom": "18.2.0", + "tailwind-merge": "^1.9.1" }, "devDependencies": { "@types/node": "^18.0.0", diff --git a/apps/client/src/components/atoms/Button/index.tsx b/apps/client/src/components/atoms/Button/index.tsx deleted file mode 100644 index 950358a..0000000 --- a/apps/client/src/components/atoms/Button/index.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import clsx from 'clsx'; -import * as React from 'react'; - -interface ButtonProps extends React.HTMLAttributes { - children: React.ReactNode; - color?: 'primary' | 'default' | 'outline' | 'link'; - type?: 'button' | 'submit'; -} - -const style = { - primary: 'bg-blue-500 border-blue-500 text-white hover:bg-blue-600 focus:ring-blue-200', - default: 'bg-slate-100 border-slate-300 text-slate-900 hover:bg-slate-100 focus:ring-slate-200', - outline: 'bg-slate-100 border-slate-500 text-slate-900 hover:bg-blue-100 focus:ring-blue-200', - link: 'text-blue-600 hover:bg-blue-100', -}; - -export const Button: React.FC = ({ - children, - color = 'default', - type = 'button', - className, - ...props -}) => ( - -); \ No newline at end of file diff --git a/apps/client/src/components/molecules/Footer/index.tsx b/apps/client/src/components/footer.tsx similarity index 100% rename from apps/client/src/components/molecules/Footer/index.tsx rename to apps/client/src/components/footer.tsx diff --git a/apps/client/src/components/header.tsx b/apps/client/src/components/header.tsx new file mode 100644 index 0000000..6e05ab2 --- /dev/null +++ b/apps/client/src/components/header.tsx @@ -0,0 +1,20 @@ +import Image from 'next/image'; +import Link from 'next/link'; +import React from 'react'; + +import { Button } from '@/components/ui/button'; + +import logoTextBlack from '@/public/logo-text-black.png'; + +const Header = () => ( +
+
+ + Logo + + +
+
+); + +export default Header; diff --git a/apps/client/src/components/molecules/Header/index.tsx b/apps/client/src/components/molecules/Header/index.tsx deleted file mode 100644 index 5463c1a..0000000 --- a/apps/client/src/components/molecules/Header/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import Image from 'next/image'; -import Link from 'next/link'; -import React from 'react'; - -import { Button } from '@/components/atoms/Button'; - -import logoTextBlack from '@/public/logo-text-black.png'; - -const Header = () => ( -
- - Logo - - -
-); - -export default Header; diff --git a/apps/client/src/components/ui/button.tsx b/apps/client/src/components/ui/button.tsx new file mode 100644 index 0000000..e0860fa --- /dev/null +++ b/apps/client/src/components/ui/button.tsx @@ -0,0 +1,55 @@ +import * as React from "react" +import { VariantProps, cva } from "class-variance-authority" + +import { cn } from '@/lib/utils' + +const buttonVariants = cva( + "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-800", + { + variants: { + variant: { + default: + "bg-slate-900 text-white hover:bg-slate-700 dark:bg-slate-50 dark:text-slate-900", + primary: + "bg-blue-500 text-white hover:bg-blue-600 dark:bg-slate-50 dark:text-slate-900", + destructive: + "bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600", + outline: + "bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-100", + subtle: + "bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-100", + ghost: + "bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent", + link: "bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent", + }, + size: { + default: "h-10 py-2 px-4", + sm: "h-9 px-2 rounded-md", + lg: "h-11 px-8 rounded-md", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } +) + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps {} + +const Button = React.forwardRef( + ({ className, variant, size, ...props }, ref) => { + return ( +