Scaffolding of Basic Shared Components

.changeset/fair-queens-travel.md

@@ -0,0 +1,7 @@
+---
+"@polkadex/ux": major
+"docs": minor
+"web": minor
+---
+
+Scaffolding of Basic Shared Components

.github/workflows/pr-main.yml

@@ -2,7 +2,7 @@ name: CI Build and Test
 
 on:
   pull_request:
-    types: [labeled]
+    types: [labeled, synchronize]
   push:
     branches: [main]
 

apps/docs/app/page.tsx

@@ -1,5 +1,4 @@
 import Image from "next/image";
-import { Card } from "ui";
 
 import styles from "./page.module.css";
 
@@ -125,13 +124,7 @@ export default function Page(): JSX.Element {
         </div>
       </div>
 
-      <div className={styles.grid}>
-        {LINKS.map(({ title, href, description }) => (
-          <Card className={styles.card} href={href} key={title} title={title}>
-            {description}
-          </Card>
-        ))}
-      </div>
+      <div className={styles.grid}></div>
     </main>
   );
 }

apps/docs/next.config.js

@@ -1,4 +1,4 @@
 module.exports = {
   reactStrictMode: true,
-  transpilePackages: ["ui", "react-providers"],
+  transpilePackages: ["@polkadex/ux", "react-providers"],
 };

apps/docs/package.json

@@ -12,7 +12,7 @@
     "next": "^13.4.19",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "ui": "*"
+    "@polkadex/ux": "*"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^13.4.19",

apps/web/app/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 import Image from "next/image";
-import { Card } from "ui";
 
 import styles from "./page.module.css";
 
@@ -124,13 +123,7 @@ export default function Page(): JSX.Element {
           </div>
         </div>
       </div>
-      <div className={styles.grid}>
-        {LINKS.map(({ title, href, description }) => (
-          <Card className={styles.card} href={href} key={title} title={title}>
-            {description}
-          </Card>
-        ))}
-      </div>
+      <div className={styles.grid}></div>
     </main>
   );
 }

apps/web/next.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   reactStrictMode: false,
   transpilePackages: [
-    "ui",
+    "@polkadex/ux",
     "@polkadex/react-providers",
     "@chainsafe/metamask-polkadot-adapter",
   ],

apps/web/package.json

@@ -14,7 +14,7 @@
     "react-dom": "^18.2.0",
     "@polkadex/react-providers": "*",
     "@polkadot-cloud/react": "^0.1.127",
-    "ui": "*"
+    "@polkadex/ux": "*"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^13.4.19",

packages/ui/README.md

@@ -0,0 +1,7 @@
+# Polkadex UX
+
+## Getting Started
+An open source design system for building modern websites and applications.
+
+## Documentation
+Visit http://ux.polkadex.trade to view the documentation.

packages/ui/index.ts

@@ -0,0 +1,2 @@
+// component exports
+export * from "./src/components";

packages/ui/package.json

@@ -1,21 +1,47 @@
 {
-  "name": "ui",
-  "version": "0.0.0",
-  "main": "./index.tsx",
-  "types": "./index.tsx",
+  "name": "@polkadex/ux",
+  "version": "0.0.1",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "license": "MIT",
+  "files": [
+    "dist/**"
+  ],
   "scripts": {
-    "lint": "eslint .",
-    "generate:component": "turbo gen react-component"
+    "dev": "tsup index.ts --format esm,cjs --watch --dts",
+    "build": "tsup index.ts --format esm,cjs --dts",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "lint": "eslint ./src"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@turbo/gen": "^1.10.12",
     "@types/node": "^20.5.2",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "eslint-config-custom": "*",
-    "react": "^18.2.0",
+    "autoprefixer": "^10.4.16",
+    "classnames": "^2.3.2",
+    "@polkadex-ts/eslint-config": "*",
+    "postcss": "^8.4.31",
+    "tailwind-merge": "^2.0.0",
     "tsconfig": "*",
-    "typescript": "^4.5.2"
+    "typescript": "^4.5.2",
+    "tsup": "^7.2.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.0.18",
+    "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "tailwindcss": "^3.3.5",
+    "react-use": "^17.4.0"
   }
 }

packages/ui/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

packages/ui/src/components/button.tsx

@@ -0,0 +1,80 @@
+import { ComponentProps, ElementType, PropsWithChildren } from "react";
+import classNames from "classnames";
+import { twMerge } from "tailwind-merge";
+import { Slot } from "@radix-ui/react-slot";
+
+export interface ButtonProps extends ComponentProps<"button"> {
+  asChild?: boolean;
+  size?: keyof (typeof variants)["size"];
+  variant?: keyof (typeof variants)["variant"];
+}
+
+const variants = {
+  size: {
+    xs: "h-3 px-0.5 py-2 text-xs rounded-sm",
+    sm: "h-6 px-1 py-2 rounded-sm",
+    default: "h6 px-4 py-2 rounded-md",
+    md: "h-10 px-4 py-2 rounded-md",
+    lg: "h-14 px-8 py-4 text-md rounded-md",
+  },
+  variant: {
+    primary: "bg-primary-base hover:bg-primary-hover active:bg-primary-pressed",
+    secondary:
+      "bg-secondary-base hover:bg-secondary-hover active:bg-secondary-pressed",
+    ghost:
+      "bg-transparent hover:bg-secondary-pressed active:bg-secondary-hover text-primary hover:text-textBase",
+    outline:
+      "border border-secondary-base hover:bg-secondary-pressed active:bg-secondary-hover ",
+  },
+};
+
+const Base = ({
+  className,
+  asChild = false,
+  size = "default",
+  variant = "primary",
+  children,
+  ...props
+}: PropsWithChildren<ButtonProps>) => {
+  const Rendercomponent: ElementType = asChild ? Slot : "button";
+  return (
+    <Rendercomponent
+      className={twMerge(
+        classNames(
+          "transition-colors duration-300 font-medium text-sm",
+          "flex items-center justify-center",
+          "disabled:pointer-events-none disabled:opacity-50",
+          variants.size[size],
+          variants.variant[variant]
+        ),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </Rendercomponent>
+  );
+};
+
+const Primary = (props: PropsWithChildren<Omit<ButtonProps, "variant">>) => (
+  <Base variant="primary" {...props} />
+);
+
+const Secondary = (props: PropsWithChildren<Omit<ButtonProps, "variant">>) => (
+  <Base variant="secondary" {...props} />
+);
+
+const Ghost = (props: PropsWithChildren<Omit<ButtonProps, "variant">>) => (
+  <Base variant="ghost" {...props} />
+);
+
+const Outline = (props: PropsWithChildren<Omit<ButtonProps, "variant">>) => (
+  <Base variant="outline" {...props} />
+);
+
+export const Button = {
+  Primary,
+  Secondary,
+  Ghost,
+  Outline,
+};

packages/ui/src/components/copy.tsx

@@ -0,0 +1,53 @@
+import { ComponentProps, MouseEvent, PropsWithChildren, useState } from "react";
+import { DocumentDuplicateIcon } from "@heroicons/react/24/solid";
+import classNames from "classnames";
+import { TooltipContentProps } from "@radix-ui/react-tooltip";
+import { twMerge } from "tailwind-merge";
+
+import { Tooltip } from "./tooltip";
+
+interface CopyProps extends ComponentProps<"div"> {
+  value: string | number;
+  side?: TooltipContentProps["side"];
+}
+
+export const Copy = ({
+  value,
+  className,
+  side = "top",
+  children,
+}: PropsWithChildren<CopyProps>) => {
+  const [open, setOpen] = useState(false);
+  const [state, setState] = useState(false);
+
+  const onCopy = async (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!value) return;
+    try {
+      await navigator.clipboard.writeText(value.toString());
+      if (!state) setState(true);
+    } catch (error) {
+      console.error("Error copying to clipboard:", error);
+    }
+  };
+
+  const onMouseOut = () => state && setState(false);
+
+  return (
+    <Tooltip onOpenChange={setOpen} open={open}>
+      <Tooltip.Trigger onClick={onCopy} onMouseOut={onMouseOut}>
+        {children ?? (
+          <DocumentDuplicateIcon
+            className={twMerge(classNames("w-3 h-3 text-secondary"), className)}
+          />
+        )}
+      </Tooltip.Trigger>
+      <Tooltip.Content
+        side={side}
+        onPointerDownOutside={(e) => e.preventDefault()}
+      >
+        {state ? "Copied" : "Copy"}
+      </Tooltip.Content>
+    </Tooltip>
+  );
+};