Add setup for individual READMEs and add README content for components (#170)

Author: Dhaiwat10

.changeset/lovely-cars-thank.md

@@ -0,0 +1,5 @@
+---
+'@web3-ui/components': patch
+---
+
+Add README for the components package

.gitignore

@@ -1,6 +1,5 @@
 .DS_STORE
 packages/**/LICENSE
-packages/**/README.md
 
 node_modules
 .rpt2_cache

packages/components/README.md

@@ -0,0 +1,111 @@
+# @web3-ui/components
+
+A set of React components made for web3-specific use cases. Fully compatible with and built on top of ChakraUI.
+
+```bash
+yarn add @web3-ui/components
+```
+
+## Getting started
+
+At the root of your React app, wrap your app in the `<Provider>` component:
+
+```tsx
+// _app.tsx (or the root of your app)
+import { Provider } from '@web3-ui/components';
+
+// Passing in a theme is optional
+function MyApp({ Component, pageProps }) {
+  return (
+    <Provider theme={yourChakraTheme}>
+      <Component {...pageProps} />
+    </Provider>
+  );
+}
+```
+
+---
+
+## Components
+
+This is the list of components the package currently provides:
+
+- [Address](#address)
+- [AddressInput](#addressinput)
+- [NFT](#nft)
+- [NFTGallery](#nftgallery)
+- [Provider](#provider)
+- [TokenGate](#tokengate)
+
+---
+
+### Address
+
+The Address component takes in an Ethereum address or ENS name and displays it in a human-readable format.
+
+```tsx
+<Address value='dhaiwat.eth' shortened copiable>
+```
+
+`shortened` and `copiable` are optional props.
+
+---
+
+### AddressInput
+
+The AddressInput component is an input for Ethereum addresses. It supports ENS names too.
+
+```tsx
+<AddressInput value={value} onChange={setValue} provider={provider} />
+```
+
+You need to pass in a `provider` prop if you want to use ENS names.
+
+---
+
+### NFT
+
+The NFT component takes in the contract address and the token ID of an NFT and displays it as a card.
+
+```tsx
+<NFT contractAddress="0xxxxx0x0x0x0x0x" tokenId={30} size="md" />
+```
+
+The `size` prop is optional.
+
+---
+
+### NFTGallery
+
+The NFTGallery component renders a grid of all the NFTs owned by an account. It accepts ENS names too.
+
+```tsx
+<NFTGallery address="vitalik.eth" web3Provider={provider} gridWidth={4} />
+```
+
+You need to pass in a `web3Provider` if you want to support ENS names. We know this is not ideal and are fixing it.
+
+`gridWidth` is an optional prop.
+
+---
+
+### Provider
+
+The Provider component is the `web3-ui` equivalent of ChakraUI's `ChakraProvider` component. You need to wrap this component around your entire App. See [Getting Started](#getting-started) for an example.
+
+---
+
+### TokenGate
+
+The TokenGate component lets you conditionally render some content depending on whether the user owns some quantity of tokens or not.
+
+```tsx
+<TokenGate
+  requiredQuantity={10}
+  walletBalance={walletBalance}
+  deniedMessage={<p>This will be rendered if walletBalance is less than 10.</p>}
+>
+  <h1>You're eligible!</h1>
+  <p>This will be rendered if walletBalance is greater than or equal to 10.</p>
+</TokenGate>
+```

packages/components/package.json

@@ -21,7 +21,7 @@
     "build": "preconstruct build",
     "format": "prettier --write \"src/**/*.{ts,tsx,json,js,jsx}\"",
     "format:check": "prettier --list-different \"src/**/*.{ts,tsx,json,js,jsx}\"",
-    "prepublishOnly": "yarn build && cp ../../LICENSE ./LICENSE && cp ../../README.md ./README.md"
+    "prepublishOnly": "yarn build && cp ../../LICENSE ./LICENSE"
   },
   "main": "dist/web3-ui-components.cjs.js",
   "module": "dist/web3-ui-components.esm.js",

packages/components/src/components/TokenGate/TokenGate.tsx

@@ -17,11 +17,15 @@ export interface TokenGateProps {
    */
   deniedMessage?: ReactNode;
 }
+
+/**
+ * A 'token gate' that renders some content depending on whether the user has the required quantity of a token or not.
+ */
 export const TokenGate: React.FC<TokenGateProps> = ({
   walletBalance,
   requiredQuantity = 1,
   children,
-  deniedMessage,
+  deniedMessage
 }) => {
   // return children within simple container
   return (

packages/core/README.md

@@ -0,0 +1,3 @@
+# @web3-ui/core
+
+To be populated.

packages/core/package.json

@@ -21,7 +21,7 @@
     "build": "preconstruct build",
     "format": "prettier --write \"src/**/*.{ts,tsx,json,js,jsx}\"",
     "format:check": "prettier --list-different \"src/**/*.{ts,tsx,json,js,jsx}\"",
-    "prepublishOnly": "yarn build && cp ../../LICENSE ./LICENSE && cp ../../README.md ./README.md"
+    "prepublishOnly": "yarn build && cp ../../LICENSE ./LICENSE"
   },
   "main": "dist/web3-ui-core.cjs.js",
   "module": "dist/web3-ui-core.esm.js",

packages/hooks/README.md

@@ -0,0 +1,3 @@
+# @web3-ui/hooks
+
+To be populated.

packages/hooks/package.json

@@ -24,7 +24,7 @@
     "test": "jest --maxWorkers=2",
     "test:watch": "yarn test --watch",
     "test:coverage": "jest --coverage --colors --maxWorkers=2",
-    "prepublishOnly": "yarn build && cp ../../LICENSE ./LICENSE && cp ../../README.md ./README.md"
+    "prepublishOnly": "yarn build && cp ../../LICENSE ./LICENSE"
   },
   "main": "dist/web3-ui-hooks.cjs.js",
   "module": "dist/web3-ui-hooks.esm.js",