@vonaffenfels/portal-slug-field 1.1.2

package/.nvmrc

@@ -0,0 +1 @@
+v14.16.1

package/package.json

@@ -0,0 +1,100 @@
+{
+    "name": "@vonaffenfels/portal-slug-field",
+    "version": "1.1.2",
+    "scripts": {
+        "prepublish": "yarn run build",
+        "dev": "yarn run start",
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "build": "rm -rf dist && webpack --config webpack.config.js",
+        "start": "webpack serve --config webpack.config.dev.js"
+    },
+    "peerDependencies": {
+        "@babel/core": "^7.20.12",
+        "@babel/plugin-proposal-class-properties": "^7.13.0",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/preset-env": "^7.13.15",
+        "@babel/preset-react": "^7.13.13",
+        "@contentful/app-sdk": "^3.33.0",
+        "@contentful/field-editor-single-line": "^0.14.1",
+        "@contentful/field-editor-test-utils": "^0.11.1",
+        "@contentful/forma-36-fcss": "^0.3.1",
+        "@contentful/forma-36-react-components": "^3.88.3",
+        "@contentful/forma-36-tokens": "^0.10.1",
+        "@svgr/webpack": "^5.5.0",
+        "babel-loader": "^8.2.2",
+        "clean-webpack-plugin": "^3.0.0",
+        "cloudinary": "^1.25.1",
+        "contentful-management": "^7.17.0",
+        "copy-webpack-plugin": "^8.1.1",
+        "cross-env": "^7.0.3",
+        "css-loader": "^5.2.4",
+        "cssnano": "^5.0.1",
+        "dotenv-webpack": "^7.0.2",
+        "file-loader": "^6.2.0",
+        "html-webpack-plugin": "^5.3.1",
+        "mini-css-extract-plugin": "^1.5.0",
+        "postcss": "8.4.14",
+        "postcss-loader": "^5.2.0",
+        "raw-loader": "^4.0.2",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-uid": "^2.3.1",
+        "sass": "^1.32.11",
+        "sass-loader": "^11.0.1",
+        "speakingurl": "^14.0.1",
+        "style-loader": "^2.0.0",
+        "tailwindcss": "3.3.2",
+        "url-loader": "^4.1.1",
+        "webpack-cli": "^4.6.0",
+        "webpack-dev-server": "^4.0.0-beta.2",
+        "webpack-watch-files-plugin": "^1.2.1"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.20.12",
+        "@babel/plugin-proposal-class-properties": "^7.13.0",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/preset-env": "^7.13.15",
+        "@babel/preset-react": "^7.13.13",
+        "@contentful/app-sdk": "^3.33.0",
+        "@contentful/field-editor-single-line": "^0.14.1",
+        "@contentful/field-editor-test-utils": "^0.11.1",
+        "@contentful/forma-36-fcss": "^0.3.1",
+        "@contentful/forma-36-react-components": "^3.88.3",
+        "@contentful/forma-36-tokens": "^0.10.1",
+        "@svgr/webpack": "^5.5.0",
+        "babel-loader": "^8.2.2",
+        "clean-webpack-plugin": "^3.0.0",
+        "cloudinary": "^1.25.1",
+        "contentful-management": "^7.17.0",
+        "copy-webpack-plugin": "^8.1.1",
+        "cross-env": "^7.0.3",
+        "css-loader": "^5.2.4",
+        "cssnano": "^5.0.1",
+        "dotenv-webpack": "^7.0.2",
+        "file-loader": "^6.2.0",
+        "html-webpack-plugin": "^5.3.1",
+        "mini-css-extract-plugin": "^1.5.0",
+        "postcss": "8.4.14",
+        "postcss-loader": "^5.2.0",
+        "raw-loader": "^4.0.2",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-uid": "^2.3.1",
+        "sass": "^1.32.11",
+        "sass-loader": "^11.0.1",
+        "speakingurl": "^14.0.1",
+        "style-loader": "^2.0.0",
+        "tailwindcss": "3.3.2",
+        "url-loader": "^4.1.1",
+        "webpack-cli": "^4.6.0",
+        "webpack-dev-server": "^4.0.0-beta.2",
+        "webpack-watch-files-plugin": "^1.2.1"
+    },
+    "dependencies": {
+        "webpack": "5.88.2"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "gitHead": "08d7c49cef5ccdc3429453a99dca8c28f904e7ff"
+}

package/src/components/Field.js

@@ -0,0 +1,88 @@
+import {
+    TextInput, Note, InlineEntryCard, MenuItem,
+} from '@contentful/f36-components';
+import React, {
+    useState, useEffect,
+} from 'react';
+import getSlug from "speakingurl";
+import {getContentfulClient} from "../lib/contentfulClient";
+
+const Field = ({sdk}) => {
+    const [value, setValue] = useState(sdk.field.getValue());
+    const [error, setError] = useState(false);
+
+    useEffect(() => {
+        // initial check
+        checkDuplicate(value);
+    }, []);
+
+    const onChange = (value, sluggify = false) => {
+        let localValue = String(value || "").toLowerCase();
+        if (sluggify) {
+            if (localValue.startsWith("/") || localValue.endsWith("/")) {
+                localValue = localValue.replace(/^[/]*(.*?)[/]*$/, "$1");
+            }
+
+            localValue = getSlug(localValue, {
+                lang: 'de',
+                custom: ["/", "-"],
+            });
+        }
+
+        sdk.field.setValue(localValue);
+        setValue(localValue);
+
+        checkDuplicate(localValue);
+    };
+
+    const checkDuplicate = async (value) => {
+        const client = getContentfulClient();
+        const entries = await client.getEntries({
+            content_type: sdk.entry.getSys().contentType.sys.id,
+            limit: 1,
+            [`fields.${sdk.field.id}`]: value,
+            [`sys.id[ne]`]: sdk.entry.getSys().id,
+        });
+
+        const hasDuplicate = !!entries.items.at(0);
+
+        if (hasDuplicate) {
+            sdk.field.setValue("");
+        }
+
+        sdk.field.setInvalid(!!entries.items.at(0));
+        setError(entries.items.at(0) || false);
+    };
+
+    const openError = () => {
+        sdk.navigator.openEntry(error.sys.id, {slideIn: true});
+    };
+
+    return (
+        <>
+            <TextInput
+                value={value}
+                onBlur={(e) => onChange(e.target.value, true)}
+                type="text"
+                name="slug"
+                placeholder=""
+                onChange={(e) => onChange(e.target.value)}
+            />
+            {!!error && <>
+                <Note variant="negative">
+                    Slug wird bereits von <InlineEntryCard
+                        actions={[
+                            <MenuItem key="open" onClick={openError}>Öffnen</MenuItem>,
+                        ]}
+                        status={error.sys.publishedVersion ? "published" : "draft"}
+                        title={error.fields.title.de}
+                        entry={error}
+                    /> verwendet.
+                </Note>
+
+            </>}
+        </>
+    );
+};
+
+export default Field;

package/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>Remote Select Contentful App</title>
+</head>
+<body>
+<div id="root">
+</div>
+</body>
+</html>

package/src/index.js

@@ -0,0 +1,33 @@
+import './scss/index.scss';
+import React from 'react';
+import {createRoot} from 'react-dom/client';
+
+import {
+    init,
+    locations,
+} from '@contentful/app-sdk';
+import '@contentful/forma-36-react-components/dist/styles.css';
+import '@contentful/forma-36-fcss/dist/styles.css';
+import '@contentful/forma-36-tokens/dist/css/index.css';
+
+import Field from './components/Field';
+import {initContentfulClient} from "./lib/contentfulClient";
+
+init((sdk) => {
+    initContentfulClient(sdk);
+
+    const rootContainer = document.getElementById('root');
+    const ComponentLocationSettings = [
+        {
+            location: locations.LOCATION_ENTRY_FIELD,
+            component: <Field sdk={sdk}/>,
+        },
+    ];
+
+    ComponentLocationSettings.forEach((componentLocationSetting) => {
+        if (sdk.location.is(componentLocationSetting.location)) {
+            const root = createRoot(rootContainer); // createRoot(container!) if you use TypeScript
+            root.render(componentLocationSetting.component);
+        }
+    });
+});

package/src/lib/contentfulClient.js

@@ -0,0 +1,13 @@
+let __contentfulClient;
+
+export const getContentfulClient = () => {
+    if (!__contentfulClient) {
+        throw new Error(`Contentful client not initialized run initContentfulClient(sdk) first`);
+    }
+
+    return __contentfulClient;
+};
+export const initContentfulClient = (sdk) => {
+    __contentfulClient = sdk.space;
+};
+

package/src/scss/index.scss

@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html, body, div {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}

package/tailwind.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    content: [
+        './src/**/*.js',
+    ],
+};

package/webpack.config.dev.js

@@ -0,0 +1,20 @@
+const path = require('path');
+let config = require("./webpack.config");
+
+config.mode = "development";
+config.watch = true;
+config.watchOptions = {ignored: ['dist/**', 'node_modules/**']};
+config.cache = {type: "memory"};
+
+config.output.publicPath = "/dist/";
+config.devtool = 'inline-source-map';
+
+config.devServer = {
+    static: path.join(__dirname, 'dist'),
+    compress: true,
+    historyApiFallback: true,
+    port: process.env.PORT,
+    devMiddleware: {writeToDisk: true},
+};
+
+module.exports = config;

package/webpack.config.js

@@ -0,0 +1,187 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require("webpack");
+const {CleanWebpackPlugin} = require('clean-webpack-plugin');
+
+module.exports = {
+    mode: 'production',
+    entry: {index: './src/index.js'},
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                include: path.resolve(__dirname, 'src'),
+                use: [
+                    {
+                        loader: 'babel-loader',
+                        options: {
+                            "presets": [
+                                "next/babel",
+                                [
+                                    "@babel/preset-env",
+                                    {
+                                        "modules": false,
+                                        "targets": {
+                                            "browsers": [
+                                                "last 2 Chrome versions",
+                                                "last 2 Firefox versions",
+                                                "last 2 Safari versions",
+                                                "last 2 iOS versions",
+                                                "last 1 Android version",
+                                                "last 1 ChromeAndroid version",
+                                                "ie 11",
+                                            ],
+                                        },
+                                    },
+                                ],
+                                "@babel/preset-react",
+                            ],
+                            "plugins": [
+                                [
+                                    "@babel/plugin-proposal-private-property-in-object",
+                                    {
+                                        "loose": true,
+                                    },
+                                ],
+                                [
+                                    "@babel/plugin-proposal-class-properties",
+                                    {
+                                        "loose": true,
+                                    },
+                                ],
+                                "@babel/plugin-syntax-dynamic-import",
+                            ],
+                        },
+                    },
+                ],
+            },
+            {
+                test: /\.s[ac]ss$/i,
+                include: path.resolve(__dirname, 'src'),
+                use: [
+                    "style-loader",
+                    {
+                        loader: 'css-loader',
+                        options: {importLoaders: 1},
+                    },
+                    {
+                        loader: 'postcss-loader',
+                        options: {
+                            postcssOptions: {
+                                plugins: {
+                                    'postcss-import': {},
+                                    tailwindcss: {},
+                                    autoprefixer: {},
+                                },
+                            },
+                        },
+                    },
+                    "sass-loader",
+                ],
+            },
+            {
+                test: /module\.css$/i,
+                use: [
+                    'style-loader',
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            importLoaders: 1,
+                            modules: {exportLocalsConvention: "camelCase"},
+                        },
+                    },
+                    {
+                        loader: 'postcss-loader',
+                        options: {postcssOptions: {
+                            postcssOptions: {
+                                plugins: {
+                                    'postcss-import': {},
+                                    tailwindcss: {},
+                                    autoprefixer: {},
+                                },
+                            },
+                        }},
+                    },
+                ],
+            },
+            {
+                test: /\.css$/i,
+                exclude: [/module\.css$/i],
+                use: [
+                    'style-loader',
+                    {
+                        loader: 'css-loader',
+                        options: {importLoaders: 1},
+                    },
+                    {
+                        loader: 'postcss-loader',
+                        options: {postcssOptions: {
+                            postcssOptions: {
+                                plugins: {
+                                    'postcss-import': {},
+                                    tailwindcss: {},
+                                    autoprefixer: {},
+                                },
+                            },
+                        }},
+                    },
+                ],
+            },
+            {
+                test: /\.svg$/,
+                resourceQuery: {not: [/url/]}, // exclude react component if *.svg?url
+                use: [
+                    {
+                        loader: '@svgr/webpack',
+                        options: {
+                            dimensions: false,
+                            svgo: false,
+                        },
+                    },
+                    'url-loader',
+                ],
+            },
+            {
+                test: /\.(woff(2)?|ttf|eot|png)(\?v=\d+\.\d+\.\d+)?$/,
+                use: [
+                    {
+                        loader: 'file-loader',
+                        options: {
+                            name: '[name].[ext]',
+                            outputPath: 'fonts/',
+                        },
+                    },
+                ],
+            },
+            {
+                test: /\.(graphql|gql)$/,
+                loader: 'raw-loader',
+            },
+        ],
+    },
+    plugins: [
+        new CleanWebpackPlugin(),
+        new HtmlWebpackPlugin({template: path.join(__dirname, 'src', 'index.html')}),
+        new MiniCssExtractPlugin({}),
+    ],
+    resolve: {
+        extensions: ['.json', '.js', '.jsx'],
+        symlinks: false,
+        fallback: {
+            stream: false,
+            path: false,
+            timers: false,
+        },
+    },
+    output: {
+        filename: '[name].js',
+        libraryTarget: "umd",
+        publicPath: "/",
+        globalObject: "this",
+        path: path.resolve("./dist"),
+    },
+    snapshot: {
+        managedPaths: [],
+    },
+};