diff --git a/packages/ui/src/stories/SwaprUI.mdx b/packages/ui/src/SwaprUI.mdx similarity index 100% rename from packages/ui/src/stories/SwaprUI.mdx rename to packages/ui/src/SwaprUI.mdx diff --git a/packages/ui/src/stories/assets/swapr-og.png b/packages/ui/src/assets/swapr-og.png similarity index 100% rename from packages/ui/src/stories/assets/swapr-og.png rename to packages/ui/src/assets/swapr-og.png diff --git a/packages/ui/src/components/ChipButton.tsx b/packages/ui/src/components/ChipButton/ChipButton.tsx similarity index 100% rename from packages/ui/src/components/ChipButton.tsx rename to packages/ui/src/components/ChipButton/ChipButton.tsx diff --git a/packages/ui/src/components/ChipButton/index.ts b/packages/ui/src/components/ChipButton/index.ts new file mode 100644 index 0000000..fc8ff4d --- /dev/null +++ b/packages/ui/src/components/ChipButton/index.ts @@ -0,0 +1 @@ +export * from "./ChipButton"; diff --git a/packages/ui/src/components/Dialog.tsx b/packages/ui/src/components/Dialog/Dialog.tsx similarity index 99% rename from packages/ui/src/components/Dialog.tsx rename to packages/ui/src/components/Dialog/Dialog.tsx index 8635870..24814f6 100644 --- a/packages/ui/src/components/Dialog.tsx +++ b/packages/ui/src/components/Dialog/Dialog.tsx @@ -1,7 +1,7 @@ import { forwardRef } from "react"; import * as DialogPrimitive from "@radix-ui/react-dialog"; import { cva, cx } from "class-variance-authority"; -import { IconButton } from "./IconButton"; +import { IconButton } from "../IconButton"; interface SizeProp { size?: "lg" | "xl" | null | undefined; diff --git a/packages/ui/src/components/Dialog/index.ts b/packages/ui/src/components/Dialog/index.ts new file mode 100644 index 0000000..24cc75a --- /dev/null +++ b/packages/ui/src/components/Dialog/index.ts @@ -0,0 +1 @@ +export * from "./Dialog"; diff --git a/packages/ui/src/components/Icon.tsx b/packages/ui/src/components/Icon/Icon.tsx similarity index 99% rename from packages/ui/src/components/Icon.tsx rename to packages/ui/src/components/Icon/Icon.tsx index 99b13dd..cabe877 100644 --- a/packages/ui/src/components/Icon.tsx +++ b/packages/ui/src/components/Icon/Icon.tsx @@ -1,4 +1,4 @@ -import * as IconList from "./icons"; +import * as IconList from "../icons"; export type IconName = | "about-fill" diff --git a/packages/ui/src/components/Icon/index.ts b/packages/ui/src/components/Icon/index.ts new file mode 100644 index 0000000..998237c --- /dev/null +++ b/packages/ui/src/components/Icon/index.ts @@ -0,0 +1 @@ +export * from "./Icon"; diff --git a/packages/ui/src/components/IconBadge.tsx b/packages/ui/src/components/IconBadge/IconBadge.tsx similarity index 98% rename from packages/ui/src/components/IconBadge.tsx rename to packages/ui/src/components/IconBadge/IconBadge.tsx index bbbf4ee..a3d4e63 100644 --- a/packages/ui/src/components/IconBadge.tsx +++ b/packages/ui/src/components/IconBadge/IconBadge.tsx @@ -1,4 +1,4 @@ -import { Icon, IconName } from "./Icon"; +import { Icon, IconName } from "../Icon"; import { cva } from "class-variance-authority"; const iconBadgeStyles = cva( diff --git a/packages/ui/src/components/IconBadge/index.ts b/packages/ui/src/components/IconBadge/index.ts new file mode 100644 index 0000000..f4a7c11 --- /dev/null +++ b/packages/ui/src/components/IconBadge/index.ts @@ -0,0 +1 @@ +export * from "./IconBadge"; diff --git a/packages/ui/src/components/IconButton.tsx b/packages/ui/src/components/IconButton/IconButton.tsx similarity index 85% rename from packages/ui/src/components/IconButton.tsx rename to packages/ui/src/components/IconButton/IconButton.tsx index 233a0ba..10d5840 100644 --- a/packages/ui/src/components/IconButton.tsx +++ b/packages/ui/src/components/IconButton/IconButton.tsx @@ -1,6 +1,6 @@ import { cva } from "class-variance-authority"; -import { Button, ButtonProps, ButtonSizeProp } from "./Button"; -import { Icon, IconProps } from "./Icon"; +import { Button, ButtonProps, ButtonSizeProp } from "../Button"; +import { Icon, IconProps } from "../Icon"; export const iconButtonStyles = cva([], { variants: { diff --git a/packages/ui/src/components/IconButton/index.ts b/packages/ui/src/components/IconButton/index.ts new file mode 100644 index 0000000..5318510 --- /dev/null +++ b/packages/ui/src/components/IconButton/index.ts @@ -0,0 +1 @@ +export * from "./IconButton"; diff --git a/packages/ui/src/components/Input.tsx b/packages/ui/src/components/Input/Input.tsx similarity index 99% rename from packages/ui/src/components/Input.tsx rename to packages/ui/src/components/Input/Input.tsx index 3986958..2d0fbf5 100644 --- a/packages/ui/src/components/Input.tsx +++ b/packages/ui/src/components/Input/Input.tsx @@ -1,7 +1,7 @@ import { forwardRef, useEffect, useRef } from "react"; import * as LabelPrimitive from "@radix-ui/react-label"; import { cva, cx } from "class-variance-authority"; -import { Icon, IconName } from "./Icon"; +import { Icon, IconName } from "../Icon"; const inputStyles = cva( [ diff --git a/packages/ui/src/components/Input/index.ts b/packages/ui/src/components/Input/index.ts new file mode 100644 index 0000000..be66d76 --- /dev/null +++ b/packages/ui/src/components/Input/index.ts @@ -0,0 +1 @@ +export * from "./Input"; diff --git a/packages/ui/src/components/Logo.tsx b/packages/ui/src/components/Logo/Logo.tsx similarity index 100% rename from packages/ui/src/components/Logo.tsx rename to packages/ui/src/components/Logo/Logo.tsx diff --git a/packages/ui/src/components/Logo/index.ts b/packages/ui/src/components/Logo/index.ts new file mode 100644 index 0000000..bd3113f --- /dev/null +++ b/packages/ui/src/components/Logo/index.ts @@ -0,0 +1 @@ +export * from "./Logo"; diff --git a/packages/ui/src/components/LogoPair.tsx b/packages/ui/src/components/LogoPair/LogoPair.tsx similarity index 98% rename from packages/ui/src/components/LogoPair.tsx rename to packages/ui/src/components/LogoPair/LogoPair.tsx index d5b96dd..cb8e676 100644 --- a/packages/ui/src/components/LogoPair.tsx +++ b/packages/ui/src/components/LogoPair/LogoPair.tsx @@ -1,5 +1,5 @@ import { cva } from "class-variance-authority"; -import { Logo, LogoSizeProp } from "./Logo"; +import { Logo, LogoSizeProp } from "../Logo"; export const logoPairStyles = cva(["flex items-center w-fit h-fit relative"], { variants: { diff --git a/packages/ui/src/components/LogoPair/index.ts b/packages/ui/src/components/LogoPair/index.ts new file mode 100644 index 0000000..f4f194e --- /dev/null +++ b/packages/ui/src/components/LogoPair/index.ts @@ -0,0 +1 @@ +export * from "./LogoPair"; diff --git a/packages/ui/src/components/Tabs.stories.tsx b/packages/ui/src/components/Tabs/Tabs.stories.tsx similarity index 100% rename from packages/ui/src/components/Tabs.stories.tsx rename to packages/ui/src/components/Tabs/Tabs.stories.tsx diff --git a/packages/ui/src/components/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx similarity index 97% rename from packages/ui/src/components/Tabs.tsx rename to packages/ui/src/components/Tabs/Tabs.tsx index 988d189..bc23de3 100644 --- a/packages/ui/src/components/Tabs.tsx +++ b/packages/ui/src/components/Tabs/Tabs.tsx @@ -1,6 +1,6 @@ import { Children, Fragment, PropsWithChildren } from "react"; import { Tab, TabProps } from "@headlessui/react"; -import { ChipButton } from "./ChipButton"; +import { ChipButton } from "../ChipButton"; import { twMerge } from "tailwind-merge"; export const TabGroup = ({ diff --git a/packages/ui/src/components/Tabs/index.ts b/packages/ui/src/components/Tabs/index.ts new file mode 100644 index 0000000..5de2df6 --- /dev/null +++ b/packages/ui/src/components/Tabs/index.ts @@ -0,0 +1 @@ +export * from "./Tabs"; diff --git a/packages/ui/src/components/Tag.tsx b/packages/ui/src/components/Tag/Tag.tsx similarity index 98% rename from packages/ui/src/components/Tag.tsx rename to packages/ui/src/components/Tag/Tag.tsx index 010866e..000170e 100644 --- a/packages/ui/src/components/Tag.tsx +++ b/packages/ui/src/components/Tag/Tag.tsx @@ -48,7 +48,7 @@ export type TagColorSchemeProp = | "danger" | "info"; -interface TagProps { +export interface TagProps { size?: TagSizeProp; colorScheme?: TagColorSchemeProp; className?: string; diff --git a/packages/ui/src/components/Tag/index.ts b/packages/ui/src/components/Tag/index.ts new file mode 100644 index 0000000..5b4c58b --- /dev/null +++ b/packages/ui/src/components/Tag/index.ts @@ -0,0 +1 @@ +export * from "./Tag"; diff --git a/packages/ui/src/components/Toast.tsx b/packages/ui/src/components/Toast/Toast.tsx similarity index 97% rename from packages/ui/src/components/Toast.tsx rename to packages/ui/src/components/Toast/Toast.tsx index 92aabbe..a6978ef 100644 --- a/packages/ui/src/components/Toast.tsx +++ b/packages/ui/src/components/Toast/Toast.tsx @@ -2,8 +2,8 @@ import { PropsWithChildren, ReactNode } from "react"; import { toast as sonnerToast, Toaster } from "sonner"; import { cva } from "class-variance-authority"; -import { Icon } from "./Icon"; -import { Button } from "./Button"; +import { Icon } from "../Icon"; +import { Button } from "../Button"; export const toastStyles = cva( [ diff --git a/packages/ui/src/components/Toast/index.ts b/packages/ui/src/components/Toast/index.ts new file mode 100644 index 0000000..0652992 --- /dev/null +++ b/packages/ui/src/components/Toast/index.ts @@ -0,0 +1 @@ +export * from "./Toast"; diff --git a/packages/ui/src/components/ToggleGroup.tsx b/packages/ui/src/components/ToggleGroup/ToggleGroup.tsx similarity index 100% rename from packages/ui/src/components/ToggleGroup.tsx rename to packages/ui/src/components/ToggleGroup/ToggleGroup.tsx diff --git a/packages/ui/src/components/ToggleGroup/index.ts b/packages/ui/src/components/ToggleGroup/index.ts new file mode 100644 index 0000000..773c1e5 --- /dev/null +++ b/packages/ui/src/components/ToggleGroup/index.ts @@ -0,0 +1 @@ +export * from "./ToggleGroup"; diff --git a/packages/ui/src/stories/Button.stories.ts b/packages/ui/src/stories/Button.stories.ts deleted file mode 100644 index 455a9d8..0000000 --- a/packages/ui/src/stories/Button.stories.ts +++ /dev/null @@ -1,52 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; -import { Button } from './Button'; - -// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export -const meta = { - title: 'Example/Button', - component: Button, - parameters: { - // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout - layout: 'centered', - }, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs - tags: ['autodocs'], - // More on argTypes: https://storybook.js.org/docs/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - }, - // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args - args: { onClick: fn() }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -export const Primary: Story = { - args: { - primary: true, - label: 'Button', - }, -}; - -export const Secondary: Story = { - args: { - label: 'Button', - }, -}; - -export const Large: Story = { - args: { - size: 'large', - label: 'Button', - }, -}; - -export const Small: Story = { - args: { - size: 'small', - label: 'Button', - }, -}; diff --git a/packages/ui/src/stories/Button.tsx b/packages/ui/src/stories/Button.tsx deleted file mode 100644 index 12ade3a..0000000 --- a/packages/ui/src/stories/Button.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import "./button.css"; - -interface ButtonProps { - /** - * Is this the principal call to action on the page? - */ - primary?: boolean; - /** - * What background color to use - */ - backgroundColor?: string; - /** - * How large should the button be? - */ - size?: "small" | "medium" | "large"; - /** - * Button contents - */ - label: string; - /** - * Optional click handler - */ - onClick?: () => void; -} - -/** - * Primary UI component for user interaction - */ -export const Button = ({ - primary = false, - size = "medium", - backgroundColor, - label, - ...props -}: ButtonProps) => { - const mode = primary - ? "storybook-button--primary" - : "storybook-button--secondary"; - return ( - - ); -}; diff --git a/packages/ui/src/stories/Header.stories.ts b/packages/ui/src/stories/Header.stories.ts deleted file mode 100644 index 80c71d0..0000000 --- a/packages/ui/src/stories/Header.stories.ts +++ /dev/null @@ -1,33 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; - -import { Header } from './Header'; - -const meta = { - title: 'Example/Header', - component: Header, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs - tags: ['autodocs'], - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout - layout: 'fullscreen', - }, - args: { - onLogin: fn(), - onLogout: fn(), - onCreateAccount: fn(), - }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const LoggedIn: Story = { - args: { - user: { - name: 'Jane Doe', - }, - }, -}; - -export const LoggedOut: Story = {}; diff --git a/packages/ui/src/stories/Header.tsx b/packages/ui/src/stories/Header.tsx deleted file mode 100644 index c06836b..0000000 --- a/packages/ui/src/stories/Header.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { Button } from "./Button"; -import "./header.css"; - -type User = { - name: string; -}; - -interface HeaderProps { - user?: User; - onLogin?: () => void; - onLogout?: () => void; - onCreateAccount?: () => void; -} - -export const Header = ({ - user, - onLogin, - onLogout, - onCreateAccount, -}: HeaderProps) => ( -
-
-
- - - - - - - -

Acme

-
-
- {user ? ( - <> - - Welcome, {user.name}! - -
-
-
-); diff --git a/packages/ui/src/stories/Page.stories.ts b/packages/ui/src/stories/Page.stories.ts deleted file mode 100644 index f7a0681..0000000 --- a/packages/ui/src/stories/Page.stories.ts +++ /dev/null @@ -1,32 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { within, userEvent, expect } from '@storybook/test'; - -import { Page } from './Page'; - -const meta = { - title: 'Example/Page', - component: Page, - parameters: { - // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout - layout: 'fullscreen', - }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const LoggedOut: Story = {}; - -// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing -export const LoggedIn: Story = { - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - const loginButton = canvas.getByRole('button', { name: /Log in/i }); - await expect(loginButton).toBeInTheDocument(); - await userEvent.click(loginButton); - await expect(loginButton).not.toBeInTheDocument(); - - const logoutButton = canvas.getByRole('button', { name: /Log out/i }); - await expect(logoutButton).toBeInTheDocument(); - }, -}; diff --git a/packages/ui/src/stories/Page.tsx b/packages/ui/src/stories/Page.tsx deleted file mode 100644 index 65e0e73..0000000 --- a/packages/ui/src/stories/Page.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { useState } from "react"; - -import { Header } from "./Header"; -import "./page.css"; - -type User = { - name: string; -}; - -export const Page: React.FC = () => { - const [user, setUser] = useState(); - - return ( -
-
setUser({ name: "Jane Doe" })} - onLogout={() => setUser(undefined)} - onCreateAccount={() => setUser({ name: "Jane Doe" })} - /> - -
-

Pages in Storybook

-

- We recommend building UIs with a{" "} - - component-driven - {" "} - process starting with atomic components and ending with pages. -

-

- 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: -

-
    -
  • - Use a higher-level connected component. Storybook helps you compose - such data from the "args" of child component stories -
    • -
  • - Assemble data in the page component from your services. You can mock - these services out using Storybook. -
    • -
-

- Get a guided tutorial on component-driven development at{" "} - - Storybook tutorials - - . Read more in the{" "} - - docs - - . -

-
- Tip Adjust the width of the canvas with - the{" "} - - - - - - Viewports addon in the toolbar -
-
-
- ); -}; diff --git a/packages/ui/src/stories/assets/assets.png b/packages/ui/src/stories/assets/assets.png deleted file mode 100644 index cfba681..0000000 Binary files a/packages/ui/src/stories/assets/assets.png and /dev/null differ diff --git a/packages/ui/src/stories/assets/context.png b/packages/ui/src/stories/assets/context.png deleted file mode 100644 index e5cd249..0000000 Binary files a/packages/ui/src/stories/assets/context.png and /dev/null differ diff --git a/packages/ui/src/stories/assets/styling.png b/packages/ui/src/stories/assets/styling.png deleted file mode 100644 index d341e82..0000000 Binary files a/packages/ui/src/stories/assets/styling.png and /dev/null differ diff --git a/packages/ui/src/stories/button.css b/packages/ui/src/stories/button.css deleted file mode 100644 index dc91dc7..0000000 --- a/packages/ui/src/stories/button.css +++ /dev/null @@ -1,30 +0,0 @@ -.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; -} -.storybook-button--primary { - 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; -} -.storybook-button--small { - font-size: 12px; - padding: 10px 16px; -} -.storybook-button--medium { - font-size: 14px; - padding: 11px 20px; -} -.storybook-button--large { - font-size: 16px; - padding: 12px 24px; -} diff --git a/packages/ui/src/stories/header.css b/packages/ui/src/stories/header.css deleted file mode 100644 index d9a7052..0000000 --- a/packages/ui/src/stories/header.css +++ /dev/null @@ -1,32 +0,0 @@ -.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; -} - -.storybook-header svg { - 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; -} - -.storybook-header button + button { - margin-left: 10px; -} - -.storybook-header .welcome { - color: #333; - font-size: 14px; - margin-right: 10px; -} diff --git a/packages/ui/src/stories/page.css b/packages/ui/src/stories/page.css deleted file mode 100644 index 098dad1..0000000 --- a/packages/ui/src/stories/page.css +++ /dev/null @@ -1,69 +0,0 @@ -.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; -} - -.storybook-page h2 { - 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; -} - -.storybook-page a { - text-decoration: none; - color: #1ea7fd; -} - -.storybook-page ul { - padding-left: 30px; - margin: 1em 0; -} - -.storybook-page li { - 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; -} - -.storybook-page .tip-wrapper { - 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; -} - -.storybook-page .tip-wrapper svg path { - fill: #1ea7fd; -}