Updating docs and font import

README.md

@@ -2,23 +2,38 @@
 
 A React component library that implements the official design system of NEAR and Pagoda. Feel free to open up new issues for any bugs that you run into or any features/components you'd like to see implemented.
 
-*NOTE: As of now, this library has a peer dependency on Next JS since some of our components rely on `next/link` and hooks like `router.push()`. We'll look into refactoring the library soon to remove the Next JS requirement so that our library can be used within any React framework.*
+## Required Peer Dependencies
+
+**React 18**
+
+**Next JS >=13** - Some of our components rely on `next/link` and hooks like `router.push()`. We'll look into refactoring the library soon to remove the Next JS requirement so that our library can be used within any React framework.
+
+**Zustand 4** - Our `openToast()` method is able to work in any context due to relying on a Zustand global store.
 
 ## Installation
 
-TODO...
+```bash
+pnpm add zustand next
+pnpm add @near-pagoda/ui
+```
 
 ## Documentation
 
-TODO...
+Please refer to `README.md` files in `src/components` for examples and documentation of components.
 
 ## Contributing
 
 TODO...
 
 ## Local Development
 
-TODO... Walk through steps using `pnpm link` to test or see local changes within any project.
+Due to this library having peer dependencies, `pnpm link` isn't compatible. Follow these steps to preview local changes to the UI library within any project:
+
+- Have your project and the UI library cloned as siblings. EG: `projects/cool-project` and `projects/pagoda-ui`
+- Inside `pagoda-ui`, make sure you've installed dependencies and build your changes with `pnpm i` and `pnpm build`
+- Inside your project folder, run `pnpm i file:../pagoda-ui` and then boot up your dev server
+- After making any changes to `pagoda-ui`, make sure you run `pnpm build` to then see changes when previewing your project
+- Once you're done previewing changes, make sure you revert changes to the `package.json` and lock file in your project so that it no longer references `file:../pagoda-ui`.
 
 ## Publishing a Release
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-pagoda/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A React component library that implements the official NEAR design system.",
   "license": "MIT",
   "repository": {
@@ -91,6 +91,7 @@
     "prettier": "^3",
     "rollup": "^2.77.2",
     "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.77.8",

rollup.config.js

@@ -4,6 +4,7 @@ import terser from '@rollup/plugin-terser';
 import typescript from '@rollup/plugin-typescript';
 import postcssPresetEnv from 'postcss-preset-env';
 import copy from 'rollup-plugin-copy';
+import del from 'rollup-plugin-delete';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import postcss from 'rollup-plugin-postcss';
 
@@ -47,6 +48,7 @@ const options = {
         }),
       ],
     }),
+    del({ targets: 'dist/styles.css' }),
   ],
 };
 

src/components/Accordion.README.md

@@ -3,7 +3,7 @@
 Built with the Radix UI Accordion primitive: https://www.radix-ui.com/primitives/docs/components/accordion
 
 ```tsx
-import * as Accordion from '@pagoda/ui/src/components/Accordion';
+import { Accordion } from '@near-pagoda/ui';
 
 ...
 

src/components/Badge.README.md

@@ -1,7 +1,7 @@
 # Badge
 
 ```tsx
-import { Badge } from '@pagoda/ui/src/components/Badge';
+import { Badge } from '@near-pagoda/ui';
 
 ...
 

src/components/Button.README.md

@@ -1,7 +1,7 @@
 # Button
 
 ```tsx
-import { Button } from '@pagoda/ui/src/components/Button';
+import { Button } from '@near-pagoda/ui';
 import { Horse, Pizza } from '@phosphor-icons/react';
 
 ...

src/components/Card.README.md

@@ -1,8 +1,7 @@
 # Card
 
 ```tsx
-import { Card } from '@pagoda/ui/src/components/Card';
-import { Text } from '@pagoda/ui/src/components/Text';
+import { Card, Text } from '@near-pagoda/ui';
 
 ...
 

src/components/Checkbox.README.md

@@ -1,8 +1,7 @@
 # Checkbox
 
 ```tsx
-import { Checkbox } from '@pagoda/ui/src/components/Checkbox';
-import { Flex } from '@pagoda/ui/src/components/Flex';
+import { Checkbox, Flex } from '@near-pagoda/ui';
 
 ...
 
@@ -15,8 +14,7 @@ import { Flex } from '@pagoda/ui/src/components/Flex';
 ## Checkbox Group
 
 ```tsx
-import { Checkbox, CheckboxGroup } from '@pagoda/ui/src/components/Checkbox';
-import { Flex } from '@pagoda/ui/src/components/Flex';
+import { Checkbox, CheckboxGroup, Flex } from '@near-pagoda/ui';
 
 ...
 
@@ -38,8 +36,7 @@ import { Flex } from '@pagoda/ui/src/components/Flex';
 To switch from checkboxes to radios, simply apply `type="radio"` to each `<Checkbox />` component (and make sure they have matching `name` attributes):
 
 ```tsx
-import { Checkbox, CheckboxGroup } from '@pagoda/ui/src/components/Checkbox';
-import { Flex } from '@pagoda/ui/src/components/Flex';
+import { Checkbox, CheckboxGroup, Flex } from '@near-pagoda/ui';
 
 ...
 

src/components/Combobox.README.md

@@ -3,7 +3,7 @@
 Built with the Downshift `useCombobox()` hook: https://www.downshift-js.com/use-combobox
 
 ```tsx
-import { Combobox } from '@pagoda/ui/src/components/Combobox';
+import { Combobox } from '@near-pagoda/ui';
 
 ...
 

src/components/Dialog.README.md

@@ -3,7 +3,7 @@
 Built with the Radix UI Dialog primitive: https://www.radix-ui.com/primitives/docs/components/dialog
 
 ```tsx
-import * as Dialog from '@pagoda/ui/src/components/Dialog';
+import { Dialog } from '@near-pagoda/ui';
 
 ...
 

src/components/Dropdown.README.md

@@ -6,9 +6,7 @@ A more complex example when needing to implement sub dropdown menus:
 
 ```tsx
 import { Horse, Pizza } from '@phosphor-icons/react';
-import { Button } from '@pagoda/ui/src/components/Button';
-import { SvgIcon } from '@pagoda/ui/src/components/SvgIcon';
-import * as Dropdown from '@pagoda/ui/src/components/Dropdown';
+import { Button, Dropdown, SvgIcon } from '@near-pagoda/ui';
 
 ...
 

src/components/Flex.README.md

@@ -5,8 +5,7 @@ This component helps solve common flex layout requirements. If you need a more s
 https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 
 ```tsx
-import { Flex } from '@pagoda/ui/src/components/Flex';
-import { Text } from '@pagoda/ui/src/components/Text';
+import { Flex, Text } from '@near-pagoda/ui';
 
 ...
 

src/components/Grid.README.md

@@ -5,8 +5,7 @@ This component helps solve common grid layout requirements. If you need a more s
 https://css-tricks.com/snippets/css/complete-guide-grid/
 
 ```tsx
-import { Grid } from '@pagoda/ui/src/components/Grid';
-import { Card } from '@pagoda/ui/src/components/Card';
+import { Grid, Card } from '@near-pagoda/ui';
 
 ...
 

src/components/Input.README.md

@@ -1,7 +1,7 @@
 # Input
 
 ```tsx
-import { Input } from '@pagoda/ui/src/components/Input';
+import { Input } from '@near-pagoda/ui';
 
 ...
 

src/components/InputTextarea.README.md

@@ -1,7 +1,7 @@
 # Input Textarea
 
 ```tsx
-import { InputTextarea } from '@pagoda/ui/src/components/InputTextarea';
+import { InputTextarea } from '@near-pagoda/ui';
 
 ...
 

src/components/Section.README.md

@@ -3,7 +3,7 @@
 This component is most useful directly inside page components. They expand the entire width of the screen and apply a container to give the content a default max-width and flex stack gap. When multiple `<Section>` components are at the same level, a default border will be applied to help visually separate them.
 
 ```tsx
-import { Section } from '@pagoda/ui/src/components/Section';
+import { Section } from '@near-pagoda/ui';
 
 ...
 

src/components/SvgIcon.README.md

@@ -1,6 +1,7 @@
 # SVG Icon
 
 ```tsx
+import { SvgIcon } from '@near-pagoda/ui';
 import { Horse } from '@phosphor-icons/react';
 
 ...