@cratis/scene.components 0.1.0

package/toolbar/SceneToolbar.tsx

@@ -0,0 +1,28 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Toolbar } from '@cratis/components/Toolbar';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, unionProperty } from '../properties';
+
+/** Whether the toolbar runs down the side or across the top. */
+const orientations = ['vertical', 'horizontal'] as const;
+
+/**
+ * The `Cratis.Components:toolbar` component - `Toolbar` from `@cratis/components/Toolbar`.
+ *
+ * The container for a tool palette: it draws the rounded chrome and, more importantly, establishes the
+ * drag context every `toolbarButton` inside it reads. `draggable` therefore belongs here rather than on
+ * each button - it is a property of the palette, and setting it per button is how you end up with a
+ * palette that is half draggable.
+ */
+export function SceneToolbar({ element, slots }: RegisteredComponentProps) {
+    return (
+        <Toolbar
+            orientation={unionProperty(element.properties, 'orientation', orientations)}
+            draggable={booleanProperty(element.properties, 'draggable')}
+        >
+            {slots.content}
+        </Toolbar>
+    );
+}

package/toolbar/SceneToolbarButton.tsx

@@ -0,0 +1,31 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ToolbarButton } from '@cratis/components/Toolbar';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { booleanProperty, stringProperty, unionProperty } from '../properties';
+
+/** Which side of the button its tooltip appears on. */
+const tooltipPositions = ['top', 'right', 'bottom', 'left'] as const;
+
+/**
+ * The `Cratis.Components:toolbarButton` component - `ToolbarButton` from `@cratis/components/Toolbar`.
+ *
+ * `title` is required by the underlying component and is not decoration: it is both the tooltip text and
+ * the accessible name, so a toolbar of icon-only buttons is still usable by anyone who cannot see the
+ * icons. It defaults to the `text` property rather than to an empty string, so a button that has a
+ * visible label is never left nameless.
+ */
+export function SceneToolbarButton({ element }: RegisteredComponentProps) {
+    const text = stringProperty(element.properties, 'text');
+
+    return (
+        <ToolbarButton
+            icon={stringProperty(element.properties, 'icon')}
+            text={text}
+            title={stringProperty(element.properties, 'title') ?? text ?? ''}
+            active={booleanProperty(element.properties, 'active')}
+            tooltipPosition={unionProperty(element.properties, 'tooltipPosition', tooltipPositions)}
+        />
+    );
+}

package/toolbar/SceneToolbarGroup.tsx

@@ -0,0 +1,28 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ToolbarGroup } from '@cratis/components/Toolbar';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { stringProperty, unionProperty } from '../properties';
+
+/** Whether the group's buttons stack or sit in a row. */
+const orientations = ['vertical', 'horizontal'] as const;
+
+/**
+ * The `Cratis.Components:toolbarGroup` component - `ToolbarGroup` from `@cratis/components/Toolbar`.
+ *
+ * Keeps related buttons together inside a toolbar. `slotName` opts the group into the library's toolbar
+ * slot mechanism, which lets content contributed from elsewhere in the application land in this group -
+ * the same idea as Scene's own contribution points, and the reason the property is worth exposing rather
+ * than treating the group as purely visual.
+ */
+export function SceneToolbarGroup({ element, slots }: RegisteredComponentProps) {
+    return (
+        <ToolbarGroup
+            slotName={stringProperty(element.properties, 'slotName')}
+            orientation={unionProperty(element.properties, 'orientation', orientations)}
+        >
+            {slots.content}
+        </ToolbarGroup>
+    );
+}

package/toolbar/SceneToolbarSeparator.tsx

@@ -0,0 +1,21 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ToolbarSeparator } from '@cratis/components/Toolbar';
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { unionProperty } from '../properties';
+
+/** Whether the separator is drawn as a horizontal rule or a vertical one. */
+const orientations = ['vertical', 'horizontal'] as const;
+
+/**
+ * The `Cratis.Components:toolbarSeparator` component - `ToolbarSeparator` from
+ * `@cratis/components/Toolbar`.
+ *
+ * The divider between groups of tools. Its `orientation` describes the *toolbar* it sits in rather than
+ * the line it draws - a vertical toolbar gets a horizontal rule - which matches how the toolbar's own
+ * `orientation` reads, so a screen sets the same value on both.
+ */
+export function SceneToolbarSeparator({ element }: RegisteredComponentProps) {
+    return <ToolbarSeparator orientation={unionProperty(element.properties, 'orientation', orientations)} />;
+}

package/toolbar/index.ts

@@ -0,0 +1,7 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './SceneToolbar';
+export * from './SceneToolbarButton';
+export * from './SceneToolbarGroup';
+export * from './SceneToolbarSeparator';