@contentful/field-editor-slug 1.2.0 → 1.3.1

package/dist/esm/TrackingFieldConnector.js

@@ -0,0 +1,88 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+import * as React from 'react';
+function getTitleField(sdk, trackingFieldId) {
+    const { entry , contentType  } = sdk;
+    if (trackingFieldId && entry.fields[trackingFieldId]) {
+        return entry.fields[trackingFieldId];
+    }
+    return entry.fields[contentType.displayField];
+}
+var _React_Component;
+export class TrackingFieldConnector extends (_React_Component = React.Component) {
+    componentDidMount() {
+        this.unsubscribeSysChanges = this.props.sdk.entry.onSysChanged((sys)=>{
+            this.setState({
+                isPublished: Boolean(sys.publishedVersion)
+            });
+        });
+        const titleField = getTitleField(this.props.sdk, this.props.trackingFieldId);
+        if (!titleField) {
+            return;
+        }
+        if (!this.state.isSame) {
+            this.unsubscribeLocalizedValue = titleField.onValueChanged(this.props.field.locale, (value)=>{
+                this.setState({
+                    titleValue: value
+                });
+            });
+        }
+        if (this.props.field.locale !== this.props.defaultLocale) {
+            if (!this.props.isOptionalLocaleWithFallback) {
+                this.unsubscribeValue = titleField.onValueChanged(this.props.defaultLocale, (value)=>{
+                    if (!titleField.getValue(this.props.field.locale)) {
+                        this.setState({
+                            titleValue: value
+                        });
+                    }
+                });
+            }
+        }
+    }
+    componentWillUnmount() {
+        if (typeof this.unsubscribeValue === 'function') {
+            this.unsubscribeValue();
+        }
+        if (typeof this.unsubscribeLocalizedValue === 'function') {
+            this.unsubscribeLocalizedValue();
+        }
+        if (typeof this.unsubscribeSysChanges === 'function') {
+            this.unsubscribeSysChanges();
+        }
+    }
+    render() {
+        return this.props.children({
+            ...this.state
+        });
+    }
+    constructor(props){
+        super(props);
+        _define_property(this, "unsubscribeValue", null);
+        _define_property(this, "unsubscribeLocalizedValue", null);
+        _define_property(this, "unsubscribeSysChanges", null);
+        const titleField = getTitleField(props.sdk, props.trackingFieldId);
+        const entrySys = props.sdk.entry.getSys();
+        const isSame = titleField ? props.field.id === titleField.id : false;
+        this.state = {
+            titleValue: titleField ? titleField.getValue() : '',
+            isPublished: Boolean(entrySys.publishedVersion),
+            isSame
+        };
+    }
+}
+_define_property(TrackingFieldConnector, "defaultProps", {
+    children: ()=>{
+        return null;
+    }
+});

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export { SlugEditor } from './SlugEditor';
+export { slugify } from './services/slugify';
+export { makeSlug } from './services/makeSlug';

package/dist/esm/services/makeSlug.js

@@ -0,0 +1,24 @@
+import { slugify } from './slugify';
+function formatTwoDigit(num) {
+    const asString = String(num);
+    return asString.length === 1 ? `0${asString}` : asString;
+}
+export function formatUtcDate(date) {
+    const year = date.getFullYear();
+    const month = formatTwoDigit(date.getUTCMonth() + 1);
+    const day = formatTwoDigit(date.getUTCDate());
+    const hour = formatTwoDigit(date.getUTCHours());
+    const minutes = formatTwoDigit(date.getUTCMinutes());
+    const seconds = formatTwoDigit(date.getUTCSeconds());
+    return `${year} ${month} ${day} at ${hour} ${minutes} ${seconds}`;
+}
+function untitledSlug({ isOptionalLocaleWithFallback , createdAt  }) {
+    if (isOptionalLocaleWithFallback) {
+        return '';
+    }
+    const createdAtFormatted = formatUtcDate(new Date(createdAt));
+    return slugify('Untitled entry ' + createdAtFormatted, 'en-US');
+}
+export function makeSlug(title, options) {
+    return title ? slugify(title, options.locale) : untitledSlug(options);
+}

package/dist/esm/services/makeSlug.test.js

@@ -0,0 +1,10 @@
+import { makeSlug } from './makeSlug';
+describe('makeSlug', ()=>{
+    it('should return untitled slug if title is empty', ()=>{
+        expect(makeSlug('', {
+            locale: 'en',
+            isOptionalLocaleWithFallback: false,
+            createdAt: '2020-01-14T14:45:39.709Z'
+        })).toBe('untitled-entry-2020-01-14-at-14-45-39');
+    });
+});

package/dist/esm/services/slugify.js

@@ -0,0 +1,49 @@
+import getSlug from 'speakingurl';
+const CF_GENERATED_SLUG_MAX_LENGTH = 75;
+const languages = [
+    'ar',
+    'az',
+    'cs',
+    'de',
+    'dv',
+    'en',
+    'es',
+    'fa',
+    'fi',
+    'fr',
+    'ge',
+    'gr',
+    'hu',
+    'it',
+    'lt',
+    'lv',
+    'my',
+    'mk',
+    'nl',
+    'pl',
+    'pt',
+    'ro',
+    'ru',
+    'sk',
+    'sr',
+    'tr',
+    'uk',
+    'vn'
+];
+function supportedLanguage(locale) {
+    const prefix = locale.slice(0, 2).toLowerCase();
+    return languages[languages.indexOf(prefix)];
+}
+export function slugify(text, locale = 'en') {
+    return getSlug(text, {
+        separator: '-',
+        lang: supportedLanguage(locale) || 'en',
+        truncate: CF_GENERATED_SLUG_MAX_LENGTH + 1,
+        custom: {
+            "'": '',
+            '`': '',
+            '’': '',
+            '‘': ''
+        }
+    });
+}

package/dist/esm/services/slugify.test.js

@@ -0,0 +1,26 @@
+import { slugify } from './slugify';
+describe('slugify', ()=>{
+    const cases = [
+        [
+            'We ♥ $ & €',
+            'we-love-usd-and-eur'
+        ],
+        [
+            'it`s a Slug',
+            'its-a-slug'
+        ],
+        [
+            'it’S a slug',
+            'its-a-slug'
+        ],
+        [
+            "it's a SLUG",
+            'its-a-slug'
+        ]
+    ];
+    cases.forEach((input)=>{
+        it(`converts "${input[0]}" to "${input[1]}"`, ()=>{
+            expect(slugify(input[0])).toBe(input[1]);
+        });
+    });
+});

package/dist/esm/styles.js

@@ -0,0 +1,33 @@
+import tokens from '@contentful/f36-tokens';
+import { css } from 'emotion';
+export const validationRow = css({
+    display: 'flex',
+    flexDirection: 'row-reverse',
+    fontSize: tokens.fontSizeM,
+    marginTop: tokens.spacingXs,
+    color: tokens.gray700
+});
+export const inputContainer = css({
+    position: 'relative'
+});
+export const input = css({
+    paddingLeft: '40px'
+});
+export const icon = css({
+    position: 'absolute',
+    left: '10px',
+    top: '8px',
+    zIndex: 2,
+    width: '25px',
+    height: '25px',
+    fill: tokens.gray500
+});
+export const spinnerContainer = css({
+    position: 'absolute',
+    zIndex: 2,
+    right: '8px',
+    top: '8px'
+});
+export const uniqueValidationError = css({
+    marginTop: tokens.spacingS
+});

package/dist/{SlugEditor.d.ts → types/SlugEditor.d.ts}

@@ -1,24 +1,24 @@
-/// <reference types="react" />
-import { FieldExtensionSDK, FieldAPI } from '@contentful/app-sdk';
-export interface SlugEditorProps {
-    /**
-     * is the field disabled initially
-     */
-    isInitiallyDisabled: boolean;
-    baseSdk: FieldExtensionSDK;
-    /**
-     * sdk.field
-     */
-    field: FieldAPI;
-    parameters?: {
-        instance: {
-            trackingFieldId?: string;
-        };
-    };
-}
-export declare function SlugEditor(props: SlugEditorProps): JSX.Element;
-export declare namespace SlugEditor {
-    var defaultProps: {
-        isInitiallyDisabled: boolean;
-    };
-}
+import * as React from 'react';
+import { FieldExtensionSDK, FieldAPI } from '@contentful/app-sdk';
+export interface SlugEditorProps {
+    /**
+     * is the field disabled initially
+     */
+    isInitiallyDisabled: boolean;
+    baseSdk: FieldExtensionSDK;
+    /**
+     * sdk.field
+     */
+    field: FieldAPI;
+    parameters?: {
+        instance: {
+            trackingFieldId?: string;
+        };
+    };
+}
+export declare function SlugEditor(props: SlugEditorProps): React.JSX.Element;
+export declare namespace SlugEditor {
+    var defaultProps: {
+        isInitiallyDisabled: boolean;
+    };
+}

package/dist/types/SlugEditor.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/{SlugEditorField.d.ts → types/SlugEditorField.d.ts}

@@ -1,18 +1,18 @@
-/// <reference types="react" />
-interface SlugEditorFieldProps {
-    hasError: boolean;
-    isOptionalLocaleWithFallback: boolean;
-    isDisabled: boolean;
-    value: string | null | undefined;
-    locale: string;
-    titleValue: string | null | undefined;
-    createdAt: string;
-    setValue: (value: string | null | undefined) => void;
-    performUniqueCheck: (value: string) => Promise<boolean>;
-}
-export declare function SlugEditorFieldStatic(props: SlugEditorFieldProps & {
-    onChange?: Function;
-    onBlur?: Function;
-}): JSX.Element;
-export declare function SlugEditorField(props: SlugEditorFieldProps): JSX.Element;
-export {};
+import * as React from 'react';
+interface SlugEditorFieldProps {
+    hasError: boolean;
+    isOptionalLocaleWithFallback: boolean;
+    isDisabled: boolean;
+    value: string | null | undefined;
+    locale: string;
+    titleValue: string | null | undefined;
+    createdAt: string;
+    setValue: (value: string | null | undefined) => void;
+    performUniqueCheck: (value: string) => Promise<boolean>;
+}
+export declare function SlugEditorFieldStatic(props: SlugEditorFieldProps & {
+    onChange?: Function;
+    onBlur?: Function;
+}): React.JSX.Element;
+export declare function SlugEditorField(props: SlugEditorFieldProps): React.JSX.Element;
+export {};

package/dist/{TrackingFieldConnector.d.ts → types/TrackingFieldConnector.d.ts}

@@ -1,29 +1,29 @@
-import React from 'react';
-import { FieldExtensionSDK, FieldAPI } from '@contentful/app-sdk';
-declare type Nullable = null | undefined;
-interface TrackingFieldConnectorState<ValueType> {
-    titleValue: ValueType | Nullable;
-    isPublished: boolean;
-    isSame: boolean;
-}
-interface TrackingFieldConnectorProps<ValueType> {
-    sdk: FieldExtensionSDK;
-    field: FieldAPI;
-    defaultLocale: string;
-    trackingFieldId?: string;
-    isOptionalLocaleWithFallback: boolean;
-    children: (state: TrackingFieldConnectorState<ValueType>) => React.ReactNode;
-}
-export declare class TrackingFieldConnector<ValueType> extends React.Component<TrackingFieldConnectorProps<ValueType>, TrackingFieldConnectorState<ValueType>> {
-    static defaultProps: {
-        children: () => null;
-    };
-    constructor(props: TrackingFieldConnectorProps<ValueType>);
-    unsubscribeValue: Function | null;
-    unsubscribeLocalizedValue: Function | null;
-    unsubscribeSysChanges: Function | null;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): React.ReactNode;
-}
-export {};
+import * as React from 'react';
+import { FieldAPI, FieldExtensionSDK } from '@contentful/app-sdk';
+type Nullable = null | undefined;
+interface TrackingFieldConnectorState<ValueType> {
+    titleValue: ValueType | Nullable;
+    isPublished: boolean;
+    isSame: boolean;
+}
+interface TrackingFieldConnectorProps<ValueType> {
+    sdk: FieldExtensionSDK;
+    field: FieldAPI;
+    defaultLocale: string;
+    trackingFieldId?: string;
+    isOptionalLocaleWithFallback: boolean;
+    children: (state: TrackingFieldConnectorState<ValueType>) => React.ReactNode;
+}
+export declare class TrackingFieldConnector<ValueType> extends React.Component<TrackingFieldConnectorProps<ValueType>, TrackingFieldConnectorState<ValueType>> {
+    static defaultProps: {
+        children: () => null;
+    };
+    constructor(props: TrackingFieldConnectorProps<ValueType>);
+    unsubscribeValue: Function | null;
+    unsubscribeLocalizedValue: Function | null;
+    unsubscribeSysChanges: Function | null;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): React.ReactNode;
+}
+export {};

package/dist/{index.d.ts → types/index.d.ts}

@@ -1,3 +1,3 @@
-export { SlugEditor } from './SlugEditor';
-export { slugify } from './services/slugify';
-export { makeSlug } from './services/makeSlug';
+export { SlugEditor } from './SlugEditor';
+export { slugify } from './services/slugify';
+export { makeSlug } from './services/makeSlug';

package/dist/{services → types/services}/makeSlug.d.ts

@@ -1,8 +1,8 @@
-declare type MakeSlugOptions = {
-    locale: string;
-    isOptionalLocaleWithFallback: boolean;
-    createdAt: string;
-};
-export declare function formatUtcDate(date: Date): string;
-export declare function makeSlug(title: string | null | undefined, options: MakeSlugOptions): string;
-export {};
+type MakeSlugOptions = {
+    locale: string;
+    isOptionalLocaleWithFallback: boolean;
+    createdAt: string;
+};
+export declare function formatUtcDate(date: Date): string;
+export declare function makeSlug(title: string | null | undefined, options: MakeSlugOptions): string;
+export {};

package/dist/types/services/makeSlug.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/{services → types/services}/slugify.d.ts

@@ -1,12 +1,12 @@
-/**
- * Returns the slug for a given string and locale.
- * If the locale belongs to a language supported by SpeakingURL, it
- * is used as the symbol language. Otherwise, the symbol language
- * is english.
- * Slug suggestions are limited to 75 characters.
- *
- * @param {string} text To be turned into a slug.
- * @param {string?} locale
- * @returns {string} Slug for provided text.
- */
-export declare function slugify(text: string, locale?: string): string;
+/**
+ * Returns the slug for a given string and locale.
+ * If the locale belongs to a language supported by SpeakingURL, it
+ * is used as the symbol language. Otherwise, the symbol language
+ * is english.
+ * Slug suggestions are limited to 75 characters.
+ *
+ * @param {string} text To be turned into a slug.
+ * @param {string?} locale
+ * @returns {string} Slug for provided text.
+ */
+export declare function slugify(text: string, locale?: string): string;

package/dist/types/services/slugify.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/{styles.d.ts → types/styles.d.ts}

@@ -1,6 +1,6 @@
-export declare const validationRow: string;
-export declare const inputContainer: string;
-export declare const input: string;
-export declare const icon: string;
-export declare const spinnerContainer: string;
-export declare const uniqueValidationError: string;
+export declare const validationRow: string;
+export declare const inputContainer: string;
+export declare const input: string;
+export declare const icon: string;
+export declare const spinnerContainer: string;
+export declare const uniqueValidationError: string;

package/package.json

@@ -1,9 +1,17 @@
 {
   "name": "@contentful/field-editor-slug",
-  "version": "1.2.0",
-  "main": "dist/index.js",
-  "module": "dist/field-editor-slug.esm.js",
-  "typings": "dist/index.d.ts",
+  "version": "1.3.1",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/cjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "dist"
   ],
@@ -14,17 +22,23 @@
     "url": "https://github.com/contentful/field-editors"
   },
   "scripts": {
-    "watch": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --env=jsdom --watch",
-    "test:ci": "tsdx test --env=jsdom --ci",
+    "watch": "yarn concurrently \"yarn:watch:*\"",
+    "watch:cjs": "yarn build:cjs -w",
+    "watch:esm": "yarn build:esm -w",
+    "watch:types": "yarn build:types --watch",
+    "build": "yarn build:types && yarn build:cjs && yarn build:esm",
+    "build:types": "tsc --outDir dist/types --emitDeclarationOnly",
+    "build:cjs": "swc src --config-file ../../.swcrc -d dist/cjs -C module.type=commonjs",
+    "build:esm": "swc src --config-file ../../.swcrc -d dist/esm",
+    "test": "jest --watch",
+    "test:ci": "jest --ci",
     "tsc": "tsc -p ./ --noEmit"
   },
   "dependencies": {
     "@contentful/f36-components": "^4.0.27",
     "@contentful/f36-icons": "^4.1.0",
     "@contentful/f36-tokens": "^4.0.0",
-    "@contentful/field-editor-shared": "^1.2.0",
+    "@contentful/field-editor-shared": "^1.3.0",
     "@types/speakingurl": "^13.0.2",
     "emotion": "^10.0.17",
     "lodash": "^4.17.15",
@@ -34,11 +48,11 @@
   },
   "devDependencies": {
     "@contentful/app-sdk": "^4.2.0",
-    "@contentful/field-editor-test-utils": "^1.3.0"
+    "@contentful/field-editor-test-utils": "^1.4.0"
   },
   "peerDependencies": {
     "@contentful/app-sdk": "^4.2.0",
     "react": ">=16.8.0"
   },
-  "gitHead": "de7e74e3485dd69c240cfe9c545e6e50e41fb295"
+  "gitHead": "83b651f1638ad6bab53565479e76b8d29b86af3a"
 }