@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:
- React@18
- [email protected]
- i18next
- Kaltura design system (next prerelease channel)
- MUI
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:
- Add the language key to the
libs/unisphere-package-content-lab/src/lib/languages/supported-languages.jsonfile. - Add a corresponding language file to the
libs/unisphere-package-content-lab/src/lib/languages/filesdirectory.
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 startThe 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 storybookYou 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.
