timvir 0.1.42

package/blocks/Message/docs/api.mdx

@@ -0,0 +1,76 @@
+# API
+
+<div style={ { display: "grid", gridTemplateColumns: "min-content 1fr" } }>
+  <div style={ { fontWeight: "bold", marginRight: 16 } }>Root:</div>
+  <div>{`<div>`}</div>
+  <div style={ { fontWeight: "bold", marginRight: 16 } }>Ref:</div>
+  <div>Forward <span style={ { color: "rgb(153, 153, 153)" } }>(HTMLDivElement)</span></div>
+</div>
+
+## Props
+
+<Props {...{"fields":[{"name":"variant","type":{"optional":true,"name":"\"info\" | \"warning\" | \"alert\"","module":""},"comment":{"shortText":""}}]}} />
+
+export const required = (
+  <svg
+    x="0px"
+    y="0px"
+    width="10px"
+    height="10px"
+    viewBox="0 0 16 16"
+    style={ { position: "relative", top: 0, display: "inline-block", marginRight: 8 } }
+  >
+    <g transform="translate(0, 0)">
+      <circle cx="8" cy="8" r="8" fill="#444444"></circle>
+    </g>
+  </svg>
+);
+
+export const optional = (
+  <svg
+    x="0px"
+    y="0px"
+    width="10px"
+    height="10px"
+    viewBox="0 0 16 16"
+    style={ { position: "relative", top: 0, display: "inline-block", marginRight: 8 } }
+  >
+    <g transform="translate(0, 0)">
+      <circle
+        cx="8"
+        cy="8"
+        r="7.5"
+        fill="none"
+        stroke="#444444"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        data-cap="butt"
+      ></circle>
+    </g>
+  </svg>
+);
+
+export const Props = ({ fields }) => (
+  <div style={ { marginTop: 16, display: "grid", gridGap: 24 } }>
+    {fields.map(({ name, type, def, example, comment }) => (
+      <div key={name}>
+        <div style={ { marginLeft: -18 } }>
+          {type.optional ? optional : required}
+          <span style={ { fontWeight: "bold" } }>{name}</span>{`: `}
+          <span>{type.name}</span>
+          {def && (
+            <>
+             {` = `}<span style={ { fontWeight: "bold" } }>{def}</span>
+            </>
+          )}
+        </div>
+        <div>{comment.shortText}</div>
+        {example && (
+          <div style={ { marginLeft: 0, marginTop: 8, color: "rgb(153, 153, 153)", fontSize: "0.8rem" } }>
+            Example: <span style={ { fontWeight: "bold" } }>{example}</span>
+          </div>
+        )}
+      </div>
+    ))}
+  </div>
+)

package/blocks/Message/docs/index.mdx

@@ -0,0 +1,63 @@
+import { Exhibit } from "../../Exhibit";
+import { Grid } from "../../Grid";
+import { Swatch } from "../../Swatch";
+import { Code } from "../../Code";
+
+# Message
+
+<Exhibit bleed="var(--timvir-page-margin)">
+  <Sample variant="basic" />
+</Exhibit>
+
+<Code language="jsx">
+  <Sample variant="basic" as="source" />
+</Code>
+
+## Variants
+
+<Grid>
+  <Exhibit bleed={8} caption="info">
+    <Sample variant="basic" props={{ variant: "info" }} />
+  </Exhibit>
+  <Exhibit bleed={8} caption="warning">
+    <Sample variant="basic" props={{ variant: "warning" }} />
+  </Exhibit>
+  <Exhibit bleed={8} caption="alert">
+    <Sample variant="basic" props={{ variant: "alert" }} />
+  </Exhibit>
+</Grid>
+
+## Content
+
+Make the title bold and place it before the message, or use a level 3 heading. You can use arbitrary markdown inside the message.
+
+<Grid>
+<Exhibit bleed={8} caption="Inline title">
+  <Sample variant="basic">
+
+
+**Short Messages** should place the title in front of the message and make it stand out.
+
+  </Sample>
+</Exhibit>
+
+
+<Exhibit bleed={8} caption="Title as a separate block elment">
+  <Sample variant="basic">
+
+
+### Longer Messages
+
+Longer messages should make the title a separate block element. This body uses [links](#) and _italic_ text.
+
+And multiple paragraphs. And even a component:
+
+<Swatch value="#FF00FF" />
+
+  </Sample>
+</Exhibit>
+</Grid>
+
+## References
+
+- [ATLASSIAN Design: Messages](https://www.atlassian.design/server/components/messages/)

package/blocks/Message/index.d.ts

@@ -0,0 +1 @@
+export { default as Message } from "./Message";

package/blocks/Message/index.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import * as Icons from 'react-feather';
+
+/**
+ * Takes a list of class names and filters for truthy ones, joining them into a single class name for convenience.
+ * eg.
+ * ```js
+ *  cx('red', isBig && 'big') // returns 'red big' if `isBig` is true, otherwise returns 'red'
+ * ```
+ * If arguments provided are objects, these objects are merged together, and the values are taken as class names:
+ *
+ * ```js
+ *  cx({ color: 'class1', textDecoration: 'class2'}, { color: 'class3' }) // returns `class3 class2`
+ * ```
+ *
+ * @returns the combined, space separated class names that can be applied directly to the class attribute
+ */
+const cx = function cx() {
+  const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean); // In the basic case, `cx` is passed all strings, and we simply need to join them together with space separators
+
+  const classNamesResult = presentClassNames.filter(arg => typeof arg !== 'object'); // There might also be objects (eg. from the atomic API) such as cx('foo', {
+  // key1: 'bar', key2: 'fizz'}, { key1: 'buzz' }) the desired behavior is to
+  // deduplicate the values based on their properties. The object's values are
+  // the class names
+
+  const styleCollectionResult = Object.values(Object.assign({}, ...presentClassNames.filter(arg => typeof arg === 'object')));
+  return [...styleCollectionResult, ...classNamesResult].join(' ');
+};
+
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+
+const Root = "div";
+
+function Message(props, ref) {
+  const {
+    variant,
+    className,
+    children,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(Root, {
+    ref: ref,
+    className: cx(className, "r1ssql2z", variant !== undefined && variantStyles[variant]),
+    ...rest
+  }, variant && /*#__PURE__*/React.createElement("div", {
+    className: icon
+  }, {
+    info: /*#__PURE__*/React.createElement(Icons.ChevronsRight, {
+      size: "1.5em"
+    }),
+    warning: /*#__PURE__*/React.createElement(Icons.AlertCircle, {
+      size: "1.5em"
+    }),
+    alert: /*#__PURE__*/React.createElement(Icons.XOctagon, {
+      size: "1.5em"
+    })
+  }[variant]), /*#__PURE__*/React.createElement("div", {
+    className: "dhvu07f"
+  }, children));
+}
+
+var Message$1 = /*#__PURE__*/React.forwardRef(Message);
+const icon = "i1dz18jz";
+const variantStyles = {
+  info: "i41wipx",
+  warning: "wi7iy6",
+  alert: "a1d5oxsn"
+};
+
+export { Message$1 as Message };

package/blocks/Message/samples/basic.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { Message } from "..";
+declare type Props = Partial<React.ComponentPropsWithoutRef<typeof Message>>;
+export default function Sample(props: Props): JSX.Element;
+export {};

package/blocks/Message/styles.css

@@ -0,0 +1,6 @@
+.r1ssql2z{position:relative;background:var(--c-p-0);color:black;border-radius:3px;padding:16px 24px 16px 24px;box-shadow:inset 0 0 0 1px rgba(16,22,26,0.2);display:flex;align-items:flex-start;line-height:1.5;}
+.dhvu07f > *:first-child{margin-top:0;}.dhvu07f > *:last-child{margin-bottom:0;}.dhvu07f > h3:before{display:none;}
+.i1dz18jz{position:relative;top:3px;margin:-2px 12px 0 -4px;}.i1dz18jz > svg{display:block;}
+.i41wipx{background:#f0f2fc;color:black;}.i41wipx .i1dz18jz{color:#2a47d5;}
+.wi7iy6{background:#fcf9f0;color:black;}.wi7iy6 .i1dz18jz{color:#a68521;}
+.a1d5oxsn{background:#fcf0f0;color:black;}.a1d5oxsn .i1dz18jz{color:#da4444;}

package/blocks/Swatch/Swatch.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+declare const Root = "div";
+interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
+    /**
+     * The CSS Color value of the swatch. Any CSS color definition is accepted.
+     *
+     * @example "#FFFFFF"
+     */
+    value: string;
+    /**
+     * Color of the text that is rendered on top of the swatch. Should be chosen
+     * such that it provides enough contrast. If not provided then the normal text
+     * color from the page will be inherited.
+     */
+    contrastValue?: string;
+    /**
+     * Name of the swatch.
+     */
+    name?: string;
+    /**
+     * Use this as a short reference where or how the color was derived. If it is an
+     * primordial color (not derived from any color palette or other algorithm), then
+     * leave it empty.
+     *
+     * @example "Blue 500"
+     */
+    ancestry?: string;
+}
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/blocks/Swatch/docs/api.mdx

@@ -0,0 +1,76 @@
+# API
+
+<div style={ { display: "grid", gridTemplateColumns: "min-content 1fr" } }>
+  <div style={ { fontWeight: "bold", marginRight: 16 } }>Root:</div>
+  <div>{`<div>`}</div>
+  <div style={ { fontWeight: "bold", marginRight: 16 } }>Ref:</div>
+  <div>Forward <span style={ { color: "rgb(153, 153, 153)" } }>(HTMLDivElement)</span></div>
+</div>
+
+## Props
+
+<Props {...{"fields":[{"name":"value","type":{"optional":false,"name":"string","module":""},"example":"\"#FFFFFF\"","comment":{"shortText":"The CSS Color value of the swatch. Any CSS color definition is accepted."}},{"name":"contrastValue","type":{"optional":true,"name":"string","module":""},"comment":{"shortText":"Color of the text that is rendered on top of the swatch. Should be chosen\nsuch that it provides enough contrast. If not provided then the normal text\ncolor from the page will be inherited."}},{"name":"name","type":{"optional":true,"name":"string","module":""},"comment":{"shortText":"Name of the swatch."}},{"name":"ancestry","type":{"optional":true,"name":"string","module":""},"example":"\"Blue 500\"","comment":{"shortText":"Use this as a short reference where or how the color was derived. If it is an\nprimordial color (not derived from any color palette or other algorithm), then\nleave it empty."}}]}} />
+
+export const required = (
+  <svg
+    x="0px"
+    y="0px"
+    width="10px"
+    height="10px"
+    viewBox="0 0 16 16"
+    style={ { position: "relative", top: 0, display: "inline-block", marginRight: 8 } }
+  >
+    <g transform="translate(0, 0)">
+      <circle cx="8" cy="8" r="8" fill="#444444"></circle>
+    </g>
+  </svg>
+);
+
+export const optional = (
+  <svg
+    x="0px"
+    y="0px"
+    width="10px"
+    height="10px"
+    viewBox="0 0 16 16"
+    style={ { position: "relative", top: 0, display: "inline-block", marginRight: 8 } }
+  >
+    <g transform="translate(0, 0)">
+      <circle
+        cx="8"
+        cy="8"
+        r="7.5"
+        fill="none"
+        stroke="#444444"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        data-cap="butt"
+      ></circle>
+    </g>
+  </svg>
+);
+
+export const Props = ({ fields }) => (
+  <div style={ { marginTop: 16, display: "grid", gridGap: 24 } }>
+    {fields.map(({ name, type, def, example, comment }) => (
+      <div key={name}>
+        <div style={ { marginLeft: -18 } }>
+          {type.optional ? optional : required}
+          <span style={ { fontWeight: "bold" } }>{name}</span>{`: `}
+          <span>{type.name}</span>
+          {def && (
+            <>
+             {` = `}<span style={ { fontWeight: "bold" } }>{def}</span>
+            </>
+          )}
+        </div>
+        <div>{comment.shortText}</div>
+        {example && (
+          <div style={ { marginLeft: 0, marginTop: 8, color: "rgb(153, 153, 153)", fontSize: "0.8rem" } }>
+            Example: <span style={ { fontWeight: "bold" } }>{example}</span>
+          </div>
+        )}
+      </div>
+    ))}
+  </div>
+)

package/blocks/Swatch/docs/index.mdx

@@ -0,0 +1,39 @@
+import { Swatch } from "..";
+import { Exhibit } from "../../Exhibit";
+import { Grid } from "../../Grid";
+
+# Swatch
+
+<Exhibit caption="Plain color" style={{ marginBottom: 24 }}>
+  <Swatch value="#FF00FF" />
+</Exhibit>
+
+<Exhibit caption="Give the color a meaningful name" style={{ marginBottom: 24 }}>
+  <Swatch value="#FF00FF" name="Primary" />
+</Exhibit>
+
+<Exhibit caption="Add a note about its ancenstry (how or where from it was derived)" style={{ marginBottom: 24 }}>
+  <Swatch value="#FF00FF" name="Primary" ancestry="Red 700" />
+</Exhibit>
+
+## In a Grid
+
+<Grid style={{ gridGap: 6 }}>
+  <Swatch value="#0E5A8A" contrastValue="#FFFFFF" name="@blue1" />
+  <Swatch value="#106BA3" contrastValue="#FFFFFF" name="@blue2" />
+  <Swatch value="#137CBD" contrastValue="#FFFFFF" name="@blue3" />
+  <Swatch value="#2B95D6" contrastValue="#000000" name="@blue4" />
+  <Swatch value="#48AFF0" contrastValue="#000000" name="@blue5" />
+</Grid>
+
+## Another example
+
+<div style={{display: "grid", gridGap: 6 }}>
+  <Swatch value="#F58221" name="Access" ancestry="Orange 300" />
+  <Swatch value="#D9418D" name="Use" ancestry="Red 500" />
+  <Swatch value="#B87AF2" name="Innovation" ancestry="Violett 500" />
+  <Swatch value="#4188D9" name="Jobs" ancestry="Blue 500" />
+  <Swatch value="#4AE6CC" name="Society" ancestry="…" />
+  <Swatch value="#1FD35B" name="Trust" ancestry="Green 400" />
+  <Swatch value="#C4D534" name="Market Openness" ancestry="…" />
+</div>

package/blocks/Swatch/index.d.ts

@@ -0,0 +1 @@
+export { default as Swatch } from "./Swatch";

package/blocks/Swatch/index.js

@@ -0,0 +1,84 @@
+import { useBlock } from 'timvir/core';
+import * as React from 'react';
+
+/**
+ * Takes a list of class names and filters for truthy ones, joining them into a single class name for convenience.
+ * eg.
+ * ```js
+ *  cx('red', isBig && 'big') // returns 'red big' if `isBig` is true, otherwise returns 'red'
+ * ```
+ * If arguments provided are objects, these objects are merged together, and the values are taken as class names:
+ *
+ * ```js
+ *  cx({ color: 'class1', textDecoration: 'class2'}, { color: 'class3' }) // returns `class3 class2`
+ * ```
+ *
+ * @returns the combined, space separated class names that can be applied directly to the class attribute
+ */
+const cx = function cx() {
+  const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean); // In the basic case, `cx` is passed all strings, and we simply need to join them together with space separators
+
+  const classNamesResult = presentClassNames.filter(arg => typeof arg !== 'object'); // There might also be objects (eg. from the atomic API) such as cx('foo', {
+  // key1: 'bar', key2: 'fizz'}, { key1: 'buzz' }) the desired behavior is to
+  // deduplicate the values based on their properties. The object's values are
+  // the class names
+
+  const styleCollectionResult = Object.values(Object.assign({}, ...presentClassNames.filter(arg => typeof arg === 'object')));
+  return [...styleCollectionResult, ...classNamesResult].join(' ');
+};
+
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+
+const Root = "div";
+
+function Swatch(props, ref) {
+  const block = useBlock(props);
+  const {
+    value,
+    contrastValue,
+    name,
+    ancestry,
+    onClick,
+    onMouseLeave,
+    className,
+    ...rest
+  } = block.props;
+  const [label, setLabel] = React.useState(name);
+  React.useEffect(() => {
+    setLabel(name);
+  }, [name]);
+  return /*#__PURE__*/React.createElement(Root, {
+    role: "button",
+    ref: ref,
+    ...rest,
+    style: {
+      height: ancestry ? 48 : 36
+    },
+    className: cx(className, "r19bcggb"),
+    onClick: ev => {
+      navigator.clipboard.writeText(value);
+      setLabel("Copied to clipboard");
+      onClick === null || onClick === void 0 ? void 0 : onClick(ev);
+    },
+    onMouseLeave: ev => {
+      setLabel(name);
+      onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(ev);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dhgsgky",
+    style: {
+      background: value,
+      color: contrastValue
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dobecwk"
+  }, label && /*#__PURE__*/React.createElement("div", null, label), label === name && /*#__PURE__*/React.createElement("div", null, value)), ancestry && /*#__PURE__*/React.createElement("div", {
+    className: "dho7t08"
+  }, ancestry)));
+}
+
+var Swatch$1 = /*#__PURE__*/React.forwardRef(Swatch);
+
+export { Swatch$1 as Swatch };

package/blocks/Swatch/samples/basic.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Sample(): JSX.Element;

package/blocks/Swatch/styles.css

@@ -0,0 +1,4 @@
+.r19bcggb{position:relative;}.r19bcggb > div{border-radius:2px;}.r19bcggb:hover > div{top:-4px;right:-4px;bottom:-4px;left:-4px;box-shadow:inset 0 0 0 1px rgba(16,22,26,0.2),0 2px 4px rgba(16,22,26,0.1), 0 8px 24px rgba(16,22,26,0.2);padding:0px 16px;z-index:2;}.r19bcggb:active > div{top:-2px;right:-2px;bottom:-2px;left:-2px;box-shadow:inset 0 0 0 1px rgba(16,22,26,0.2),0 1px 1px rgba(16,22,26,0.2);padding:0px 14px;z-index:2;}
+.dhgsgky{display:flex;flex-direction:column;justify-content:center;position:absolute;top:0;right:0;bottom:0;left:0;transition:all 0.16s;padding:0px 12px;cursor:pointer;}
+.dobecwk{display:flex;justify-content:space-between;align-items:center;line-height:1;}
+.dho7t08{padding-top:6px;opacity:0.5;font-size:0.8em;line-height:1;}

package/blocks/Viewport/Viewport.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+/**
+ * The underlying DOM element which is rendered by this component.
+ */
+declare const Root = "div";
+interface Props extends React.ComponentPropsWithoutRef<typeof Root> {
+    /**
+     * URL that should be loaded in the viewport. Can be absolute or relative.
+     */
+    src: string;
+    /**
+     * TODO: Document
+     */
+    code?: string;
+}
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/blocks/Viewport/docs/api.mdx

@@ -0,0 +1,76 @@
+# API
+
+<div style={ { display: "grid", gridTemplateColumns: "min-content 1fr" } }>
+  <div style={ { fontWeight: "bold", marginRight: 16 } }>Root:</div>
+  <div>{`<div>`}</div>
+  <div style={ { fontWeight: "bold", marginRight: 16 } }>Ref:</div>
+  <div>Forward <span style={ { color: "rgb(153, 153, 153)" } }>(HTMLDivElement)</span></div>
+</div>
+
+## Props
+
+<Props {...{"fields":[{"name":"src","type":{"optional":false,"name":"string","module":""},"comment":{"shortText":"URL that should be loaded in the viewport. Can be absolute or relative."}},{"name":"code","type":{"optional":true,"name":"string","module":""},"comment":{"shortText":"TODO: Document"}}]}} />
+
+export const required = (
+  <svg
+    x="0px"
+    y="0px"
+    width="10px"
+    height="10px"
+    viewBox="0 0 16 16"
+    style={ { position: "relative", top: 0, display: "inline-block", marginRight: 8 } }
+  >
+    <g transform="translate(0, 0)">
+      <circle cx="8" cy="8" r="8" fill="#444444"></circle>
+    </g>
+  </svg>
+);
+
+export const optional = (
+  <svg
+    x="0px"
+    y="0px"
+    width="10px"
+    height="10px"
+    viewBox="0 0 16 16"
+    style={ { position: "relative", top: 0, display: "inline-block", marginRight: 8 } }
+  >
+    <g transform="translate(0, 0)">
+      <circle
+        cx="8"
+        cy="8"
+        r="7.5"
+        fill="none"
+        stroke="#444444"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        data-cap="butt"
+      ></circle>
+    </g>
+  </svg>
+);
+
+export const Props = ({ fields }) => (
+  <div style={ { marginTop: 16, display: "grid", gridGap: 24 } }>
+    {fields.map(({ name, type, def, example, comment }) => (
+      <div key={name}>
+        <div style={ { marginLeft: -18 } }>
+          {type.optional ? optional : required}
+          <span style={ { fontWeight: "bold" } }>{name}</span>{`: `}
+          <span>{type.name}</span>
+          {def && (
+            <>
+             {` = `}<span style={ { fontWeight: "bold" } }>{def}</span>
+            </>
+          )}
+        </div>
+        <div>{comment.shortText}</div>
+        {example && (
+          <div style={ { marginLeft: 0, marginTop: 8, color: "rgb(153, 153, 153)", fontSize: "0.8rem" } }>
+            Example: <span style={ { fontWeight: "bold" } }>{example}</span>
+          </div>
+        )}
+      </div>
+    ))}
+  </div>
+)

package/blocks/Viewport/docs/index.mdx

@@ -0,0 +1,34 @@
+import { Viewport } from "..";
+
+# Viewport
+
+The `<Viewport>` component is a full-width component which is a lightly interactive wrapper around an `<iframe>`.
+The viewport can be resized to simulate different device widths. The height of the iframe will automatically adjust
+to the iframe content.
+
+The component does not provide the full functionality of the browsers responsive device mode simulation. In particular,
+it can't simulate network / CPU throttling, nor can it change the user agent. It's purpose is to provide a simple
+interface to test your components at different viewport widths.
+
+Since `<Viewport>` uses an `<iframe>`, you must provide a page which can be loaded into it. If you used the timvir
+cli to scaffold your component, you already have one such sample (in `src/components/…/samples/basic.tsx`). Make that
+sample available via a Next.js page and load it into the `<Viewport>`.
+
+See also [Concepts: Component Sample](/concepts/component-sample).
+
+<Viewport src="/docs/components/Grid/samples/basic" />
+
+## Loading Behaviour
+
+The `<Viewport>` displays a gray, animated background while the iframe is loading.
+
+<Viewport src="/api/slow" />
+
+## Unsupported content
+
+When the Viewport points to something else than a HTML document (eg. an image), it'll
+stay the default height, but display the contents nonetheless.
+
+TODO: display a nice error message describing the problem.
+
+<Viewport src="/assets/image.jpg" />

package/blocks/Viewport/index.d.ts

@@ -0,0 +1 @@
+export { default as Viewport } from "./Viewport";