Merge pull request #69 from near/link-ui-lib

Replace packages/ui with published @near-pagoda/ui package

README.md

@@ -1,15 +1,11 @@
 # Pagoda Experiments
 
-This monorepo contains multiple product experiments built on the blockchain. These products will be aimed at a mix of end users and developers.
+This monorepo contains product experiments built on the blockchain.
 
 ## Apps
 
 - Ticketing (`apps/ticketing`): https://github.com/near/near-discovery/issues/1165
 
-## Packages
-
-- Pagoda UI (`packages/ui`). Our DIG components have been ported over and refactored into a shareable package for all of our apps in this monorepo. We'll continue to add more components to this package as we discover new components that should be reusable between apps. Each component should have a corresponding `README.md` file that gives examples and options for using the component.
-
 ## Getting Started
 
 This project requires [pnpm](https://pnpm.io/installation) version `9.1.1`. The strict version requirement will help keep our lockfile consistent as more developers contribute.
@@ -43,8 +39,6 @@ pnpm dev
 
 _NOTE: You'll most likely see a warning when starting up the server: `React does not recognize the fetchPriority prop`. You can safely ignore this for now. There's a fix for Next JS that hasn't been released quite yet: https://github.com/vercel/next.js/issues/65161_
 
-Since each app compiles imports from `packages/ui` on its own via Next JS's [externalDir](https://stackoverflow.com/a/72842944) config option, you don't need to run any additional commands when needing to make changes inside `packages/ui`. Simply boot up one of the development servers inside the `apps` folder. Any changes to `packages/ui` will be detected and hot reloaded automatically by the Next JS development server.
-
 ### Environment Variables
 
 If the app you're developing against contains an `.env.example` config file, make a copy of it to configure your own variable values locally:

apps/ticketing/package.json

@@ -16,14 +16,14 @@
   },
   "dependencies": {
     "@keypom/core": "^1.0.0",
+    "@near-pagoda/ui": "^0.2.1",
     "@near-wallet-selector/core": "^8.9.7",
     "@near-wallet-selector/here-wallet": "8.9.7",
     "@near-wallet-selector/meteor-wallet": "^8.9.7",
     "@near-wallet-selector/modal-ui": "^8.9.7",
     "@near-wallet-selector/my-near-wallet": "^8.9.7",
     "@near-wallet-selector/nightly": "^8.9.7",
     "@near-wallet-selector/sender": "^8.9.7",
-    "@pagoda/ui": "workspace:*",
     "@phosphor-icons/react": "^2.1.5",
     "@tanstack/react-query": "^5.48.0",
     "@walletpass/pass-js": "^6.9.1",
@@ -33,7 +33,7 @@
     "luxon": "^3.4.4",
     "near-api-js": "2.1.4",
     "near-fastauth-wallet": "^2.0.1",
-    "next": "^14",
+    "next": "^14.2.3",
     "qr-scanner": "^1.4.2",
     "react": "^18",
     "react-dom": "^18",

apps/ticketing/src/components/AccountDropdown.tsx

@@ -1,6 +1,4 @@
-import { Button } from '@pagoda/ui/src/components/Button';
-import * as Dropdown from '@pagoda/ui/src/components/Dropdown';
-import { SvgIcon } from '@pagoda/ui/src/components/SvgIcon';
+import { Button, Dropdown, SvgIcon } from '@near-pagoda/ui';
 import { Gear, User, X } from '@phosphor-icons/react';
 
 import { useWalletStore } from '@/stores/wallet';

apps/ticketing/src/components/AddToAppleWallet.tsx

@@ -1,4 +1,4 @@
-import { openToast } from '@pagoda/ui/src/components/Toast';
+import { openToast } from '@near-pagoda/ui';
 import { MouseEventHandler } from 'react';
 
 import { usePurchasedTickets } from '@/hooks/usePurchasedTickets';

apps/ticketing/src/components/FilePreviews.tsx

@@ -1,4 +1,4 @@
-import { Flex } from '@pagoda/ui/src/components/Flex';
+import { Flex } from '@near-pagoda/ui';
 
 import { convertFileListToPreviewUrls } from '@/utils/file';
 

apps/ticketing/src/components/QrCodeScanner.tsx

@@ -1,5 +1,4 @@
-import { openToast } from '@pagoda/ui/src/components/Toast';
-import { useDebouncedFunction } from '@pagoda/ui/src/hooks/debounce';
+import { openToast, useDebouncedFunction } from '@near-pagoda/ui';
 import { Spinner } from '@phosphor-icons/react';
 import QrScanner from 'qr-scanner';
 import { useEffect, useRef } from 'react';

apps/ticketing/src/components/layouts/DefaultLayout.tsx

@@ -1,8 +1,4 @@
-import { Button } from '@pagoda/ui/src/components/Button';
-import { Container } from '@pagoda/ui/src/components/Container';
-import { Flex } from '@pagoda/ui/src/components/Flex';
-import { Section } from '@pagoda/ui/src/components/Section';
-import { Text } from '@pagoda/ui/src/components/Text';
+import { Button, Container, Flex, Section, Text } from '@near-pagoda/ui';
 import { Wallet } from '@phosphor-icons/react';
 import type { ReactNode } from 'react';
 

apps/ticketing/src/components/layouts/Footer.tsx

@@ -1,5 +1,4 @@
-import { Container } from '@pagoda/ui/src/components/Container';
-import { Text } from '@pagoda/ui/src/components/Text';
+import { Container, Text } from '@near-pagoda/ui';
 
 import NearLogoSvg from '@/svg/near-logo.svg';
 

apps/ticketing/src/components/layouts/Header.tsx

@@ -1,5 +1,4 @@
-import { Container } from '@pagoda/ui/src/components/Container';
-import { SvgIcon } from '@pagoda/ui/src/components/SvgIcon';
+import { Container, SvgIcon } from '@near-pagoda/ui';
 import { CalendarDots, PlusCircle, QrCode } from '@phosphor-icons/react';
 import Link from 'next/link';
 

apps/ticketing/src/hooks/useDrops.ts

@@ -1,4 +1,4 @@
-import { handleClientError } from '@pagoda/ui/src/utils/error';
+import { handleClientError } from '@near-pagoda/ui';
 import { useQuery } from '@tanstack/react-query';
 
 import { useNearStore } from '@/stores/near';

apps/ticketing/src/hooks/useEvents.ts

@@ -1,4 +1,4 @@
-import { handleClientError } from '@pagoda/ui/src/utils/error';
+import { handleClientError } from '@near-pagoda/ui';
 import { useQuery } from '@tanstack/react-query';
 
 import { useNearStore } from '@/stores/near';

apps/ticketing/src/hooks/usePurchasedTickets.ts

@@ -1,5 +1,5 @@
 import { getPubFromSecret } from '@keypom/core';
-import { handleClientError } from '@pagoda/ui/src/utils/error';
+import { handleClientError } from '@near-pagoda/ui';
 import { useQuery } from '@tanstack/react-query';
 import { Account } from 'near-api-js';
 

apps/ticketing/src/hooks/useStripe.ts

@@ -1,4 +1,4 @@
-import { handleClientError } from '@pagoda/ui/src/utils/error';
+import { handleClientError } from '@near-pagoda/ui';
 import { useQuery } from '@tanstack/react-query';
 import { v4 as uuidv4 } from 'uuid';
 

apps/ticketing/src/pages/_app.tsx

@@ -1,9 +1,9 @@
-import '@pagoda/ui/src/styles/reset.css';
-import '@pagoda/ui/src/styles/theme.css';
+import '@near-pagoda/ui/globals.css';
+import '@near-pagoda/ui/theme.css';
+import '@near-pagoda/ui/lib.css';
 import '@near-wallet-selector/modal-ui/styles.css';
-import '@pagoda/ui/src/styles/globals.css';
 
-import { Toaster } from '@pagoda/ui/src/components/Toast';
+import { Toaster } from '@near-pagoda/ui';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';

apps/ticketing/src/pages/events/[eventId]/edit.tsx

@@ -1,12 +1,4 @@
-import { Button } from '@pagoda/ui/src/components/Button';
-import { Card } from '@pagoda/ui/src/components/Card';
-import { Container } from '@pagoda/ui/src/components/Container';
-import * as Dropdown from '@pagoda/ui/src/components/Dropdown';
-import { Flex } from '@pagoda/ui/src/components/Flex';
-import { Section } from '@pagoda/ui/src/components/Section';
-import { SvgIcon } from '@pagoda/ui/src/components/SvgIcon';
-import { Text } from '@pagoda/ui/src/components/Text';
-import { copyTextToClipboard } from '@pagoda/ui/src/utils/clipboard';
+import { Button, Card, Container, copyTextToClipboard, Dropdown, Flex, Section, SvgIcon, Text } from '@near-pagoda/ui';
 import { CalendarBlank, CalendarDots, Link, List, QrCode } from '@phosphor-icons/react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';

apps/ticketing/src/pages/events/[eventId]/index.tsx

@@ -1,18 +1,20 @@
-import { Button } from '@pagoda/ui/src/components/Button';
-import { Container } from '@pagoda/ui/src/components/Container';
-import { Flex } from '@pagoda/ui/src/components/Flex';
-import { Grid } from '@pagoda/ui/src/components/Grid';
-import { HR } from '@pagoda/ui/src/components/HorizontalRule';
-import { MetaTags } from '@pagoda/ui/src/components/MetaTags';
-import { Section } from '@pagoda/ui/src/components/Section';
-import { SvgIcon } from '@pagoda/ui/src/components/SvgIcon';
-import { Text } from '@pagoda/ui/src/components/Text';
-import { Tooltip } from '@pagoda/ui/src/components/Tooltip';
-import { copyTextToClipboard } from '@pagoda/ui/src/utils/clipboard';
+import {
+  Button,
+  Container,
+  copyTextToClipboard,
+  Flex,
+  Grid,
+  HR,
+  Section,
+  SvgIcon,
+  Text,
+  Tooltip,
+} from '@near-pagoda/ui';
 import { Clock, ImageSquare, Link, MapPinArea, Pencil, Ticket } from '@phosphor-icons/react';
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 import { useRouter } from 'next/router';
 
+import { MetaTags } from '@/components/MetaTags';
 import { useDefaultLayout } from '@/hooks/useLayout';
 import { useWalletStore } from '@/stores/wallet';
 import { CLOUDFLARE_IPFS } from '@/utils/config';

apps/ticketing/src/pages/events/[eventId]/scan.tsx

@@ -1,13 +1,15 @@
-import { Button } from '@pagoda/ui/src/components/Button';
-import { Card } from '@pagoda/ui/src/components/Card';
-import { Container } from '@pagoda/ui/src/components/Container';
-import { Flex } from '@pagoda/ui/src/components/Flex';
-import { HR } from '@pagoda/ui/src/components/HorizontalRule';
-import { PlaceholderSection } from '@pagoda/ui/src/components/Placeholder';
-import { Section } from '@pagoda/ui/src/components/Section';
-import { SvgIcon } from '@pagoda/ui/src/components/SvgIcon';
-import { Text } from '@pagoda/ui/src/components/Text';
-import { openToast } from '@pagoda/ui/src/components/Toast';
+import {
+  Button,
+  Card,
+  Container,
+  Flex,
+  HR,
+  openToast,
+  PlaceholderSection,
+  Section,
+  SvgIcon,
+  Text,
+} from '@near-pagoda/ui';
 import { CalendarDots, Clock, QrCode } from '@phosphor-icons/react';
 import { useMutation } from '@tanstack/react-query';
 import Head from 'next/head';

apps/ticketing/src/pages/events/[eventId]/tickets.tsx

@@ -1,19 +1,21 @@
-import { AssistiveText } from '@pagoda/ui/src/components/AssistiveText';
-import { Button } from '@pagoda/ui/src/components/Button';
-import { Card } from '@pagoda/ui/src/components/Card';
-import { Container } from '@pagoda/ui/src/components/Container';
-import { Flex } from '@pagoda/ui/src/components/Flex';
-import { Form } from '@pagoda/ui/src/components/Form';
-import { Grid } from '@pagoda/ui/src/components/Grid';
-import { HR } from '@pagoda/ui/src/components/HorizontalRule';
-import { Input } from '@pagoda/ui/src/components/Input';
-import { PlaceholderSection } from '@pagoda/ui/src/components/Placeholder';
-import { Section } from '@pagoda/ui/src/components/Section';
-import { SvgIcon } from '@pagoda/ui/src/components/SvgIcon';
-import { Text } from '@pagoda/ui/src/components/Text';
-import { openToast } from '@pagoda/ui/src/components/Toast';
-import { Tooltip } from '@pagoda/ui/src/components/Tooltip';
-import { handleClientError } from '@pagoda/ui/src/utils/error';
+import {
+  AssistiveText,
+  Button,
+  Card,
+  Container,
+  Flex,
+  Form,
+  Grid,
+  handleClientError,
+  HR,
+  Input,
+  openToast,
+  PlaceholderSection,
+  Section,
+  SvgIcon,
+  Text,
+  Tooltip,
+} from '@near-pagoda/ui';
 import { ArrowLeft, ArrowRight, Clock, Envelope, MapPinArea, Minus, Plus, Ticket } from '@phosphor-icons/react';
 import { useMutation } from '@tanstack/react-query';
 import Head from 'next/head';

apps/ticketing/src/pages/events/index.tsx

@@ -1,14 +1,16 @@
-import { Badge } from '@pagoda/ui/src/components/Badge';
-import { Button } from '@pagoda/ui/src/components/Button';
-import * as Dropdown from '@pagoda/ui/src/components/Dropdown';
-import { Flex } from '@pagoda/ui/src/components/Flex';
-import { Section } from '@pagoda/ui/src/components/Section';
-import { SvgIcon } from '@pagoda/ui/src/components/SvgIcon';
-import * as Table from '@pagoda/ui/src/components/Table';
-import { Text } from '@pagoda/ui/src/components/Text';
-import { Tooltip } from '@pagoda/ui/src/components/Tooltip';
-import { copyTextToClipboard } from '@pagoda/ui/src/utils/clipboard';
-import { unreachable } from '@pagoda/ui/src/utils/unreachable';
+import {
+  Badge,
+  Button,
+  copyTextToClipboard,
+  Dropdown,
+  Flex,
+  Section,
+  SvgIcon,
+  Table,
+  Text,
+  Tooltip,
+  unreachable,
+} from '@near-pagoda/ui';
 import { CalendarDots, Link, List, Pencil, Plus, QrCode } from '@phosphor-icons/react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';

apps/ticketing/src/pages/events/new.tsx

@@ -1,18 +1,20 @@
-import { AssistiveText } from '@pagoda/ui/src/components/AssistiveText';
-import { Badge } from '@pagoda/ui/src/components/Badge';
-import { Button } from '@pagoda/ui/src/components/Button';
-import { Card } from '@pagoda/ui/src/components/Card';
-import { Container } from '@pagoda/ui/src/components/Container';
-import { Flex } from '@pagoda/ui/src/components/Flex';
-import { Form } from '@pagoda/ui/src/components/Form';
-import { Input } from '@pagoda/ui/src/components/Input';
-import { InputTextarea } from '@pagoda/ui/src/components/InputTextarea';
-import { Section } from '@pagoda/ui/src/components/Section';
-import { SvgIcon } from '@pagoda/ui/src/components/SvgIcon';
-import { Text } from '@pagoda/ui/src/components/Text';
-import { openToast } from '@pagoda/ui/src/components/Toast';
-import { Tooltip } from '@pagoda/ui/src/components/Tooltip';
-import { handleClientError } from '@pagoda/ui/src/utils/error';
+import {
+  AssistiveText,
+  Badge,
+  Button,
+  Card,
+  Container,
+  Flex,
+  Form,
+  handleClientError,
+  Input,
+  InputTextarea,
+  openToast,
+  Section,
+  SvgIcon,
+  Text,
+  Tooltip,
+} from '@near-pagoda/ui';
 import {
   ArrowRight,
   CalendarPlus,

apps/ticketing/src/pages/index.tsx

@@ -1,11 +1,4 @@
-import { Button } from '@pagoda/ui/src/components/Button';
-import { Card } from '@pagoda/ui/src/components/Card';
-import { Flex } from '@pagoda/ui/src/components/Flex';
-import { Grid } from '@pagoda/ui/src/components/Grid';
-import { HR } from '@pagoda/ui/src/components/HorizontalRule';
-import { Section } from '@pagoda/ui/src/components/Section';
-import { SvgIcon } from '@pagoda/ui/src/components/SvgIcon';
-import { Text } from '@pagoda/ui/src/components/Text';
+import { Button, Card, Flex, Grid, HR, Section, SvgIcon, Text } from '@near-pagoda/ui';
 import { CalendarDots, HandPeace, Plus, Ticket } from '@phosphor-icons/react';
 
 import { useDefaultLayout } from '@/hooks/useLayout';

apps/ticketing/src/pages/tickets/purchased.tsx

@@ -6,18 +6,20 @@
   - Multiple tickets: /tickets/purchased#1,2,3
 */
 
-import { Button } from '@pagoda/ui/src/components/Button';
-import { Card } from '@pagoda/ui/src/components/Card';
-import { Container } from '@pagoda/ui/src/components/Container';
-import { Flex } from '@pagoda/ui/src/components/Flex';
-import { Grid } from '@pagoda/ui/src/components/Grid';
-import { HR } from '@pagoda/ui/src/components/HorizontalRule';
-import { PlaceholderSection } from '@pagoda/ui/src/components/Placeholder';
-import { Section } from '@pagoda/ui/src/components/Section';
-import { SvgIcon } from '@pagoda/ui/src/components/SvgIcon';
-import { Text } from '@pagoda/ui/src/components/Text';
-import { openToast } from '@pagoda/ui/src/components/Toast';
-import { Tooltip } from '@pagoda/ui/src/components/Tooltip';
+import {
+  Button,
+  Card,
+  Container,
+  Flex,
+  Grid,
+  HR,
+  openToast,
+  PlaceholderSection,
+  Section,
+  SvgIcon,
+  Text,
+  Tooltip,
+} from '@near-pagoda/ui';
 import { CalendarDots, Clock, DownloadSimple, MapPinArea, Ticket } from '@phosphor-icons/react';
 import html2canvas from 'html2canvas';
 import Head from 'next/head';

apps/ticketing/src/pages/tickets/ticket/[dropId].tsx

@@ -4,7 +4,7 @@
   redirect will allow us to keep using their worker in the mean time.
 */
 
-import { Section } from '@pagoda/ui/src/components/Section';
+import { Section } from '@near-pagoda/ui';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';

apps/ticketing/src/stores/stripe.ts

@@ -1,4 +1,4 @@
-import { handleClientError } from '@pagoda/ui/src/utils/error';
+import { handleClientError } from '@near-pagoda/ui';
 import { useQuery } from '@tanstack/react-query';
 import { v4 as uuidv4 } from 'uuid';
 import { create } from 'zustand';

apps/ticketing/src/utils/claim.ts

@@ -1,5 +1,5 @@
 import { getPubFromSecret } from '@keypom/core';
-import { openToast } from '@pagoda/ui/src/components/Toast';
+import { openToast } from '@near-pagoda/ui';
 import { Account, KeyPair, Near } from 'near-api-js';
 import { BrowserLocalStorageKeyStore } from 'near-api-js/lib/key_stores';