-
Notifications
You must be signed in to change notification settings - Fork 47
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(web): setup basic widget ui (#1302)
- Loading branch information
Showing
20 changed files
with
1,756 additions
and
1,018 deletions.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| { | ||
| "$schema": "https://ui.shadcn.com/schema.json", | ||
| "style": "new-york", | ||
| "rsc": false, | ||
| "tsx": true, | ||
| "tailwind": { | ||
| "config": "tailwind.config.js", | ||
| "css": "@reearth-widget-ui/styles/globals.css", | ||
| "baseColor": "zinc", | ||
| "cssVariables": true, | ||
| "prefix": "tw-" | ||
| }, | ||
| "aliases": { | ||
| "components": "@reearth-widget-ui/components", | ||
| "utils": "@reearth-widget-ui/utils", | ||
| "ui": "@reearth-widget-ui/components/ui", | ||
| "lib": "@reearth-widget-ui/lib", | ||
| "hooks": "@reearth-widget-ui/hooks" | ||
| }, | ||
| "iconLibrary": "lucide" | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| export default { | ||
| plugins: { | ||
| tailwindcss: {}, | ||
| autoprefixer: {}, | ||
| }, | ||
| } |
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
37 changes: 37 additions & 0 deletions
37
web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/GoogleMapSearch/index.tsx
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 |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { Card } from "@reearth/beta/lib/reearth-widget-ui/components/ui/card"; | ||
| import { Input } from "@reearth/beta/lib/reearth-widget-ui/components/ui/input"; | ||
| import { Search } from "lucide-react"; | ||
| import { FC, useMemo } from "react"; | ||
|
|
||
| import type { ComponentProps as WidgetProps } from "../.."; | ||
| import { CommonBuiltInWidgetProperty } from "../types"; | ||
|
|
||
| type Property = CommonBuiltInWidgetProperty & { | ||
| default?: { | ||
| apiToken?: string; | ||
| }; | ||
| }; | ||
| type GoogleMapSearchProps = WidgetProps<Property>; | ||
|
|
||
| const GoogleMapSearch: FC<GoogleMapSearchProps> = ({ widget }) => { | ||
| const theme = useMemo( | ||
| () => widget.property?.appearance?.theme ?? "light", | ||
| [widget.property?.appearance?.theme] | ||
| ); | ||
|
|
||
| return ( | ||
| <div className={theme}> | ||
| <Card className="tw-pl-3 tw-w-[400px] tw-flex tw-items-center tw-bg-background tw-text-foreground tw-rounded-md tw-border-0"> | ||
| <span className="tw-text-foreground"> | ||
| <Search className="tw-w-5 tw-h-5" /> | ||
| </span> | ||
| <Input | ||
| className={"tw-border-0"} | ||
| placeholder="Type a keyword to search..." | ||
| /> | ||
| </Card> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default GoogleMapSearch; |
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
5 changes: 5 additions & 0 deletions
5
web/src/beta/features/Visualizer/Crust/Widgets/Widget/builtin/types.ts
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 |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export type CommonBuiltInWidgetProperty = { | ||
| appearance?: { | ||
| theme?: "light" | "dark"; | ||
| }; | ||
| }; |
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
56 changes: 56 additions & 0 deletions
56
web/src/beta/lib/reearth-widget-ui/components/ui/button.tsx
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 |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import { Slot } from "@radix-ui/react-slot"; | ||
| import { cn } from "@reearth-widget-ui/utils"; | ||
| import { cva, type VariantProps } from "class-variance-authority"; | ||
| import * as React from "react"; | ||
|
|
||
| const buttonVariants = cva( | ||
| "tw-inline-flex tw-items-center tw-justify-center tw-gap-2 tw-whitespace-nowrap tw-rounded-md tw-text-sm tw-font-medium tw-transition-colors focus-visible:tw-outline-none focus-visible:tw-ring-1 focus-visible:tw-ring-ring disabled:tw-pointer-events-none disabled:tw-opacity-50 [&_svg]:tw-pointer-events-none [&_svg]:tw-size-4 [&_svg]:tw-shrink-0", | ||
| { | ||
| variants: { | ||
| variant: { | ||
| default: | ||
| "tw-bg-primary tw-text-primary-foreground tw-shadow hover:tw-bg-primary/90", | ||
| destructive: | ||
| "tw-bg-destructive tw-text-destructive-foreground tw-shadow-sm hover:tw-bg-destructive/90", | ||
| outline: | ||
| "tw-border tw-border-input tw-bg-background tw-shadow-sm hover:tw-bg-accent hover:tw-text-accent-foreground", | ||
| secondary: | ||
| "tw-bg-secondary tw-text-secondary-foreground tw-shadow-sm hover:tw-bg-secondary/80", | ||
| ghost: "hover:tw-bg-accent hover:tw-text-accent-foreground", | ||
| link: "tw-text-primary tw-underline-offset-4 hover:tw-underline" | ||
| }, | ||
| size: { | ||
| default: "tw-h-9 tw-px-4 tw-py-2", | ||
| sm: "tw-h-8 tw-rounded-md tw-px-3 tw-text-xs", | ||
| lg: "tw-h-10 tw-rounded-md tw-px-8", | ||
| icon: "tw-h-9 tw-w-9" | ||
| } | ||
| }, | ||
| defaultVariants: { | ||
| variant: "default", | ||
| size: "default" | ||
| } | ||
| } | ||
| ); | ||
|
|
||
| export interface ButtonProps | ||
| extends React.ButtonHTMLAttributes<HTMLButtonElement>, | ||
| VariantProps<typeof buttonVariants> { | ||
| asChild?: boolean; | ||
| } | ||
|
|
||
| const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( | ||
| ({ className, variant, size, asChild = false, ...props }, ref) => { | ||
| const Comp = asChild ? Slot : "button"; | ||
| return ( | ||
| <Comp | ||
| className={cn(buttonVariants({ variant, size, className }))} | ||
| ref={ref} | ||
| {...props} | ||
| /> | ||
| ); | ||
| } | ||
| ); | ||
| Button.displayName = "Button"; | ||
|
|
||
| export { Button, buttonVariants }; |
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 |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import { cn } from "@reearth-widget-ui/utils"; | ||
| import * as React from "react"; | ||
|
|
||
| const Card = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| className={cn( | ||
| "tw-rounded-md tw-border tw-bg-card tw-text-card-foreground tw-shadow", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
| Card.displayName = "Card"; | ||
|
|
||
| const CardHeader = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| className={cn("tw-flex tw-flex-col tw-space-y-1.5 tw-p-6", className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| CardHeader.displayName = "CardHeader"; | ||
|
|
||
| const CardTitle = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| className={cn( | ||
| "tw-font-semibold tw-leading-none tw-tracking-tight", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
| CardTitle.displayName = "CardTitle"; | ||
|
|
||
| const CardDescription = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| className={cn("tw-text-sm tw-text-muted-foreground", className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| CardDescription.displayName = "CardDescription"; | ||
|
|
||
| const CardContent = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div ref={ref} className={cn("tw-p-6 tw-pt-0", className)} {...props} /> | ||
| )); | ||
| CardContent.displayName = "CardContent"; | ||
|
|
||
| const CardFooter = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| className={cn("tw-flex tw-items-center tw-p-6 tw-pt-0", className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| CardFooter.displayName = "CardFooter"; | ||
|
|
||
| export { | ||
| Card, | ||
| CardHeader, | ||
| CardFooter, | ||
| CardTitle, | ||
| CardDescription, | ||
| CardContent | ||
| }; |
Oops, something went wrong.