seam-xyz / miniapp-builder Goto Github PK

View Code? Open in Web Editor NEW

13.0 0.0 17.0 6.88 MB

Miniapp Maker for the Seam social platform

Home Page: https://codesandbox.io/p/github/seam-xyz/Miniapp-Builder/main

HTML 1.08% TypeScript 84.51% JavaScript 10.79% CSS 1.19% Shell 2.42%

miniapp-builder's Introduction

Seam Miniapp Maker

Miniapps are the future of sharing on social networks.

Seam is a social network that allows users to build and sell open-source miniapps. It provides a platform for online creatives to showcase their work, curate inspiration, and collaborate with peers.

We've made it easy in this repository to make a new miniapp, and then publish it live so that anyone else in the world can use your new creation, too. We're all building this together!

The fastest way to make a miniapp is to open our sandbox and run our creation script:

./seam-magic.sh

The full documentation lives at docs.getseam.xyz.

What are miniapps?

The core piece of sharing on Seam is the miniapp. Miniapps are tiny playgrounds, allowing you to create content. When you’re done, you make a post. For example, the Pixel Art miniapp allows you to become a pixel artist, and then share the final masterpiece as a post.

Miniapps have a creation experience, and a consumption experience in the feed.

What happens when you make a miniapp on Seam?

Accepted miniapps are live on seam.so and the Seam iOS app. You'll have your code in the appstore!
Anyone else on Seam can use your miniapp to make posts.
- Eventually, you'll be able to earn Seam Points when other users unlock your miniapp.
You'll learn to code Javascript and React, one of the most used languages on the Internet.

miniapp-builder's People

Contributors

Stargazers

Forkers

eurbs andrewschreiber katherholt octopus-coder sydneylai thienantran010 james-buret proofofjake coldreactor64 hellorashid nyanag fractal-bootcamp fractal-bootcamp pranavpatilsce jzerbo ssebexen

miniapp-builder's Issues

Tap to open edit modal is not working with new blocks in BlockFactory

When clicking:

I get:

Uncaught TypeError: onClick is not a function
    at onClick (BlockFactory.tsx:47:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)
    at react-dom.development.js:9288:1

This is on commit 379b07d1659705344275f6549547918eaf8971a4

And the usage is as follows:

    if (Object.keys(this.model.data).length === 0) {
      return BlockFactory.renderEmptyState(this.model, this.onEditCallback!)
    }

textEditBlock's edit modal hides save button and "Editing Block" title when long words are entered

When typing a super long word (no spaces) into the edit modal of the textEditBlock, the contents of the modal shift around, obscuring the save button and the "Editing Block" title.

Untitled.video.-.Made.with.Clipchamp.1.mp4

Cannot easily render example of giphy block locally because no API key

Lower pri feature request: make it obvious to developers that they need to provide their own giphy api key when developing

IonModal drag to dismiss interferes with drag-down gestures

modal_dismiss_issue.mov

Content.js should update minimum height of blocks

          <div
            key={model.uuid}
            className="widget"
            data-grid={{ w: 3, h: 2, x: 0, y: Infinity }}
          >

should be something more like

            data-grid={{ w: 3, h: 20, x: 0, y: Infinity }}

Windows not supported but I got it working (?)

Hey! I'm a Windows user and wasn't able to use ./seam-magic.sh to set up the environment quickly, partly because "sh ./seam-magic.sh" wasn't working on the terminal and powershell (it worked in Git Bash though) and also because the operating system isn't supported, according to the warning I got after running "sh ./seam-magic.sh" in Git Bash.

However, I think I got the environment set up correctly because I was able to start the development server and play around with my block (FlashingTextBlock). I don't know Bash so I just guessed at what I had to do from the seam-magic.sh file 😂.

I was wondering if by "operating system isn't supported", it means that Windows users can't use the SDK entirely or they can use the SDK but just can't use the seam-magic.sh file. If the SDK does support Windows users, I could add instructions specific to Windows users to the readme so that the setting up process is easier.

Another thing to note is that I had to add react-router-dom to my json file/dependencies to get webpack to compile. I think it's because LinkBlock.tsx imports stuff from react-router-dom, even though it doesn't end up using it.

Fullscreen modal sizing is different in development than production

Pls make development modal sizing in App.tsx at fullscreen breakpoint the same as in production:

Dev giphy block editor modal:

Prod giphy block editor modal:

On `done()` make it possible to customize the size and/or dimensions of the initial block

Feature Request

For my PixelArt usecase, having the width > height is a bad experience:

I wish I could set the default save size to square dimensions:

I would be happy with an option 'landscape', 'portrait', or 'square' to start. I don't think it's totally necessary for developers to have full control of the exact size.

Request for Seam SDK Docker Image

Does Seam have plans on creating a Docker Image for those who are building with Cloud/Azure/AWS?

This would allow some devs to contribute to Seam if they're building in a cloud environment. Having a Docker image would be great so that I did not have to redownload the whole Seam SDK environment locally, or having to build the environment over and over again as I use various computers. This is not time sensitive, just curious to learn if we are able run the Seam CLI in a container.

Details:

the Docker build ran correctly and the hack I ussed was to run a force command, but ran into warning to dependency issues (React)

Reference:
https://github.com/sydneylai/Block-SDK/blob/main/Dockerfile

https://github.com/sydneylai/Block-SDK/blob/main/cloudbuild.yaml

Compiling with warnings

After creating a new block following the instructions, yarn start shows these warnings:

Compiled with warnings.

[eslint]
src/blocks/IFrameBlock.tsx
  Line 72:11:  'onFinishFailed' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/blocks/IFramelyBlock.tsx
  Line 42:11:  'onFinishFailed' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/blocks/ImageBlock.tsx
  Line 21:7:   img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  Line 42:11:  'onFinishFailed' is assigned a value but never used                                                        @typescript-eslint/no-unused-vars

src/blocks/LinkBlock.tsx
  Line 21:7:   Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations  react/jsx-no-target-blank
  Line 51:11:  'onFinishFailed' is assigned a value but never used                                                                                                                                    @typescript-eslint/no-unused-vars

src/blocks/ProfileBlock.tsx
  Line 143:7:  'useStyles' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/blocks/RefreshingGIFBlock.tsx
  Line 3:8:  'BlockFactory' is defined but never used  @typescript-eslint/no-unused-vars

src/blocks/TextEditor/TextEditor.tsx
  Line 45:9:    'handleInsertImage' is assigned a value but never used                                                     @typescript-eslint/no-unused-vars
  Line 163:68:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  Line 164:73:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  Line 165:70:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  Line 166:77:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  Line 167:79:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  Line 168:81:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  Line 178:11:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

src/blocks/TweetBlock.tsx
  Line 35:11:  'onFinishFailed' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/blocks/TwitterBlock.tsx
  Line 54:11:  'onFinishFailed' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/blocks/utils/GifViewer.js
  Line 16:6:  React Hook useEffect has a missing dependency: 'giphyFetch'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

src/blocks/utils/IconsRow.js
  Line 17:9:   'Option' is assigned a value but never used                                                                                                                                            no-unused-vars
  Line 32:33:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images                                                                              jsx-a11y/alt-text
  Line 33:32:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images                                                                              jsx-a11y/alt-text
  Line 34:32:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images                                                                              jsx-a11y/alt-text
  Line 51:16:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images                                                                              jsx-a11y/alt-text
  Line 53:16:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images                                                                              jsx-a11y/alt-text
  Line 55:16:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images                                                                              jsx-a11y/alt-text
  Line 73:13:  Expected '===' and instead saw '=='                                                                                                                                                    eqeqeq
  Line 81:9:   Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations  react/jsx-no-target-blank

src/blocks/utils/Iframely.js
  Line 35:6:  React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in [eslint]
src/blocks/IFrameBlock.tsx
  Line 72:11:  'onFinishFailed' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/blocks/IFramelyBlock.tsx
  Line 42:11:  'onFinishFailed' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/blocks/ImageBlock.tsx
  Line 21:7:   img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  Line 42:11:  'onFinishFailed' is assigned a value but never used                                                        @typescript-eslint/no-unused-vars

src/blocks/LinkBlock.tsx
  Line 21:7:   Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations  react/jsx-no-target-blank
  Line 51:11:  'onFinishFailed' is assigned a value but never used                                                                                                                                    @typescript-eslint/no-unused-vars

src/blocks/ProfileBlock.tsx
  Line 143:7:  'useStyles' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/blocks/RefreshingGIFBlock.tsx
  Line 3:8:  'BlockFactory' is defined but never used  @typescript-eslint/no-unused-vars

src/blocks/TextEditor/TextEditor.tsx
  Line 45:9:    'handleInsertImage' is assigned a value but never used                                                     @typescript-eslint/no-unused-vars
  Line 163:68:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  Line 164:73:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  Line 165:70:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  Line 166:77:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  Line 167:79:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  Line 168:81:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  Line 178:11:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

src/blocks/TweetBlock.tsx
  Line 35:11:  'onFinishFailed' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/blocks/TwitterBlock.tsx
  Line 54:11:  'onFinishFailed' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/blocks/utils/GifViewer.js
  Line 16:6:  React Hook useEffect has a missing dependency: 'giphyFetch'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

src/blocks/utils/IconsRow.js
  Line 17:9:   'Option' is assigned a value but never used                                                                                                                                            no-unused-vars
  Line 32:33:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images                                                                              jsx-a11y/alt-text
  Line 33:32:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images                                                                              jsx-a11y/alt-text
  Line 34:32:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images                                                                              jsx-a11y/alt-text
  Line 51:16:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images                                                                              jsx-a11y/alt-text
  Line 53:16:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images                                                                              jsx-a11y/alt-text
  Line 55:16:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images                                                                              jsx-a11y/alt-text
  Line 73:13:  Expected '===' and instead saw '=='                                                                                                                                                    eqeqeq
  Line 81:9:   Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations  react/jsx-no-target-blank

src/blocks/utils/Iframely.js
  Line 35:6:  React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

webpack compiled with 1 warning

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.