Improve developer workflow with SASS themes

[gyoshev]

Currently the developer workflow for the SASS themes suffers from several problems:

1. Changes in Bootstrap / Material have to be synchronized with Default, in separate pull requests that are hard to follow
2. Fixes in Default require new versions of Bootstrap / Material to be published via empty commits, in order to take effect
3. Changes cannot validated for regressions until a develop build is published and visible on staging
4. Theme changes that require updated rendering are not clearly documented.

All of the above contributes to a general brittleness of the themes, as pull requests cannot be efficiently verified and merged.

To resolve the above, I suggest the following:

• To address 4, add sample HTML that shows the rendering that needs to be implemented in all suites.
• To address 3, add scripts that test the above HTML for visual regressions. This allows PRs to be automatically validated before merging.
• To address 1 and 2, merge the SASS theme repositories into a single repository, allowing the themes to be developed simultaneously, as well as to share styles more efficiently. We can use the approach shown here to preserve repository history. There are some caveats in this approach, applicable to monorepos (which may be resolved by lerna):
  • theme versions may need to be released simultaneously
  • the changelog generation may break
  • incomplete themes (like material) may need to be released under a dist-tag until completed

Comments and suggestions are more than welcome.

/cc @rkonstantinov @ggkrustev @tsvetomir @joneff

[tsvetomir]

Merging the repositories makes perfect sense given the extra-tight coupling between them.

Hail to the monorepo :)

[gyoshev]

Status update: the following script creates a lerna monorepo and imports the history from the current versions of the themes. Lerna can track which packages need updating, and release the necessary themes. Changes in the default theme release all themes, and changes in material/bootstrap release only them.

Publishing is still a bit awkward, as most of the lerna options do not match our release monikers, but I'll post another update about that.

#!/usr/bin/bash

set -e

# repo folders that will be moved to the monorepo
repos=(theme-default theme-bootstrap theme-material)

# target folder of the monorepo
monorepo=themes

# colors
green=$(tput setaf 82)
normal=$(tput sgr0)

# create lerna folder
printf "\n%s\n" "${green}Creating monorepo...${normal}"
rm -rf $monorepo
mkdir $monorepo
cd $monorepo
git init

lerna init --independent

git add .
git commit -am "chore: initial monorepo commit"

for repo in "${repos[@]}"
do
  printf "\n%s\n" "${green}Merging with $repo...${normal}"

  git -C ../$repo checkout develop
  git -C ../$repo pl
  node ../lerna/bin/lerna.js import ../$repo --flatten --yes --loglevel success
done

printf "\n%s\n" "${green}Bootstrapping repositories...${normal}"
lerna bootstrap

printf "\n%s\n" "${green}Fetching repo versions from NPM...${normal}"

for repo in "${repos[@]}"
do
  cd packages/$repo
  version=$(npm info @progress/kendo-$repo version)

  sed -i "s/\"version\": \".*\"/\"version\": \"$version\"/" package.json
  cd -
done

git commit -am "chore: use latest package versions" --no-verify

[gyoshev]

The repositories are merged in a monorepo, and work on visual regression tests is underway in the add-tests branch.