feat: add @tutorialkit/theme package to use the theme without astro (#105)

Nemikolh · web-flow · commit 9805996a4211 · 2024-06-28T21:35:56.000+01:00
diff --git a/docs/demo/package.json b/docs/demo/package.json
@@ -23,12 +23,11 @@
     "@iconify-json/svg-spinners": "^1.1.2",
     "@tutorialkit/astro": "workspace:*",
     "@tutorialkit/types": "workspace:*",
-    "@unocss/reset": "^0.60.4",
-    "@unocss/transformer-directives": "^0.60.4",
+    "@unocss/reset": "^0.59.4",
     "astro": "^4.10.3",
     "fast-glob": "^3.3.2",
     "prettier-plugin-astro": "^0.14.0",
     "typescript": "^5.4.5",
-    "unocss": "^0.60.4"
+    "unocss": "^0.59.4"
   }
 }
diff --git a/docs/demo/uno.config.ts b/docs/demo/uno.config.ts
@@ -1,9 +1,8 @@
-import { theme } from '@tutorialkit/astro';
-import transformerDirectives from '@unocss/transformer-directives';
+import { unoCSSConfig } from '@tutorialkit/astro';
 import { globSync, convertPathToPattern } from 'fast-glob';
 import fs from 'node:fs/promises';
 import { basename, dirname, join } from 'node:path';
-import { defineConfig, presetIcons, presetUno } from 'unocss';
+import { defineConfig, presetIcons, presetUno, transformerDirectives } from 'unocss';
 
 const iconPaths = globSync('./icons/languages/*.svg');
 
@@ -21,29 +20,14 @@ const customIconCollection = iconPaths.reduce(
 );
 
 export default defineConfig({
-  theme,
+  ...unoCSSConfig,
   content: {
     inline: globSync(
       `${convertPathToPattern(join(require.resolve('@tutorialkit/components-react'), '..'))}/**/*.js`,
     ).map((filePath) => {
       return () => fs.readFile(filePath, { encoding: 'utf8' });
     }),
   },
-  rules: [
-    ['scrollbar-transparent', { 'scrollbar-color': '#0000004d transparent' }],
-    ['nav-box-shadow', { 'box-shadow': '0 2px 4px -1px rgba(0, 0, 0, 0.1)' }],
-    ['transition-background', { 'transition-property': 'background' }],
-  ],
-  shortcuts: {
-    'panel-container': 'grid grid-rows-[min-content_1fr] h-full',
-    'panel-header':
-      'flex items-center px-4 py-2 bg-tk-elements-panel-header-backgroundColor min-h-[38px] overflow-x-hidden',
-    'panel-tabs-header': 'flex bg-tk-elements-panel-header-backgroundColor h-[38px]',
-    'panel-title': 'flex items-center gap-1.5 text-tk-elements-panel-header-textColor',
-    'panel-icon': 'text-tk-elements-panel-header-iconColor',
-    'panel-button':
-      'flex items-center gap-1.5 whitespace-nowrap rounded-md text-sm bg-tk-elements-panel-headerButton-backgroundColor hover:bg-tk-elements-panel-headerButton-backgroundColorHover text-tk-elements-panel-headerButton-textColor hover:text-tk-elements-panel-headerButton-textColorHover',
-  },
   transformers: [transformerDirectives()],
   presets: [
     presetUno({
diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -2,6 +2,7 @@
   "name": "@tutorialkit/astro",
   "version": "0.0.1-alpha.23",
   "description": "TutorialKit integration for Astro (https://astro.build)",
+  "author": "StackBlitz Inc.",
   "type": "module",
   "bugs": "https://github.com/stackblitz/tutorialkit/issues",
   "homepage": "https://github.com/stackblitz/tutorialkit",
@@ -28,6 +29,7 @@
     "@nanostores/react": "0.7.2",
     "@tutorialkit/components-react": "workspace:*",
     "@tutorialkit/runtime": "workspace:*",
+    "@tutorialkit/theme": "workspace:*",
     "@tutorialkit/types": "workspace:*",
     "@types/react": "^18.3.3",
     "@webcontainer/api": "1.2.0",
diff --git a/packages/astro/src/index.ts b/packages/astro/src/index.ts
@@ -1,13 +1,18 @@
+import { rules, shortcuts, theme } from '@tutorialkit/theme';
 import type { AstroConfig, AstroIntegration } from 'astro';
 import { fileURLToPath } from 'node:url';
 import { extraIntegrations } from './integrations.js';
 import { updateMarkdownConfig } from './remark/index.js';
-import { WebContainerFiles } from './webcontainer-files/index.js';
+import { tutorialkitCore } from './vite-plugins/core.js';
 import { userlandCSS, watchUserlandCSS } from './vite-plugins/css.js';
 import { tutorialkitStore } from './vite-plugins/store.js';
-import { tutorialkitCore } from './vite-plugins/core.js';
+import { WebContainerFiles } from './webcontainer-files/index.js';
 
-export { theme } from './theme.js';
+export const unoCSSConfig = {
+  theme,
+  rules,
+  shortcuts,
+};
 
 export interface Options {
   /**
diff --git a/packages/astro/tsconfig.json b/packages/astro/tsconfig.json
@@ -8,5 +8,10 @@
     "outDir": "dist"
   },
   "include": ["src"],
-  "references": [{ "path": "../runtime" }, { "path": "../types" }, { "path": "../components/react" }]
+  "references": [
+    { "path": "../runtime" },
+    { "path": "../types" },
+    { "path": "../components/react" },
+    { "path": "../theme" }
+  ]
 }
diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -2,6 +2,7 @@
   "name": "tutorialkit",
   "version": "0.0.1-alpha.23",
   "description": "Interactive tutorials powered by WebContainer API",
+  "author": "StackBlitz Inc.",
   "type": "module",
   "bugs": "https://github.com/stackblitz/tutorialkit/issues",
   "homepage": "https://github.com/stackblitz/tutorialkit",
diff --git a/packages/components/react/package.json b/packages/components/react/package.json
@@ -2,6 +2,7 @@
   "name": "@tutorialkit/components-react",
   "version": "0.0.1-alpha.23",
   "description": "TutorialKit's React components",
+  "author": "StackBlitz Inc.",
   "type": "module",
   "bugs": "https://github.com/stackblitz/tutorialkit/issues",
   "homepage": "https://github.com/stackblitz/tutorialkit",
diff --git a/packages/create-tutorial/package.json b/packages/create-tutorial/package.json
@@ -2,6 +2,7 @@
   "name": "create-tutorial",
   "version": "0.0.1-alpha.23",
   "description": "Interactive tutorials powered by WebContainer API",
+  "author": "StackBlitz Inc.",
   "type": "module",
   "bugs": "https://github.com/stackblitz/tutorialkit/issues",
   "homepage": "https://github.com/stackblitz/tutorialkit",
diff --git a/packages/runtime/package.json b/packages/runtime/package.json
@@ -2,6 +2,7 @@
   "name": "@tutorialkit/runtime",
   "version": "0.0.1-alpha.23",
   "description": "TutorialKit runtime",
+  "author": "StackBlitz Inc.",
   "type": "module",
   "bugs": "https://github.com/stackblitz/tutorialkit/issues",
   "homepage": "https://github.com/stackblitz/tutorialkit",
diff --git a/packages/template/package.json b/packages/template/package.json
@@ -25,7 +25,6 @@
     "@types/node": "^20.14.6",
     "@types/react": "^18.3.3",
     "@unocss/reset": "^0.59.4",
-    "@unocss/transformer-directives": "^0.59.4",
     "astro": "4.10.3",
     "fast-glob": "^3.3.2",
     "prettier-plugin-astro": "^0.13.0",
diff --git a/packages/template/uno.config.ts b/packages/template/uno.config.ts
@@ -1,9 +1,8 @@
-import { theme } from '@tutorialkit/astro';
-import transformerDirectives from '@unocss/transformer-directives';
+import { unoCSSConfig } from '@tutorialkit/astro';
 import { globSync, convertPathToPattern } from 'fast-glob';
 import fs from 'node:fs/promises';
 import { basename, dirname, join } from 'node:path';
-import { defineConfig, presetIcons, presetUno } from 'unocss';
+import { defineConfig, presetIcons, presetUno, transformerDirectives } from 'unocss';
 
 const iconPaths = globSync('./icons/languages/*.svg');
 
@@ -21,29 +20,14 @@ const customIconCollection = iconPaths.reduce(
 );
 
 export default defineConfig({
-  theme,
+  ...unoCSSConfig,
   content: {
     inline: globSync(
       `${convertPathToPattern(join(require.resolve('@tutorialkit/components-react'), '..'))}/**/*.js`,
     ).map((filePath) => {
       return () => fs.readFile(filePath, { encoding: 'utf8' });
     }),
   },
-  rules: [
-    ['scrollbar-transparent', { 'scrollbar-color': '#0000004d transparent' }],
-    ['nav-box-shadow', { 'box-shadow': '0 2px 4px -1px rgba(0, 0, 0, 0.1)' }],
-    ['transition-background', { 'transition-property': 'background' }],
-  ],
-  shortcuts: {
-    'panel-container': 'grid grid-rows-[min-content_1fr] h-full',
-    'panel-header':
-      'flex items-center px-4 py-2 bg-tk-elements-panel-header-backgroundColor min-h-[38px] overflow-x-hidden',
-    'panel-tabs-header': 'flex bg-tk-elements-panel-header-backgroundColor h-[38px]',
-    'panel-title': 'flex items-center gap-1.5 text-tk-elements-panel-header-textColor',
-    'panel-icon': 'text-tk-elements-panel-header-iconColor',
-    'panel-button':
-      'flex items-center gap-1.5 whitespace-nowrap rounded-md text-sm bg-tk-elements-panel-headerButton-backgroundColor hover:bg-tk-elements-panel-headerButton-backgroundColorHover text-tk-elements-panel-headerButton-textColor hover:text-tk-elements-panel-headerButton-textColorHover',
-  },
   transformers: [transformerDirectives()],
   presets: [
     presetUno({
diff --git a/packages/theme/package.json b/packages/theme/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@tutorialkit/theme",
+  "version": "0.0.1-alpha.23",
+  "description": "TutorialKit theme configuration",
+  "author": "StackBlitz Inc.",
+  "type": "module",
+  "bugs": "https://github.com/stackblitz/tutorialkit/issues",
+  "homepage": "https://github.com/stackblitz/tutorialkit",
+  "license": "MIT",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -b"
+  },
+  "dependencies": {
+    "unocss": "^0.59.4"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.5"
+  }
+}
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
@@ -0,0 +1,20 @@
+import type { ConfigBase } from 'unocss';
+
+export { theme } from './theme.js';
+
+export const rules: ConfigBase['rules'] = [
+  ['scrollbar-transparent', { 'scrollbar-color': '#0000004d transparent' }],
+  ['nav-box-shadow', { 'box-shadow': '0 2px 4px -1px rgba(0, 0, 0, 0.1)' }],
+  ['transition-background', { 'transition-property': 'background' }],
+];
+
+export const shortcuts: ConfigBase['shortcuts'] = {
+  'panel-container': 'grid grid-rows-[min-content_1fr] h-full',
+  'panel-header':
+    'flex items-center px-4 py-2 bg-tk-elements-panel-header-backgroundColor min-h-[38px] overflow-x-hidden',
+  'panel-tabs-header': 'flex bg-tk-elements-panel-header-backgroundColor h-[38px]',
+  'panel-title': 'flex items-center gap-1.5 text-tk-elements-panel-header-textColor',
+  'panel-icon': 'text-tk-elements-panel-header-iconColor',
+  'panel-button':
+    'flex items-center gap-1.5 whitespace-nowrap rounded-md text-sm bg-tk-elements-panel-headerButton-backgroundColor hover:bg-tk-elements-panel-headerButton-backgroundColorHover text-tk-elements-panel-headerButton-textColor hover:text-tk-elements-panel-headerButton-textColorHover',
+};
diff --git a/packages/theme/src/theme.ts b/packages/theme/src/theme.ts
@@ -96,7 +96,7 @@ const PRIMITIVES = {
   },
 };
 
-export const theme: ConfigBase['theme'] = {
+export const theme = {
   colors: {
     ...PRIMITIVES,
     tk: {
@@ -322,4 +322,4 @@ export const theme: ConfigBase['theme'] = {
       },
     },
   },
-};
+} satisfies ConfigBase['theme'];
diff --git a/packages/theme/tsconfig.json b/packages/theme/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "composite": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/types/package.json b/packages/types/package.json
@@ -2,6 +2,7 @@
   "name": "@tutorialkit/types",
   "version": "0.0.1-alpha.23",
   "description": "Types for TutorialKit",
+  "author": "StackBlitz Inc.",
   "type": "module",
   "bugs": "https://github.com/stackblitz/tutorialkit/issues",
   "homepage": "https://github.com/stackblitz/tutorialkit",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
