react-cosmos-ui 6.0.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present Ovidiu Cherecheș
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/BaseSvg.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type SvgElementType = React.ReactElement<'path' | 'polyline' | 'line' | 'circle' | 'ellipse' | 'rect' | 'polygon' | 'g' | 'defs' | 'title'>;
+export type SvgChildren = SvgElementType | SvgElementType[];
+type Props = {
+    children: SvgChildren;
+    [attr: string]: unknown;
+};
+export declare function BaseSvg({ children, ...attrs }: Props): JSX.Element;
+export {};

package/dist/components/BaseSvg.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import styled from 'styled-components';
+export function BaseSvg({ children, ...attrs }) {
+    return (React.createElement(StyledSvg, { xmlns: "http://www.w3.org/2000/svg", ...attrs }, children));
+}
+const StyledSvg = styled.svg `
+  display: block;
+`;

package/dist/components/Icon.d.ts

@@ -0,0 +1,7 @@
+import { SvgChildren } from './BaseSvg.js';
+type IconProps = {
+    children: SvgChildren;
+    size?: number | string;
+};
+export declare function Icon({ children, size }: IconProps): JSX.Element;
+export {};

package/dist/components/Icon.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BaseSvg } from './BaseSvg.js';
+export function Icon({ children, size = '100%' }) {
+    return (React.createElement(BaseSvg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }, children));
+}

package/dist/components/Illustration.d.ts

@@ -0,0 +1,8 @@
+import { SvgChildren } from './BaseSvg.js';
+type Props = {
+    children: SvgChildren;
+    viewBox: string;
+    size?: number | string;
+};
+export declare function Illustration({ children, viewBox, size }: Props): JSX.Element;
+export {};

package/dist/components/Illustration.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BaseSvg } from './BaseSvg.js';
+export function Illustration({ children, viewBox, size = '100%' }) {
+    return (React.createElement(BaseSvg, { width: size, height: size, viewBox: viewBox }, children));
+}

package/dist/components/KeyBox.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    value: string;
+    bgColor: string;
+    textColor: string;
+    size?: number;
+    fontSize?: number;
+};
+export declare function KeyBox({ value, bgColor, textColor, size, fontSize, }: Props): JSX.Element;
+export {};

package/dist/components/KeyBox.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+// https://stackoverflow.com/a/11752084/128816
+const isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
+const padding = 5;
+export function KeyBox({ value, bgColor, textColor, size = 24, fontSize = 14, }) {
+    const displayValue = value === '⌘' && !isMacLike ? 'Ctrl' : value;
+    return (React.createElement(Container, { style: {
+            backgroundColor: bgColor,
+            color: textColor,
+            minWidth: size - 2 * padding,
+            height: size,
+            padding: `0 ${padding}px`,
+            fontSize,
+            lineHeight: `${size}px`,
+        } }, displayValue));
+}
+const Container = styled.span `
+  flex-shrink: 0;
+  margin: 0 0 0 5px;
+  padding: 0 ${padding}px;
+  border-radius: 5px;
+  text-align: center;
+
+  :first-child {
+    margin-left: 0;
+  }
+`;

package/dist/components/SidePanel.d.ts

@@ -0,0 +1,10 @@
+export declare const SidePanelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SidePanelHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+type TitleProps = {
+    label: string;
+    componentName?: string;
+};
+export declare function SidePanelTitle({ label, componentName }: TitleProps): JSX.Element;
+export declare const SidePanelActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SidePanelBody: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/dist/components/SidePanel.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+import { grey128, grey160, grey32, white10 } from '../style/colors.js';
+export const SidePanelContainer = styled.div `
+  background: ${grey32};
+  border-top: 1px solid ${white10};
+
+  :first-child {
+    border-top: none;
+  }
+`;
+export const SidePanelHeader = styled.div `
+  height: 40px;
+  padding: 0 4px 0 24px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+export function SidePanelTitle({ label, componentName }) {
+    return (React.createElement(TitleContainer, null,
+        React.createElement(TitleLabel, null, label),
+        typeof componentName === 'string' && (React.createElement(ComponentName, null, componentName ? componentName : React.createElement("em", null, "Unnamed")))));
+}
+export const SidePanelActions = styled.div `
+  display: flex;
+  flex-direction: row;
+
+  > button {
+    margin-left: 4px;
+
+    :first-child {
+      margin-left: 0;
+    }
+  }
+`;
+export const SidePanelBody = styled.div `
+  padding: 0 4px 8px 4px;
+`;
+const TitleContainer = styled.div `
+  color: ${grey128};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const TitleLabel = styled.span `
+  text-transform: uppercase;
+`;
+const ComponentName = styled.span `
+  padding-left: 8px;
+  color: ${grey160};
+`;

package/dist/components/Space.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    width: number;
+} | {
+    height: number;
+};
+export declare function Space(props: Props): JSX.Element;
+export {};

package/dist/components/Space.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import styled from 'styled-components';
+export function Space(props) {
+    return React.createElement(StyledSpace, { style: props });
+}
+const StyledSpace = styled.div `
+  flex-shrink: 0;
+`;

package/dist/components/TreeView.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { TreeNode } from 'react-cosmos-core';
+import { TreeExpansion } from '../shared/treeExpansion.js';
+type Props<Item> = {
+    node: TreeNode<Item>;
+    name?: string;
+    parents?: string[];
+    expansion: TreeExpansion;
+    setExpansion: (expansion: TreeExpansion) => unknown;
+    renderNode: (args: {
+        node: TreeNode<Item>;
+        name: string;
+        parents: string[];
+        expanded: boolean;
+        onToggle: () => unknown;
+    }) => ReactNode;
+};
+export declare function TreeView<Item>({ node, name, parents, expansion, setExpansion, renderNode, }: Props<Item>): JSX.Element;
+export {};

package/dist/components/TreeView.js

@@ -0,0 +1,26 @@
+import React, { useCallback } from 'react';
+// The root doesn't have a name and its data isn't rendered
+// And the children of the root node are always expanded
+export function TreeView({ node, name, parents = [], expansion, setExpansion, renderNode, }) {
+    const expanded = name ? expansion[getTreeNodePath(parents, name)] : true;
+    const onToggle = useCallback(() => {
+        if (name) {
+            const nodePath = getTreeNodePath(parents, name);
+            setExpansion({ ...expansion, [nodePath]: !expansion[nodePath] });
+        }
+    }, [expansion, name, parents, setExpansion]);
+    const { children } = node;
+    return (React.createElement(React.Fragment, null,
+        name !== undefined &&
+            renderNode({ node, name, parents, expanded, onToggle }),
+        children &&
+            expanded &&
+            Object.keys(children).map(childName => {
+                const childNode = children[childName];
+                const nextParents = name ? [...parents, name] : parents;
+                return (React.createElement(TreeView, { key: childName, node: childNode, name: childName, parents: nextParents, expansion: expansion, setExpansion: setExpansion, renderNode: renderNode }));
+            })));
+}
+function getTreeNodePath(parents, name) {
+    return [...parents, name].join('/');
+}

package/dist/components/ValueInputTree/ExpandCollapseValues.d.ts

@@ -0,0 +1,9 @@
+import { FixtureStateValues } from 'react-cosmos-core';
+import { TreeExpansion } from '../../shared/treeExpansion.js';
+type Props = {
+    values: FixtureStateValues;
+    expansion: TreeExpansion;
+    setExpansion: (treeExpansion: TreeExpansion) => unknown;
+};
+export declare function ExpandCollapseValues({ values, expansion, setExpansion, }: Props): JSX.Element | null;
+export {};

package/dist/components/ValueInputTree/ExpandCollapseValues.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { getFullTreeExpansion, hasExpandableNodes, isTreeFullyCollapsed, } from '../../shared/treeExpansion.js';
+import { IconButton32 } from '../buttons/index.js';
+import { MinusSquareIcon, PlusSquareIcon } from '../icons/index.js';
+import { createValueTree } from './valueTree.js';
+export function ExpandCollapseValues({ values, expansion, setExpansion, }) {
+    const rootNode = createValueTree(values);
+    if (!hasExpandableNodes(rootNode))
+        return null;
+    return isTreeFullyCollapsed(expansion) ? (React.createElement(IconButton32, { title: "Expand all fixture tree folders", icon: React.createElement(PlusSquareIcon, null), onClick: () => setExpansion(getFullTreeExpansion(rootNode)) })) : (React.createElement(IconButton32, { title: "Collapse all fixture tree folders", icon: React.createElement(MinusSquareIcon, null), onClick: () => setExpansion({}) }));
+}

package/dist/components/ValueInputTree/ValueInput/BooleanValueInput.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    id: string;
+    name: string;
+    data: boolean;
+    onChange: (data: boolean) => unknown;
+};
+export declare function BooleanValueInput({ id, name, data, onChange }: Props): JSX.Element;
+export {};

package/dist/components/ValueInputTree/ValueInput/BooleanValueInput.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import { blue, lightBlue } from '../../../style/colors.js';
+import { Label, ValueDataContainer } from './shared.js';
+export function BooleanValueInput({ id, name, data, onChange }) {
+    const onToggle = React.useCallback(() => onChange(!data), [onChange, data]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Label, { title: name, as: "span", onClick: onToggle }, name),
+        React.createElement(ValueDataContainer, null,
+            React.createElement(BooleanButton, { onClick: onToggle }, data ? 'true' : 'false'))));
+}
+const BooleanButton = styled.button `
+  height: 24px;
+  margin: 0;
+  padding: 0 5px;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  color: ${lightBlue};
+  font-size: 14px;
+  line-height: 24px;
+  outline: none;
+  user-select: none;
+
+  :focus {
+    box-shadow: 0 0 0.5px 1px ${blue};
+  }
+
+  ::-moz-focus-inner {
+    border: 0;
+  }
+`;

package/dist/components/ValueInputTree/ValueInput/NullValueInput.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    name: string;
+};
+export declare function NullValueInput({ name }: Props): JSX.Element;
+export {};

package/dist/components/ValueInputTree/ValueInput/NullValueInput.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Label, UneditableInput, ValueDataContainer } from './shared.js';
+export function NullValueInput({ name }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Label, { title: name, disabled: true }, name),
+        React.createElement(ValueDataContainer, null,
+            React.createElement(UneditableInput, null,
+                React.createElement("em", null, "null")))));
+}

package/dist/components/ValueInputTree/ValueInput/NumberValueInput.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    id: string;
+    name: string;
+    data: number;
+    onChange: (newValue: number) => unknown;
+};
+export declare function NumberValueInput({ id, name, data, onChange }: Props): JSX.Element;
+export {};

package/dist/components/ValueInputTree/ValueInput/NumberValueInput.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { blue, grey248, grey8 } from '../../../style/colors.js';
+import { NumberInput } from '../../inputs/NumberInput.js';
+import { Label, ValueDataContainer } from './shared.js';
+export function NumberValueInput({ id, name, data, onChange }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Label, { title: name, htmlFor: id }, name),
+        React.createElement(ValueDataContainer, null,
+            React.createElement(NumberInput, { id: id, value: data, styles: {
+                    focusedColor: grey248,
+                    focusedBg: grey8,
+                    focusedBoxShadow: `0 0 0.5px 1px ${blue}`,
+                }, onChange: onChange }))));
+}

package/dist/components/ValueInputTree/ValueInput/StringValueInput.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    id: string;
+    name: string;
+    data: string;
+    onChange: (data: string) => unknown;
+};
+export declare function StringValueInput({ id, name, data, onChange }: Props): JSX.Element;
+export {};

package/dist/components/ValueInputTree/ValueInput/StringValueInput.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useFocus } from '../../../hooks/useFocus.js';
+import { blue, grey248, grey8 } from '../../../style/colors.js';
+import { TextContainer, TextField, TextInputContainer, TextMirror, } from '../../inputs/shared.js';
+import { Label, ValueDataContainer } from './shared.js';
+export function StringValueInput({ id, name, data, onChange }) {
+    const { focused, onFocus, onBlur } = useFocus();
+    const onInputChange = React.useCallback((e) => onChange(e.currentTarget.value), [onChange]);
+    // Mirror textarea behavior and add an extra row after user adds a new line
+    const mirrorText = focused ? data.replace(/\n$/, `\n `) : data;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Label, { title: name, htmlFor: id }, name),
+        React.createElement(ValueDataContainer, null,
+            React.createElement(TextInputContainer, { focused: focused, focusedBg: grey8, focusedBoxShadow: `0 0 0.5px 1px ${blue}` },
+                React.createElement(TextContainer, null,
+                    React.createElement(TextMirror, { minWidth: 64, focused: focused }, data.length > 0 || focused ? mirrorText : React.createElement("em", null, "empty")),
+                    React.createElement(TextField, { rows: 1, id: id, value: data, focused: focused, color: grey248, onChange: onInputChange, onFocus: onFocus, onBlur: onBlur }))))));
+}

package/dist/components/ValueInputTree/ValueInput/UndefinedValueInput.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    name: string;
+};
+export declare function UndefinedValueInput({ name }: Props): JSX.Element;
+export {};

package/dist/components/ValueInputTree/ValueInput/UndefinedValueInput.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Label, UneditableInput, ValueDataContainer } from './shared.js';
+export function UndefinedValueInput({ name }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Label, { title: name, disabled: true }, name),
+        React.createElement(ValueDataContainer, null,
+            React.createElement(UneditableInput, null,
+                React.createElement("em", null, "undefined")))));
+}

package/dist/components/ValueInputTree/ValueInput/UnserializableValueInput.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    name: string;
+    data: string;
+};
+export declare function UnserializableValueInput({ name, data }: Props): JSX.Element;
+export {};

package/dist/components/ValueInputTree/ValueInput/UnserializableValueInput.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Label, UneditableInput, ValueDataContainer } from './shared.js';
+export function UnserializableValueInput({ name, data }) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Label, { title: name, disabled: true }, name),
+        React.createElement(ValueDataContainer, null,
+            React.createElement(UneditableInput, { title: data }, trimMultilineValue(data)))));
+}
+function trimMultilineValue(data) {
+    return data.indexOf(`\n`) !== -1 ? `${data.split(`\n`)[0]}...` : data;
+}

package/dist/components/ValueInputTree/ValueInput/ValueInput.d.ts

@@ -0,0 +1,11 @@
+import { PrimitiveData } from 'react-cosmos-core';
+import { LeafValue } from '../shared.js';
+type Props = {
+    value: LeafValue;
+    name: string;
+    id: string;
+    indentLevel: number;
+    onChange: (data: PrimitiveData) => unknown;
+};
+export declare function ValueInput({ value, name, id, indentLevel, onChange }: Props): JSX.Element;
+export {};

package/dist/components/ValueInputTree/ValueInput/ValueInput.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ValueInputSlot } from '../../../slots/ValueInputSlot.js';
+import { ValueTreeItem } from '../shared.js';
+import { BooleanValueInput } from './BooleanValueInput.js';
+import { NullValueInput } from './NullValueInput.js';
+import { NumberValueInput } from './NumberValueInput.js';
+import { ValueInputContainer } from './shared.js';
+import { StringValueInput } from './StringValueInput.js';
+import { UndefinedValueInput } from './UndefinedValueInput.js';
+import { UnserializableValueInput } from './UnserializableValueInput.js';
+export function ValueInput({ value, name, id, indentLevel, onChange }) {
+    return (React.createElement(ValueInputSlot, { slotProps: { id, name, value, indentLevel, onChange } },
+        React.createElement(ValueTreeItem, { indentLevel: indentLevel },
+            React.createElement(ValueInputContainer, null, getInput(id, name, value, onChange)))));
+}
+function getInput(id, name, value, onChange) {
+    if (value.type === 'unserializable')
+        return (React.createElement(UnserializableValueInput, { name: name, data: value.stringifiedData }));
+    if (typeof value.data === 'string')
+        return (React.createElement(StringValueInput, { id: id, name: name, data: value.data, onChange: onChange }));
+    if (typeof value.data === 'number')
+        return (React.createElement(NumberValueInput, { id: id, name: name, data: value.data, onChange: onChange }));
+    if (typeof value.data === 'boolean')
+        return (React.createElement(BooleanValueInput, { id: id, name: name, data: value.data, onChange: onChange }));
+    if (value.data === null)
+        return React.createElement(NullValueInput, { name: name });
+    if (value.data === undefined)
+        return React.createElement(UndefinedValueInput, { name: name });
+    throw new Error(`Invalid primitive value: ${value.data}`);
+}

package/dist/components/ValueInputTree/ValueInput/shared.d.ts

@@ -0,0 +1,6 @@
+export declare const Label: import("styled-components").StyledComponent<"label", any, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const ValueInputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ValueDataContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const UneditableInput: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/components/ValueInputTree/ValueInput/shared.js

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+import { disabledColors, grey128, grey224 } from '../../../style/colors.js';
+export const Label = styled.label `
+  padding: 0;
+  color: ${disabledColors(grey224, grey128)};
+  font-size: 14px;
+  user-select: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+export const ValueInputContainer = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  min-height: 28px;
+  line-height: 28px;
+  padding: 0 0 0 20px;
+`;
+export const ValueDataContainer = styled.div `
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  min-width: 44px;
+  min-height: 28px;
+  box-sizing: border-box;
+  padding: 2px 2px 2px 3px;
+  overflow: hidden;
+`;
+export const UneditableInput = styled.span `
+  box-sizing: border-box;
+  height: 24px;
+  padding: 2px 5px;
+  line-height: 20px;
+  color: ${grey128};
+  font-style: italic;
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: not-allowed;
+`;

package/dist/components/ValueInputTree/ValueInputDir.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    name: string;
+    childNames: string[];
+    expanded: boolean;
+    indentLevel: number;
+    onToggle: () => unknown;
+};
+export declare function ValueInputDir({ name, childNames, expanded, indentLevel, onToggle, }: Props): JSX.Element;
+export {};

package/dist/components/ValueInputTree/ValueInputDir.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import styled from 'styled-components';
+import { blue, disabledColors, grey128, grey160, grey224, } from '../../style/colors.js';
+import { ChevronDownIcon, ChevronRightIcon } from '../icons/index.js';
+import { ValueTreeItem } from './shared.js';
+export function ValueInputDir({ name, childNames, expanded, indentLevel, onToggle, }) {
+    const disabled = childNames.length === 0;
+    return (React.createElement(ValueTreeItem, { indentLevel: indentLevel },
+        React.createElement(ButtonContainer, null,
+            React.createElement(Button, { disabled: disabled, onClick: onToggle },
+                React.createElement(React.Fragment, null,
+                    !disabled && (React.createElement(ChevronContainer, null, expanded ? React.createElement(ChevronDownIcon, null) : React.createElement(ChevronRightIcon, null))),
+                    React.createElement(Text, null,
+                        React.createElement(DirName, { disabled: disabled }, name),
+                        React.createElement(ChildrenInfo, null, getChildInfo(childNames))))))));
+}
+function getChildInfo(childNames) {
+    return childNames.length > 0 ? `{ ${childNames.join(', ')} }` : `{}`;
+}
+const ButtonContainer = styled.div `
+  padding: 2px 0;
+`;
+const Button = styled.button `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  max-width: 100%;
+  height: 24px;
+  margin: 0;
+  padding: 0 4px;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  font-size: 14px;
+  line-height: 24px;
+  text-align: left;
+  outline: none;
+  white-space: nowrap;
+
+  :focus {
+    box-shadow: 0 0 0.5px 1px ${blue};
+  }
+
+  ::-moz-focus-inner {
+    border: 0;
+  }
+`;
+const iconSize = 16;
+const ChevronContainer = styled.span `
+  flex-shrink: 0;
+  width: ${iconSize}px;
+  height: ${iconSize}px;
+  margin: 0 0 0 -2px;
+  padding: 0px 2px 0 0;
+  color: ${grey160};
+`;
+const Text = styled.span `
+  color: ${grey128};
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const DirName = styled.span `
+  color: ${disabledColors(grey224, grey128)};
+  padding: 0 0 0 ${props => (props.disabled ? 16 : 0)}px;
+`;
+const ChildrenInfo = styled.span `
+  padding: 0 0 0 6px;
+`;

package/dist/components/ValueInputTree/ValueInputTree.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FixtureStateValues } from 'react-cosmos-core';
+import { TreeExpansion } from '../../shared/treeExpansion.js';
+type Props = {
+    id: string;
+    values: FixtureStateValues;
+    expansion: TreeExpansion;
+    setExpansion: (expansion: TreeExpansion) => unknown;
+    onValueChange: (values: FixtureStateValues) => unknown;
+};
+export declare const ValueInputTree: React.NamedExoticComponent<Props>;
+export {};

package/dist/components/ValueInputTree/ValueInputTree.js

@@ -0,0 +1,32 @@
+import { clone, setWith } from 'lodash-es';
+import React from 'react';
+import styled from 'styled-components';
+import { grey248, grey32 } from '../../style/colors.js';
+import { TreeView } from '../TreeView.js';
+import { ValueInput } from './ValueInput/ValueInput.js';
+import { ValueInputDir } from './ValueInputDir.js';
+import { createValueTree } from './valueTree.js';
+export const ValueInputTree = React.memo(function ValueInputTree({ id, values, expansion, setExpansion, onValueChange, }) {
+    const rootNode = createValueTree(values);
+    return (React.createElement(Container, null,
+        React.createElement(TreeView, { node: rootNode, expansion: expansion, setExpansion: setExpansion, renderNode: ({ node, name, parents, expanded, onToggle }) => {
+                const { data, children } = node;
+                if (data.type === 'item')
+                    return (React.createElement(ValueInput, { value: data.value, name: name, id: getInputId(id, parents, name), indentLevel: parents.length, onChange: newData => onValueChange(setValueAtPath(values, { type: 'primitive', data: newData }, getValuePath(name, parents))) }));
+                return (children && (React.createElement(ValueInputDir, { name: name, childNames: Object.keys(children), expanded: expanded, indentLevel: parents.length, onToggle: onToggle })));
+            } })));
+});
+function getInputId(treeId, parents, name) {
+    return `${treeId}-${[...parents, name].join('-')}`;
+}
+function getValuePath(valueKey, parentKeys) {
+    return [...parentKeys.map(p => `${p}.values`), valueKey].join('.');
+}
+function setValueAtPath(values, newValue, valuePath) {
+    // Inspired by https://github.com/lodash/lodash/issues/1696#issuecomment-328335502
+    return setWith(clone(values), valuePath, newValue, clone);
+}
+const Container = styled.div `
+  background: ${grey32};
+  color: ${grey248};
+`;

package/dist/components/ValueInputTree/index.d.ts

@@ -0,0 +1,4 @@
+export { stringifyElementId, stringifyFixtureId } from './shared.js';
+export { hasFsValues, sortFsValueGroups } from './valueGroups.js';
+export { ValueInputTree } from './ValueInputTree.js';
+export { FixtureExpansion, FixtureExpansionGroup, getFixtureExpansion, OnElementExpansionChange, updateElementExpansion, } from './valueTreeExpansion.js';