1- import React from ' react' ;
2- import { Meta , Story } from ' @storybook/react/types-6-0' ;
3- import { Button , ButtonProps } from ' ../lib/components/Button' ;
4- import * as Yup from ' yup' ;
1+ import React from " react" ;
2+ import { Meta , Story } from " @storybook/react/types-6-0" ;
3+ import { Button , ButtonProps } from " ../src/ lib/components/Button" ;
4+ import * as Yup from " yup" ;
55
6- import {
7- FluidButtonSizes ,
8- FluidButtonWeights ,
9- } from '../lib/components/FluidUI/FluidTheme' ;
6+ import { FluidButtonSizes , FluidButtonWeights } from "../src/lib/components/FluidUI/FluidTheme" ;
107import {
118 ComboBox ,
129 Form ,
1310 Input ,
11+ Menu ,
1412 SubmitButton ,
1513 SubmitButtonRef ,
1614 Switch ,
1715 Textarea ,
18- } from '../lib/components/Form' ;
19- import { HiInformationCircle } from 'react-icons/hi' ;
20- import { states } from '../lib/helpers/data' ;
21- import { useRef , useState } from '@storybook/addons' ;
16+ } from "../src/lib/components/Form" ;
17+ import { HiChevronDown , HiDotsVertical , HiInformationCircle , HiPencil , HiTrash } from "react-icons/hi" ;
18+ import { states } from "../src/lib/helpers/data" ;
19+ import { useRef , useState } from "@storybook/addons" ;
20+ import AppMenu from "../src/lib/components/Form/AppMenu" ;
2221
2322export default {
24- title : ' Components/Form' ,
23+ title : " Components/Form" ,
2524 component : Button ,
2625 args : {
27- weight : ' normal' as keyof FluidButtonWeights ,
28- size : 'md' as keyof FluidButtonSizes ,
26+ weight : " normal" as keyof FluidButtonWeights ,
27+ size : "md" as keyof FluidButtonSizes ,
2928 disabled : false ,
3029 } ,
3130} as Meta ;
3231
33- interface StoryButtonProps extends Omit < ButtonProps , ' color' > { }
32+ interface StoryButtonProps extends Omit < ButtonProps , " color" > { }
3433
3534const Template : Story < StoryButtonProps > = args => {
36- const submitBtnRef = useRef < HTMLButtonElement > ( null ) ;
37- const [ isSubmitted , setIsSubmitted ] = useState ( null ) ;
35+ const submitBtnRef = useRef < HTMLButtonElement | null > ( null ) ;
36+ const [ isSubmitted , setIsSubmitted ] = useState < any > ( null ) ;
3837 const initialValues = {
39- name : '' ,
40- email : '' ,
41- message : '' ,
42- state : ' California' ,
38+ name : "" ,
39+ email : "" ,
40+ message : "" ,
41+ state : " California" ,
4342 saveResponse : false ,
4443 } ;
4544 const validationSchema = Yup . object ( ) . shape ( {
46- name : Yup . string ( ) . required ( ' Name is required' ) ,
45+ name : Yup . string ( ) . required ( " Name is required" ) ,
4746 email : Yup . string ( )
48- . email ( ' Invalid email address' )
49- . required ( ' Email is required' ) ,
47+ . email ( " Invalid email address" )
48+ . required ( " Email is required" ) ,
5049 message : Yup . string ( ) . optional ( ) ,
51- state : Yup . string ( ) . required ( ' State is required' ) ,
52- saveResponse : Yup . boolean ( ) . required ( ' Save response is required' ) ,
50+ state : Yup . string ( ) . required ( " State is required" ) ,
51+ saveResponse : Yup . boolean ( ) . required ( " Save response is required" ) ,
5352 } ) ;
54- console . log ( ' submitBtnRef' , submitBtnRef ) ;
53+ console . log ( " submitBtnRef" , submitBtnRef ) ;
5554 return (
5655 < >
57- < div className = "w-4/5 max-w-lg mx-auto p-4 bg-white dark:bg-stone-900 shadow-lg shadow-gray-400/20 dark:shadow-black/30 rounded-xl" >
56+ < div className = "w-4/5 max-w-lg mx-auto mt-12 p-4 bg-white dark:bg-stone-900 shadow-lg shadow-gray-400/20 dark:shadow-black/30 rounded-xl" >
5857 < Form
5958 initialValues = { initialValues }
6059 validationSchema = { validationSchema }
@@ -71,16 +70,50 @@ const Template: Story<StoryButtonProps> = args => {
7170 < h1 > Thank you for your submission!</ h1 >
7271 </ div >
7372 ) }
74- < h2 className = "text-xl font-semibold pb-4 text-gray-700 dark:text-gray-200" >
75- Contact Us
76- </ h2 >
73+ < h2 className = "text-xl font-semibold pb-4 text-gray-700 dark:text-gray-200" > Contact Us</ h2 >
74+ < div className = "relative flex justify-between mb-4" >
75+ < div />
76+ < Menu
77+ label = { "Actions" }
78+ icon = {
79+ < HiChevronDown
80+ className = "-mr-1 ml-1 h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500 dark:text-gray-400 dark:group-hover:text-gray-50"
81+ aria-hidden = "true"
82+ />
83+ }
84+ header = {
85+ < p className = "truncate py-3 px-3.5" >
86+ < span className = "mb-0.5 block text-xs text-gray-500 dark:text-gray-400" > Signed in as</ span >
87+ < span className = "font-semibold text-gray-700 dark:text-gray-300" > Guest user</ span >
88+ </ p >
89+ }
90+ buttonClassName = "!ring-offset-2 ring-offset-gray-50 dark:ring-offset-gray-800 rounded-md"
91+ menus = { [
92+ {
93+ label : "Edit" ,
94+ icon : HiPencil ,
95+ role : "info" ,
96+ onClick : ( ) => console . log ( "edit" ) ,
97+ } ,
98+ {
99+ role : "separator" ,
100+ } ,
101+ {
102+ label : "Delete" ,
103+ role : "destructive" ,
104+ icon : HiTrash ,
105+ onClick : ( ) => console . log ( "delete" ) ,
106+ } ,
107+ ] }
108+ />
109+ </ div >
77110 < Input name = "name" label = "Name" type = "text" />
78111 < Input name = "email" label = "Email" type = "email" />
79112 < Textarea
80113 name = "message"
81114 label = "Message"
82115 description = { {
83- text : ' Please be as detailed as possible.' ,
116+ text : " Please be as detailed as possible." ,
84117 icon : HiInformationCircle ,
85118 } }
86119 />
@@ -91,12 +124,7 @@ const Template: Story<StoryButtonProps> = args => {
91124 </ Form >
92125 </ div >
93126 < div >
94- < Button
95- onClick = { ( ) => submitBtnRef . current ?. click ( ) }
96- shape = "pill"
97- weight = "outline"
98- color = "green"
99- >
127+ < Button onClick = { ( ) => submitBtnRef . current ?. click ( ) } shape = "pill" weight = "outline" color = "green" >
100128 Submit Button Ref
101129 </ Button >
102130 </ div >
0 commit comments