Add ui package for reusable components (#1916)
* Add ui package for reusable components * Add fallback * Type fixes * Type fixes Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
This commit is contained in:
Omar López
GitHub
parent
b3ada7c25c
commit
95b3397e42
10 changed files with 182 additions and 141 deletions
|
|
@ -1,137 +1,3 @@
|
||||||
import Link, { LinkProps } from "next/link";
|
// TODO: Remove this file once every Button is imported from `@calcom/ui`
|
||||||
import React, { forwardRef } from "react";
|
export * from "@calcom/ui/Button";
|
||||||
|
export { default } from "@calcom/ui/Button";
|
||||||
import classNames from "@lib/classNames";
|
|
||||||
import { SVGComponent } from "@lib/types/SVGComponent";
|
|
||||||
|
|
||||||
export type ButtonBaseProps = {
|
|
||||||
color?: "primary" | "secondary" | "minimal" | "warn";
|
|
||||||
size?: "base" | "sm" | "lg" | "fab" | "icon";
|
|
||||||
loading?: boolean;
|
|
||||||
disabled?: boolean;
|
|
||||||
onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
|
|
||||||
StartIcon?: SVGComponent;
|
|
||||||
EndIcon?: SVGComponent;
|
|
||||||
shallow?: boolean;
|
|
||||||
};
|
|
||||||
export type ButtonProps = ButtonBaseProps &
|
|
||||||
(
|
|
||||||
| (Omit<JSX.IntrinsicElements["a"], "href"> & { href: LinkProps["href"] })
|
|
||||||
| (JSX.IntrinsicElements["button"] & { href?: never })
|
|
||||||
);
|
|
||||||
|
|
||||||
export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonProps>(function Button(
|
|
||||||
props: ButtonProps,
|
|
||||||
forwardedRef
|
|
||||||
) {
|
|
||||||
const {
|
|
||||||
loading = false,
|
|
||||||
color = "primary",
|
|
||||||
size = "base",
|
|
||||||
StartIcon,
|
|
||||||
EndIcon,
|
|
||||||
shallow,
|
|
||||||
// attributes propagated from `HTMLAnchorProps` or `HTMLButtonProps`
|
|
||||||
...passThroughProps
|
|
||||||
} = props;
|
|
||||||
// Buttons are **always** disabled if we're in a `loading` state
|
|
||||||
const disabled = props.disabled || loading;
|
|
||||||
|
|
||||||
// If pass an `href`-attr is passed it's `<a>`, otherwise it's a `<button />`
|
|
||||||
const isLink = typeof props.href !== "undefined";
|
|
||||||
const elementType = isLink ? "a" : "button";
|
|
||||||
|
|
||||||
const element = React.createElement(
|
|
||||||
elementType,
|
|
||||||
{
|
|
||||||
...passThroughProps,
|
|
||||||
disabled,
|
|
||||||
ref: forwardedRef,
|
|
||||||
className: classNames(
|
|
||||||
// base styles independent what type of button it is
|
|
||||||
"inline-flex items-center",
|
|
||||||
// different styles depending on size
|
|
||||||
size === "sm" && "px-3 py-2 text-sm leading-4 font-medium rounded-sm",
|
|
||||||
size === "base" && "px-3 py-2 text-sm font-medium rounded-sm",
|
|
||||||
size === "lg" && "px-4 py-2 text-base font-medium rounded-sm",
|
|
||||||
size === "icon" &&
|
|
||||||
"group p-2 border rounded-sm border-transparent text-neutral-400 hover:border-gray-200 transition",
|
|
||||||
// turn button into a floating action button (fab)
|
|
||||||
size === "fab" ? "fixed" : "relative",
|
|
||||||
size === "fab" && "justify-center bottom-20 right-8 rounded-full p-4 w-14 h-14",
|
|
||||||
|
|
||||||
// different styles depending on color
|
|
||||||
color === "primary" &&
|
|
||||||
(disabled
|
|
||||||
? "border border-transparent bg-gray-400 text-white"
|
|
||||||
: "border border-transparent dark:text-brandcontrast text-brandcontrast bg-brand dark:bg-brand hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
|
|
||||||
color === "secondary" &&
|
|
||||||
(disabled
|
|
||||||
? "border border-gray-200 text-gray-400 bg-white"
|
|
||||||
: "border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 hover:text-gray-900 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900 dark:bg-transparent dark:text-white dark:border-gray-800 dark:hover:bg-gray-900"),
|
|
||||||
color === "minimal" &&
|
|
||||||
(disabled
|
|
||||||
? "text-gray-400 bg-transparent"
|
|
||||||
: "text-gray-700 bg-transparent hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-gray-100 focus:ring-neutral-500"),
|
|
||||||
color === "warn" &&
|
|
||||||
(disabled
|
|
||||||
? "text-gray-400 bg-transparent"
|
|
||||||
: "text-gray-700 bg-transparent hover:text-red-700 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-red-50 focus:ring-red-500"),
|
|
||||||
// set not-allowed cursor if disabled
|
|
||||||
loading ? "cursor-wait" : disabled ? "cursor-not-allowed" : "",
|
|
||||||
props.className
|
|
||||||
),
|
|
||||||
// if we click a disabled button, we prevent going through the click handler
|
|
||||||
onClick: disabled
|
|
||||||
? (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
: props.onClick,
|
|
||||||
},
|
|
||||||
<>
|
|
||||||
{StartIcon && (
|
|
||||||
<StartIcon
|
|
||||||
className={classNames(
|
|
||||||
"inline",
|
|
||||||
size === "icon" ? "h-5 w-5 " : "-ml-1 h-5 w-5 ltr:mr-2 rtl:ml-2 rtl:ml-2 rtl:-mr-1"
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{props.children}
|
|
||||||
{loading && (
|
|
||||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
|
|
||||||
<svg
|
|
||||||
className={classNames(
|
|
||||||
"mx-4 h-5 w-5 animate-spin",
|
|
||||||
color === "primary" ? "text-white dark:text-black" : "text-black"
|
|
||||||
)}
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24">
|
|
||||||
<circle
|
|
||||||
className="opacity-25"
|
|
||||||
cx="12"
|
|
||||||
cy="12"
|
|
||||||
r="10"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="4"></circle>
|
|
||||||
<path
|
|
||||||
className="opacity-75"
|
|
||||||
fill="currentColor"
|
|
||||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{EndIcon && <EndIcon className="-mr-1 inline h-5 w-5 ltr:ml-2 rtl:mr-2" />}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
return props.href ? (
|
|
||||||
<Link passHref href={props.href} shallow={shallow && shallow}>
|
|
||||||
{element}
|
|
||||||
</Link>
|
|
||||||
) : (
|
|
||||||
element
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
export default Button;
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,2 @@
|
||||||
export default function classNames(...classes: unknown[]) {
|
// TODO: Remove this file once every `classNames` is imported from `@calcom/lib`
|
||||||
return classes.filter(Boolean).join(" ");
|
export { default } from "@calcom/lib/classNames";
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,8 @@
|
||||||
const withTM = require("@vercel/edge-functions-ui/transpile")(["@calcom/lib", "@calcom/prisma"]);
|
const withTM = require("@vercel/edge-functions-ui/transpile")([
|
||||||
|
"@calcom/lib",
|
||||||
|
"@calcom/prisma",
|
||||||
|
"@calcom/ui",
|
||||||
|
]);
|
||||||
const { i18n } = require("./next-i18next.config");
|
const { i18n } = require("./next-i18next.config");
|
||||||
|
|
||||||
// So we can test deploy previews preview
|
// So we can test deploy previews preview
|
||||||
|
|
|
||||||
|
|
@ -29,6 +29,7 @@
|
||||||
"@calcom/lib": "*",
|
"@calcom/lib": "*",
|
||||||
"@calcom/prisma": "*",
|
"@calcom/prisma": "*",
|
||||||
"@calcom/tsconfig": "*",
|
"@calcom/tsconfig": "*",
|
||||||
|
"@calcom/ui": "*",
|
||||||
"@daily-co/daily-js": "^0.21.0",
|
"@daily-co/daily-js": "^0.21.0",
|
||||||
"@headlessui/react": "^1.4.2",
|
"@headlessui/react": "^1.4.2",
|
||||||
"@heroicons/react": "^1.0.5",
|
"@heroicons/react": "^1.0.5",
|
||||||
|
|
|
||||||
3
packages/lib/classNames.ts
Normal file
3
packages/lib/classNames.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
export default function classNames(...classes: unknown[]) {
|
||||||
|
return classes.filter(Boolean).join(" ");
|
||||||
|
}
|
||||||
138
packages/ui/Button.tsx
Normal file
138
packages/ui/Button.tsx
Normal file
|
|
@ -0,0 +1,138 @@
|
||||||
|
import Link, { LinkProps } from "next/link";
|
||||||
|
import React, { forwardRef } from "react";
|
||||||
|
|
||||||
|
import classNames from "@calcom/lib/classNames";
|
||||||
|
|
||||||
|
type SVGComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
|
||||||
|
|
||||||
|
export type ButtonBaseProps = {
|
||||||
|
color?: "primary" | "secondary" | "minimal" | "warn";
|
||||||
|
size?: "base" | "sm" | "lg" | "fab" | "icon";
|
||||||
|
loading?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
|
||||||
|
StartIcon?: SVGComponent;
|
||||||
|
EndIcon?: SVGComponent;
|
||||||
|
shallow?: boolean;
|
||||||
|
};
|
||||||
|
export type ButtonProps = ButtonBaseProps &
|
||||||
|
(
|
||||||
|
| (Omit<JSX.IntrinsicElements["a"], "href"> & { href: LinkProps["href"] })
|
||||||
|
| (JSX.IntrinsicElements["button"] & { href?: never })
|
||||||
|
);
|
||||||
|
|
||||||
|
export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonProps>(function Button(
|
||||||
|
props: ButtonProps,
|
||||||
|
forwardedRef
|
||||||
|
) {
|
||||||
|
const {
|
||||||
|
loading = false,
|
||||||
|
color = "primary",
|
||||||
|
size = "base",
|
||||||
|
StartIcon,
|
||||||
|
EndIcon,
|
||||||
|
shallow,
|
||||||
|
// attributes propagated from `HTMLAnchorProps` or `HTMLButtonProps`
|
||||||
|
...passThroughProps
|
||||||
|
} = props;
|
||||||
|
// Buttons are **always** disabled if we're in a `loading` state
|
||||||
|
const disabled = props.disabled || loading;
|
||||||
|
|
||||||
|
// If pass an `href`-attr is passed it's `<a>`, otherwise it's a `<button />`
|
||||||
|
const isLink = typeof props.href !== "undefined";
|
||||||
|
const elementType = isLink ? "a" : "button";
|
||||||
|
|
||||||
|
const element = React.createElement(
|
||||||
|
elementType,
|
||||||
|
{
|
||||||
|
...passThroughProps,
|
||||||
|
disabled,
|
||||||
|
ref: forwardedRef,
|
||||||
|
className: classNames(
|
||||||
|
// base styles independent what type of button it is
|
||||||
|
"inline-flex items-center",
|
||||||
|
// different styles depending on size
|
||||||
|
size === "sm" && "px-3 py-2 text-sm leading-4 font-medium rounded-sm",
|
||||||
|
size === "base" && "px-3 py-2 text-sm font-medium rounded-sm",
|
||||||
|
size === "lg" && "px-4 py-2 text-base font-medium rounded-sm",
|
||||||
|
size === "icon" &&
|
||||||
|
"group p-2 border rounded-sm border-transparent text-neutral-400 hover:border-gray-200 transition",
|
||||||
|
// turn button into a floating action button (fab)
|
||||||
|
size === "fab" ? "fixed" : "relative",
|
||||||
|
size === "fab" && "justify-center bottom-20 right-8 rounded-full p-4 w-14 h-14",
|
||||||
|
|
||||||
|
// different styles depending on color
|
||||||
|
color === "primary" &&
|
||||||
|
(disabled
|
||||||
|
? "border border-transparent bg-gray-400 text-white"
|
||||||
|
: "border border-transparent dark:text-brandcontrast text-brandcontrast bg-brand dark:bg-brand hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
|
||||||
|
color === "secondary" &&
|
||||||
|
(disabled
|
||||||
|
? "border border-gray-200 text-gray-400 bg-white"
|
||||||
|
: "border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 hover:text-gray-900 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900 dark:bg-transparent dark:text-white dark:border-gray-800 dark:hover:bg-gray-900"),
|
||||||
|
color === "minimal" &&
|
||||||
|
(disabled
|
||||||
|
? "text-gray-400 bg-transparent"
|
||||||
|
: "text-gray-700 bg-transparent hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-gray-100 focus:ring-neutral-500"),
|
||||||
|
color === "warn" &&
|
||||||
|
(disabled
|
||||||
|
? "text-gray-400 bg-transparent"
|
||||||
|
: "text-gray-700 bg-transparent hover:text-red-700 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-red-50 focus:ring-red-500"),
|
||||||
|
// set not-allowed cursor if disabled
|
||||||
|
loading ? "cursor-wait" : disabled ? "cursor-not-allowed" : "",
|
||||||
|
props.className
|
||||||
|
),
|
||||||
|
// if we click a disabled button, we prevent going through the click handler
|
||||||
|
onClick: disabled
|
||||||
|
? (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
: props.onClick,
|
||||||
|
},
|
||||||
|
<>
|
||||||
|
{StartIcon && (
|
||||||
|
<StartIcon
|
||||||
|
className={classNames(
|
||||||
|
"inline",
|
||||||
|
size === "icon" ? "h-5 w-5 " : "-ml-1 h-5 w-5 ltr:mr-2 rtl:ml-2 rtl:ml-2 rtl:-mr-1"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{props.children}
|
||||||
|
{loading && (
|
||||||
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
|
||||||
|
<svg
|
||||||
|
className={classNames(
|
||||||
|
"mx-4 h-5 w-5 animate-spin",
|
||||||
|
color === "primary" ? "text-white dark:text-black" : "text-black"
|
||||||
|
)}
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24">
|
||||||
|
<circle
|
||||||
|
className="opacity-25"
|
||||||
|
cx="12"
|
||||||
|
cy="12"
|
||||||
|
r="10"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="4"></circle>
|
||||||
|
<path
|
||||||
|
className="opacity-75"
|
||||||
|
fill="currentColor"
|
||||||
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{EndIcon && <EndIcon className="-mr-1 inline h-5 w-5 ltr:ml-2 rtl:mr-2" />}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
return props.href ? (
|
||||||
|
<Link passHref href={props.href} shallow={shallow && shallow}>
|
||||||
|
{element}
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
element
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
export default Button;
|
||||||
3
packages/ui/index.tsx
Normal file
3
packages/ui/index.tsx
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import * as React from "react";
|
||||||
|
|
||||||
|
export * from "./Button";
|
||||||
15
packages/ui/package.json
Normal file
15
packages/ui/package.json
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
{
|
||||||
|
"name": "@calcom/ui",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"main": "./index.tsx",
|
||||||
|
"types": "./index.tsx",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"@calcom/config": "*",
|
||||||
|
"@calcom/lib": "*",
|
||||||
|
"@calcom/tsconfig": "*",
|
||||||
|
"@types/react": "^17.0.37",
|
||||||
|
"@types/react-dom": "^17.0.11",
|
||||||
|
"typescript": "^4.5.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
5
packages/ui/tsconfig.json
Normal file
5
packages/ui/tsconfig.json
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"extends": "@calcom/tsconfig/react-library.json",
|
||||||
|
"include": ["."],
|
||||||
|
"exclude": ["dist", "build", "node_modules"]
|
||||||
|
}
|
||||||
|
|
@ -2892,6 +2892,13 @@
|
||||||
dependencies:
|
dependencies:
|
||||||
"@types/react" "*"
|
"@types/react" "*"
|
||||||
|
|
||||||
|
"@types/react-dom@^17.0.11":
|
||||||
|
version "17.0.11"
|
||||||
|
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.11.tgz#e1eadc3c5e86bdb5f7684e00274ae228e7bcc466"
|
||||||
|
integrity sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==
|
||||||
|
dependencies:
|
||||||
|
"@types/react" "*"
|
||||||
|
|
||||||
"@types/react-phone-number-input@^3.0.13":
|
"@types/react-phone-number-input@^3.0.13":
|
||||||
version "3.0.13"
|
version "3.0.13"
|
||||||
resolved "https://registry.yarnpkg.com/@types/react-phone-number-input/-/react-phone-number-input-3.0.13.tgz#4eb7dcd278dcf9eb2a8d2ce2cb304657cbf1b4e5"
|
resolved "https://registry.yarnpkg.com/@types/react-phone-number-input/-/react-phone-number-input-3.0.13.tgz#4eb7dcd278dcf9eb2a8d2ce2cb304657cbf1b4e5"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue