Storybook: configured and add a story for PageTitle

Author: sabat-12067

.storybook/main.ts

@@ -2,11 +2,13 @@ import type { StorybookConfig } from '@storybook/nextjs'
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  // staticDirs: ['../public'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
+    '@storybook/addon-postcss',
   ],
   framework: {
     name: '@storybook/nextjs',

.storybook/preview.ts

@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/react'
+import '../src/styles/globals.css';
 
 const preview: Preview = {
   parameters: {

package.json

@@ -51,6 +51,7 @@
     "@storybook/addon-interactions": "^7.5.3",
     "@storybook/addon-links": "^7.5.3",
     "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addon-postcss": "^2.0.0",
     "@storybook/blocks": "^7.5.3",
     "@storybook/nextjs": "^7.5.3",
     "@storybook/react": "^7.5.3",

src/components/__tests__/booleanWrapper.test.tsx

@@ -1,11 +1,15 @@
+import { COLOR_TYPE } from "../lib/constants"
+
 type PageTitleType = {
   title: string
+  color?: string
 }
-const PageTitle = ({ title }: PageTitleType) => {
+const PageTitle = ({ title, color = 'black' }: PageTitleType) => {
   return (
     <h2
       className="font-bold uppercase subpixel-antialiased
       tracking-wide	text-2xl pt-6 pb-6 border-r pr-10"
+      style={{ color }}
     >
       {title}
     </h2>

src/components/pageTitle.tsx

@@ -40,6 +40,8 @@ export enum COLOR_TYPE {
   SUCCESS = 'success',
   WARNING = 'warning',
   STRING = 'string',
+  DARK = 'black',
+  LIGHT = 'white'
 }
 
 export enum INPUT_TYPE {

src/lib/constants.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PageTitle from '../components/pageTitle';
+
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Example/PageTitle',
+  component: PageTitle,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+} satisfies Meta<typeof PageTitle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Title: Story = {
+    args: {
+        title: "Page Title",
+        color: 'black'
+    }
+}

src/stories/pageTitle.stories.ts

@@ -5,6 +5,7 @@ const config: Config = {
     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    "./src/stories/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
@@ -38,5 +39,8 @@ const config: Config = {
     prefix: '', // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
     logs: true, // Shows info abo
   },
+  safelist: [
+    'text-black',
+  ]
 }
 export default config