[ts sdk] Add initial scaffold of SDK docs site (MystenLabs#13109)

## Description 

Describe the changes or additions included in this PR.

## Test Plan 

How did you test the new or updated feature?

---
If your changes are not user-facing and not a breaking change, you can
skip the following section. Otherwise, please indicate what changed, and
then add to the Release Notes section as highlighted during the release
process.

### Type of Change (Check all that apply)

- [ ] protocol change
- [ ] user-visible impact
- [ ] breaking change for a client SDKs
- [ ] breaking change for FNs (FN binary must upgrade)
- [ ] breaking change for validators or node operators (must upgrade
binaries)
- [ ] breaking change for on-chain data layout
- [ ] necessitate either a data wipe or data migration

### Release notes

.eslintrc.js

@@ -32,6 +32,8 @@ module.exports = {
 		'next-env.d.ts',
 		'doc/book',
 		'external-crates',
+		'storybook-static',
+		'.next',
 	],
 	rules: {
 		'no-case-declarations': 'off',

pnpm-workspace.yaml

@@ -1,14 +1,15 @@
 packages:
-    - 'sdk/**'
-    - 'apps/**'
-    - 'dapps/**'
-    - '!**/dist/**'
-    - '!sdk/typescript/*/**'
-    - '!sdk/typescript/builder'
-    - '!sdk/typescript/cryptography'
-    - '!sdk/typescript/faucet'
-    - '!sdk/typescript/transactions'
-    - '!sdk/typescript/client'
-    - '!sdk/typescript/verify'
-    - '!sdk/typescript/multisig'
-    - '!sdk/typescript/utils'
+  - 'sdk/**'
+  - 'apps/**'
+  - 'dapps/**'
+  - '!**/dist/**'
+  - '!**/.next/**'
+  - '!sdk/typescript/*/**'
+  - '!sdk/typescript/builder'
+  - '!sdk/typescript/cryptography'
+  - '!sdk/typescript/faucet'
+  - '!sdk/typescript/transactions'
+  - '!sdk/typescript/client'
+  - '!sdk/typescript/verify'
+  - '!sdk/typescript/multisig'
+  - '!sdk/typescript/utils'

prettier.config.js

@@ -16,5 +16,11 @@ module.exports = {
 				tailwindConfig: './apps/explorer/tailwind.config.ts',
 			},
 		},
+		{
+			files: 'sdk/**/*',
+			options: {
+				proseWrap: 'always',
+			},
+		},
 	],
 };

sdk/bcs/README.md

@@ -1,10 +1,13 @@
 # BCS - Binary Canonical Serialization
 
-This small and lightweight library implements [Binary Canonical Serialization (BCS)](https://github.com/zefchain/bcs) in JavaScript, making BCS available in both Browser and NodeJS environments.
+This small and lightweight library implements
+[Binary Canonical Serialization (BCS)](https://github.com/zefchain/bcs) in JavaScript, making BCS
+available in both Browser and NodeJS environments.
 
 ## Install
 
-To install, add the [`@mysten/bcs`](https://www.npmjs.com/package/@mysten/bcs) package to your project:
+To install, add the [`@mysten/bcs`](https://www.npmjs.com/package/@mysten/bcs) package to your
+project:
 
 ```sh
 npm i @mysten/bcs
@@ -45,11 +48,15 @@ console.log(data);
 
 ## Description
 
-BCS defines the way the data is serialized, and the result contains no type information. To be able to serialize the data and later deserialize, a schema has to be created (based on the built-in primitives, such as `address` or `u64`). There's no tip in the serialized bytes on what they mean, so the receiving part needs to know how to treat it.
+BCS defines the way the data is serialized, and the result contains no type information. To be able
+to serialize the data and later deserialize, a schema has to be created (based on the built-in
+primitives, such as `address` or `u64`). There's no tip in the serialized bytes on what they mean,
+so the receiving part needs to know how to treat it.
 
 ## Configuration
 
-BCS constructor is configurable for the target. The following parameters are available for custom configuration:
+BCS constructor is configurable for the target. The following parameters are available for custom
+configuration:
 
 | parameter           | required | description                                                               |
 | ------------------- | -------- | ------------------------------------------------------------------------- |
@@ -89,7 +96,8 @@ let bytes = bcs.ser('User', { name: 'Adam', age: '30' }).toString('base64');
 console.log(bytes);
 ```
 
-For Sui Move there's already a pre-built configuration which can be used through the `getSuiMoveConfig()` call.
+For Sui Move there's already a pre-built configuration which can be used through the
+`getSuiMoveConfig()` call.
 
 ```ts
 // Example: Sui Move Config
@@ -107,7 +115,8 @@ const res = bcs.de(['vector', BCS.U8], ser);
 console.assert(res.toString() === val.toString());
 ```
 
-Similar configuration exists for Rust, the difference is the `Vec<T>` for vectors and `address` (being a special Move type) is not needed:
+Similar configuration exists for Rust, the difference is the `Vec<T>` for vectors and `address`
+(being a special Move type) is not needed:
 
 ```ts
 // Example: Rust Config
@@ -123,9 +132,11 @@ console.assert(res.toString() === val.toString());
 
 ## Built-in types
 
-By default, BCS will have a set of built-in type definitions and handy abstractions; all of them are supported in Move.
+By default, BCS will have a set of built-in type definitions and handy abstractions; all of them are
+supported in Move.
 
-Supported integer types are: u8, u16, u32, u64, u128 and u256. Constants `BCS.U8` to `BCS.U256` are provided by the library.
+Supported integer types are: u8, u16, u32, u64, u128 and u256. Constants `BCS.U8` to `BCS.U256` are
+provided by the library.
 
 | Type                        | Constant                      | Description                                            |
 | --------------------------- | ----------------------------- | ------------------------------------------------------ |
@@ -210,7 +221,8 @@ console.assert((str1 == str2) == (str3 == str4), 'Result is the same');
 
 ### Alias
 
-Alias is a way to create custom name for a registered type. It is helpful for fine-tuning a predefined schema without making changes deep in the tree.
+Alias is a way to create custom name for a registered type. It is helpful for fine-tuning a
+predefined schema without making changes deep in the tree.
 
 ```ts
 // Example: Alias
@@ -230,7 +242,8 @@ let _hex = bcs.ser('ObjectDigest', 'C0FFEE').toBytes();
 
 ### Struct
 
-Structs are the most common way of working with data; in BCS, a struct is simply a sequence of base types.
+Structs are the most common way of working with data; in BCS, a struct is simply a sequence of base
+types.
 
 ```ts
 // Example: Struct
@@ -262,7 +275,8 @@ let _bytes = bcs
 
 ## Using Generics
 
-To define a generic struct or an enum, pass the type parameters. It can either be done as a part of a string or as an Array. See below:
+To define a generic struct or an enum, pass the type parameters. It can either be done as a part of
+a string or as an Array. See below:
 
 ```ts
 // Example: Generics
@@ -307,7 +321,9 @@ bcs.ser(['VecMap', BCS.STRING, BCS.STRING], {
 
 ### Enum
 
-In BCS enums are encoded in a special way - first byte marks the order and then the value. Enum is an object, only one property of which is used; if an invariant is empty, `null` should be used to mark it (see `Option<T>` below).
+In BCS enums are encoded in a special way - first byte marks the order and then the value. Enum is
+an object, only one property of which is used; if an invariant is empty, `null` should be used to
+mark it (see `Option<T>` below).
 
 ```ts
 // Example: Enum
@@ -349,9 +365,11 @@ let _optionTxBatch = bcs.ser('Option<TransactionType>', {
 
 ### Inline (de)serialization
 
-Sometimes it is useful to get a value without registering a new struct. For that inline struct definition can be used.
+Sometimes it is useful to get a value without registering a new struct. For that inline struct
+definition can be used.
 
-> Nested struct definitions are not yet supported, only first level properties can be used (but they can reference any type, including other struct types).
+> Nested struct definitions are not yet supported, only first level properties can be used (but they
+> can reference any type, including other struct types).
 
 ```ts
 // Example: Inline Struct
@@ -382,7 +400,8 @@ Currently, main applications of this library are:
 2. Deserializing onchain data for performance and formatting reasons
 3. Deserializing events
 
-In this library, all of the primitive Move types are present as built-ins, however, there's a set of special types in Sui which can be simplified to a primitive.
+In this library, all of the primitive Move types are present as built-ins, however, there's a set of
+special types in Sui which can be simplified to a primitive.
 
 ```rust
 // Definition in Move which we want to read in JS
@@ -430,9 +449,7 @@ struct UID has store {
     id: ID
 }
 
-struct ID has store, copy, drop {
-bytes: address
-}
+struct ID has store, copy, drop { bytes: address }
 
 // { id: { bytes: '0x.....' } }
 

sdk/docs/.prettierignore

@@ -0,0 +1,2 @@
+CHANGELOG.md
+.next

sdk/docs/next.config.js

@@ -0,0 +1,9 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+const withNextra = require('nextra')({
+	theme: 'nextra-theme-docs',
+	themeConfig: './theme.config.jsx',
+});
+
+module.exports = withNextra();

sdk/docs/package.json

@@ -0,0 +1,31 @@
+{
+	"name": "@mysten/sdk-docs",
+	"version": "1.0.0",
+	"description": "Docs for @mysten npm packages",
+	"main": "index.js",
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"prettier:check": "prettier -c --ignore-unknown .",
+		"prettier:fix": "prettier -w --ignore-unknown .",
+		"eslint:check": "eslint --max-warnings=0 .",
+		"eslint:fix": "pnpm run eslint:check --fix",
+		"lint": "pnpm run eslint:check && pnpm run prettier:check",
+		"lint:fix": "pnpm run eslint:fix && pnpm run prettier:fix"
+	},
+	"publishConfig": {
+		"access": "restricted"
+	},
+	"keywords": [],
+	"author": "Mysten Labs <[email protected]>",
+	"license": "Apache-2.0",
+	"dependencies": {
+		"@types/node": "^20.4.2",
+		"next": "^13.4.10",
+		"nextra": "^2.10.0",
+		"nextra-theme-docs": "^2.10.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0"
+	}
+}

sdk/docs/pages/_meta.json

@@ -0,0 +1,13 @@
+{
+	"index": {
+		"title": "Home"
+	},
+	"typescript-sdk": {
+		"title": "TypeScript SDK",
+		"type": "page"
+	},
+	"wallet-kit": {
+		"title": "Wallet Kit",
+		"type": "page"
+	}
+}

sdk/docs/pages/index.mdx

@@ -0,0 +1,8 @@
+import { Cards, Card } from 'nextra/components';
+
+# Sui Typescript Documentation
+
+<Cards>
+	<Card icon={'⚙️ '} title="Typescript SDK" href="/typescript-sdk" />
+	<Card icon={'🔐 '} title="Wallet Kit" href="/wallet-kit" />
+</Cards>

sdk/docs/pages/typescript-sdk/_meta.json

@@ -0,0 +1,7 @@
+{
+	"index": "Typescript SDK",
+	"faucet": "Faucet",
+	"sui-client": "SuiClient",
+	"transaction-building": "Transaction Building",
+	"cryptography": "Cryptography"
+}

sdk/docs/pages/typescript-sdk/cryptography/_meta.json

@@ -0,0 +1,5 @@
+{
+	"keypairs": "KeyPairs",
+	"multisig": "Multisig",
+	"mnemonics": "Mnemonics"
+}

sdk/docs/pages/typescript-sdk/cryptography/keypairs.mdx

@@ -0,0 +1,7 @@
+import { Callout } from 'nextra/components';
+
+# KeyPairs
+
+<Callout type="warning" emoji="⚠️">
+	Coming soon!
+</Callout>

sdk/docs/pages/typescript-sdk/cryptography/mnemonics.mdx

@@ -0,0 +1,7 @@
+import { Callout } from 'nextra/components';
+
+# Mnemonics
+
+<Callout type="warning" emoji="⚠️">
+	Coming soon!
+</Callout>

sdk/docs/pages/typescript-sdk/cryptography/multisig.mdx

@@ -0,0 +1,7 @@
+import { Callout } from 'nextra/components';
+
+# MultiSig
+
+<Callout type="warning" emoji="⚠️">
+	Coming soon!
+</Callout>

sdk/docs/pages/typescript-sdk/faucet.mdx

@@ -0,0 +1,21 @@
+import { Callout } from 'nextra/components';
+
+# Faucet
+
+To get started with the SDK it can be helpful get some Sui tokens to play with. The faucet is a
+simple way to get some tokens sent to your address in `testnet`, `devnet` or `localnet` if you are
+running your own network locally for development.
+
+You can request sui from the faucet using the `@mysten/sui.js/faucet` package.
+
+```typescript
+import { requestSuiFromFaucetV0, getFaucetHost } from '@mysten/sui.js/faucet';
+
+await requestSuiFromFaucetV0({
+	host: getFaucetHost('testnet'),
+	recipient: '0xcc2bd176a478baea9a0de7a24cd927661cc6e860d5bacecb9a138ef20dbab231',
+});
+```
+
+The sui faucet is rate limited, so after making this call you may not be able to request more sui
+for a while. The exact limits depend on which network you are connecting to.

sdk/docs/pages/typescript-sdk/index.mdx

@@ -0,0 +1,29 @@
+import { Callout } from 'nextra/components';
+
+# Getting Started
+
+The Sui Typescript SDK is a modular library of tool for interacting with the SUi blockchain. It can
+be used to send queries to RPC nodes, build and sign transactions, and more.
+
+## Installation
+
+```sh npm2yarn
+npm i -D @mysten/sui.js
+```
+
+## Overview
+
+The SDK is split into a set of modular packages that can be used independently or together. So you
+can import just what you need.
+
+- [`@mysten/sui.js/client`](/typescript-sdk/sui-client) - A client for interacting with Sui RPC
+  nodes.
+- [`@mysten/sui.js/transaction`](/typescript-sdk/transaction-building/basics) - Utilities for
+  building and interacting with transactions.
+- [`@mysten/sui.js/keypairs/*`](/typescript-sdk/cryptography/keypairs) - Modular exports for
+  specific KeyPair implementations.
+- `@mysten/sui.js/verify` - Methods for verifying transactions and messages.
+- `@mysten/sui.js/cryptography` - Shared types and classes for cryptography.
+- `@mysten/sui.js/multisig` - Utilities for working with multisig signatures.
+- `@mysten/sui.js/utils` - Utilities for formatting and parsing various Sui types.
+- [`@mysten/sui.js/faucet`](/typescript-sdk/faucet) - Methods for requesting sui from a faucet.