@strapi/design-system 1.19.0-typescript.0 → 2.0.0-beta.0

package/dist/JSONInput/JSONInput.js

@@ -1,150 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const langJson = require('@codemirror/lang-json');
-const reactCodemirror = require('@uiw/react-codemirror');
-const styled = require('styled-components');
-const decorationExtension = require('./utils/decorationExtension.js');
-const useComposeRefs = require('../hooks/useComposeRefs.js');
-const Field = require('../Field/Field.js');
-const Flex = require('../Flex/Flex.js');
-const FieldLabel = require('../Field/FieldLabel.js');
-const FieldError = require('../Field/FieldError.js');
-const FieldHint = require('../Field/FieldHint.js');
-const utils = require('../themes/utils.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const JSONInput = React.forwardRef(({ label, error, hint, labelAction, value = '', required = false, disabled = false, onChange = () => null, ...boxProps }, forwardedRef) => {
-    const editor = React.useRef();
-    const editorState = React.useRef();
-    const editorView = React.useRef();
-    const hasError = Boolean(error);
-    /**
-     * Determines the line to highlight when lintJSON finds an error via jsonParseLinter()
-     */
-    const highglightErrorAtLine = (lineNumber) => {
-        const doc = editorState.current?.doc;
-        if (doc) {
-            const { text, to: lineEnd } = doc.line(lineNumber);
-            const lineStart = lineEnd - text.trimStart().length;
-            if (lineEnd > lineStart) {
-                editorView.current?.dispatch({
-                    effects: decorationExtension.addMarks.of([decorationExtension.lineHighlightMark.range(lineStart, lineEnd)]),
-                });
-            }
-        }
-    };
-    const clearErrorHighlight = () => {
-        const doc = editorState.current?.doc;
-        if (doc) {
-            const docEnd = doc.length || 0;
-            editorView.current?.dispatch({
-                effects: decorationExtension.filterMarks.of((from, to) => to <= 0 || from >= docEnd),
-            });
-        }
-    };
-    /**
-     * Checks code editor for valid json input and then highlights any errors
-     */
-    const lintJSON = ({ state, view }) => {
-        editorView.current = view;
-        editorState.current = state;
-        clearErrorHighlight();
-        // Function calls json.parse and returns error message + position
-        const lintJSONForErrrors = langJson.jsonParseLinter();
-        const lintErrors = lintJSONForErrrors(view);
-        if (lintErrors.length) {
-            highglightErrorAtLine(state.doc.lineAt(lintErrors[0].from).number);
-        }
-    };
-    const onCodeMirrorChange = (currentValue, viewUpdate) => {
-        lintJSON(viewUpdate);
-        // Call the parent's onChange handler
-        onChange(currentValue);
-    };
-    const onCreateEditor = (view, state) => {
-        editorView.current = view;
-        editorState.current = state;
-        // Lint the JSON in case the initial value is invalid
-        lintJSON({ view, state });
-    };
-    const { setContainer, view } = reactCodemirror.useCodeMirror({
-        value,
-        onCreateEditor,
-        container: editor.current,
-        editable: !disabled,
-        extensions: [langJson.json(), decorationExtension.markField],
-        onChange: onCodeMirrorChange,
-        theme: 'dark',
-        basicSetup: {
-            lineNumbers: true,
-            bracketMatching: true,
-            closeBrackets: true,
-            indentOnInput: true,
-            syntaxHighlighting: true,
-            highlightSelectionMatches: true,
-            tabSize: 2,
-        },
-    });
-    const focusInput = () => {
-        if (!disabled && view) {
-            view.focus();
-        }
-    };
-    const composedRefs = useComposeRefs.useComposedRefs(editor, setContainer);
-    React.useImperativeHandle(forwardedRef, () => ({
-        ...view?.dom,
-        focus() {
-            if (view) {
-                view.focus();
-            }
-        },
-        scrollIntoView(args) {
-            if (view) {
-                view.dom.scrollIntoView(args);
-            }
-        },
-    }), [view]);
-    return (jsxRuntime.jsx(Field.Field, { error: error, hint: hint, required: required, children: jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [label && (jsxRuntime.jsx(FieldLabel.FieldLabel, { onClick: focusInput, action: labelAction, children: label })), jsxRuntime.jsx(JSONInputContainer, { ref: composedRefs, hasError: hasError, alignItems: "stretch", fontSize: 2, hasRadius: true, ...boxProps }), jsxRuntime.jsx(FieldError.FieldError, {}), jsxRuntime.jsx(FieldHint.FieldHint, {})] }) }));
-});
-const JSONInputContainer = styled__default.default(Flex.Flex) `
-  line-height: ${({ theme }) => theme.lineHeights[2]};
-
-  .cm-editor {
-    /** 
-     * Hard coded since the color is the same between themes,
-     * theme.colors.neutral800 changes between themes 
-     */
-    background-color: #32324d;
-    width: 100%;
-    outline: none;
-  }
-
-  .cm-scroller {
-    border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger600 : theme.colors.neutral200)};
-    /* inputFocusStyle will receive hasError prop */
-    ${utils.inputFocusStyle()}
-  }
-
-  .cm-editor,
-  .cm-scroller {
-    border-radius: ${({ theme }) => theme.borderRadius};
-  }
-
-  .cm-gutters,
-  .cm-activeLineGutter {
-    /** 
-     * Hard coded since the color is the same between themes,
-     * theme.colors.neutral700 changes between themes 
-     */
-    background-color: #4a4a6a;
-  }
-`;
-
-exports.JSONInput = JSONInput;

package/dist/JSONInput/JSONInput.mjs

@@ -1,142 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useRef, useImperativeHandle } from 'react';
-import { json, jsonParseLinter } from '@codemirror/lang-json';
-import { useCodeMirror } from '@uiw/react-codemirror';
-import styled from 'styled-components';
-import { markField, addMarks, lineHighlightMark, filterMarks } from './utils/decorationExtension.mjs';
-import { useComposedRefs } from '../hooks/useComposeRefs.mjs';
-import { Field } from '../Field/Field.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-import { FieldLabel } from '../Field/FieldLabel.mjs';
-import { FieldError } from '../Field/FieldError.mjs';
-import { FieldHint } from '../Field/FieldHint.mjs';
-import { inputFocusStyle } from '../themes/utils.mjs';
-
-const JSONInput = forwardRef(({ label, error, hint, labelAction, value = '', required = false, disabled = false, onChange = () => null, ...boxProps }, forwardedRef) => {
-    const editor = useRef();
-    const editorState = useRef();
-    const editorView = useRef();
-    const hasError = Boolean(error);
-    /**
-     * Determines the line to highlight when lintJSON finds an error via jsonParseLinter()
-     */
-    const highglightErrorAtLine = (lineNumber) => {
-        const doc = editorState.current?.doc;
-        if (doc) {
-            const { text, to: lineEnd } = doc.line(lineNumber);
-            const lineStart = lineEnd - text.trimStart().length;
-            if (lineEnd > lineStart) {
-                editorView.current?.dispatch({
-                    effects: addMarks.of([lineHighlightMark.range(lineStart, lineEnd)]),
-                });
-            }
-        }
-    };
-    const clearErrorHighlight = () => {
-        const doc = editorState.current?.doc;
-        if (doc) {
-            const docEnd = doc.length || 0;
-            editorView.current?.dispatch({
-                effects: filterMarks.of((from, to) => to <= 0 || from >= docEnd),
-            });
-        }
-    };
-    /**
-     * Checks code editor for valid json input and then highlights any errors
-     */
-    const lintJSON = ({ state, view }) => {
-        editorView.current = view;
-        editorState.current = state;
-        clearErrorHighlight();
-        // Function calls json.parse and returns error message + position
-        const lintJSONForErrrors = jsonParseLinter();
-        const lintErrors = lintJSONForErrrors(view);
-        if (lintErrors.length) {
-            highglightErrorAtLine(state.doc.lineAt(lintErrors[0].from).number);
-        }
-    };
-    const onCodeMirrorChange = (currentValue, viewUpdate) => {
-        lintJSON(viewUpdate);
-        // Call the parent's onChange handler
-        onChange(currentValue);
-    };
-    const onCreateEditor = (view, state) => {
-        editorView.current = view;
-        editorState.current = state;
-        // Lint the JSON in case the initial value is invalid
-        lintJSON({ view, state });
-    };
-    const { setContainer, view } = useCodeMirror({
-        value,
-        onCreateEditor,
-        container: editor.current,
-        editable: !disabled,
-        extensions: [json(), markField],
-        onChange: onCodeMirrorChange,
-        theme: 'dark',
-        basicSetup: {
-            lineNumbers: true,
-            bracketMatching: true,
-            closeBrackets: true,
-            indentOnInput: true,
-            syntaxHighlighting: true,
-            highlightSelectionMatches: true,
-            tabSize: 2,
-        },
-    });
-    const focusInput = () => {
-        if (!disabled && view) {
-            view.focus();
-        }
-    };
-    const composedRefs = useComposedRefs(editor, setContainer);
-    useImperativeHandle(forwardedRef, () => ({
-        ...view?.dom,
-        focus() {
-            if (view) {
-                view.focus();
-            }
-        },
-        scrollIntoView(args) {
-            if (view) {
-                view.dom.scrollIntoView(args);
-            }
-        },
-    }), [view]);
-    return (jsx(Field, { error: error, hint: hint, required: required, children: jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [label && (jsx(FieldLabel, { onClick: focusInput, action: labelAction, children: label })), jsx(JSONInputContainer, { ref: composedRefs, hasError: hasError, alignItems: "stretch", fontSize: 2, hasRadius: true, ...boxProps }), jsx(FieldError, {}), jsx(FieldHint, {})] }) }));
-});
-const JSONInputContainer = styled(Flex) `
-  line-height: ${({ theme }) => theme.lineHeights[2]};
-
-  .cm-editor {
-    /** 
-     * Hard coded since the color is the same between themes,
-     * theme.colors.neutral800 changes between themes 
-     */
-    background-color: #32324d;
-    width: 100%;
-    outline: none;
-  }
-
-  .cm-scroller {
-    border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger600 : theme.colors.neutral200)};
-    /* inputFocusStyle will receive hasError prop */
-    ${inputFocusStyle()}
-  }
-
-  .cm-editor,
-  .cm-scroller {
-    border-radius: ${({ theme }) => theme.borderRadius};
-  }
-
-  .cm-gutters,
-  .cm-activeLineGutter {
-    /** 
-     * Hard coded since the color is the same between themes,
-     * theme.colors.neutral700 changes between themes 
-     */
-    background-color: #4a4a6a;
-  }
-`;
-
-export { JSONInput };

package/dist/JSONInput/__tests__/JSONInput.spec.d.ts

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

package/dist/JSONInput/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const JSONInput = require('./JSONInput.js');
-
-
-
-exports.JSONInput = JSONInput.JSONInput;

package/dist/JSONInput/index.mjs

@@ -1 +0,0 @@
-export { JSONInput } from './JSONInput.mjs';

package/dist/JSONInput/utils/decorationExtension.js

@@ -1,43 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const state = require('@codemirror/state');
-const view = require('@codemirror/view');
-
-// Effects can be attached to transactions to communicate with the extension
-const addMarks = state.StateEffect.define();
-const filterMarks = state.StateEffect.define();
-const lineHighlightMark = view.Decoration.mark({
-    attributes: { style: 'background-color: yellow; color: black' },
-});
-const markField = state.StateField.define({
-    // Start with an empty set of decorations
-    create() {
-        return view.Decoration.none;
-    },
-    // This is called whenever the editor updates it computes the new set
-    update(value, transaction) {
-        // Move the decorations to account for document changes
-        value = value.map(transaction.changes);
-        transaction.effects.forEach((effect) => {
-            if (effect.is(addMarks)) {
-                value = value.update({
-                    add: effect.value,
-                    sort: true,
-                });
-            }
-            else if (effect.is(filterMarks)) {
-                value = value.update({ filter: effect.value });
-            }
-        });
-        return value;
-    },
-    // Indicate that this field provides a set of decorations
-    provide: (f) => view.EditorView.decorations.from(f),
-});
-
-exports.addMarks = addMarks;
-exports.filterMarks = filterMarks;
-exports.lineHighlightMark = lineHighlightMark;
-exports.markField = markField;

package/dist/JSONInput/utils/decorationExtension.mjs

@@ -1,36 +0,0 @@
-import { StateEffect, StateField } from '@codemirror/state';
-import { Decoration, EditorView } from '@codemirror/view';
-
-// Effects can be attached to transactions to communicate with the extension
-const addMarks = StateEffect.define();
-const filterMarks = StateEffect.define();
-const lineHighlightMark = Decoration.mark({
-    attributes: { style: 'background-color: yellow; color: black' },
-});
-const markField = StateField.define({
-    // Start with an empty set of decorations
-    create() {
-        return Decoration.none;
-    },
-    // This is called whenever the editor updates it computes the new set
-    update(value, transaction) {
-        // Move the decorations to account for document changes
-        value = value.map(transaction.changes);
-        transaction.effects.forEach((effect) => {
-            if (effect.is(addMarks)) {
-                value = value.update({
-                    add: effect.value,
-                    sort: true,
-                });
-            }
-            else if (effect.is(filterMarks)) {
-                value = value.update({ filter: effect.value });
-            }
-        });
-        return value;
-    },
-    // Indicate that this field provides a set of decorations
-    provide: (f) => EditorView.decorations.from(f),
-});
-
-export { addMarks, filterMarks, lineHighlightMark, markField };

package/dist/KeyboardNavigable/KeyboardNavigable.js

@@ -1,75 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const keyboardKeys = require('../helpers/keyboardKeys.js');
-const Box = require('../Box/Box.js');
-
-const KeyboardNavigable = ({ tagName, attributeName = '', ...props }) => {
-    const isValidFocusedElement = () => {
-        const focused = document.activeElement;
-        if (!focused) {
-            return false;
-        }
-        if (tagName) {
-            return focused.tagName.toLowerCase() === tagName;
-        }
-        return focused.hasAttribute(attributeName);
-    };
-    const queryElement = (parentEl) => {
-        if (tagName) {
-            return parentEl.querySelectorAll(tagName);
-        }
-        return parentEl.querySelectorAll(`[${attributeName}]`);
-    };
-    const handleKeyDown = (e) => {
-        switch (e.key) {
-            case keyboardKeys.KeyboardKeys.RIGHT:
-            case keyboardKeys.KeyboardKeys.DOWN: {
-                if (isValidFocusedElement()) {
-                    e.preventDefault();
-                    const focused = document.activeElement;
-                    const allElements = [...queryElement(e.currentTarget)];
-                    const focusedIndex = allElements.findIndex((node) => node === focused);
-                    const nextIndex = focusedIndex + 1 < allElements.length ? focusedIndex + 1 : 0;
-                    allElements[nextIndex].focus();
-                }
-                break;
-            }
-            case keyboardKeys.KeyboardKeys.LEFT:
-            case keyboardKeys.KeyboardKeys.UP: {
-                if (isValidFocusedElement()) {
-                    e.preventDefault();
-                    const focused = document.activeElement;
-                    const allElements = [...queryElement(e.currentTarget)];
-                    const focusedIndex = allElements.findIndex((node) => node === focused);
-                    const nextIndex = focusedIndex - 1 > -1 ? focusedIndex - 1 : allElements.length - 1;
-                    allElements[nextIndex].focus();
-                }
-                break;
-            }
-            case keyboardKeys.KeyboardKeys.HOME: {
-                if (isValidFocusedElement()) {
-                    e.preventDefault();
-                    const allElements = queryElement(e.currentTarget);
-                    const focusElement = allElements.item(0);
-                    focusElement.focus();
-                }
-                break;
-            }
-            case keyboardKeys.KeyboardKeys.END: {
-                if (isValidFocusedElement()) {
-                    e.preventDefault();
-                    const allElements = queryElement(e.currentTarget);
-                    const focusElement = allElements.item(allElements.length - 1);
-                    focusElement.focus();
-                }
-                break;
-            }
-        }
-    };
-    return jsxRuntime.jsx(Box.Box, { onKeyDown: handleKeyDown, ...props });
-};
-
-exports.KeyboardNavigable = KeyboardNavigable;

package/dist/KeyboardNavigable/KeyboardNavigable.mjs

@@ -1,71 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { KeyboardKeys } from '../helpers/keyboardKeys.mjs';
-import { Box } from '../Box/Box.mjs';
-
-const KeyboardNavigable = ({ tagName, attributeName = '', ...props }) => {
-    const isValidFocusedElement = () => {
-        const focused = document.activeElement;
-        if (!focused) {
-            return false;
-        }
-        if (tagName) {
-            return focused.tagName.toLowerCase() === tagName;
-        }
-        return focused.hasAttribute(attributeName);
-    };
-    const queryElement = (parentEl) => {
-        if (tagName) {
-            return parentEl.querySelectorAll(tagName);
-        }
-        return parentEl.querySelectorAll(`[${attributeName}]`);
-    };
-    const handleKeyDown = (e) => {
-        switch (e.key) {
-            case KeyboardKeys.RIGHT:
-            case KeyboardKeys.DOWN: {
-                if (isValidFocusedElement()) {
-                    e.preventDefault();
-                    const focused = document.activeElement;
-                    const allElements = [...queryElement(e.currentTarget)];
-                    const focusedIndex = allElements.findIndex((node) => node === focused);
-                    const nextIndex = focusedIndex + 1 < allElements.length ? focusedIndex + 1 : 0;
-                    allElements[nextIndex].focus();
-                }
-                break;
-            }
-            case KeyboardKeys.LEFT:
-            case KeyboardKeys.UP: {
-                if (isValidFocusedElement()) {
-                    e.preventDefault();
-                    const focused = document.activeElement;
-                    const allElements = [...queryElement(e.currentTarget)];
-                    const focusedIndex = allElements.findIndex((node) => node === focused);
-                    const nextIndex = focusedIndex - 1 > -1 ? focusedIndex - 1 : allElements.length - 1;
-                    allElements[nextIndex].focus();
-                }
-                break;
-            }
-            case KeyboardKeys.HOME: {
-                if (isValidFocusedElement()) {
-                    e.preventDefault();
-                    const allElements = queryElement(e.currentTarget);
-                    const focusElement = allElements.item(0);
-                    focusElement.focus();
-                }
-                break;
-            }
-            case KeyboardKeys.END: {
-                if (isValidFocusedElement()) {
-                    e.preventDefault();
-                    const allElements = queryElement(e.currentTarget);
-                    const focusElement = allElements.item(allElements.length - 1);
-                    focusElement.focus();
-                }
-                break;
-            }
-        }
-    };
-    return jsx(Box, { onKeyDown: handleKeyDown, ...props });
-};
-
-export { KeyboardNavigable };

package/dist/KeyboardNavigable/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const KeyboardNavigable = require('./KeyboardNavigable.js');
-
-
-
-exports.KeyboardNavigable = KeyboardNavigable.KeyboardNavigable;

package/dist/KeyboardNavigable/index.mjs

@@ -1 +0,0 @@
-export { KeyboardNavigable } from './KeyboardNavigable.mjs';

package/dist/Layout/ActionLayout.js

@@ -1,15 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const Flex = require('../Flex/Flex.js');
-
-const ActionLayout = ({ startActions, endActions }) => {
-    if (!startActions && !endActions) {
-        return null;
-    }
-    return (jsxRuntime.jsxs(Flex.Flex, { justifyContent: "space-between", alignItems: "flex-start", paddingBottom: 4, paddingLeft: 10, paddingRight: 10, children: [jsxRuntime.jsx(Flex.Flex, { gap: 2, wrap: "wrap", children: startActions }), jsxRuntime.jsx(Flex.Flex, { gap: 2, shrink: 0, wrap: "wrap", children: endActions })] }));
-};
-
-exports.ActionLayout = ActionLayout;

package/dist/Layout/ActionLayout.mjs

@@ -1,11 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Flex } from '../Flex/Flex.mjs';
-
-const ActionLayout = ({ startActions, endActions }) => {
-    if (!startActions && !endActions) {
-        return null;
-    }
-    return (jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", paddingBottom: 4, paddingLeft: 10, paddingRight: 10, children: [jsx(Flex, { gap: 2, wrap: "wrap", children: startActions }), jsx(Flex, { gap: 2, shrink: 0, wrap: "wrap", children: endActions })] }));
-};
-
-export { ActionLayout };

package/dist/Layout/ContentLayout.js

@@ -1,12 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const Box = require('../Box/Box.js');
-
-const ContentLayout = ({ children }) => {
-    return (jsxRuntime.jsx(Box.Box, { paddingLeft: 10, paddingRight: 10, children: children }));
-};
-
-exports.ContentLayout = ContentLayout;

package/dist/Layout/ContentLayout.mjs

@@ -1,8 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { Box } from '../Box/Box.mjs';
-
-const ContentLayout = ({ children }) => {
-    return (jsx(Box, { paddingLeft: 10, paddingRight: 10, children: children }));
-};
-
-export { ContentLayout };

package/dist/Layout/GridLayout.js

@@ -1,17 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const styled = require('styled-components');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const GridLayout = styled__default.default.div `
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  grid-gap: ${({ theme }) => theme.spaces[4]};
-`;
-
-exports.GridLayout = GridLayout;

package/dist/Layout/GridLayout.mjs

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-const GridLayout = styled.div `
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  grid-gap: ${({ theme }) => theme.spaces[4]};
-`;
-
-export { GridLayout };