A robust architectural pattern for React that enforces strict encapsulation, eliminates "God Files," and treats every component as an independent micro-domain.

❌ The Problem

As React applications grow, components tend to follow two destructive paths:

1. The God File: A single .tsx file inflates to 1000+ lines containing UI, hooks, interfaces, and utilities.
2. Leaky Internals: Developers split the file, but put component-specific utilities and types in global folders (e.g., src/utils), polluting the global namespace.

✅ The KIP Solution

KIP (Keep It Private) solves this by enforcing Separation of Concerns (SoC) inside the component's folder while keeping those concerns strictly hidden from the rest of the app.

The Golden Rules

1. _ means PRIVATE: Any file with an underscore prefix (e.g., _hook.ts) is strictly internal. Direct imports from outside the folder are forbidden.
2. index.ts is THE GATE: This is the only API boundary. It gathers the internal pieces and explicitly exports only what the outside world is allowed to consume.

🌟 How KIP Solves the React Scaling Crisis:

• True Separation of Concerns (SoC): No more 1000-line files. Your logic is cleanly separated into specialized micro-files, making debugging incredibly focused.
• The index.ts API Boundary: Your component acts like a strict NPM package. index.ts ONLY exports what the rest of the application needs to know. The dirty work remains hidden.
• Zero Global Namespace Pollution: That weird utility function that formats a specific table date? It stays in _util.ts. Your global src/utils folder is now strictly reserved for truly global helpers.
• Instant Scalability: When a component grows, it doesn’t rot. It simply utilizes its private ecosystem.

📈 Progressive Scaling

KIP is highly flexible. It scales progressively based on the component's complexity. You only use the files you need.

Level 1: Simple Component (Button)

📂 src/components/Button/
 ├── 📄 _type.ts       # ButtonProps, VariantTypes
 ├── 📄 _component.tsx # Actual JSX
 └── 📄 index.ts       # export { Button } from './_component';

Level 2: Medium Component (LoginForm)

📂 src/components/LoginForm/
 ├── 📄 _hook.ts       # useLoginForm()
 ├── 📄 _util.ts       # validateEmail(), formatPassword()
 ├── 📄 _type.ts       # LoginFormProps, FormState
 ├── 📄 _style.ts      # Component styles
 ├── 📄 _component.tsx # The UI tying it together
 └── 📄 index.ts       # Gate

Level 3: Complex Component (DataGrid)

📂 src/components/DataGrid/
 ├── 📄 _hook.ts       # Data fetching, sorting logic
 ├── 📄 _util.ts       # Data transformers
 ├── 📄 _type.ts       # Complex generic types
 ├── 📄 _store.ts      # Local component state (Zustand/Context)
 ├── 📄 _style.ts      # Component styles
 ├── 📄 _slots.tsx     # Internal sub-components (Row, Cell, Header)
 ├── 📄 _component.tsx # Main Wrapper
 └── 📄 index.ts       # Gate

🌐 Framework Agnostic

While the examples in this repository use React and TypeScript, the KIP Pattern is completely framework-agnostic. It is an architectural principle of encapsulation that can be applied to almost any modern tech stack.

The core formula of _scope.ext (private internals) + index.ext (public gatekeeper) is universal. Here is how KIP translates to other ecosystems:

Vue.js

Instead of dumping everything into a massive .vue file, split complex logic:

UserProfile/
├── _types.ts
├── _useProfile.ts (Composable)
├── _ProfileAvatar.vue (Internal component)
└── index.vue (The Gate - public component)

Node.js / Backend (Express / NestJS)

Keep your domain logic cleanly separated and hide internal database queries or helper functions:

AuthModule/
├── _utils.ts (Hash logic, token generation)
├── _queries.ts (DB interactions)
├── _types.ts (Internal DTOs)
└── index.ts (Exports only the Auth Controller or public Service methods)

Angular

Angular already encourages modularity, but KIP can be applied inside feature folders to hide internal pipes, directives, or sub-components that shouldn't be imported by other modules.

The Universal Rule

No matter the language or framework (JavaScript, Python, Go, etc.), the rule remains the same: If a file starts with _, it belongs to that folder. Do not import it from the outside.

🚀 Enforcing KIP in Your Team

To ensure developers don't bypass the index.ts Gate, you can enforce KIP using ESLint no-restricted-imports rules to ban */_*.ts imports from outside their own directories.

🛠️ Usage / Boilerplate

Clone this repository to see the KIP pattern implemented in a modern Vite + React + TypeScript + ESLint environment.

bash git clone https://github.com/Miladxsar23/kip-pattern.git cd kip-pattern-react npm install npm run dev

🤝 Contribution

Have ideas to make KIP even better? Feel free to open an issue or submit a PR! Let's build cleaner, more encapsulated React apps together.