feat: reusable banner component

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',

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,
+  },
 }

apps/storybook/package.json

@@ -17,35 +17,36 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@storybook/cli": "^7.0.0-beta.55",
-    "@storybook/addon-essentials": "7.0.0-beta.57",
-    "@storybook/addon-interactions": "7.0.0-beta.57",
-    "@storybook/addon-links": "7.0.0-beta.57",
+    "@storybook/addon-essentials": "7.0.0-beta.58",
+    "@storybook/addon-interactions": "7.0.0-beta.58",
+    "@storybook/addon-links": "7.0.0-beta.58",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/blocks": "7.0.0-beta.57",
-    "@storybook/react": "7.0.0-beta.57",
-    "@storybook/react-vite": "7.0.0-beta.57",
+    "@storybook/addon-viewport": "^7.0.0-beta.58",
+    "@storybook/blocks": "7.0.0-beta.58",
+    "@storybook/cli": "^7.0.0-beta.55",
+    "@storybook/react": "7.0.0-beta.58",
+    "@storybook/react-vite": "7.0.0-beta.58",
     "@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.57",
-    "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"
+    "prop-types": "15.8.1",
+    "storybook": "7.0.0-beta.58",
+    "tailwindcss": "3.2.7",
+    "typescript": "4.9.5",
+    "vite": "4.1.4"
   }
 }

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.",
+  },
+}

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"
       />
       <MainLayout>
-        <Banner />
+        <Banner message="Something big will happen soon!" />
         <MainNav />
         <Button onClick={handleClick} label="Buy 10$">
           Buy 10$

packages/ui/package.json

@@ -5,22 +5,22 @@
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/index.js",
+  "module": "dist/index.esm.js",
   "source": "src/index.ts",
   "types": "dist/index.d.ts",
-  "module": "dist/index.esm.js",
   "scripts": {
-    "dev": "tsup --watch",
     "build": "tsup",
     "clean": "rimraf dist .turbo",
+    "dev": "tsup --watch",
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs --cache --cache-location ../../.cache/eslint/ui.eslintcache",
     "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs --fix",
     "lint:types": "tsc --project tsconfig.json --noEmit",
     "test:unit": "jest --config ./jest.config.js"
   },
   "dependencies": {
+    "@heroicons/react": "2.0.16",
     "@swc/helpers": "0.4.14",
-    "clsx": "1.2.1",
-    "@heroicons/react": "2.0.16"
+    "clsx": "1.2.1"
   },
   "devDependencies": {
     "@tailwindcss/aspect-ratio": "0.4.2",
@@ -33,31 +33,31 @@
     "@types/node": "18.14.2",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
+    "@types/react-test-renderer": "18.0.0",
     "@wayofdev/eslint-config-bases": "2.0.4",
     "@wayofdev/postcss-config": "2.0.2",
     "eslint": "8.35.0",
+    "jest": "29.4.3",
+    "jest-environment-jsdom": "29.4.3",
     "postcss": "8.4.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-test-renderer": "18.2.0",
     "rimraf": "4.1.2",
     "sanitize.css": "13.0.0",
     "tailwindcss": "3.2.7",
-    "typescript": "4.9.5",
-    "tsup": "6.6.3",
-    "jest": "29.4.3",
-    "jest-environment-jsdom": "29.4.3",
     "ts-jest": "29.0.5",
-    "@types/react-test-renderer": "18.0.0",
-    "react-test-renderer": "18.2.0"
+    "tsup": "6.6.3",
+    "typescript": "4.9.5"
   },
   "peerDependencies": {
+    "@heroicons/react": "2.0.16",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
+    "@wayofdev/lint-staged-config": "2.0.2",
     "next": "*",
     "react": "18.2",
-    "react-dom": "18.2",
-    "@wayofdev/lint-staged-config": "2.0.2",
-    "@heroicons/react": "2.0.16"
+    "react-dom": "18.2"
   },
   "peerDependenciesMeta": {
     "@types/react": {

packages/ui/src/base/banner/Banner.tsx

@@ -1,11 +1,13 @@
 import { MegaphoneIcon, XMarkIcon } from '@heroicons/react/24/solid'
 import type { FC } from 'react'
 
-type BannerProps = {
+export interface BannerProps {
+  message: string
+
   children?: never
 }
 
-export const Banner: FC<BannerProps> = () => {
+export const Banner: FC<BannerProps> = ({ message }) => {
   return (
     <div className="bg-indigo-600">
       <div className="mx-auto max-w-7xl p-3 sm:px-6 lg:px-8">
@@ -16,9 +18,7 @@ export const Banner: FC<BannerProps> = () => {
             </span>
             <p className="ml-3 truncate font-medium text-white">
               <span className="md:hidden">We announced a new product!</span>
-              <span className="hidden md:inline">
-                Big news! We're excited to announce a brand new product.
-              </span>
+              <span className="hidden md:inline">{message}</span>
             </p>
           </div>
           <div className="order-3 mt-2 w-full shrink-0 sm:order-2 sm:mt-0 sm:w-auto">

apps/web/src/components/banner/__tests__/Banner.test.tsx → packages/ui/src/base/banner/__tests__/Banner.test.tsx

@@ -2,6 +2,8 @@ import renderer from 'react-test-renderer'
 import { Banner } from '../Banner'
 
 it('should match snapshot', () => {
-  const tree = renderer.create(<Banner />).toJSON()
+  const tree = renderer
+    .create(<Banner message="Big news! We're excited to announce a brand new product." />)
+    .toJSON()
   expect(tree).toMatchSnapshot()
 })