Merge pull request #89 from wayofdev/feat/ui-banner

wayofdev · Mar 2, 2023 · e17e203 · e17e203 · vercel · Mar 2, 2023
2 parents 46ac5f1 + 0bfbb04
commit e17e203
Show file tree

Hide file tree

Showing 22 changed files with 709 additions and 725 deletions.
diff --git 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
@@ -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,44 +165,80 @@ 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
  $(DOCKER_COMPOSE) exec -T -e FORCE_COLOR=1 app npx --no --commitlint --edit $(1)
 .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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<BannerProps>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+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
@@ -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
@@ -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",