datocms-react-ui 0.3.24 → 0.3.28

package/src/TextInput/styles.module.css

@@ -0,0 +1,52 @@
+.TextInput {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 10px;
+  border: 1px solid var(--border-color);
+  appearance: none;
+  border-radius: 0;
+  background-image: none;
+  transition: border 0.2s var(--material-ease);
+  font-size: var(--font-size-m);
+  resize: none;
+  font-family: inherit;
+
+  &::placeholder {
+    color: var(--placeholder-body-color);
+  }
+
+  &:hover {
+    border-color: var(--darker-border-color);
+  }
+
+  &:focus {
+    outline: 0;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px var(--semi-transparent-accent-color);
+  }
+}
+
+.TextInput--monospaced {
+  font-family: var(--monospaced-font-family);
+  font-size: var(--font-size-s);
+}
+
+.TextInput--disabled {
+  color: var(--light-body-color);
+  border-color: var(--border-color);
+  background: var(--lighter-bg-color);
+}
+
+.TextInput--error {
+  border-color: var(--alert-color);
+
+  &:hover,
+  &:focus {
+    border-color: var(--alert-color);
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgba(var(--alert-color-rgb-components), 0.2);
+  }
+}

package/src/TextInput/styles.module.css.json

@@ -0,0 +1 @@
+{"TextInput":"_TextInput_x2oj2_1","TextInput--monospaced":"_TextInput--monospaced_x2oj2_30","TextInput--disabled":"_TextInput--disabled_x2oj2_35","TextInput--error":"_TextInput--error_x2oj2_41"}

package/src/Toolbar/Button/index.tsx

@@ -0,0 +1,32 @@
+import classNames from 'classnames';
+import React, { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import s from './styles.module.css.json';
+
+export type ButtonProps = {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  onClick?: MouseEventHandler;
+};
+
+export function Button({
+  children,
+  style,
+  className,
+  onClick,
+}: ButtonProps): JSX.Element {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={classNames(
+        s['Button'],
+
+        className,
+      )}
+      style={style}
+    >
+      {children}
+    </button>
+  );
+}

package/src/Toolbar/Button/styles.module.css

@@ -0,0 +1,43 @@
+.Button {
+  font-family: inherit;
+  cursor: pointer;
+  line-height: inherit;
+  background-color: transparent;
+  color: var(--base-body-color);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  box-sizing: border-box;
+  border: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 49px;
+  min-height: 49px;
+  border-left: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
+}
+
+.Button:hover,
+.Button:focus {
+  background-color: var(--light-bg-color);
+}
+
+.Button:first-child {
+  border-left: 0;
+}
+
+.Button:last-child {
+  border-right: 0;
+}
+
+@media screen and (min-width: 380px) {
+  .Button {
+    width: 59px;
+    min-height: 59px;
+  }
+
+  .Button svg {
+    font-size: 20px;
+  }
+}

package/src/Toolbar/Button/styles.module.css.json

@@ -0,0 +1 @@
+{"Button":"_Button_fy6g6_1"}

package/src/Toolbar/Stack/index.tsx

@@ -0,0 +1,33 @@
+import classNames from 'classnames';
+import React, { CSSProperties, ReactNode } from 'react';
+import s from './styles.module.css.json';
+
+export type StackProps = {
+  children?: ReactNode;
+  className?: string;
+  stackSize?: 's' | 'm' | 'l';
+  style?: CSSProperties;
+};
+
+export function Stack({
+  children,
+  style,
+  className,
+  stackSize,
+}: StackProps): JSX.Element {
+  return (
+    <div
+      className={classNames(
+        s['Stack'],
+        {
+          [s['Stack--s']]: stackSize === 's',
+          [s['Stack--l']]: stackSize === 'l',
+        },
+        className,
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}

package/src/Toolbar/Stack/styles.module.css

@@ -0,0 +1,18 @@
+.Stack {
+  display: flex;
+  padding: 10px 15px;
+  flex: 1;
+  justify-content: center;
+  flex-direction: row;
+  align-items: center;
+}
+
+.Stack--s {
+  padding-top: var(--spacing-s);
+  padding-bottom: var(--spacing-s);
+}
+
+.Stack--l {
+  padding-left: var(--spacing-xl);
+  padding-right: var(--spacing-xl);
+}

package/src/Toolbar/Stack/styles.module.css.json

@@ -0,0 +1 @@
+{"Stack":"_Stack_1nnzo_1","Stack--s":"_Stack--s_1nnzo_10","Stack--l":"_Stack--l_1nnzo_15"}

package/src/Toolbar/Title/index.tsx

@@ -0,0 +1,17 @@
+import classNames from 'classnames';
+import React, { CSSProperties, ReactNode } from 'react';
+import s from './styles.module.css.json';
+
+export type TitleProps = {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+};
+
+export function Title({ children, style, className }: TitleProps): JSX.Element {
+  return (
+    <div className={classNames(s['Title'], className)} style={style}>
+      {children}
+    </div>
+  );
+}

package/src/Toolbar/Title/styles.module.css

@@ -0,0 +1,12 @@
+.Title {
+  font-weight: 500;
+  line-height: 1.1;
+  margin-right: 15px;
+  font-size: var(--font-size-l);
+}
+
+@media screen and (min-width: 380px) {
+  .Title {
+    font-size: var(--font-size-xl);
+  }
+}

package/src/Toolbar/Title/styles.module.css.json

@@ -0,0 +1 @@
+{"Title":"_Title_1dx5n_1"}

package/src/Toolbar/Toolbar/index.tsx

@@ -0,0 +1,112 @@
+import classNames from 'classnames';
+import React, { CSSProperties, ReactNode } from 'react';
+import s from './styles.module.css.json';
+
+export type ToolbarProps = {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+};
+
+/**
+ * - @example Basic example
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Toolbar>
+ *     <ToolbarStack stackSize="l">
+ *       <ToolbarTitle>Media Area</ToolbarTitle>
+ *     </ToolbarStack>
+ *   </Toolbar>
+ *   <div
+ *     style={{
+ *       display: 'flex',
+ *       justifyContent: 'center',
+ *       alignItems: 'center',
+ *       background: 'var(--light-bg-color)',
+ *       height: '150px',
+ *     }}
+ *   >
+ *     Main content
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example Buttons and actions
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Toolbar>
+ *     <ToolbarButton>
+ *       <BackIcon />
+ *     </ToolbarButton>
+ *     <ToolbarStack stackSize="l">
+ *       <ToolbarTitle>Media Area</ToolbarTitle>
+ *       <div style={{ flex: '1' }} />
+ *       <Button buttonType="primary">Action</Button>
+ *     </ToolbarStack>
+ *     <ToolbarButton>
+ *       <SidebarLeftArrowIcon />
+ *     </ToolbarButton>
+ *   </Toolbar>
+ *   <div
+ *     style={{
+ *       display: 'flex',
+ *       justifyContent: 'center',
+ *       alignItems: 'center',
+ *       background: 'var(--light-bg-color)',
+ *       height: '150px',
+ *     }}
+ *   >
+ *     Main content
+ *   </div>
+ * </Canvas>;
+ * ```
+ *
+ * @example With button group
+ *
+ * ```js
+ * <Canvas ctx={ctx}>
+ *   <Toolbar>
+ *     <ToolbarStack stackSize="l">
+ *       <ToolbarTitle>Media Area</ToolbarTitle>
+ *       <div style={{ flex: '1' }} />
+ *       <ButtonGroup>
+ *         <ButtonGroupButton>First</ButtonGroupButton>
+ *         <ButtonGroupButton selected>Second</ButtonGroupButton>
+ *         <ButtonGroupButton>Third</ButtonGroupButton>
+ *       </ButtonGroup>
+ *     </ToolbarStack>
+ *   </Toolbar>
+ *   <div
+ *     style={{
+ *       display: 'flex',
+ *       justifyContent: 'center',
+ *       alignItems: 'center',
+ *       background: 'var(--light-bg-color)',
+ *       height: '150px',
+ *     }}
+ *   >
+ *     Main content
+ *   </div>
+ * </Canvas>;
+ * ```
+ */
+export function Toolbar({
+  children,
+  style,
+  className,
+}: ToolbarProps): JSX.Element {
+  return (
+    <div
+      className={classNames(
+        s['Toolbar'],
+
+        className,
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}

package/src/Toolbar/Toolbar/styles.module.css

@@ -0,0 +1,15 @@
+.Toolbar {
+  display: flex;
+  border-bottom: 1px solid var(--border-color);
+  border-top: 1px solid var(--border-color);
+  align-items: stretch;
+  position: relative;
+}
+
+.Toolbar:first-child {
+  border-top-width: 0;
+}
+
+.Toolbar:last-child {
+  border-bottom-width: 0;
+}

package/src/Toolbar/Toolbar/styles.module.css.json

@@ -0,0 +1 @@
+{"Toolbar":"_Toolbar_1cwb8_1"}

package/src/Toolbar/index.ts

@@ -0,0 +1,8 @@
+export { Toolbar } from './Toolbar';
+export type { ToolbarProps } from './Toolbar';
+export { Button as ToolbarButton } from './Button';
+export type { ButtonProps as ToolbarButtonProps } from './Button';
+export { Title as ToolbarTitle } from './Title';
+export type { TitleProps as ToolbarTitleProps } from './Title';
+export { Stack as ToolbarStack } from './Stack';
+export type { StackProps as ToolbarStackProps } from './Stack';

package/src/base.css

@@ -0,0 +1,89 @@
+@font-face {
+  font-family: 'colfax-web';
+  src: url('https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3')
+      format('opentype');
+  font-display: auto;
+  font-style: normal;
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: 'colfax-web';
+  src: url('https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3')
+      format('opentype');
+  font-display: auto;
+  font-style: italic;
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: 'colfax-web';
+  src: url('https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3')
+      format('opentype');
+  font-display: auto;
+  font-style: normal;
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: 'colfax-web';
+  src: url('https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3')
+      format('opentype');
+  font-display: auto;
+  font-style: italic;
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: 'colfax-web';
+  src: url('https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3')
+      format('opentype');
+  font-display: auto;
+  font-style: normal;
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'colfax-web';
+  src: url('https://use.typekit.net/af/c1cc04/00000000000000003b9acde5/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i4&v=3')
+      format('woff2'),
+    url('https://use.typekit.net/af/c1cc04/00000000000000003b9acde5/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i4&v=3')
+      format('woff'),
+    url('https://use.typekit.net/af/c1cc04/00000000000000003b9acde5/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i4&v=3')
+      format('opentype');
+  font-display: auto;
+  font-style: italic;
+  font-weight: 400;
+}
+
+html {
+  padding: 0;
+  margin: 0;
+  height: auto;
+  font-size: 16px;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+}

package/src/generateStyleFromCtx/index.ts

@@ -0,0 +1,25 @@
+import { RenderProperties } from 'datocms-plugin-sdk';
+import { CSSProperties } from 'react';
+
+function camelToDash(str: string) {
+  if (str != str.toLowerCase()) {
+    str = str.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+  }
+  return str;
+}
+
+export function generateStyleFromCtx(ctx: RenderProperties): CSSProperties {
+  return Object.entries(ctx.theme).reduce(
+    (acc, [k, v]) => {
+      return {
+        ...acc,
+        [`--${camelToDash(k)}`]: v,
+        [`--${camelToDash(`${k}RgbComponents`)}`]:
+          v.match(/rgb\((\d+, \d+, \d+)\)/)?.[1] || undefined,
+      };
+    },
+    {
+      padding: ctx.bodyPadding.map((p) => `${p}px`).join(' '),
+    },
+  );
+}

package/src/global.css

@@ -0,0 +1,23 @@
+@import './base.css';
+@import './Button/styles.module.css';
+@import './ButtonGroup/Button/styles.module.css';
+@import './ButtonGroup/Group/styles.module.css';
+@import './Canvas/styles.module.css';
+@import './ContextInspector/styles.module.css';
+@import './FieldError/styles.module.css';
+@import './FieldGroup/styles.module.css';
+@import './FieldHint/styles.module.css';
+@import './Form/styles.module.css';
+@import './FormLabel/styles.module.css';
+@import './Section/styles.module.css';
+@import './SidebarPanel/styles.module.css';
+@import './Spinner/styles.module.css';
+@import './SwitchField/styles.module.css';
+@import './SwitchInput/styles.module.css';
+@import './TextField/styles.module.css';
+@import './TextInput/styles.module.css';
+@import './Toolbar/Button/styles.module.css';
+@import './Toolbar/Stack/styles.module.css';
+@import './Toolbar/Title/styles.module.css';
+@import './Toolbar/Toolbar/styles.module.css';
+@import './Dropdown/styles.module.css';

package/src/icons.tsx

@@ -0,0 +1,108 @@
+import React, { CSSProperties } from 'react';
+
+export type IconProps = {
+  width?: string | number;
+  height?: string | number;
+  className?: string;
+  style?: CSSProperties;
+};
+
+export function BackIcon({
+  width = '1em',
+  height = '1em',
+  style,
+  className,
+}: IconProps): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 256 512"
+      width={width}
+      height={height}
+      style={style}
+      className={className}
+    >
+      <path d="M238.475 475.535l7.071-7.07c4.686-4.686 4.686-12.284 0-16.971L50.053 256 245.546 60.506c4.686-4.686 4.686-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.686-16.97 0L10.454 247.515c-4.686 4.686-4.686 12.284 0 16.971l211.051 211.05c4.686 4.686 12.284 4.686 16.97-.001z"></path>
+    </svg>
+  );
+}
+
+export function SidebarLeftArrowIcon({
+  width = '1em',
+  height = '1em',
+  style,
+  className,
+}: IconProps): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 448 512"
+      width={width}
+      height={height}
+      style={style}
+      className={className}
+    >
+      <path d="M152 412.5L3.5 264.5c-4.7-4.7-4.7-12.3 0-17L152 99.5c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L60.1 239H372c6.6 0 12 5.4 12 12v10c0 6.6-5.4 12-12 12H60.1L176 388.4c4.7 4.7 4.7 12.3 0 17l-7.1 7.1c-4.6 4.7-12.2 4.7-16.9 0zM436 64h-8c-6.6 0-12 5.4-12 12v360c0 6.6 5.4 12 12 12h8c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12z"></path>
+    </svg>
+  );
+}
+
+export function SidebarRightArrowIcon({
+  width = '1em',
+  height = '1em',
+  style,
+  className,
+}: IconProps): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 448 512"
+      width={width}
+      height={height}
+      style={style}
+      className={className}
+    >
+      <path d="M296 99.5l148.5 148c4.7 4.7 4.7 12.3 0 17L296 412.5c-4.7 4.7-12.3 4.7-17 0l-7.1-7.1c-4.7-4.7-4.7-12.3 0-17l116-115.4H76c-6.6 0-12-5.4-12-12v-10c0-6.6 5.4-12 12-12h311.9L272 123.6c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.6-4.7 12.2-4.7 16.9 0zM12 448h8c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12h-8C5.4 64 0 69.4 0 76v360c0 6.6 5.4 12 12 12z"></path>
+    </svg>
+  );
+}
+
+export function CaretDownIcon({
+  width = '1em',
+  height = '1em',
+  style,
+  className,
+}: IconProps): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 320 512"
+      width={width}
+      height={height}
+      style={style}
+      className={className}
+    >
+      <path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" />
+    </svg>
+  );
+}
+
+export function CaretUpIcon({
+  width = '1em',
+  height = '1em',
+  style,
+  className,
+}: IconProps): JSX.Element {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 320 512"
+      width={width}
+      height={height}
+      style={style}
+      className={className}
+    >
+      <path d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z" />
+    </svg>
+  );
+}

package/src/index.ts

@@ -0,0 +1,23 @@
+export * from './Button';
+export * from './ButtonGroup';
+export * from './Canvas';
+export * from './ContextInspector';
+export * from './Dropdown';
+export * from './FieldError';
+export * from './FieldGroup';
+export * from './FieldHint';
+export * from './Form';
+export * from './FormLabel';
+export * from './icons';
+export * from './Section';
+export * from './SelectField';
+export * from './SelectInput';
+export * from './SidebarPanel';
+export * from './Spinner';
+export * from './SwitchField';
+export * from './SwitchInput';
+export * from './TextField';
+export * from './TextInput';
+export * from './Toolbar';
+export * from './useClickOutside';
+export * from './useMediaQuery';

package/src/mergeRefs/index.ts

@@ -0,0 +1,8 @@
+export const mergeRefs = <T extends unknown>(
+  ...refs: React.Ref<T>[]
+): React.RefCallback<T> => (element: T) =>
+  refs.forEach((ref) => {
+    if (typeof ref === 'function') ref(element);
+    else if (ref && typeof ref === 'object')
+      (ref as React.MutableRefObject<T>).current = element;
+  });

package/src/useClickOutside/index.ts

@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+export function useClickOutside<T extends HTMLElement>(
+  handler: (event: MouseEvent | TouchEvent) => void,
+): React.RefObject<T> {
+  const ref = useRef<T>(null);
+
+  const handleClick = useCallback(
+    (event: MouseEvent | TouchEvent) => {
+      event.target;
+      if (!ref.current || ref.current.contains(event.target as Node)) {
+        return;
+      }
+      handler(event);
+    },
+    [handler],
+  );
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClick);
+    document.addEventListener('touchstart', handleClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+      document.removeEventListener('touchstart', handleClick);
+    };
+  }, [handleClick]);
+
+  return ref;
+}