@fortanix/baklava 1.0.0-beta-20241114

package/src/components/containers/Dialog/Dialog.tsx

@@ -0,0 +1,130 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { classNames as cx, type ClassNameArgument } from '../../../util/componentUtil.ts';
+import * as React from 'react';
+
+import { Button } from '../../actions/Button/Button.tsx';
+
+import cl from './Dialog.module.scss';
+
+
+export { cl as DialogClassNames };
+
+/*
+const useClickOutside = <E extends HTMLElement>(ref: React.RefObject<E>, callback: () => void) => {
+  const handleEvent = React.useCallback((event: React.PointerEvent<E>) => {
+    if (ref && ref.current) {
+      if (ref.current.contains(event.target as Node)) {
+        React.setState({ hasClickedOutside: false });
+      } else {
+        React.setState({ hasClickedOutside: true });
+      }
+    }
+  }, [ref]);
+  
+  React.useEffect(() => {
+    if (!window.PointerEvent) { return; }
+    
+    document.addEventListener('pointerdown', handleEvent);
+    
+    return () => {
+      if (window.PointerEvent) {
+        document.removeEventListener('pointerdown', handleEvent);
+      } else {
+        document.removeEventListener('mousedown', handleEvent);
+        document.removeEventListener('touchstart', handleEvent);
+      }
+    }
+  }, []);
+
+  return [ref, hasClickedOutside];
+};
+*/
+
+
+export type DialogProps = React.PropsWithChildren<{
+  unstyled?: boolean,
+  active: boolean,
+  className?: ClassNameArgument,
+  onClose: () => void,
+}>;
+
+/**
+ * Dialog component.
+ */
+export const Dialog = ({ children, unstyled, className, active, onClose }: DialogProps) => {
+  const dialogRef = React.useRef<HTMLDialogElement>(null);
+  
+  /*
+  // Sync the `active` flag with the DOM dialog
+  React.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (dialog === null) { return; }
+    
+    if (active && !dialog.open) {
+      dialog.showDialog();
+    } else if (!active && dialog.open) {
+      dialog.close();
+    }
+  }, [active]);
+  */
+  
+  // Sync the dialog close event with the `active` flag
+  const handleCloseEvent = React.useCallback((event: Event): void => {
+    const dialog = dialogRef.current;
+    if (dialog === null) { return; }
+    
+    if (active && event.target === dialog) {
+      onClose();
+    }
+  }, [active, onClose]);
+  React.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (dialog === null) { return; }
+    
+    dialog.addEventListener('close', handleCloseEvent);
+    return () => { dialog.removeEventListener('close', handleCloseEvent); };
+  }, [handleCloseEvent]);
+  
+  const close = React.useCallback(() => {
+    onClose();
+  }, [onClose]);
+  
+  const handleDialogClick = React.useCallback((event: React.MouseEvent) => {
+    const dialog = dialogRef.current;
+    if (dialog !== null && event.target === dialog) {
+      // Note: clicking the backdrop just results in an event where the target is the `<dialog>` element. In order to
+      // distinguish between the backdrop and the dialog content, we assume that the `<dialog>` is fully covered by
+      // another element. In our case, `bk-dialog__content` must cover the whole `<dialog>` otherwise this will not work.
+      close();
+    }
+  }, [close]);
+  
+  return (
+    <dialog
+      open
+      ref={dialogRef}
+      className={cx({
+        bk: true,
+        [cl['bk-dialog']]: !unstyled,
+      }, className)}
+      onClick={handleDialogClick}
+    >
+      <header className={cl['bk-dialog__header']}>
+        <h1>Title</h1>
+        {/* <button autoFocus className="action" onClick={close}>✕</button> */}
+      </header>
+      
+      <section className={cx(cl['bk-dialog__content'], 'body-text')}>
+        {children}
+      </section>
+      
+      <footer className={cx(cl['bk-dialog__actions'])}>
+        <Button autoFocus variant="secondary" label="Cancel"/>
+        <Button variant="primary" label="Submit"/>
+      </footer>
+    </dialog>
+  );
+};

package/src/components/containers/Panel/Panel.module.scss

@@ -0,0 +1,32 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@use '../../../styling/defs.scss' as bk;
+
+@mixin bk-panel($name: bk-panel) {
+  --bk-panel-background-color: #{bk.$theme-card-background-default};
+  --bk-panel-border-color: #{bk.$theme-card-border-default};
+  
+  overflow: hidden;
+  
+  min-height: 4rem;
+  padding: 22px 26px;
+  background: var(--bk-panel-background-color);
+  border: 1px solid var(--bk-panel-border-color);
+  border-radius: 6px;
+}
+
+
+@layer baklava.components {
+  .bk-panel {
+    @include bk.component-base(bk-panel);
+    @include bk-panel;
+    
+    .bk-panel__heading {
+      margin-bottom: 0.8lh;
+      text-wrap: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}

package/src/components/containers/Panel/Panel.stories.tsx

@@ -0,0 +1,46 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Alert } from '../Alert/Alert.tsx';
+
+import { Panel } from './Panel.tsx';
+
+
+type PanelArgs = React.ComponentProps<typeof Panel>;
+type Story = StoryObj<typeof Panel>;
+
+export default {
+  component: Panel,
+  parameters: {
+    layout: 'padded',
+    design: { type: 'figma', url: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FnOF5w9LfPiJabQD5yPzCEp%2F2024-Design-System-UX%3Fnode-id%3D41%253A4484%26t%3DaJEqUzt6fUeABwmK-1' },
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    unstyled: false,
+    children: <Panel.Heading>Panel</Panel.Heading>,
+  },
+  render: (args) => <Panel {...args}/>,
+} satisfies Meta<PanelArgs>;
+
+
+export const Standard: Story = {};
+
+/** Multiple panels stacked. */
+export const Stacked: Story = {
+  render: (args) => (
+    <div style={{ display: 'flex', flexFlow: 'column', gap: '1.2rem' }}>
+      <Alert kind="info">
+        Panels have no margin by default. Use a flex/grid container to space the panels.
+      </Alert>
+      <Panel {...args}><Panel.Heading>Panel 1</Panel.Heading></Panel>
+      <Panel {...args}><Panel.Heading>Panel 2</Panel.Heading></Panel>
+    </div>
+  ),
+};

package/src/components/containers/Panel/Panel.tsx

@@ -0,0 +1,48 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react';
+import { classNames as cx, type ComponentProps } from '../../../util/componentUtil.ts';
+
+import { H4 } from '../../../typography/Heading/Heading.tsx';
+
+import cl from './Panel.module.scss';
+
+
+export { cl as PanelClassNames };
+
+
+export type PanelHeadingProps = React.PropsWithChildren<ComponentProps<typeof H4>>;
+export const PanelHeading = (props: PanelHeadingProps) => {
+  return <H4 {...props} className={cx(cl['bk-panel__heading'], props.className)}/>;
+};
+
+export type PanelProps = React.PropsWithChildren<ComponentProps<'section'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+}>;
+/**
+ * Panel component.
+ */
+export const Panel = Object.assign(
+  (props: PanelProps) => {
+    const { children, unstyled = false, ...propsRest } = props;
+    
+    return (
+      <section
+        {...propsRest}
+        className={cx(
+          'bk',
+          { [cl['bk-panel']]: !unstyled },
+          propsRest.className,
+        )}
+      >
+        {children}
+      </section>
+    );
+  },
+  {
+    Heading: PanelHeading,
+  },
+);

package/src/components/forms/context/Form/Form.module.scss

@@ -0,0 +1,11 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@use '../../../../styling/defs.scss' as bk;
+
+@layer baklava.components {
+  .bk-form {
+    @include bk.component-base(bk-form);
+  }
+}

package/src/components/forms/context/Form/Form.stories.tsx

@@ -0,0 +1,99 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import * as React from 'react';
+import { useFormStatus } from 'react-dom';
+
+import { Panel } from '../../../containers/Panel/Panel.tsx';
+import { InputField } from '../../fields/InputField/InputField.tsx';
+import { SubmitButton } from '../SubmitButton/SubmitButton.tsx';
+import { FormLayout } from '../../../../layouts/FormLayout/FormLayout.tsx';
+
+import { useFormContext, Form } from './Form.tsx';
+
+
+type FormArgs = React.ComponentProps<typeof Form>;
+type Story = StoryObj<FormArgs>;
+
+const FormWithState = (props: React.ComponentProps<typeof Form>) => {
+  const action = async (previousState: unknown, formData: FormData) => {
+    if (typeof props.action === 'function') {
+      return props.action?.(formData);
+    }
+    return null;
+  };
+  
+  const [state, formAction] = React.useActionState(action, null);
+  
+  // const formDataCached = React.useRef<null | FormData>(null);
+  // React.useEffect(() => {
+  //   if (formStatus.data !== null) {
+  //     formDataCached.current = formStatus.data;
+  //   }
+  // }, [formStatus.data]);
+  
+  return (
+    <Form {...props} action={formAction}>
+      {state &&
+        <Panel className="bk-body-text">
+          Submitted data:
+          {' '}
+          <pre>{JSON.stringify(state, null, 2)}</pre>
+        </Panel>
+      }
+      {props.children}
+    </Form>
+  );
+};
+
+export default {
+  component: Form,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+  },
+  args: {
+    children: 'Example',
+  },
+  render: (args) => (
+    <FormWithState {...args}>
+      <FormLayout>
+        {args.children}
+      </FormLayout>
+    </FormWithState>
+  ),
+} satisfies Meta<FormArgs>;
+
+
+export const Standard: Story = {
+  name: 'Form',
+  args: {
+    //nestable: true,
+    //onSubmit: (event) => { event.preventDefault(); console.log('submit', event); },
+    action: (formData) => {
+      //console.log('action', formData.get('field-1'));
+      return [...formData.entries()].reduce(
+        (acc, [fieldKey, field]) => {
+          if (Object.hasOwn(acc, fieldKey)) {
+            console.warn(`Found duplicate entries for key ${fieldKey}`);
+          }
+          acc[fieldKey] = field;
+          return acc;
+        },
+        {} as Record<string, unknown>,
+      );
+    },
+    children: (
+      <>
+        <InputField label="Field 1" name="field-1" placeholder="Example"/>
+        <InputField label="Field 2" name="field-2" placeholder="Example"/>
+        <SubmitButton/>
+      </>
+    ),
+  },
+};

package/src/components/forms/context/Form/Form.tsx

@@ -0,0 +1,106 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { classNames as cx, type ComponentProps } from '../../../../util/componentUtil.ts';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+
+import cl from './Form.module.scss';
+
+
+export { cl as FormClassNames };
+
+
+export type FormContext = {
+  formId: string,
+};
+export const FormContext = React.createContext<null | FormContext>(null);
+export const useFormContext = (): FormContext => {
+  const formContext = React.use(FormContext);
+  if (formContext === null) { throw new Error(`Missing FormContext provider`); }
+  return formContext;
+};
+
+
+export type FormProps = React.PropsWithChildren<ComponentProps<'form'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+  
+  /** Whether this form should be nestable (i.e. can contain other `<form>` elements). */
+  nestable?: undefined | boolean,
+}>;
+/**
+ * Top-level form wrapper component.
+ */
+export const Form = (props: FormProps) => {
+  const { unstyled = false, nestable, children, className, ...propsRest } = props;
+  
+  const formId = React.useId();
+  const [wrapperRef, setWrapperRef] = React.useState<null | React.ComponentRef<'div'>>(null);
+  
+  // Memoize to keep a stable reference
+  const context: FormContext = React.useMemo(() => ({ formId }), [formId]);
+  
+  const renderForm = ({ children }: { children: React.ReactNode }) => {
+    return (
+      <form
+        // Use POST by default to prevent (potentially sensitive) parameters from being leaked through GET params.
+        // Note: if `action` is a function, then React overrides `method` anyway (and React complains if it's set).
+        method={typeof propsRest.action === 'function' ? undefined : 'post'}
+        {...propsRest}
+        id={formId} // Do not allow override of `id` (breaks functionality)
+        onSubmit={(event) => {
+          // We support client only at the moment, so we want to always prevent default browser form submit behavior.
+          event.preventDefault();
+          
+          propsRest.onSubmit?.(event);
+          
+          React.startTransition(async () => {
+            // Optionally, we can clear the form for uncontrolled components, like default browser behavior. See:
+            // https://github.com/facebook/react/pull/29019
+            // https://github.com/facebook/react/issues/29034
+            //React.requestFormReset(event.target);
+            
+            if (typeof propsRest.action === 'function') {
+              // Call the user-provided action
+              const formData = new FormData(event.target as HTMLFormElement);
+              await propsRest.action(formData);
+            }
+          });
+        }}
+        {...nestable
+          ? { hidden: true }
+          : {
+            className: cx({
+              bk: true,
+              [cl['bk-form']]: !unstyled,
+            }, className)
+          }
+        }
+      >
+        <FormContext.Provider value={context}>
+          {children}
+        </FormContext.Provider>
+      </form>
+    );
+  };
+  
+  if (nestable) {
+    return (
+      <div
+        ref={setWrapperRef}
+        className={cx({
+          bk: true,
+          [cl['bk-form']]: !unstyled,
+        }, className)}
+      >
+        {wrapperRef &&
+          renderForm({ children: createPortal(children, wrapperRef) })
+        }
+      </div>
+    );
+  }
+  
+  return renderForm({ children });
+};

package/src/components/forms/context/Form/FormOptics.tsx

@@ -0,0 +1,109 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as O from 'optics-ts';
+
+import { classNames as cx, type ComponentProps } from '../../../../util/componentUtil.ts';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+
+import cl from './Form.module.scss';
+
+
+export { cl as FormClassNames };
+
+
+export type FormContext<T> = {
+  formId: string,
+  accessor: O.OpticFor<T>,
+};
+export const FormContext = React.createContext<null | FormContext<unknown>>(null);
+export const useFormContext = <T,>(): FormContext<T> => {
+  const formContext = React.use(FormContext);
+  if (formContext === null) { throw new Error(`Missing FormContext provider`); }
+  return formContext as FormContext<T>;
+};
+
+
+export type FormProps = React.PropsWithChildren<ComponentProps<'form'> & {
+  /** Whether this component should be unstyled. */
+  unstyled?: undefined | boolean,
+  
+  /** Whether this form should be nestable (i.e. can contain other `<form>` elements). */
+  nestable?: undefined | boolean,
+}>;
+/**
+ * Top-level form wrapper component.
+ */
+export const Form = (props: FormProps) => {
+  const { unstyled = false, nestable, children, className, ...propsRest } = props;
+  
+  const formId = React.useId();
+  const [wrapperRef, setWrapperRef] = React.useState<null | React.ComponentRef<'div'>>(null);
+  
+  // Memoize to keep a stable reference
+  const context: FormContext = React.useMemo(() => ({ formId }), [formId]);
+  
+  const renderForm = ({ children }: { children: React.ReactNode }) => {
+    return (
+      <form
+        // Use POST by default to prevent (potentially sensitive) parameters from being leaked through GET params.
+        // Note: if `action` is a function, then React overrides `method` anyway (and React complains if it's set).
+        method={typeof propsRest.action === 'function' ? undefined : 'post'}
+        {...propsRest}
+        id={formId} // Do not allow override of `id` (breaks functionality)
+        onSubmit={(event) => {
+          // We support client only at the moment, so we want to always prevent default browser form submit behavior.
+          event.preventDefault();
+          
+          propsRest.onSubmit?.(event);
+          
+          React.startTransition(async () => {
+            // Optionally, we can clear the form for uncontrolled components, like default browser behavior. See:
+            // https://github.com/facebook/react/pull/29019
+            // https://github.com/facebook/react/issues/29034
+            //React.requestFormReset(event.target);
+            
+            if (typeof propsRest.action === 'function') {
+              // Call the user-provided action
+              const formData = new FormData(event.target as HTMLFormElement);
+              await propsRest.action(formData);
+            }
+          });
+        }}
+        {...nestable
+          ? { hidden: true }
+          : {
+            className: cx({
+              bk: true,
+              [cl['bk-form']]: !unstyled,
+            }, className)
+          }
+        }
+      >
+        <FormContext.Provider value={context}>
+          {children}
+        </FormContext.Provider>
+      </form>
+    );
+  };
+  
+  if (nestable) {
+    return (
+      <div
+        ref={setWrapperRef}
+        className={cx({
+          bk: true,
+          [cl['bk-form']]: !unstyled,
+        }, className)}
+      >
+        {wrapperRef &&
+          renderForm({ children: createPortal(children, wrapperRef) })
+        }
+      </div>
+    );
+  }
+  
+  return renderForm({ children });
+};

package/src/components/forms/context/SubmitButton/SubmitButton.module.scss

@@ -0,0 +1,9 @@
+/* Copyright (c) Fortanix, Inc.
+|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
+|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@use '../../../../styling/defs.scss' as bk;
+
+@layer baklava.components {
+  /* empty */
+}