### Create React Bricks App with pnpm

Source: https://docs.reactbricks.com/getting-started

This command initializes a new React Bricks project using pnpm. It executes the create-react-bricks-app package to begin the project setup process.

```bash
pnpm create reactbricks-app@latest
```

--------------------------------

### Create React Bricks App with yarn

Source: https://docs.reactbricks.com/getting-started

This command initializes a new React Bricks project using yarn. It invokes the create-react-bricks-app package to start the project creation wizard.

```bash
yarn create reactbricks-app
```

--------------------------------

### Create React Bricks App with npm

Source: https://docs.reactbricks.com/getting-started

This command initializes a new React Bricks project using npm. It runs the create-react-bricks-app package to start the project creation wizard.

```bash
npm create reactbricks-app@latest
```

--------------------------------

### React Bricks RSC Server Component Example

Source: https://docs.reactbricks.com/rsc

A basic example of a React Server Component using React Bricks. It shows how to fetch page data and render it.

```typescript
import { fetchPage, PageViewer } from "react-bricks/rsc";

interface MyPageProps {
  params: { slug: string };
}

export default async function MyPage({ params }: MyPageProps) {
  const page = await fetchPage(params.slug);

  return (
    <PageViewer page={page} />
  );
}
```

--------------------------------

### React Bricks Login Page Example

Source: https://docs.reactbricks.com/api-reference/components/login

Demonstrates how to use the Login component within the Admin component to create a custom login page. This setup ensures the Login component receives the necessary context from the Admin wrapper.

```jsx
import React from'react'


import { Admin, Login } from'react-bricks'


const LoginPage = () => {


return (


<AdminisLogin>


<Login />


</Admin>


)

}



exportdefault LoginPage
```

--------------------------------

### ReactBricks Provider Setup

Source: https://docs.reactbricks.com/api-reference/components/react-bricks

Demonstrates how to set up the ReactBricks component, which acts as a provider for the ReactBricksContext. It includes essential props for configuring the CMS integration, such as appId, apiKey, bricks, pageTypes, and UI customization options.

```jsx
import { ReactBricks, types } from'react-bricks/frontend'


<ReactBricks

appId="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"

apiKey="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"

bricks={...}

pageTypes={...}

logo="/logo.svg"

loginUI={...}

contentClassName="content"

renderLocalLink={({ href, children, className, activeClassName })=> {...}}

navigate={...}

loginPath="/"

editorPath="/admin/editor"

playgroundPath="/admin/playground"

appSettingsPath="/admin/app-settings"

previewPath="/preview"

getAdminMenu={({ isAdmin })=> {...}}

isDarkColorMode={colorMode==='dark'}

toggleColorMode={...}

useCssInJs={false}

appRootElement="#root"

clickToEditSide={types.ClickToEditSide.BottomRight}

customFields={...}

responsiveBreakpoints={...}


enableAutoSave

disableSaveIfInvalidProps

enablePreview


blockIconsPosition={types.BlockIconsPosition.InsideBlock}


enablePreviewImage

enableUnsplash

unsplashApiKey="..."

enableDefaultEmbedBrick

permissions={{ ... }}

>

...

</ReactBricks>
```

--------------------------------

### JavaScript Example: Defining Page Types with Templates

Source: https://docs.reactbricks.com/page-types

Demonstrates how to define page types in JavaScript using an array of IPageType objects. This example showcases the configuration of a 'product' page type, including its name, plural name, default status, and a detailed template structure with multiple slots, each specifying allowed block types and default content.

```javascript
const pageTypes:types.IPageType[] = [
  {
    name: 'product',
    pluralName: 'products',
    defaultStatus: types.PageStatus.Published,
    template: [
      {
        slotName: 'heading',
        label: 'Heading',
        min: 1,
        max: 1,
        allowedBlockTypes: ['hero-unit'],
        editable: true,
        getDefaultContent: ()=> [
          { brickName: 'hero-unit', storyName: 'gradient-hero-unit' },
        ],
      },
      {
        slotName: 'content',
        label: 'Content',
        min: 0,
        max: 4,
        allowedBlockTypes: [
          'text-image',
          'call-to-action',
          'customers',
          'paragraph',
        ],
        editable: true,
        getDefaultContent: ()=> ['text-image', 'customers'],
      },
      {
        slotName: 'footer',
        label: 'Footer',
        min: 1,
        max: 1,
        allowedBlockTypes: ['call-to-action'],
        editable: false,
      },
    ],
  },
]
```

--------------------------------

### React Bricks RSC Client Component Example

Source: https://docs.reactbricks.com/rsc

An example of a client component designed to work with React Bricks Server Components. It might include interactive elements or specific rendering logic.

```typescript
import React from 'react';

interface MyClientComponentProps {
  title: string;
}

const MyClientComponent: React.FC<MyClientComponentProps> = ({ title }) => {
  return (
    <div>
      <h1>{title}</h1>
      <button onClick={() => alert('Clicked!')}>Click Me</button>
    </div>
  );
};

export default MyClientComponent;
```

--------------------------------

### React Bricks Icon Preprocessor Example

Source: https://docs.reactbricks.com/api-reference/visual-components/icon

Example demonstrating the use of the 'preProcessor' prop to modify SVG content, such as replacing fill attributes.

```javascript
preProcessor={(code) => code.replace(/fill=".*?"/g, 'fill="currentColor"')}
```

--------------------------------

### Next.js App Router Example Structure

Source: https://docs.reactbricks.com/basics/project-structure

Demonstrates the routing structure within the `app` directory for a Next.js project using the App Router, including internationalization (`[lang]`) and dynamic slug handling (`[[…slug]]`).

```bash
app/
  [lang]/
    [[…slug]]
```

--------------------------------

### React Bricks List Component Usage Example

Source: https://docs.reactbricks.com/page-types

Demonstrates how to use the React Bricks `<List>` component to fetch and render a list of 'blogPost' pages with specific filtering, sorting, and pagination.

```javascript
<List
  of="blogPost"
  where={{
    language: 'fr',
    tag: 'cms',
    filterBy: { myCustomField: 'foo' },
  }}
  sort="-publishedAt"
  page={1}
  pageSize={20}
>
  {( { items, pagination })=> {
    return (
      <>
        {items.map((post)=> {
          return (
            <PostListItem
              key={post.id}
              title={post.meta.title||''}
              href={post.slug}
              content={post.meta.description||''}
              author={post.author}
              date={post.publishedAt||''}
              featuredImg={post.meta.image}
            />
          )
        })}
      </>
    )
  }}
</List>
```

--------------------------------

### React Bricks Icon Component Usage

Source: https://docs.reactbricks.com/api-reference/visual-components/icon

Example of how to use the Icon component in React, including importing it and passing various props for styling and accessibility.

```javascript
import { Icon } from'react-bricks/frontend'

...

<Icon

icon={icon}

width={32}

height={32}

className="text-pink-500 hover:text-pink-700"

title="My Icon"

description="Description for my Icon"

fillOpacity={0.5}

/>
```

--------------------------------

### Fetch Tags Usage Example

Source: https://docs.reactbricks.com/api-reference/utilities/fetch-tags

Demonstrates how to import and use the fetchTags function with a provided API key to retrieve paginated tags.

```javascript
import { fetchTags } from'react-bricks/frontend'

import config from'../react-bricks/config'

const paginatedTags = await fetchTags(config.apiKey)
```

--------------------------------

### Example React Bricks Project Tree (Next.js App Router)

Source: https://docs.reactbricks.com/basics/project-structure

Illustrates a typical directory structure for a React Bricks project using Next.js with the App Router and Tailwind CSS. This structure helps in organizing components, configurations, and application routes.

```bash
Directoryapp 
  Directory[lang] 
    Directory[[…slug]] 
  Directoryadmin 
    Directory(sso)/
      …
    Directoryapp-settings 
    Directoryeditor 
    Directorymedia 
    Directoryplayground 
  Directorypreview 
Directorycomponents/
    …
Directorycss/
    …
Directorypublic/
    …
Directoryreact-bricks 
    Directorybricks 
      Directorycustom 
        …
      Directoryreact-bricks-ui/
        …
```

--------------------------------

### React Bricks RichText Component Usage Example

Source: https://docs.reactbricks.com/api-reference/visual-components/rich-text

This example demonstrates the usage of the RichText component from 'react-bricks/frontend' for server components. It shows how to define a custom brick with a RichText field, configure allowed text features, and customize the rendering of bold text and links.

```javascript
// from 'react-bricks/rsc' for usage with server components



import { types, RichText, Link } from'react-bricks/frontend'



interface MyBrickProps {



description:types.TextValue



}



const MyBrick:types.Brick<MyBrickProps> = ({ description }) => (



...



<RichText



propName="description"



value={description}



renderBlock={({ children })=>(



<pclassName="text-lg text-gray-600">{children}</p>



)}



placeholder="Type a description..."



allowedFeatures={[ 



types.RichTextFeatures.Bold,



types.RichTextFeatures.Italic,



types.RichTextFeatures.Link,



//types.RichTextFeatures.Highlight,



//types.RichTextFeatures.Heading1,



//types.RichTextFeatures.Heading2,



//types.RichTextFeatures.Heading3,



//types.RichTextFeatures.Heading4,



//types.RichTextFeatures.Heading5,



//types.RichTextFeatures.Heading6,



//types.RichTextFeatures.Code,



//types.RichTextFeatures.Quote,



//types.RichTextFeatures.OrderedList,



//types.RichTextFeatures.UnorderedList,



//types.RichTextFeatures.Subscript,



//types.RichTextFeatures.Superscript,




]}



// Override default <b> tag for Bold style



renderBold={({ children })=>(



<bclassName="text-pink-500">



{children}



</b>



)}



// Override rendering for Links



renderLink={({ children, href, target, rel })=>(



<Link



href={href}



target={target}



rel={rel}



className="text-sky-500 hover:text-sky-600 transition-colors"



>



{children}



</Link>



)}



/>



...


)



MyBrick.schema= { ... }



exportdefault MyBrick
```

--------------------------------

### React Bricks Text Component Usage Example

Source: https://docs.reactbricks.com/api-reference/visual-components/text

Demonstrates how to use the Text component for plain text editing in React Bricks. It includes required properties like propName, value, and an optional renderBlock for custom styling. This example is compatible with Server Components.

```jsx
import { types, Text } from'react-bricks/frontend'


interface MyBrickProps {


title:types.TextValue


}


const MyBrick:types.Brick<MyBrickProps> = ({ title }) => (


...


<Text

propName="title"

value={title}

renderBlock={({ children })=>(


<h1className="text-xl font-extrabold">{children}</h1>


)}

placeholder="Title..."

/>


...


)


MyBrick.schema= { ... }


exportdefault MyBrick
```

--------------------------------

### React Bricks Button Component Example

Source: https://docs.reactbricks.com/api-reference/visual-components/link

This example demonstrates how to create a reusable Button component using React Bricks. It utilizes the Link component for navigation and the Text component for button labels, showcasing custom schema definitions for editable properties like button text and path.

```jsx
import { Text, Link, types } from'react-bricks/frontend'


interface ButtonProps {


buttonText:types.TextValue


buttonPath:string


}


const Button:types.Brick<ButtonProps> = ({ buttonText, buttonPath }) => {


return (


<Link


href={buttonPath}


className="py-2 px-6 text-white text-center bg-sky-500"

>

<Text

propName="buttonText"

value={buttonText}

placeholder="Action"

renderBlock={({ children })=> <span>{children}</span>}

/>

</Link>

)

}


Button.schema= {


name: 'button',


label: 'Button',


getDefaultProps: ()=> ({


buttonText: 'Learn more',


}),


sideEditProps: [

{


name: 'buttonPath',


label: 'Path or URL',


type: types.SideEditPropType.Text,


validate: (value)=> 


value?.startsWith('/') ||


value?.startsWith('https://') ||


'Please, enter a valid URL',

},

],

}


exportdefault Button
```

--------------------------------

### Create a Hero Unit Brick with React Bricks

Source: https://docs.reactbricks.com/bricks/introduction

This example demonstrates how to create a 'Hero Unit' brick using React Bricks. It utilizes the `RichText` component for editable text and defines a `schema` to control padding via a sidebar select option. The code includes the component's interface, the React component itself, and its schema definition.

```tsx
import { types, RichText } from'react-bricks/frontend';



// Component interface

interface HeroUnitProps {


title:types.TextValue;

padding:'big'|'small';

}



// The React Component

const HeroUnit:types.Brick<HeroUnitProps> = ({ title, padding }) => {



return (



<divclassName={`${padding==='big'?'py-20':'py-12'}`}>



<RichText

propName="title"

value={title}

placeholder="Type a title..."

renderBlock={({ children })=>(



<h1className="text-3xl text-center">{children}</h1>



)}

allowedFeatures={[types.RichTextFeatures.Bold]}

/>



</div>



)

}



// The Brick's Schema

HeroUnit.schema= {



name: 'hero-unit',

label: 'Hero Unit',

getDefaultProps: ()=> ({



padding: 'big',



title: 'Thick as a React Brick',



}),



// Sidebar Controls Definition



sideEditProps: [



{



name: 'padding',



label: 'Padding',



type: types.SideEditPropType.Select,



selectOptions: {



display: types.OptionsDisplay.Radio,



options: [



{ value: 'big', label: 'Big' },



{ value: 'small', label: 'Small' },



],



},



},



],



}



exportdefault HeroUnit

```

--------------------------------

### React Bricks File Component Usage

Source: https://docs.reactbricks.com/api-reference/visual-components/file

Example of how to use the File component from 'react-bricks/frontend'. It demonstrates setting the propName, allowedExtensions, and a custom renderBlock function to display the file link.

```javascript
import { File } from'react-bricks/frontend'

...

<File
propName="catalog"
allowedExtensions={['.pdf']}
renderBlock={({ name, url, size }) => (
<a href={url}>
{name}, {size /1024} KB
</a>
)}/>
```

--------------------------------

### Create a Bold Mark Plugin

Source: https://docs.reactbricks.com/api-reference/utilities/mark-plugin-constructor

This JavaScript example demonstrates how to create a 'bold' mark plugin using React Bricks' `markPluginConstructor`. It includes a hotkey, a render function for bold text, and an icon from react-icons.

```jsx
import React from'react';
import { FaBold } from'react-icons/fa';
import { markPluginConstructor } from'react-bricks/frontend';

const plugin = markPluginConstructor({
  name: 'bold',
  hotKey: 'mod+b',
  render: (props:any) => <strong>{props.children}</strong>,
  icon: <FaBold />
});

export default plugin;
```

--------------------------------

### Local Environment Variables Setup (Bash)

Source: https://docs.reactbricks.com/basics/project-structure

This file stores local environment-specific variables and is not committed to version control. The CLI typically populates it with essential credentials like APP_ID, API_KEY, and ENVIRONMENT. Additional variables, such as API keys for external services, can also be defined here.

```bash
# .env.local
APP_ID=your-app-id
API_KEY=your-api-key
ENVIRONMENT=development
UNSPLASH_API_KEY=your-unsplash-api-key

```

--------------------------------

### Access React Bricks Version via useReactBricksContext

Source: https://docs.reactbricks.com/changelog

This example shows how to access the React Bricks version using the `useReactBricksContext` hook, which is available on the `ReactBricksContext`.

```javascript
import { useReactBricksContext } from '@react-bricks/core';

function MyComponent() {
  const { version } = useReactBricksContext();
  // Use the version variable here
  return <div>React Bricks Version: {version}</div>;
}
```

--------------------------------

### cleanPage Usage Example

Source: https://docs.reactbricks.com/api-reference/utilities/clean-page

Demonstrates how to use the cleanPage function. It fetches page data using fetchPage, then cleans the content using cleanPage with the fetched data, page types, and bricks. Finally, it logs the cleaned page content.

```javascript
fetchPage('about-us', 'API_KEY').then((data)=> {

const myPage = cleanPage(data, pageTypes, bricks)

console.log(myPage.content)

})
```

--------------------------------

### Handle User Login

Source: https://docs.reactbricks.com/api-reference/hooks/use-auth

Provides an example of handling a form submission to log in a user using the loginUser function and navigating upon success or setting an error.

```javascript
const { loginUser } = useAuth()



const handleLogin = (event:React.FormEvent) => {



event.preventDefault()



loginUser(email, password).then(

() => navigate(editorPath),

(error) => {

setError(error)

}

)

}
```

--------------------------------

### Create an h1 Plugin using blockPluginConstructor

Source: https://docs.reactbricks.com/api-reference/utilities/block-plugin-constructor

This example demonstrates how to create a custom 'h1' plugin for React Bricks using the `blockPluginConstructor`. It specifies the plugin's name, hotkey, rendering function, and icon component.

```javascript
import React from'react'
import { MdLooksOne } from'react-icons/md'
import { blockPluginConstructor } from'react-bricks/frontend'

const plugin = blockPluginConstructor({
  name: 'h1',
  hotKey: 'mod+shift+1',
  render: (props:any) => <h1>{props.children}</h1>,
  icon: <MdLooksOne />,
})

exportdefault plugin
```

--------------------------------

### Render AppSettings Page with Admin Wrapper

Source: https://docs.reactbricks.com/api-reference/components/app-settings

This example demonstrates how to use the AppSettings component within the Admin wrapper. The AppSettings component is used to configure and trigger build webhooks for static site generators like Gatsby or Next.js. It requires the Admin component for context.

```jsx
import React from'react'


import { Admin, AppSettings } from'react-bricks'


const AppSettingsPage = () => {


return (


<Admin>


< AppSettings />


</Admin>


)


}



exportdefault AppSettingsPage
```

--------------------------------

### Get All Bricks Configuration

Source: https://docs.reactbricks.com/rsc

Retrieves all configured bricks from the React Bricks setup within a server component.

```typescript
getBricks(): types.Bricks
```

--------------------------------

### Example of an Image Control in Sidebar

Source: https://docs.reactbricks.com/bricks/schema/side-edit-props

Provides an example of the 'Image' type sidebar control, which allows content editors to upload or select images from the Digital Assets Manager (DAM).

```javascript
{
  "name": "backgroundImage",
  "label": "Background Image",
  "type": "Image"
}
```

--------------------------------

### React Bricks Admin Routes

Source: https://docs.reactbricks.com/basics/project-structure

The `app/admin` directory contains the routes for the React Bricks administration interface, including sections for SSO, app settings, editor, media, and playground.

```bash
app/admin/
  (sso)/
    …
```

--------------------------------

### React Bricks Hooks Reference

Source: https://docs.reactbricks.com/api-reference/introduction

This section covers the various hooks provided by the react-bricks library, which facilitate data fetching, state management, and interaction with the React Bricks context. These hooks are essential for building dynamic and interactive content experiences.

```javascript
import { usePagePublic } from 'react-bricks';
import { useVisualEdit } from 'react-bricks';
import { usePagesPublic } from 'react-bricks';
import { useTagsPublic } from 'react-bricks';
import { useAuth } from 'react-bricks';
import { usePageValues } from 'react-bricks';
import { useReactBricksContext } from 'react-bricks';
import { useAdminContext } from 'react-bricks';
```

--------------------------------

### React Bricks Components Reference

Source: https://docs.reactbricks.com/api-reference/introduction

This section details the core components exported by the react-bricks library, including those for rendering pages, managing the admin interface, and handling authentication. It serves as a reference for integrating these components into your React applications.

```javascript
import { ReactBricks } from 'react-bricks';
import { PageViewer } from 'react-bricks';
import { Admin } from 'react-bricks';
import { Login } from 'react-bricks';
import { Editor } from 'react-bricks';
import { Playground } from 'react-bricks';
import { AppSettings } from 'react-bricks';
```

--------------------------------

### Logout Button Example

Source: https://docs.reactbricks.com/api-reference/hooks/use-auth

Illustrates how to create a button that calls the logoutUser function when clicked.

```javascript
const { logoutUser } = useAuth()



return<buttononClick={()=>logoutUser()}>Logout</button>
```

--------------------------------

### React Bricks Index File

Source: https://docs.reactbricks.com/basics/project-structure

The `index.ts` file in the `react-bricks/` directory often serves as the main entry point for React Bricks related exports and configurations within the project.

```typescript
react-bricks/index.ts
```

--------------------------------

### Enable preview by default in ReactBricksConfig

Source: https://docs.reactbricks.com/changelog

Sets the `enablePreview` option to `true` by default in the `ReactBricksConfig`, simplifying the setup for preview functionality.

```javascript
`enablePreview` true by default in ReactBricksConfig.
```

--------------------------------

### Define Property with Helper Text

Source: https://docs.reactbricks.com/bricks/schema/side-edit-props

Defines a property that includes helper text to guide the user during editing.

```javascript
{
  name: "slug",
  label: "URL Slug",
  type: SideEditPropType.Text,
  helperText: "Enter a unique identifier for the page."
}
```

--------------------------------

### Using React Bricks Admin Components

Source: https://docs.reactbricks.com/basics/admin-interface

Demonstrates how to integrate core React Bricks Admin components into your project for managing content and site settings. These components provide the foundational UI for the Admin Interface.

```jsx
import { Admin, Login, Editor, MediaLibrary, Playground, AppSettings } from '@react-bricks/admin';

function App() {
  return (
    <Admin>
      <Login />
      <Editor />
      <MediaLibrary />
      <Playground />
      <AppSettings />
    </Admin>
  );
}
```

--------------------------------

### Get Block Value in Server Component

Source: https://docs.reactbricks.com/rsc

Retrieves the value of a specified prop name for the current block within a server component context.

```typescript
getBlockValue(propName: string): any | null
```

--------------------------------

### React Bricks Visual Components Reference

Source: https://docs.reactbricks.com/api-reference/introduction

This section lists and describes the visual components provided by react-bricks for rendering different types of content within your pages. These include components for text, rich text, images, files, and more, enabling rich content editing experiences.

```javascript
import { Text } from 'react-bricks';
import { RichText } from 'react-bricks';
import { RichTextExt } from 'react-bricks';
import { Image } from 'react-bricks';
import { Repeater } from 'react-bricks';
import { File } from 'react-bricks';
import { Icon } from 'react-bricks';
import { Link } from 'react-bricks';
```

--------------------------------

### Fetch Pages with fetchPages

Source: https://docs.reactbricks.com/api-reference/utilities/fetch-pages

Demonstrates how to use the fetchPages function to retrieve a list of pages, specifically blog posts with a 'react' tag, using an API key. The result is logged to the console.

```javascript
fetchPages('API_KEY', { type: 'blogPost', tag: 'react' }).then((data)=> {



console.log(data)


})
```

--------------------------------

### React Bricks Components Reference

Source: https://docs.reactbricks.com/cms-features/backup-restore

Reference for core React Bricks components used in building content-driven websites. Includes components for rendering pages, managing the admin interface, and handling user authentication.

```javascript
import { ReactBricks } from '@react-bricks/react';
import { PageViewer } from '@react-bricks/react';
import { Admin } from '@react-bricks/react';
import { Login } from '@react-bricks/react';
import { Editor } from '@react-bricks/react';
import { Playground } from '@react-bricks/react';
import { AppSettings } from '@react-bricks/react';

// Example usage:
<ReactBricks>
  <PageViewer />
  <Admin />
  <Login />
  <Editor />
  <Playground />
  <AppSettings />
</ReactBricks>
```

--------------------------------

### Get Images from Unsplash

Source: https://docs.reactbricks.com/changelog

Instructions on how to integrate and fetch images from Unsplash within your React Bricks project. This typically involves using Unsplash's API or a pre-built integration.

```javascript
// Conceptual example of fetching an image from Unsplash
// import { Image } from '@react-bricks/react';
// 
// const UnsplashImageBrick = ({ imageId }) => {
//   const imageUrl = `https://source.unsplash.com/${imageId}`;
//   return <Image src={imageUrl} alt="Unsplash Image" />;
// };
```

--------------------------------

### React Bricks: Nested Repeaters

Source: https://docs.reactbricks.com/changelog

Demonstrates the usage of the `<Repeater>` component in React Bricks to achieve any level of nesting for repeated blocks. Refer to the Nested blocks documentation for detailed examples.

```JavaScript
<Repeater />
```

--------------------------------

### React Bricks: Visual Brick Previews

Source: https://docs.reactbricks.com/changelog

Allows setting an image and icon for each brick in React Bricks, enabling visual selection in the 'add new' menu. Refer to the Bricks schema documentation for configuration.

```JavaScript
const myBrick = {
  // ... other brick properties
  image: 'path/to/image.png',
  icon: 'icon-name'
};
```

--------------------------------

### React Bricks Utilities Reference

Source: https://docs.reactbricks.com/cms-features/backup-restore

Reference for utility functions in React Bricks for data fetching, manipulation, and plugin creation. Includes functions for fetching pages, cleaning data, and creating custom editor plugins.

```javascript
import { fetchPage } from '@react-bricks/react';
import { fetchPages } from '@react-bricks/react';
import { fetchTags } from '@react-bricks/react';
import { cleanPage } from '@react-bricks/react';
import { getPagePlainText } from '@react-bricks/react';
import { Plain } from '@react-bricks/react';
import { markPluginConstructor } from '@react-bricks/react';
import { blockPluginConstructor } from '@react-bricks/react';
import { blockWithModalPluginConstructor } from '@react-bricks/react';

// Example usage:
const pageData = await fetchPage('some-page-id');
const plainText = getPagePlainText(pageData);
const customPlugin = markPluginConstructor({ name: 'bold' });
const blockPlugin = blockPluginConstructor({ name: 'my-block' });
```

--------------------------------

### Get Schema Org Data in Remix Starters

Source: https://docs.reactbricks.com/changelog

Provides a new function `getSchemaOrgData` to facilitate the injection of JSON-LD data within Remix starter projects, improving SEO and structured data implementation.

```javascript
getSchemaOrgData
```

--------------------------------

### Next.js App Router Catch-all Routes (TypeScript)

Source: https://docs.reactbricks.com/basics/project-structure

This directory contains the catch-all routes for the frontend website, specifically within the Next.js App Router structure. The organization here can vary significantly based on project needs and framework conventions.

```typescript
export default function CatchAllPage({ params }: { params: { lang: string } }) {
  return (
    <div>
      <h1>Welcome to page in language: {params.lang}</h1>
      {/* Page content will be rendered here */}
    </div>
  );
}

```

--------------------------------

### Add stories to brick schema in React Bricks

Source: https://docs.reactbricks.com/changelog

This example demonstrates how to add a `stories` array to a brick's schema in React Bricks. This allows documenting stories directly in code, which editors can see and use.

```javascript
import { types } from '@react-bricks/core';

const myBrick = {
  // ... other brick properties
  schema: [
    // ... schema fields
    { name: 'title', label: 'Title', type: types.Text },
    { name: 'image', label: 'Image', type: types.Image },
    {
      name: 'stories',
      label: 'Stories',
      type: types.Array,
      of: [
        { name: 'storyName', label: 'Story Name', type: types.Text },
        { name: 'locked', label: 'Locked', type: types.Boolean },
        { name: 'canAddBefore', label: 'Can Add Before', type: types.Boolean },
        { name: 'canAddAfter', label: 'Can Add After', type: types.Boolean }
      ]
    }
  ]
};
```

--------------------------------

### Example of a Relationship Control in Sidebar

Source: https://docs.reactbricks.com/bricks/schema/side-edit-props

Shows the 'Relationship' type sidebar control, used to link content items or data from external sources. This is useful for creating connections between different parts of the content.

```javascript
{
  "name": "relatedArticle",
  "label": "Related Article",
  "type": "Relationship",
  "collection": "articles"
}
```

--------------------------------

### React Bricks Gatsby Starters

Source: https://docs.reactbricks.com/changelog

React Bricks now offers full compatibility with Gatsby, providing starter projects to help developers integrate React Bricks into their Gatsby websites.

```bash
# Example of how to get started with a Gatsby starter
# (Actual command would depend on the starter's setup)
# npx create-react-app my-gatsby-app --template gatsby-starter-react-bricks
```

--------------------------------

### Fetch External Data at Brick Level

Source: https://docs.reactbricks.com/changelog

Guide on fetching external data directly within React Bricks components (bricks). This enables dynamic content loading and integration with third-party APIs at the component level.

```javascript
// Example of fetching data within a Brick
import React from 'react';
import { Repeater } from '@react-bricks/react';

const MyBrick = ({ items }) => (
  <div>
    {items.map((item, index) => (
      <div key={index}>{item.title}</div>
    ))}
  </div>
);

// In a parent component or data fetching logic:
// const fetchedData = await fetch('https://api.example.com/data');
// const items = await fetchedData.json();
```

--------------------------------

### React Bricks Utilities Reference

Source: https://docs.reactbricks.com/api-reference/introduction

This section details the utility functions exported by the react-bricks library, which provide helpful methods for data manipulation, fetching, and content processing. These utilities can be used to streamline common development tasks.

```javascript
import { fetchPage } from 'react-bricks';
import { fetchPages } from 'react-bricks';
import { fetchTags } from 'react-bricks';
import { cleanPage } from 'react-bricks';
import { getPagePlainText } from 'react-bricks';
import { Plain } from 'react-bricks';
import { markPluginConstructor } from 'react-bricks';
import { blockPluginConstructor } from 'react-bricks';
import { blockWithModalPluginConstructor } from 'react-bricks';
```

--------------------------------

### React Bricks Repeater Component with RSC

Source: https://docs.reactbricks.com/rsc

Provides an example of the Repeater component adapted for React Server Components (RSC). It shows the addition of the `items` prop, which is crucial for server-side rendering of repeated content structures.

```jsx
import { Repeater } from'react-bricks/rsc'

...

<Repeater
propName="features"
items={features}
/>
```

--------------------------------

### React Bricks API Reference - Components

Source: https://docs.reactbricks.com/core-concepts/what-is-react-bricks

This section provides an overview of the main React Bricks API components, including their purpose and basic usage within a React application.

```jsx
// <ReactBricks>: The main wrapper component for the React Bricks library.
// <PageViewer>: Renders the content of a page.
// <Admin>: Integrates the React Bricks admin interface.
// <Login>: Provides a login component for the admin interface.
// <Editor>: Enables the visual editing experience.
// <Playground>: A tool for testing and developing bricks.
// <AppSettings>: Manages application settings within the CMS.
```

--------------------------------

### Example of a Select Control in Sidebar

Source: https://docs.reactbricks.com/bricks/schema/side-edit-props

Shows how to define a 'Select' type sidebar control, allowing content editors to choose from predefined options. This is useful for properties like background colors or font styles.

```javascript
{
  "name": "backgroundColor",
  "label": "Background Color",
  "type": "Select",
  "options": [
    "white",
    "lightgray",
    "darkgray"
  ]
}
```

--------------------------------

### Environment Variables for Next.js and Gatsby

Source: https://docs.reactbricks.com/basics/how-to-deploy

This snippet shows how to expose the APP_ID environment variable to the browser for Next.js and Gatsby projects. It highlights the use of specific prefixes to make the variable accessible client-side.

```bash
# For Next.js:
NEXT_PUBLIC_APP_ID=your_app_id

# For Gatsby:
GATSBY_APP_ID=your_app_id
```

--------------------------------

### Example of a Text Control in Sidebar

Source: https://docs.reactbricks.com/bricks/schema/side-edit-props

Illustrates the basic structure of a 'Text' type sidebar control, used for simple text input by content editors. It includes the essential `name`, `label`, and `type` properties.

```javascript
{
  "name": "titleText",
  "label": "Title Text",
  "type": "Text"
}
```

--------------------------------

### React Bricks Components Reference

Source: https://docs.reactbricks.com/welcome

This section details the core components provided by the React Bricks library, including their usage and purpose within the CMS.

```jsx
<ReactBricks>
  {/* Your content here */}
</ReactBricks>
```

```jsx
<PageViewer>
  {/* Page content */}
</PageViewer>
```

```jsx
<Admin>
  {/* Admin interface */}
</Admin>
```

```jsx
<Login>
  {/* Login form */}
</Login>
```

```jsx
<Editor>
  {/* Editor component */}
</Editor>
```

```jsx
<Playground>
  {/* Playground for testing */}
</Playground>
```

```jsx
<AppSettings>
  {/* App settings */}
</AppSettings>
```

--------------------------------

### Add simpleFetchTags and useTags

Source: https://docs.reactbricks.com/changelog

Introduces `simpleFetchTags` and `useTags` for simplified tag management and fetching.

```javascript
**Add`simpleFetchTags` and `useTags`**.
```

--------------------------------

### Get Metadata for Next.js App Router

Source: https://docs.reactbricks.com/rsc

Generates metadata compatible with Next.js 14+ App Router conventions. This function returns page metadata, facilitating integration with Next.js's metadata management system.

```typescript
getMetadata(page: types.Page): IMetadata
```

--------------------------------

### React Bricks RSC Preview Link Fetching

Source: https://docs.reactbricks.com/rsc

Details how to fetch a preview link for a page within a Server Component context using React Bricks. The `fetchPagePreview` function is used for this.

```javascript
import { fetchPagePreview } from "react-bricks/rsc";

const page = await fetchPagePreview('your-page-slug');
```

--------------------------------

### Get Schema.org Data String with React Bricks

Source: https://docs.reactbricks.com/cms-features/seo

Retrieves the stringified Schema.org data for a page, excluding the JSON-LD script tag, using the `getSchemaOrgData` function. This is useful for specific framework integrations like Remix.

```javascript
getSchemaOrgData(page: Page)
```

--------------------------------

### React Bricks Components Reference

Source: https://docs.reactbricks.com/changelog

Reference documentation for core React Bricks components used in building CMS-driven React applications. This includes components for rendering pages, managing the admin interface, and handling user authentication.

```javascript
import { ReactBricks } from '@react-bricks/react';
import { PageViewer } from '@react-bricks/react';
import { Admin } from '@react-bricks/react';
import { Login } from '@react-bricks/react';
import { Editor } from '@react-bricks/react';
import { Playground } from '@react-bricks/react';
import { AppSettings } from '@react-bricks/react';
```

--------------------------------

### Render Playground Page with Admin Context

Source: https://docs.reactbricks.com/api-reference/components/playground

This example demonstrates how to render the Playground component within the Admin component to provide the necessary context for previewing and testing React Bricks. The Playground component itself requires no props.

```jsx
import React from'react'


import { Admin, Playground } from'react-bricks'


const PlaygroundPage = () => {


return (


<Admin>


<Playground />


</Admin>


)

}



exportdefault PlaygroundPage
```

--------------------------------

### React Bricks Image Component Usage

Source: https://docs.reactbricks.com/api-reference/visual-components/image

Demonstrates how to use the Image component in a React Bricks project. It shows the necessary imports, prop type definitions, and how to render the Image component with various props for image optimization and display.

```typescript
import { types, Image } from'react-bricks/frontend'


interface MyBrickProps {


image:types.IImageSource


}


const MyBrick:types.Brick<MyBrickProps> = ({ image }) => (


...


<Image


propName="image"


source={image}


alt="Product"


maxWidth="650"


aspectRatio="1.33"


/>


...

)


MyBrick.schema= { ... }


exportdefaultMyBrick
```

--------------------------------

### React Bricks Configuration File

Source: https://docs.reactbricks.com/basics/project-structure

The `config.tsx` file within the `react-bricks/` directory is essential for configuring React Bricks settings, including API keys, plugins, and other project-specific options.

```typescript
react-bricks/config.tsx
```

--------------------------------

### Example of a Range Control in Sidebar

Source: https://docs.reactbricks.com/bricks/schema/side-edit-props

Demonstrates the 'Range' type sidebar control, enabling editors to select a value within a specified numerical range. This is commonly used for properties like padding, margin, or font size.

```javascript
{
  "name": "padding",
  "label": "Padding",
  "type": "Range",
  "min": 0,
  "max": 100,
  "unit": "px"
}
```