V2 Main #3549
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| import { ComponentMeta } from "@storybook/react"; | ||
|
|
||
| import Breadcrumb, { BreadcrumbItem } from "@calcom/ui/v2/core/Breadcrumb"; | ||
|
|
||
|
There was a problem hiding this comment. Was the other approach causing issues? I think the former is the desirable way to consume these components. If they are causing issues we should figure out why. |
||
| export default { | ||
| title: "Breadcrumbs", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,12 @@ | ||
| import { TooltipProvider } from "@radix-ui/react-tooltip"; | ||
| import { ComponentMeta, ComponentStory } from "@storybook/react"; | ||
| import { Trash2 } from "react-feather"; | ||
|
|
||
| import Button from "@calcom/ui/v2/core/Button"; | ||
|
|
||
| export default { | ||
| title: "Button", | ||
| component: Button, | ||
| argTypes: { | ||
| color: { | ||
| options: ["primary", "secondary", "minimal", "destructive"], | ||
|
|
@@ -24,67 +25,69 @@ export default { | |
| control: { type: "radio" }, | ||
| }, | ||
| }, | ||
| } as ComponentMeta<typeof Button>; | ||
|
|
||
| const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />; | ||
|
|
||
| export const All = () => ( | ||
| <div> | ||
| <TooltipProvider> | ||
| <h1>Primary</h1> | ||
| <div className="flex space-x-2"> | ||
| <Button aria-label="Button Text">Button Text</Button> | ||
| <Button disabled aria-label="Button Text"> | ||
| Button Text | ||
| </Button> | ||
| </div> | ||
| <h1>Secondary</h1> | ||
| <div className="flex space-x-2"> | ||
| <Button color="secondary" aria-label="Button Text"> | ||
| Button Text | ||
| </Button> | ||
| <Button disabled color="secondary" aria-label="Button Text"> | ||
| Button Text | ||
| </Button> | ||
| <Button size="icon" color="secondary" StartIcon={Trash2} aria-label="Button Text" /> | ||
| </div> | ||
| <h1>Minimal</h1> | ||
| <div className="flex"> | ||
| <Button color="minimal" aria-label="Button Text"> | ||
| Button Text | ||
| </Button> | ||
| <Button disabled color="minimal" aria-label="Button Text"> | ||
| Button Text | ||
| </Button> | ||
| <Button size="icon" color="minimal" StartIcon={Trash2} aria-label="Button Text" /> | ||
| </div> | ||
| <h1>Destructive</h1> | ||
| <Button size="icon" color="destructive" StartIcon={Trash2} aria-label="Button Text" /> | ||
| <h1>Tooltip</h1> | ||
| <Button | ||
| tooltip="Deletes EventTypes" | ||
| size="icon" | ||
| color="destructive" | ||
| StartIcon={Trash2} | ||
| aria-label="Button Text" | ||
| /> | ||
| </TooltipProvider> | ||
| </div> | ||
| ); | ||
|
|
||
| export const Default = Template.bind({}); | ||
| Default.args = { | ||
| color: "primary", | ||
| children: "Button Text", | ||
| }; | ||
|
|
||
| export const Disabled = Template.bind({}); | ||
| Disabled.args = { | ||
| ...Default.args, | ||
| disabled: true, | ||
| }; | ||
|
|
||
| export const Loading = Template.bind({}); | ||
| Loading.args = { | ||
| ...Default.args, | ||
| loading: true, | ||
| }; | ||
| export const Icon = Template.bind({}); | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,9 @@ | ||
| import { TooltipProvider } from "@radix-ui/react-tooltip"; | ||
| import { ComponentMeta } from "@storybook/react"; | ||
| import { ArrowLeft, ArrowRight, Clipboard, Navigation2, Trash2 } from "react-feather"; | ||
|
|
||
| import Button from "@calcom/ui/v2/core/Button"; | ||
| import ButtonGroup from "@calcom/ui/v2/core/ButtonGroup"; | ||
|
|
||
| export default { | ||
| title: "Button Group", | ||
|
|
@@ -10,22 +12,26 @@ export default { | |
|
|
||
| export const Default = () => ( | ||
| <ButtonGroup> | ||
| <TooltipProvider> | ||
| <Button StartIcon={Trash2} size="icon" color="secondary" /> | ||
| <Button StartIcon={Navigation2} size="icon" color="secondary" /> | ||
| <Button StartIcon={Clipboard} size="icon" color="secondary" /> | ||
| </TooltipProvider> | ||
| </ButtonGroup> | ||
| ); | ||
|
|
||
| export const Combined = () => ( | ||
| <div className="flex flex-col space-y-2"> | ||
| <TooltipProvider> | ||
| <ButtonGroup combined> | ||
| <Button StartIcon={Trash2} size="icon" color="secondary" combined /> | ||
| <Button StartIcon={Navigation2} size="icon" color="secondary" combined /> | ||
| <Button StartIcon={Clipboard} size="icon" color="secondary" combined /> | ||
| </ButtonGroup> | ||
| <ButtonGroup combined> | ||
| <Button StartIcon={ArrowLeft} size="icon" color="secondary" combined /> | ||
| <Button StartIcon={ArrowRight} size="icon" color="secondary" combined /> | ||
| </ButtonGroup> | ||
| </TooltipProvider> | ||
| </div> | ||
| ); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,7 @@ | ||
| import { ComponentMeta } from "@storybook/react"; | ||
| import { useState } from "react"; | ||
|
|
||
| import Card, { BaseCardProps } from "@calcom/ui/v2/core/Card"; | ||
|
|
||
| export default { | ||
| title: "Cards", | ||
|
|
@@ -51,3 +52,28 @@ export const AppStore = () => { | |
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const sidebarCardProps: BaseCardProps = { | ||
| variant: "SidebarCard", | ||
| thumbnailUrl: "https://img.youtube.com/vi/60HJt8DOVNo/0.jpg", | ||
| mediaLink: "https://www.youtube.com/watch?v=60HJt8DOVNo", | ||
| title: "Dynamic boooking links", | ||
| description: "Booking link that allows people to quickly schedule meetings.", | ||
| learnMore: { | ||
| href: "https://cal.com/blog/cal-v-1-9", | ||
| text: "Learn more", | ||
| }, | ||
| }; | ||
|
|
||
| export const SidebarCard = () => { | ||
| const [visible, setVisible] = useState(true); // save state in localStorage, cookie or db | ||
| return ( | ||
| <header className="w-full max-w-[225px] bg-gray-100 p-3"> | ||
| {visible && ( | ||
| <div> | ||
| <Card {...sidebarCardProps} actionButton={{ onClick: () => setVisible(false), child: "Dismiss" }} /> | ||
| </div> | ||
| )} | ||
| </header> | ||
| ); | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| import { ComponentMeta } from "@storybook/react"; | ||
|
|
||
| import Checkbox from "@calcom/ui/v2/core/form/Checkbox"; | ||
|
|
||
| export default { | ||
| title: "Checkbox", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| import { useState } from "react"; | ||
|
|
||
| import ColorPicker from "@calcom/ui/v2/core/colorpicker"; | ||
|
|
||
| // eslint-disable-next-line import/no-anonymous-default-export | ||
| export default { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,17 @@ | ||
| import { useState } from "react"; | ||
|
|
||
| import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker"; | ||
|
|
||
| export default { | ||
| title: "Datepicker", | ||
| component: DatePicker, | ||
| }; | ||
|
|
||
| export const Default = () => { | ||
| const [selected, setSelected] = useState<Date>(new Date()); | ||
| return ( | ||
| <div style={{ width: "455px" }}> | ||
| {/* <DatePicker selected={selected} onChange={setSelected} locale="en" /> */} | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,25 @@ | ||
| import { ComponentMeta } from "@storybook/react"; | ||
| import { Bell } from "react-feather"; | ||
|
|
||
| import EmptyScreen from "@calcom/ui/v2/core/EmptyScreen"; | ||
|
|
||
| export default { | ||
| title: "pattern/Empty Screen", | ||
| component: EmptyScreen, | ||
| decorators: [ | ||
| (Story) => ( | ||
| <div className="flex items-center justify-center"> | ||
| <Story /> | ||
| </div> | ||
| ), | ||
| ], | ||
| } as ComponentMeta<typeof EmptyScreen>; | ||
|
|
||
| export const Default = () => ( | ||
| <EmptyScreen | ||
| Icon={Bell} | ||
| headline="Empty State Header" | ||
| description="Ullamco dolor nulla sint nulla occaecat aliquip id elit fugiat et excepteur magna. Nisi tempor anim do tempor irure fugiat ad occaecat. Mollit ea eiusmod pariatur sunt deserunt eu eiusmod. Sit reprehenderit " | ||
| buttonText="Veniam ut ipsum" | ||
| buttonOnClick={() => console.log("Button Clicked")} | ||
| /> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| import { ComponentMeta } from "@storybook/react"; | ||
| import { useState } from "react"; | ||
|
|
||
| import FormStep from "@calcom/ui/v2/core/form/FormStep"; | ||
|
|
||
| export default { | ||
| title: "Form Step", | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What are these for?