stp-ui-kit 0.1.0 → 2.0.0

package/README.md

@@ -1,231 +1,71 @@
-# 🎨 stp-ui-kit
+# stp-ui-kit
 
-A comprehensive React UI Kit with 50+ production-ready components for the Smartestprep platform.
-Built with TypeScript, Tailwind CSS, and SCSS for consistent design and rapid development.
+> Smartestprep UI Kit for React apps
 
-[![npm version](https://img.shields.io/npm/v/stp-ui-kit.svg)](https://www.npmjs.com/package/stp-ui-kit)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)
+A modern React component library with 50+ production-ready components, design tokens, and comprehensive documentation.
 
----
+## Quick Start
 
-## ✨ Features
-
-- 🎨 **50+ Components** - Display, Form, Feedback, Layout, Navigation, Data
-- 🎯 **Design System** - Comprehensive design tokens (spacing, colors, typography)
-- 📱 **Responsive** - Mobile-first with built-in breakpoints
-- 🔧 **TypeScript** - Full type safety with strict mode
-- 🎭 **Theming** - CSS custom properties for easy theming
-- 🚀 **Tree-shakeable** - ES modules for optimal bundle size
-- 📚 **Storybook** - Interactive component documentation
-- 🔥 **Hot Reload** - Watch mode for seamless development with npm link
-
----
-
-## 📦 Installation
+### Installation
 
 ```bash
 npm install stp-ui-kit
-# or
-yarn add stp-ui-kit
-# or
-pnpm add stp-ui-kit
 ```
 
----
-
-## 🚀 Quick Start
+### Basic Usage
 
 ```tsx
-// Import styles once in your app entry (main.tsx or App.tsx)
-// Import and use components
-import { Button, Input, Modal, Typography } from "stp-ui-kit";
+import { Button, Input, Page } from "stp-ui-kit";
 import "stp-ui-kit/styles";
 
-export default function App() {
+function App() {
   return (
-    <div>
-      <Typography variant='h1'>Welcome</Typography>
-      <Input
-        label='Email'
-        placeholder='Enter your email'
-      />
-      <Button variant='primary'>Get Started</Button>
-    </div>
+    <Page title="Dashboard">
+      <Input label="Email" placeholder="Enter your email" />
+      <Button>Submit</Button>
+    </Page>
   );
 }
 ```
 
-### Using Design Tokens
-
-**In SCSS files:**
-
-```scss
-@use "stp-ui-kit/styles/variables" as stp;
-
-.my-component {
-  padding: stp.$space-400; // 16px
-  border-radius: stp.$border-radius-100; // 4px
-  color: var(--color-neutral-800);
-}
-```
-
-**In JavaScript/TypeScript:**
+## Documentation
 
-```typescript
-import { breakpoints, spacing, typography } from "stp-ui-kit/tokens";
+| Document | Description |
+|----------|-------------|
+| [Getting Started](./documentation/GETTING_STARTED.md) | Installation, setup, connecting to projects |
+| [Architecture](./documentation/ARCHITECTURE.md) | Project structure, patterns, organization |
+| [Design System](./documentation/DESIGN_SYSTEM.md) | Tokens, spacing, typography, theming |
+| [Components](./documentation/COMPONENTS.md) | Full component index by category |
+| [Development](./documentation/DEVELOPMENT.md) | Contributing, local dev, code style |
+| [Migration](./documentation/MIGRATION.md) | Version upgrades, breaking changes |
+| [Best Practices](./documentation/BEST_PRACTICES.md) | Patterns, anti-patterns, accessibility |
 
-const styles = {
-  padding: spacing["space-400"], // '16px'
-};
-```
+## Component Categories
 
----
-
-## 📚 Documentation
-
-- **[COMPONENTS.md](./COMPONENTS.md)** - Complete component reference with all 50+ components
-- **[USAGE_GUIDE.md](./USAGE_GUIDE.md)** - Comprehensive usage guide with examples
-- **Layout System:**
-  - **[PAGE_BUILDING_GUIDE.md](./docs/PAGE_BUILDING_GUIDE.md)** - Complete guide to building pages
-  - **[PAGE_CHEAT_SHEET.md](./docs/PAGE_CHEAT_SHEET.md)** - Quick reference cheat sheet
-  - **[SPACING_GUIDE.md](./docs/SPACING_GUIDE.md)** - Visual spacing & layout guide
-  - **[SCROLL_OVERFLOW_GUIDE.md](./docs/SCROLL_OVERFLOW_GUIDE.md)** - Scroll behavior & overflow handling
-  - **[MIGRATION_GUIDE.md](./docs/MIGRATION_GUIDE.md)** - ⚠️ Migration guide from old API to v0.0.117+
-  - **[page-building-schema.json](./docs/page-building-schema.json)** - JSON schema for AI tools
-- **[CLAUDE.md](./CLAUDE.md)** - Instructions for AI assistants (Claude Code)
-- **Storybook** - Interactive demos (run `npm run storybook`)
-
----
-
-## 📂 Project Structure
-
-```plaintext
-src/
- ├─ assets/            # custom icons and static assets
- ├─ components/        # UI components
- │   ├─ data/
- │   ├─ display/
- │   ├─ feedback/
- │   ├─ form/
- │   ├─ layout/
- │   ├─ navigation/
- │   └─ ui/
- ├─ lib/               # helpers, utils
- ├─ styles/            # global styles, tokens, variables
- │   ├─ _variables.scss
- │   ├─ main.scss
- │   └─ tokens.ts
- ├─ App.tsx            # playground / dev entry
- └─ index.ts           # main export file
-```
+| Category | Components | Description |
+|----------|------------|-------------|
+| **Data** | ProgressLine, ProgressBarAlternative, Table | Data display and visualization |
+| **Display** | Button, Avatar, Typography, Chip, Icon, Dropdown | Visual and interactive elements |
+| **Feedback** | Modal, Spinner, Tooltip, Message, AppLoader | Notifications and loading states |
+| **Form** | Input, Select, Checkbox, RadioButton, Calendar, TextArea | Form inputs and controls |
+| **Layout** | Page, Section, Drawer, BottomBar, TopBar | Page structure and organization |
+| **Navigation** | Link, Collapse, NavigationItem | Navigation elements |
 
----
+## Storybook
 
-## 🛠 Tech Stack
-
-- React 18+ / 19+ – core UI framework
-- TypeScript – strongly typed components
-- TailwindCSS 4 + SCSS – styling and design tokens
-- React Hook Form – form handling integration
-- Storybook 8 – interactive component documentation
-- Vite – development & build tooling
-
----
-
-## 📖 Documentation
-
-Run Storybook to explore and test components interactively:
+Interactive component documentation:
 
 ```bash
 npm run storybook
 ```
 
-Build the static Storybook docs:
-
-```bash
-npm run build-storybook
-```
-
----
-
-## 🧑‍💻 Development
-
-- Start in dev mode
-
-  ```bash
-  npm run dev
-  ```
-
-- Build library
-
-  ```bash
-  npm run build
-  ```
-
-- Lint & format
-
-  ```bash
-  npm run lint
-  npm run format
-  ```
-
-- Generate tokens
-  ```bash
-  npm run generate-tokens
-  ```
-
----
-
-# 🔑 Principles
-
-- Fully typed components (.ts / .tsx only)
-- Consistent design system powered by tokens according to Figma designs
-- Use named exports only (`export const`)
-- Remove unused/deprecated components over time
-- Do not add new dependencies unless absolutely necessary (to avoid making the project heavy)
-
-### 📦 Project Releases
-
-- Always upgrade the version in `package.json` before publishing
-- Do **not** run `npm publish` for every minor change
-- Always run `npm run build` before publishing
-- All changes must be commited into repository
-
-### 🛠 Local Development with Hot Reload
-
-When developing stp-ui-kit and testing in another project:
-
-```bash
-# 1. In stp-ui-kit directory
-npm link
-npm run build:watch  # Keep this running - auto-rebuilds on changes!
-
-# 2. In your project directory
-npm link stp-ui-kit
-npm start
-
-# Changes in stp-ui-kit will now auto-reflect in your project! 🔥
-```
-
-**No need to unlink/relink** - `build:watch` provides hot reload for linked packages.
-
-### 📤 Publishing
-
-- Always run `npm run build` before publishing
-- Update version in `package.json` before `npm publish`
-- Commit all changes to repository
-- Run `npm run format` and `npm run lint` before committing
-
-## 🤝 Contributing
-
-1. Clone the repo
-2. Install dependencies with `npm install`
-3. Run Storybook (`npm run storybook`)
-4. Add or update a component inside `src/components`
-5. Submit a pull request 🎉
+## Tech Stack
 
----
+- React 18/19
+- TypeScript
+- SCSS with design tokens
+- Vite build system
 
-## 📜 License
+## License
 
-MIT © Smartestprep
+MIT

package/dist/src/components/form/index.d.ts

@@ -1,5 +1,4 @@
 export * from './Checkbox/Checkbox';
-export * from './FormItem/FormItem';
 export * from './InlineError/InlineError';
 export * from './Input/Input';
 export * from './Input/TextArea';

package/dist/src/components/layout/index.d.ts

@@ -1,4 +1,3 @@
-export * from './Banner/Banner';
 export * from './Drawer/Drawer';
 export * from './PageHeader/PageHeader';
 export * from './SectionHeader/SectionHeader';

package/dist/src/components/navigation/index.d.ts

@@ -1,4 +1,3 @@
 export * from './Collapse/Collapse';
-export * from './CourseCollapse/CourseCollapse';
 export * from './Link/Link';
 export * from './NavigationItem/NavigationItem';

package/dist/src/global.d.ts

@@ -0,0 +1,4 @@
+// Ambient module declarations for style imports
+declare module "stp-ui-kit/styles";
+declare module "stp-ui-kit/styles/variables";
+declare module "stp-ui-kit/styles/main";