maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' into feat/calcom-auth

This commit is contained in:
zomars 2023-01-17 13:00:16 -07:00
parent 1046f92c76 de64d3d9d4
commit 94e6007245
21 changed files with 145 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/storybook/.storybook/main.js
View File

@ -11,6 +11,7 @@ module.exports = {
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"storybook-addon-rtl-direction",
"storybook-react-i18next",
{
name: "storybook-addon-next",

3
apps/storybook/package.json
View File

@ -22,7 +22,8 @@
"@radix-ui/react-tooltip": "^1.0.0",
"next": "^13.1.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"storybook-addon-rtl-direction": "^0.0.19"
},
"devDependencies": {
"@babel/core": "^7.19.6",

7
apps/web/components/booking/pages/BookingPage.tsx
View File

@ -961,12 +961,7 @@ const BookingPage = ({
className="mr-auto"
/>
)}
<Button
color="minimal"
type="button"
onClick={() => router.back()}
// We override this for this component only for now - as we don't support darkmode everywhere in the app
className="dark:hover:bg-darkgray-200 dark:border-none dark:text-white">
<Button color="minimal" type="button" onClick={() => router.back()}>
{t("cancel")}
</Button>
<Button

2
apps/web/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@calcom/web",
"version": "2.4.7",
"version": "2.5.0",
"private": true,
"scripts": {
"analyze": "ANALYZE=true next build",

2
apps/web/pages/_document.tsx
View File

@ -81,7 +81,7 @@ class MyDocument extends Document<Props> {
</Head>
<body
className="dark:bg-darkgray-50 desktop-transparent bg-gray-100"
className="dark:bg-darkgray-50 desktop-transparent bg-gray-100 antialiased"
style={
this.props.isEmbed
? {

2
apps/web/public/static/locales/de/common.json
View File

@ -9,7 +9,7 @@
"have_any_questions": "Haben Sie Fragen? Wir sind hier um Ihnen zu helfen.",
"reset_password_subject": "{{appName}}: Anleitung zum Zurücksetzen des Passworts",
"event_declined_subject": "Abgelehnt: {{eventType}} mit {{name}} am {{date}}",
"event_cancelled_subject": "Abgesagt: {{eventType}} mit {{name}} am {{date}}",
"event_cancelled_subject": "Storniert: {{title}} um {{date}}",
"event_request_declined": "Ihre Event-Anfrage wurde abgelehnt",
"event_request_declined_recurring": "Ihre wiederkehrende Terminanfrage wurde abgelehnt",
"event_request_cancelled": "Ihr geplanter Termin wurde abgesagt",

7
packages/app-store/ee/routing-forms/README.md Normal file
View File

@ -0,0 +1,7 @@
# Routing Forms App
## How to run Tests
`yarn e2e:app-store` runs all Apps' tests. You can use `describe.only()` to run Routing Forms tests only.
Make sure that the app is running already with NEXT_PUBLIC_IS_E2E=1 so that the app is installable

9
packages/app-store/ee/routing-forms/components/FormActions.tsx
View File

@ -447,7 +447,14 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
}
return (
<DropdownMenuItem>
<Component ref={forwardedRef} {...actionProps}>
<Component
ref={forwardedRef}
{...actionProps}
className={classNames(
props.className,
"w-full transition-none",
props.color === "destructive" && "border-0"
)}>
{children}
</Component>
</DropdownMenuItem>

1
packages/app-store/ee/routing-forms/components/SingleForm.tsx
View File

@ -185,6 +185,7 @@ const Actions = ({
{t("Copy Typeform Redirect Url")}
</FormAction>
) : null}
<DropdownMenuSeparator />
<FormAction
action="_delete"
routingForm={form}

3
packages/app-store/ee/routing-forms/playwright/tests/basic.e2e.ts
View File

@ -178,8 +178,9 @@ test.describe("Routing Forms", () => {
});
const headerEls = page.locator("[data-testid='reporting-header'] th");
// Once the response is there, React would soon render it, so 500ms is enough
// FIXME: Sometimes it takes more than 500ms, so added a timeout of 1000ms for now. There might be something wrong with rendering.
await headerEls.first().waitFor({
timeout: 500,
timeout: 1000,
});
const numHeaderEls = await headerEls.count();
const headers = [];

2
packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
View File

@ -9,7 +9,7 @@ import { trpc } from "@calcom/trpc/react";
import {
Button,
Icon,
DatePickerField as DatePicker,
DatePicker,
DialogFooter,
Form,
showToast,

2
packages/features/ee/teams/components/MemberInvitationModal.tsx
View File

@ -7,7 +7,7 @@ import { IS_TEAM_BILLING_ENABLED } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import {
Button,
CheckboxField,
Checkbox as CheckboxField,
Dialog,
DialogContent,
DialogFooter,

2
packages/features/ee/teams/components/v2/TeamAvailabilityModal.tsx
View File

@ -5,7 +5,7 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { RouterOutputs, trpc } from "@calcom/trpc/react";
import type { ITimezone } from "@calcom/ui";
import { Avatar, DatePickerField as DatePicker, Label, Select, TimezoneSelect } from "@calcom/ui";
import { Avatar, DatePicker, Label, Select, TimezoneSelect } from "@calcom/ui";
import LicenseRequired from "../../../common/components/LicenseRequired";
import TeamAvailabilityTimes from "./TeamAvailabilityTimes";

70
packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
View File

@ -36,49 +36,37 @@ export const TimeTimeUnitInput = (props: Props) => {
defaultValue={form.getValues("time") || 24}
className="-mt-2 rounded-r-none text-sm focus:ring-0"
{...form.register("time", { valueAsNumber: true })}
addOnSuffix={
<Dropdown>
<DropdownMenuTrigger asChild>
<button className="flex">
<div className="mr-1 w-3/4">
{timeUnit ? t(`${timeUnit.toLowerCase()}_timeUnit`) : "undefined"}{" "}
</div>
<div className="w-1/4 pt-1">
<Icon.FiChevronDown />
</div>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent>
{timeUnitOptions.map((option, index) => (
<DropdownMenuItem key={index} className="outline-none">
<DropdownItem
key={index}
type="button"
onClick={() => {
setTimeUnit(option.value);
form.setValue("timeUnit", option.value);
}}>
{option.label}
</DropdownItem>
</DropdownMenuItem>
))}
</DropdownMenuContent>
</Dropdown>
}
/>
</div>
<div>
<Dropdown>
<DropdownMenuTrigger asChild>
<button className="-ml-1 h-9 w-24 rounded-none rounded-r-md border border-gray-300 bg-gray-50 px-3 py-1 text-sm">
<div className="flex">
<div className="mr-1 w-3/4">
{timeUnit ? t(`${timeUnit.toLowerCase()}_timeUnit`) : "undefined"}{" "}
</div>
<div className="w-1/4 pt-1">
<Icon.FiChevronDown />
</div>
</div>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent>
{timeUnitOptions.map((option, index) => (
<DropdownMenuItem key={index} className="outline-none">
{/* <button
key={index}
type="button"
className="h-8 w-20 justify-start pl-3 text-left text-sm"
onClick={() => {
setTimeUnit(option.value);
form.setValue("timeUnit", option.value);
}}>
{option.label}
</button> */}
<DropdownItem
key={index}
type="button"
onClick={() => {
setTimeUnit(option.value);
form.setValue("timeUnit", option.value);
}}>
{option.label}
</DropdownItem>
</DropdownMenuItem>
))}
</DropdownMenuContent>
</Dropdown>
</div>
</div>
);
};

5
packages/ui/components/button/Button.tsx
View File

@ -10,6 +10,7 @@ import { Icon } from "@calcom/ui";
type InferredVariantProps = VariantProps<typeof buttonClasses>;
export type ButtonColor = NonNullable<InferredVariantProps["color"]>;
export type ButtonBaseProps = {
/** Action that happens when the button is clicked */
onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
@ -22,7 +23,7 @@ export type ButtonBaseProps = {
tooltip?: string;
flex?: boolean;
} & Omit<InferredVariantProps, "color"> & {
color?: NonNullable<InferredVariantProps["color"]>;
color?: ButtonColor;
};
export type ButtonProps = ButtonBaseProps &
@ -73,7 +74,7 @@ const buttonClasses = cva(
disabled: [undefined, false],
color: "primary",
className:
"bg-brand-500 hover:bg-brand-400 focus:border focus:border-white focus:outline-none focus:ring-2 focus:ring-offset focus:ring-brand-500 dark:hover:bg-darkgray-600 dark:bg-darkgray-900",
"bg-brand-500 hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-offset focus:ring-brand-500 dark:hover:bg-darkgray-600 dark:bg-darkgray-900",
}),
// Secondary variants
{

3
packages/ui/components/card/FormCard.tsx
View File

@ -2,8 +2,7 @@ import Link from "next/link";
import { classNames } from "@calcom/lib";
import { Badge, BadgeProps } from "..";
import { Icon } from "../..";
import { Icon, Badge, BadgeProps } from "../..";
import { Divider } from "../divider";
type Action = { check: () => boolean; fn: () => void };

4
packages/ui/components/form/dropdown/Dropdown.tsx
View File

@ -5,7 +5,7 @@ import { ComponentProps, forwardRef } from "react";
import { classNames } from "@calcom/lib";
import { SVGComponent } from "@calcom/types/SVGComponent";
import { ButtonProps } from "@calcom/ui";
import { ButtonColor } from "@calcom/ui";
export const Dropdown = DropdownMenuPrimitive.Root;
@ -102,7 +102,7 @@ DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
type DropdownItemProps = {
children: React.ReactNode;
color?: ButtonProps["color"];
color?: ButtonColor;
StartIcon?: SVGComponent;
EndIcon?: SVGComponent;
href?: string;

114
packages/ui/components/index.ts
View File

@ -1,114 +0,0 @@
export { Avatar, AvatarGroup } from "./avatar";
export type { AvatarProps, AvatarGroupProps } from "./avatar";
export { Badge, UpgradeTeamsBadge } from "./badge";
export type { BadgeProps } from "./badge";
export { Breadcrumb, BreadcrumbContainer, BreadcrumbItem } from "./breadcrumb";
export { Button, LinkIconButton } from "./button";
export type { ButtonBaseProps, ButtonProps } from "./button";
export { ButtonGroup } from "./buttonGroup";
export {
Checkbox,
EmailField,
EmailInput,
FieldsetLegend,
Form,
HintsOrErrors,
Input,
InputField,
InputGroupBox,
InputLeading,
Label,
PasswordField,
TextArea,
TextAreaField,
TextField,
InputFieldWithSelect,
Select,
SelectField,
SelectWithValidation,
TimezoneSelect,
BooleanToggleGroup,
BooleanToggleGroupField,
DatePicker,
DateRangePicker,
MultiSelectCheckbox,
ToggleGroup,
ToggleGroupItem,
getReactSelectProps,
ColorPicker,
FormStep,
Dropdown,
DropdownItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuPortal,
DropdownMenuSeparator,
DropdownMenuTrigger,
DropdownMenuCheckboxItem,
DropdownMenuRadioGroup,
ButtonOrLink,
DropdownMenuGroup,
DropdownMenuRadioItem,
DropdownMenuTriggerItem,
Steps,
WizardForm,
SettingsToggle,
Stepper,
Switch,
} from "./form";
export type { ITimezone, ITimezoneOption } from "./form";
export {
AllApps,
AppCard,
AppSkeletonLoader,
SkeletonLoader,
Slider,
TrendingAppsSlider,
useShouldShowArrows,
AppStoreCategories,
} from "./apps";
export { TopBanner } from "./top-banner";
export type { TopBannerProps } from "./top-banner";
export { AnimatedPopover, MeetingTimeInTimezones } from "./popover";
export { TableActions, DropdownActions } from "./table/TableActions";
export type { ActionType } from "./table/TableActions";
export { Icon } from "./icon";
export { ErrorBoundary } from "./errorBoundary";
export { Logo } from "./logo";
export { Alert } from "./alert";
export type { AlertProps } from "./alert";
export { Credits } from "./credits";
export { Divider, VerticalDivider } from "./divider";
export { EmptyScreen } from "./empty-screen";
export { List, ListItem, ListItemText, ListItemTitle, ListLinkItem } from "./list";
export type { ListItemProps, ListProps } from "./list";
export { HeadSeo } from "./head-seo";
export {
Skeleton,
SkeletonAvatar,
SkeletonButton,
SkeletonContainer,
SkeletonText,
Loader,
} from "./skeleton";
export { HorizontalTabs, HorizontalTabItem, VerticalTabs, VerticalTabItem } from "./navigation";
export type { HorizontalTabItemProps, NavTabProps, VerticalTabItemProps } from "./navigation";
export { Card, StepCard, FormCard } from "./card";
export type { BaseCardProps } from "./card";
export { Tooltip } from "./tooltip";
export { Editor, AddVariablesDropdown } from "./editor";
export {
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
DialogTrigger,
ConfirmationDialogContent,
} from "./dialog";
export type { DialogProps, ConfirmationDialogContentProps } from "./dialog";
export { showToast } from "./toast"; // We don't export the toast components as they are only used in local storybook file
export { Meta, MetaProvider, useMeta } from "./meta";
export { Swatch } from "./swatch";
export { ShellSubHeading } from "./layout";

7
packages/ui/components/navigation/tabs/HorizontalTabs.tsx
View File

@ -8,8 +8,11 @@ export interface NavTabProps {
const HorizontalTabs = function ({ tabs, linkProps, actions, ...props }: NavTabProps) {
return (
<div className="mb-2 max-w-[calc(100%+40px)] lg:mb-5">
<nav className="no-scrollbar flex overflow-scroll rounded-md border p-1" aria-label="Tabs" {...props}>
<div className="mb-2 h-9 max-w-[calc(100%+40px)] lg:mb-5">
<nav
className="no-scrollbar flex max-h-9 space-x-1 overflow-scroll rounded-md border p-1"
aria-label="Tabs"
{...props}>
{tabs.map((tab, idx) => (
<HorizontalTabItem {...tab} key={idx} {...linkProps} />
))}

2
packages/ui/form/fields.tsx
View File

@ -6,7 +6,7 @@ import classNames from "@calcom/lib/classNames";
import { getErrorFromUnknown } from "@calcom/lib/errors";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Alert, showToast } from "../components";
import { Alert, showToast } from "../";
type InputProps = Omit<JSX.IntrinsicElements["input"], "name"> & { name: string };

172
packages/ui/index.tsx
View File

@ -1,92 +1,42 @@
export { Avatar, AvatarGroup } from "./components/avatar";
export type { AvatarProps, AvatarGroupProps } from "./components/avatar";
export { Badge, UpgradeTeamsBadge } from "./components/badge";
export type { BadgeProps } from "./components/badge";
export { Breadcrumb, BreadcrumbContainer, BreadcrumbItem } from "./components/breadcrumb";
export { Button, LinkIconButton } from "./components/button";
export type { ButtonBaseProps, ButtonProps } from "./components/button";
export { ButtonGroup } from "./components/buttonGroup";
export {
Avatar,
AvatarGroup,
Badge,
UpgradeTeamsBadge,
Breadcrumb,
BreadcrumbContainer,
BreadcrumbItem,
Button,
ButtonGroup,
Checkbox,
Credits,
Divider,
EmailField,
EmailInput,
EmptyScreen,
FieldsetLegend,
Form,
HeadSeo,
HintsOrErrors,
Input,
InputField,
InputGroupBox,
InputFieldWithSelect,
InputLeading,
Label,
List,
ListItem,
ListItemText,
ListItemTitle,
ListLinkItem,
PasswordField,
TextArea,
TextAreaField,
TextField,
TopBanner,
AnimatedPopover,
InputFieldWithSelect,
Select,
SelectField,
SelectWithValidation,
TableActions,
TimezoneSelect,
VerticalDivider,
Skeleton,
SkeletonAvatar,
SkeletonText,
SkeletonButton,
SkeletonContainer,
DropdownActions,
Icon,
ErrorBoundary,
Alert,
TrendingAppsSlider,
AppCard,
Card,
AllApps,
AppSkeletonLoader,
SkeletonLoader,
AppStoreCategories,
Slider,
Tooltip,
useShouldShowArrows,
HorizontalTabs,
HorizontalTabItem,
VerticalTabs,
VerticalTabItem,
StepCard,
LinkIconButton,
Editor,
AddVariablesDropdown,
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
DialogTrigger,
ConfirmationDialogContent,
DateRangePicker,
MultiSelectCheckbox,
BooleanToggleGroup,
BooleanToggleGroupField,
DatePicker,
DateRangePicker,
MultiSelectCheckbox,
ToggleGroup,
ToggleGroupItem,
showToast,
ShellSubHeading,
DatePicker as DatePickerField,
FormCard,
FormStep,
getReactSelectProps,
ColorPicker,
FormStep,
Dropdown,
DropdownItem,
DropdownMenuContent,
@ -96,44 +46,73 @@ export {
DropdownMenuSeparator,
DropdownMenuTrigger,
DropdownMenuCheckboxItem,
DropdownMenuGroup,
DropdownMenuRadioGroup,
ButtonOrLink,
DropdownMenuGroup,
DropdownMenuRadioItem,
DropdownMenuTriggerItem,
WizardForm,
Stepper,
Steps,
Switch,
WizardForm,
SettingsToggle,
MeetingTimeInTimezones,
Stepper,
Switch,
} from "./components/form";
export type { ITimezone, ITimezoneOption } from "./components/form";
export {
AllApps,
AppCard,
AppSkeletonLoader,
SkeletonLoader,
Slider,
TrendingAppsSlider,
useShouldShowArrows,
AppStoreCategories,
} from "./components/apps";
export { TopBanner } from "./components/top-banner";
export type { TopBannerProps } from "./components/top-banner";
export { AnimatedPopover, MeetingTimeInTimezones } from "./components/popover";
export { TableActions, DropdownActions } from "./components/table/TableActions";
export type { ActionType } from "./components/table/TableActions";
export { Icon } from "./components/icon";
export { ErrorBoundary } from "./components/errorBoundary";
export { Logo } from "./components/logo";
export { Alert } from "./components/alert";
export type { AlertProps } from "./components/alert";
export { Credits } from "./components/credits";
export { Divider, VerticalDivider } from "./components/divider";
export { EmptyScreen } from "./components/empty-screen";
export { List, ListItem, ListItemText, ListItemTitle, ListLinkItem } from "./components/list";
export type { ListItemProps, ListProps } from "./components/list";
export { HeadSeo } from "./components/head-seo";
export {
Skeleton,
SkeletonAvatar,
SkeletonButton,
SkeletonContainer,
SkeletonText,
Loader,
Meta,
MetaProvider,
useMeta,
Swatch,
Logo,
} from "./components";
export type {
ActionType,
AlertProps,
AvatarProps,
BadgeProps,
ButtonBaseProps,
BaseCardProps,
ButtonProps,
DialogProps,
ConfirmationDialogContentProps,
ITimezone,
ITimezoneOption,
ListItemProps,
ListProps,
TopBannerProps,
NavTabProps,
HorizontalTabItemProps,
VerticalTabItemProps,
AvatarGroupProps,
} from "./components";
export { default as CheckboxField } from "./components/form/checkbox/Checkbox";
} from "./components/skeleton";
export { HorizontalTabs, HorizontalTabItem, VerticalTabs, VerticalTabItem } from "./components/navigation";
export type { HorizontalTabItemProps, NavTabProps, VerticalTabItemProps } from "./components/navigation";
export { Card, StepCard, FormCard } from "./components/card";
export type { BaseCardProps } from "./components/card";
export { Tooltip } from "./components/tooltip";
export { Editor, AddVariablesDropdown } from "./components/editor";
export {
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
DialogTrigger,
ConfirmationDialogContent,
} from "./components/dialog";
export type { DialogProps, ConfirmationDialogContentProps } from "./components/dialog";
export { showToast } from "./components/toast"; // We don't export the toast components as they are only used in local storybook file
export { Meta, MetaProvider, useMeta } from "./components/meta";
export { Swatch } from "./components/swatch";
export { ShellSubHeading } from "./components/layout";
/** ⬇️ TODO - Move these to components */
export { default as AddressInput } from "./form/AddressInputLazy";
export { default as PhoneInput } from "./form/PhoneInputLazy";
@ -150,3 +129,4 @@ export {
export { default as MultiSelectCheckboxes } from "./components/form/checkbox/MultiSelectCheckboxes";
export type { Option as MultiSelectCheckboxesOptionType } from "./components/form/checkbox/MultiSelectCheckboxes";
export { default as ImageUploader } from "./components/image-uploader/ImageUploader";
export type { ButtonColor } from "./components/button/Button";