Skip to content

Commit 67d9656

Browse files
hoangdevnullhoangdevnull
committed
feat: update modal. Migration to tv
1 parent cc6c04d commit 67d9656

46 files changed

Lines changed: 588 additions & 769 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/remix-app/app/routes/_index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ export default function Index() {
4141
</a>
4242
</li>
4343
</ul>
44-
4544
<Button>ALO</Button>
4645
</div>
4746
);

‎apps/remix-app/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,13 @@
1313
"@remix-run/node": "^2.9.2",
1414
"@remix-run/react": "^2.9.2",
1515
"@remix-run/serve": "^2.9.2",
16-
"@var-meta/icons": "workspace:^",
16+
"@var-meta/icons": "workspace:*",
1717
"@var-meta/theme": "workspace:*",
1818
"@var-meta/ui": "workspace:*",
1919
"isbot": "^4.1.0",
2020
"react": "^18.2.0",
2121
"react-dom": "^18.2.0",
22+
"remix-utils": "^7.6.0",
2223
"tailwind-variants": "^0.1.20"
2324
},
2425
"devDependencies": {

‎apps/web/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,8 @@
1717
},
1818
"dependencies": {
1919
"@var-meta/ui": "workspace:*",
20-
"@var-meta/icons": "workspace:^",
20+
"@var-meta/icons": "workspace:*",
2121
"@var-meta/theme": "workspace:*",
22-
"class-variance-authority": "^0.7.0",
2322
"dayjs": "^1.11.10",
2423
"next": "^14.0.3",
2524
"next-themes": "^0.2.1",

‎apps/web/src/app/page.tsx‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,6 @@
11
'use client';
22

3-
import {
4-
Autocomplete,
5-
Button,
6-
HStack,
7-
Modal,
8-
ModalAction,
9-
ModalHeader,
10-
Select,
11-
Text,
12-
toast,
13-
type AutocompleteProps,
14-
} from '@var-meta/ui';
3+
import { Autocomplete, Button, HStack, Modal, Select, Text, toast, type AutocompleteProps } from '@var-meta/ui';
154

165
const options: AutocompleteProps['options'] = [
176
{
@@ -86,7 +75,7 @@ export default function Page() {
8675
</HStack>
8776
<div className="flex gap-4">
8877
<Modal trigger={<Button>Show Modal</Button>}>
89-
<ModalHeader
78+
<Modal.Header
9079
title="Blog post published"
9180
description="This blog post has been published. Team members will be able to edit this post and republish changes."
9281
/>
@@ -99,14 +88,14 @@ export default function Page() {
9988
options={Array.from({ length: 100 }, (_, i) => ({ value: `${i}`, label: `Option ${i}` }))}
10089
/>
10190
</div>
102-
<ModalAction>
91+
<Modal.Action>
10392
<Button onClick={() => toast.error('discard')} variant="outline" color="gray" fullWidth>
10493
Discard
10594
</Button>
10695
<Button onClick={() => toast.error('error')} fullWidth>
10796
Save changes
10897
</Button>
109-
</ModalAction>
98+
</Modal.Action>
11099
</Modal>
111100
</div>
112101
</main>

‎apps/web/src/components/View.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { ReactNode } from 'react';
22
import * as React from 'react';
3-
import { cva } from 'class-variance-authority';
3+
import { tv } from 'tailwind-variants';
44

55
interface ViewProps extends React.PropsWithChildren {
66
prop?: any;
@@ -63,7 +63,8 @@ export const ViewGroup = ({
6363
children: ReactNode;
6464
direction?: 'column' | 'row';
6565
}) => {
66-
const viewClasses = cva(['flex', 'justify-evenly'], {
66+
const viewClasses = tv({
67+
base: ['flex', 'justify-evenly'],
6768
variants: {
6869
direction: {
6970
row: ['flex-row', 'space-x-5'],

‎apps/web/src/stories/date-picker.stories.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import type { Meta, StoryFn } from '@storybook/react';
3-
import { Button, DatePicker, Modal, ModalBody, ModalHeader } from '@var-meta/ui';
3+
import { Button, DatePicker, Modal } from '@var-meta/ui';
44

55
import { View } from '@/components/View';
66

@@ -28,13 +28,13 @@ const WithModalTemplate: StoryFn<typeof DatePicker> = ({ ...args }) => {
2828
return (
2929
<View prop="WithModal">
3030
<Modal trigger={<Button>Show Modal</Button>}>
31-
<ModalHeader
31+
<Modal.Header
3232
title="Blog post published"
3333
description="This blog post has been published. Team members will be able to edit this post and republish changes."
3434
/>
35-
<ModalBody>
35+
<Modal.Body>
3636
<DatePicker {...args} />
37-
</ModalBody>
37+
</Modal.Body>
3838
</Modal>
3939
</View>
4040
);

‎apps/web/src/stories/date-range-picker.stories.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import type { Meta, StoryFn } from '@storybook/react';
3-
import { Button, DateRangePicker, Modal, ModalBody, ModalHeader, type DateRangePickerProps } from '@var-meta/ui';
3+
import { Button, DateRangePicker, Modal } from '@var-meta/ui';
44

55
import { View } from '@/components/View';
66

@@ -38,13 +38,13 @@ const WithModalTemplate: StoryFn<typeof DateRangePicker> = ({ ...args }) => {
3838
return (
3939
<View prop="WithModal">
4040
<Modal trigger={<Button>Show Modal</Button>}>
41-
<ModalHeader
41+
<Modal.Header
4242
title="Blog post published"
4343
description="This blog post has been published. Team members will be able to edit this post and republish changes."
4444
/>
45-
<ModalBody>
45+
<Modal.Body>
4646
<DateRangePicker {...args} />
47-
</ModalBody>
47+
</Modal.Body>
4848
</Modal>
4949
</View>
5050
);

‎apps/web/src/stories/modal.stories.tsx‎

Lines changed: 61 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@ import {
66
FeaturedIcon,
77
Form,
88
Modal,
9-
ModalAction,
10-
ModalBody,
11-
ModalHeader,
129
toast,
1310
VStack,
1411
type AutocompleteProps,
@@ -54,18 +51,26 @@ const meta: Meta = {
5451
type: 'radio',
5552
},
5653
},
54+
scrollBehavior: {
55+
options: ['inside', 'outside'],
56+
control: {
57+
type: 'radio',
58+
},
59+
},
5760
dismissable: {
5861
options: [true, false, undefined],
5962
control: {
6063
type: 'radio',
6164
},
6265
},
6366
},
64-
args: {},
67+
args: {
68+
title: 'Blog post published',
69+
description:
70+
'This blog post has been published. Team members will be able to edit this post and republish changes.',
71+
},
6572
};
6673

67-
export default meta;
68-
6974
const options: AutocompleteProps['options'] = [
7075
{
7176
value: 'Phoenix Baker',
@@ -120,18 +125,25 @@ const options: AutocompleteProps['options'] = [
120125
},
121126
];
122127

123-
const DefaultTemplate: StoryFn<ModalProps> = ({ align, ...args }: any) => {
128+
export default meta;
129+
130+
const DefaultTemplate: StoryFn<ModalProps> = ({ align, title, description, ...args }: any) => {
124131
return (
125132
<EnhancedView prop="Default">
126133
<div className="flex gap-4">
127-
<Modal trigger={<Button>Show Modal</Button>} {...args}>
128-
<ModalHeader
134+
<Modal className="" trigger={<Button>Show Modal</Button>} {...args}>
135+
<Modal.Header
129136
align={align}
130-
title="Blog post published"
131-
description="This blog post has been published. Team members will be able to edit this post and republish changes."
137+
icon={
138+
<FeaturedIcon variant="outline" color="brand" size="md">
139+
<AlertCircleIcon />
140+
</FeaturedIcon>
141+
}
142+
title={title}
143+
description={description}
132144
/>
133145

134-
<ModalBody>
146+
<Modal.Body>
135147
<VStack>
136148
<Form.Autocomplete label="Team" placeholder="Placeholder" options={options} />
137149
<Form.Select
@@ -140,16 +152,50 @@ const DefaultTemplate: StoryFn<ModalProps> = ({ align, ...args }: any) => {
140152
options={Array.from({ length: 100 }, (_, i) => ({ value: `${i}`, label: `Option ${i}` }))}
141153
/>
142154
</VStack>
143-
</ModalBody>
155+
<div>
156+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit
157+
venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam. Lorem ipsum dolor sit amet,
158+
consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet
159+
hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute tempor cupidatat
160+
consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
161+
officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse
162+
laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. Lorem ipsum dolor
163+
sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque
164+
sit amet hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute tempor cupidatat
165+
consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
166+
officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse
167+
laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. Mollit dolor eiusmod
168+
sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod.
169+
Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
170+
deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus
171+
non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam. Magna
172+
exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor
173+
eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor
174+
eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et.
175+
Culpa deserunt nostrud ad veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar
176+
risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam. Magna
177+
exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor
178+
eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor
179+
eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et.
180+
Culpa deserunt nostrud ad veniam. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
181+
officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse
182+
laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam. Lorem ipsum dolor
183+
sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque
184+
sit amet hendrerit risus, sed porttitor quam. Magna exercitation reprehenderit magna aute tempor cupidatat
185+
consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit
186+
officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse
187+
laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
188+
</div>
189+
</Modal.Body>
144190

145-
<ModalAction>
191+
<Modal.Action>
146192
<Button variant="outline" color="default" fullWidth>
147193
Discard
148194
</Button>
149195
<Button onClick={() => toast.error('error')} fullWidth>
150196
Save changes
151197
</Button>
152-
</ModalAction>
198+
</Modal.Action>
153199
</Modal>
154200
</div>
155201
</EnhancedView>

‎apps/web/src/stories/notification.stories.tsx‎

Lines changed: 0 additions & 75 deletions
This file was deleted.

‎apps/web/src/stories/select.stories.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,14 @@ const meta: Meta = {
2525
withScrollAction: {
2626
control: { type: 'boolean' },
2727
},
28+
defaultOpen: {
29+
description: 'The initial open state of the menu.',
30+
control: { type: 'boolean' },
31+
},
32+
open: {
33+
description: 'The open state of the menu.',
34+
control: { type: 'boolean' },
35+
},
2836
},
2937
args: {
3038
withScrollAction: true,

0 commit comments

Comments
 (0)