From e62e27488f851bcd6b1920d8499dc8fbfe923d60 Mon Sep 17 00:00:00 2001 From: Piotr Kulpinski Date: Fri, 26 Jan 2024 16:50:24 +0100 Subject: [PATCH] break box into multiple components and remove typescript path aliases --- package.json | 11 +--- postcss.config.js => postcss.config.cjs | 0 rollup.config.mjs | 11 +--- src/index.ts | 3 + src/layout/Container/Container.tsx | 2 +- src/layout/Container/Container.variants.ts | 2 +- src/layout/Header/Header.stories.tsx | 2 +- src/layout/Header/Header.tsx | 5 +- src/layout/Header/Header.variants.ts | 2 +- src/layout/Sidebar/Sidebar.stories.tsx | 12 ++-- src/layout/Sidebar/Sidebar.tsx | 6 +- src/layout/Sidebar/Sidebar.variants.ts | 4 +- src/providers/ThemeProvider.tsx | 2 +- src/typography/Heading/Heading.tsx | 2 +- src/typography/Heading/Heading.variants.ts | 2 +- src/typography/Paragraph/Paragraph.tsx | 2 +- .../Paragraph/Paragraph.variants.ts | 2 +- src/typography/Prose/Prose.tsx | 4 +- src/typography/Prose/Prose.variants.ts | 2 +- src/typography/Subheading/Subheading.tsx | 2 +- .../Subheading/Subheading.variants.ts | 2 +- src/ui/Accordion/Accordion.stories.tsx | 39 +++++++++++++ src/ui/Accordion/Accordion.tsx | 31 +++++++++++ src/ui/Accordion/Accordion.variants.ts | 8 +++ src/ui/Accordion/index.ts | 1 + src/ui/Avatar/Avatar.stories.tsx | 2 +- src/ui/Avatar/Avatar.tsx | 7 +-- src/ui/Avatar/Avatar.variants.ts | 2 +- src/ui/AvatarGroup/AvatarGroup.tsx | 9 ++- src/ui/AvatarGroup/AvatarGroup.variants.ts | 2 +- src/ui/Backdrop/Backdrop.stories.tsx | 19 +++++++ src/ui/Backdrop/Backdrop.tsx | 16 ++++++ src/ui/Backdrop/Backdrop.variants.ts | 8 +++ src/ui/Backdrop/index.ts | 2 + src/ui/Badge/Badge.tsx | 6 +- src/ui/Badge/Badge.variants.ts | 4 +- src/ui/Blurb/Blurb.tsx | 9 +-- src/ui/Blurb/Blurb.variants.ts | 6 +- src/ui/Box/Box.stories.tsx | 23 -------- src/ui/Box/Box.tsx | 46 +++------------- src/ui/Box/Box.variants.ts | 28 +--------- src/ui/Button/Button.tsx | 9 ++- src/ui/Button/Button.variants.ts | 2 +- src/ui/Card/Card.stories.tsx | 40 ++++++++++++++ src/ui/Card/Card.tsx | 55 +++++++++++++++++++ src/ui/Card/Card.variants.ts | 16 ++++++ src/ui/Card/index.ts | 2 + src/ui/Dot/Dot.tsx | 4 +- src/ui/Dot/Dot.variants.ts | 2 +- src/ui/FeatureCard/FeatureCard.stories.tsx | 2 +- src/ui/FeatureCard/FeatureCard.tsx | 6 +- src/ui/FeatureCard/FeatureCard.variants.ts | 2 +- src/ui/Loader/Loader.tsx | 2 +- src/ui/MenuItem/MenuItem.tsx | 12 ++-- src/ui/MenuItem/MenuItem.variants.ts | 22 ++++---- src/ui/Modal/Modal.stories.tsx | 4 +- src/ui/Modal/Modal.tsx | 8 +-- src/ui/Modal/Modal.variants.ts | 2 +- src/ui/ProgressBar/ProgressBar.stories.tsx | 2 +- src/ui/ProgressBar/ProgressBar.tsx | 9 ++- src/ui/ProgressBar/ProgressBar.variants.ts | 2 +- src/ui/ProgressRing/ProgressRing.tsx | 6 +- src/ui/ProgressRing/ProgressRing.variants.ts | 2 +- src/ui/Shortcut/Shortcut.tsx | 4 +- src/ui/Shortcut/Shortcut.variants.ts | 2 +- src/ui/Status/Status.tsx | 7 ++- src/ui/Status/Status.variants.ts | 2 +- tsconfig.json | 3 - 68 files changed, 360 insertions(+), 217 deletions(-) rename postcss.config.js => postcss.config.cjs (100%) create mode 100644 src/ui/Accordion/Accordion.stories.tsx create mode 100644 src/ui/Accordion/Accordion.tsx create mode 100644 src/ui/Accordion/Accordion.variants.ts create mode 100644 src/ui/Accordion/index.ts create mode 100644 src/ui/Backdrop/Backdrop.stories.tsx create mode 100644 src/ui/Backdrop/Backdrop.tsx create mode 100644 src/ui/Backdrop/Backdrop.variants.ts create mode 100644 src/ui/Backdrop/index.ts create mode 100644 src/ui/Card/Card.stories.tsx create mode 100644 src/ui/Card/Card.tsx create mode 100644 src/ui/Card/Card.variants.ts create mode 100644 src/ui/Card/index.ts diff --git a/package.json b/package.json index d0b5ce3..f938f38 100644 --- a/package.json +++ b/package.json @@ -10,17 +10,13 @@ "url": "https://kulpinski.co" }, "repository": "curious-leaf/design", - "main": "./dist/index.js", - "module": "./dist/index.js", - "types": "./dist/index.d.ts", + "main": "./src/index.ts", + "types": "./src/index.ts", "files": [ - "dist", "tailwind.config.js", "postcss.config.js" ], "scripts": { - "build": "rollup -c", - "dev": "rollup -c --watch", "storybook": "storybook dev -p 6006 --no-open", "test": "bun test", "clean": "rimraf ./dist", @@ -46,7 +42,6 @@ "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-tooltip": "^1.0.7", - "clsx": "^2.1.0", "cva": "^1.0.0-beta.1", "lucide-react": "^0.311.0", "tailwind-merge": "^2.2.0" @@ -99,7 +94,6 @@ "storybook": "^7.6.8", "tailwindcss": "^3.4.1", "tailwindcss-animate": "^1.0.7", - "tsc-alias": "^1.8.8", "tslib": "^2.6.2", "typescript": "^5.3.3", "vite": "^5.0.12" @@ -107,6 +101,7 @@ "peerDependencies": { "@tailwindcss/container-queries": "^0.1.1", "@tailwindcss/typography": "^0.5.10", + "cva": "^1.0.0-beta.1", "react": "^18.2.0", "react-dom": "^18.2.0", "tailwindcss": "^3.4.1", diff --git a/postcss.config.js b/postcss.config.cjs similarity index 100% rename from postcss.config.js rename to postcss.config.cjs diff --git a/rollup.config.mjs b/rollup.config.mjs index 69a9403..f951a93 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -5,8 +5,6 @@ import typescript from "@rollup/plugin-typescript" import { createRequire } from "node:module" import { dts } from "rollup-plugin-dts" import peerDepsExternal from "rollup-plugin-peer-deps-external" -import { exec } from "node:child_process" -import { promisify } from "node:util" const requireFile = createRequire(import.meta.url) const pkg = requireFile("./package.json") @@ -19,13 +17,6 @@ const makeExternalPredicate = (externalArr) => { return (id) => pattern.test(id) } -// Resolve typescript aliases -const tscAlias = () => ({ - buildStart: async () => { - await promisify(exec)("tsc-alias") - }, -}) - export default [ { input: "src/index.ts", @@ -56,6 +47,6 @@ export default [ { input: "dist/index.d.ts", output: [{ file: "dist/index.d.ts", format: "esm" }], - plugins: [tscAlias(), dts()], + plugins: [dts()], }, ] diff --git a/src/index.ts b/src/index.ts index e84e314..dc6af4c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,12 +2,15 @@ export * from "./shared" export * from "./providers" // UI +export * from "./ui/Accordion" export * from "./ui/Avatar" export * from "./ui/AvatarGroup" +export * from "./ui/Backdrop" export * from "./ui/Badge" export * from "./ui/Blurb" export * from "./ui/Box" export * from "./ui/Button" +export * from "./ui/Card" export * from "./ui/Dot" export * from "./ui/FeatureCard" export * from "./ui/Loader" diff --git a/src/layout/Container/Container.tsx b/src/layout/Container/Container.tsx index 73a4db6..ddd6957 100644 --- a/src/layout/Container/Container.tsx +++ b/src/layout/Container/Container.tsx @@ -1,7 +1,7 @@ import { forwardRef } from "react" import type { HTMLAttributes } from "react" -import { cx, type VariantProps } from "~/shared/cva" +import { cx, type VariantProps } from "../../shared" import { containerVariants } from "./Container.variants" diff --git a/src/layout/Container/Container.variants.ts b/src/layout/Container/Container.variants.ts index ba88efe..8abbee5 100644 --- a/src/layout/Container/Container.variants.ts +++ b/src/layout/Container/Container.variants.ts @@ -1,4 +1,4 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const containerVariants = cva({ base: "container mx-auto w-full px-5 md:px-6 lg:px-8", diff --git a/src/layout/Header/Header.stories.tsx b/src/layout/Header/Header.stories.tsx index 4ce834a..fb1539b 100644 --- a/src/layout/Header/Header.stories.tsx +++ b/src/layout/Header/Header.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from "@storybook/react" import { BellRing, Calendar, Plus, Search, Table } from "lucide-react" -import { Button } from "~/ui/Button" +import { Button } from "../../ui/Button" import { Header } from "./Header" diff --git a/src/layout/Header/Header.tsx b/src/layout/Header/Header.tsx index f6a0298..145d271 100644 --- a/src/layout/Header/Header.tsx +++ b/src/layout/Header/Header.tsx @@ -1,8 +1,9 @@ import { forwardRef } from "react" import type { HTMLAttributes } from "react" -import { cx, type VariantProps } from "~/shared/cva" -import { Blurb, type BlurbProps } from "~/ui/Blurb" +import { cx, type VariantProps } from "../../shared" +import type { BlurbProps } from "../../ui/Blurb" +import { Blurb } from "../../ui/Blurb" import { headerBlurbVariants, headerVariants } from "./Header.variants" diff --git a/src/layout/Header/Header.variants.ts b/src/layout/Header/Header.variants.ts index 2f47d12..ea8a6f6 100644 --- a/src/layout/Header/Header.variants.ts +++ b/src/layout/Header/Header.variants.ts @@ -1,4 +1,4 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const headerVariants = cva({ base: "flex flex-wrap items-center gap-y-2 gap-x-6 lg:gap-x-12", diff --git a/src/layout/Sidebar/Sidebar.stories.tsx b/src/layout/Sidebar/Sidebar.stories.tsx index f6e5995..ff95798 100644 --- a/src/layout/Sidebar/Sidebar.stories.tsx +++ b/src/layout/Sidebar/Sidebar.stories.tsx @@ -11,12 +11,12 @@ import { LayoutDashboardIcon, } from "lucide-react" -import { Badge } from "~/ui/Badge" -import { Blurb } from "~/ui/Blurb" -import { FeatureCard } from "~/ui/FeatureCard" -import { default as FeatureCardDefault } from "~/ui/FeatureCard/FeatureCard.stories" -import { MenuItem } from "~/ui/MenuItem" -import { Shortcut } from "~/ui/Shortcut" +import { Badge } from "../../ui/Badge" +import { Blurb } from "../../ui/Blurb" +import { FeatureCard } from "../../ui/FeatureCard" +import { default as FeatureCardDefault } from "../../ui/FeatureCard/FeatureCard.stories" +import { MenuItem } from "../../ui/MenuItem" +import { Shortcut } from "../../ui/Shortcut" import { Sidebar } from "./Sidebar" diff --git a/src/layout/Sidebar/Sidebar.tsx b/src/layout/Sidebar/Sidebar.tsx index a8eb352..273489f 100644 --- a/src/layout/Sidebar/Sidebar.tsx +++ b/src/layout/Sidebar/Sidebar.tsx @@ -1,9 +1,9 @@ import { forwardRef } from "react" import type { HTMLAttributes } from "react" -import { cx, type VariantProps } from "~/shared/cva" -import type { SubheadingElement, SubheadingProps } from "~/typography/Subheading" -import { Subheading } from "~/typography/Subheading" +import { cx, type VariantProps } from "../../shared" +import type { SubheadingElement, SubheadingProps } from "../../typography/Subheading" +import { Subheading } from "../../typography/Subheading" import { sidebarContentVariants, diff --git a/src/layout/Sidebar/Sidebar.variants.ts b/src/layout/Sidebar/Sidebar.variants.ts index 59d1e56..50bbd52 100644 --- a/src/layout/Sidebar/Sidebar.variants.ts +++ b/src/layout/Sidebar/Sidebar.variants.ts @@ -1,7 +1,7 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const sidebarVariants = cva({ - base: "sticky top-0 z-40 flex h-screen w-[17em] bg-white shrink-0 flex-col gap-y-5 overflow-y-scroll border-r p-5", + base: "sticky top-0 flex h-screen w-[17em] bg-white shrink-0 flex-col gap-y-5 overflow-y-scroll border-r p-5", variants: { theme: { diff --git a/src/providers/ThemeProvider.tsx b/src/providers/ThemeProvider.tsx index de12eb1..e783edc 100644 --- a/src/providers/ThemeProvider.tsx +++ b/src/providers/ThemeProvider.tsx @@ -1,7 +1,7 @@ /* eslint react-refresh/only-export-components: 0 */ import { type PropsWithChildren } from "react" -import { createSimpleContext } from "~/shared/providers" +import { createSimpleContext } from "../shared" export type Theme = | "blue" diff --git a/src/typography/Heading/Heading.tsx b/src/typography/Heading/Heading.tsx index a76a2d6..dc02243 100644 --- a/src/typography/Heading/Heading.tsx +++ b/src/typography/Heading/Heading.tsx @@ -2,7 +2,7 @@ import { Slot } from "@radix-ui/react-slot" import type { HTMLAttributes } from "react" import { forwardRef, isValidElement } from "react" -import { type VariantProps, cx } from "~/shared/cva" +import { type VariantProps, cx } from "../../shared" import { headingVariants } from "./Heading.variants" diff --git a/src/typography/Heading/Heading.variants.ts b/src/typography/Heading/Heading.variants.ts index 7f9448e..e42dfe0 100644 --- a/src/typography/Heading/Heading.variants.ts +++ b/src/typography/Heading/Heading.variants.ts @@ -1,4 +1,4 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const headingVariants = cva({ base: "font-semibold", diff --git a/src/typography/Paragraph/Paragraph.tsx b/src/typography/Paragraph/Paragraph.tsx index 827ed1f..59617d6 100644 --- a/src/typography/Paragraph/Paragraph.tsx +++ b/src/typography/Paragraph/Paragraph.tsx @@ -2,7 +2,7 @@ import { Slot } from "@radix-ui/react-slot" import type { HTMLAttributes } from "react" import { forwardRef, isValidElement } from "react" -import { type VariantProps, cx } from "~/shared/cva" +import { type VariantProps, cx } from "../../shared" import { paragraphVariants } from "./Paragraph.variants" diff --git a/src/typography/Paragraph/Paragraph.variants.ts b/src/typography/Paragraph/Paragraph.variants.ts index 351e8a8..c655b99 100644 --- a/src/typography/Paragraph/Paragraph.variants.ts +++ b/src/typography/Paragraph/Paragraph.variants.ts @@ -1,4 +1,4 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const paragraphVariants = cva({ base: "", diff --git a/src/typography/Prose/Prose.tsx b/src/typography/Prose/Prose.tsx index 63b30ba..5ae0867 100644 --- a/src/typography/Prose/Prose.tsx +++ b/src/typography/Prose/Prose.tsx @@ -2,8 +2,8 @@ import { Slot } from "@radix-ui/react-slot" import type { HTMLAttributes } from "react" import { forwardRef, isValidElement } from "react" -import { useTheme } from "~/providers" -import { type VariantProps, cx } from "~/shared/cva" +import { useTheme } from "../../providers" +import { type VariantProps, cx } from "../../shared" import { proseVariants } from "./Prose.variants" diff --git a/src/typography/Prose/Prose.variants.ts b/src/typography/Prose/Prose.variants.ts index 1e79412..be66c87 100644 --- a/src/typography/Prose/Prose.variants.ts +++ b/src/typography/Prose/Prose.variants.ts @@ -1,4 +1,4 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const proseVariants = cva({ base: [ diff --git a/src/typography/Subheading/Subheading.tsx b/src/typography/Subheading/Subheading.tsx index 8c3a7b1..d8f0156 100644 --- a/src/typography/Subheading/Subheading.tsx +++ b/src/typography/Subheading/Subheading.tsx @@ -2,7 +2,7 @@ import { Slot } from "@radix-ui/react-slot" import type { HTMLAttributes } from "react" import { forwardRef, isValidElement } from "react" -import { type VariantProps, cx } from "~/shared/cva" +import { type VariantProps, cx } from "../../shared" import { subheadingVariants } from "./Subheading.variants" diff --git a/src/typography/Subheading/Subheading.variants.ts b/src/typography/Subheading/Subheading.variants.ts index a89854a..d81af20 100644 --- a/src/typography/Subheading/Subheading.variants.ts +++ b/src/typography/Subheading/Subheading.variants.ts @@ -1,4 +1,4 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const subheadingVariants = cva({ base: "font-medium uppercase", diff --git a/src/ui/Accordion/Accordion.stories.tsx b/src/ui/Accordion/Accordion.stories.tsx new file mode 100644 index 0000000..a254c67 --- /dev/null +++ b/src/ui/Accordion/Accordion.stories.tsx @@ -0,0 +1,39 @@ +import type { Meta, StoryObj } from "@storybook/react" + +import { H5 } from "../../typography/Heading" +import { Paragraph } from "../../typography/Paragraph" + +import { Accordion } from "./Accordion" + +type Story = StoryObj + +// Meta +export default { + title: "UI/Accordion", + component: Accordion, + args: { + ...Accordion.defaultProps, + style: { width: 300 }, + children: ( + + +
Accordion Trigger
+ + + + + Excepteur quis Lorem ad labore excepteur qui. Ut aliquip officia dolor pariatur nulla. + Amet dolore veniam commodo irure id. Aliqua anim mollit ullamco eiusmod do ad. Non + commodo est amet. Velit eu eu nostrud. Culpa ullamco aliqua ex. Duis ipsum in incididunt + laboris. + + + + ), + }, +} satisfies Meta + +// Stories +export const Default = { + args: {}, +} satisfies Story diff --git a/src/ui/Accordion/Accordion.tsx b/src/ui/Accordion/Accordion.tsx new file mode 100644 index 0000000..3769b2b --- /dev/null +++ b/src/ui/Accordion/Accordion.tsx @@ -0,0 +1,31 @@ +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { forwardRef } from "react" +import type { ComponentPropsWithoutRef, ElementRef } from "react" + +import { cx } from "../../shared" + +import { accordionVariants } from "./Accordion.variants" + +export const AccordionContent = forwardRef< + ElementRef, + ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) + +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export const Accordion = Object.assign(AccordionPrimitive.Root, { + Item: AccordionPrimitive.Item, + Trigger: AccordionPrimitive.Trigger, + Content: AccordionContent, +}) + +Accordion.defaultProps = { + collapsible: true, + type: "single", +} diff --git a/src/ui/Accordion/Accordion.variants.ts b/src/ui/Accordion/Accordion.variants.ts new file mode 100644 index 0000000..5568af9 --- /dev/null +++ b/src/ui/Accordion/Accordion.variants.ts @@ -0,0 +1,8 @@ +import { cva } from "../../shared" + +export const accordionVariants = cva({ + base: [ + "overflow-hidden transition-all", + "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", + ], +}) diff --git a/src/ui/Accordion/index.ts b/src/ui/Accordion/index.ts new file mode 100644 index 0000000..8354632 --- /dev/null +++ b/src/ui/Accordion/index.ts @@ -0,0 +1 @@ +export { Accordion } from "./Accordion" diff --git a/src/ui/Avatar/Avatar.stories.tsx b/src/ui/Avatar/Avatar.stories.tsx index 864bd96..9db7da7 100644 --- a/src/ui/Avatar/Avatar.stories.tsx +++ b/src/ui/Avatar/Avatar.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from "@storybook/react" import { UsersIcon, BadgeCheckIcon } from "lucide-react" -import { Dot } from "~/ui/Dot" +import { Dot } from "../Dot" import { Avatar } from "./Avatar" diff --git a/src/ui/Avatar/Avatar.tsx b/src/ui/Avatar/Avatar.tsx index bfc963a..9402eee 100644 --- a/src/ui/Avatar/Avatar.tsx +++ b/src/ui/Avatar/Avatar.tsx @@ -4,10 +4,9 @@ import { UserIcon } from "lucide-react" import { forwardRef, isValidElement } from "react" import type { ComponentPropsWithoutRef, ElementRef, ReactElement, RefObject } from "react" -import { useTheme } from "~/providers" -import { type VariantProps, cx } from "~/shared/cva" -import { getInitials, isReactElement } from "~/shared/helpers" -import { Loader } from "~/ui/Loader" +import { useTheme } from "../../providers" +import { type VariantProps, cx, getInitials, isReactElement } from "../../shared" +import { Loader } from "../Loader" import { avatarFallbackVariants, diff --git a/src/ui/Avatar/Avatar.variants.ts b/src/ui/Avatar/Avatar.variants.ts index 8197eef..30075be 100644 --- a/src/ui/Avatar/Avatar.variants.ts +++ b/src/ui/Avatar/Avatar.variants.ts @@ -1,4 +1,4 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const avatarVariants = cva({ base: "relative flex items-center justify-center shrink-0 w-auto", diff --git a/src/ui/AvatarGroup/AvatarGroup.tsx b/src/ui/AvatarGroup/AvatarGroup.tsx index d5cc25c..b6c61da 100644 --- a/src/ui/AvatarGroup/AvatarGroup.tsx +++ b/src/ui/AvatarGroup/AvatarGroup.tsx @@ -1,11 +1,10 @@ import type { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from "react" import { forwardRef } from "react" -import { type VariantProps, cx } from "~/shared/cva" -import { isReactElement } from "~/shared/helpers" -import type { AvatarElement, AvatarProps } from "~/ui/Avatar" -import { Avatar } from "~/ui/Avatar" -import type { avatarVariants } from "~/ui/Avatar/Avatar.variants" +import { type VariantProps, cx, isReactElement } from "../../shared" +import type { AvatarElement, AvatarProps } from "../Avatar/Avatar" +import { Avatar } from "../Avatar/Avatar" +import type { avatarVariants } from "../Avatar/Avatar.variants" import { avatarGroupItemVariants, avatarGroupVariants } from "./AvatarGroup.variants" diff --git a/src/ui/AvatarGroup/AvatarGroup.variants.ts b/src/ui/AvatarGroup/AvatarGroup.variants.ts index 002ffeb..c1eaa0b 100644 --- a/src/ui/AvatarGroup/AvatarGroup.variants.ts +++ b/src/ui/AvatarGroup/AvatarGroup.variants.ts @@ -1,4 +1,4 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const avatarGroupVariants = cva({ base: "flex flex-wrap items-center gap-y-1", diff --git a/src/ui/Backdrop/Backdrop.stories.tsx b/src/ui/Backdrop/Backdrop.stories.tsx new file mode 100644 index 0000000..60a2ffe --- /dev/null +++ b/src/ui/Backdrop/Backdrop.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from "@storybook/react" + +import { Backdrop } from "./Backdrop" + +type Story = StoryObj + +// Meta +export default { + title: "UI/Backdrop", + component: Backdrop, + args: { + ...Backdrop.defaultProps, + }, +} satisfies Meta + +// Stories +export const Default = { + args: {}, +} satisfies Story diff --git a/src/ui/Backdrop/Backdrop.tsx b/src/ui/Backdrop/Backdrop.tsx new file mode 100644 index 0000000..028d11c --- /dev/null +++ b/src/ui/Backdrop/Backdrop.tsx @@ -0,0 +1,16 @@ +import { forwardRef } from "react" +import type { HTMLAttributes } from "react" + +import type { VariantProps } from "../../shared" +import { cx } from "../../shared" + +import { backdropVariants } from "./Backdrop.variants" + +export type BackdropElement = HTMLDivElement +export type BackdropProps = HTMLAttributes & VariantProps + +export const Backdrop = forwardRef( + ({ className, ...props }, ref) => { + return
+ }, +) diff --git a/src/ui/Backdrop/Backdrop.variants.ts b/src/ui/Backdrop/Backdrop.variants.ts new file mode 100644 index 0000000..899b750 --- /dev/null +++ b/src/ui/Backdrop/Backdrop.variants.ts @@ -0,0 +1,8 @@ +import { cva } from "../../shared" + +export const backdropVariants = cva({ + base: [ + "fixed inset-0 z-40 backdrop-blur bg-gray-100/50 duration-300", + "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", + ], +}) diff --git a/src/ui/Backdrop/index.ts b/src/ui/Backdrop/index.ts new file mode 100644 index 0000000..c9b0261 --- /dev/null +++ b/src/ui/Backdrop/index.ts @@ -0,0 +1,2 @@ +export { Backdrop } from "./Backdrop" +export type { BackdropProps, BackdropElement } from "./Backdrop" diff --git a/src/ui/Badge/Badge.tsx b/src/ui/Badge/Badge.tsx index 0276058..f631d55 100644 --- a/src/ui/Badge/Badge.tsx +++ b/src/ui/Badge/Badge.tsx @@ -2,9 +2,9 @@ import { Slot } from "@radix-ui/react-slot" import { forwardRef, isValidElement } from "react" import type { ReactElement, HTMLAttributes } from "react" -import { useTheme } from "~/providers" -import { type VariantProps, cx } from "~/shared/cva" -import { Slottable } from "~/utils/Slottable" +import { useTheme } from "../../providers" +import { type VariantProps, cx } from "../../shared" +import { Slottable } from "../../utils/Slottable" import { badgeAffixVariants, badgeVariants } from "./Badge.variants" diff --git a/src/ui/Badge/Badge.variants.ts b/src/ui/Badge/Badge.variants.ts index 2b4f7cc..3a9f0b1 100644 --- a/src/ui/Badge/Badge.variants.ts +++ b/src/ui/Badge/Badge.variants.ts @@ -1,4 +1,4 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const badgeVariants = cva({ base: [ @@ -90,5 +90,5 @@ export const badgeVariants = cva({ }) export const badgeAffixVariants = cva({ - base: "-my-[0.044em] -mx-[0.25em] shrink-0 !size-[1.088em]", + base: "-my-[0.044em] -mx-[0.125em] shrink-0 !size-[1.088em]", }) diff --git a/src/ui/Blurb/Blurb.tsx b/src/ui/Blurb/Blurb.tsx index efdcd32..9281abe 100644 --- a/src/ui/Blurb/Blurb.tsx +++ b/src/ui/Blurb/Blurb.tsx @@ -2,10 +2,11 @@ import { Slot } from "@radix-ui/react-slot" import { forwardRef, isValidElement } from "react" import type { ComponentPropsWithoutRef, ReactElement } from "react" -import { type VariantProps, cx } from "~/shared/cva" -import type { ParagraphElement, ParagraphProps } from "~/typography/Paragraph" -import { Paragraph } from "~/typography/Paragraph" -import { Avatar, type AvatarElement, type AvatarProps } from "~/ui/Avatar" +import { type VariantProps, cx } from "../../shared" +import type { ParagraphElement, ParagraphProps } from "../../typography/Paragraph" +import { Paragraph } from "../../typography/Paragraph" +import type { AvatarElement, AvatarProps } from "../Avatar" +import { Avatar } from "../Avatar" import { blurbContentVariants, diff --git a/src/ui/Blurb/Blurb.variants.ts b/src/ui/Blurb/Blurb.variants.ts index aaa37db..ec5c801 100644 --- a/src/ui/Blurb/Blurb.variants.ts +++ b/src/ui/Blurb/Blurb.variants.ts @@ -1,11 +1,11 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const blurbVariants = cva({ - base: "flex items-center gap-3 text-start", + base: "flex items-center gap-3 text-start min-w-0", }) export const blurbContentVariants = cva({ - base: "flex min-w-0 flex-1 flex-col gap-0.5", + base: "flex flex-col gap-0.5 flex-1 min-w-0", }) export const blurbTitleVariants = cva({ diff --git a/src/ui/Box/Box.stories.tsx b/src/ui/Box/Box.stories.tsx index 2d3d6f5..5d99498 100644 --- a/src/ui/Box/Box.stories.tsx +++ b/src/ui/Box/Box.stories.tsx @@ -1,8 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react" -import { Paragraph } from "~/typography/Paragraph" -import { Button } from "~/ui/Button" - import { Box } from "./Box" type Story = StoryObj @@ -11,9 +8,6 @@ type Story = StoryObj export default { title: "UI/Box", component: Box, - parameters: { - layout: "padded", - }, args: { ...Box.defaultProps, children: "Box content", @@ -24,20 +18,3 @@ export default { export const Default = { args: {}, } satisfies Story - -export const WithCustomMarkup = { - render: (props) => ( - - - - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos? Lorem ipsum dolor - sit amet consectetur adipisicing elit. Quisquam, quos? - - - - - - - ), -} satisfies Story diff --git a/src/ui/Box/Box.tsx b/src/ui/Box/Box.tsx index 9934c20..81a8c21 100644 --- a/src/ui/Box/Box.tsx +++ b/src/ui/Box/Box.tsx @@ -1,18 +1,15 @@ import { Slot } from "@radix-ui/react-slot" import { forwardRef, isValidElement } from "react" -import type { ComponentPropsWithoutRef, ElementRef, HTMLAttributes } from "react" +import type { HTMLAttributes } from "react" -import { Header } from "~/layout/Header" -import { type VariantProps, cx } from "~/shared/cva" +import { type VariantProps, cx } from "../../shared" -import { boxFooterVariants, boxVariants } from "./Box.variants" +import { boxVariants } from "./Box.variants" export type BoxElement = HTMLDivElement -type BoxVariantProps = VariantProps & VariantProps - export type BoxProps = HTMLAttributes & - BoxVariantProps & { + VariantProps & { /** * If set to `true`, the button will be rendered as a child within the component. * This child component must be a valid React component. @@ -20,44 +17,15 @@ export type BoxProps = HTMLAttributes & asChild?: boolean } -const BoxRoot = forwardRef((props, ref) => { - const { className, asChild, padded, ...rest } = props +export const Box = forwardRef((props, ref) => { + const { className, asChild, ...rest } = props const useAsChild = asChild && isValidElement(rest.children) const Component = useAsChild ? Slot : "div" - return -}) - -const BoxHeader = forwardRef, ComponentPropsWithoutRef>( - (props, ref) => { - return
- }, -) - -const BoxFooter = forwardRef< - HTMLDivElement, - ComponentPropsWithoutRef<"div"> & VariantProps ->(({ className, padded, ...rest }, ref) => { - return
-}) - -const BoxBase = forwardRef((props, ref) => { - return -}) - -BoxBase.displayName = "Box" -BoxRoot.displayName = "BoxRoot" -BoxHeader.displayName = "BoxHeader" -BoxFooter.displayName = "BoxFooter" - -export const Box = Object.assign(BoxBase, { - Header: BoxHeader, - Footer: BoxFooter, - Root: BoxRoot, + return }) Box.defaultProps = { - padded: true, asChild: false, } diff --git a/src/ui/Box/Box.variants.ts b/src/ui/Box/Box.variants.ts index 7776f98..070ad37 100644 --- a/src/ui/Box/Box.variants.ts +++ b/src/ui/Box/Box.variants.ts @@ -1,29 +1,5 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const boxVariants = cva({ - base: "bg-white border rounded-md text-sm overflow-clip !shadow-sm", - - variants: { - padded: { - true: "flex flex-col gap-8 p-6 md:p-8", - }, - }, - - defaultVariants: { - padded: true, - }, -}) - -export const boxFooterVariants = cva({ - base: "flex flex-row-reverse items-center justify-between gap-4 border-t px-6 py-4 md:-mx-8 md:-mb-8 md:px-8 md:py-6", - - variants: { - padded: { - true: "-mx-6 -mb-6", - }, - }, - - defaultVariants: { - padded: true, - }, + base: "bg-white border rounded-md shadow-sm", }) diff --git a/src/ui/Button/Button.tsx b/src/ui/Button/Button.tsx index 2f0271e..84e18b3 100644 --- a/src/ui/Button/Button.tsx +++ b/src/ui/Button/Button.tsx @@ -2,11 +2,10 @@ import { Slot } from "@radix-ui/react-slot" import type { ButtonHTMLAttributes, ReactElement } from "react" import { forwardRef, isValidElement } from "react" -import { useTheme } from "~/providers" -import { type VariantProps, cx } from "~/shared/cva" -import { isChildrenEmpty } from "~/shared/helpers" -import { Loader } from "~/ui/Loader" -import { Slottable } from "~/utils/Slottable" +import { useTheme } from "../../providers" +import { type VariantProps, cx, isChildrenEmpty } from "../../shared" +import { Slottable } from "../../utils/Slottable" +import { Loader } from "../Loader" import { buttonAffixVariants, buttonVariants } from "./Button.variants" diff --git a/src/ui/Button/Button.variants.ts b/src/ui/Button/Button.variants.ts index 58ba14d..b26df43 100644 --- a/src/ui/Button/Button.variants.ts +++ b/src/ui/Button/Button.variants.ts @@ -1,4 +1,4 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const buttonVariants = cva({ base: [ diff --git a/src/ui/Card/Card.stories.tsx b/src/ui/Card/Card.stories.tsx new file mode 100644 index 0000000..34e4bd6 --- /dev/null +++ b/src/ui/Card/Card.stories.tsx @@ -0,0 +1,40 @@ +import type { Meta, StoryObj } from "@storybook/react" + +import { Paragraph } from "../../typography/Paragraph" +import { Button } from "../Button" + +import { Card } from "./Card" + +type Story = StoryObj + +// Meta +export default { + title: "UI/Card", + component: Card, + args: { + ...Card.defaultProps, + children: "Card content", + }, +} satisfies Meta + +// Stories +export const Default = { + args: {}, +} satisfies Story + +export const WithCustomMarkup = { + render: (props) => ( + + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos? Lorem ipsum dolor + sit amet consectetur adipisicing elit. Quisquam, quos? + + + + + + + ), +} satisfies Story diff --git a/src/ui/Card/Card.tsx b/src/ui/Card/Card.tsx new file mode 100644 index 0000000..d4ab443 --- /dev/null +++ b/src/ui/Card/Card.tsx @@ -0,0 +1,55 @@ +import { forwardRef } from "react" +import type { ComponentPropsWithoutRef, ElementRef } from "react" + +import { Header } from "../../layout/Header" +import { type VariantProps, cx } from "../../shared" +import type { BoxElement, BoxProps } from "../Box" +import { Box } from "../Box" + +import { cardPanelVariants, cardVariants } from "./Card.variants" + +export type CardElement = BoxElement +export type CardProps = BoxProps & VariantProps + +const CardRoot = forwardRef(({ className, ...props }, ref) => { + return +}) + +const CardHeader = forwardRef< + ElementRef, + ComponentPropsWithoutRef & VariantProps +>(({ className, ...props }, ref) => { + return ( +
+ ) +}) + +const CardFooter = forwardRef< + HTMLDivElement, + ComponentPropsWithoutRef<"div"> & VariantProps +>(({ className, ...props }, ref) => { + return ( +
+ ) +}) + +CardRoot.displayName = "Card" +CardHeader.displayName = "CardHeader" +CardFooter.displayName = "CardFooter" + +export const Card = Object.assign(CardRoot, { + Header: CardHeader, + Footer: CardFooter, +}) + +Card.defaultProps = { + asChild: false, +} diff --git a/src/ui/Card/Card.variants.ts b/src/ui/Card/Card.variants.ts new file mode 100644 index 0000000..5544adb --- /dev/null +++ b/src/ui/Card/Card.variants.ts @@ -0,0 +1,16 @@ +import { cva } from "../../shared" + +export const cardVariants = cva({ + base: "flex flex-col gap-8 p-6 overflow-auto md:p-8", +}) + +export const cardPanelVariants = cva({ + base: "sticky inset-x-0 z-30 flex flex-row-reverse items-center justify-between gap-4 px-6 py-4 -mx-6 bg-white md:-mx-8 md:px-8 md:py-6", + + variants: { + position: { + top: "-mt-6 -top-6 border-b md:-mt-8 md:-top-8", + bottom: "-mb-6 mt-auto bg-gray-100 -bottom-6 border-t md:-mb-8 md:-bottom-8", + }, + }, +}) diff --git a/src/ui/Card/index.ts b/src/ui/Card/index.ts new file mode 100644 index 0000000..7d6a575 --- /dev/null +++ b/src/ui/Card/index.ts @@ -0,0 +1,2 @@ +export { Card } from "./Card" +export type { CardProps, CardElement } from "./Card" diff --git a/src/ui/Dot/Dot.tsx b/src/ui/Dot/Dot.tsx index 09e940e..aa6a8f5 100644 --- a/src/ui/Dot/Dot.tsx +++ b/src/ui/Dot/Dot.tsx @@ -1,8 +1,8 @@ import { Slot } from "@radix-ui/react-slot" import { type HTMLAttributes, forwardRef, isValidElement } from "react" -import { useTheme } from "~/providers" -import { type VariantProps } from "~/shared/cva" +import { useTheme } from "../../providers" +import { type VariantProps } from "../../shared" import { dotVariants } from "./Dot.variants" diff --git a/src/ui/Dot/Dot.variants.ts b/src/ui/Dot/Dot.variants.ts index ef70eb1..966257c 100644 --- a/src/ui/Dot/Dot.variants.ts +++ b/src/ui/Dot/Dot.variants.ts @@ -1,4 +1,4 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const dotVariants = cva({ base: "block rounded-full border border-transparent", diff --git a/src/ui/FeatureCard/FeatureCard.stories.tsx b/src/ui/FeatureCard/FeatureCard.stories.tsx index 2f88ebf..bd59160 100644 --- a/src/ui/FeatureCard/FeatureCard.stories.tsx +++ b/src/ui/FeatureCard/FeatureCard.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from "@storybook/react" import { HeadphonesIcon, XSquareIcon } from "lucide-react" -import { Paragraph } from "~/typography/Paragraph" +import { Paragraph } from "../../typography/Paragraph" import { FeatureCard } from "./FeatureCard" diff --git a/src/ui/FeatureCard/FeatureCard.tsx b/src/ui/FeatureCard/FeatureCard.tsx index f8bd902..7fcb91d 100644 --- a/src/ui/FeatureCard/FeatureCard.tsx +++ b/src/ui/FeatureCard/FeatureCard.tsx @@ -3,9 +3,9 @@ import { XIcon } from "lucide-react" import { forwardRef, isValidElement } from "react" import type { ButtonHTMLAttributes, HTMLAttributes } from "react" -import { useTheme } from "~/providers" -import { cx, type VariantProps } from "~/shared/cva" -import { Slottable } from "~/utils/Slottable" +import { useTheme } from "../../providers" +import { cx, type VariantProps } from "../../shared" +import { Slottable } from "../../utils/Slottable" import { featureCardCloserVariants, featureCardVariants } from "./FeatureCard.variants" diff --git a/src/ui/FeatureCard/FeatureCard.variants.ts b/src/ui/FeatureCard/FeatureCard.variants.ts index 53ef795..0b03b65 100644 --- a/src/ui/FeatureCard/FeatureCard.variants.ts +++ b/src/ui/FeatureCard/FeatureCard.variants.ts @@ -1,4 +1,4 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const featureCardVariants = cva({ base: "relative flex flex-wrap items-center gap-x-2.5 gap-y-3 p-4 rounded-lg border border-transparent text-start", diff --git a/src/ui/Loader/Loader.tsx b/src/ui/Loader/Loader.tsx index d52d4bb..0e737d0 100644 --- a/src/ui/Loader/Loader.tsx +++ b/src/ui/Loader/Loader.tsx @@ -2,7 +2,7 @@ import { LoaderIcon } from "lucide-react" import { forwardRef } from "react" import type { ComponentPropsWithoutRef, ElementRef } from "react" -import { cx } from "~/shared/cva" +import { cx } from "../../shared" export const Loader = forwardRef< ElementRef, diff --git a/src/ui/MenuItem/MenuItem.tsx b/src/ui/MenuItem/MenuItem.tsx index 5221b40..5e4d816 100644 --- a/src/ui/MenuItem/MenuItem.tsx +++ b/src/ui/MenuItem/MenuItem.tsx @@ -3,12 +3,12 @@ import { ChevronRightIcon } from "lucide-react" import { forwardRef, isValidElement } from "react" import type { ReactElement, ButtonHTMLAttributes } from "react" -import { useTheme } from "~/providers" -import { cx, type VariantProps } from "~/shared/cva" -import { isChildrenEmpty } from "~/shared/helpers" -import { Loader } from "~/ui/Loader" -import { menuItemAffixVariants, menuItemVariants } from "~/ui/MenuItem/MenuItem.variants" -import { Slottable } from "~/utils/Slottable" +import { useTheme } from "../../providers" +import { cx, isChildrenEmpty, type VariantProps } from "../../shared" +import { Slottable } from "../../utils/Slottable" +import { Loader } from "../Loader" + +import { menuItemVariants, menuItemAffixVariants } from "./MenuItem.variants" export type MenuItemElement = HTMLButtonElement diff --git a/src/ui/MenuItem/MenuItem.variants.ts b/src/ui/MenuItem/MenuItem.variants.ts index d687545..1c9f93a 100644 --- a/src/ui/MenuItem/MenuItem.variants.ts +++ b/src/ui/MenuItem/MenuItem.variants.ts @@ -1,14 +1,14 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const menuItemVariants = cva({ base: [ - "group/menu-item relative flex items-center gap-2.5 min-w-0 px-3 py-2 rounded-md font-medium text-sm text-start text-gray-500 hover:bg-gray-100", + "group/menu-item relative flex items-center gap-2.5 min-w-0 px-3 py-2 rounded-md font-medium text-sm text-start text-gray-500 hover:bg-gray-200/50", // Pseudo "before:absolute before:right-full before:top-1/2 before:h-2/3 before:w-1 before:mr-4 before:rounded-r-md before:-translate-y-1/2", // Active - "aria-[current=page]:bg-gray-100 aria-[current=page]:text-black aria-[current=page]:before:content-['']", + "aria-[current=page]:bg-gray-200/50 aria-[current=page]:text-black aria-[current=page]:before:content-['']", // Disabled "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none", @@ -38,14 +38,14 @@ export const menuItemAffixVariants = cva({ variants: { theme: { - blue: "group-aria-[current=page]/menu-item:text-blue-dark", - orange: "group-aria-[current=page]/menu-item:text-orange-dark", - yellow: "group-aria-[current=page]/menu-item:text-yellow-dark", - red: "group-aria-[current=page]/menu-item:text-red-dark", - green: "group-aria-[current=page]/menu-item:text-green-dark", - purple: "group-aria-[current=page]/menu-item:text-purple-dark", - pink: "group-aria-[current=page]/menu-item:text-pink-dark", - teal: "group-aria-[current=page]/menu-item:text-teal-dark", + blue: "group-aria-[current=page]/menu-item:text-blue", + orange: "group-aria-[current=page]/menu-item:text-orange", + yellow: "group-aria-[current=page]/menu-item:text-yellow", + red: "group-aria-[current=page]/menu-item:text-red", + green: "group-aria-[current=page]/menu-item:text-green", + purple: "group-aria-[current=page]/menu-item:text-purple", + pink: "group-aria-[current=page]/menu-item:text-pink", + teal: "group-aria-[current=page]/menu-item:text-teal", gray: "group-aria-[current=page]/menu-item:text-current", }, }, diff --git a/src/ui/Modal/Modal.stories.tsx b/src/ui/Modal/Modal.stories.tsx index 56dc39b..163a3c2 100644 --- a/src/ui/Modal/Modal.stories.tsx +++ b/src/ui/Modal/Modal.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from "@storybook/react" -import { Paragraph } from "~/typography/Paragraph" -import { Button } from "~/ui/Button" +import { Paragraph } from "../../typography/Paragraph" +import { Button } from "../Button" import { Modal } from "./Modal" diff --git a/src/ui/Modal/Modal.tsx b/src/ui/Modal/Modal.tsx index c33b0f6..d171bf0 100644 --- a/src/ui/Modal/Modal.tsx +++ b/src/ui/Modal/Modal.tsx @@ -1,10 +1,10 @@ import { forwardRef } from "react" import type { ComponentPropsWithoutRef, ElementRef } from "react" -import type { Header } from "~/layout/Header" -import { type VariantProps, cx } from "~/shared/cva" -import type { BoxElement, BoxProps } from "~/ui/Box" -import { Box } from "~/ui/Box" +import type { Header } from "../../layout/Header" +import { type VariantProps, cx } from "../../shared" +import type { BoxElement, BoxProps } from "../Box" +import { Box } from "../Box" import { modalVariants } from "./Modal.variants" diff --git a/src/ui/Modal/Modal.variants.ts b/src/ui/Modal/Modal.variants.ts index 58616bc..18a1cd1 100644 --- a/src/ui/Modal/Modal.variants.ts +++ b/src/ui/Modal/Modal.variants.ts @@ -1,4 +1,4 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const modalVariants = cva({ base: "fixed left-1/2 -translate-x-1/2 z-50 max-w-[calc(100vw-2rem)] !overflow-auto", diff --git a/src/ui/ProgressBar/ProgressBar.stories.tsx b/src/ui/ProgressBar/ProgressBar.stories.tsx index 2ae8d97..8b75910 100644 --- a/src/ui/ProgressBar/ProgressBar.stories.tsx +++ b/src/ui/ProgressBar/ProgressBar.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react" -import { Paragraph } from "~/typography/Paragraph" +import { Paragraph } from "../../typography/Paragraph" import { ProgressBar } from "./ProgressBar" diff --git a/src/ui/ProgressBar/ProgressBar.tsx b/src/ui/ProgressBar/ProgressBar.tsx index dfb4a3f..69c03cd 100644 --- a/src/ui/ProgressBar/ProgressBar.tsx +++ b/src/ui/ProgressBar/ProgressBar.tsx @@ -1,11 +1,10 @@ import { Slot } from "@radix-ui/react-slot" import { type HTMLAttributes, forwardRef, isValidElement } from "react" -import { useTheme } from "~/providers" -import { cx, type VariantProps } from "~/shared/cva" -import { cleanPercentage } from "~/shared/helpers" -import type { ParagraphElement, ParagraphProps } from "~/typography/Paragraph" -import { Paragraph } from "~/typography/Paragraph" +import { useTheme } from "../../providers" +import { cleanPercentage, cx, type VariantProps } from "../../shared" +import type { ParagraphElement, ParagraphProps } from "../../typography/Paragraph" +import { Paragraph } from "../../typography/Paragraph" import { progressBarProgressVariants, diff --git a/src/ui/ProgressBar/ProgressBar.variants.ts b/src/ui/ProgressBar/ProgressBar.variants.ts index 1e6a0e4..119cb5e 100644 --- a/src/ui/ProgressBar/ProgressBar.variants.ts +++ b/src/ui/ProgressBar/ProgressBar.variants.ts @@ -1,4 +1,4 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const progressBarVariants = cva({ base: "flex flex-wrap items-center gap-2 w-full", diff --git a/src/ui/ProgressRing/ProgressRing.tsx b/src/ui/ProgressRing/ProgressRing.tsx index 32cc53a..5af2f0b 100644 --- a/src/ui/ProgressRing/ProgressRing.tsx +++ b/src/ui/ProgressRing/ProgressRing.tsx @@ -1,8 +1,8 @@ import { type HTMLAttributes, forwardRef } from "react" -import { useTheme } from "~/providers" -import { cleanPercentage } from "~/shared" -import { cx, type VariantProps } from "~/shared/cva" +import { useTheme } from "../../providers" +import type { VariantProps } from "../../shared" +import { cleanPercentage, cx } from "../../shared" import { progressRingCircleVariants, progressRingVariants } from "./ProgressRing.variants" diff --git a/src/ui/ProgressRing/ProgressRing.variants.ts b/src/ui/ProgressRing/ProgressRing.variants.ts index 99c65f5..74b2b8d 100644 --- a/src/ui/ProgressRing/ProgressRing.variants.ts +++ b/src/ui/ProgressRing/ProgressRing.variants.ts @@ -1,4 +1,4 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const progressRingVariants = cva({ variants: { diff --git a/src/ui/Shortcut/Shortcut.tsx b/src/ui/Shortcut/Shortcut.tsx index df54f10..db54dc5 100644 --- a/src/ui/Shortcut/Shortcut.tsx +++ b/src/ui/Shortcut/Shortcut.tsx @@ -2,8 +2,8 @@ import { Slot } from "@radix-ui/react-slot" import type { ComponentPropsWithoutRef, ElementRef } from "react" import { forwardRef } from "react" -import { type VariantProps } from "~/shared/cva" -import { Subheading } from "~/typography/Subheading" +import type { VariantProps } from "../../shared" +import { Subheading } from "../../typography/Subheading" import { shortcutVariants } from "./Shortcut.variants" diff --git a/src/ui/Shortcut/Shortcut.variants.ts b/src/ui/Shortcut/Shortcut.variants.ts index 9e52667..8446d04 100644 --- a/src/ui/Shortcut/Shortcut.variants.ts +++ b/src/ui/Shortcut/Shortcut.variants.ts @@ -1,4 +1,4 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const shortcutVariants = cva({ base: "whitespace-nowrap rounded border border-transparent px-[0.4em] py-[0.088em] font-medium text-gray-400", diff --git a/src/ui/Status/Status.tsx b/src/ui/Status/Status.tsx index fa9f6d1..f08745e 100644 --- a/src/ui/Status/Status.tsx +++ b/src/ui/Status/Status.tsx @@ -2,9 +2,10 @@ import { Slot } from "@radix-ui/react-slot" import { forwardRef, isValidElement } from "react" import type { ReactElement, HTMLAttributes } from "react" -import { useTheme } from "~/providers" -import { type VariantProps, cx } from "~/shared/cva" -import { Slottable } from "~/utils/Slottable" +import { useTheme } from "../../providers" +import type { VariantProps } from "../../shared" +import { cx } from "../../shared" +import { Slottable } from "../../utils/Slottable" import { statusAffixVariants, statusVariants } from "./Status.variants" diff --git a/src/ui/Status/Status.variants.ts b/src/ui/Status/Status.variants.ts index 5dbc97a..c539995 100644 --- a/src/ui/Status/Status.variants.ts +++ b/src/ui/Status/Status.variants.ts @@ -1,4 +1,4 @@ -import { cva } from "~/shared/cva" +import { cva } from "../../shared" export const statusVariants = cva({ base: [ diff --git a/tsconfig.json b/tsconfig.json index c8df178..9d20c1f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -105,9 +105,6 @@ /* Completeness */ "skipLibCheck": true /* Skip type checking all .d.ts files. */, // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ - - /* Path Aliases */ - "paths": { "~/*": ["./src/*"] }, }, "include": ["src"],