feature/remove unnestext fields (#50)

* remove text from carousel

* simplify carousel component

* add new sections to rich text

* add cookie banner

* update presets

* update stories and cli command to pull it

* add missing types

* rename type generation scripts

* stage documentation

* change repo name, add docs, update stories, create landing

README.md

@@ -1,126 +1,222 @@
-# CMS-Kit
+# CMS-Kit 🔧
 
 An endeavor accumulating the experience and best practices collected at [Focus Reactive](https://focusreactive.com/).
 The project serves the idea of making Headless CMS-based development accessible, comfortable, and fast.
 
-## Quick start - Storyblok
+## Quick start
+
+### What you get
+
+1. New Storyblok space, set up with vercel deployments
+2. 10+ ready to use components with different presets(styles)
+3. New Vercel project, deployed and configured with your new Storyblok space
+4. Multiple ready pages in different styles
+
+### Storyblok
+
+1. Create a new repository using this template by clicking the "Use this template" button at the top of the repository page.
+   ![Screenshot 2024-11-07 at 13 38 48](https://github.com/user-attachments/assets/9a159ebd-d810-4b6d-ab79-ab453da6ab9c)
+
+2. Clone your new repository:
+
+   ```bash
+   git clone <your-repository-url>
+   ```
+
+3. Navigate to the project directory:
+
+   ```bash
+   cd <repository-name>
+   ```
+
+4. Install dependencies using pnpm:
 
-1. Create a new repo based on [cms-kit template](https://github.com/focusreactive/turbo-cms-kit)
-![Screenshot 2024-10-24 at 17 52 54](https://github.com/user-attachments/assets/b4773c54-bf7f-4697-ae7e-ada6e5163bf0)
-2. Pull repo locally
-3. Install packages
    ```bash
    pnpm install
    ```
-4. Go to CLI folder
+
+5. Navigate to the Storyblok CLI directory:
+
    ```bash
-   cd apps/storyblok/cli
+   cd apps/storyblok/CLI
    ```
-5. Execute command
+
+6. Run the setup script:
+
    ```bash
    node sb.mjs
    ```
-7. Follow steps
 
-### Showcase
+7. Follow the interactive prompts in the CLI tool to:
+   - Enter your Storyblok Personal Access Token
+   - Enter your Vercel Personal Auth Token
+   - Select your Vercel team
+   - Choose a project name
+   - Complete the space creation and configuration process
+
+### [TODO]: add video example
 
-## Demo 👀
 ### Sanity
-- [Demo Landing](https://turbo-cms-kit-sanity.vercel.app/)
-- [CMS](https://turbo-cms-kit-sanity.vercel.app/studio)
 
-### Storyblok
-- [Demo Landing](https://turbo-cms-kit-storyblok.vercel.app/)
-- [CMS](https://app.storyblok.com/#/me/spaces/293915/)
+soon
 
-## Features 🌟
+## Demo 👀
 
-- 🚀 Monorepo using **Turborepo**
-- 📁 New `/app` dir
-- 🗂️ Routing, Layouts, Nested Layouts and Layout Groups
-- 🌎 Data Fetching, Caching and Mutation
-- 🛠️ Server and Client Components
-- 🧩 UI Components built using **Radix UI**
-- 🎨 Styled using **Tailwind CSS**
-- 👷🏼‍♂️ Written in **TypeScript**
+- [Sanity landing](https://cms-kit-sanity.vercel.app/)
+- [Storyblok Landing](https://cms-kit-storyblok.vercel.app/)
 
-## What's inside?
+## Core Features
 
-This turborepo uses [pnpm](https://pnpm.io) as a package manager. It includes the following packages/apps:
+- Monorepo using **Turborepo**
+- **Multiple CMS** support
+- New `/app` dir
+- Routing, layouts, nested layouts
+- Data fetching, **caching** and **revalidation**
+- Server and client components
+- Reusable UI components built using **Radix UI**
+- Styled using **tailwind CSS**
+- Written in **TypeScript**
+- Types and components **generation**
+- **CLI** to create new set up project
+- **Themes** using CSS variables
+- **Predefined** structure
 
-### Apps and Packages
+## Repo structure
 
-- `storyblok`: CMS app
-- `sanity`: CMS app
-- `ui`: a stub React component library shared by both `web` and `docs` applications
-- `eslint-config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
-- `ts-config`: `tsconfig.json`s used throughout the monorepo
-- `tailwind-config`: `tsconfig.json`s used throughout the monorepo
+- `apps/storyblok`: CMS app
+- `apps/sanity`: CMS app
+- `packages/ui`: UI components library, shared between both CMS apps
+- `packages/eslint-config`: shared `eslint` configurations
+- `packages/ts-config`: shared `ts-config` configuration
+- `packages/tailwind-config`: shared `tailwind` configuration
 
-Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
+### Types of components
 
-### Utilities
+- **UI component** - universal and sharable component between multiple CMSs
+- **Controller component** - takes data from CMS, convert it to UI component format, and use UI component with converted props. Each CMS has it's own controller component for each UI component.
+- All **controller components** have common propertiers to change style, such as margin, background, alignment etc.
 
-This turborepo has some additional tools already setup:
+### Components composition and hierarchy
 
-- [TypeScript](https://www.typescriptlang.org/) for static type checking
-- [ESLint](https://eslint.org/) for code linting
-- [Prettier](https://prettier.io) for code formatting
+The website structure follows a clear hierarchical composition:
 
-### Build
+1. Pages
 
-To build all apps and packages, run the following command:
+   - Top-level components that represent entire web pages
+   - Each page contains multiple sections, SEO properties and theme
 
-```
-pnpm run build
-```
+2. Sections
 
-### Develop
+   - Container components that organize content into distinct areas
+   - Can be configured with settings like margin, background, width, alignment etc.
+   - Hold and arrange other components
 
-Setup environment variables:
-Link Vercel projects:
-```
-vercel login
-vercel link --repo
-```
+3. Base Components
 
-Pull environment variables from Vercel:
-```
-vercel env --cwd apps/sanity --environment development pull
-vercel env --cwd apps/storyblok --environment development pull
+   - Components like **link**, **image**, and **rich text**
+   - Combination of multiple functional components like **card**
+   - Can be combined and reused across different sections
+
+**RichText** component has additional functionality. It allows to add sections inside, which gives ability to combine sections with text.
+
+### New component
+
+1. Create new component using generators
+
+```bash
+pnpm gen
 ```
 
-To develop all apps and packages, run the following command:
+2. Select type of component to create
 
+```bash
+- UI: Create a new UI component
+- Storyblok: Create a new content section
+- Sanity: Create a new content section
 ```
-pnpm run dev
+
+3. Enter name of the component
+4. Update properties and design
+5. Generate types for new properties
+
+```bash
+pnpm gen:types
 ```
 
-### Remote Caching
+## Start project in dev mode
+
+### Instalation
+
+1. Clone repository
+   ```bash
+   git clone https://github.com/focusreactive/cms-kit
+   ```
+2. Go to project directory
+   ```bash
+   cd cms-kit
+   ```
+3. Install dependencies
+   ```bash
+   pnpm install
+   ```
+
+### Environment variables
 
-Turborepo can use a technique known as [Remote Caching](https://turborepo.org/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
+#### Storyblok project
 
-By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup), then enter the following commands:
+Create `.env` and `.env.local` files in the root of your project and add the following variables:
 
+.env
+
+```bash
+REPO_PROD_BRANCH="main"
+REPO_TYPE="github"
+REPO_ID="[repo id]"
+REPO_NAME="[nickname]/[repo name]"
 ```
-pnpm dlx turbo login
+
+.env.local
+
+```bash
+# Created by Vercel CLI
+NEXT_PUBLIC_API_GATE="https://api.storyblok.com/v2/cdn"
+NEXT_PUBLIC_DOMAIN="https://localhost:4050"
+NEXT_PUBLIC_IS_PREVIEW="true"
+NEXT_PUBLIC_SB_REGION="EU"
+NEXT_PUBLIC_URL="https://localhost:4050"
+SB_PREVIEW_TOKEN="[storyblok space preview token]"
+SB_WEBHOOK_REVALIDATE_SECRET="[storyblok webhook revalidate key]"
 ```
 
-This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).
+#### Sanity
 
-Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your turborepo:
+.env
 
-```
-pnpm dlx turbo link
+```bash
+REPO_PROD_BRANCH="main"
+REPO_TYPE="github"
+REPO_ID="[repo id]"
+REPO_NAME="[nickname]/[repo name]"
 ```
 
-## Useful Links
+.env.local
+**tbd**
 
-Learn more about the power of Turborepo:
+4. Create a new repo based on [cms-kit template](https://github.com/focusreactive/cms-kit)
+   ![Screenshot 2024-10-24 at 17 52 54](https://github.com/user-attachments/assets/b4773c54-bf7f-4697-ae7e-ada6e5163bf0)
+5. Pull repo locally
+6. Install packages
+   ```bash
+   pnpm install
+   ```
+7. Go to CLI folder
+   ```bash
+   cd apps/storyblok/cli
+   ```
+8. Execute command
+   ```bash
+   node sb.mjs
+   ```
+9. Follow steps
 
-- [Pipelines](https://turborepo.org/docs/core-concepts/pipelines)
-- [Caching](https://turborepo.org/docs/core-concepts/caching)
-- [Remote Caching](https://turborepo.org/docs/core-concepts/remote-caching)
-- [Scoped Tasks](https://turborepo.org/docs/core-concepts/scopes)
-- [Configuration Options](https://turborepo.org/docs/reference/configuration)
-- [CLI Usage](https://turborepo.org/docs/reference/command-line-reference)
+Happy hacking 👾

apps/sanity/.env

@@ -1,4 +1,4 @@
 REPO_PROD_BRANCH="main"
 REPO_TYPE="github"
 REPO_ID="826312493"
-REPO_NAME="focusreactive/turbo-cms-kit"
+REPO_NAME="focusreactive/cms-kit"

apps/sanity/.env.initial

@@ -8,7 +8,7 @@ SANITY_API_WRITE_TOKEN=
 NEXT_PUBLIC_SANITY_PROJECT_TITLE="Next.js Personal Website with Sanity.io"
 # Initial env
 REPO_ID=826312493
-REPO_NAME=focusreactive/turbo-cms-kit
+REPO_NAME=focusreactive/cms-kit
 MAX_NUMBER_OF_PROJECTS=5
 REPO_PROD_BRANCH=main
 # Local env

apps/sanity/.env.local.example

@@ -13,7 +13,7 @@ SANITY_API_READ_TOKEN=
 NEXT_PUBLIC_SANITY_PROJECT_TITLE="Next.js Personal Website with Sanity.io"
 # Initial env
 REPO_ID=826312493
-REPO_NAME=focusreactive/turbo-cms-kit
+REPO_NAME=focusreactive/cms-kit
 MAX_NUMBER_OF_PROJECTS=5
 REPO_PROD_BRANCH=main
 # Local env

apps/sanity/package.json

@@ -9,7 +9,7 @@
     "start": "next start",
     "rollout": "./src/lib/rollout-tools/local/cli.mjs",
     "extract-schema": "pnpm sanity schema extract --path src/generated/extracted-schema.json --enforce-required-fields",
-    "generate-types": "pnpm extract-schema && pnpm sanity typegen generate"
+    "gen:types": "pnpm extract-schema && pnpm sanity typegen generate"
   },
   "dependencies": {
     "@portabletext/react": "^3.1.0",

apps/sanity/src/components/Footer/templates/footer.json

@@ -3,49 +3,49 @@
   "copywriteText": "Flowbite™. All Rights Reserved.",
   "links": [
     {
-      "href": "https://github.com/focusreactive/turbo-cms-kit",
+      "href": "https://github.com/focusreactive/cms-kit",
       "target": "_self",
       "text": "About",
       "type": "url",
       "variant": "footerNav"
     },
     {
-      "href": "https://github.com/focusreactive/turbo-cms-kit",
+      "href": "https://github.com/focusreactive/cms-kit",
       "target": "_self",
       "text": "Premium",
       "type": "url",
       "variant": "footerNav"
     },
     {
-      "href": "https://github.com/focusreactive/turbo-cms-kit",
+      "href": "https://github.com/focusreactive/cms-kit",
       "target": "_self",
       "text": "Campaigns",
       "type": "url",
       "variant": "footerNav"
     },
     {
-      "href": "https://github.com/focusreactive/turbo-cms-kit",
+      "href": "https://github.com/focusreactive/cms-kit",
       "target": "_self",
       "text": "Blog",
       "type": "url",
       "variant": "footerNav"
     },
     {
-      "href": "https://github.com/focusreactive/turbo-cms-kit",
+      "href": "https://github.com/focusreactive/cms-kit",
       "target": "_self",
       "text": "Affiliate Program",
       "type": "url",
       "variant": "footerNav"
     },
     {
-      "href": "https://github.com/focusreactive/turbo-cms-kit",
+      "href": "https://github.com/focusreactive/cms-kit",
       "target": "_self",
       "text": "FAQs",
       "type": "url",
       "variant": "footerNav"
     },
     {
-      "href": "https://github.com/focusreactive/turbo-cms-kit",
+      "href": "https://github.com/focusreactive/cms-kit",
       "target": "_self",
       "text": "Contact",
       "type": "url",