blsmedia/sign
2
0
Fork 0
Code Issues Packages Releases Activity

refactor all button to butto compoment

Browse Source
This commit is contained in:
Timur Ercan
2023-02-02 14:46:24 +01:00
parent 7255819d86
commit f503a4a3a3
11 changed files with 46 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/web/components/login.tsx
View File

@@ -9,6 +9,7 @@ import { useState } from "react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { toast, Toaster } from "react-hot-toast"; import { toast, Toaster } from "react-hot-toast";
import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants"; import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
import { Button } from "@documenso/ui";
interface LoginValues { interface LoginValues {
email: string; email: string;
@@ -133,19 +134,18 @@ export default function Login() {
</div> </div>
<div> <div>
<button <Button
type="submit"
disabled={formState.isSubmitting} disabled={formState.isSubmitting}
className="group relative flex w-full justify-center rounded-md border border-transparent bg-neon py-2 px-4 text-sm font-medium text-white hover:bg-neon-dark focus:outline-none focus:ring-2 focus:ring-neon focus:ring-offset-2" className="group relative flex w-full"
> >
<span className="absolute inset-y-0 left-0 flex items-center pl-3"> <span className="absolute inset-y-0 left-0 flex items-center pl-3">
<LockClosedIcon <LockClosedIcon
className="h-5 w-5 text-neon-dark group-hover:text-neon" className="h-5 w-5 text-neon-dark group-hover:text-neon disabled:group-hover:bg-gray-600 disabled:disabled:bg-gray-600"
aria-hidden="true" aria-hidden="true"
/> />
</span> </span>
Sign in Sign in
</button> </Button>
</div> </div>
<div> <div>
<div className="relative"> <div className="relative">

4
apps/web/components/navigation.tsx
View File

@@ -234,10 +234,6 @@ export default function TopNavigation() {
{user?.email} {user?.email}
</div> </div>
</div> </div>
<button
type="button"
className="ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-neon focus:ring-offset-2"
></button>
</div> </div>
<div className="mt-3 space-y-1"> <div className="mt-3 space-y-1">
{userNavigation.map((item) => ( {userNavigation.map((item) => (

9
apps/web/components/settings.tsx
View File

@@ -5,6 +5,7 @@ import Link from "next/link";
import Head from "next/head"; import Head from "next/head";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
import { updateUser } from "@documenso/features"; import { updateUser } from "@documenso/features";
import { Button } from "@documenso/ui";
const subNavigation = [ const subNavigation = [
{ {
@@ -164,13 +165,7 @@ export default function Setttings() {
className="mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:border-neon focus:outline-none focus:ring-neon sm:text-sm" className="mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
/> />
</div> </div>
<button <Button onClick={() => updateUser(user)}>Save</Button>
type="button"
onClick={() => updateUser(user)}
className="inline-flex items-center justify-center rounded-md border border-transparent bg-neon px-10 py-2 text-sm font-medium text-white shadow-sm hover:bg-neon-dark focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
>
Save
</button>
</div> </div>
</div> </div>
</form> </form>

10
apps/web/components/signup.tsx
View File

@@ -1,4 +1,5 @@
import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants"; import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
import { Button } from "@documenso/ui";
import { XCircleIcon } from "@heroicons/react/24/outline"; import { XCircleIcon } from "@heroicons/react/24/outline";
import { signIn } from "next-auth/react"; import { signIn } from "next-auth/react";
import Link from "next/link"; import Link from "next/link";
@@ -180,17 +181,14 @@ export default function Signup() {
</div> </div>
</div> </div>
<button <Button
onClick={() => { onClick={() => {
methods.clearErrors(); methods.clearErrors();
}} }}
type="submit" className="sgroup relative flex w-full"
value="submit"
className="sgroup relative flex w-full justify-center rounded-md border border-transparent bg-neon py-2 px-4 text-sm font-medium text-white hover:bg-neon-dark focus:outline-none focus:ring-2 focus:ring-neon focus:ring-offset-2"
> >
<span className="absolute inset-y-0 left-0 flex items-center pl-3"></span>
Create Account Create Account
</button> </Button>
<div className="pt-2"> <div className="pt-2">
<div className="relative"> <div className="relative">
<div <div

5
apps/web/pages/dashboard.tsx
View File

@@ -105,8 +105,7 @@ const DashboardPage: NextPageWithLayout = (props: any) => {
hidden hidden
/> />
</div> </div>
<button <div
type="button"
onClick={() => { onClick={() => {
document?.getElementById("fileUploadHelper")?.click(); document?.getElementById("fileUploadHelper")?.click();
}} }}
@@ -128,7 +127,7 @@ const DashboardPage: NextPageWithLayout = (props: any) => {
<span className="mt-2 block text-sm font-medium text-neon"> <span className="mt-2 block text-sm font-medium text-neon">
Upload a new PDF document Upload a new PDF document
</span> </span>
</button> </div>
</div> </div>
</> </>
); );

15
apps/web/pages/documents.tsx
View File

@@ -15,6 +15,7 @@ import { uploadDocument } from "@documenso/features";
import { DocumentStatus } from "@prisma/client"; import { DocumentStatus } from "@prisma/client";
import { Tooltip as ReactTooltip } from "react-tooltip"; import { Tooltip as ReactTooltip } from "react-tooltip";
import { getDocumentsForUserFromToken } from "@documenso/lib/query"; import { getDocumentsForUserFromToken } from "@documenso/lib/query";
import { Button } from "@documenso/ui";
const DocumentsPage: NextPageWithLayout = (props: any) => { const DocumentsPage: NextPageWithLayout = (props: any) => {
const router = useRouter(); const router = useRouter();
@@ -54,15 +55,13 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
</header> </header>
</div> </div>
<div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none"> <div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
<button <Button
type="button"
className="inline-flex items-center justify-center rounded-md border border-transparent bg-neon px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-neon-dark focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
onClick={() => { onClick={() => {
document?.getElementById("fileUploadHelper")?.click(); document?.getElementById("fileUploadHelper")?.click();
}} }}
> >
Add Document Add Document
</button> </Button>
</div> </div>
</div> </div>
<div className="mt-10 max-w-[1100px]" hidden={!loading}> <div className="mt-10 max-w-[1100px]" hidden={!loading}>
@@ -251,16 +250,14 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
Get started by creating a new document. Get started by creating a new document.
</p> </p>
<div className="mt-6"> <div className="mt-6">
<button <Button
type="button" icon={PlusIcon}
onClick={() => { onClick={() => {
document?.getElementById("fileUploadHelper")?.click(); document?.getElementById("fileUploadHelper")?.click();
}} }}
className="inline-flex items-center rounded-md border border-transparent bg-neon px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
> >
<PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
Upload Document Upload Document
</button> </Button>
<input <input
id="fileUploadHelper" id="fileUploadHelper"
type="file" type="file"

9
apps/web/pages/documents/[id]/index.tsx
View File

@@ -17,6 +17,7 @@ import {
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { getDocument } from "@documenso/lib/query"; import { getDocument } from "@documenso/lib/query";
import { Document as PrismaDocument } from "@prisma/client"; import { Document as PrismaDocument } from "@prisma/client";
import { Button } from "@documenso/ui";
const PDFViewer = dynamic(() => import("../../../components/pdf-viewer"), { const PDFViewer = dynamic(() => import("../../../components/pdf-viewer"), {
ssr: false, ssr: false,
@@ -108,8 +109,8 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
<UserPlusIcon className="inline text-white h-4 mr-1"></UserPlusIcon> <UserPlusIcon className="inline text-white h-4 mr-1"></UserPlusIcon>
Add Recipients Add Recipients
</Link> </Link>
<button <Button
type="button" icon={PaperAirplaneIcon}
disabled={(props?.document?.Recipient?.length || 0) === 0} disabled={(props?.document?.Recipient?.length || 0) === 0}
onClick={() => { onClick={() => {
if ( if (
@@ -120,11 +121,9 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
alert(); alert();
} }
}} }}
className="ml-3 inline-flex items-center rounded-md border border-transparent bg-neon disabled:bg-gray-300 px-4 py-2 text-sm font-medium text-white shadow-sm bg-grey hover:bg-neon-dark focus:outline-none focus:ring-2 focus:neon-dark focus:ring-offset-2"
> >
<PaperAirplaneIcon className="inline text-white w-4 mr-1"></PaperAirplaneIcon>
Send Send
</button> </Button>
</div> </div>
</div> </div>
</div> </div>

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

@@ -1,20 +1,26 @@
import { classNames } from "@documenso/lib"; import { classNames } from "@documenso/lib";
import Link from "next/link"; import Link from "next/link";
import React from "react"; import React from "react";
import { Tooltip } from "react-tooltip";
import short from "short-uuid";
export function Button(props: any) { export function Button(props: any) {
const isLink = typeof props.href !== "undefined"; const isLink = typeof props.href !== "undefined";
const { color = "primary", icon, disabled, onClick } = props; const { color = "primary", icon, disabled, onClick } = props;
const baseStyles = const baseStyles =
"inline-flex items-center justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white shadow-sm sm:w-auto disabled:bg-gray-300"; "inline-flex items-center justify-center min-w-[80px] rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white shadow-sm disabled:bg-gray-300";
const primaryStyles = "bg-neon hover:bg-neon-dark"; const primaryStyles = "bg-neon hover:bg-neon-dark";
const secondaryStyles = const secondaryStyles =
"border-gray-300 bg-white text-gray-700 hover:bg-gray-50"; "border-gray-300 bg-white text-gray-700 hover:bg-gray-50";
return isLink ? ( return isLink ? (
<Link id={props.id} href={props.href} className={classNames(baseStyles)}> <Link
id={props.id}
href={props.href}
className={classNames(
baseStyles,
color === "primary" ? primaryStyles : secondaryStyles,
props.className
)}
>
{props.children} {props.children}
</Link> </Link>
) : ( ) : (
@@ -22,12 +28,20 @@ export function Button(props: any) {
id={props.id} id={props.id}
className={classNames( className={classNames(
baseStyles, baseStyles,
color === "primary" ? primaryStyles : secondaryStyles color === "primary" ? primaryStyles : secondaryStyles,
props.className
)} )}
onClick={props.onClick} onClick={props.onClick}
{...props} disabled={props.disabled}
> >
<props.icon className="inline text-inherit w-4 mr-1"></props.icon> {props.icon ? (
<props.icon
className="inline text-inherit w-4 mr-1"
aria-hidden="true"
></props.icon>
) : (
""
)}
{props.children} {props.children}
</button> </button>
); );

2
packages/ui/components/button/index.ts
View File

@@ -1 +1 @@
export { Button } from "./button"; export { Button } from "./Button";

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

@@ -1 +0,0 @@
export { }

2
packages/ui/index.ts
View File

@@ -1 +1 @@
export { Button } from "./components/./button"; export { Button } from "./components/button/index";