From 265ab4d49840cfb3bbd312adc0589a1e593085ce Mon Sep 17 00:00:00 2001 From: Noah Luskey Date: Tue, 27 Feb 2024 22:23:03 -0500 Subject: [PATCH 1/6] added skeleton of menu items, but classes are not indexing as expected --- src/index.ts | 3 +++ src/menubar/MenuBar.tsx | 17 ++++++++++++ src/menubar/MenuBarItem.tsx | 34 ++++++++++++++++++++++++ src/menubar/MenuBarMenu.tsx | 17 ++++++++++++ src/menubar/__docs__/Example.tsx | 29 ++++++++++++++++++++ src/menubar/__docs__/MenuBar.stories.tsx | 16 +++++++++++ src/menubar/index.ts | 19 +++++++++++++ 7 files changed, 135 insertions(+) create mode 100644 src/menubar/MenuBar.tsx create mode 100644 src/menubar/MenuBarItem.tsx create mode 100644 src/menubar/MenuBarMenu.tsx create mode 100644 src/menubar/__docs__/Example.tsx create mode 100644 src/menubar/__docs__/MenuBar.stories.tsx create mode 100644 src/menubar/index.ts diff --git a/src/index.ts b/src/index.ts index 98b0c30..69f4458 100644 --- a/src/index.ts +++ b/src/index.ts @@ -7,6 +7,9 @@ export type * from "./button"; export * from "./dialog"; export type * from "./dialog"; +export * from "./menubar"; +export type * from "./menubar"; + export * from "./modal"; export type * from "./modal"; diff --git a/src/menubar/MenuBar.tsx b/src/menubar/MenuBar.tsx new file mode 100644 index 0000000..3c0eca4 --- /dev/null +++ b/src/menubar/MenuBar.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import Item from "./MenuBarItem"; +import styles from "../styles"; + +export type MenuBarProps = { + children: React.ReactElement | React.ReactElement[]; +}; + +const MenuBar: React.FC = ({ children }) => { + return ( +
    + {children} +
+ ); +}; + +export default MenuBar; diff --git a/src/menubar/MenuBarItem.tsx b/src/menubar/MenuBarItem.tsx new file mode 100644 index 0000000..28ce064 --- /dev/null +++ b/src/menubar/MenuBarItem.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import MenuBarMenu from "./MenuBarMenu"; +import styles from "../styles"; + +export type MenuBarItemProps = { + title: string; + children?: React.ReactNode | React.ReactElement; + onClick?: React.MouseEventHandler; +}; + + +const MenuBarItem: React.FC = ({ title, onClick, children }) => { + const ariaHasPopup = React.Children.toArray(children).find((child) => { + // if the child is an object with the key 'type' and the type is MenuBarMenu then return true + if ( + (typeof child === "object") && + (child && 'type' in child) && + (child.type === MenuBarMenu) + ) { + return true; + } else { + return false; + } + }) !== undefined; + + return ( +
  • + {title} + {children} +
    • + ); +}; + +export default MenuBarItem; diff --git a/src/menubar/MenuBarMenu.tsx b/src/menubar/MenuBarMenu.tsx new file mode 100644 index 0000000..6349ba3 --- /dev/null +++ b/src/menubar/MenuBarMenu.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import Item from "./MenuBarItem"; +import styles from "../styles"; + +export type MenuBarMenuProps = { + children: React.ReactElement | React.ReactElement[]; +}; + +const MenuBarMenu: React.FC = ({ children }) => { + return ( +
      + {children} +
    + ); +}; + +export default MenuBarMenu; diff --git a/src/menubar/__docs__/Example.tsx b/src/menubar/__docs__/Example.tsx new file mode 100644 index 0000000..693676f --- /dev/null +++ b/src/menubar/__docs__/Example.tsx @@ -0,0 +1,29 @@ +import React, { FC } from "react"; +import MenuBar from ".."; + +export type ExampleProps = { +}; + +const Example: FC = ({ line1, line2 }) => { + return ( +
    + + + + + + + + +
    + ); +}; + +export default Example; diff --git a/src/menubar/__docs__/MenuBar.stories.tsx b/src/menubar/__docs__/MenuBar.stories.tsx new file mode 100644 index 0000000..ce91a38 --- /dev/null +++ b/src/menubar/__docs__/MenuBar.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import Example from "./Example"; +import MenuBar from ".."; + +const meta: Meta = { + title: "MenuBar", + component: Example, +}; + +export default meta; +type Story = StoryObj; + +export const Primary: Story = { + args: { + }, +}; diff --git a/src/menubar/index.ts b/src/menubar/index.ts new file mode 100644 index 0000000..3496b87 --- /dev/null +++ b/src/menubar/index.ts @@ -0,0 +1,19 @@ +import MenuBarParent from './MenuBar'; +export type { MenuBarProps } from './MenuBar'; + +import Menu from './MenuBarMenu'; +export type { MenuBarMenuProps } from './MenuBarMenu'; + +import Item from './MenuBarItem'; +export type { MenuBarItemProps } from './MenuBarItem'; + +type MenuBarNamespace = typeof MenuBarParent & { + Item: typeof Item; + Menu: typeof Menu; +}; + +const MenuBar = MenuBarParent as MenuBarNamespace; +MenuBar.Item = Item; +MenuBar.Menu = Menu; + +export default MenuBar; \ No newline at end of file From 1c4c1d744b987daec1d5db117cc48e37210e1725 Mon Sep 17 00:00:00 2001 From: Noah Luskey Date: Tue, 27 Feb 2024 22:41:11 -0500 Subject: [PATCH 2/6] almost working perfectly except hover on menubar not great --- src/menubar/MenuBar.tsx | 4 +-- src/menubar/MenuBarItem.tsx | 10 +++--- src/menubar/MenuBarMenu.tsx | 4 +-- src/menubar/__docs__/Example.tsx | 53 ++++++++++++++++++++++++++++++-- 4 files changed, 59 insertions(+), 12 deletions(-) diff --git a/src/menubar/MenuBar.tsx b/src/menubar/MenuBar.tsx index 3c0eca4..3b796c7 100644 --- a/src/menubar/MenuBar.tsx +++ b/src/menubar/MenuBar.tsx @@ -1,6 +1,6 @@ import React from "react"; import Item from "./MenuBarItem"; -import styles from "../styles"; +import "@sakun/system.css"; export type MenuBarProps = { children: React.ReactElement | React.ReactElement[]; @@ -8,7 +8,7 @@ export type MenuBarProps = { const MenuBar: React.FC = ({ children }) => { return ( -
      +
        {children}
      ); diff --git a/src/menubar/MenuBarItem.tsx b/src/menubar/MenuBarItem.tsx index 28ce064..f0a430d 100644 --- a/src/menubar/MenuBarItem.tsx +++ b/src/menubar/MenuBarItem.tsx @@ -1,15 +1,16 @@ import React from "react"; import MenuBarMenu from "./MenuBarMenu"; +import "@sakun/system.css"; import styles from "../styles"; export type MenuBarItemProps = { - title: string; - children?: React.ReactNode | React.ReactElement; + children?: React.ReactNode | [React.ReactNode, React.ReactElement]; onClick?: React.MouseEventHandler; + divider?: boolean; }; -const MenuBarItem: React.FC = ({ title, onClick, children }) => { +const MenuBarItem: React.FC = ({ onClick, divider, children }) => { const ariaHasPopup = React.Children.toArray(children).find((child) => { // if the child is an object with the key 'type' and the type is MenuBarMenu then return true if ( @@ -24,8 +25,7 @@ const MenuBarItem: React.FC = ({ title, onClick, children }) = }) !== undefined; return ( -
    • - {title} +
    • {children}
      • ); diff --git a/src/menubar/MenuBarMenu.tsx b/src/menubar/MenuBarMenu.tsx index 6349ba3..4612d88 100644 --- a/src/menubar/MenuBarMenu.tsx +++ b/src/menubar/MenuBarMenu.tsx @@ -1,6 +1,6 @@ import React from "react"; import Item from "./MenuBarItem"; -import styles from "../styles"; +import "@sakun/system.css"; export type MenuBarMenuProps = { children: React.ReactElement | React.ReactElement[]; @@ -8,7 +8,7 @@ export type MenuBarMenuProps = { const MenuBarMenu: React.FC = ({ children }) => { return ( -
        +
          {children}
        ); diff --git a/src/menubar/__docs__/Example.tsx b/src/menubar/__docs__/Example.tsx index 693676f..b410732 100644 --- a/src/menubar/__docs__/Example.tsx +++ b/src/menubar/__docs__/Example.tsx @@ -15,10 +15,16 @@ const Example: FC = ({ line1, line2 }) => { }} > - + + File - - + Open + Save + Another + Option + These + Are + Separate @@ -26,4 +32,45 @@ const Example: FC = ({ line1, line2 }) => { ); }; +// const Example = () => { +// return ( +// +// ); +// } + export default Example; From dd5ec6efa98c6528f65dbbde45d54cf41aa83aec Mon Sep 17 00:00:00 2001 From: Noah Luskey Date: Tue, 27 Feb 2024 22:43:04 -0500 Subject: [PATCH 3/6] fix menubar issue --- src/menubar/MenuBar.tsx | 2 +- src/menubar/__docs__/Example.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/menubar/MenuBar.tsx b/src/menubar/MenuBar.tsx index 3b796c7..1e4c3c4 100644 --- a/src/menubar/MenuBar.tsx +++ b/src/menubar/MenuBar.tsx @@ -8,7 +8,7 @@ export type MenuBarProps = { const MenuBar: React.FC = ({ children }) => { return ( -
          +
            {children}
          ); diff --git a/src/menubar/__docs__/Example.tsx b/src/menubar/__docs__/Example.tsx index b410732..9c060d9 100644 --- a/src/menubar/__docs__/Example.tsx +++ b/src/menubar/__docs__/Example.tsx @@ -4,7 +4,7 @@ import MenuBar from ".."; export type ExampleProps = { }; -const Example: FC = ({ line1, line2 }) => { +const Example: FC = ({}) => { return (
          Date: Tue, 27 Feb 2024 22:46:25 -0500 Subject: [PATCH 4/6] all is working --- src/menubar/__docs__/Example.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/menubar/__docs__/Example.tsx b/src/menubar/__docs__/Example.tsx index 9c060d9..aea84ee 100644 --- a/src/menubar/__docs__/Example.tsx +++ b/src/menubar/__docs__/Example.tsx @@ -27,6 +27,15 @@ const Example: FC = ({}) => { Separate + + Googz + + + More Stuff + + Action + +
          ); From 7bf3383a6b8e110ecae49aafc915726657486b33 Mon Sep 17 00:00:00 2001 From: Noah Luskey Date: Tue, 27 Feb 2024 22:46:38 -0500 Subject: [PATCH 5/6] Run formatter --- src/menubar/MenuBar.tsx | 6 +--- src/menubar/MenuBarItem.tsx | 45 +++++++++++++++--------- src/menubar/MenuBarMenu.tsx | 6 +--- src/menubar/__docs__/Example.tsx | 39 ++++++++++++++------ src/menubar/__docs__/MenuBar.stories.tsx | 3 +- src/menubar/index.ts | 14 ++++---- 6 files changed, 67 insertions(+), 46 deletions(-) diff --git a/src/menubar/MenuBar.tsx b/src/menubar/MenuBar.tsx index 1e4c3c4..923a4f6 100644 --- a/src/menubar/MenuBar.tsx +++ b/src/menubar/MenuBar.tsx @@ -7,11 +7,7 @@ export type MenuBarProps = { }; const MenuBar: React.FC = ({ children }) => { - return ( -
            - {children} -
          - ); + return
            {children}
          ; }; export default MenuBar; diff --git a/src/menubar/MenuBarItem.tsx b/src/menubar/MenuBarItem.tsx index f0a430d..8358203 100644 --- a/src/menubar/MenuBarItem.tsx +++ b/src/menubar/MenuBarItem.tsx @@ -4,28 +4,41 @@ import "@sakun/system.css"; import styles from "../styles"; export type MenuBarItemProps = { - children?: React.ReactNode | [React.ReactNode, React.ReactElement]; + children?: + | React.ReactNode + | [React.ReactNode, React.ReactElement]; onClick?: React.MouseEventHandler; divider?: boolean; }; - -const MenuBarItem: React.FC = ({ onClick, divider, children }) => { - const ariaHasPopup = React.Children.toArray(children).find((child) => { - // if the child is an object with the key 'type' and the type is MenuBarMenu then return true - if ( - (typeof child === "object") && - (child && 'type' in child) && - (child.type === MenuBarMenu) - ) { - return true; - } else { - return false; - } - }) !== undefined; +const MenuBarItem: React.FC = ({ + onClick, + divider, + children, +}) => { + const ariaHasPopup = + React.Children.toArray(children).find((child) => { + // if the child is an object with the key 'type' and the type is MenuBarMenu then return true + if ( + typeof child === "object" && + child && + "type" in child && + child.type === MenuBarMenu + ) { + return true; + } else { + return false; + } + }) !== undefined; return ( -
        • +
        • {children}
          • ); diff --git a/src/menubar/MenuBarMenu.tsx b/src/menubar/MenuBarMenu.tsx index 4612d88..9bb676a 100644 --- a/src/menubar/MenuBarMenu.tsx +++ b/src/menubar/MenuBarMenu.tsx @@ -7,11 +7,7 @@ export type MenuBarMenuProps = { }; const MenuBarMenu: React.FC = ({ children }) => { - return ( -
            - {children} -
          - ); + return
            {children}
          ; }; export default MenuBarMenu; diff --git a/src/menubar/__docs__/Example.tsx b/src/menubar/__docs__/Example.tsx index aea84ee..d6c9339 100644 --- a/src/menubar/__docs__/Example.tsx +++ b/src/menubar/__docs__/Example.tsx @@ -1,8 +1,7 @@ import React, { FC } from "react"; import MenuBar from ".."; -export type ExampleProps = { -}; +export type ExampleProps = {}; const Example: FC = ({}) => { return ( @@ -18,22 +17,40 @@ const Example: FC = ({}) => { File - Open - Save - Another - Option - These - Are - Separate + + Open + + + Save + + + Another + + + Option + + + These + + + Are + + + Separate + - Googz + + Googz + More Stuff - Action + + Action + diff --git a/src/menubar/__docs__/MenuBar.stories.tsx b/src/menubar/__docs__/MenuBar.stories.tsx index ce91a38..598ae7d 100644 --- a/src/menubar/__docs__/MenuBar.stories.tsx +++ b/src/menubar/__docs__/MenuBar.stories.tsx @@ -11,6 +11,5 @@ export default meta; type Story = StoryObj; export const Primary: Story = { - args: { - }, + args: {}, }; diff --git a/src/menubar/index.ts b/src/menubar/index.ts index 3496b87..3b09b07 100644 --- a/src/menubar/index.ts +++ b/src/menubar/index.ts @@ -1,11 +1,11 @@ -import MenuBarParent from './MenuBar'; -export type { MenuBarProps } from './MenuBar'; +import MenuBarParent from "./MenuBar"; +export type { MenuBarProps } from "./MenuBar"; -import Menu from './MenuBarMenu'; -export type { MenuBarMenuProps } from './MenuBarMenu'; +import Menu from "./MenuBarMenu"; +export type { MenuBarMenuProps } from "./MenuBarMenu"; -import Item from './MenuBarItem'; -export type { MenuBarItemProps } from './MenuBarItem'; +import Item from "./MenuBarItem"; +export type { MenuBarItemProps } from "./MenuBarItem"; type MenuBarNamespace = typeof MenuBarParent & { Item: typeof Item; @@ -16,4 +16,4 @@ const MenuBar = MenuBarParent as MenuBarNamespace; MenuBar.Item = Item; MenuBar.Menu = Menu; -export default MenuBar; \ No newline at end of file +export default MenuBar; From 4e01683b61d223549f4ffb6917264ef24b39ee1f Mon Sep 17 00:00:00 2001 From: Noah Luskey Date: Tue, 27 Feb 2024 22:47:02 -0500 Subject: [PATCH 6/6] update package version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 426e407..de99d54 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "publishConfig": { "registry": "https://npm.pkg.github.com" }, - "version": "0.0.6", + "version": "0.0.7", "description": "system.css theme wrapped for React", "type": "module", "main": "dist/index.cjs.js",