Move theming to its own package

.github/workflows/ci.yml

@@ -25,12 +25,10 @@ jobs:
       - run: pnpm install
       - name: Build nivo packages
         run: make pkgs-build
+        env:
+          SKIP_SIZE: true
       - run: make pkgs-lint
       - run: make pkgs-test
-      # Make sure that we can build the website
-      - run: make website-build
-      # Make sure that we can build storybook
-      - run: make storybook-build
 
   end-to-end-tests:
     runs-on: ubuntu-22.04
@@ -53,6 +51,8 @@ jobs:
           runTests: false
       - name: Build nivo packages
         run: make pkgs-build
+        env:
+          SKIP_SIZE: true
       - name: Cypress run
         uses: cypress-io/github-action@v5
         with:

Makefile

@@ -2,8 +2,6 @@ MAKEFLAGS += --no-print-directory
 
 SOURCES = packages
 
-.PHONY: help bootstrap init pkgs-build pkgs-publish clean-all website-install website website-build website-deploy storybook storybook-build storybook-deploy deploy-all e2e-open
-
 ########################################################################################################################
 #
 # HELP
@@ -32,6 +30,7 @@ HELP_HELPER = \
     }; \
     print "\n"; }
 
+.PHONY: help
 help: ##prints help
 	@perl -e '$(HELP_HELPER)' $(MAKEFILE_LIST)
 
@@ -43,14 +42,17 @@ help: ##prints help
 #
 ########################################################################################################################
 
+.PHONY: install
 install: ##@0 global install
-	@pnpm install
+	pnpm install --frozen-lockfile
 
+.PHONY: init
 init: ##@0 global cleanup/install/bootstrap
 	@$(MAKE) clean-all
 	@$(MAKE) install
 	@$(MAKE) pkgs-build
 
+.PHONY: fmt
 fmt: ##@0 global format code using prettier (js, css, md)
 	@pnpm prettier --color --write \
 		"packages/*/{src,tests}/**/*.{js,ts,tsx}" \
@@ -63,6 +65,7 @@ fmt: ##@0 global format code using prettier (js, css, md)
 		"cypress/src/**/*.{js,ts,tsx}" \
 		"README.md"
 
+.PHONY: fmt-check
 fmt-check: ##@0 global check if files were all formatted using prettier
 	@echo "${YELLOW}Checking formatting${RESET}"
 	@pnpm prettier --color --list-different \
@@ -76,16 +79,20 @@ fmt-check: ##@0 global check if files were all formatted using prettier
 		"cypress/src/**/*.{js,ts,tsx}" \
         "README.md"
 
+.PHONY: test
 test: ##@0 global run all checks/tests (packages, website)
 	@$(MAKE) fmt-check
 	@$(MAKE) lint
 	@$(MAKE) pkgs-test
 
+.PHONY: vercel-build
 vercel-build: ##@0 global Build the website and storybook to vercel
-	@$(MAKE) website-build
-	@$(MAKE) storybook-build
+	@echo "${YELLOW}Building the website and storybook${RESET}"
+	$(MAKE) website-build
+	$(MAKE) storybook-build
 	@cp -a storybook/storybook-static website/public/storybook
 
+.PHONY: clean-all
 clean-all: ##@0 global uninstall node modules, remove transpiled code & lock files
 	@rm -rf node_modules
 	@rm -rf package-lock.json
@@ -105,6 +112,7 @@ define clean-source-all
 	rm -rf $(1)/*/package-lock.json
 endef
 
+
 ########################################################################################################################
 #
 # 1. PACKAGES
@@ -115,10 +123,12 @@ pkg-lint-%: ##@1 packages run eslint on package
 	@echo "${YELLOW}Running eslint on package ${WHITE}@nivo/${*}${RESET}"
 	@pnpm eslint ./packages/${*}/{src,tests}/**/*.{js,ts,tsx}
 
+.PHONY: pkgs-lint
 pkgs-lint: ##@1 packages run eslint on all packages
 	@echo "${YELLOW}Running eslint on all packages${RESET}"
 	@pnpm eslint "./packages/*/{src,tests}/**/*.{js,ts,tsx}"
 
+.PHONY: pkgs-lint-fix
 pkgs-lint-fix: ##@1 packages run eslint on all packages with a fix option
 	@echo "${YELLOW}Running eslint on all packages${RESET}"
 	@pnpm eslint "./packages/*/{src,tests}/**/*.{js,ts,tsx}" --fix
@@ -138,27 +148,38 @@ pkg-update-test-%: ##@1 packages run tests for a package and update its snapshot
 pkg-watch-test-%: ##@1 packages run tests for a package and watch for changes
 	@export BABEL_ENV=development; pnpm jest -c ./packages/jest.config.js --rootDir . ./packages/${*}/tests --watch
 
+.PHONY: pkgs-test
 pkgs-test: ##@1 packages run tests for all packages
 	@echo "${YELLOW}Running test suites for all packages${RESET}"
 	@export BABEL_ENV=development; pnpm jest -c ./packages/jest.config.js --workerThreads --rootDir . ./packages/*/tests
 
+.PHONY: pkgs-watch-test
 pkgs-watch-test: ##@1 packages run tests for all packages and watch for changes
 	@echo "${YELLOW}Running test suites watcher for all packages${RESET}"
 	@export BABEL_ENV=development; pnpm jest -c ./packages/jest.config.js --rootDir . ./packages/*/tests --watch
 
+.PHONY: pkgs-test-cover
 pkgs-test-cover: ##@1 packages run tests for all packages with code coverage
 	@echo "${YELLOW}Running test suites coverage for all packages${RESET}"
 	@export BABEL_ENV=development; pnpm jest -c ./packages/jest.config.js --rootDir . --coverage ./packages/*/tests
 
+.PHONY: pkgs-build
 pkgs-build: pkgs-types ##@1 packages build all packages
 	@# Using exit code 255 in case of error as it'll make xargs stop immediately.
-	@export SKIP_TYPES=TRUE;find ./packages -type d -maxdepth 1 ! -path ./packages \
+	@# Skipping type generation as it's already done via `pkgs-types` in one go.
+	@# | xargs -I '{}' sh -c '$(MAKE) pkg-build-{} || exit 255'
+	find ./packages -type d -maxdepth 1 ! -path ./packages | sed 's|^./packages/||' | sort | xargs -I '{}' sh -c 'echo "make pkg-build-{}"'
+	@export SKIP_TYPES=TRUE; find ./packages -type d -maxdepth 1 ! -path ./packages \
         | sed 's|^./packages/||' \
-        | xargs -P 8 -I '{}' sh -c '$(MAKE) pkg-build-{} || exit 255'
+        | sort \
+        | xargs -I '{}' sh -c '$(MAKE) pkg-build-{}'
+	@echo "${GREEN}Packages built${RESET}"
 
+.PHONY: pkgs-types
 pkgs-types: ##@1 packages build all package types
 	@pnpm tsc --build ./tsconfig.monorepo.json
 
+.PHONY: pkgs-types-clean
 pkgs-types-clean: ##@1 packages clean all package types
 	@pnpm tsc --build --clean ./tsconfig.monorepo.json
 
@@ -175,12 +196,15 @@ pkg-types-%: ##@1 packages generate types for a specific package
 	fi;
 
 pkg-build-%: pkg-types-% ##@1 packages build a package
+	@echo "${YELLOW}Building package ${WHITE}@nivo/${*}${RESET}"
 	@-rm -rf ./packages/${*}/dist/nivo-${*}*
 	@export PACKAGE=${*}; NODE_ENV=production BABEL_ENV=production ./node_modules/.bin/rollup -c conf/rollup.config.mjs
 
+.PHONY: pkgs-screenshots
 pkgs-screenshots: ##@1 packages generate screenshots for packages readme (website dev server must be running)
 	@node scripts/capture.mjs
 
+.PHONY: pkgs-publish-dry-run
 pkgs-publish-dry-run: ##@1 packages dry run for packages publication
 	#@$(MAKE) pkgs-build
 	@pnpm lerna publish \
@@ -191,12 +215,14 @@ pkgs-publish-dry-run: ##@1 packages dry run for packages publication
         --registry "http://localhost:4873" \
         --loglevel verbose
 
+.PHONY: pkgs-publish
 pkgs-publish: ##@1 packages publish all packages
 	@$(MAKE) pkgs-build
 
 	@echo "${YELLOW}Publishing packages${RESET}"
 	@pnpm lerna publish --exact
 
+.PHONY: pkgs-publish-next
 pkgs-publish-next: ##@1 packages publish all packages for @next npm tag
 	@$(MAKE) pkgs-build
 
@@ -208,72 +234,73 @@ pkg-dev-%: ##@1 packages build package (es flavor) on change, eg. `package-watch
 	@rm -rf ./packages/${*}/cjs
 	@export PACKAGE=${*}; NODE_ENV=development BABEL_ENV=development ./node_modules/.bin/rollup -c conf/rollup.config.mjs -w
 
+
 ########################################################################################################################
 #
 # 2. WEBSITE
 #
 ########################################################################################################################
 
+.PHONY: website-deps-up
 website-deps-up: ##@2 website interactive upgrade of website's dependencies
 	@pnpm upgrade-interactive --latest
 
+.PHONY: website
 website: ##@2 website start website in dev mode
 	@echo "${YELLOW}Starting website dev server${RESET}"
 	@cd website && pnpm start
 
+.PHONY: website-build
 website-build: ##@2 website build website
 	@echo "${YELLOW}Building website${RESET}"
 	@-rm -rf website/.cache
 	@cd website && pnpm build
 
+.PHONY: website-serve
 website-serve: ##@2 website build & serve website
 	@$(MAKE) website-build
 	@cd website && pnpm serve
 
-website-deploy: ##@2 website build & deploy website
-	@$(MAKE) website-build
-
-	@echo "${YELLOW}Deploying website${RESET}"
-	@pnpm gh-pages -d website/public -r [email protected]:plouc/nivo.git -b gh-pages
-
+.PHONY: website-audit
 website-audit: ##@2 website audit website build
 	@cd website && pnpm analyze
 
+.PHONY: website-lint
 website-lint: ##@2 website run eslint on the website code
 	@pnpm eslint ./website/src
 
+.PHONY: website-sprites
 website-sprites: ##@2 website build sprite sheet
 	@glue --img website/src/assets --css website/src/styles website/src/assets/icons
 
+
 ########################################################################################################################
 #
 # 3. STORYBOOK
 #
 ########################################################################################################################
 
+.PHONY: storybook
 storybook: ##@3 storybook start storybook in dev mode on port 6006
 	@pnpm --filter storybook dev
 
+.PHONY: storybook-build
 storybook-build: ##@3 storybook build storybook
 	@echo "${YELLOW}Building storybook${RESET}"
 	@pnpm --filter storybook build
 
-storybook-deploy: ##@3 storybook build and deploy storybook
-	@$(MAKE) storybook-build
-
-	@echo "${YELLOW}Deploying storybook${RESET}"
-	@pnpm gh-pages -d storybook/storybook-static -r [email protected]:plouc/nivo.git -b gh-pages -e storybook
-
 
 ########################################################################################################################
 #
 # 4. End-to-end tests
 #
 ########################################################################################################################
 
+.PHONY: end-to-end-open
 end-to-end-open: ##@4 end-to-end open cypress
 	pnpm --filter nivo-e2e open
 
+.PHONY: end-to-end-test
 end-to-end-test: ##@4 end-to-end build
 	pnpm --filter nivo-e2e test
 
@@ -284,16 +311,20 @@ end-to-end-test: ##@4 end-to-end build
 #
 ########################################################################################################################
 
+.PHONY: api-dev
 api-dev: ##@5 API run API in dev mode (watcher)
 	@echo "${YELLOW}Starting API in dev mode${RESET}"
 	@cd api && pnpm dev
 
+.PHONY: api
 api: ##@5 API run API in regular mode (no watcher)
 	@echo "${YELLOW}Starting API${RESET}"
 	@cd api && pnpm start
 
+.PHONY: api-lint
 api-lint: ##@5 API run eslint on the API code
 	@pnpm eslint ./api/src
 
+.PHONY: api-deploy
 api-deploy: ##@5 API Deploy API on heroku
 	git subtree push --prefix api heroku master

conf/rollup.config.mjs

@@ -5,10 +5,11 @@ import stripBanner from 'rollup-plugin-strip-banner'
 import cleanup from 'rollup-plugin-cleanup'
 import size from 'rollup-plugin-size'
 import { visualizer } from 'rollup-plugin-visualizer'
-import terser from "@rollup/plugin-terser"
+import terser from '@rollup/plugin-terser'
 
 const pkg = process.env.PACKAGE
 const isWatching = process.env.ROLLUP_WATCH === 'true'
+const skipSize = process.env.SKIP_SIZE === 'true'
 
 const extensions = ['.js', '.jsx', '.es6', '.es', '.mjs', '.ts', '.tsx']
 const babelConfig = {
@@ -21,6 +22,8 @@ const babelConfig = {
 const externals = [
     'prop-types',
     'joi',
+    'express',
+    'uuid',
 ]
 
 let input = `./packages/${pkg}/src/index.js`
@@ -53,7 +56,7 @@ const commonPlugins = [
         modulesOnly: true,
     }),
     babel(babelConfig),
-    !isWatching && terser(),
+    // !isWatching && terser(),
     cleanup()
 ]
 
@@ -68,12 +71,12 @@ const configs = [
         },
         plugins: [
             ...commonPlugins,
-            !isWatching && size({
+            !skipSize && !isWatching && size({
                 filename: `stats/${pkg}-size.es.json`,
             }),
-            !isWatching && visualizer({
+            !skipSize && !isWatching && visualizer({
+                template: 'raw-data',
                 filename: `stats/${pkg}-stats.es.json`,
-                json: true,
             })
         ].filter(Boolean),
     }