Feature: convert to monorepo, add a vue library and nuxt module (#432)

* converting monorepo (pnpm workspaces)

* fixing symlinks issue in mdx

* fixing ts config in packages/html

* small fixes to tailwind config and mdx render

* unifying prettier config and tsconfig

* prototyping how to share story data between storybooks

* completing @explorer-1/vue package

* completing @explorer-1/storybook-vue app

* updating makefile

* switching vue vite to library mode

* adding @explorer-1/nuxt module

* adding module to makefile, minor cleanup

* fixing duplicate modules in vite

* fixing make commands, building module

* removing ignored dist

* updating gitignore

* renaming storybook-* to *-storybook

* updating Storybook to 8.1.2

* wip updating github workflow for pnpm

* adding @explorer-1/common-storybook

* disabling linting in ci (temporary), fixing storybook action

* restore some linting actions

* updating gitignore

* adding gitkeep for public folder

* Feature: monorepo eslint upgrade to flat config (#435)

* adds .history folder to gitignore

* linting passes

* remove old eslint config files

* remove --debug from eslint cli

* convert packages/html to use vite instead of parcel

parcel cleanup

---------

Co-authored-by: James Ray <[email protected]>

.github/workflows/build-deploy-storybook.yml

@@ -18,24 +18,27 @@ jobs:
       - name: Checkout 🛎️
         uses: actions/checkout@v4
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
       - name: Set up Node ⬢
         uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-          cache: 'npm'
+          cache: 'pnpm'
 
       - name: Install dependencies 🧱
-        run: npm ci
+        run: pnpm ci
 
       - name: Build static Storybook 🛠
-        run: npm run build-storybook
-      
+        run: make html-storybook-build
+
         # https://github.com/JamesIves/github-pages-deploy-action/issues/1475#issuecomment-1824079512
       - name: Add nojekyll file to read underscore files 📋
-        run: cd storybook_compiled && touch .nojekyll
+        run: cd apps/html-storybook/storybook_compiled && touch .nojekyll
 
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@v4
         with:
-          folder: storybook_compiled
+          folder: apps/html-storybook/storybook_compiled
           branch: gh-pages

.github/workflows/lint.yml

@@ -11,20 +11,17 @@ jobs:
       - name: Checkout 🛎️
         uses: actions/checkout@v4
 
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
       - name: Set up Node ⬢
         uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
-          cache: 'npm'
+          cache: 'pnpm'
 
       - name: Install dependencies 🧱
-        run: npm install
+        run: pnpm install
 
       - name: Lint scripts 🏗
-        run: npm run lint:js
-
-      - name: Lint styles 💅
-        run: npm run lint:style
-
-      - name: Check Prettier ✨
-        run: npm run lint:format
+        run: pnpm run lint

.gitignore

@@ -1,35 +1,75 @@
-# mac OS
-.DS_Store
-
 # npm
 node_modules/
 npm-debug.log
 
-# parcel.js
-.parcel-cache
-/src/.parcel
+# OSX
+.DS_Store
+.AppleDouble
+.LSOverride
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
 
-# Storybook
-storybook_compiled
+# Temp directories
+.temp
+.tmp
+.cache
+
+# Linter caches
+.eslintcache
+.stylelintcache
+
+# Logs
+*.log*
 
 # PyCharm
 .idea
 
-# vscode
-.vscode
-
-# IntelliJ
+# Intellij
 out/
+*.iml
+.idea
 
 # mpeltonen/sbt-idea plugin
 .idea_modules/
 
+# VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History extension for VSCode
+.history
+
+# Testing
+reports
+coverage
+*.lcov
+.nyc_output
+
+# Storybook
+storybook_compiled
+
+# Nuxt
+.nuxt
+.output
+.data
+.vercel_build_output
+.build-*
+.netlify
+
 # Tailwind
 .www-frontend_temp/
 
-# Linter caches
-.eslintcache
-.stylelintcache
+# copied assets when preparing builds
+apps/**/.storybook/static/dist
+packages/**/src/assets/fonts
 
-# logs
-.log
+# dist
+dist
+!packages/**/dist

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+package-manager-strict=false

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["bradlc.vscode-tailwindcss", "Vue.volar"]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "scss.lint.unknownAtRules": "ignore"
+}

Makefile

@@ -3,14 +3,145 @@ ifneq (,)
 This makefile requires GNU Make.
 endif
 
-storybook:
-	npm run storybook
+NODE_VERSION ?= $(shell node --version)
+NPM_VERSION ?= $(shell npm --version)
+NVM_EXISTS := $(shell if [ -d "${HOME}/.nvm" ]; then echo "nvm installed"; fi)
 
-storybook-update:
-	npx storybook@latest upgrade
+TERM_TEXT := tput -Txterm
+GREEN  := $(shell $(TERM_TEXT) setaf 2)
+YELLOW := $(shell $(TERM_TEXT) setaf 3)
+RESET  := $(shell $(TERM_TEXT) sgr0)
+TARGET_MAX_CHAR_NUM := 23
+.DEFAULT_GOAL := help
 
-storybook-migrate:
-	npx storybook automigrate
+nvm-use:
+	. ${HOME}/.nvm/nvm.sh && nvm use
 
-storybook-doctor:
-	npx storybook automigrate
+check-nvm:
+ifndef NVM_EXISTS
+	@echo '$(YELLOW)Node Version Manager not found 😿$(RESET)'
+	@( read -p "$(YELLOW)Please install nvm: https://github.com/nvm-sh/nvm$(RESET)")
+else
+	if [ -d "$(HOME)/.nvm/.git" ]; then echo "🚚 installing dependencies from $(YELLOW)package.json$(RESET)..."; fi
+	@echo '   --------------------'
+	@echo '📦 $(GREEN)Node Version Manager$(RESET)'
+	@echo '   $(YELLOW)node: $(NODE_VERSION)$(RESET)'
+	@echo '   $(YELLOW)npm: v$(NPM_VERSION)$(RESET)'
+	@echo '👀 looking for $(YELLOW).nvmrc$(RESET) file with expected node version...'
+	@make nvm-use
+	@echo '⏳ it can take a few minutes to install all of the $(YELLOW)node_modules$(RESET)'
+	@echo '🙆 this could be a good opportunity to have a stretch... '
+	@echo '⏭️  postinstall will check $(GREEN)workspaces$(RESET) with $(YELLOW)manypkg$(RESET)...'
+endif
+
+nvm:
+	make check-nvm && $(CMD)
+
+## Install: node_modules dependencies with pnpm
+install: check-nvm
+	pnpm install
+
+i: install
+
+## Clean: remove node_modules
+clean:
+	pnpm run clean
+
+## Refresh: remove node_modules and install
+refresh:
+	pnpm run refresh
+
+fresh: refresh
+
+## Nuke: clean and reinstall node_modules
+nuke:
+	pnpm run nuke
+
+## HTML: run Storybook
+html-storybook:
+	pnpm --filter @explorer-1/html-storybook dev
+
+## HTML: build Storybook
+html-storybook-build:
+	pnpm --filter @explorer-1/html-storybook build
+
+## HTML: run Vite
+html-dev:
+	pnpm --filter @explorer-1/html dev
+
+## HTML: build assets
+html-build:
+	pnpm --filter @explorer-1/html build
+
+## Vue: run Storybook
+vue-storybook:
+	pnpm --filter @explorer-1/vue-storybook dev
+
+## Vue: build Storybook
+vue-storybook-build:
+	pnpm --filter @explorer-1/vue-storybook build
+
+## Vue: run Vite
+vue-dev:
+	pnpm --filter @explorer-1/vue dev
+
+## Vue: build assets
+vue-build:
+	pnpm --filter @explorer-1/vue build
+
+## Nuxt: run module playground
+nuxt-dev:
+	pnpm --filter @explorer-1/nuxt dev
+
+## Nuxt: build module
+nuxt-build:
+	pnpm --filter @explorer-1/nuxt build
+
+## Lint: run ESLint
+lint:
+	pnpm run lint
+
+## Lint fix: run ESLint
+lint-fix:
+	pnpm run lint:fix
+
+# TODO: Below helper commands not running as expected change dir first, then pnpm dlx...
+# ## HTML: update Storybook
+# html-storybook-update:
+# 	pnpm --dir apps/html-storybook dlx storybook@latest upgrade --config-dir apps/html-storybook/.storybook
+
+# ## HTML: run Storybook automigrations
+# html-storybook-migrate:
+# 	pnpm --dir apps/html-storybook dlx storybook automigrate --config-dir apps/html-storybook/.storybook
+
+# ## HTML: check Storybook health
+# html-storybook-doctor:
+# 	pnpm --dir apps/html-storybook dlx storybook doctor --config-dir apps/html-storybook/.storybook
+
+# ## Vue: update Storybook
+# vue-storybook-update:
+# 	pnpm --dir apps/vue-storybook dlx storybook@latest upgrade --config-dir apps/vue-storybook/.storybook
+
+# ## Vue: run Storybook automigrations
+# vue-storybook-migrate:
+# 	pnpm --dir apps/vue-storybook dlx storybook automigrate --config-dir apps/vue-storybook/.storybook
+
+# ## Vue: check Storybook health
+# vue-storybook-doctor:
+# 	pnpm --dir apps/vue-storybook dlx storybook doctor --config-dir apps/vue-storybook/.storybook
+
+## General: Show Makefile help / View all commands @default make target
+help:
+	@echo ''
+	@echo 'Makefile Usage:'
+	@echo '  ${GREEN}make${RESET} ${GREEN}[command]${RESET}'
+	@echo 'Available Commands:'
+	@awk '/^[a-zA-Z\-\_0-9]+:/ { \
+		helpMessage = match(lastLine, /^## (.*)/); \
+		if (helpMessage) { \
+			helpCommand = substr($$1, 0, index($$1, ":")-1); \
+			helpMessage = substr(lastLine, RSTART + 3, RLENGTH); \
+			printf "  ${YELLOW}%-$(TARGET_MAX_CHAR_NUM)s${RESET} ${GREEN}%s${RESET}\n", helpCommand, helpMessage; \
+		} \
+	} \
+	{ lastLine = $$0 }' $(MAKEFILE_LIST)