From 5b6bf67547c194dae5ef36d22dd9744854b94e39 Mon Sep 17 00:00:00 2001 From: Arnaud Date: Wed, 23 Oct 2024 10:03:24 +0200 Subject: [PATCH] Remove too specific components --- src/components/AppBar/AppBar.tsx | 30 ------- src/components/AppBar/appBar.css | 32 ------- src/components/Logo/LogoInverse.tsx | 28 ------ src/components/Menu/Menu.tsx | 102 --------------------- src/components/Menu/menu.css | 96 -------------------- src/components/Page/Page.tsx | 42 --------- src/components/Page/page.css | 8 -- src/index.ts | 7 -- stories/Menu.stories.tsx | 135 ---------------------------- stories/Page.stories.css | 7 -- stories/Page.stories.tsx | 103 --------------------- 11 files changed, 590 deletions(-) delete mode 100644 src/components/AppBar/AppBar.tsx delete mode 100644 src/components/AppBar/appBar.css delete mode 100644 src/components/Logo/LogoInverse.tsx delete mode 100644 src/components/Menu/Menu.tsx delete mode 100644 src/components/Menu/menu.css delete mode 100644 src/components/Page/Page.tsx delete mode 100644 src/components/Page/page.css delete mode 100644 stories/Menu.stories.tsx delete mode 100644 stories/Page.stories.css delete mode 100644 stories/Page.stories.tsx diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx deleted file mode 100644 index f5c8c1c..0000000 --- a/src/components/AppBar/AppBar.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Menu } from "lucide-react"; -import "./appBar.css"; -import { ReactNode } from "react"; - -type Props = { - /** - * Event triggered when the menu is expanding, after a click on the - * menu button. - */ - onExpand: () => void; - - /** - * React node to add to the right part of the application bar - */ - Right: ReactNode; -}; - -export function AppBar({ onExpand, Right }: Props) { - return ( -
-
- - - - Home -
-
{Right}
-
- ); -} diff --git a/src/components/AppBar/appBar.css b/src/components/AppBar/appBar.css deleted file mode 100644 index f2be905..0000000 --- a/src/components/AppBar/appBar.css +++ /dev/null @@ -1,32 +0,0 @@ -.appBar { - height: 40px; - justify-content: space-between; - border-bottom: 1px solid var(--codex-border-color); - view-transition-name: main-header; - display: flex; - padding: 0.75rem 1.5rem; -} - -.appBar-burger { - cursor: pointer; - color: var(--codex-color); - display: flex; -} - -.appBar, -.appBar-left, -.appBar-right { - display: flex; - align-items: center; -} - -.appBar-left, -.appBar-right { - gap: 0.75rem; -} - -@media (min-width: 1000px) { - .appBar-burger { - display: none; - } -} diff --git a/src/components/Logo/LogoInverse.tsx b/src/components/Logo/LogoInverse.tsx deleted file mode 100644 index 476800b..0000000 --- a/src/components/Logo/LogoInverse.tsx +++ /dev/null @@ -1,28 +0,0 @@ -type Props = { - width?: number; -}; - -export function LogoInverse({ width = 40 }: Props) { - return ( - - - - - - - - - - - ); -} diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx deleted file mode 100644 index 23d6268..0000000 --- a/src/components/Menu/Menu.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import { attributes } from "../utils/attributes"; -import "./menu.css"; -import { LogoInverse } from "../Logo/LogoInverse"; -import { ComponentType, useEffect } from "react"; -import { Backdrop } from "../Backdrop/Backdrop"; - -export type MenuItemComponentProps = { - onClick: () => void; - className: string; -}; - -export type MenuItem = - | { - type: "separator"; - } - | { - type: "menu-item"; - Component: ComponentType; - } - | { - type: "menu-title"; - title: string; - }; - -type Props = { - /** - * If true, the menu will be displayed - */ - expanded: boolean; - - onClose: () => void; - - onOpen?: () => void; - - /** - * The menu items to be displayed - */ - items: MenuItem[]; - - className?: string; - - /** - * The application version - */ - version?: string; -}; - -export function Menu({ - expanded, - onClose, - onOpen, - items, - className = "", - version = "", -}: Props) { - useEffect(() => { - if (expanded && onOpen) { - onOpen(); - } - }, [expanded, onOpen]); - - const renderItem = (i: MenuItem, index: number) => { - switch (i.type) { - case "separator": - return
; - case "menu-title": - return ( - - {i.title} - - ); - case "menu-item": - return ( - - ); - } - }; - - return ( - <> - - - - - ); -} diff --git a/src/components/Menu/menu.css b/src/components/Menu/menu.css deleted file mode 100644 index efaa90e..0000000 --- a/src/components/Menu/menu.css +++ /dev/null @@ -1,96 +0,0 @@ -.menu { - display: flex; - flex-direction: column; - background-color: var(--codex-background-secondary); - border-radius: var(--codex-border-radius); - transform: translatex(-500px); - transition: transform 0.25s; - position: fixed; - min-width: 200px; - z-index: 10; - view-transition-name: main-menu; - height: 100%; - top: 0; - left: 0; -} - -.menu-container { - display: flex; - flex-direction: column; - padding: 0.75rem; - flex: 1; -} - -.menu-backdrop { - display: none; -} - -.menu-items { - flex: 1; -} - -.menu[aria-expanded] { - transform: translatex(0); - min-width: 200px; -} - -.menu-header { - margin-bottom: 0.75rem; -} - -.menu-item, -.menu-header { - display: flex; - align-items: center; - gap: 0.75rem; -} - -.menu-item { - padding: 0.75rem; - color: var(--codex-color); - margin-bottom: 0.75rem; - text-decoration: none; -} - -.menu-item:hover, -.menu-item.active { - background-color: var(--codex-background-light); -} - -.menu-title { - text-transform: uppercase; - padding-top: 0.75rem; - padding-bottom: 0.75rem; - padding-left: 0.75rem; - display: inline-block; - font-weight: 500; -} - -.menu-item-separator { - border: 0.1px solid var(--codex-border-color); - width: 100%; -} - -.menu-state { - font-size: 0.6rem; - background-color: var(--codex-background-light); - padding: 0.25rem; - border-radius: var(--codex-border-radius); - position: relative; - top: 1px; -} - -.menu-footer { - text-align: center; -} - -.menu-version { - padding: 0; -} - -@media (min-width: 1000px) { - .menu { - transform: translatex(0px); - position: inherit; - } -} diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx deleted file mode 100644 index cc13822..0000000 --- a/src/components/Page/Page.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { ReactNode, useState } from "react"; -import { Menu, MenuItem } from "../Menu/Menu"; -import { AppBar } from "../AppBar/AppBar"; -import "./page.css"; - -type Props = { - children: ReactNode; - - Right: ReactNode; - - items: MenuItem[]; - - version?: string; -}; - -export function Page({ children, Right, items, version = "" }: Props) { - const [open, setOpen] = useState(false); - - const onClose = () => { - setOpen(false); - }; - - const onExpand = () => { - setOpen(true); - }; - - return ( -
- - -
- - {children} -
-
- ); -} diff --git a/src/components/Page/page.css b/src/components/Page/page.css deleted file mode 100644 index afcf2a4..0000000 --- a/src/components/Page/page.css +++ /dev/null @@ -1,8 +0,0 @@ -.page { - display: flex; - flex: 1; -} - -.page-main { - flex: 1; -} diff --git a/src/index.ts b/src/index.ts index cfa55c0..b518432 100644 --- a/src/index.ts +++ b/src/index.ts @@ -19,13 +19,6 @@ export { Backdrop } from "./components/Backdrop/Backdrop"; export { Cell, type CellProps } from "./components/Table/Cell"; export { Table, type TabSortState } from "./components/Table/Table"; export { Row, type RowProps } from "./components/Table/Row"; -export { - Menu, - type MenuItem, - type MenuItemComponentProps, -} from "./components/Menu/Menu"; -export { AppBar } from "./components/AppBar/AppBar"; -export { Page } from "./components/Page/Page"; export { NetworkIndicator } from "./components/NetworkIndicator/NetworkIndicator"; export { Tooltip } from "./components/Tooltip/Tooltip"; export { Collapse } from "./components/Collapse/Collapse"; diff --git a/stories/Menu.stories.tsx b/stories/Menu.stories.tsx deleted file mode 100644 index f3e88d5..0000000 --- a/stories/Menu.stories.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import type { Meta } from "@storybook/react"; -import { - Menu, - MenuItem, - MenuItemComponentProps, -} from "../src/components/Menu/Menu"; -import { useState } from "react"; -import { fn } from "@storybook/test"; -import { - HelpCircle, - Home, - Server, - Settings, - ShoppingBag, - Star, -} from "lucide-react"; -import "./Menu.stories.css"; - -const meta = { - title: "Overlays/Menu", - component: Menu, - parameters: { - layout: "fullscreen", - }, - tags: ["autodocs"], - argTypes: {}, - args: { - onClose: fn(), - onOpen: fn(), - }, -} satisfies Meta; - -export default meta; - -type Props = { - onClose: () => void; - onOpen: () => void; -}; - -const Template = (p: Props) => { - const [open, setOpen] = useState(false); - - const onClose = () => { - p.onClose(); - setOpen(false); - }; - - const onOpen = () => { - setOpen(true); - }; - - const items = [ - { - type: "menu-item", - Component: (p: MenuItemComponentProps) => ( - - Dashboard - - ), - }, - { - type: "menu-item", - Component: (p: MenuItemComponentProps) => ( - - Favorties - - ), - }, - { - type: "separator", - }, - { - type: "menu-title", - title: "rent", - }, - { - type: "menu-item", - Component: (p: MenuItemComponentProps) => ( - - Purchases - - ), - }, - { - type: "separator", - }, - { - type: "menu-title", - title: "host", - }, - { - type: "menu-item", - Component: (p: MenuItemComponentProps) => ( - - Availabilities - - ), - }, - { - type: "menu-item", - Component: (p: MenuItemComponentProps) => ( - - Settings - - ), - }, - { - type: "separator", - }, - { - type: "menu-item", - Component: (p: MenuItemComponentProps) => ( - - Help - - ), - }, - ] satisfies MenuItem[]; - - return ( -
- - -
- ); -}; - -export const Default = Template; diff --git a/stories/Page.stories.css b/stories/Page.stories.css deleted file mode 100644 index c6ca154..0000000 --- a/stories/Page.stories.css +++ /dev/null @@ -1,7 +0,0 @@ -body { - margin: 0; -} - -.page { - height: 100vh; -} diff --git a/stories/Page.stories.tsx b/stories/Page.stories.tsx deleted file mode 100644 index 1494381..0000000 --- a/stories/Page.stories.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react"; -import { Page } from "../src/components/Page/Page"; -import "./Page.stories.css"; -import { - Home, - Star, - ShoppingBag, - Server, - Settings, - HelpCircle, -} from "lucide-react"; -import { MenuItem, MenuItemComponentProps } from "../src/components/Menu/Menu"; -import { NetworkIndicator } from "../src/components/NetworkIndicator/NetworkIndicator"; - -const meta = { - title: "Layouts/Page", - component: Page, - parameters: { - layout: "fullwidth", - }, - tags: ["autodocs"], - argTypes: {}, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Default: Story = { - args: { - children: ( - Hello World - ), - items: [ - { - type: "menu-item", - Component: (p: MenuItemComponentProps) => ( - - Dashboard - - ), - }, - { - type: "menu-item", - Component: (p: MenuItemComponentProps) => ( - - Favorties - - ), - }, - { - type: "separator", - }, - { - type: "menu-title", - title: "rent", - }, - { - type: "menu-item", - Component: (p: MenuItemComponentProps) => ( - - Purchases - - ), - }, - { - type: "separator", - }, - { - type: "menu-title", - title: "host", - }, - { - type: "menu-item", - Component: (p: MenuItemComponentProps) => ( - - Availabilities - - ), - }, - { - type: "menu-item", - Component: (p: MenuItemComponentProps) => ( - - Settings - - ), - }, - { - type: "separator", - }, - { - type: "menu-item", - Component: (p: MenuItemComponentProps) => ( - - Help - - ), - }, - ] satisfies MenuItem[], - Right: , - version: "1.0.0", - }, -};