{"id":27380170,"url":"https://github.com/vyuh-tech/vyuh-react-workspace","last_synced_at":"2025-04-13T14:19:26.093Z","repository":{"id":286260713,"uuid":"960768103","full_name":"vyuh-tech/vyuh-react-workspace","owner":"vyuh-tech","description":"The starting point workspace for all Vyuh React apps. ","archived":false,"fork":false,"pushed_at":"2025-04-05T09:27:55.000Z","size":19,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T10:26:39.320Z","etag":null,"topics":["cms","framework","react","vyuh","workspace"],"latest_commit_sha":null,"homepage":"https://docs.vyuh.tech/react","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vyuh-tech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-04-05T03:03:06.000Z","updated_at":"2025-04-05T09:27:58.000Z","dependencies_parsed_at":"2025-04-05T10:36:55.618Z","dependency_job_id":null,"html_url":"https://github.com/vyuh-tech/vyuh-react-workspace","commit_stats":null,"previous_names":["vyuh-tech/vyuh-react-workspace"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vyuh-tech%2Fvyuh-react-workspace","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vyuh-tech%2Fvyuh-react-workspace/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vyuh-tech%2Fvyuh-react-workspace/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vyuh-tech%2Fvyuh-react-workspace/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vyuh-tech","download_url":"https://codeload.github.com/vyuh-tech/vyuh-react-workspace/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248724698,"owners_count":21151575,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cms","framework","react","vyuh","workspace"],"created_at":"2025-04-13T14:19:25.708Z","updated_at":"2025-04-13T14:19:26.088Z","avatar_url":"https://github.com/vyuh-tech.png","language":"TypeScript","readme":"# Vyuh React Workspace\n\nA modern, feature-based React application workspace built with Next.js and\nSanity CMS integration. This workspace provides a structured approach to\nbuilding scalable React applications with a focus on feature modularity.\n\n## Project Structure\n\nThe workspace follows a monorepo structure using PNPM workspaces:\n\n```\nvyuh-react-workspace/\n├── apps/                      # Application packages\n│   └── main-app/              # Main Next.js application\n│       ├── app/               # Next.js app directory\n│       ├── plugins/           # Application-specific plugins\n│       └── ...\n├── features/                  # Feature packages\n│   └── misc/                  # Example \"Miscellaneous\" feature\n│       ├── react-feature-misc/    # React implementation\n│       ├── sanity-schema-misc/    # Sanity schema definition\n│       └── ...\n├── packages/                  # Shared packages\n├── pnpm-workspace.yaml        # PNPM workspace configuration\n└── README.md                  # This file\n```\n\n## Main Application\n\nThe main application is a Next.js app located in `apps/main-app/`. It serves as\nthe entry point for the entire application and integrates all features.\n\nKey aspects:\n\n- Built with Next.js 15 and React 19\n- Uses the App Router for routing\n- Integrates with Sanity CMS for content management\n- Implements the Vyuh framework for feature management\n\n### Environment Variables\n\nAdd the necessary environment variables to your `.env.local` file in the main\napp directory. These values will come from the Sanity Studio project that you'll generate in the section below:\n\n```\n# Use the values from your Sanity Studio project\nNEXT_PUBLIC_SANITY_PROJECT_ID=your-project-id  # From the Sanity Studio setup\nNEXT_PUBLIC_SANITY_DATASET=production          # The dataset you create in Sanity\nNEXT_PUBLIC_SANITY_TOKEN=your-sanity-token     # Generate this in the Sanity dashboard\n```\n\n\u003e **Note**: You'll need to create the Sanity Studio project first (as described in the Sanity Studio Integration section below) and then use the project ID, dataset name, and token from that setup in these environment variables.\n\n## Features Structure\n\nFeatures are organized in a modular way, with each feature having its own\ndirectory structure:\n\n```\nfeatures/\n└── feature-name/\n    ├── react-feature-name/    # React implementation\n    │   ├── src/               # Source code\n    │   ├── package.json       # Package configuration\n    │   └── tsconfig.json      # TypeScript configuration\n    ├── sanity-schema-name/    # Sanity schema definition\n    │   ├── src/               # Source code\n    │   ├── package.json       # Package configuration\n    │   └── tsconfig.json      # TypeScript configuration\n    └── ...\n```\n\nThis structure allows for:\n\n- Clear separation of concerns\n- Independent development and testing\n- Easy reuse across projects\n- Consistent patterns for all features\n\n## Sanity Studio Integration\n\nThe project uses Sanity CMS for content management with the Vyuh plugin\nstructure for enhanced feature management. To set up a Sanity Studio:\n\n1. Create a new Sanity project in the Sanity.io dashboard\n2. Install the Sanity CLI: `npm install -g @sanity/cli`\n3. Initialize a new Sanity project in the `apps/studio` directory:\n\n```bash\nmkdir -p apps/studio\ncd apps/studio\nsanity init\n```\n\n4. Configure your Sanity project with the following settings:\n\n   - Project name: Your project name\n   - Dataset: `production` (or your preferred name)\n   - Project output path: Current directory (.)\n\n5. Update the Sanity schema to include your feature schemas:\n\n```typescript\n// apps/studio/sanity.config.ts\nimport { vyuh } from '@vyuh/sanity-plugin-structure';\nimport { system } from '@vyuh/sanity-schema-system';\nimport { defineConfig } from 'sanity';\nimport { misc } from 'sanity-schema-misc';\n\nexport default defineConfig({\n  name: 'default',\n  title: 'Vyuh React',\n\n  projectId: 'your-project-id',\n  dataset: 'production',\n\n  plugins: [\n    vyuh({\n      features: [system, misc],\n    }),\n  ],\n});\n```\n\n## Vyuh Plugin Structure\n\nThe Vyuh framework uses a plugin-based architecture for Sanity integration. The\n`@vyuh/sanity-plugin-structure` package provides a structured way to organize\nand manage your content schemas.\n\n### Plugin Configuration\n\nThe Vyuh Sanity plugin is configured with an array of features, where each\nfeature is a `FeatureDescriptor` instance that contains schema definitions and\nother configurations:\n\n```typescript\n// Import the vyuh plugin from the correct package\nimport { vyuh } from '@vyuh/sanity-plugin-structure';\n\n// Configure the plugin with your features\nvyuh({\n  features: [\n    system, // System features\n    misc, // Your custom features\n    // Add more features as needed\n  ],\n});\n```\n\n### Feature Structure\n\nEach feature in the Sanity context is defined using the `FeatureDescriptor`\nclass from `@vyuh/sanity-schema-core`:\n\n```typescript\n// features/your-feature/sanity-schema-yourfeature/src/index.ts\nimport { FeatureDescriptor } from '@vyuh/sanity-schema-core';\nimport { APIContentDescriptor } from '@vyuh/sanity-schema-system';\nimport { yourSchemaType } from './yourSchemaType';\n\nexport const yourFeature = new FeatureDescriptor({\n  name: 'your-feature',\n  title: 'Your Feature',\n  description: 'Description of your feature',\n  contents: [\n    new APIContentDescriptor({\n      configurations: [yourSchemaType],\n    }),\n    // Other content descriptors...\n  ],\n});\n```\n\nThis structure allows for a modular approach to content management, where each\nfeature can define its own schema types and configurations.\n\n## Development Workflow\n\n1. Install dependencies:\n\n   ```bash\n   pnpm install\n   ```\n\n2. Start the development server:\n\n   ```bash\n   # Start the main app\n   cd apps/main-app\n   pnpm dev\n\n   # In another terminal, start the Sanity Studio\n   cd apps/studio\n   pnpm dev\n   ```\n\n3. Open your browser:\n   - Main app: [http://localhost:3000](http://localhost:3000)\n   - Sanity Studio: [http://localhost:3333](http://localhost:3333)\n\n## Creating New Features\n\nTo create a new feature, follow the structure of the `misc` feature:\n\n1. Create a new directory in `features/` with your feature name\n2. Create two subdirectories:\n   - `react-feature-yourfeature/`: React implementation\n   - `sanity-schema-yourfeature/`: Sanity schema definition\n3. Implement your feature following the patterns in the existing features\n4. Add your feature to the main app in `apps/main-app/app/client-root.tsx`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvyuh-tech%2Fvyuh-react-workspace","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvyuh-tech%2Fvyuh-react-workspace","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvyuh-tech%2Fvyuh-react-workspace/lists"}