Skip to content

Commit

Permalink
707: Got storybook working for menu stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@tombogle
tombogle committed Feb 27, 2024
1 parent 302477e commit ab13997
Show file tree
Hide file tree
Showing 2 changed files with 175 additions and 115 deletions.
92 changes: 60 additions & 32 deletions src/stories/basics/context-menu.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,17 @@
import type { Meta, StoryObj } from '@storybook/react';
import { Command, ContextMenu } from 'platform-bible-react';
import { Command, ContextMenu, MenuProps } from 'platform-bible-react';
import { SingleColumnMenu } from 'platform-bible-utils';
import { LocalizedMenus } from '@shared/utils/menu-document-combiner';

const meta: Meta<typeof ContextMenu> = {
title: 'Basics/ContextMenu',
component: ContextMenu,
tags: ['autodocs'],
argTypes: {
items: { control: 'object' },
children: {
options: ['click', 'Normal', 'Paratext'],
mapping: {
Normal: <p>click me!</p>,
Paratext: <b>Paratext</b>,
},
},
},
};
export default meta;

type Story = StoryObj<typeof ContextMenu>;

// export const DefaultNoMenuItemsMeansNoMenu: Story = {
// args: {},
// };

export const Default: Story = {
render: (args) => (
<div>
Expand All @@ -42,46 +30,86 @@ export const Default: Story = {
function HandleMenuCommand(command: Command) {
if (command.command === 'storybookMenu.log') {
// eslint-disable-next-line no-console
console.log(command.name);
console.log(command.command);
} else if (command.command === 'storybookMenu.warn') {
// eslint-disable-next-line no-console
console.warn(command.name);
console.warn(command.command);
} else {
// eslint-disable-next-line no-console
console.error(`Unexpected command: ${command.name}`);
console.error(`Unexpected command: ${command.command}`);
}
}

function GetMenuDefinition(className: string) {
const menuDefinition = {
className,
commandHandler: HandleMenuCommand,
type LocalizedContextMenu = LocalizedMenus['defaultWebViewContextMenu'];

function GetMenuDefinition(): Partial<MenuProps> {
const contextMenuDefinition: LocalizedContextMenu = {
groups: {
'group.2': { order: 2, column: 'TODO: this should not be required' },
'group.1': { order: 1, column: 'TODO: this should not be required' },
},
items: [
{
name: 'Do something normal',
label: 'Do something scary',
localizeNotes: 'N/A',
tooltip: 'Proceed with caution!',
group: 'group.2',
order: 1,
command: 'storybookMenu.warn',
iconPathAfter: '/sample-icon.png',
},
{
label: 'Do something normal in group 2',
localizeNotes: 'N/A',
tooltip: 'Perform a normal action',
group: 'group.2',
order: 0,
command: 'storybookMenu.log',
iconPathBefore: '/sample-icon.png',
hasDivider: true,
},
{
name: 'Do something scary',
command: 'storybookMenu.warn',
iconPathAfter: '/sample-icon.png',
label: 'Do something normal in group 1',
localizeNotes: 'N/A',
tooltip: 'Perform a normal action',
group: 'group.1',
order: 0,
command: 'storybookMenu.log',
iconPathBefore: '/sample-icon.png',
},
{
label: 'Do something else in group 1',
localizeNotes: 'N/A',
tooltip: 'Perform another action',
group: 'group.1',
order: 1,
command: 'storybookMenu.other',
iconPathBefore: '/sample-icon.png',
},
],
};
return menuDefinition;

// TODO: As part of #425 (Menus: Stitch together back end services and UI components to get menu
// contributions working end-to-end), we will want to create a parallel type to SingleColumnMenu
// that should be used in the React components (and returned here) that does not expect the
// ReferencedItem keys, but rather takes a plain string.
return {
// eslint-disable-next-line no-type-assertion/no-type-assertion
menuDefinition: contextMenuDefinition as SingleColumnMenu,
commandHandler: HandleMenuCommand,
};
}

export const Normal: Story = {
args: GetMenuDefinition(''),
args: GetMenuDefinition(),
render: (args) => (
<div>
<p>Prior text</p>
<p>
<span>Some </span>
<span>
<ContextMenu {...args}>sample text to right-click</ContextMenu>
<ContextMenu {...args} commandHandler={HandleMenuCommand}>
sample text to right-click
</ContextMenu>
</span>
<span>.</span>
</p>
Expand All @@ -91,7 +119,7 @@ export const Normal: Story = {
};

export const Paratext: Story = {
args: GetMenuDefinition('paratext'),
args: GetMenuDefinition(),
render: (args) => (
<div>
<p>Prior text</p>
Expand All @@ -104,7 +132,7 @@ export const Paratext: Story = {
};

export const ParatextBright: Story = {
args: GetMenuDefinition('paratext bright'),
args: GetMenuDefinition(),
render: (args) => (
<div>
<p>Prior text</p>
Expand Down
198 changes: 115 additions & 83 deletions src/stories/basics/toolbar.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,125 @@
import { Typography } from '@mui/material';
import { LocalizedMenus } from '@shared/utils/menu-document-combiner';
import type { Meta, StoryObj } from '@storybook/react';
import { Toolbar, Command } from 'platform-bible-react';
import { Toolbar, Command, MultiColumnMenu } from 'platform-bible-react';

const meta: Meta<typeof Toolbar> = {
title: 'Basics/Toolbar',
component: Toolbar,
tags: ['autodocs'],
argTypes: {
menu: { control: 'object' },
className: { control: 'text' },
},
};
export default meta;

type LocalizedMainMenu = LocalizedMenus['mainMenu'];

const menuLayoutWithIcons: LocalizedMainMenu = {
columns: {
'column.one': { label: 'Menu One', order: 0 },
'column.two': { label: 'Empty', order: 2 },
'column.three': { label: 'Last Menu', order: 3, isExtensible: true },
isExtensible: false,
},
groups: {
'good.stuff': { column: 'column.one', order: 1 },
'okay.things': { column: 'column.one', order: 2 },
'last.items': { column: 'column.three', order: 1 },
},
items: [
{
label: 'Do something normal',
localizeNotes: 'Storybook toolbar menu > Column One > Do something normal',
group: 'good.stuff',
order: 1,
command: 'storybookToolbar.log',
},
{
label: 'Do something scary',
localizeNotes: 'Storybook toolbar menu > Column One > Do something scary',
group: 'okay.things',
order: 1,
command: 'storybookToolbar.warn',
},
// Note: The next two items are intentionally out of order.
{
label: 'Nonexistent command',
localizeNotes: 'Storybook toolbar menu > Column Three > Nonexistent command',
group: 'last.items',
order: 2,
command: 'storybookToolbar.nonexistent',
},
{
label: 'Log a message',
localizeNotes: 'Storybook toolbar menu > Column Three > Log a message',
group: 'last.items',
order: 1,
command: 'storybookToolbar.log',
},
],
};

const menuLayoutWithoutIcons: LocalizedMainMenu = {
columns: {
'column.one': { label: 'Menu One', order: 0 },
'column.two': { label: 'Empty', order: 2 },
'column.three': { label: 'Last Menu', order: 3, isExtensible: true },
isExtensible: false,
},
groups: {
'good.stuff': { column: 'column.one', order: 1 },
'okay.things': { column: 'column.one', order: 2 },
'last.items': { column: 'column.three', order: 1 },
},
items: [
{
label: 'Do something normal',
localizeNotes: 'Storybook toolbar menu > Column One > Do something normal',
group: 'good.stuff',
order: 1,
command: 'storybookToolbar.log',
iconPathBefore: '/sample-icon.png',
},
{
label: 'Do something scary',
localizeNotes: 'Storybook toolbar menu > Column One > Do something scary',
group: 'okay.things',
order: 1,
command: 'storybookToolbar.warn',
iconPathAfter: '/sample-icon.png',
},
// Note: The next two items are intentionally out of order.
{
label: 'Nonexistent command',
localizeNotes: 'Storybook toolbar menu > Column Three > Nonexistent command',
group: 'last.items',
order: 2,
command: 'storybookToolbar.nonexistent',
},
{
label: 'Log a message',
localizeNotes: 'Storybook toolbar menu > Column Three > Log a message',
group: 'last.items',
order: 1,
command: 'storybookToolbar.log',
iconPathBefore: '/sample-icon.png',
iconPathAfter: '/sample-icon.png',
},
],
};

function provideMenuData(isSupportAndDevelopment: boolean): MultiColumnMenu {
// TODO: As part of #425 (Menus: Stitch together back end services and UI components to get menu
// contributions working end-to-end), we will want to create a parallel type to MultiColumnMenu
// that should be used in the React components (and returned here) that does not expect the
// ReferencedItem keys, but rather takes a plain string.
// eslint-disable-next-line no-type-assertion/no-type-assertion
return (
isSupportAndDevelopment ? menuLayoutWithoutIcons : menuLayoutWithIcons
) as MultiColumnMenu;
}

type Story = StoryObj<typeof Toolbar>;

export const Default: Story = {
Expand All @@ -35,95 +143,19 @@ export const ParatextBright: Story = {
function HandleMenuCommand(command: Command) {
if (command.command === 'storybookToolbar.log') {
// eslint-disable-next-line no-console
console.log(command.name);
console.log(command.command);
} else if (command.command === 'storybookToolbar.warn') {
// eslint-disable-next-line no-console
console.warn(command.name);
console.warn(command.command);
} else {
// eslint-disable-next-line no-console
console.error(`Unexpected command: ${command.name}`);
console.error(`Unexpected command: ${command.command}`);
}
}

export const WithMenu: Story = {
export const WithMenuHoldShiftToSeeIcons: Story = {
args: {
commandHandler: HandleMenuCommand,
menu: {
columns: [
{
name: 'Menu One',
items: [
{
name: 'Do something normal',
command: 'storybookToolbar.log',
hasDivider: true,
},
{
name: 'Do something scary',
command: 'storybookToolbar.warn',
},
],
},
{
name: 'Empty Menu',
items: [],
},
{
name: 'Last Menu',
items: [
{
name: 'Log a message',
command: 'storybookToolbar.log',
isDense: true,
},
{
name: 'Nonexistent command',
command: 'storybookToolbar.nonexistent',
isDense: true,
},
],
},
],
},
},
};

export const WithMenuWithIcons: Story = {
args: {
commandHandler: HandleMenuCommand,
menu: {
columns: [
{
name: 'Menu One',
items: [
{
name: 'Do something normal',
command: 'storybookToolbar.log',
iconPathBefore: '/sample-icon.png',
},
{
name: 'Do something scary',
command: 'storybookToolbar.warn',
iconPathAfter: '/sample-icon.png',
},
],
},
{
name: 'Last Menu',
items: [
{
name: 'Log a message',
command: 'storybookToolbar.log',
iconPathBefore: '/sample-icon.png',
iconPathAfter: '/sample-icon.png',
},
{
name: 'Nonexistent command',
command: 'storybookToolbar.nonexistent',
},
],
},
],
},
menuProvider: provideMenuData,
},
};

0 comments on commit ab13997

Please sign in to comment.