Merge pull request #58 from LerianStudio/feature/storybook

✨ Added more stories into Storybook

.gitignore

@@ -43,7 +43,6 @@ next-env.d.ts
 *storybook.log
 
 # Storybook
-.storybook
 /storybook-static/
 
 # Playwright

.storybook/main.ts

@@ -0,0 +1,57 @@
+import type { StorybookConfig } from '@storybook/nextjs'
+
+const config: StorybookConfig = {
+  stories: [
+    '../src/components/**/*.mdx',
+    '../src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)'
+  ],
+  staticDirs: ['../public'],
+  addons: [
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+    '@storybook/addon-styling-webpack',
+
+    {
+      name: '@storybook/addon-styling-webpack',
+      options: {
+        rules: [
+          {
+            test: /\.css$/,
+            sideEffects: true,
+            use: [
+              require.resolve('style-loader'),
+              {
+                loader: require.resolve('css-loader'),
+                options: {
+                  importLoaders: 1
+                }
+              },
+              {
+                loader: require.resolve('postcss-loader'),
+                options: {
+                  implementation: require.resolve('postcss')
+                }
+              }
+            ]
+          }
+        ]
+      }
+    }
+  ],
+
+  framework: {
+    name: '@storybook/nextjs',
+    options: {}
+  },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript'
+  },
+  docs: {
+    autodocs: 'tag'
+  },
+  build: {}
+}
+export default config

.storybook/preview.tsx

@@ -0,0 +1,34 @@
+import type { Preview } from '@storybook/react'
+
+import '../src/app/globals.css'
+
+import React from 'react'
+import { ThemeProvider } from '../src/lib/theme/theme-provider'
+import { IntlProvider } from 'react-intl'
+
+const preview: Preview = {
+  parameters: {
+    backgrounds: {
+      values: [{ name: 'Light', value: '#f4f4f5' }],
+      default: 'Light'
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i
+      }
+    }
+  }
+}
+
+export const decorators = [
+  (Story) => (
+    <ThemeProvider>
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    </ThemeProvider>
+  )
+]
+
+export default preview

package.json

@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start -p 8081",
     "lint": "next lint --fix",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6007",
     "build-storybook": "storybook build",
     "extract:i18n": "tsx ./scripts/i18n-extract.ts",
     "compile:i18n": "formatjs compile-folder \"./locales/extracted\" --format simple \"./locales/compiled\"",

src/app/(auth-routes)/signin/page.tsx

@@ -16,6 +16,7 @@ import { ArrowRight } from 'lucide-react'
 import React from 'react'
 import LoadingScreen from '@/components/loading-screen'
 import MidazLogo from '@/images/midaz-login-screen.png'
+import BackgroundImage from '@/images/login-wallpaper.jpg'
 import {
   Tooltip,
   TooltipContent,
@@ -172,7 +173,13 @@ const SignInPage = () => {
         </div>
       </div>
 
-      <div className="relative flex w-3/6 items-center justify-center bg-login-wallpaper bg-cover">
+      <div className="relative flex w-3/6 items-center justify-center">
+        <Image
+          alt="Login background image"
+          src={BackgroundImage}
+          fill
+          sizes="50vw, 100vh"
+        />
         <div className="absolute inset-0 bg-black bg-opacity-50"></div>
         <div className="relative z-10">
           <Image alt="Midaz Logo" src={MidazLogo} width={150} height={150} />

src/components/form/input-field/input-field.mdx

@@ -0,0 +1,35 @@
+import { Meta, Controls, Primary, Canvas, Stories } from '@storybook/blocks'
+import * as Story from './input-field.stories'
+
+<Meta of={Story} />
+
+# InputField
+
+An implementation for easy use of Input component.
+
+### Basic
+
+<Canvas of={Story.Primary} />
+
+### Required
+
+<Canvas of={Story.Required} />
+
+### With Tooltip
+
+<Canvas of={Story.WithTooltip} />
+
+### With Label Extra
+
+<Canvas of={Story.WithExtraLabel} />
+
+### Read Only
+
+<Canvas of={Story.ReadOnly} />
+
+### Disabled
+
+<Canvas of={Story.Disabled} />
+
+<Primary />
+<Controls />

src/components/form/input-field/input-field.stories.tsx

@@ -0,0 +1,69 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { InputField, InputFieldProps } from '.'
+import { useForm } from 'react-hook-form'
+import { Form } from '@/components/ui/form'
+
+const meta: Meta<InputFieldProps> = {
+  title: 'Components/Form/InputField',
+  component: InputField,
+  argTypes: {}
+}
+
+export default meta
+
+function BaseComponent(args: Omit<InputFieldProps, 'name' | 'control'>) {
+  const form = useForm()
+
+  return (
+    <div className="w-1/2">
+      <Form {...form}>
+        <InputField
+          {...args}
+          control={form.control}
+          label="Username"
+          name="username"
+          placeholder="Type..."
+        />
+      </Form>
+    </div>
+  )
+}
+
+export const Primary: StoryObj<InputFieldProps> = {
+  render: (args) => BaseComponent(args)
+}
+
+export const Required: StoryObj<InputFieldProps> = {
+  args: {
+    required: true
+  },
+  render: (args) => BaseComponent(args)
+}
+
+export const WithTooltip: StoryObj<InputFieldProps> = {
+  args: {
+    tooltip: 'This is a Tooltip!'
+  },
+  render: (args) => BaseComponent(args)
+}
+
+export const WithExtraLabel: StoryObj<InputFieldProps> = {
+  args: {
+    labelExtra: <span>Extra Label</span>
+  },
+  render: (args) => BaseComponent(args)
+}
+
+export const ReadOnly: StoryObj<InputFieldProps> = {
+  args: {
+    readOnly: true
+  },
+  render: (args) => BaseComponent(args)
+}
+
+export const Disabled: StoryObj<InputFieldProps> = {
+  args: {
+    disabled: true
+  },
+  render: (args) => BaseComponent(args)
+}

src/components/form/select-field/select-field.mdx

@@ -0,0 +1,31 @@
+import { Meta, Controls, Primary, Canvas, Stories } from '@storybook/blocks'
+import * as Story from './select-field.stories'
+
+<Meta of={Story} />
+
+# SelectField
+
+An implementation for easy use of Select component.
+
+### Basic
+
+<Canvas of={Story.Primary} />
+
+### Required
+
+<Canvas of={Story.Required} />
+
+### With Tooltip
+
+<Canvas of={Story.WithTooltip} />
+
+### With Label Extra
+
+<Canvas of={Story.WithExtraLabel} />
+
+### Disabled
+
+<Canvas of={Story.Disabled} />
+
+<Primary />
+<Controls />

src/components/form/select-field/select-field.stories.tsx

@@ -0,0 +1,67 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { SelectField, SelectFieldProps } from '.'
+import { useForm } from 'react-hook-form'
+import { Form } from '@/components/ui/form'
+import { SelectItem } from '@/components/ui/select'
+
+const meta: Meta<SelectFieldProps> = {
+  title: 'Components/Form/SelectField',
+  component: SelectField,
+  argTypes: {}
+}
+
+export default meta
+
+function BaseComponent(args: Omit<SelectFieldProps, 'name' | 'control'>) {
+  const form = useForm()
+
+  return (
+    <div className="w-1/2">
+      <Form {...form}>
+        <SelectField
+          {...args}
+          control={form.control}
+          label="Fruits"
+          name="fruits"
+          placeholder="Select..."
+        >
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="orange">Orange</SelectItem>
+        </SelectField>
+      </Form>
+    </div>
+  )
+}
+
+export const Primary: StoryObj<SelectFieldProps> = {
+  render: (args) => BaseComponent(args)
+}
+
+export const Required: StoryObj<SelectFieldProps> = {
+  args: {
+    required: true
+  },
+  render: (args) => BaseComponent(args)
+}
+
+export const WithTooltip: StoryObj<SelectFieldProps> = {
+  args: {
+    tooltip: 'This is a Tooltip!'
+  },
+  render: (args) => BaseComponent(args)
+}
+
+export const WithExtraLabel: StoryObj<SelectFieldProps> = {
+  args: {
+    labelExtra: <span>Extra Label</span>
+  },
+  render: (args) => BaseComponent(args)
+}
+
+export const Disabled: StoryObj<SelectFieldProps> = {
+  args: {
+    disabled: true
+  },
+  render: (args) => BaseComponent(args)
+}

src/components/loading-screen.tsx

@@ -1,6 +1,8 @@
 'use client'
 
 import React from 'react'
+import Image from 'next/image'
+import LoadingImage from '@/images/loading-wallpaper.jpg'
 import midazLoading from '@/animations/midaz-loading.json'
 import { Lottie } from '@/lib/lottie'
 
@@ -10,7 +12,8 @@ type LoadingScreenProps = {
 
 const LoadingScreen = ({ onComplete }: LoadingScreenProps) => {
   return (
-    <div className="relative flex h-screen w-screen items-center justify-center bg-loading-wallpaper bg-cover">
+    <div className="relative flex h-screen w-screen items-center justify-center">
+      <Image src={LoadingImage} alt="Loading image" fill sizes="100vw, 100vh" />
       <div className="absolute inset-0 bg-black bg-opacity-50"></div>
       <div className="relative z-10 h-36 w-36">
         <Lottie

src/components/ui/alert/alert.mdx

@@ -0,0 +1,19 @@
+import { Meta, Controls, Primary, Canvas } from '@storybook/blocks'
+import * as Story from './alert.stories'
+
+<Meta of={Story} />
+
+# Alert
+
+Displays a callout for user attention.
+
+### Primary
+
+<Canvas of={Story.Primary} />
+
+### Destructive
+
+<Canvas of={Story.Destructive} />
+
+<Primary />
+<Controls />