diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 28efc73..f2ebd59 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,42 +2,62 @@ First off, thank you for considering contributing to **VeriWorkly**! We are building a professional, privacy-first career ecosystem, and we value your help. -## 🏗️ Getting Started +> [!IMPORTANT] +> **Detailed guides, developer workflows, and coding standards** live in our official documentation: +> +> - 📖 **[Full Contributing Guidelines](https://docs.veriworkly.com/docs/contributing/index)** +> - 🛠️ **[Detailed Local Setup Guide](https://docs.veriworkly.com/docs/getting-started/local-setup)** -### 📦 Development Prerequisites +--- + +## ⚡ Quick TL;DR Contribution Workflow -- **Node.js 20+** -- **npm v10+** -- **Docker** (Optional, for full stack testing) +If you just need a quick heads-up on the commands and branching protocol: -### 🛠️ Local Setup +### 1. Fork & Clone -1. **Fork** the repository. -2. **Clone** your fork: +1. Fork the [original repository](https://github.com/VeriWorkly/veriworkly). +2. Clone your fork locally: ```bash - git clone https://github.com/VeriWorkly/veriworkly.git + git clone https://github.com/YOUR_USERNAME/veriworkly.git cd veriworkly-resume ``` -3. **Install** dependencies: - ```bash - npm install - ``` -4. **Environment**: +3. Set up the upstream remote: ```bash - cp .env.example .env - cp apps/server/.env.example apps/server/.env + git remote add upstream https://github.com/VeriWorkly/veriworkly.git ``` -5. **Start Dev**: - ```bash + +### 2. Branching Policy + +- **Base Branch**: PRs must be based on and target the **`master`** branch. +- **Update your branch** before starting: + ```bash + git checkout master + git pull upstream master + git checkout -b feat/your-feature-name + ``` + +### 3. Local Run Commands + +- Install dependencies: `npm install` +- Copy environment variables: `cp .env.example .env` and `cp apps/server/.env.example apps/server/.env` +- Choose your dev flow: + - **Frontend-only (Site/Templates at port 3000)**: `npm run dev` _(No database or backend server needed)_ + - **Full-stack (All apps/databases)**: `npm run dev:all` _(Requires running `npm run db:push -w @veriworkly/server`)_ + +### 4. Code Quality + +Run checks before committing: + +```bash npm run dev:all - ``` +``` --- ## 🌿 Branching Policy -- `main`: Production-ready code. -- `dev`: Active development and integration branch. **Base your PRs here.** +- `master`: Active development, integration, and production branch. **Base your PRs here.** ### Branch Naming Convention @@ -50,16 +70,17 @@ First off, thank you for considering contributing to **VeriWorkly**! We are buil ## 🛠️ Development Guidelines -### 🎨 Architecture +### 1. Architecture We use a **Monorepo** structure. -- **apps/resume-builder**: Core Next.js application. +- **apps/site**: Marketing landing site. +- **apps/studio**: Builder studio application. - **apps/server**: Express API. - **apps/docs-platform**: Documentation (Fumadocs). - **packages/ui**: Shared Design System. -### 📝 Coding Standards +### 2. Coding Standards - **TypeScript**: Mandatory for all new code. - **Linting**: Run `npm run lint` before committing. @@ -70,10 +91,11 @@ We use a **Monorepo** structure. ## 📝 Pull Request Process 1. **Create an Issue**: Discuss large changes before starting work. -2. **Submit PR**: Open a PR against the `dev` branch. +2. **Submit PR**: Open a PR against the `master` branch. 3. **Checklist**: - - [ ] Code builds successfully (`npm run build`) - [ ] Lint passes (`npm run lint`) + - [ ] Prettier formatting succeeds (`npm run format:write`) + - [ ] Code builds successfully (`npm run build`) - [ ] Tests pass (`npm test`) - [ ] Documentation updated (if applicable) diff --git a/QUICK_START.md b/QUICK_START.md index eaa466f..6a61fdb 100644 --- a/QUICK_START.md +++ b/QUICK_START.md @@ -31,20 +31,26 @@ VeriWorkly is a monorepo consisting of a Next.js frontend and an Express backend ## 🚀 Running the App -To start all services (Frontend, Backend, Docs, Blog) in development mode: +To start services (Site, Builder Studio, Backend, Docs, Blog) in development mode: ```bash npm run dev +npm run dev:site +npm run dev:studio +npm run dev:server +npm run dev:docs +npm run dev:blog ``` To start specific apps: -- **Resume Builder**: `npm run dev:resume` +- **Site/Resume**: `npm run dev` (starts @veriworkly/site) +- **Studio**: `npm run dev:studio` - **Server**: `npm run dev:server` - **Docs**: `npm run dev:docs` - **Blog**: `npm run dev:blog` -## 📖 Full Documentation +## 📚 Detailed Documentation For detailed guides on deployment, contribution, and architecture, visit: [https://docs.veriworkly.com](https://docs.veriworkly.com) diff --git a/README.md b/README.md index 9d0f73e..f1ae9fb 100644 --- a/README.md +++ b/README.md @@ -119,7 +119,7 @@ docker compose --env-file .env.docker up -d --build | [User Support](https://docs.veriworkly.com/docs/user-guides/creating-your-first-resume) | Guides for building and managing resumes. | | [Local Setup Guide](README.Local.md) | Detailed manual installation instructions. | | [Docker Deployment](README.Docker.md) | Production self-hosting instructions. | -| [Contributing Guidelines](https://docs.veriworkly.com/docs/contributing/index) | Standards and protocols for contributors. | +| [Contributing Guidelines](CONTRIBUTING.md) | Standards and protocols for contributors. | ## Security & Privacy @@ -142,7 +142,7 @@ For complete security policy, see [SECURITY.md](SECURITY.md) ## Contributing -VeriWorkly is an open-source project and welcomes community contributions. Please review our [Contributing Guide](https://docs.veriworkly.com/docs/contributing/index) before submitting Pull Requests. +VeriWorkly is an open-source project and welcomes community contributions. Please review our [Contributing Guide](CONTRIBUTING.md) before submitting Pull Requests. ### Ways to Contribute diff --git a/apps/blog-platform/content/blog/building-scalable-resume-platform-multi-app-architecture.mdx b/apps/blog-platform/content/blog/building-scalable-resume-platform-multi-app-architecture.mdx index ee33cbb..8f76602 100644 --- a/apps/blog-platform/content/blog/building-scalable-resume-platform-multi-app-architecture.mdx +++ b/apps/blog-platform/content/blog/building-scalable-resume-platform-multi-app-architecture.mdx @@ -9,10 +9,11 @@ date: "2026-04-28" VeriWorkly is organized as a multi-app repository with a clear split of concerns: -1. Resume Builder (`apps/resume-builder`) -2. Docs Platform (`apps/docs-platform`) -3. Blog Platform (`apps/blog-platform`) -4. API Server (`apps/server`) +1. Marketing Landing Site (`apps/site`) +2. Builder Studio (`apps/studio`) +3. Docs Platform (`apps/docs-platform`) +4. Blog Platform (`apps/blog-platform`) +5. API Server (`apps/server`) We also maintain one internal shared package, `@veriworkly/ui` (`packages/ui`), for reusable UI primitives and theme tokens. @@ -34,11 +35,16 @@ Each service can be deployed independently. If export traffic spikes, we can tun ## What Each App Does -### Resume Builder (`apps/resume-builder`) +### Marketing Landing Site (`apps/site`) -- Interactive editing experience -- Local-first by default, with optional sync -- Template rendering and export orchestration from the UI +- Public-facing landing pages, pricing, and features presentation +- Integrated blog previews and brand assets section + +### Builder Studio (`apps/studio`) + +- Interactive resume/CV editor and template selection +- Local-first document editing and customization +- Client-side export orchestration and PDF rendering ### API Server (`apps/server`) diff --git a/apps/docs-platform/content/docs/architecture/auth-system.mdx b/apps/docs-platform/content/docs/architecture/auth-system.mdx index 48eceae..6609a3f 100644 --- a/apps/docs-platform/content/docs/architecture/auth-system.mdx +++ b/apps/docs-platform/content/docs/architecture/auth-system.mdx @@ -18,7 +18,7 @@ VeriWorkly utilizes the **Better-Auth** framework, specifically the **Email OTP* The authentication infrastructure is distributed between the client and server applications to maintain a clear separation of concerns. -- **Frontend (`apps/resume-builder`)**: Utilizes the Better-Auth client SDK for session lifecycle management and the orchestration of the OTP verification interface. +- **Frontend (`apps/studio`)**: Utilizes the Better-Auth client SDK for session lifecycle management and the orchestration of the OTP verification interface. - **Backend (`apps/server`)**: Operates as the centralized authentication authority. Responsibilities include database interaction, OTP generation, and secure email dispatch via SMTP. ### Session Management Strategy diff --git a/apps/docs-platform/content/docs/architecture/design-system.mdx b/apps/docs-platform/content/docs/architecture/design-system.mdx new file mode 100644 index 0000000..dc11254 --- /dev/null +++ b/apps/docs-platform/content/docs/architecture/design-system.mdx @@ -0,0 +1,145 @@ +--- +title: Shared Design System +description: Technical architecture, components, and token variables of the @veriworkly/ui package. +--- + +import { Step, Steps } from "fumadocs-ui/components/steps"; + +# Shared Design System (`@veriworkly/ui`) + +The `@veriworkly/ui` package is the centralized design system and UI library for the VeriWorkly monorepo. It ensures visual consistency, accessibility, and high performance across all workspace platforms: + +- **Marketing Site** (`apps/site` on port 3000) +- **Builder Studio** (`apps/studio` on port 3001) +- **Documentation** (`apps/docs-platform` on port 3002) +- **Blog** (`apps/blog-platform` on port 3003) + +--- + +## Theme & Tokens System + +The design system implements a dark-and-light theme design using native CSS variables mapped to Tailwind CSS v4 custom theme tokens. This configuration resides in `packages/ui/src/styles/themes.css`. + +### Theme CSS Variables + +The following core variables are injected into `:root` (light mode) and `.dark` (dark mode) contexts: + +| CSS Variable | Tailwind Token | Description | Light Value | Dark Value | +| :------------- | :-------------------- | :------------------------ | :--------------------- | :----------------------- | +| `--background` | `color-fd-background` | Canvas background | `#f5f4ef` (cream) | `#0d1117` (deep dark) | +| `--foreground` | `color-fd-foreground` | Primary text and icons | `#171717` (charcoal) | `#f3f4f6` (light gray) | +| `--card` | `color-fd-card` | Container elements | `#ffffff` (pure white) | `#121924` (slate navy) | +| `--border` | `color-fd-border` | Divider borders | `rgba(23,23,23,0.12)` | `rgba(148,163,184,0.24)` | +| `--accent` | `color-fd-primary` | Interactive action states | `#2563eb` (royal blue) | `#60a5fa` (light blue) | + +### CSS Usage Example + +To style a custom element outside the predefined Tailwind utilities, use the CSS custom properties: + +```css +.custom-panel { + background-color: var(--card); + border: 1px solid var(--border); + color: var(--foreground); + transition: border-color 0.2s ease; +} + +.custom-panel:hover { + border-color: var(--accent); +} +``` + +--- + +## Component Library + +### UI Elements (`src/components/ui`) + +All primitives are designed to be fully modular, responsive, and lightweight: + +- **Accordion**: Collapsible accordion panels for FAQs and dense details. +- **Badge**: Pill badges for tag attributes or status indicators. +- **Button**: Action triggers with loaders, icons, and multiple style variants. +- **Card**: Elevated border boxes representing standalone content sections. +- **Checkbox**: Fully accessible check selectors. +- **Input**: Validated input text fields with layout error messaging. +- **Menu**: Nested contextual navigation triggers and action menus. +- **Modal**: Overlay modal displays utilizing smooth transitions. +- **Select**: Interactive form dropdown components. +- **Switch**: Visual toggle state controls. +- **TextArea**: Expandable multi-line textual fields. +- **Tooltip**: Contextual bubble descriptions on hover. + +### Structural Layout Components (`src/components/layout`) + +- **Container**: Page margins and content max-width constraints. +- **MarketingNavbar**: Landing header supporting desktop actions and mobile menu slide-out navigation. +- **MarketingFooter**: Multi-column site link index containing copyright and social integrations. +- **AppShell**: Left-rail navigation layout shell for the builder workspace. +- **ThemeToggle**: Class-based theme switcher button (`light` vs `.dark` DOM root updates). +- **SocialIcons**: Vector brand assets linking to GitHub, LinkedIn, and Twitter/X. + +--- + +## Typography & Font Setup + +Google **Geist** and **Geist Mono** are pre-configured in `src/lib/fonts.ts`. The variables are consolidated into the `globalFontVariables` helper: + +### Next.js Integration Guide + +Import the fonts and global CSS stylesheet into the main root layout (`app/layout.tsx`): + +```tsx +import { globalFontVariables } from "@veriworkly/ui"; +import "@veriworkly/ui/styles/globals.css"; + +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +} +``` + +--- + +## Development & Extension + +### Creating a New Component + +To add a new shared UI component to the design system: + + + + #### Component Implementation + Create your component file inside `packages/ui/src/components/ui/` or `/layout/`. Always write styling with Tailwind utilities: + ```tsx + // packages/ui/src/components/ui/CardHeader.tsx + import React from "react"; + import { cn } from "../../utils"; + + export interface CardHeaderProps extends React.HTMLAttributes {} + + export const CardHeader = ({ className, ...props }: CardHeaderProps) => { + return ( +
+ ); + }; + ``` + + + + + #### Export the Component Expose your component in the main entrypoint `packages/ui/src/index.ts`: + ```typescript export * from "./components/ui/CardHeader"; ``` + + + + #### Workspace Hot Reloading + Since npm workspaces track the files directly, other apps (`site`, `studio`) will automatically rebuild with Hot Module Replacement (HMR) once you save changes. + + diff --git a/apps/docs-platform/content/docs/contributing/index.mdx b/apps/docs-platform/content/docs/contributing/index.mdx index 623af8a..cde2209 100644 --- a/apps/docs-platform/content/docs/contributing/index.mdx +++ b/apps/docs-platform/content/docs/contributing/index.mdx @@ -11,16 +11,27 @@ First off, thank you for considering contributing to **VeriWorkly**! We are buil ## Getting Started -To ensure a smooth workflow, please follow these steps to set up your environment: +To ensure a smooth collaboration, please follow these steps to set up your contribution environment: -1. **Fork the repository** on GitHub. -2. **Clone your fork** locally: +1. **Fork the repository** on GitHub by clicking the **Fork** button on the [VeriWorkly Repository](https://github.com/VeriWorkly/veriworkly). +2. **Clone your personal fork** to your local machine: ```bash - git clone https://github.com/VeriWorkly/veriworkly.git + git clone https://github.com/YOUR_USERNAME/veriworkly.git cd veriworkly-resume ``` -3. **Set up your local environment** following our [Local Setup Guide](/docs/getting-started/local-setup). -4. **Create a branch** for your work: +3. **Configure Upstream Remote**: + Keep your fork in sync with the main project by tracking the original repository: + ```bash + git remote add upstream https://github.com/VeriWorkly/veriworkly.git + ``` +4. **Set up your local environment** (environment variables, dependencies) following our detailed [Local Setup Guide](/docs/getting-started/local-setup). +5. **Sync with Upstream Master Branch**: + Before creating a branch, always ensure your local `master` branch is up to date: + ```bash + git checkout master + git pull upstream master + ``` +6. **Create a branch** for your work, using our branching convention: ```bash git checkout -b feat/your-feature-name ``` @@ -56,16 +67,45 @@ If you find a bug, please open an issue with: ### Branching Policy -- `main`: This branch contains the latest stable, production-ready code. -- `dev`: This is the active development and integration branch. **All Pull Requests should be opened against `dev`.** +- `master`: Active development, integration, and production branch. **All Pull Requests should be opened against `master`.** ### Branch Naming Convention +Your branch name should start with one of the following prefixes based on the work type: + - `feat/feature-name`: For new features. - `fix/bug-name`: For bug fixes. - `docs/doc-update`: For documentation changes. - `refactor/scope`: For code refactoring without behavior changes. +### Pre-commit Quality Verification + +Before committing and pushing your changes, run automated scripts to ensure style guides and formats are preserved: +```bash +# Run typescript compilation and linter +npm run lint + +# Format code automatically using Prettier +npm run format:write + +# Run the test suite (Vitest / Playwright) +npm test +``` + +### Pull Request Process + +1. **Discuss Major Changes First**: For significant enhancements, please create an issue first to discuss the design pattern with the maintainers. +2. **Push to Your Fork**: + ```bash + git push origin feat/your-feature-name + ``` +3. **Open Pull Request**: Navigate to the VeriWorkly main repository and create a Pull Request. Ensure the target branch is set to **`master`**. +4. **Follow the PR Template**: Make sure to describe the modifications, link the relevant issue, and check all boxes in the PR template: + - [ ] Verified build succeeds locally (`npm run build`) + - [ ] Linter validation passes (`npm run lint`) + - [ ] Prettier formatting succeeds (`npm run format`) + - [ ] Local tests pass successfully (`npm test`) + --- ## Technical Standards diff --git a/apps/docs-platform/content/docs/getting-started/local-setup.mdx b/apps/docs-platform/content/docs/getting-started/local-setup.mdx index 58c57f1..3c1e2d9 100644 --- a/apps/docs-platform/content/docs/getting-started/local-setup.mdx +++ b/apps/docs-platform/content/docs/getting-started/local-setup.mdx @@ -26,86 +26,107 @@ Before initialization, ensure the following dependencies are installed: - ### Clone the Repository - Initialize your local environment by cloning the official repository: - - ```bash - git clone https://github.com/VeriWorkly/veriworkly.git - cd veriworkly-resume - ``` - + ### Fork and Clone the Repository + 1. Fork the official [VeriWorkly Repository](https://github.com/VeriWorkly/veriworkly) to your personal GitHub account. + 2. Clone your personal fork to your local development machine: + ```bash + git clone https://github.com/YOUR_USERNAME/veriworkly.git + cd veriworkly-resume + ``` - ### Install Dependencies - Install all required packages across the monorepo workspaces: - + ### Configure Upstream Remote & Sync + Configure the original repository as an upstream remote to pull future updates. Make sure to base your changes on the `master` branch: ```bash - npm install + # Add the upstream remote + git remote add upstream https://github.com/VeriWorkly/veriworkly.git + + # Checkout and sync your local master branch with the upstream master branch + git checkout master + git pull upstream master ``` + + ### Install Dependencies Install all package and workspace dependencies defined in the monorepo + root: ```bash npm install ``` + + ### Configure Environment Variables - Environment configuration is required for the site, studio, and server services. - + Duplicate the example configuration files and customize them for your local environment: ```bash - # Duplicate example configuration files cp .env.example .env cp apps/server/.env.example apps/server/.env cp apps/studio/.env.example apps/studio/.env cp apps/site/.env.example apps/site/.env + cp apps/docs-platform/.env.example apps/docs-platform/.env + cp apps/blog-platform/.env.example apps/blog-platform/.env ``` - Ensure the following critical variables are populated: + Required variables for basic local functionality: - `DATABASE_URL`: PostgreSQL connection string. - - `AUTH_SECRET`: Security secret for session encryption (must match between server and studio). - - `NEXT_PUBLIC_BACKEND_URL`: Typically `http://localhost:8080/api/v1`. + - `AUTH_SECRET`: Random secure token for authentication (must match in server and studio). + - `NEXT_PUBLIC_BACKEND_URL`: URL of your local or remote backend (defaults to `http://localhost:8080/api/v1`). - - ### Database Initialization - Synchronize your PostgreSQL database with the current Prisma schema: - - ```bash - npm run db:push -w @veriworkly/server - ``` - - + + ### Database Initialization If you are planning to work on backend API authentication or syncing + features, initialize your PostgreSQL database with the Prisma schema: ```bash npm run db:push -w + @veriworkly/server ``` + ### Start Development Servers - The monorepo allows you to run services independently or concurrently. + Depending on what you are building, you can choose to run the frontend independently or run all services concurrently: - **Option 1: Individual Services** + **Option A: Frontend-Only Development (No Database Required)** + If you are only editing frontend components, pages, or the design system (e.g., style guide, templates, landing pages): ```bash - # Terminal 1: Backend API - npm run dev:server + # Starts the marketing site (apps/site) on port 3000 + npm run dev - # Terminal 2: Resume Studio + # Or to start the resume editor (apps/studio) on port 3001 npm run dev:studio - - # Terminal 3: Marketing Site - npm run dev:site ``` - **Option 2: Concurrent Development** + **Option B: Full-Stack Development (Database Required)** + If you are building database-dependent features (authentication, account syncing): ```bash + # Starts all workspaces (site, studio, server, docs, blog) npm run dev:all ``` + + + ### Code Validation + Ensure your code complies with our standards before committing: + ```bash + # Run ESLint validation + npm run lint + + # Run Prettier code formatting + npm run format:write + + # Validate production build compiles without errors + npm run build + ``` + + --- ## Environment Verification -To confirm a successful installation, verify the following endpoints: +To verify that your services are running successfully, check the following endpoints: -- **Marketing Site**: `http://localhost:3000` -- **Resume Studio**: `http://localhost:3001` -- **Documentation**: `http://localhost:3002` -- **Backend API**: `http://localhost:8080/api/v1/health` (Checks database connectivity) +- **Marketing Site**: [http://localhost:3000](http://localhost:3000) +- **Resume Studio**: [http://localhost:3001](http://localhost:3001) +- **Documentation Platform**: [http://localhost:3002](http://localhost:3002) +- **Official Blog**: [http://localhost:3003](http://localhost:3003) +- **Backend API Health**: [http://localhost:8080/api/v1/health](http://localhost:8080/api/v1/health) (returns database status) diff --git a/apps/docs-platform/content/docs/getting-started/migration-v2.mdx b/apps/docs-platform/content/docs/getting-started/migration-v3.mdx similarity index 62% rename from apps/docs-platform/content/docs/getting-started/migration-v2.mdx rename to apps/docs-platform/content/docs/getting-started/migration-v3.mdx index 01297bc..b370d88 100644 --- a/apps/docs-platform/content/docs/getting-started/migration-v2.mdx +++ b/apps/docs-platform/content/docs/getting-started/migration-v3.mdx @@ -1,19 +1,20 @@ --- -title: Migration Guide (v2.x) -description: Protocol for transitioning from legacy project structures to the current monorepo architecture. +title: Migration Guide (v3.x) +description: Protocol for transitioning from legacy project structures to the current v3 monorepo architecture. --- -# Migration to VeriWorkly v2 +# Migration to VeriWorkly v3 -The transition to VeriWorkly v2 introduces a standardized monorepo architecture designed to enhance service isolation, maintainability, and resource sharing. This guide outlines the mandatory steps for migrating existing development environments to the current project structure. +The transition to VeriWorkly v3 introduces a standardized monorepo architecture designed to enhance service isolation, maintainability, and resource sharing. This guide outlines the mandatory steps for migrating existing development environments to the current project structure. ## Architectural Modifications ### 1. Unified Monorepo Structure -The project has transitioned from a decoupled frontend/backend directory structure to a consolidated **npm workspaces** model. All core services are now located within the `apps/` directory: +The project has transitioned from the legacy v2.x structure (`apps/resume-builder`) to a consolidated **npm workspaces** model. All core services are now located within the `apps/` directory: -- **`apps/resume-builder`**: The primary Next.js application. +- **`apps/site`**: The marketing landing site. +- **`apps/studio`**: The resume builder editor application. - **`apps/server`**: The centralized Express.js API. - **`apps/docs-platform`**: The technical documentation platform. - **`apps/blog-platform`**: The product blog. @@ -23,19 +24,19 @@ The project has transitioned from a decoupled frontend/backend directory structu Deployment and development commands are now orchestrated from the root workspace directory. -**Legacy Workflow (v1.x):** +**Legacy Workflow (v2.x):** ```bash -cd server && npm run dev -# Separate terminal -npm run dev +npm run dev:resume # Scoped execution for the legacy builder ``` -**Current Workflow (v2.x):** +**Current Workflow (v3.x):** ```bash -npm run dev # Initializes all workspace applications -npm run dev:resume # Scoped execution for the builder application +npm run dev # Initializes the landing site +npm run dev:all # Initializes all workspace applications concurrently +npm run dev:site # Scoped execution for the landing site +npm run dev:studio # Scoped execution for the builder editor npm run dev:server # Scoped execution for the API service ``` @@ -48,18 +49,18 @@ npm run dev:server # Scoped execution for the API service Ensure your local branch is synchronized with the upstream repository and reset the dependency tree to prevent workspace conflicts. ```bash -git pull origin main +git pull origin master rm -rf node_modules npm install ``` ### 2. Environment Configuration -Environment variables are now scoped to individual applications. Refer to the `.env.example` files within the root and `apps/server/` directories for the required configuration keys. +Environment variables are now scoped to individual applications. Refer to the `.env.example` files within the root and respective `apps/` directories for the required configuration keys. ### 3. Database Schema Alignment -The v2.x release includes significant modifications to the Prisma schema. Execute the following command to synchronize your local database instance with the current data model: +The v3.x release includes significant modifications to the Prisma schema. Execute the following command to synchronize your local database instance with the current data model: ```bash npm run db:push -w @veriworkly/server diff --git a/apps/docs-platform/content/docs/meta.json b/apps/docs-platform/content/docs/meta.json index e68766c..4044162 100644 --- a/apps/docs-platform/content/docs/meta.json +++ b/apps/docs-platform/content/docs/meta.json @@ -9,9 +9,10 @@ "getting-started/quick-start", "getting-started/local-setup", "getting-started/docker-deployment", - "getting-started/migration-v2", + "getting-started/migration-v3", "---Architecture---", "architecture/monorepo", + "architecture/design-system", "architecture/state-management", "architecture/pdf-generation", "architecture/auth-system", diff --git a/eslint.config.mjs b/eslint.config.mjs index 566cb3f..78c15f8 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -20,7 +20,7 @@ const eslintConfig = defineConfig([ { settings: { next: { - rootDir: ["apps/resume-builder/", "apps/docs-platform/", "apps/blog-platform/"], + rootDir: ["apps/site/", "apps/studio/", "apps/docs-platform/", "apps/blog-platform/"], }, }, rules: { diff --git a/packages/ui/README.md b/packages/ui/README.md index 74ca0dd..3bc5d03 100644 --- a/packages/ui/README.md +++ b/packages/ui/README.md @@ -34,13 +34,20 @@ This package provides a comprehensive set of production-ready React components b ### Layout Components (`src/components/layout`) -- **Container**: Responsive page wrapper with standardized max-widths and padding. +- **Container**: Responsive page layout wrapper with standardized max-widths and paddings. +- **MarketingNavbar**: Main header component featuring responsive navigation links, branding logo, and active action controls. +- **MarketingFooter**: Responsive product footer containing multi-column navigation links, copyright information, and integrated social platform links. +- **AppShell**: Standard sidebar, header, and workspace shell configuration tailored for builder studio tools. +- **ThemeToggle**: Interactive theme selector button supporting dark/light mode toggle with smooth transitions. +- **SocialIcons**: Standardized vector social brand icons (GitHub, LinkedIn, Twitter/X) for footer integrations. -## Usage +--- + +## 📖 Usage & Setup ### 1. Installation -The library is managed via npm workspaces. Ensure it is listed in your `package.json`: +The library is managed via npm workspaces. Verify the dependency in your workspace application `package.json`: ```json { @@ -50,19 +57,19 @@ The library is managed via npm workspaces. Ensure it is listed in your `package. } ``` -### 2. Implementation +### 2. Basic Component Usage -Import the desired components directly from the package: +Import UI and Layout components directly from the package root: ```tsx import { Button, Card, Tooltip, Container } from "@veriworkly/ui"; -export default function MyPage() { +export default function Page() { return ( - - - + + + @@ -70,20 +77,51 @@ export default function MyPage() { } ``` -## Styling +### 3. Font Integration + +The package exports Google's **Geist** and **Geist Mono** configuration. Import the font variables helper in your Next.js root layout: -The library uses a global theme system defined in `src/styles/themes.css`. It supports both Light and Dark modes using CSS variables and Tailwind's `@theme` block. +```tsx +import { globalFontVariables } from "@veriworkly/ui"; +import "@veriworkly/ui/styles/globals.css"; +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + + + {children} + + + ); +} +``` + +--- + +## 🎨 Theme & Styling System + +The library utilizes a dual-theme variable design configured for light and dark modes in `src/styles/themes.css`. + +### Key Custom Theme Variables: +* `--background` / `--color-fd-background`: Main application canvas color. +* `--foreground` / `--color-fd-foreground`: Primary typography and element color. +* `--card` / `--color-fd-card`: Card and modal background color. +* `--border` / `--color-fd-border`: Soft divider and border color. +* `--accent` / `--color-fd-primary`: Main brand color for action elements. + +### CSS Usage Example: ```css -/* Example of using theme variables */ -.custom-element { - background-color: var(--fd-background); - color: var(--fd-foreground); +.custom-component { + background-color: var(--background); + border: 1px solid var(--border); + color: var(--foreground); } ``` -## Development & Contribution +--- + +## 🛠️ Development & Contribution -- **HMR**: Components support Hot Module Replacement within the workspace. -- **Utils**: Use the `cn` utility from `@veriworkly/ui/utils` for conditional class merging. -- **Mobile First**: Always test new components on small screens (320px+) to ensure "Perfection". +- **HMR**: Hot Module Replacement is supported across all workspaces during development. +- **Utilities**: Use the `cn` utility exported from `@veriworkly/ui/utils` for tailwind class merge conflict prevention. +- **Mobile First**: Design and test components on small screens (minimum 320px width) before pushing changes.