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 🙏

© 2025 – Pkg Stats / Ryan Hefner

@unisphere/content-lab-core

v1.2.2

Published

> For Content Repurposing module documentation follow [this link](libs/unisphere-package-content-lab/README.md)

Readme

Unisphere Content Repurposing Module - Development Notes

For Content Repurposing module documentation follow this link

Project Structure

The project follows the Unisphere architecture. Within the libs folder, you'll find two main libraries:

  • unisphere-package-content-lab: This is the primary library containing the module. It exposes React components that can be used by both the playground and the Unisphere environment.
  • unisphere-context-application: This serves as the context entry point for the module and should be used by the Unisphere environment to load the module.

Develop the module logic within the package library. The context entry point is solely for loading the module and can be added later.

Technology Stack

The technology stack for this project is based on the Unisphere module template.

The stack includes:

The following list contains the approved libraries to be added to the project, subject to you needs:

  • xstate
  • kaltura-typescript-client
  • date-fns (dayjs is also acceptable - please consult with Hadas Shveky Teman)

Before adding libraries that are not in the list above, please consult with Eran Sakal. Do not upgrade libraries on your own.

Features

Localization

The module must support localization using the i18next library, with English provided by default.

To add more languages:

  1. Add the language key to the libs/unisphere-package-content-lab/src/lib/languages/supported-languages.json file.
  2. Add a corresponding language file to the libs/unisphere-package-content-lab/src/lib/languages/files directory.

Theming

The module should support theming via the Kaltura design system, including both light and dark themes by default.

Development Tools

Playground

The playground is an application for local testing of the module. It operates independently from the Unisphere environment.

Customize the configuration by editing the apps/playground/src/app/definitions.ts file and extending the UI configuration in apps/playground/src/app/components/settings-form.tsx.

To run the playground, use:

npm start

The playground supports both theming (light and dark) and localization.

Storybook

Storybook is a tool for developing components in isolation, independent of the Unisphere environment.

We use CSF (Component Story Format) for writing stories.

To run Storybook, use:

npm run storybook

You can add mdx or tsx stories within the package library folder. Storybook will automatically recognize them. Use the naming pattern something.stories.(mdx|tsx).

The playground supports both theming (light and dark) and localization. To extend the Storybook language UI menu dropdown, update the storybook/.storybook/preview.tsx file.