Add theming capability to Explorer 1

.github/workflows/lint.yml

@@ -11,20 +11,23 @@ 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
+        run: pnpm run lint:js
 
       - name: Lint styles 💅
-        run: npm run lint:style
+        run: pnpm run lint:style
 
       - name: Check Prettier ✨
-        run: npm run lint:format
+        run: pnpm run lint:format

.gitignore

@@ -1,35 +1,76 @@
-# 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
+
+# Testing
+reports
+coverage
+*.lcov
+.nyc_output
+
+# parcel.js
+.parcel-cache
+.parcel
+
+# 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 @@
+shamefully-hoist=true

.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,119 @@ 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 dependencies
+install: check-nvm
+	pnpm install
+
+i: install
+
+## HTML: run Storybook
+html-storybook:
+	pnpm --filter @explorer-1/html-storybook dev
+
+## HTML: run Vite
+html-dev:
+	pnpm --filter @explorer-1/html dev
+
+html: 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: run Vite
+vue-dev:
+	pnpm --filter @explorer-1/vue dev
+
+vue: 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
+
+# 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)

apps/html-storybook/.eslintrc.cjs

@@ -0,0 +1,9 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+module.exports = {
+  root: true,
+  extends: ['eslint:recommended', 'plugin:storybook/recommended'],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

apps/html-storybook/.storybook/main.ts

@@ -0,0 +1,44 @@
+import remarkGfm from 'remark-gfm'
+
+export default {
+  framework: {
+    name: '@storybook/html-vite',
+    options: {}
+  },
+
+  stories: [
+    // @explorer-1/html
+    './../node_modules/@explorer-1/html/src/**/*.stories.@(js|ts)',
+    './../node_modules/@explorer-1/html/src/**/*.docs.@(mdx|jsx)'
+  ],
+
+  staticDirs: ['./../public'],
+
+  addons: [
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+        actions: false
+      }
+    },
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm]
+          }
+        }
+      }
+    },
+    '@storybook/addon-a11y',
+    '@whitespace/storybook-addon-html'
+  ],
+
+  core: {
+    disableTelemetry: true
+  },
+
+  docs: {}
+};

storybook/manager-head.html → apps/html-storybook/.storybook/manager-head.html

@@ -1,9 +1,9 @@
 <style type="text/css">
   /* styles for the storybook sidebar */
-  @import 'css/font-face.css';
+  @import 'dist/css/font-face.css';
 
   .sidebar-item {
-    font-family: Metropolis, serif !important;
+    font-family: Metropolis, sans-serif !important;
     line-height: 1.2rem !important;
     display: flex !important;
     align-items: center !important;