media-ui

Prerequisites and Installation

You'll need to have Git installed on your system.

We use Lerna to manage inter-package dependencies in this monorepo.

Prerequisites: Node.js v18+, Yarn v1.6.0+ A tested working combination is Node.js v18.20.2 and Yarn v1.22.21.

Installation steps:

1. Install Git.
2. Install Node) and nvm.
3. Install Yarn.
4. Clone this repository: git clone gerrit:media-ui.
5. Run cd media-ui
6. Run yarn
7. Run yarn build

Run yarn run to list the available commands.

Running the documentation app

1. Run yarn start
2. Open http://localhost:8001 in your browser

Development

1. Run yarn test:watch to run the tests and watch for changes.
2. Run yarn test to run all the tests for every package.

Publishing

Jenkins builds and publishes a new rc release every time you merge something to master. (This is the reason why we have many rc releases. See them here )

In order to have a properly versioned release, all you need to do is run yarn bump [<version>|major|minor|patch]. This will create a new commit with updated version for each package and will also generate some new lines to CHANGELOG.md. Once this release commit is merged, Jenkins will do a publish to npm with the new version.

The project follows semver versioning having a major, minor and patch version number. (E.g. for 1.2.3 major is 1, minor is 2 and patch is 3)

• yarn bump This command will try to come up with the next version based on the commit messages since the last release.
• yarn bump <version> Sets the given version, for example yarn bump 1.2.3 will change the version to 1.2.3
• yarn bump major Major version should be bumped in case of some breaking changes from the previous interface. Example: 1.2.3 -> 2.0.0
• yarn bump minor Minor version should be bumped if new features are added, but existing interfaces remain the same. Example: 1.2.3 -> 1.3.0
• yarn bump patch Patch version increases are used when an issue is fixed, but no new functionality is added. Example: 1.2.3 -> 1.2.4

Once a new version is released, please communicate it in the #studio Slack channel: "We have released a new version of media-ui (x.y.z) with the following changes:" and quote the part of CHANGELOG.md that was generated by the bump.

Linters and Code Formatting

Linters are run as part of the build. If you use the Sublime Text, Atom, or VSCode editors, you can set up the following plugins to catch lint and formatting errors earlier.

1. Install the Linter plugin Sublime, Atom. Linting is included in VSCode.
2. Install the EditorConfig plugin Sublime, Atom, VSCode
3. Install the Eslint plugin Sublime, Atom, VSCode
4. Install the Stylelint plugin Sublime, Atom, VSCode
5. Run yarn to install the dependencies
6. Restart your editor

Commit Guidelines

1. Run yarn commit to commit your changes and follow our commit message format.
2. Please do not include the output of yarn build in your commits.

Updating build (repository) dependencies

1. yarn add <package-name> or yarn upgrade <package-name>.
2. Commit the result.

Updating individual package dependencies

1. Update the relevant package.json file. Make sure to retain the ^ semver range.
2. Run yarn and commit the result.

Accessibility and Internationalization Requirements

All components should:

1. be accessible
2. support RTL languages.
3. localize all dates, times, numbers and strings (or require localized content passed in via props).