Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(modal): story for login modal #77

Merged
merged 1 commit into from
Jan 12, 2025
Merged

chore(modal): story for login modal #77

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
268 changes: 146 additions & 122 deletions apps/ui/lib/components/Modal/Modal.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,149 +1,173 @@
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
DialogClose,
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
DialogClose,
} from './Modal';
import { Text } from '../Typography';
import { Button } from '../Button';
import { Label } from '../Label';
import { TextField } from '../Textfield';
import { withGlobalStyles } from '../../../.storybook/decorator';
import { useState } from 'react';
import { Eye, EyeOff, Lock, Mail } from 'lucide-react';

export default {
title: 'Components/Modal',
component: Dialog,
decorators: [withGlobalStyles],
title: 'Components/Modal',
component: Dialog,
decorators: [withGlobalStyles],
};

const BasicDialog = () => (
<Dialog>
<DialogTrigger asChild>
<Button className="grv-btn grv-btn-primary">Open Dialog</Button>
</DialogTrigger>

<DialogContent className="grv-p-4">
<DialogClose />
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
<DialogDescription>
This is a description for the dialog content.
</DialogDescription>
</DialogHeader>

<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar
risus non rikus.
</Text>
</DialogContent>
</Dialog>
<Dialog>
<DialogTrigger asChild>
<Button className="grv-btn grv-btn-primary">Open Dialog</Button>
</DialogTrigger>

<DialogContent className="grv-p-4">
<DialogClose />
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
<DialogDescription>
This is a description for the dialog content.
</DialogDescription>
</DialogHeader>

<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar
risus non rikus.
</Text>
</DialogContent>
</Dialog>
);

export const Basic = () => <BasicDialog />;

const ModalWithFooter = () => (
<Dialog>
<DialogTrigger asChild>
<Button className="grv-btn grv-btn-primary">Open Dialog</Button>
</DialogTrigger>

<DialogContent className="grv-p-4">
<DialogClose />
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
<DialogDescription>
This is a description for the dialog content.
</DialogDescription>
</DialogHeader>

<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar
risus non rikus.
</Text>

<DialogFooter>
<Button className="grv-btn grv-btn-primary">Save</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<Dialog>
<DialogTrigger asChild>
<Button className="grv-btn grv-btn-primary">Open Dialog</Button>
</DialogTrigger>

<DialogContent className="grv-p-4">
<DialogClose />
<DialogHeader>
<DialogTitle>Dialog Title</DialogTitle>
<DialogDescription>
This is a description for the dialog content.
</DialogDescription>
</DialogHeader>

<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar
risus non rikus.
</Text>

<DialogFooter>
<Button className="grv-btn grv-btn-primary">Save</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);

export const WithFooter = () => <ModalWithFooter />;

const ModalWithImage = () => (
<Dialog>
<DialogTrigger asChild>
<Button className="grv-btn grv-btn-primary">Open Greeting Card</Button>
</DialogTrigger>

<DialogContent className="grv-p-4">
<DialogHeader>
<DialogTitle>Hello 2025</DialogTitle>
</DialogHeader>
<DialogClose />

<img
className="grv-w-full grv-h-64 grv-object-cover grv-rounded-md"
src="https://images.unsplash.com/photo-1709884732297-4b3c1a3f725b?q=80&w=2128&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Random Image"
/>

<Text>
Wish you a very happy new year. May this year bring you joy and
happiness.
</Text>
</DialogContent>
</Dialog>
<Dialog>
<DialogTrigger asChild>
<Button className="grv-btn grv-btn-primary">Open Greeting Card</Button>
</DialogTrigger>

<DialogContent className="grv-p-4">
<DialogHeader>
<DialogTitle>Hello 2025</DialogTitle>
</DialogHeader>
<DialogClose />

<img
className="grv-w-full grv-h-64 grv-object-cover grv-rounded-md"
src="https://images.unsplash.com/photo-1709884732297-4b3c1a3f725b?q=80&w=2128&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Random Image"
/>

<Text>
Wish you a very happy new year. May this year bring you joy and
happiness.
</Text>
</DialogContent>
</Dialog>
);

export const WithImage = () => <ModalWithImage />;

const LoginModal = () => (
<Dialog>
<DialogTrigger asChild>
<Button variant="default">Login</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px] grv-flex">
<DialogClose className="grv-bg-error-300" />
<DialogHeader>
<DialogTitle>Login</DialogTitle>
<DialogDescription>
Please enter your credentials to login.
</DialogDescription>
</DialogHeader>
<form className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="email" className="text-right">
Email
</Label>
<TextField
variant="outlined"
id="email"
type="email"
className="col-span-3"
/>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="password" className="text-right">
Password
</Label>
<TextField
variant="outlined"
id="password"
type="password"
className="col-span-3"
/>
</div>
<Button type="submit" className="mt-4">
Login
</Button>
</form>
</DialogContent>
</Dialog>
);
export const LoginModal = {
render: () => {
const [showPassword, setShowPassword] = useState(false);
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="default">Login</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px] grv-flex">
<DialogClose className="grv-bg-error-300" />
<DialogHeader>
<DialogTitle>Login</DialogTitle>
<DialogDescription>
Please enter your credentials to login.
</DialogDescription>
</DialogHeader>
<form className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="email" className="text-right">
Email
</Label>
<TextField.Root variant="outlined" error={true}>
<TextField.Icon position="start">
<Mail className="grv-w-4 grv-h-4" />
</TextField.Icon>
<TextField.Input placeholder="Email" type="email" />
<TextField.HelperText>
Please enter a valid email address
</TextField.HelperText>
</TextField.Root>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<Label htmlFor="password" className="text-right">
Password
</Label>
<TextField.Root variant={'outlined'}>
<TextField.Icon position="start">
<Lock className="grv-w-4 grv-h-4" />
</TextField.Icon>
<TextField.Input
type={showPassword ? "text" : "password"}
placeholder="Enter password"
/>
<TextField.Icon position="end">
<Button
variant={'outline'}
onClick={() => setShowPassword(!showPassword)}
>
{showPassword ? (
<EyeOff className="grv-w-4 grv-h-4" />
) : (
<Eye className="grv-w-4 grv-h-4" />
)}
</Button>
</TextField.Icon>
</TextField.Root>
</div>
<Button type="submit" className="mt-4">
Login
</Button>
</form>
</DialogContent>
</Dialog>
)
}
};

export const Login = () => <LoginModal />;