@orchestrator-ui/orchestrator-ui-components 0.2.4 → 0.2.6

package/src/stories/Page.jsx

@@ -4,65 +4,86 @@ import { Header } from './Header';
 import './page.css';
 
 export const Page = () => {
-  const [user, setUser] = React.useState();
+    const [user, setUser] = React.useState();
 
-  return (
-    <article>
-      <Header
-        user={user}
-        onLogin={() => setUser({ name: 'Jane Doe' })}
-        onLogout={() => setUser(undefined)}
-        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
-      />
-      <section className="storybook-page">
-        <h2>Pages in Storybook</h2>
-        <p>
-          We recommend building UIs with a{' '}
-          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
-            <strong>component-driven</strong>
-          </a>{' '}
-          process starting with atomic components and ending with pages.
-        </p>
-        <p>
-          Render pages with mock data. This makes it easy to build and review page states without
-          needing to navigate to them in your app. Here are some handy patterns for managing page
-          data in Storybook:
-        </p>
-        <ul>
-          <li>
-            Use a higher-level connected component. Storybook helps you compose such data from the
-            "args" of child component stories
-          </li>
-          <li>
-            Assemble data in the page component from your services. You can mock these services out
-            using Storybook.
-          </li>
-        </ul>
-        <p>
-          Get a guided tutorial on component-driven development at{' '}
-          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
-            Storybook tutorials
-          </a>
-          . Read more in the{' '}
-          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
-            docs
-          </a>
-          .
-        </p>
-        <div className="tip-wrapper">
-          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
-          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-            <g fill="none" fillRule="evenodd">
-              <path
-                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-                id="a"
-                fill="#999"
-              />
-            </g>
-          </svg>
-          Viewports addon in the toolbar
-        </div>
-      </section>
-    </article>
-  );
+    return (
+        <article>
+            <Header
+                user={user}
+                onLogin={() => setUser({ name: 'Jane Doe' })}
+                onLogout={() => setUser(undefined)}
+                onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+            />
+            <section className="storybook-page">
+                <h2>Pages in Storybook</h2>
+                <p>
+                    We recommend building UIs with a{' '}
+                    <a
+                        href="https://componentdriven.org"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <strong>component-driven</strong>
+                    </a>{' '}
+                    process starting with atomic components and ending with
+                    pages.
+                </p>
+                <p>
+                    Render pages with mock data. This makes it easy to build and
+                    review page states without needing to navigate to them in
+                    your app. Here are some handy patterns for managing page
+                    data in Storybook:
+                </p>
+                <ul>
+                    <li>
+                        Use a higher-level connected component. Storybook helps
+                        you compose such data from the "args" of child component
+                        stories
+                    </li>
+                    <li>
+                        Assemble data in the page component from your services.
+                        You can mock these services out using Storybook.
+                    </li>
+                </ul>
+                <p>
+                    Get a guided tutorial on component-driven development at{' '}
+                    <a
+                        href="https://storybook.js.org/tutorials/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        Storybook tutorials
+                    </a>
+                    . Read more in the{' '}
+                    <a
+                        href="https://storybook.js.org/docs"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        docs
+                    </a>
+                    .
+                </p>
+                <div className="tip-wrapper">
+                    <span className="tip">Tip</span> Adjust the width of the
+                    canvas with the{' '}
+                    <svg
+                        width="10"
+                        height="10"
+                        viewBox="0 0 12 12"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <g fill="none" fillRule="evenodd">
+                            <path
+                                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+                                id="a"
+                                fill="#999"
+                            />
+                        </g>
+                    </svg>
+                    Viewports addon in the toolbar
+                </div>
+            </section>
+        </article>
+    );
 };

package/src/stories/Page.stories.js

@@ -1,4 +1,5 @@
-import { within, userEvent } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/testing-library';
+
 import { Page } from './Page';
 
 export default {

package/src/stories/button.css

@@ -1,30 +1,30 @@
 .storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
+    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: 700;
+    border: 0;
+    border-radius: 3em;
+    cursor: pointer;
+    display: inline-block;
+    line-height: 1;
 }
 .storybook-button--primary {
-  color: white;
-  background-color: #1ea7fd;
+    color: white;
+    background-color: #1ea7fd;
 }
 .storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+    color: #333;
+    background-color: transparent;
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
 }
 .storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
+    font-size: 12px;
+    padding: 10px 16px;
 }
 .storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
+    font-size: 14px;
+    padding: 11px 20px;
 }
 .storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
+    font-size: 16px;
+    padding: 12px 24px;
 }

package/src/stories/colors.mdx

@@ -0,0 +1,12 @@
+import {
+    ColorPallete,
+    ColorItem,
+    Meta,
+    Title,
+    Description,
+} from '@storybook/blocks';
+import { Colors } from './colors';
+
+# Colors
+
+<Colors />

package/src/stories/colors.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { ColorItem, ColorPalette } from '@storybook/blocks';
+
+import { useOrchestratorTheme } from '../hooks';
+
+export const Colors = () => {
+    const { theme, toSecondaryColor } = useOrchestratorTheme();
+    const colorItems = [];
+    const themeColors = theme.colors;
+
+    if (themeColors) {
+        for (const [name, hex] of Object.entries(themeColors)) {
+            const color = hex as string; // Casting here because TS gets confused by the LIGHT/DARK theme pattern and cant decide
+            colorItems.push(
+                <ColorItem
+                    key={name}
+                    title={name}
+                    subtitle="toSecondary"
+                    colors={[color, toSecondaryColor(color)]}
+                />,
+            );
+        }
+    }
+
+    return <ColorPalette>{colorItems}</ColorPalette>;
+};

package/src/stories/header.css

@@ -1,32 +1,32 @@
 .storybook-header {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 15px 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 15px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
 .storybook-header svg {
-  display: inline-block;
-  vertical-align: top;
+    display: inline-block;
+    vertical-align: top;
 }
 
 .storybook-header h1 {
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 1;
-  margin: 6px 0 6px 10px;
-  display: inline-block;
-  vertical-align: top;
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 1;
+    margin: 6px 0 6px 10px;
+    display: inline-block;
+    vertical-align: top;
 }
 
 .storybook-header button + button {
-  margin-left: 10px;
+    margin-left: 10px;
 }
 
 .storybook-header .welcome {
-  color: #333;
-  font-size: 14px;
-  margin-right: 10px;
+    color: #333;
+    font-size: 14px;
+    margin-right: 10px;
 }

package/src/stories/page.css

@@ -1,69 +1,69 @@
 .storybook-page {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 24px;
-  padding: 48px 20px;
-  margin: 0 auto;
-  max-width: 600px;
-  color: #333;
+    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 24px;
+    padding: 48px 20px;
+    margin: 0 auto;
+    max-width: 600px;
+    color: #333;
 }
 
 .storybook-page h2 {
-  font-weight: 700;
-  font-size: 32px;
-  line-height: 1;
-  margin: 0 0 4px;
-  display: inline-block;
-  vertical-align: top;
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 1;
+    margin: 0 0 4px;
+    display: inline-block;
+    vertical-align: top;
 }
 
 .storybook-page p {
-  margin: 1em 0;
+    margin: 1em 0;
 }
 
 .storybook-page a {
-  text-decoration: none;
-  color: #1ea7fd;
+    text-decoration: none;
+    color: #1ea7fd;
 }
 
 .storybook-page ul {
-  padding-left: 30px;
-  margin: 1em 0;
+    padding-left: 30px;
+    margin: 1em 0;
 }
 
 .storybook-page li {
-  margin-bottom: 8px;
+    margin-bottom: 8px;
 }
 
 .storybook-page .tip {
-  display: inline-block;
-  border-radius: 1em;
-  font-size: 11px;
-  line-height: 12px;
-  font-weight: 700;
-  background: #e7fdd8;
-  color: #66bf3c;
-  padding: 4px 12px;
-  margin-right: 10px;
-  vertical-align: top;
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #e7fdd8;
+    color: #66bf3c;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
 }
 
 .storybook-page .tip-wrapper {
-  font-size: 13px;
-  line-height: 20px;
-  margin-top: 40px;
-  margin-bottom: 40px;
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
 }
 
 .storybook-page .tip-wrapper svg {
-  display: inline-block;
-  height: 12px;
-  width: 12px;
-  margin-right: 4px;
-  vertical-align: top;
-  margin-top: 3px;
+    display: inline-block;
+    height: 12px;
+    width: 12px;
+    margin-right: 4px;
+    vertical-align: top;
+    margin-top: 3px;
 }
 
 .storybook-page .tip-wrapper svg path {
-  fill: #1ea7fd;
+    fill: #1ea7fd;
 }

package/src/theme/defaultOrchestratorTheme.ts

@@ -1,6 +1,19 @@
 import { EuiThemeModifications } from '@elastic/eui';
 
 export const defaultOrchestratorTheme: EuiThemeModifications = {
+    base: 16,
+    size: {
+        base: '16px',
+        xxs: '2px',
+        xs: '4px',
+        s: '8px',
+        m: '12px',
+        l: '24px',
+        xl: '32px',
+        xxl: '40px',
+        xxxl: '48px',
+        xxxxl: '64px',
+    },
     colors: {
         DARK: {},
         LIGHT: {
@@ -40,4 +53,7 @@ export const defaultOrchestratorTheme: EuiThemeModifications = {
             bold: 700,
         },
     },
+    border: {
+        thin: 'solid 1px #ddd',
+    },
 };

package/src/types/forms.ts

@@ -0,0 +1,40 @@
+import { Ref } from 'react';
+
+import { JSONSchema6 } from 'json-schema';
+import { HTMLFieldProps } from 'uniforms';
+
+export interface ValidationError {
+    input_type: string;
+    loc: (string | number)[];
+    msg: string;
+    type: string;
+    ctx?: ValidationErrorContext;
+}
+
+export interface ValidationErrorContext {
+    [index: string]: string;
+}
+export interface Form {
+    stepUserInput?: JSONSchema6;
+    hasNext?: boolean;
+}
+
+export type InputForm = JSONSchema6;
+export interface FormNotCompleteResponse {
+    form: InputForm;
+    hasNext?: boolean;
+}
+
+export type FieldProps<
+    Value,
+    Extra = object,
+    InputElementType = HTMLInputElement,
+    ElementType = HTMLDivElement,
+> = HTMLFieldProps<
+    Value,
+    ElementType,
+    {
+        inputRef?: Ref<InputElementType>;
+        description?: string;
+    } & Extra
+>;

package/src/types/index.ts

@@ -1,2 +1 @@
 export * from './types';
-export * from './subscription';