feat: add @react-simplikit/mobile package with monorepo structure (#308)

Co-authored-by: sukyeong <sukyeong@tossbank.com>
Co-authored-by: zztnrudzz13 <zztnrudzz13@naver.com>

Author: 3 people

.gitignore

@@ -7,6 +7,10 @@
 !.yarn/sdks
 !.yarn/versions
 
+# large yarn cache files (exceed GitHub 100MB limit)
+.yarn/cache/@next-swc-*.zip
+.yarn/cache/next-npm-*.zip
+
 # build
 dist
 esm
@@ -24,6 +28,16 @@ coverage
 .vitepress/cache
 .vitepress/dist
 
+# next
+.next
+
 .env
 
 .DS_Store
+
+# claude
+.claude
+CLAUDE.md
+
+# context files (session notes, etc.)
+context/

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

.nvmrc

@@ -1,5 +1 @@
-lts/iron
-
-# 'iron' is the 20.x node release line
-# ESLint requires Node.js >=18.18.0, >=20.9.0, or >=21.1.0 — ensure 20.9.0+ if using iron
-# See: https://eslint.org/docs/latest/use/getting-started#prerequisites
+v22.18.0

.pnp.cjs

@@ -15,7 +15,7 @@ const prettierConfig: prettier.Options = {
 };
 
 export async function scaffold(name: string, type: 'hook' | 'component' | 'util') {
-  const directory = path.join(getRootPath(), `./src/${type}s/${name}`);
+  const directory = path.join(getRootPath(), `./packages/core/src/${type}s/${name}`);
   const ext = type === 'component' ? 'tsx' : 'ts';
 
   const tasks = new Listr(

.scripts/commands/scaffold/index.ts

@@ -8,16 +8,52 @@ export default defineConfig({
     root: { label: 'English', ...en },
     ko: { label: '한국어', ...ko },
   },
-  srcDir: 'src',
+  srcDir: '.',
+  srcExclude: [
+    '**/node_modules/**',
+    '**/README*.md',
+    '**/CHANGELOG.md',
+    'CONTRIBUTING.md',
+    'packages/**/*.ts',
+    'packages/**/*.tsx',
+  ],
+  vite: {
+    resolve: {
+      dedupe: ['vue', 'vitepress'],
+    },
+  },
   rewrites: {
-    'docs/ko/:document.md': 'ko/:document.md',
-    'docs/en/:document.md': ':document.md',
-    'components/:implementation/ko/:implementation.md': 'ko/components/:implementation.md',
-    'components/:implementation/:implementation.md': 'components/:implementation.md',
-    'hooks/:implementation/ko/:implementation.md': 'ko/hooks/:implementation.md',
-    'hooks/:implementation/:implementation.md': 'hooks/:implementation.md',
-    'utils/:implementation/ko/:implementation.md': 'ko/utils/:implementation.md',
-    'utils/:implementation/:implementation.md': 'utils/:implementation.md',
+    // Landing page
+    'docs/index.md': 'index.md',
+    'docs/ko/index.md': 'ko/index.md',
+
+    // Core guide docs
+    'docs/core/:doc.md': 'core/:doc.md',
+    'docs/ko/core/:doc.md': 'ko/core/:doc.md',
+
+    // Mobile guide docs
+    'docs/mobile/:doc.md': 'mobile/:doc.md',
+    'docs/ko/mobile/:doc.md': 'ko/mobile/:doc.md',
+
+    // Core hooks
+    'packages/core/src/hooks/:hook/:hook.md': 'core/hooks/:hook.md',
+    'packages/core/src/hooks/:hook/ko/:hook.md': 'ko/core/hooks/:hook.md',
+
+    // Core components
+    'packages/core/src/components/:component/:component.md': 'core/components/:component.md',
+    'packages/core/src/components/:component/ko/:component.md': 'ko/core/components/:component.md',
+
+    // Core utils
+    'packages/core/src/utils/:util/:util.md': 'core/utils/:util.md',
+    'packages/core/src/utils/:util/ko/:util.md': 'ko/core/utils/:util.md',
+
+    // Mobile hooks
+    'packages/mobile/src/hooks/:hook/:hook.md': 'mobile/hooks/:hook.md',
+    'packages/mobile/src/hooks/:hook/ko/:hook.md': 'ko/mobile/hooks/:hook.md',
+
+    // Mobile keyboardHeight (special case - folder name differs from hook name)
+    'packages/mobile/src/hooks/keyboardHeight/useKeyboardHeight.md': 'mobile/hooks/useKeyboardHeight.md',
+    'packages/mobile/src/hooks/keyboardHeight/ko/useKeyboardHeight.md': 'ko/mobile/hooks/useKeyboardHeight.md',
   },
   head: [
     ['link', { rel: 'stylesheet', href: 'https://static.toss.im/tps/main.css' }],
@@ -28,7 +64,7 @@ export default defineConfig({
     ['link', { rel: 'apple-touch-icon', href: '/favicon/apple-touch-icon.png' }],
     ['link', { rel: 'manifest', href: '/favicon/site.webmanifest' }],
     ['meta', { name: 'author', content: 'Viva Republica, Inc.' }],
-    ['meta', { name: 'keywords', content: 'react, hooks, utility, library, react-simplikit' }],
+    ['meta', { name: 'keywords', content: 'react, hooks, utility, library, react-simplikit, mobile' }],
     ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
     ['meta', { property: 'og:type', content: 'website' }],
     ['meta', { property: 'og:title', content: 'react-simplikit' }],

.vitepress/config.mts

@@ -1,15 +1,15 @@
 import { defineConfig, DefaultTheme } from 'vitepress';
 import { getSidebarItems } from './libs/getSidebarItems.mts';
 import { sortByText } from './libs/sortByText.mts';
-import { sourceRoot } from './shared.mts';
+import { corePackageRoot, mobilePackageRoot } from './shared.mts';
 
 export const en = defineConfig({
   lang: 'en',
   themeConfig: {
     nav: nav(),
     sidebar: sidebar(),
     editLink: {
-      pattern: 'https://github.com/toss/react-simplikit/edit/main/src/:path',
+      pattern: 'https://github.com/toss/react-simplikit/edit/main/:path',
       text: 'Edit this page on GitHub',
     },
     footer: {
@@ -22,39 +22,74 @@ export const en = defineConfig({
 function nav(): DefaultTheme.NavItem[] {
   return [
     { text: 'Home', link: '/' },
-    { text: 'Introduction', link: '/intro.html' },
-    { text: 'Reference', link: '/components/ImpressionArea.html' },
+    { text: 'Mobile', link: '/mobile/intro' },
+    { text: 'Core', link: '/core/intro' },
   ];
 }
 
 function sidebar(): DefaultTheme.Sidebar {
+  return {
+    '/core/': coreSidebar(),
+    '/mobile/': mobileSidebar(),
+  };
+}
+
+function coreSidebar(): DefaultTheme.SidebarItem[] {
   return [
     {
       text: 'Guide',
       items: [
-        { text: 'Introduction', link: '/intro' },
-        { text: 'Why react-simplikit matters', link: '/why-react-simplikit-matters' },
-        { text: 'Installation', link: '/installation' },
-        { text: 'Design Principles', link: '/design-principles' },
-        { text: 'Contributing', link: '/contributing' },
+        { text: 'Introduction', link: '/core/intro' },
+        { text: 'Why react-simplikit matters', link: '/core/why-react-simplikit-matters' },
+        { text: 'Installation', link: '/core/installation' },
+        { text: 'Design Principles', link: '/core/design-principles' },
+        { text: 'Contributing', link: '/core/contributing' },
       ],
     },
     {
       text: 'Reference',
       items: sortByText([
         {
           text: 'Components',
-          items: getSidebarItems(sourceRoot, 'components', '*'),
+          collapsed: false,
+          items: getSidebarItems(corePackageRoot, 'components', '/core'),
         },
         {
           text: 'Hooks',
-          items: getSidebarItems(sourceRoot, 'hooks', '*'),
+          collapsed: false,
+          items: getSidebarItems(corePackageRoot, 'hooks', '/core'),
         },
         {
           text: 'Utils',
-          items: getSidebarItems(sourceRoot, 'utils', '*'),
+          collapsed: false,
+          items: getSidebarItems(corePackageRoot, 'utils', '/core'),
         },
       ]),
     },
   ];
 }
+
+function mobileSidebar(): DefaultTheme.SidebarItem[] {
+  return [
+    {
+      text: 'Guide',
+      items: [
+        { text: 'Introduction', link: '/mobile/intro' },
+        { text: 'Roadmap', link: '/mobile/roadmap' },
+        { text: 'Installation', link: '/mobile/installation' },
+        { text: 'Design Principles', link: '/mobile/design-principles' },
+        { text: 'Contributing', link: '/mobile/contributing' },
+      ],
+    },
+    {
+      text: 'Reference',
+      items: [
+        {
+          text: 'Hooks',
+          collapsed: false,
+          items: getSidebarItems(mobilePackageRoot, 'hooks', '/mobile'),
+        },
+      ],
+    },
+  ];
+}

.vitepress/en.mts

@@ -1,15 +1,15 @@
 import { defineConfig, DefaultTheme } from 'vitepress';
 import { getSidebarItems } from './libs/getSidebarItems.mts';
 import { sortByText } from './libs/sortByText.mts';
-import { sourceRoot } from './shared.mts';
+import { corePackageRoot, mobilePackageRoot } from './shared.mts';
 
 export const ko = defineConfig({
   lang: 'ko',
   themeConfig: {
     nav: nav(),
     sidebar: sidebar(),
     editLink: {
-      pattern: 'https://github.com/toss/react-simplikit/edit/main/src/:path',
+      pattern: 'https://github.com/toss/react-simplikit/edit/main/:path',
       text: 'GitHub에서 수정하기',
     },
     footer: {
@@ -21,44 +21,79 @@ export const ko = defineConfig({
 
 function nav(): DefaultTheme.NavItem[] {
   return [
-    { text: '홈', link: '/ko' },
-    { text: '소개', link: '/ko/intro.html' },
-    { text: '레퍼런스', link: '/ko/components/ImpressionArea.html' },
+    { text: '홈', link: '/ko/' },
+    { text: 'Mobile', link: '/ko/mobile/intro' },
+    { text: 'Core', link: '/ko/core/intro' },
   ];
 }
 
 function sidebar(): DefaultTheme.Sidebar {
+  return {
+    '/ko/core/': coreSidebar(),
+    '/ko/mobile/': mobileSidebar(),
+  };
+}
+
+function coreSidebar(): DefaultTheme.SidebarItem[] {
   return [
     {
       text: '가이드',
       items: [
-        { text: '소개', link: '/ko/intro' },
-        { text: 'react-simplikit, 선택의 이유', link: '/ko/why-react-simplikit-matters' },
-        { text: '설치하기', link: '/ko/installation' },
-        { text: '설계 원칙', link: '/ko/design-principles' },
-        { text: '기여하기', link: '/ko/contributing' },
+        { text: '소개', link: '/ko/core/intro' },
+        { text: 'react-simplikit, 선택의 이유', link: '/ko/core/why-react-simplikit-matters' },
+        { text: '설치하기', link: '/ko/core/installation' },
+        { text: '설계 원칙', link: '/ko/core/design-principles' },
+        { text: '기여하기', link: '/ko/core/contributing' },
       ],
     },
     {
       text: '레퍼런스',
       items: sortByText([
         {
           text: '컴포넌트',
-          items: getSidebarItems(sourceRoot, 'components', '*', 'ko'),
+          collapsed: false,
+          items: getSidebarItems(corePackageRoot, 'components', '/core', 'ko'),
         },
         {
           text: '훅',
-          items: getSidebarItems(sourceRoot, 'hooks', '*', 'ko'),
+          collapsed: false,
+          items: getSidebarItems(corePackageRoot, 'hooks', '/core', 'ko'),
         },
         {
           text: '유틸리티',
-          items: getSidebarItems(sourceRoot, 'utils', '*', 'ko'),
+          collapsed: false,
+          items: getSidebarItems(corePackageRoot, 'utils', '/core', 'ko'),
         },
       ]),
     },
   ];
 }
 
+function mobileSidebar(): DefaultTheme.SidebarItem[] {
+  return [
+    {
+      text: '가이드',
+      items: [
+        { text: '소개', link: '/ko/mobile/intro' },
+        { text: '앞으로의 방향', link: '/ko/mobile/roadmap' },
+        { text: '설치하기', link: '/ko/mobile/installation' },
+        { text: '설계 원칙', link: '/ko/mobile/design-principles' },
+        { text: '기여하기', link: '/ko/mobile/contributing' },
+      ],
+    },
+    {
+      text: '레퍼런스',
+      items: [
+        {
+          text: '훅',
+          collapsed: false,
+          items: getSidebarItems(mobilePackageRoot, 'hooks', '/mobile', 'ko'),
+        },
+      ],
+    },
+  ];
+}
+
 export const search: DefaultTheme.LocalSearchOptions['locales'] = {
   ko: {
     translations: {

.vitepress/ko.mts

@@ -2,17 +2,49 @@ import glob from 'fast-glob';
 import path from 'node:path';
 import { DefaultTheme } from 'vitepress';
 
-export function getSidebarItems(docsRoot: string, ...parts: string[]): DefaultTheme.SidebarItem[] {
-  const files = glob.sync(path.join(docsRoot, ...parts, '*.md'));
-  const locale = /^[a-z]{2}$/.test(parts[parts.length - 1]) ? parts.pop()! : '';
+/**
+ * Get sidebar items from a package's source directory
+ * @param packageRoot - Root directory of the package (e.g., packages/core/src)
+ * @param category - Category like 'hooks', 'components', 'utils'
+ * @param prefix - URL prefix like '/core' or '/mobile'
+ * @param locale - Optional locale like 'ko'
+ */
+export function getSidebarItems(
+  packageRoot: string,
+  category: string,
+  prefix: string,
+  locale?: string
+): DefaultTheme.SidebarItem[] {
+  // Find all .md files in the category directory
+  const pattern = locale
+    ? path.join(packageRoot, category, '*', 'ko', '*.md')
+    : path.join(packageRoot, category, '*', '*.md');
 
-  return files.map(file => {
-    const relativePath = path.relative(docsRoot, file);
-    const filename = path.basename(file, '.md');
-    const dirname = path.dirname(relativePath);
+  const files = glob.sync(pattern, {
+    ignore: ['**/ko/**/*.md'].filter(() => !locale), // Ignore ko folder when not looking for locale
+  });
 
-    const link = locale === '' ? path.join('/', dirname) : path.join('/', locale, dirname.replace(`/${locale}`, ''));
+  const items = files
+    .filter(file => {
+      // Only include files that match the folder name (e.g., useBooleanState/useBooleanState.md)
+      const dirname = path.basename(path.dirname(locale ? path.dirname(file) : file));
+      const filename = path.basename(file, '.md');
+      return dirname === filename || dirname === 'keyboardHeight'; // Special case for keyboardHeight
+    })
+    .map(file => {
+      const filename = path.basename(file, '.md');
+      const link = locale ? `/${locale}${prefix}/${category}/${filename}` : `${prefix}/${category}/${filename}`;
 
-    return { text: filename, link };
-  });
+      return { text: filename, link };
+    })
+    .sort((a, b) => a.text.localeCompare(b.text));
+
+  return items;
+}
+
+/**
+ * Sort sidebar items alphabetically by text
+ */
+export function sortByText(items: DefaultTheme.SidebarItem[]): DefaultTheme.SidebarItem[] {
+  return items.sort((a, b) => (a.text ?? '').localeCompare(b.text ?? ''));
 }

.vitepress/libs/getSidebarItems.mts

@@ -1,3 +1,6 @@
 import path from 'path';
 
-export const sourceRoot = path.resolve(import.meta.dirname, '..', 'src');
+export const projectRoot = path.resolve(import.meta.dirname, '..');
+export const corePackageRoot = path.join(projectRoot, 'packages/core/src');
+export const mobilePackageRoot = path.join(projectRoot, 'packages/mobile/src');
+export const docsRoot = path.join(projectRoot, 'docs');