Merge pull request #10 from storyprotocol/feature/monorepo-merge

Feature/monorepo merge

.eslintrc.js

@@ -0,0 +1,7 @@
+// This configuration only applies to the package manager root.
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@storykit/eslint-config/library.js"],
+  ignorePattern: ["apps/**", "packages/**"],
+};

.github/workflows/publish-package.yml

@@ -29,6 +29,8 @@ jobs:
         run: pnpm build
 
       - name: Publish to npm
-        run: npm publish
+        run: |
+          cd packages/storykit
+          npm publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -1,32 +1,43 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# dependencies
+# Dependencies
 node_modules
-/.pnp
+.pnp
 .pnp.js
 
-# testing
-/coverage
-
-# production
-build
-dist
-
-# misc
-.DS_Store
+# Local env files
+.env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
+# Testing
+coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+.next/
+out/
+build
+dist
+
+
+# Debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-*storybook.log
-storybook-static
+# Misc
+.DS_Store
+*.pem
 
 .yalc
 yalc.lock
 
-__archive
+__archive

README.md

@@ -1,45 +1,119 @@
+import { Meta } from "@storybook/blocks"
+
+<Meta title="Introduction" />
+
 # Storykit
 
 Plug-and-play React components for Story Protocol.
 
 ## Installation
 
-_Storykit is a private package so you need repo access and a personal access token to use_
+_Storykit is currently a private github package so you need repo access and a personal access token to use_
 
-1. Create a personal access token: [github.com/settings/tokens](https://github.com/settings/tokens)
+1 . Create a personal access token: [github.com/settings/tokens](https://github.com/settings/tokens)
 
-2. Login with Story Protocol scope:
+2 . Create an `.npmrc` file in the root of your project and add the following, replacing `NPM_TOKEN` with yout access token:
 
 ```bash
-npm login --scope=@storyprotocol --registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=NPM_TOKEN
+@storyprotocol/storykit:registry=https://npm.pkg.github.com
 ```
 
-3. Use your github username and personal access token (for password) to login
+The first line authenticates you with the github package registry, the second line tells npm to use the Storykit package from the Story Protocol github registry.
+
+3 . Add `.npmrc` to your `.gitignore` to keep your access token private.
 
-4. Install the package and the required react-query dependencies
+4 . Install the package and the required dependencies:
 
 ```bash
 npm install @storyprotocol/storykit @tanstack/react-query
 ```
 
-## Usage
+5 . Currently Story Protocol api credetials must be defined in the environment variables, add them to your `.env.local`:
 
-Using Storykit in your React app
+```bash
+NEXT_PUBLIC_API_BASE_URL="https://edge.stg.storyprotocol.net"
+NEXT_PUBLIC_STORY_PROTOCOL_X_API_KEY="SP_API_KEY_HERE"
+NEXT_PUBLIC_SIMPLE_HASH_API_KEY="SIMPLEHASH_API_KEY_HERE"
+```
 
-### Import the css
+## Deploying on vercel
 
-```typescript
-import "@storyprotocol/storykit/dist/build.css"
+To deploy on vercel, you can either include an `.npmrc` file with the following contents (note the curly braces) in the root, and add your access token to the `NPM_TOKEN` vercel environment variable:
+
+```bash
+//npm.pkg.github.com/:_authToken=${NPM_TOKEN}
+@storyprotocol/storykit:registry=https://npm.pkg.github.com
+```
+
+#### OR...
+
+You can add all the content of the `.npmrc` file, including your personal access token, to a `NPM_RC` vercel environment variable.
+
+See the [vercel docs](https://vercel.com/guides/using-private-dependencies-with-vercel) for more information.
+
+## Dependencies
+
+Storkykit requires [@tanstack/react-query](https://tanstack.com/query/latest), some components have additional dependencies including:
+
+- [react-apexcharts](https://www.npmjs.com/package/react-apexcharts)
+- [react-force-graph-2d](https://www.npmjs.com/package/react-force-graph-2d)
+
+See the individual component docs ro see if they require an additional dependency or install them all at once with:
+
+```bash
+npm install @storyprotocol/storykit @tanstack/react-query react-apexcharts react-force-graph-2d
 ```
 
+## Run locally
+
+### Storybook
+
+Run Storybook locally for component development and documentation:
+
+```bash
+pnpm dev
+```
+
+Find the Storybook at [http://localhost:6006](http://localhost:6006)
+
+### Example app
+
+Run the next.js [example app](./examples/next-app/):
+
+```bash
+pnpm build
+pnpm dev-example
+```
+
+The dev server will be running at [http://localhost:3000](http://localhost:3000)
+
+### Linting and formatting
+
+Lint with eslint:
+
+```bash
+pnpm lint
+```
+
+Format with prettier:
+
+```bash
+pnpm format
+```
+
+## Usage
+
+Using Storykit in your React app
+
 ### Include React Query
 
-Don't forget that react query is a dependency, you will need to wrap Storykit components with a `QueryClientProvider`, you can do this once at the root of the app.
+React Query is a dependency, you will need to wrap Storykit components with a `QueryClientProvider`, we recommend doing this once in the root of the app.
 
 ```typescript
-import Providers from "./Providers"
+// app/layout.tsx
 
-import "@storyprotocol/storykit/dist/build.css"
+import Providers from "./Providers"
 
 export default function Layout({children}) {
   return (
@@ -53,6 +127,8 @@ export default function Layout({children}) {
 ```
 
 ```typescript
+// app/Providers.tsx
+
 "use client"
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
@@ -69,23 +145,23 @@ export default function Providers({ children }) {
 
 ```
 
-### The IPAssetProvider
+### The IpProvider
 
-The IPAssetProvider provides IP Asset data to child components.
+The IpProvider provides IP Asset data to child components.
 
 ```typescript
-import { IPAssetProvider, useIPAssetContext } from "@storyprotocol/storykit"
+import { IpProvider, useIpContext } from "@storyprotocol/storykit"
 
 const ExamplePage = () => {
   return (
-      <IPAssetProvider ipId={"0xbbf08a30b9ff0f717a024a75963d3196aaf0f0dd"}>
-        <ExampleComponent />
-      </IPAssetProvider>
+    <IpProvider ipId={"0xbbf08a30b9ff0f717a024a75963d3196aaf0f0dd"}>
+      <ExampleComponent />
+    </IpProvider>
   );
 };
 
 const ExampleComponent = () => {
-  const { nftData, isNftDataLoading } = useIPAssetContext()
+  const { nftData, isNftDataLoading } = useIpContext()
 
   return (
     <div>
@@ -99,95 +175,35 @@ const ExampleComponent = () => {
 };
 ```
 
-### The IPAGraph
+### The IpGraph
 
-Some components require the IPAssetProvider to supply asset data
+Some components require the IpProvider to supply asset data
 
 ```typescript
-import { IPAssetProvider, IPAGraph } from "@storyprotocol/storykit"
+import { IpProvider, IpGraph } from "@storyprotocol/storykit"
 
 const ExamplePage = () => {
   return (
-    <IPAssetProvider ipId={"0xbbf08a30b9ff0f717a024a75963d3196aaf0f0dd"}>
-      <IPAGraph />
-    </IPAssetProvider>
+    <IpProvider ipId={"0xbbf08a30b9ff0f717a024a75963d3196aaf0f0dd"}>
+      <IpGraph />
+    </IpProvider>
   );
 };
 ```
 
-### The IPAssetWidget
+### The IpWidget
 
-The IPAssetProvider is already included in the IPAssetWidget
+The IpProvider is already included in the IpWidget
 
 ```typescript
-import { IPAssetWidget } from "@storyprotocol/storykit"
+import { IpWidget } from "@storyprotocol/storykit"
 
 const ExamplePage = () => {
   return (
-    <IPAssetWidget ipId={"0xbbf08a30b9ff0f717a024a75963d3196aaf0f0dd"} />
+    <IpWidget ipId={"0xbbf08a30b9ff0f717a024a75963d3196aaf0f0dd"} />
   )
 }
 
 ```
 
-See [the example app](/examples/next-app/app/page.tsx).
-
-## Contributing
-
-### Installation
-
-```bash
-pnpm install
-```
-
-### Run Storybook
-
-Build components within the Storybook workshop environment.
-
-```bash
-pnpm storybook
-```
-
-### Formatting w\ prettier, linting w\ eslint & running tests
-
-```bash
-pnpm format
-pnpm lint
-pnpm test
-```
-
-### Bundle `/dist` package
-
-```bash
-pnpm build
-```
-
-## Running examples
-
-From the root, build a package
-
-```bash
-pnpm build
-```
-
-Link `storykit` for use locally
-
-```bash
-pnpm link --global
-```
-
-Install the example app
-
-```bash
-cd examples/next-app
-pnpm install
-```
-
-Link the `storykit` package and start the app
-
-```bash
-pnpm link --global @storyprotocol/storykit
-pnpm dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+See [the github repo](https://github.com/storyprotocol/storykit) and [the example app](https://github.com/storyprotocol/storykit/tree/main/examples/next-app).

examples/next-app/.eslintrc.js

@@ -0,0 +1,9 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@storykit/eslint-config/next.js"],
+  parser: "@typescript-eslint/parser",
+  // parserOptions: {
+  //   project: true,
+  // },
+}