Necromancers Playing MTG

    phelia
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.11-canary-1 • Public • Published

    ⚡ Phelia

    React for Slack Apps

    Build interactive Slack apps without webhooks or JSON headache. If you know React, you know how to make a Slack app.

    Quick start

    1. Create your message with React:

      import randomImage from "../utils";
       
      export function RandomImage({ useState }: PheliaMessageProps) {
        const [imageUrl, setImageUrl] = useState("imageUrl", randomImage());
       
        return (
          <Message text="Choose a dog">
            <ImageBlock
              title="an adorable :dog:"
              alt="a very adorable doggy dog"
              imageUrl={imageUrl}
              emoji
            />
            <Divider />
            <Actions>
              <Button
                style="primary"
                action="randomImage"
                onClick={() => setImageUrl(randomImage())}
              >
                New doggy
              </Button>
            </Actions>
          </Message>
        );
      }
    2. Register your component

      const client = new Phelia(process.env.SLACK_TOKEN);
       
      app.post(
        "/interactions",
        client.messageHandler(process.env.SLACK_SIGNING_SECRET, [RandomImage])
      );
       
      client.postMessage(RandomImage, "@max");
    3. Interact with your message:

    See: docs for more info or join our community Slack.

    How this works

    Phelia transforms React components into Slack messages by use of a custom React reconciler. Components (with their internal state and props) are serialized into a custom storage. When a user interacts with a posted message Phelia retrieves the component, re-hydrates it's state and props, and performs any actions which may result in a new state.

    Components

    Each component is a mapping of a specific object type for a slack block. There are 3 categories of components, each with special rules for how that component can be used with other components.

    1. Surface Components (Message, Home, Modal) - Root components that contains Block Components
    2. Block Components (Actions, Context, Divider, Image, Input, Section) - Direct descendants of a Surface Component. Contains Block Components
    3. Block Element Components (Text, CheckBoxes, TextField, etc) - Direct descendants of a Block Components.

    Feature Support

    To request a feature submit a new issue.

    Component Example
    Actions Counter
    Button Counter
    Channel Select Menus Channel Select Menu
    Checkboxes Modal Example
    Confirmation dialog Random Image
    Context
    Conversation Select Menus Conversation Select Menu
    Date Picker Birthday Picker
    Divider Random Image
    External Select Menus External Select Menu
    Home Tab Home App Example
    Image Block Random Image
    Image Random Image
    Input Modal Example
    Messages Server
    Modals Modal Example
    Multi channels select Menu Multi Channels Select Menu
    Multi conversations select Menu Multi Conversations Select Menu
    Multi external select Menu Multi External Select Menu
    Multi static select Menu Multi Static Select Menu
    Multi users select Menu Multi Users Select Menu
    Option group Static Select Menu
    Option
    Overflow Menu Overflow Menu
    Plain-text input Modal Example
    Radio button group Radio Buttons
    Section Counter
    Static Select Menus Static Select Menu
    Text Counter
    Text Random Image
    User Select Menus User Select Menu

    Keywords

    none

    Install

    npm i phelia

    DownloadsWeekly Downloads

    15

    Version

    0.1.11-canary-1

    License

    MIT

    Unpacked Size

    158 kB

    Total Files

    32

    Last publish

    Collaborators

    • maxchehab