datocms-react-ui 0.2.0-alpha.60 → 0.2.0-y.0

package/dist/types/Button/index.d.ts

@@ -1,10 +1,13 @@
-import { ReactNode } from 'react';
+import React, { CSSProperties, MouseEventHandler, ReactNode } from 'react';
 export declare type ButtonProps = {
     children: ReactNode;
+    type: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
     className?: string;
     disabled?: boolean;
+    onClick?: MouseEventHandler;
     buttonType?: 'primary' | 'muted' | 'negative';
     buttonSize?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
     fullWidth?: boolean;
+    style?: CSSProperties;
 };
-export declare function Button({ children, className, disabled, buttonType, buttonSize, fullWidth, ...other }: ButtonProps): JSX.Element;
+export declare function Button({ children, className, disabled, buttonType, buttonSize, fullWidth, onClick, style, type, }: ButtonProps): JSX.Element;

package/dist/types/FieldError/index.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+declare type FieldErrorProps = {
+    children: ReactNode;
+};
+export declare function FieldError({ children }: FieldErrorProps): JSX.Element;
+export {};

package/dist/types/FieldGroup/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface FieldGroupProps {
+    className?: string;
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}
+export declare function FieldGroup({ children, className, ...otherProps }: FieldGroupProps): JSX.Element;

package/dist/types/FieldHint/index.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+declare type FieldHintProps = {
+    children: ReactNode;
+};
+export declare function FieldHint({ children }: FieldHintProps): JSX.Element;
+export {};

package/dist/types/Form/index.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, FormEventHandler, ReactNode } from 'react';
+export interface FormProps {
+    onSubmit?: FormEventHandler;
+    spacing?: 'condensed' | 'default';
+    style?: CSSProperties;
+    className?: string;
+    children: ReactNode;
+}
+export declare const Form: ({ children, className, onSubmit, spacing, ...otherProps }: FormProps) => JSX.Element;

package/dist/types/FormLabel/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface FormLabelProps {
+    htmlFor: string;
+    children: React.ReactNode;
+    className?: string;
+    required?: boolean;
+    error?: boolean;
+    code?: React.ReactNode;
+}
+export declare const FormLabel: ({ children, className, htmlFor, code, required, error, ...otherProps }: FormLabelProps) => JSX.Element;

package/dist/types/SwitchField/index.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { FormLabelProps, SwitchInputProps } from '..';
+declare type SwitchFieldProps = {
+    id: string;
+    name: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    formLabelProps?: FormLabelProps;
+    value: SwitchInputProps['value'];
+    onChange: SwitchInputProps['onChange'];
+    switchInputProps?: SwitchInputProps;
+};
+export declare function SwitchField({ id, name, label, hint, error, required, formLabelProps, value, onChange, switchInputProps, }: SwitchFieldProps): JSX.Element;
+export {};

package/dist/types/SwitchInput/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export declare type SwitchInputChangeEventHandler = (newValue: boolean, event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+export interface SwitchInputProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    name: string;
+    disabled?: boolean;
+    onChange: SwitchInputChangeEventHandler;
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+    value: boolean;
+}
+export declare function SwitchInput({ className, value, disabled, onClick, onChange, onKeyDown, ...restProps }: SwitchInputProps): JSX.Element;

package/dist/types/TextField/index.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { FormLabelProps, TextInputProps } from '..';
+declare type TextFieldProps = {
+    id: string;
+    name: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    placeholder?: string;
+    error?: ReactNode;
+    required?: boolean;
+    formLabelProps?: FormLabelProps;
+    value: TextInputProps['value'];
+    onChange: TextInputProps['onChange'];
+    textInputProps?: TextInputProps;
+};
+export declare function TextField({ id, name, label, hint, error, required, placeholder, formLabelProps, value, onChange, textInputProps, }: TextFieldProps): JSX.Element;
+export {};

package/dist/types/TextInput/index.d.ts

@@ -1,9 +1,14 @@
-/// <reference types="react" />
+import React, { RefObject } from 'react';
+export declare type TextInputChangeEventHandler = (newValue: string, event: React.ChangeEvent<HTMLInputElement>) => void;
 export declare type TextInputProps = {
+    type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'url' | 'date' | 'time';
+    name?: string;
+    labelText?: string;
+    id?: string;
     className?: string;
-    disabled?: boolean;
-    textInputType?: 'primary' | 'muted' | 'negative';
-    textInputSize?: 'xxs' | 'xs' | 's' | 'l' | 'xl';
-    fullWidth?: boolean;
-};
-export declare function TextInput({ className, disabled, textInputType, textInputSize, fullWidth, ...other }: TextInputProps): JSX.Element;
+    onChange?: TextInputChangeEventHandler;
+    value: string;
+    inputRef?: RefObject<HTMLInputElement>;
+    error?: boolean;
+} & JSX.IntrinsicElements['input'];
+export declare const TextInput: ({ className, disabled, error, id, inputRef, maxLength, name, labelText, onBlur, onChange, placeholder, required, type, value, ...otherProps }: TextInputProps) => JSX.Element;

package/dist/types/index.d.ts

@@ -1,3 +1,11 @@
 export * from './Button';
-export * from './TextInput';
 export * from './Canvas';
+export * from './FieldError';
+export * from './FieldGroup';
+export * from './FieldHint';
+export * from './Form';
+export * from './FormLabel';
+export * from './SwitchField';
+export * from './SwitchInput';
+export * from './TextField';
+export * from './TextInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datocms-react-ui",
-  "version": "0.2.0-alpha.60",
+  "version": "0.2.0-y.0",
   "description": "React components to use inside DatoCMS plugins",
   "keywords": [
     "datocms",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "classnames": "^2.3.1",
-    "datocms-plugins-sdk": "^0.2.0-alpha.60"
+    "datocms-plugins-sdk": "^0.2.0-y.0"
   },
   "peerDependencies": {
     "react": ">= 17.0.2"
@@ -48,11 +48,12 @@
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
     "cssnano": "^5.0.11",
+    "postcss-calc": "^8.0.0",
     "postcss-cli": "^9.0.2",
     "postcss-import": "^14.0.2",
     "postcss-modules": "^4.2.2",
     "postcss-nested": "^5.0.6",
     "typedoc": "^0.22.8"
   },
-  "gitHead": "f911fed233c5424c299773db862afea682e1f2d9"
+  "gitHead": "b12cac5d076b2c49a48db8bcc4895443f84a7b56"
 }

package/styles.css

@@ -1 +1 @@
-@import "https://use.typekit.net/iok7hkr.css";._button_3nqqf_1{-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:1px solid transparent;border-radius:4px;box-sizing:border-box;color:$base-body-color;cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;line-height:inherit;opacity:1;text-decoration:none;transition:all $material-ease .3s;vertical-align:middle;white-space:nowrap}._button_3nqqf_1:focus,._button_3nqqf_1:hover{opacity:.8}._button_3nqqf_1:active{opacity:.7}._disabled_3nqqf_30{background-color:var(--lightBgColor);border-width:0;color:rgba(0,0,0,.2);cursor:not-allowed}._buttonType-muted_3nqqf_37{background-color:var(--lightColor);color:var(--accentColor)}._buttonType-primary_3nqqf_42{background-color:var(--accentColor);border-width:0;color:#fff}._buttonType-primary_3nqqf_42:active,._buttonType-primary_3nqqf_42:focus,._buttonType-primary_3nqqf_42:hover{color:#fff}._buttonType-primary_3nqqf_42._disabled_3nqqf_30{background-color:var(--disabledColor);color:rgba(0,0,0,.2)}._buttonType-primary_3nqqf_42._disabled_3nqqf_30:active,._buttonType-primary_3nqqf_42._disabled_3nqqf_30:focus,._buttonType-primary_3nqqf_42._disabled_3nqqf_30:hover{color:rgba(0,0,0,.2)}._buttonType-negative_3nqqf_64{border-width:0}._buttonType-negative_3nqqf_64,._buttonType-negative_3nqqf_64:active,._buttonType-negative_3nqqf_64:focus,._buttonType-negative_3nqqf_64:hover{background-color:var(--alertColor);color:#fff}._buttonType-negative_3nqqf_64._disabled_3nqqf_30{background-color:var(--disabledColor);color:rgba(0,0,0,.2)}._buttonSize-xxs_3nqqf_82{font-size:1em;padding:.5em .8em}._buttonSize-xs_3nqqf_87{font-size:1em;padding:.6em .8em}._buttonSize-s_3nqqf_92{font-size:1em}._buttonSize-m_3nqqf_96{font-size:1.1em;padding:.7em 1em}._buttonSize-l_3nqqf_101{font-size:1.2em}._buttonSize-xl_3nqqf_105{font-size:1.2em;padding:1em}._fullWidth_3nqqf_110{display:block;text-align:center;width:100%}._canvas_vajvv_1{--baseBodyColor:#34363a;--lightBodyColor:#848484;--placeholderBodyColor:#c6c6c6;--lightBgColor:#f5f5f5;--disabledColor:#ededed;--borderColor:#f0f0f0;--alertColor:#ff5e49;--warningColor:gold;--noticeColor:#46d700;--warningBgColor:#ffffe5;--enterpriseColor:#eca227;--addColor:#4cb06d;--removeColor:#eb576a;--baseFontFamily:"colfax-web","Roboto","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;--monospacedFontFamily:"Roboto Mono","Menlo","Bitstream Vera Sans Mono",Consolas,Courier,monospace;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;color:var(--baseBodyColor);font-family:var(--baseFontFamily);font-size:.9375rem;line-height:1.5}._textInput_18slj_1{-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:1px solid transparent;border-radius:4px;box-sizing:border-box;color:$base-body-color;cursor:pointer;display:inline-block;font-family:inherit;font-size:1.1em;font-weight:500;line-height:inherit;opacity:1;padding:.7em 1em;text-decoration:none;transition:all $material-ease .3s;vertical-align:middle;white-space:nowrap}._textInput_18slj_1:focus,._textInput_18slj_1:hover{opacity:.8}._textInput_18slj_1:active{opacity:.7}._disabled_18slj_32{background-color:var(--lightBgColor);border-width:0;color:rgba(0,0,0,.2);cursor:not-allowed}._textInputType-muted_18slj_39{background-color:var(--lightColor);color:var(--accentColor)}._textInputType-primary_18slj_44{background-color:var(--accentColor);border-width:0;color:#fff}._textInputType-primary_18slj_44:active,._textInputType-primary_18slj_44:focus,._textInputType-primary_18slj_44:hover{color:#fff}._textInputType-primary_18slj_44._disabled_18slj_32{background-color:var(--disabledColor);color:rgba(0,0,0,.2)}._textInputType-primary_18slj_44._disabled_18slj_32:active,._textInputType-primary_18slj_44._disabled_18slj_32:focus,._textInputType-primary_18slj_44._disabled_18slj_32:hover{color:rgba(0,0,0,.2)}._textInputType-negative_18slj_67{border-width:0}._textInputType-negative_18slj_67,._textInputType-negative_18slj_67:active,._textInputType-negative_18slj_67:focus,._textInputType-negative_18slj_67:hover{background-color:var(--alertColor);color:#fff}._textInputType-negative_18slj_67._disabled_18slj_32{background-color:var(--disabledColor);color:rgba(0,0,0,.2)}._textInputSize-xxs_18slj_85{font-size:1em;padding:.5em .8em}._textInputSize-xs_18slj_90{font-size:1em;padding:.6em .8em}._textInputSize-s_18slj_95{font-size:1em}._textInputSize-l_18slj_99{font-size:1.2em}._textInputSize-xl_18slj_103{font-size:1.2em;padding:1em}._fullWidth_18slj_108{display:block;text-align:center;width:100%}html{font-size:16px;height:auto}body,html{margin:0;padding:0}
+@import "https://use.typekit.net/iok7hkr.css";._button_p1vuc_1{-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:1px solid transparent;border-radius:4px;box-sizing:border-box;color:var(--base-body-color);cursor:pointer;display:inline-block;font-family:inherit;font-weight:500;line-height:inherit;opacity:1;text-decoration:none;transition:all .3s var(--material-ease);vertical-align:middle;white-space:nowrap}._button_p1vuc_1:focus,._button_p1vuc_1:hover{opacity:.8}._button_p1vuc_1:active{opacity:.7}._disabled_p1vuc_30{background-color:var(--light-bg-color);border-width:0;color:rgba(0,0,0,.2);cursor:not-allowed}._buttonType-muted_p1vuc_37{background-color:var(--light-color);color:var(--accent-color)}._buttonType-primary_p1vuc_42{background-color:var(--accent-color);border-width:0;color:#fff}._buttonType-primary_p1vuc_42:active,._buttonType-primary_p1vuc_42:focus,._buttonType-primary_p1vuc_42:hover{color:#fff}._buttonType-primary_p1vuc_42._disabled_p1vuc_30{background-color:var(--disabled-bg-color);color:rgba(0,0,0,.2)}._buttonType-primary_p1vuc_42._disabled_p1vuc_30:active,._buttonType-primary_p1vuc_42._disabled_p1vuc_30:focus,._buttonType-primary_p1vuc_42._disabled_p1vuc_30:hover{color:rgba(0,0,0,.2)}._buttonType-negative_p1vuc_64{border-width:0}._buttonType-negative_p1vuc_64,._buttonType-negative_p1vuc_64:active,._buttonType-negative_p1vuc_64:focus,._buttonType-negative_p1vuc_64:hover{background-color:var(--alert-color);color:#fff}._buttonType-negative_p1vuc_64._disabled_p1vuc_30{background-color:var(--disabled-bg-color);color:rgba(0,0,0,.2)}._buttonSize-xxs_p1vuc_82{font-size:1em;padding:.5em .8em}._buttonSize-xs_p1vuc_87{font-size:1em;padding:.6em .8em}._buttonSize-s_p1vuc_92{font-size:1em;padding:.7em 1em}._buttonSize-m_p1vuc_97{font-size:1.1em;padding:.7em 1em}._buttonSize-l_p1vuc_102{font-size:1.2em;padding:.7em 1em}._buttonSize-xl_p1vuc_107{font-size:1.2em;padding:1em}._fullWidth_p1vuc_112{display:block;text-align:center;width:100%}._canvas_1kptt_1{--base-body-color:#34363a;--light-body-color:#848484;--placeholder-body-color:#c6c6c6;--light-bg-color:#f5f5f5;--lighter-bg-color:#f8f8f8;--disabled-bg-color:#ededed;--border-color:#f0f0f0;--darker-border-color:#d7d7d7;--alert-color:#ff5e49;--alert-rgb-components:255,94,73;--warning-color:gold;--notice-color:#46d700;--warning-bg-color:#ffffe5;--add-color:#4cb06d;--remove-color:#eb576a;--base-font-family:"colfax-web","Roboto","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;--monospaced-font-family:"Roboto Mono","Menlo","Bitstream Vera Sans Mono",Consolas,Courier,monospace;--spacing-s:0.375rem;--spacing-m:0.75rem;--spacing-l:1.5rem;--spacing-xl:2.25rem;--spacing-xxl:3.75rem;--spacing-xxxl:6rem;--font-size-xxs:0.6875rem;--font-size-xs:0.75rem;--font-size-s:0.875rem;--font-size-m:0.9375rem;--font-size-l:1.0625rem;--font-size-xl:1.1875rem;--font-size-xxl:1.5625rem;--font-size-xxxl:1.875rem;--font-size-xxxl:2.1875rem;--font-size-xxxl:3.125rem;--material-ease:cubic-bezier(0.55,0,0.1,1);--inertial-ease:cubic-bezier(0.19,1,0.22,1);-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;color:var(--base-body-color);font-family:var(--base-font-family);font-size:var(--font-size-m);line-height:1.5}._fieldError_qi0xk_1{color:var(--alert-color);font-size:var(--font-size-xs);line-height:1.2;margin-top:var(--spacing-s)}._FieldGroup_uz9ju_1{display:block}._FieldGroup__item_uz9ju_5{display:block;margin-bottom:var(--spacing-l)}._FieldGroup__item_uz9ju_5:last-child{margin-bottom:0}._fieldHint_1dor2_1{color:var(--light-body-color);font-size:var(--font-size-xs);line-height:1.2;margin-top:var(--spacing-s)}._Form_5qspp_1,._Form__item_5qspp_5{display:block}._Form__item_5qspp_5:last-child{margin-bottom:0}._Form__item--default_5qspp_13{margin-bottom:var(--spacing-l)}._Form__item--condensed_5qspp_17{margin-bottom:var(--spacing-m)}._formLabel_tcjrv_1{align-items:center;color:var(--light-body-color);display:flex;margin-bottom:var(--spacing-s)}._formLabel_tcjrv_1:hover ._formLabel__code_tcjrv_8{opacity:1}._formLabel--error_tcjrv_14{color:var(--alert-color)}._formLabel__label_tcjrv_18{flex:1}._formLabel__code_tcjrv_8{font-family:var(--monospaced-font-family);font-size:.95em;opacity:0;position:absolute;transition:opacity .2s var(--material-ease)}._switchField__flex_16z4j_1{align-items:center;display:flex}._switchField__switchInput_16z4j_6{width:55px}._switchField__label_16z4j_10{color:var(--base-body-color);flex:1;line-height:1.1;line-height:20px;margin-bottom:0;pointer-events:none;-moz-user-select:text;-ms-user-select:text;user-select:text}._switchField__below_16z4j_22{margin-left:55px;margin-top:var(--spacing-s)}._switchInput__inner_1knbg_1{color:#fff;font-size:12px;left:24px;position:absolute}._switchInput_1knbg_1{background-color:#ccc;border:1px solid #ccc;border-radius:20px 20px;box-sizing:border-box;cursor:pointer;display:inline-block;height:22px;line-height:20px;position:relative;transition:all .3s cubic-bezier(.35,0,.25,1);vertical-align:middle;width:44px}._switchInput_1knbg_1:after{animation-duration:.3s;animation-name:_switchInput__off_1knbg_1;animation-timing-function:cubic-bezier(.35,0,.25,1);background-color:#fff;border-radius:50% 50%;box-shadow:0 2px 5px rgba(0,0,0,.26);content:" ";cursor:pointer;height:18px;left:2px;position:absolute;top:1px;transform:scale(1);transition:left .3s cubic-bezier(.35,0,.25,1);width:18px}._switchInput_1knbg_1:focus:after,._switchInput_1knbg_1:hover{animation-name:_switchInput__on_1knbg_1;transform:scale(1.1)}._switchInput__checked_1knbg_47{background-color:var(--accent-color);border:1px solid var(--accent-color)}._switchInput__checked_1knbg_47 ._switchInput__inner_1knbg_1{left:6px}._switchInput__checked_1knbg_47:after{left:22px}._switchInput__disabled_1knbg_60{background:#ccc;border-color:#ccc;cursor:no-drop}._switchInput__disabled_1knbg_60:after{animation-name:_none_1knbg_1;background:#9e9e9e;cursor:no-drop}._switchInput__disabled_1knbg_60:focus:after,._switchInput__disabled_1knbg_60:hover{animation-name:_none_1knbg_1;transform:scale(1)}@keyframes _switchInput__on_1knbg_1{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1.1)}}@keyframes _switchInput__off_1knbg_1{0%{transform:scale(1.1)}to{transform:scale(1)}}._TextInput--disabled_1m3nw_4{background:var(--lighter-bg-color);border-color:var(--border-color);color:var(--light-body-color)}._TextInput--error_1m3nw_10{border-color:var(--alert-color)}._TextInput--error_1m3nw_10:focus{box-shadow:0 0 0 3px rgba(var(--alert-rgb-components),.2)}._TextInput__input_1m3nw_18{appearance:none;background-image:none;border:1px solid var(--border-color);border-radius:0;box-sizing:border-box;display:block;font-size:var(--font-size-m);padding:10px;resize:none;transition:border .2s var(--material-ease);width:100%}._TextInput__input_1m3nw_18::placeholder{color:var(--placeholder-body-color)}._TextInput__input_1m3nw_18:hover{border-color:var(--darker-border-color)}._TextInput__input_1m3nw_18:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--semi-transparent-accent-color);outline:0}html{font-size:16px;height:auto}body,html{margin:0;padding:0}