feat: add example blocks with React 18 and 19

examples/basic-react-18/.eslintrc.js

@@ -0,0 +1,27 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+module.exports = {
+    extends: ['@frontify/eslint-config-react', 'plugin:jsx-a11y/recommended'],
+    plugins: ['notice'],
+    settings: {
+        react: {
+            version: 'detect',
+        },
+    },
+    overrides: [
+        {
+            files: ['*.js', '*.ts', '*.tsx'],
+            rules: {
+                'notice/notice': [
+                    'error',
+                    {
+                        template: '/* (c) Copyright Frontify Ltd., all rights reserved. */\n\n',
+                        messages: {
+                            whenFailedToMatch: 'No Frontify copyright header set.',
+                        },
+                    },
+                ],
+            },
+        },
+    ],
+};

examples/basic-react-18/.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

examples/basic-react-18/.prettierrc

@@ -0,0 +1,15 @@
+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "overrides": [
+        {
+            "files": ["tsconfig.json", "tsconfig.*.json"],
+            "options": {
+                "parser": "json",
+                "trailingComma": "none"
+            }
+        }
+    ]
+}

examples/basic-react-18/README.md

@@ -0,0 +1 @@
+# Frontify Block Example

examples/basic-react-18/manifest.json

@@ -0,0 +1,3 @@
+{
+    "appId": "cmmsy5lag0001e6upnmx4lygy"
+}

examples/basic-react-18/package.json

@@ -0,0 +1,34 @@
+{
+    "name": "example-basic-react-18",
+    "version": "1.0.0",
+    "private": true,
+    "sideEffects": false,
+    "main": "dist/index.js",
+    "scripts": {
+        "serve": "frontify-cli serve --entryPath src/index.ts",
+        "deploy": "frontify-cli deploy --entryPath src/index.ts",
+        "lint": "eslint .",
+        "lint:fix": "eslint --fix .",
+        "prettier": "prettier --check .",
+        "prettier:fix": "prettier --write .",
+        "typecheck": "tsc --noEmit"
+    },
+    "dependencies": {
+        "@frontify/fondue": "13.4.0",
+        "@frontify/guideline-blocks-settings": "^2.1.7",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.29.0",
+        "@frontify/eslint-config-react": "1.0.13",
+        "@frontify/frontify-cli": "6.0.0-alpha.0",
+        "@types/react": "^18.3.28",
+        "@types/react-dom": "^18.3.7",
+        "autoprefixer": "^10.4.27",
+        "postcss": "^8.5.8",
+        "prettier": "^3.8.1",
+        "tailwindcss": "^3.4.19",
+        "typescript": "^5.9.3"
+    }
+}

examples/basic-react-18/postcss.config.js

@@ -0,0 +1,9 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+module.exports = {
+    plugins: [
+        require('tailwindcss'),
+        require('autoprefixer'),
+        require('../../postcss/scope')({ scope: '.example-asset-upload' }),
+    ],
+};

examples/basic-react-18/src/BasicBlock.tsx

@@ -0,0 +1,24 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { Button } from '@frontify/fondue/components';
+
+import { ReactElement, useState, version } from 'react';
+
+export const BasicBlock = (): ReactElement => {
+    const [count, setCount] = useState(0);
+
+    const handleClick = () => {
+        setCount(count + 1);
+    };
+
+    return (
+        <div>
+            <h1>
+                Basic Block using React {version} running in {process.env.NODE_ENV}
+            </h1>
+            <p>This is a basic block</p>
+            <Button onPress={handleClick}>Click me</Button>
+            <p>Count: {count}</p>
+        </div>
+    );
+};

examples/basic-react-18/src/index.ts

@@ -0,0 +1,13 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import '@frontify/fondue/tokens/base';
+
+import { defineBlock } from '@frontify/guideline-blocks-settings';
+
+import { BasicBlock } from './BasicBlock';
+import { settings } from './settings';
+
+export default defineBlock({
+    block: BasicBlock,
+    settings,
+});

examples/basic-react-18/src/settings.ts

@@ -0,0 +1,26 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export const IMAGE_SETTING_ID = 'image';
+
+export const settings = {
+    main: [
+        {
+            id: 'main-dropdown',
+            type: 'dropdown',
+            defaultValue: 'custom_block',
+            size: 'large',
+            disabled: true,
+            choices: [
+                {
+                    value: 'custom_block',
+                    icon: 'Code',
+                    label: 'Custom Block',
+                },
+            ],
+        },
+        {
+            id: IMAGE_SETTING_ID,
+            type: 'assetInput',
+        },
+    ],
+};

examples/basic-react-18/tailwind.config.js

@@ -0,0 +1,11 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import tailwindFondue from '@frontify/fondue/tokens/tailwind';
+
+module.exports = {
+    presets: [tailwindFondue],
+    content: ['src/**/*.{ts,tsx}'],
+    corePlugins: {
+        preflight: false,
+    },
+};

examples/basic-react-18/tsconfig.json

@@ -0,0 +1,21 @@
+{
+    "compilerOptions": {
+        "esModuleInterop": true,
+        "isolatedModules": true,
+        "module": "ES2022",
+        "moduleResolution": "bundler",
+        "noImplicitAny": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "sourceMap": true,
+        "strict": true,
+        "target": "ES2020",
+        "jsx": "react-jsx",
+        "lib": ["ES2021", "DOM"],
+        "resolveJsonModule": true,
+        "types": ["cypress", "cypress-real-events", "@4tw/cypress-drag-drop"],
+        "skipLibCheck": true
+    },
+    "include": ["src/**/*", "../../packages/shared/src/**/*"],
+    "exclude": ["node_modules", "dist"]
+}

examples/basic-react-19/.eslintrc.js

@@ -0,0 +1,27 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+module.exports = {
+    extends: ['@frontify/eslint-config-react', 'plugin:jsx-a11y/recommended'],
+    plugins: ['notice'],
+    settings: {
+        react: {
+            version: 'detect',
+        },
+    },
+    overrides: [
+        {
+            files: ['*.js', '*.ts', '*.tsx'],
+            rules: {
+                'notice/notice': [
+                    'error',
+                    {
+                        template: '/* (c) Copyright Frontify Ltd., all rights reserved. */\n\n',
+                        messages: {
+                            whenFailedToMatch: 'No Frontify copyright header set.',
+                        },
+                    },
+                ],
+            },
+        },
+    ],
+};

examples/basic-react-19/.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

examples/basic-react-19/.prettierrc

@@ -0,0 +1,15 @@
+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "overrides": [
+        {
+            "files": ["tsconfig.json", "tsconfig.*.json"],
+            "options": {
+                "parser": "json",
+                "trailingComma": "none"
+            }
+        }
+    ]
+}

examples/basic-react-19/README.md

@@ -0,0 +1 @@
+# Frontify Block Example

examples/basic-react-19/manifest.json

@@ -0,0 +1,3 @@
+{
+    "appId": "cmmsy637500011dupq0v4fw25"
+}

examples/basic-react-19/package.json

@@ -0,0 +1,34 @@
+{
+    "name": "example-basic-react-19",
+    "version": "1.0.0",
+    "private": true,
+    "sideEffects": false,
+    "main": "dist/index.js",
+    "scripts": {
+        "serve": "frontify-cli serve --entryPath src/index.ts",
+        "deploy": "frontify-cli deploy --entryPath src/index.ts",
+        "lint": "eslint .",
+        "lint:fix": "eslint --fix .",
+        "prettier": "prettier --check .",
+        "prettier:fix": "prettier --write .",
+        "typecheck": "tsc --noEmit"
+    },
+    "dependencies": {
+        "@frontify/fondue": "13.4.0",
+        "@frontify/guideline-blocks-settings": "^2.1.7",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.29.0",
+        "@frontify/eslint-config-react": "1.0.13",
+        "@frontify/frontify-cli": "6.0.0-alpha.0",
+        "@types/react": "^19.2.14",
+        "@types/react-dom": "^19.2.3",
+        "autoprefixer": "^10.4.27",
+        "postcss": "^8.5.8",
+        "prettier": "^3.8.1",
+        "tailwindcss": "^3.4.19",
+        "typescript": "^5.9.3"
+    }
+}

examples/basic-react-19/postcss.config.js

@@ -0,0 +1,9 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+module.exports = {
+    plugins: [
+        require('tailwindcss'),
+        require('autoprefixer'),
+        require('../../postcss/scope')({ scope: '.example-asset-upload' }),
+    ],
+};

examples/basic-react-19/src/BasicBlock.tsx

@@ -0,0 +1,24 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { Button } from '@frontify/fondue/components';
+
+import { ReactElement, useState, version } from 'react';
+
+export const BasicBlock = (): ReactElement => {
+    const [count, setCount] = useState(0);
+
+    const handleClick = () => {
+        setCount(count + 1);
+    };
+
+    return (
+        <div>
+            <h1>
+                Basic Block using React {version} running in {process.env.NODE_ENV}
+            </h1>
+            <p>This is a basic block</p>
+            <Button onPress={handleClick}>Click me</Button>
+            <p>Count: {count}</p>
+        </div>
+    );
+};

examples/basic-react-19/src/index.ts

@@ -0,0 +1,11 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import '@frontify/fondue/tokens/base';
+
+import { BasicBlock } from './BasicBlock';
+import { settings } from './settings';
+
+export default {
+    block: BasicBlock,
+    settings,
+};

examples/basic-react-19/src/settings.ts

@@ -0,0 +1,26 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export const IMAGE_SETTING_ID = 'image';
+
+export const settings = {
+    main: [
+        {
+            id: 'main-dropdown',
+            type: 'dropdown',
+            defaultValue: 'custom_block',
+            size: 'large',
+            disabled: true,
+            choices: [
+                {
+                    value: 'custom_block',
+                    icon: 'Code',
+                    label: 'Custom Block',
+                },
+            ],
+        },
+        {
+            id: IMAGE_SETTING_ID,
+            type: 'assetInput',
+        },
+    ],
+};

examples/basic-react-19/tailwind.config.js

@@ -0,0 +1,11 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import tailwindFondue from '@frontify/fondue/tokens/tailwind';
+
+module.exports = {
+    presets: [tailwindFondue],
+    content: ['src/**/*.{ts,tsx}'],
+    corePlugins: {
+        preflight: false,
+    },
+};

examples/basic-react-19/tsconfig.json

@@ -0,0 +1,21 @@
+{
+    "compilerOptions": {
+        "esModuleInterop": true,
+        "isolatedModules": true,
+        "module": "ES2022",
+        "moduleResolution": "bundler",
+        "noImplicitAny": true,
+        "noImplicitReturns": true,
+        "noImplicitThis": true,
+        "sourceMap": true,
+        "strict": true,
+        "target": "ES2020",
+        "jsx": "react-jsx",
+        "lib": ["ES2021", "DOM"],
+        "resolveJsonModule": true,
+        "types": ["cypress", "cypress-real-events", "@4tw/cypress-drag-drop"],
+        "skipLibCheck": true
+    },
+    "include": ["src/**/*", "../../packages/shared/src/**/*"],
+    "exclude": ["node_modules", "dist"]
+}