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

Author: AriPerkkio

CONTRIBUTING.md

@@ -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/demo/package.json

@@ -23,7 +23,7 @@ export default defineConfig({
   ...unoCSSConfig,
   content: {
     inline: globSync([
-      `${convertPathToPattern(join(require.resolve('@tutorialkit/components-react'), '..'))}/**/*.js`,
+      `${convertPathToPattern(join(require.resolve('@tutorialkit/react'), '..'))}/**/*.js`,
       `${convertPathToPattern(join(require.resolve('@tutorialkit/astro'), '..'))}/default/**/*.astro`,
     ]).map((filePath) => {
       return () => fs.readFile(filePath, { encoding: 'utf8' });

docs/demo/uno.config.ts

@@ -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/package.json

@@ -1,5 +1,5 @@
 ---
-import { classNames } from '@tutorialkit/components-react';
+import { classNames } from '@tutorialkit/react';
 import '@tutorialkit/astro/default-theme.css';
 
 interface Props {
@@ -14,7 +14,7 @@ const { className, previewClassName } = Astro.props;
   <div
     class={classNames(
       'border border-[var(--ec-brdCol)] border-b-transparent border-solid rounded-t overflow-y-auto',
-      previewClassName,
+      previewClassName
     )}
   >
     <slot name="preview" />

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

@@ -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/ExampleCodeMirrorEditor.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/ExampleFileTree.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/ExampleSimpleEditor.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/components/react-examples/ExampleTerminal.tsx

@@ -9,11 +9,11 @@ export default defineConfig({
   rules,
   shortcuts,
   content: {
-    inline: globSync(
-      `${convertPathToPattern(join(require.resolve('@tutorialkit/components-react'), '..'))}/**/*.js`,
-    ).map((filePath) => {
-      return () => fs.readFile(filePath, { encoding: 'utf8' });
-    }),
+    inline: globSync(`${convertPathToPattern(join(require.resolve('@tutorialkit/react'), '..'))}/**/*.js`).map(
+      (filePath) => {
+        return () => fs.readFile(filePath, { encoding: 'utf8' });
+      },
+    ),
   },
   transformers: [transformerDirectives()],
   presets: [presetUno(), presetIcons()],

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

@@ -35,7 +35,7 @@
     "@expressive-code/plugin-collapsible-sections": "^0.35.3",
     "@expressive-code/plugin-line-numbers": "^0.35.3",
     "@nanostores/react": "0.7.2",
-    "@tutorialkit/components-react": "workspace:*",
+    "@tutorialkit/react": "workspace:*",
     "@tutorialkit/runtime": "workspace:*",
     "@tutorialkit/theme": "workspace:*",
     "@tutorialkit/types": "workspace:*",

docs/tutorialkit.dev/uno.config.ts

@@ -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/README.md

@@ -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/package.json

@@ -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/LoginButton.tsx

@@ -1,5 +1,5 @@
 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/default/components/NavWrapper.tsx

@@ -94,14 +94,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/src/default/components/ResizablePanel.astro

@@ -8,10 +8,5 @@
     "outDir": "dist"
   },
   "include": ["src"],
-  "references": [
-    { "path": "../runtime" },
-    { "path": "../types" },
-    { "path": "../components/react" },
-    { "path": "../theme" }
-  ]
+  "references": [{ "path": "../runtime" }, { "path": "../types" }, { "path": "../react" }, { "path": "../theme" }]
 }

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

@@ -227,7 +227,7 @@ async function runPnpmInstall(dest: string, baseDir: string) {
     overrides: {
       '@astrojs/language-server': '2.11.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/astro/src/index.ts

@@ -1,7 +1,7 @@
 {
-  "name": "@tutorialkit/components-react",
+  "name": "@tutorialkit/react",
   "version": "0.0.2",
-  "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/astro/tsconfig.json

@@ -7,5 +7,5 @@
   },
   "include": ["src"],
   "exclude": ["src/**/*.spec.ts"],
-  "references": [{ "path": "../../runtime" }, { "path": "../../theme" }, { "path": "../../types" }]
+  "references": [{ "path": "../runtime" }, { "path": "../theme" }, { "path": "../types" }]
 }

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

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

packages/components/react/CHANGELOG.md renamed to packages/react/CHANGELOG.md

@@ -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/components/react/package.json renamed to packages/react/package.json

@@ -23,7 +23,7 @@ export default defineConfig({
   ...unoCSSConfig,
   content: {
     inline: globSync([
-      `${convertPathToPattern(join(require.resolve('@tutorialkit/components-react'), '..'))}/**/*.js`,
+      `${convertPathToPattern(join(require.resolve('@tutorialkit/react'), '..'))}/**/*.js`,
       `${convertPathToPattern(join(require.resolve('@tutorialkit/astro'), '..'))}/default/**/*.astro`,
     ]).map((filePath) => {
       return () => fs.readFile(filePath, { encoding: 'utf8' });