diff --git a/.husky/commit-msg b/.husky/commit-msg index e8b444e5..237eb99b 100755 --- a/.husky/commit-msg +++ b/.husky/commit-msg @@ -4,5 +4,8 @@ # run directly, without docker support # pnpm commitlint --edit "${1}" -# through docker-compose -docker-compose exec -T -e FORCE_COLOR=1 app pnpm commitlint --edit "${1}" +# through docker container +# docker-compose exec -T -e FORCE_COLOR=1 app pnpm commitlint --edit "${1}" + +# with npx +npx commitlint --edit "${1}" diff --git a/Makefile b/Makefile index 0f889ee2..d3a21b25 100644 --- a/Makefile +++ b/Makefile @@ -28,7 +28,7 @@ BUILDER ?= $(BUILDER_PARAMS) $(SUPPORT_IMAGE) # Shorthand envsubst command, executed through build-deps ENVSUBST ?= $(BUILDER) envsubst -APP_RUNNER ?= $(DOCKER_COMPOSE) run --rm --no-deps app +APP_RUNNER ?= $(DOCKER_COMPOSE) run --rm --no-deps -e FORCE_COLOR=1 app NPM_BIN ?= /bin/pnpm NPM_RUNNER ?= $(APP_RUNNER) $(NPM_BIN) NPM_COMPOSE_RUNNER ?= $(DOCKER_COMPOSE) exec -T -e FORCE_COLOR=1 app $(NPM_BIN) run @@ -165,16 +165,52 @@ pull: ## Pull latest docker image from docker hub for app container $(DOCKER_COMPOSE) pull app .PHONY: pull +docs-up: ## Spin up docs container + $(DOCKER_COMPOSE) up -d docs +.PHONY: docs-up + +docs-down: ## Stop and remove docs container + $(DOCKER_COMPOSE) down docs +.PHONY: docs-down + +docs-restart: ## Restart docs container + $(DOCKER_COMPOSE) restart docs +.PHONY: docs-restart + +web-up: ## Spin up app container + $(DOCKER_COMPOSE) up -d app +.PHONY: web-up + +web-down: ## Stop and remove app container + $(DOCKER_COMPOSE) down app +.PHONY: web-down + +web-restart: ## Restart app container + $(DOCKER_COMPOSE) restart app +.PHONY: web-restart + +storybook-up: ## Spin up storybook container + $(DOCKER_COMPOSE) up -d storybook +.PHONY: storybook-up + +storybook-down: ## Stop and remove storybook container + $(DOCKER_COMPOSE) down storybook +.PHONY: storybook-down + +storybook-restart: ## Restart storybook container + $(DOCKER_COMPOSE) restart storybook +.PHONE: storybook-restart + # Testing and Code Quality # ------------------------------------------------------------------------------------ lint: ## Run lint task to fix issues # $(NPM_RUNNER) lint - $(NPM_COMPOSE_RUNNER) lint:fix + $(NPM_RUNNER) lint:fix .PHONY: lint lint-staged: ## Lint staged files - $(NPM_COMPOSE_RUNNER) lint:staged + $(NPM_RUNNER) lint:staged .PHONY: lint-staged lint-commits: ## Run commitlint to check commit message @@ -182,27 +218,27 @@ lint-commits: ## Run commitlint to check commit message .PHONY: lint-commits lint-md: ## Lint markdown files - $(NPM_COMPOSE_RUNNER) lint:md + $(NPM_RUNNER) lint:md .PHONY: lint-md lint-dist: - $(NPM_COMPOSE_RUNNER) lint:dist + $(NPM_RUNNER) lint:dist .PHONY: lint-dist lint-html: ## Lint html files - $(NPM_COMPOSE_RUNNER) lint:html + $(NPM_RUNNER) lint:html .PHONY: lint-html lint-css: ## Lint css files - $(NPM_COMPOSE_RUNNER) lint:css + $(NPM_RUNNER) lint:css .PHONY: lint-css lint-secrets: ## Check if there are any missed secret credentials in code - $(NPM_COMPOSE_RUNNER) lint:secrets + $(NPM_RUNNER) lint:secrets .PHONY: lint-secrets -lint-browsers: ## Check if there are any missed secret credentials in code - $(NPM_COMPOSE_RUNNER) lint:browsers +lint-browsers: ## Lint browserslist + $(NPM_RUNNER) lint:browsers .PHONY: lint-browsers lint-yaml: ## Lints yaml files inside project @@ -214,15 +250,15 @@ lint-actions: ## Lint github actions using actionlint .PHONY: lint-actions test: ## Run unit tests - $(NPM_COMPOSE_RUNNER) test:unit + $(NPM_RUNNER) test:unit .PHONY: test format: ## Run prettier formatting - $(NPM_COMPOSE_RUNNER) format + $(NPM_RUNNER) format .PHONY: format sort: ## Sort package.json across project - $(NPM_COMPOSE_RUNNER) lint:package-json + $(NPM_RUNNER) lint:package-json .PHONY: sort analyze: ## Run bundle-analyzer @@ -236,19 +272,19 @@ build: ## Build all apps and packages inside monorepo $(NPM_RUNNER) build .PHONY: build -build-web: +build-web: ## Build web app $(NPM_RUNNER) build:web .PHONY: build-web -build-docs: +build-docs: ## Build docs app $(NPM_RUNNER) build:docs .PHONY: build-docs -build-storybook: +build-storybook: ## Build storybook app $(NPM_RUNNER) build:storybook .PHONY: build-storybook -build-ui: +build-ui: ## Build ui package $(NPM_RUNNER) build:ui .PHONY: build-ui @@ -259,7 +295,7 @@ cs: ## Run changeset to generate changelog npx changeset .PHONY: cs -cs-version: +cs-version: ## Bump version of packages npx changeset version .PHONY: version diff --git a/apps/docs/package.json b/apps/docs/package.json index 7776a870..08cac833 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -21,7 +21,7 @@ "react-dom": "18.2.0" }, "devDependencies": { - "@types/node": "18.14.2", + "@types/node": "18.14.4", "@types/react": "18.0.28", "@types/react-dom": "18.0.11", "@wayofdev/eslint-config-bases": "2.0.4", diff --git a/apps/storybook/.storybook/main.ts b/apps/storybook/.storybook/main.ts index b612cc53..c1558574 100644 --- a/apps/storybook/.storybook/main.ts +++ b/apps/storybook/.storybook/main.ts @@ -5,6 +5,7 @@ const config: StorybookConfig = { addons: [ '@storybook/addon-links', '@storybook/addon-essentials', + '@storybook/addon-viewport', '@storybook/addon-interactions', { name: '@storybook/addon-postcss', diff --git a/apps/storybook/.storybook/preview.ts b/apps/storybook/.storybook/preview.ts index ce5bf5a7..47ff22b5 100644 --- a/apps/storybook/.storybook/preview.ts +++ b/apps/storybook/.storybook/preview.ts @@ -1,4 +1,5 @@ import 'tailwindcss/tailwind.css' +import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport' export const parameters = { backgrounds: { @@ -11,4 +12,7 @@ export const parameters = { date: /Date$/, }, }, + viewport: { + viewports: INITIAL_VIEWPORTS, + }, } diff --git a/apps/storybook/package.json b/apps/storybook/package.json index 14d675be..d92ce7a8 100644 --- a/apps/storybook/package.json +++ b/apps/storybook/package.json @@ -17,35 +17,35 @@ "react-dom": "^18.2.0" }, "devDependencies": { - "@storybook/cli": "^7.0.0-beta.55", "@storybook/addon-essentials": "7.0.0-beta.59", "@storybook/addon-interactions": "7.0.0-beta.59", "@storybook/addon-links": "7.0.0-beta.59", "@storybook/addon-postcss": "2.0.0", + "@storybook/addon-viewport": "^7.0.0-beta.59", "@storybook/blocks": "7.0.0-beta.59", + "@storybook/cli": "^7.0.0-beta.59", "@storybook/react": "7.0.0-beta.59", "@storybook/react-vite": "7.0.0-beta.59", "@storybook/testing-library": "0.0.14-next.1", + "@tailwindcss/aspect-ratio": "^0.4.2", + "@tailwindcss/forms": "^0.5.3", "@types/react": "18.0.28", "@types/react-dom": "18.0.11", "@vitejs/plugin-react-swc": "3.2.0", "@wayofdev/eslint-config-bases": "2.0.4", "@wayofdev/postcss-config": "2.0.2", + "autoprefixer": "^10.4.13", "eslint": "8.35.0", "postcss": "8.4.21", - "prop-types": "15.8.1", - "storybook": "7.0.0-beta.59", - "tailwindcss": "3.2.7", - "typescript": "4.9.5", - "vite": "4.1.4", - "autoprefixer": "^10.4.13", "postcss-100vh-fix": "^1.0.2", "postcss-cli": "^10.1.0", "postcss-flexbugs-fixes": "^5.0.2", "postcss-normalize": "^10.0.1", "postcss-preset-env": "^8.0.1", "postcss-reporter": "^7.0.5", - "@tailwindcss/aspect-ratio": "^0.4.2", - "@tailwindcss/forms": "^0.5.3" + "storybook": "7.0.0-beta.59", + "tailwindcss": "3.2.7", + "typescript": "4.9.5", + "vite": "4.1.4" } } diff --git a/apps/storybook/src/stories/Banner.stories.tsx b/apps/storybook/src/stories/Banner.stories.tsx new file mode 100644 index 00000000..bade6b73 --- /dev/null +++ b/apps/storybook/src/stories/Banner.stories.tsx @@ -0,0 +1,22 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { Banner, type BannerProps } from '@wayofdev/ui/src/base/banner/Banner' + +const meta = { + title: 'Example/Banner', + component: Banner, + // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page + tags: ['autodocs'], + parameters: { + // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout + layout: 'fullscreen', + }, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + message: "Big news! We're excited to announce a brand new product.", + }, +} diff --git a/apps/storybook/tailwind.config.js b/apps/storybook/tailwind.config.js index d7ac74ea..661b62e6 100644 --- a/apps/storybook/tailwind.config.js +++ b/apps/storybook/tailwind.config.js @@ -19,10 +19,8 @@ const tailwindV3Colors = Object.entries(Object.getOwnPropertyDescriptors(tailwin return acc }, {}) -const path = require('path') - module.exports = { - content: ['./src/**/*.(js|jsx|ts|tsx)'], + content: ['./src/**/*.(js|jsx|ts|tsx)', './node_modules/@wayofdev/ui/src/**/*.(js|jsx|ts|tsx)'], theme: { screens: { ...defaultTheme.screens, diff --git a/apps/web/package.json b/apps/web/package.json index b7ddd842..258fda0f 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -22,28 +22,28 @@ "@heroicons/react": "^2.0.16", "@hookform/resolvers": "^2.9.11", "@httpx/exception": "^1.7.1", - "@vercel/analytics": "^0.1.10", + "@vercel/analytics": "^0.1.11", "@wayofdev/facebook-pixel": "workspace:*", "@wayofdev/google-tag-manager": "workspace:*", "@wayofdev/lint-staged-config": "^2.0.2", "@wayofdev/ui": "workspace:*", "clsx": "^1.2.1", "i18next": "^22.4.10", - "next": "^13.2.1", - "next-auth": "^4.19.2", - "next-i18next": "^13.1.5", + "next": "^13.2.3", + "next-auth": "^4.20.0", + "next-i18next": "^13.2.1", "next-seo": "^5.15.0", - "next-sitemap": "^3.1.54", + "next-sitemap": "^3.1.55", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-hook-form": "^7.43.2", + "react-hook-form": "^7.43.3", "react-i18next": "^12.2.0", "type-fest": "^3.6.1", "zod": "^3.20.6" }, "devDependencies": { "@next/bundle-analyzer": "13.2.3", - "@sentry/nextjs": "^7.38.0", + "@sentry/nextjs": "^7.40.0", "@size-limit/file": "^8.2.4", "@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/forms": "^0.5.3", @@ -54,7 +54,7 @@ "@types/facebook-pixel": "^0.0.24", "@types/hoist-non-react-statics": "^3.3.1", "@types/jest": "29.4.0", - "@types/node": "^18.14.1", + "@types/node": "^18.14.4", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11", "@types/react-test-renderer": "^18.0.0", @@ -67,7 +67,7 @@ "cssnano": "^5.1.15", "es-check": "^7.1.0", "eslint": "^8.35.0", - "eslint-config-next": "^13.2.1", + "eslint-config-next": "^13.2.3", "get-tsconfig": "^4.4.0", "jest": "^29.4.3", "jest-css-modules-transform": "4.4.2", diff --git a/apps/web/src/components/banner/__tests__/__snapshots__/Banner.test.tsx.snap b/apps/web/src/components/banner/__tests__/__snapshots__/Banner.test.tsx.snap deleted file mode 100644 index 71cf3bbe..00000000 --- a/apps/web/src/components/banner/__tests__/__snapshots__/Banner.test.tsx.snap +++ /dev/null @@ -1,86 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`should match snapshot 1`] = ` -
-
-
-
- - - -

- - We announced a new product! - - - Big news! We're excited to announce a brand new product. - -

-
- -
- -
-
-
-
-`; diff --git a/apps/web/src/features/home/pages/HomePage.tsx b/apps/web/src/features/home/pages/HomePage.tsx index 8a0e8c53..8067e693 100644 --- a/apps/web/src/features/home/pages/HomePage.tsx +++ b/apps/web/src/features/home/pages/HomePage.tsx @@ -1,9 +1,9 @@ import { event } from '@wayofdev/facebook-pixel/src/lib/fpixel' +import { Banner } from '@wayofdev/ui/src/base/banner/Banner' import { Button } from '@wayofdev/ui/src/base/button/Button' import { useTranslation } from 'next-i18next' import { NextSeo } from 'next-seo' import type { FC } from 'react' -import { Banner } from '@/components/banner/Banner' import { MainLayout } from '@/components/layout/MainLayout' import { MainNav } from '@/components/nav/MainNav' import { homeConfig } from '../home.config' @@ -21,7 +21,7 @@ export const HomePage: FC = () => { description="Web-app nextjs monorepo example, https://github.com/wayofdev/nextjs-monorepo-example" /> - +