@manifoldxyz/studio-app-sdk-react

Studio App SDK React

React components for Studio Apps.

Usage

gm

Development

Setup

As studio-app-sdk-react depends on studio-app-sdk, you'll need to build the sdk first before you can build the React components for the first time.

You can either build from the worskpace root with yarn build, or from the studio-app-sdk-react folder with yarn build:withsdk.

$ cd studio-app-devtools      # make sure you're in the workspace root
$ yarn build                  # build the sdk and sdk-react packages

# alternatively
$ cd packages/studio-app-sdk-react
$ yarn build:withsdk

Adding a new component

1. Create your new component.
   1. Add unit tests for your component in the ./src/tests folder.
   2. Add a .stories.tsx file in the ./src/stories folder to demonstrate your component.
2. Export types and component. Don't use default exports.
3. Update index.ts with export.

Testing Locally

using Storybook

1. Build the sdk and sdk-react packages.
2. Run yarn storybook in the studio-app-sdk-react folder.
   1. If you don't need any SDK components, you can navigate to http://localhost:6006/ (default port) and test there.
3. Open up the Studio Client.
4. Open the Studio App SDK React Storybook app (app id: 2549157559).

with yarn link

1. Link local changes to global npm folder

$ cd studio-app-devtools                    # make sure you're in the workspace root
$ yarn build                                # build the sdk and sdk-react packages
$ cd packages/studio-app-sdk-react
$ yarn link                                 # create a symlink in the global folder
$ yarn dev                                  # start typescript compile on watch mode

1. Open up the project you want to use the local sdk changes in:

$ cd studio-claim-app
$ yarn link @manifoldxyz/studio-app-sdk-react     # creates a symlink in ./node_modules to point to global studio-app-sdk-react folder

1. Do your development
   Note: you may need to do some of the following if your changes are not being picked up:

• Restart typescript server in VSCODE: CMD+P, type Restart TS Server, enter.
• Delete node_modules .cache: delete node_modules/.cache, restart localhost.

1. If you're done with local development and want to switch back to a release.

$ cd studio-claim-app
$ yarn unlink @manifoldxyz/studio-app-sdk-react
$ yarn install --force

Releasing

1. Update version in package.json. Use proper semantic versioning.
   1. Make sure your studio-app-sdk dependency is correct.
2. Any commit to main will auto-release.

Changelog

Very manual work for now. Noting major changes here. Ideally, we automate this with something like changesets.

2.9.0

• Remove AudienceBlueprintSelector component (out of date, unused).
• Change interface for AssetSelector component:
  • Remove specFilter
  • Rename the following props:
    • onSelect => onChange
    • filter=> mintStatusFilter
    • asset => value (can now accept an array of asset ids)
    • assetId => defaultValue (can now accept an array of asset ids)
  • Additional props for selection/display available.

2.6.0

• Last version to support TokenSelectorLegacy. Use MultiTokenSelector instead.

2.5.0

• Add MultiTokenSelector component
• Rename TokenSelector to TokenSelectorLegacy
• Make ContractSelector, StudioContractSelector use BasePanelSelector under the hood