npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

join-web-components

v2.5.8

Published

Web components' library for Join Stories built from https://join-stories.com

Downloads

294

Readme

join-components

NPM

Classic integration

<script type="text/javascript" src="https://unpkg.com/[email protected]"></script>

And then you can directly use our web components in your html files

<join-list-container team-id="join-demo" alias="join-stories-default-all" ></join-list-container>

or

<join-iframe team-id="join-demo" alias="join-stories-default-all" height="700"></join-iframe>

React integration example

Install the package

  • yarn add join-web-components or npm install join-web-components

Find out the codesandbox.io

join-list-component

| Attribute | Type | Default | Description |
| :-------------------- | :---------------------------------------------------- | :---------------------------- | :---------------------------------------------------------------------------------------------------------------- |
| team-id | string | | Id of the team to match the associated stories from the Studio |
| alias | string | | Alias of the container to match the associated stories from the Studio |
| shape | enum: { 'round', 'square', 'rounded-square', 'card' } | 'round' | Different shape of container item (see demo) |
| justify-content | enum: { 'flex-start', 'center', 'flex-end' } | 'center' | Flex alignement applied on the container |
| limit | number | 10 | Number of stories fetched |
| sort-by | enum: { 'asc', 'desc', 'ordered' } | 'desc' | Either you can sort by last edition date (asc or desc) either by an order fixed from the Studio | | border-colors | array | [ 'red', 'orange', 'yellow' ] | Array of colors (Hexa, rgba...) used to define the color gradient of the outer border (minimum 2 colors) |
| height | number | 100 | Unit use to calculate the size of the bubble size (bubbles height and width are proportional to this value but not equal) |
| spacing | number | | The space in px between a bubble and the edge of the container. Distance between 2 bubbles will be twice this value. |
| show-labels | boolean | false | Option to display the labels under the story (You need to configure the label in the studio) |
| labels-style | object | {} | Add css properties to add to your label. (see demo) Warning : padding need to be configure through verticalPadding and horizontalPadding. Properties should be write in CamelCase. |
| labels-line-count | number | 1 | Number of lines the label can be written on |
| inner-color | string | 'white' | The color of the inner border |
| outer-border-size | number | 2 | Size of the outer border |
| inner-border-size | number | 2 | size of the inner border |

Integration Examples

Containers With Default Labels

<join-list-container  team-id="join-demo"
                      alias="join-stories-default-all"
                      show-labels
></join-list-container>

Containers With customized Label

<join-list-container 
                    team-id="join-demo"
                    alias="join-stories-default-all"
                    spacing="25"
                    show-labels
                    labels-style='{
                        "fontSize" : 11.2,
                        "fontWeight":550,
                        "backgroundColor": "white",
                        "fontFamily": "museo-sans, sans-serif",
                        "verticalPadding":3, "horizontalPadding":10,
                        "textTransform": "uppercase",
                        "textDecoration": "none"
                    }'
                    sort-by="ordered"
    ></join-list-container>

join-iframe

| Attribute | Type | Default | Description |
| :-------------------- | :---------------------------------------------------- | :---------------------------- | :---------------------------------------------------------------------------------------------------------------- |
| team-id | string | | id of the team to match the associated stories from the Studio |
| alias | string | | Alias of the container to match the associated stories from the Studio |
| story-info | string | | The URL of the story to display if there is no team-id and alias |
| mobile-break-point | number | 1024 | Screen width where the iframe switch between mobile and desktop mode |
| border-colors | array | [ 'red', 'orange', 'yellow' ] | Array of colors (Hexa, rgba...) used to define the color gradient of the outer border (minimum 2 colors) |
| height | number | 100 | Unit use to calculate the size of the card size (card height and width is proportional to this value but not equal) |
| inner-color | string | 'white' | The color of the inner border |
| outer-border-size | number | 2 | Size of the outer border |
| inner-border-size | number | 0 | size of the inner border |
| disable-history | boolean | false | Option to disable the history manipulation from the widget. Must be activated if you are have troubling behaviour when closing the story in mobile |
| inactive-scale | number | 0.9 | Option to change the scale of the iframe while inactive on mobile |
| onStateChanged | function | null | Event to use to get the state of the mobile iframe. More information after. |

onStateChanged Callback

onStateChanged is a callback with 2 arguments :

  • state : A string defining which state as been update.
  • value : The value of the new state.

To learn how to use a web-component callback, see this link.

#####Possible state

| State | Values | Description | | :------- | :-------------- | :---------- | | active | true, false | Fired with value true when user clicks on iframe, and false when he looses the focus. |

Examples

Iframe with default parameters

<div style="display: flex;width: 100%; justify-content: center;">
      <join-iframe height="500" team-id="join-demo" alias="join-stories-default-all"></join-iframe>
</div>

Iframe with url

<join-iframe height="500" story-info="https://demo.join-stories.com/naturalizer-UkSVfXhMT/"></join-iframe>

[]: #-on-state-changed