feat!: rename @tutorialkit/components-react to @tutorialkit/react

.github/workflows/publish-commit.yaml

@@ -61,7 +61,7 @@ jobs:
         run: >
           pnpm dlx [email protected] publish --compact --pnpm
           ./packages/astro
-          ./packages/components/react
+          ./packages/react
           ./packages/runtime
           ./packages/theme
           ./packages/types

CONTRIBUTING.md

@@ -31,7 +31,7 @@ The monorepo consists of multiple packages that are grouped into following group
 These packages will be installed by the end-users in their `package.json`.
 
 - `@tutorialkit/astro`
-- `@tutorialkit/components-react`
+- `@tutorialkit/react`
 - `@tutorialkit/runtime`
 - `@tutorialkit/theme`
 - `@tutorialkit/types`
@@ -53,7 +53,7 @@ You may wish to test your locally-modified copy of TutorialKit against another p
   "pnpm": {
     "overrides": {
       "@tutorialkit/astro": "file:../tutorialkit/packages/astro",
-      "@tutorialkit/components-react": "file:../tutorialkit/packages/components/react",
+      "@tutorialkit/react": "file:../tutorialkit/packages/react",
       "@tutorialkit/runtime": "file:../tutorialkit/packages/runtime",
       "@tutorialkit/theme": "file:../tutorialkit/packages/theme",
       "@tutorialkit/types": "file:../tutorialkit/packages/types"

docs/demo/package.json

@@ -11,7 +11,7 @@
     "preview": "astro preview"
   },
   "dependencies": {
-    "@tutorialkit/components-react": "workspace:*",
+    "@tutorialkit/react": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

docs/tutorialkit.dev/package.json

@@ -11,7 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@tutorialkit/components-react": "workspace:*",
+    "@tutorialkit/react": "workspace:*",
     "@webcontainer/api": "1.2.0",
     "classnames": "^2.5.1",
     "react": "^18.3.1",

docs/tutorialkit.dev/src/components/react-examples/Example.astro

@@ -1,5 +1,5 @@
 ---
-import { classNames } from '@tutorialkit/components-react';
+import { classNames } from '@tutorialkit/react';
 import '@tutorialkit/astro/default-theme.css';
 
 interface Props {

docs/tutorialkit.dev/src/components/react-examples/ExampleCodeMirrorEditor.tsx

@@ -1,5 +1,5 @@
-import type { EditorDocument, EditorUpdate, ScrollPosition } from '@tutorialkit/components-react/core';
-import CodeMirrorEditor from '@tutorialkit/components-react/core/CodeMirrorEditor';
+import type { EditorDocument, EditorUpdate, ScrollPosition } from '@tutorialkit/react/core';
+import CodeMirrorEditor from '@tutorialkit/react/core/CodeMirrorEditor';
 import { useState } from 'react';
 import { useTheme } from './hooks/useTheme';
 

docs/tutorialkit.dev/src/components/react-examples/ExampleFileTree.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import FileTree from '@tutorialkit/components-react/core/FileTree';
+import FileTree from '@tutorialkit/react/core/FileTree';
 
 export default function ExampleFileTree() {
   const [selectedFile, setSelectedFile] = useState(FILES[0]);

docs/tutorialkit.dev/src/components/react-examples/ExampleSimpleEditor.tsx

@@ -1,13 +1,13 @@
-import type { EditorDocument, EditorUpdate, ScrollPosition } from '@tutorialkit/components-react/core';
-import CodeMirrorEditor from '@tutorialkit/components-react/core/CodeMirrorEditor';
-import FileTree from '@tutorialkit/components-react/core/FileTree';
+import type { EditorDocument, EditorUpdate, ScrollPosition } from '@tutorialkit/react/core';
+import CodeMirrorEditor from '@tutorialkit/react/core/CodeMirrorEditor';
+import FileTree from '@tutorialkit/react/core/FileTree';
 import type { FileSystemTree, DirectoryNode } from '@webcontainer/api';
 import type { Terminal as XTerm } from '@xterm/xterm';
 import { Suspense, lazy, useEffect, useState } from 'react';
 import { useTheme } from './hooks/useTheme';
 import { useWebContainer } from './hooks/useWebcontainer';
 
-const Terminal = lazy(() => import('@tutorialkit/components-react/core/Terminal'));
+const Terminal = lazy(() => import('@tutorialkit/react/core/Terminal'));
 
 export default function ExampleSimpleEditor() {
   const [domLoaded, setDomLoaded] = useState(false);

docs/tutorialkit.dev/src/components/react-examples/ExampleTerminal.tsx

@@ -3,7 +3,7 @@ import { useTheme } from './hooks/useTheme';
 import type { Terminal as XTerm } from '@xterm/xterm';
 import { useWebContainer } from './hooks/useWebcontainer';
 
-const Terminal = lazy(() => import('@tutorialkit/components-react/core/Terminal'));
+const Terminal = lazy(() => import('@tutorialkit/react/core/Terminal'));
 
 export default function ExampleTerminal() {
   // only needed in astro because of SSR

docs/tutorialkit.dev/src/content/docs/reference/react-components.mdx

@@ -32,17 +32,17 @@ These components use TutorialKit's design system which is based on an atomic CSS
 <PackageManagerTabs>
   <Fragment slot="npm">
   ```shell
-  npm install @tutorialkit/components-react @tutorialkit/theme
+  npm install @tutorialkit/react @tutorialkit/theme
   ```
   </Fragment>
   <Fragment slot="pnpm">
   ```shell
-  pnpm install @tutorialkit/components-react @tutorialkit/theme
+  pnpm install @tutorialkit/react @tutorialkit/theme
   ```
   </Fragment>
   <Fragment slot="yarn">
   ```shell
-  yarn add @tutorialkit/components-react @tutorialkit/theme
+  yarn add @tutorialkit/react @tutorialkit/theme
   ```
   </Fragment>
 </PackageManagerTabs>

e2e/package.json

@@ -14,7 +14,7 @@
     "@iconify-json/svg-spinners": "^1.1.2",
     "@playwright/test": "^1.46.0",
     "@tutorialkit/astro": "workspace:*",
-    "@tutorialkit/components-react": "workspace:*",
+    "@tutorialkit/react": "workspace:*",
     "@tutorialkit/runtime": "workspace:*",
     "@tutorialkit/theme": "workspace:*",
     "@tutorialkit/types": "workspace:*",

packages/astro/README.md

@@ -2,7 +2,7 @@
 
 This **[Astro integration][astro-integration]** adds [TutorialKit](https://tutorialkit.dev/) to your project so that you can use TutorialKit's tutorial format for your astro content.
 
-This integration adds routes to serve your tutorial. It uses `@tutorialkit/components-react` for the dynamic part of the experience.
+This integration adds routes to serve your tutorial. It uses `@tutorialkit/react` for the dynamic part of the experience.
 
 ## License
 

packages/astro/package.json

@@ -37,7 +37,7 @@
     "@expressive-code/plugin-line-numbers": "^0.35.3",
     "@nanostores/react": "0.7.2",
     "@stackblitz/sdk": "^1.11.0",
-    "@tutorialkit/components-react": "workspace:*",
+    "@tutorialkit/react": "workspace:*",
     "@tutorialkit/runtime": "workspace:*",
     "@tutorialkit/theme": "workspace:*",
     "@tutorialkit/types": "workspace:*",

packages/astro/src/default/components/LoginButton.tsx

@@ -1,5 +1,5 @@
 import { useStore } from '@nanostores/react';
-import { classNames } from '@tutorialkit/components-react';
+import { classNames } from '@tutorialkit/react';
 import { useEffect, useRef, useState } from 'react';
 import { authStore } from '../stores/auth-store';
 import { login, logout } from './webcontainer';

packages/astro/src/default/components/NavWrapper.tsx

@@ -1,4 +1,4 @@
-import { Nav } from '@tutorialkit/components-react';
+import { Nav } from '@tutorialkit/react';
 import type { Lesson, NavList } from '@tutorialkit/types';
 
 interface Props {

packages/astro/src/default/components/ResizablePanel.astro

@@ -1,5 +1,5 @@
 ---
-import { classNames } from '@tutorialkit/components-react';
+import { classNames } from '@tutorialkit/react';
 
 export type Type = 'horizontal' | 'vertical';
 export type Priority = 'min' | 'max';

packages/astro/src/default/components/WorkspacePanelWrapper.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useStore } from '@nanostores/react';
-import { WorkspacePanel } from '@tutorialkit/components-react';
+import { WorkspacePanel } from '@tutorialkit/react';
 import type { Lesson } from '@tutorialkit/types';
 import { themeStore } from '../stores/theme-store.js';
 import { tutorialStore } from './webcontainer.js';

packages/astro/src/index.ts

@@ -87,14 +87,14 @@ export default function createPlugin({
           vite: {
             optimizeDeps: {
               entries: ['!**/src/(content|templates)/**'],
-              include: process.env.TUTORIALKIT_DEV ? [] : ['@tutorialkit/components-react'],
+              include: process.env.TUTORIALKIT_DEV ? [] : ['@tutorialkit/react'],
             },
             define: {
               __ENTERPRISE__: `${!!enterprise}`,
               __WC_CONFIG__: enterprise ? JSON.stringify(enterprise) : 'undefined',
             },
             ssr: {
-              noExternal: ['@tutorialkit/astro', '@tutorialkit/components-react'],
+              noExternal: ['@tutorialkit/astro', '@tutorialkit/react'],
             },
             plugins: [
               userlandCSS,

packages/astro/tsconfig.json

@@ -11,7 +11,7 @@
   "references": [
     { "path": "../runtime/tsconfig.build.json" },
     { "path": "../types/tsconfig.build.json" },
-    { "path": "../components/react/tsconfig.build.json" },
+    { "path": "../react/tsconfig.build.json" },
     { "path": "../theme" }
   ]
 }

packages/cli/tests/create-tutorial.test.ts

@@ -242,7 +242,7 @@ async function runPnpmInstall(dest: string, baseDir: string) {
     overrides: {
       '@astrojs/language-server': '2.14.1',
       '@tutorialkit/astro': `file:${baseDir}/packages/astro`,
-      '@tutorialkit/components-react': `file:${baseDir}/packages/components/react`,
+      '@tutorialkit/react': `file:${baseDir}/packages/react`,
       '@tutorialkit/runtime': `file:${baseDir}/packages/runtime`,
       '@tutorialkit/theme': `file:${baseDir}/packages/theme`,
       '@tutorialkit/types': `file:${baseDir}/packages/types`,

packages/components/react/package.json → packages/react/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@tutorialkit/components-react",
+  "name": "@tutorialkit/react",
   "version": "0.1.6",
-  "description": "TutorialKit's React components",
+  "description": "TutorialKit's React components and utilities",
   "author": "StackBlitz Inc.",
   "type": "module",
   "bugs": "https://github.com/stackblitz/tutorialkit/issues",
@@ -10,7 +10,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stackblitz/tutorialkit.git",
-    "directory": "packages/components/react"
+    "directory": "packages/react"
   },
   "types": "./dist/index.d.ts",
   "exports": {

packages/components/react/tsconfig.build.json → packages/react/tsconfig.build.json

@@ -8,8 +8,8 @@
   "include": ["src"],
   "exclude": ["src/**/*.spec.ts"],
   "references": [
-    { "path": "../../runtime/tsconfig.build.json" },
-    { "path": "../../theme" },
-    { "path": "../../types/tsconfig.build.json" }
+    { "path": "../runtime/tsconfig.build.json" },
+    { "path": "../theme" },
+    { "path": "../types/tsconfig.build.json" }
   ]
 }

packages/components/react/tsconfig.json → packages/react/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../../tsconfig.json",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "jsx": "react-jsx",
     "baseUrl": "./",
@@ -10,8 +10,8 @@
   },
   "include": ["src"],
   "references": [
-    { "path": "../../runtime/tsconfig.build.json" },
-    { "path": "../../theme" },
-    { "path": "../../types/tsconfig.build.json" }
+    { "path": "../runtime/tsconfig.build.json" },
+    { "path": "../theme" },
+    { "path": "../types/tsconfig.build.json" }
   ]
 }

packages/template/package.json

@@ -11,7 +11,7 @@
     "start": "astro dev"
   },
   "dependencies": {
-    "@tutorialkit/components-react": "workspace:*",
+    "@tutorialkit/react": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

packages/theme/src/index.ts

@@ -20,7 +20,7 @@ export function defineConfig(config: UserConfig) {
       transformers: [transformerDirectives()],
       content: {
         inline: getInlineContentForPackage({
-          name: '@tutorialkit/components-react',
+          name: '@tutorialkit/react',
           pattern: '/dist/**/*.js',
           root: process.cwd(),
         }),