From dcfbb1c2e2e03498b1d622b85b9f2d512f3701c9 Mon Sep 17 00:00:00 2001 From: SutuSebastian Date: Wed, 29 May 2024 19:02:47 +0300 Subject: [PATCH 1/7] feat(components): add "Device Mockups" --- apps/web/components/mdx.tsx | 20 ++- .../docs/components/device-mockups.mdx | 108 ++++++++++++++ apps/web/data/docs-sidebar.ts | 1 + apps/web/examples/index.ts | 1 + apps/web/examples/mockup/index.ts | 8 ++ apps/web/examples/mockup/mockup.colors.tsx | 84 +++++++++++ apps/web/examples/mockup/mockup.desktop.tsx | 81 +++++++++++ .../examples/mockup/mockup.googlePixel.tsx | 81 +++++++++++ apps/web/examples/mockup/mockup.iPhone12.tsx | 81 +++++++++++ apps/web/examples/mockup/mockup.laptop.tsx | 81 +++++++++++ apps/web/examples/mockup/mockup.root.tsx | 81 +++++++++++ .../web/examples/mockup/mockup.smartwatch.tsx | 81 +++++++++++ apps/web/examples/mockup/mockup.tablet.tsx | 81 +++++++++++ .../src/components/Flowbite/FlowbiteTheme.ts | 2 + .../src/components/Mockup/DefaultMockup.tsx | 24 ++++ .../src/components/Mockup/DesktopMockup.tsx | 23 +++ .../components/Mockup/GooglePixelMockup.tsx | 25 ++++ .../src/components/Mockup/IPhone12Mockup.tsx | 24 ++++ .../ui/src/components/Mockup/LaptopMockup.tsx | 24 ++++ .../src/components/Mockup/Mockup.stories.tsx | 134 ++++++++++++++++++ .../components/Mockup/SmartwatchMockup.tsx | 25 ++++ .../ui/src/components/Mockup/TabletMockup.tsx | 24 ++++ packages/ui/src/components/Mockup/index.ts | 14 ++ packages/ui/src/components/Mockup/theme.ts | 99 +++++++++++++ packages/ui/src/index.ts | 1 + packages/ui/src/theme.ts | 12 +- 26 files changed, 1204 insertions(+), 16 deletions(-) create mode 100644 apps/web/content/docs/components/device-mockups.mdx create mode 100644 apps/web/examples/mockup/index.ts create mode 100644 apps/web/examples/mockup/mockup.colors.tsx create mode 100644 apps/web/examples/mockup/mockup.desktop.tsx create mode 100644 apps/web/examples/mockup/mockup.googlePixel.tsx create mode 100644 apps/web/examples/mockup/mockup.iPhone12.tsx create mode 100644 apps/web/examples/mockup/mockup.laptop.tsx create mode 100644 apps/web/examples/mockup/mockup.root.tsx create mode 100644 apps/web/examples/mockup/mockup.smartwatch.tsx create mode 100644 apps/web/examples/mockup/mockup.tablet.tsx create mode 100644 packages/ui/src/components/Mockup/DefaultMockup.tsx create mode 100644 packages/ui/src/components/Mockup/DesktopMockup.tsx create mode 100644 packages/ui/src/components/Mockup/GooglePixelMockup.tsx create mode 100644 packages/ui/src/components/Mockup/IPhone12Mockup.tsx create mode 100644 packages/ui/src/components/Mockup/LaptopMockup.tsx create mode 100644 packages/ui/src/components/Mockup/Mockup.stories.tsx create mode 100644 packages/ui/src/components/Mockup/SmartwatchMockup.tsx create mode 100644 packages/ui/src/components/Mockup/TabletMockup.tsx create mode 100644 packages/ui/src/components/Mockup/index.ts create mode 100644 packages/ui/src/components/Mockup/theme.ts diff --git a/apps/web/components/mdx.tsx b/apps/web/components/mdx.tsx index f7ab9fa9b..6466e924e 100644 --- a/apps/web/components/mdx.tsx +++ b/apps/web/components/mdx.tsx @@ -50,27 +50,25 @@ const components: MDXComponents = { ), Example: ({ name }: { name: string }) => { - function pick(obj: T, path: string): CodeData | undefined { - if (!path) return obj as CodeData; - const properties = path.split("."); - const key = properties.shift() as keyof typeof obj; - if (!(key in obj)) return; - return pick(obj[key] as T, properties.join(".")); - } - - const codeData = pick(examples, name); + const codeData = get(examples, name); if (!codeData) return <>{``}; return ; }, Theme: ({ name }: { name: keyof typeof theme }) => { - if (!(name in theme)) return <>{``}; + const value = get(theme, name); + + if (!value) return <>{``}; - return ; + return ; }, }; +function get(obj: Record, path: string): T | undefined { + return path.split(".").reduce((acc, key) => acc && acc[key], obj) as T | undefined; +} + export function Mdx({ code }: { code: string }) { const Component = getMDXComponent(code); diff --git a/apps/web/content/docs/components/device-mockups.mdx b/apps/web/content/docs/components/device-mockups.mdx new file mode 100644 index 000000000..6f4bb93e0 --- /dev/null +++ b/apps/web/content/docs/components/device-mockups.mdx @@ -0,0 +1,108 @@ +--- +title: React Device Mockups - Flowbite +description: Use the device mockups component to add content and screenshot previews of your application inside phone and tablet frames coded with Tailwind CSS and Flowbite +--- + +The device mockup component can be used to feature a preview and screenshot of your application as if you would already use it on a mobile phone and it’s a great use case for hero and CTA sections. + +This component is built using only the utility classes from Tailwind CSS and has built-in dark mode support so it’s easy to customize, it loads very fast and integrates perfectly with Tailwind CSS and Flowbite. + +You can choose from multiple examples of mockups including phone, tablet, laptop, and even desktop devices with iOS or Android support. + +To start using the mockup components you need to import them from `flowbite-react`: + +```jsx +import { + DefaultMockup, + DesktopMockup, + GooglePixelMockup, + IPhone12Mockup, + LaptopMockup, + SmartwatchMockup, + TabletMockup, +} from "flowbite-react"; +``` + +## Default mockup + +Use this example to show a standard phone mockup based on Tailwind CSS and add your app screenshot inside of it with dark mode support included. + + + +## iPhone 12 mockup (iOS) + +Use this example to clearly show that the preview of your application is being used on an iPhone with iOS. + + + +## Google Pixel (Android) + +Use this alternative phone mockup example if you want to feature previews for android gadgets. + + + +## Tablet mockup + +This component can be used to show an application preview inside of a responsive tablet mockup. + + + +## Laptop mockup + +This example can be used to show a screenshot of your application inside a laptop mockup. + + + +## Desktop mockup + +Use this example to show a preview of your application inside a desktop device such as an iMac. + + + +## Smartwatch mockup + +This component can be used to showcase applications built for smartwatches. + + + +## Mockup colors + +You can easily update the color of the mockup by changing the background color with Tailwind CSS. + + + +## Theme + +To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme). + +### Default mockup theme + + + +### iPhone 12 mockup (iOS) theme + + + +### Google Pixel (Android) theme + + + +### Tablet mockup theme + + + +### Laptop mockup theme + + + +### Desktop mockup theme + + + +### Smartwatch mockup theme + + + +## References + +- [Flowbite Device Mockups](https://flowbite.com/docs/components/device-mockups/) diff --git a/apps/web/data/docs-sidebar.ts b/apps/web/data/docs-sidebar.ts index 73af25d81..efea67671 100644 --- a/apps/web/data/docs-sidebar.ts +++ b/apps/web/data/docs-sidebar.ts @@ -64,6 +64,7 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [ { title: "Card", href: "/docs/components/card" }, { title: "Carousel", href: "/docs/components/carousel" }, { title: "Datepicker", href: "/docs/components/datepicker", isNew: true }, + { title: "Device Mockups", href: "/docs/components/device-mockups", isNew: true }, { title: "Drawer", href: "/docs/components/drawer", isNew: true }, { title: "Dropdown", href: "/docs/components/dropdown" }, { title: "Footer", href: "/docs/components/footer" }, diff --git a/apps/web/examples/index.ts b/apps/web/examples/index.ts index 8f1c4575d..82b65aa14 100644 --- a/apps/web/examples/index.ts +++ b/apps/web/examples/index.ts @@ -20,6 +20,7 @@ export * as kbd from "./kbd"; export * as list from "./list"; export * as listGroup from "./listGroup"; export * as megaMenu from "./megaMenu"; +export * as mockup from "./mockup"; export * as modal from "./modal"; export * as navbar from "./navbar"; export * as pagination from "./pagination"; diff --git a/apps/web/examples/mockup/index.ts b/apps/web/examples/mockup/index.ts new file mode 100644 index 000000000..848814456 --- /dev/null +++ b/apps/web/examples/mockup/index.ts @@ -0,0 +1,8 @@ +export { colors } from "./mockup.colors"; +export { desktop } from "./mockup.desktop"; +export { googlePixel } from "./mockup.googlePixel"; +export { iPhone12 } from "./mockup.iPhone12"; +export { laptop } from "./mockup.laptop"; +export { root } from "./mockup.root"; +export { smartwatch } from "./mockup.smartwatch"; +export { tablet } from "./mockup.tablet"; diff --git a/apps/web/examples/mockup/mockup.colors.tsx b/apps/web/examples/mockup/mockup.colors.tsx new file mode 100644 index 000000000..3064671c8 --- /dev/null +++ b/apps/web/examples/mockup/mockup.colors.tsx @@ -0,0 +1,84 @@ +import { DefaultMockup, getTheme } from "flowbite-react"; +import { twMerge } from "tailwind-merge"; +import { type CodeData } from "~/components/code-demo"; + +const code = ` +"use client"; + +import { DefaultMockup, getTheme } from "flowbite-react"; +import { twMerge } from "tailwind-merge"; + +export function Component() { + return ( + + + + + ); +} +`; + +const codeRSC = ` +import { DefaultMockup, getTheme } from "flowbite-react"; +import { twMerge } from "tailwind-merge"; + +export function Component() { + return ( + + + + + ); +} +`; + +export function Component() { + return ( + + + + + ); +} + +export const colors: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code: codeRSC, + }, + ], + githubSlug: "mockup/mockup.colors.tsx", + component: , +}; diff --git a/apps/web/examples/mockup/mockup.desktop.tsx b/apps/web/examples/mockup/mockup.desktop.tsx new file mode 100644 index 000000000..d23549bcc --- /dev/null +++ b/apps/web/examples/mockup/mockup.desktop.tsx @@ -0,0 +1,81 @@ +import { DefaultMockup, DesktopMockup } from "flowbite-react"; +import { type CodeData } from "~/components/code-demo"; + +const code = ` +"use client"; + +import { DefaultMockup } from "flowbite-react"; + +export function Component() { + return ( + + + + + ); +} +`; + +const codeRSC = ` +import { DefaultMockup } from "flowbite-react"; + +export function Component() { + return ( + + + + + ); +} +`; + +export function Component() { + return ( + + + + + ); +} + +export const desktop: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code: codeRSC, + }, + ], + githubSlug: "mockup/mockup.desktop.tsx", + component: , +}; diff --git a/apps/web/examples/mockup/mockup.googlePixel.tsx b/apps/web/examples/mockup/mockup.googlePixel.tsx new file mode 100644 index 000000000..6badf55a3 --- /dev/null +++ b/apps/web/examples/mockup/mockup.googlePixel.tsx @@ -0,0 +1,81 @@ +import { GooglePixelMockup } from "flowbite-react"; +import { type CodeData } from "~/components/code-demo"; + +const code = ` +"use client"; + +import { DefaultMockup } from "flowbite-react"; + +export function Component() { + return ( + + + + + ); +} +`; + +const codeRSC = ` +import { DefaultMockup } from "flowbite-react"; + +export function Component() { + return ( + + + + + ); +} +`; + +export function Component() { + return ( + + + + + ); +} + +export const googlePixel: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code: codeRSC, + }, + ], + githubSlug: "mockup/mockup.googlePixel.tsx", + component: , +}; diff --git a/apps/web/examples/mockup/mockup.iPhone12.tsx b/apps/web/examples/mockup/mockup.iPhone12.tsx new file mode 100644 index 000000000..e5d277365 --- /dev/null +++ b/apps/web/examples/mockup/mockup.iPhone12.tsx @@ -0,0 +1,81 @@ +import { IPhone12Mockup } from "flowbite-react"; +import { type CodeData } from "~/components/code-demo"; + +const code = ` +"use client"; + +import { IPhone12Mockup } from "flowbite-react"; + +export function Component() { + return ( + + + + + ); +} +`; + +const codeRSC = ` +import { IPhone12Mockup } from "flowbite-react"; + +export function Component() { + return ( + + + + + ); +} +`; + +export function Component() { + return ( + + + + + ); +} + +export const iPhone12: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code: codeRSC, + }, + ], + githubSlug: "mockup/mockup.iPhone12.tsx", + component: , +}; diff --git a/apps/web/examples/mockup/mockup.laptop.tsx b/apps/web/examples/mockup/mockup.laptop.tsx new file mode 100644 index 000000000..6a260ac90 --- /dev/null +++ b/apps/web/examples/mockup/mockup.laptop.tsx @@ -0,0 +1,81 @@ +import { LaptopMockup } from "flowbite-react"; +import { type CodeData } from "~/components/code-demo"; + +const code = ` +"use client"; + +import { DefaultMockup } from "flowbite-react"; + +export function Component() { + return ( + + + + + ); +} +`; + +const codeRSC = ` +import { DefaultMockup } from "flowbite-react"; + +export function Component() { + return ( + + + + + ); +} +`; + +export function Component() { + return ( + + + + + ); +} + +export const laptop: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code: codeRSC, + }, + ], + githubSlug: "mockup/mockup.laptop.tsx", + component: , +}; diff --git a/apps/web/examples/mockup/mockup.root.tsx b/apps/web/examples/mockup/mockup.root.tsx new file mode 100644 index 000000000..d8fc47be1 --- /dev/null +++ b/apps/web/examples/mockup/mockup.root.tsx @@ -0,0 +1,81 @@ +import { DefaultMockup } from "flowbite-react"; +import { type CodeData } from "~/components/code-demo"; + +const code = ` +"use client"; + +import { DefaultMockup } from "flowbite-react"; + +export function Component() { + return ( + + + + + ); +} +`; + +const codeRSC = ` +import { DefaultMockup } from "flowbite-react"; + +export function Component() { + return ( + + + + + ); +} +`; + +export function Component() { + return ( + + + + + ); +} + +export const root: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code: codeRSC, + }, + ], + githubSlug: "mockup/mockup.root.tsx", + component: , +}; diff --git a/apps/web/examples/mockup/mockup.smartwatch.tsx b/apps/web/examples/mockup/mockup.smartwatch.tsx new file mode 100644 index 000000000..086e7b0d2 --- /dev/null +++ b/apps/web/examples/mockup/mockup.smartwatch.tsx @@ -0,0 +1,81 @@ +import { SmartwatchMockup } from "flowbite-react"; +import { type CodeData } from "~/components/code-demo"; + +const code = ` +"use client"; + +import { DefaultMockup } from "flowbite-react"; + +export function Component() { + return ( + + + + + ); +} +`; + +const codeRSC = ` +import { DefaultMockup } from "flowbite-react"; + +export function Component() { + return ( + + + + + ); +} +`; + +export function Component() { + return ( + + + + + ); +} + +export const smartwatch: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code: codeRSC, + }, + ], + githubSlug: "mockup/mockup.smartwatch.tsx", + component: , +}; diff --git a/apps/web/examples/mockup/mockup.tablet.tsx b/apps/web/examples/mockup/mockup.tablet.tsx new file mode 100644 index 000000000..87fcb4747 --- /dev/null +++ b/apps/web/examples/mockup/mockup.tablet.tsx @@ -0,0 +1,81 @@ +import { TabletMockup } from "flowbite-react"; +import { type CodeData } from "~/components/code-demo"; + +const code = ` +"use client"; + +import { DefaultMockup } from "flowbite-react"; + +export function Component() { + return ( + + + + + ); +} +`; + +const codeRSC = ` +import { DefaultMockup } from "flowbite-react"; + +export function Component() { + return ( + + + + + ); +} +`; + +export function Component() { + return ( + + + + + ); +} + +export const tablet: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code: codeRSC, + }, + ], + githubSlug: "mockup/mockup.tablet.tsx", + component: , +}; diff --git a/packages/ui/src/components/Flowbite/FlowbiteTheme.ts b/packages/ui/src/components/Flowbite/FlowbiteTheme.ts index 3da3a6d32..304b61703 100644 --- a/packages/ui/src/components/Flowbite/FlowbiteTheme.ts +++ b/packages/ui/src/components/Flowbite/FlowbiteTheme.ts @@ -22,6 +22,7 @@ import type { FlowbiteLabelTheme } from "../Label"; import type { FlowbiteListTheme } from "../List"; import type { FlowbiteListGroupTheme } from "../ListGroup"; import type { FlowbiteMegaMenuTheme } from "../MegaMenu"; +import type { FlowbiteMockupTheme } from "../Mockup/theme"; import type { FlowbiteModalTheme } from "../Modal"; import type { FlowbiteNavbarTheme } from "../Navbar"; import type { FlowbitePaginationTheme } from "../Pagination"; @@ -69,6 +70,7 @@ export interface FlowbiteTheme { list: FlowbiteListTheme; listGroup: FlowbiteListGroupTheme; megaMenu: FlowbiteMegaMenuTheme; + mockup: FlowbiteMockupTheme; modal: FlowbiteModalTheme; navbar: FlowbiteNavbarTheme; pagination: FlowbitePaginationTheme; diff --git a/packages/ui/src/components/Mockup/DefaultMockup.tsx b/packages/ui/src/components/Mockup/DefaultMockup.tsx new file mode 100644 index 000000000..a44c4acbb --- /dev/null +++ b/packages/ui/src/components/Mockup/DefaultMockup.tsx @@ -0,0 +1,24 @@ +import { ComponentProps } from "react"; +import { twMerge } from "tailwind-merge"; +import { mergeDeep } from "../../helpers/merge-deep"; +import { getTheme } from "../../theme-store"; +import type { DeepPartial } from "../../types"; +import type { FlowbiteDefaultMockupTheme } from "./theme"; + +export interface DefaultMockupProps extends ComponentProps<"div"> { + theme?: DeepPartial; +} + +export function DefaultMockup({ className, children, theme: customTheme = {}, ...props }: DefaultMockupProps) { + const theme = mergeDeep(getTheme().mockup.default, customTheme); + + return ( +
+
+
+
+
+
{children}
+
+ ); +} diff --git a/packages/ui/src/components/Mockup/DesktopMockup.tsx b/packages/ui/src/components/Mockup/DesktopMockup.tsx new file mode 100644 index 000000000..59093def3 --- /dev/null +++ b/packages/ui/src/components/Mockup/DesktopMockup.tsx @@ -0,0 +1,23 @@ +import { ComponentProps } from "react"; +import { mergeDeep } from "../../helpers/merge-deep"; +import { getTheme } from "../../theme-store"; +import type { DeepPartial } from "../../types"; +import type { FlowbiteDesktopMockupTheme } from "./theme"; + +export interface DesktopMockupProps extends ComponentProps<"div"> { + theme?: DeepPartial; +} + +export function DesktopMockup({ children, theme: customTheme = {}, ...props }: DesktopMockupProps) { + const theme = mergeDeep(getTheme().mockup.desktop, customTheme); + + return ( +
+
+
{children}
+
+
+
+
+ ); +} diff --git a/packages/ui/src/components/Mockup/GooglePixelMockup.tsx b/packages/ui/src/components/Mockup/GooglePixelMockup.tsx new file mode 100644 index 000000000..83ca414e0 --- /dev/null +++ b/packages/ui/src/components/Mockup/GooglePixelMockup.tsx @@ -0,0 +1,25 @@ +import { ComponentProps } from "react"; +import { twMerge } from "tailwind-merge"; +import { mergeDeep } from "../../helpers/merge-deep"; +import { getTheme } from "../../theme-store"; +import type { DeepPartial } from "../../types"; +import type { FlowbiteGooglePixelMockupTheme } from "./theme"; + +export interface GooglePixelMockupProps extends ComponentProps<"div"> { + theme?: DeepPartial; +} + +export function GooglePixelMockup({ className, children, theme: customTheme = {}, ...props }: GooglePixelMockupProps) { + const theme = mergeDeep(getTheme().mockup.googlePixel, customTheme); + + return ( +
+
+
+
+
+
+
{children}
+
+ ); +} diff --git a/packages/ui/src/components/Mockup/IPhone12Mockup.tsx b/packages/ui/src/components/Mockup/IPhone12Mockup.tsx new file mode 100644 index 000000000..dd25d890f --- /dev/null +++ b/packages/ui/src/components/Mockup/IPhone12Mockup.tsx @@ -0,0 +1,24 @@ +import { ComponentProps } from "react"; +import { twMerge } from "tailwind-merge"; +import { mergeDeep } from "../../helpers/merge-deep"; +import { getTheme } from "../../theme-store"; +import type { DeepPartial } from "../../types"; +import type { FlowbiteIPhone12MockupTheme } from "./theme"; + +export interface IPhone12MockupProps extends ComponentProps<"div"> { + theme?: DeepPartial; +} + +export function IPhone12Mockup({ className, children, theme: customTheme = {}, ...props }: IPhone12MockupProps) { + const theme = mergeDeep(getTheme().mockup.iPhone12, customTheme); + + return ( +
+
+
+
+
+
{children}
+
+ ); +} diff --git a/packages/ui/src/components/Mockup/LaptopMockup.tsx b/packages/ui/src/components/Mockup/LaptopMockup.tsx new file mode 100644 index 000000000..dcf731e89 --- /dev/null +++ b/packages/ui/src/components/Mockup/LaptopMockup.tsx @@ -0,0 +1,24 @@ +import { ComponentProps } from "react"; +import { mergeDeep } from "../../helpers/merge-deep"; +import { getTheme } from "../../theme-store"; +import type { DeepPartial } from "../../types"; +import type { FlowbiteLaptopMockupTheme } from "./theme"; + +export interface LaptopMockupProps extends ComponentProps<"div"> { + theme?: DeepPartial; +} + +export function LaptopMockup({ children, theme: customTheme = {}, ...props }: LaptopMockupProps) { + const theme = mergeDeep(getTheme().mockup.laptop, customTheme); + + return ( +
+
+
{children}
+
+
+
+
+
+ ); +} diff --git a/packages/ui/src/components/Mockup/Mockup.stories.tsx b/packages/ui/src/components/Mockup/Mockup.stories.tsx new file mode 100644 index 000000000..2d0f36eb5 --- /dev/null +++ b/packages/ui/src/components/Mockup/Mockup.stories.tsx @@ -0,0 +1,134 @@ +import type { Meta, StoryFn } from "@storybook/react"; +import { twMerge } from "tailwind-merge"; +import { getTheme } from "../../theme-store"; +import { DefaultMockup } from "./DefaultMockup"; +import { DesktopMockup } from "./DesktopMockup"; +import { GooglePixelMockup } from "./GooglePixelMockup"; +import { IPhone12Mockup } from "./IPhone12Mockup"; +import { LaptopMockup } from "./LaptopMockup"; +import { SmartwatchMockup } from "./SmartwatchMockup"; +import { TabletMockup } from "./TabletMockup"; + +export default { + title: "Components/Mockup", +} as Meta; + +export const Default: StoryFn = () => ( + + + + +); + +export const IPhone12: StoryFn = () => ( + + + + +); + +export const GooglePixel: StoryFn = () => ( + + + + +); + +export const Tablet: StoryFn = () => ( + + + + +); + +export const Laptop: StoryFn = () => ( + + + + +); + +export const Desktop: StoryFn = () => ( + + + + +); + +export const Smartwatch: StoryFn = () => ( + + + + +); + +export const Colors: StoryFn = () => ( + + + + +); diff --git a/packages/ui/src/components/Mockup/SmartwatchMockup.tsx b/packages/ui/src/components/Mockup/SmartwatchMockup.tsx new file mode 100644 index 000000000..5da749eb6 --- /dev/null +++ b/packages/ui/src/components/Mockup/SmartwatchMockup.tsx @@ -0,0 +1,25 @@ +import { ComponentProps } from "react"; +import { mergeDeep } from "../../helpers/merge-deep"; +import { getTheme } from "../../theme-store"; +import type { DeepPartial } from "../../types"; +import type { FlowbiteSmartwatchMockupTheme } from "./theme"; + +export interface SmartwatchMockupProps extends ComponentProps<"div"> { + theme?: DeepPartial; +} + +export function SmartwatchMockup({ children, theme: customTheme = {}, ...props }: SmartwatchMockupProps) { + const theme = mergeDeep(getTheme().mockup.smartwatch, customTheme); + + return ( +
+
+
+
+
+
{children}
+
+
+
+ ); +} diff --git a/packages/ui/src/components/Mockup/TabletMockup.tsx b/packages/ui/src/components/Mockup/TabletMockup.tsx new file mode 100644 index 000000000..94eede9bf --- /dev/null +++ b/packages/ui/src/components/Mockup/TabletMockup.tsx @@ -0,0 +1,24 @@ +import { ComponentProps } from "react"; +import { twMerge } from "tailwind-merge"; +import { mergeDeep } from "../../helpers/merge-deep"; +import { getTheme } from "../../theme-store"; +import type { DeepPartial } from "../../types"; +import type { FlowbiteTabletMockupTheme } from "./theme"; + +export interface TabletMockupProps extends ComponentProps<"div"> { + theme?: DeepPartial; +} + +export function TabletMockup({ className, children, theme: customTheme = {}, ...props }: TabletMockupProps) { + const theme = mergeDeep(getTheme().mockup.tablet, customTheme); + + return ( +
+
+
+
+
+
{children}
+
+ ); +} diff --git a/packages/ui/src/components/Mockup/index.ts b/packages/ui/src/components/Mockup/index.ts new file mode 100644 index 000000000..99af0f3cb --- /dev/null +++ b/packages/ui/src/components/Mockup/index.ts @@ -0,0 +1,14 @@ +export { DefaultMockup } from "./DefaultMockup"; +export type { DefaultMockupProps } from "./DefaultMockup"; +export { DesktopMockup } from "./DesktopMockup"; +export type { DesktopMockupProps } from "./DesktopMockup"; +export { GooglePixelMockup } from "./GooglePixelMockup"; +export type { GooglePixelMockupProps } from "./GooglePixelMockup"; +export { IPhone12Mockup } from "./IPhone12Mockup"; +export type { IPhone12MockupProps } from "./IPhone12Mockup"; +export { LaptopMockup } from "./LaptopMockup"; +export type { LaptopMockupProps } from "./LaptopMockup"; +export { SmartwatchMockup } from "./SmartwatchMockup"; +export type { SmartwatchMockupProps } from "./SmartwatchMockup"; +export { TabletMockup } from "./TabletMockup"; +export type { TabletMockupProps } from "./TabletMockup"; diff --git a/packages/ui/src/components/Mockup/theme.ts b/packages/ui/src/components/Mockup/theme.ts new file mode 100644 index 000000000..a526b5a2c --- /dev/null +++ b/packages/ui/src/components/Mockup/theme.ts @@ -0,0 +1,99 @@ +import { createTheme } from "../../helpers/create-theme"; + +export const defaultMockupTheme = createTheme({ + root: "relative mx-auto h-[600px] w-[300px] rounded-[2.5rem] border-[14px] border-gray-800 bg-gray-800 dark:border-gray-800", + buttons: { + action: "absolute -start-[17px] top-[72px] h-[32px] w-[3px] rounded-s-lg bg-gray-800 dark:bg-gray-800", + volumeUp: "absolute -start-[17px] top-[124px] h-[46px] w-[3px] rounded-s-lg bg-gray-800 dark:bg-gray-800", + volumeDown: "absolute -start-[17px] top-[178px] h-[46px] w-[3px] rounded-s-lg bg-gray-800 dark:bg-gray-800", + power: "absolute -end-[17px] top-[142px] h-[64px] w-[3px] rounded-e-lg bg-gray-800 dark:bg-gray-800", + }, + content: "h-[572px] w-[272px] overflow-hidden rounded-[1.6rem] bg-white dark:bg-gray-800", +}); + +export const iPhone12MockupTheme = createTheme({ + root: "relative mx-auto h-[600px] w-[300px] rounded-[2.5rem] border-[14px] border-gray-800 bg-gray-800 shadow-xl dark:border-gray-800", + notch: "absolute left-1/2 top-0 h-[18px] w-[148px] -translate-x-1/2 rounded-b-2xl bg-gray-800", + buttons: { + volumeUp: "absolute -start-[17px] top-[124px] h-[46px] w-[3px] rounded-s-lg bg-gray-800", + volumeDown: "absolute -start-[17px] top-[178px] h-[46px] w-[3px] rounded-s-lg bg-gray-800", + power: "absolute -end-[17px] top-[142px] h-[64px] w-[3px] rounded-e-lg bg-gray-800", + }, + content: "h-[572px] w-[272px] overflow-hidden rounded-[1.6rem] bg-white dark:bg-gray-800", +}); + +export const googlePixelMockupTheme = createTheme({ + root: "relative mx-auto h-[600px] w-[300px] rounded-xl border-[14px] border-gray-800 bg-gray-800 shadow-xl dark:border-gray-800", + notch: "absolute left-1/2 top-0 h-[18px] w-[148px] -translate-x-1/2 rounded-b-2xl bg-gray-800", + buttons: { + action: "absolute -start-[17px] top-[72px] h-[32px] w-[3px] rounded-s-lg bg-gray-800", + volumeUp: "absolute -start-[17px] top-[124px] h-[46px] w-[3px] rounded-s-lg bg-gray-800", + volumeDown: "absolute -start-[17px] top-[178px] h-[46px] w-[3px] rounded-s-lg bg-gray-800", + power: "absolute -end-[17px] top-[142px] h-[64px] w-[3px] rounded-e-lg bg-gray-800", + }, + content: "h-[572px] w-[272px] overflow-hidden rounded-xl bg-white dark:bg-gray-800", +}); + +export const tabletMockupTheme = createTheme({ + root: "relative mx-auto h-[454px] max-w-[341px] rounded-[2.5rem] border-[14px] border-gray-800 bg-gray-800 dark:border-gray-800 md:h-[682px] md:max-w-[512px]", + buttons: { + action: "absolute -start-[17px] top-[72px] h-[32px] w-[3px] rounded-s-lg bg-gray-800 dark:bg-gray-800", + volumeUp: "absolute -start-[17px] top-[124px] h-[46px] w-[3px] rounded-s-lg bg-gray-800 dark:bg-gray-800", + volumeDown: "absolute -start-[17px] top-[178px] h-[46px] w-[3px] rounded-s-lg bg-gray-800 dark:bg-gray-800", + power: "absolute -end-[17px] top-[142px] h-[64px] w-[3px] rounded-e-lg bg-gray-800 dark:bg-gray-800", + }, + content: "h-[426px] overflow-hidden rounded-[1.6rem] bg-white dark:bg-gray-800 md:h-[654px]", +}); + +export const laptopMockupTheme = createTheme({ + display: + "relative mx-auto h-[172px] max-w-[301px] rounded-t-xl border-8 border-gray-800 bg-gray-800 dark:border-gray-800 md:h-[294px] md:max-w-[512px]", + base: { + root: "relative mx-auto h-[17px] max-w-[351px] rounded-b-xl rounded-t-sm bg-gray-900 dark:bg-gray-700 md:h-[21px] md:max-w-[597px]", + inner: "absolute left-1/2 top-0 h-[5px] w-[56px] -translate-x-1/2 rounded-b-xl bg-gray-800 md:h-[8px] md:w-[96px]", + }, + content: "h-[156px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 md:h-[278px]", +}); + +export const desktopMockupTheme = createTheme({ + display: + "relative mx-auto h-[172px] max-w-[301px] rounded-t-xl border-[16px] border-gray-800 bg-gray-800 dark:border-gray-800 md:h-[294px] md:max-w-[512px]", + bezel: + "relative mx-auto h-[24px] max-w-[301px] rounded-b-xl bg-gray-900 dark:bg-gray-700 md:h-[42px] md:max-w-[512px]", + stand: "relative mx-auto h-[55px] max-w-[83px] rounded-b-xl bg-gray-800 md:h-[95px] md:max-w-[142px]", + content: "h-[140px] overflow-hidden rounded-xl md:h-[262px]", +}); + +export const smartwatchMockupTheme = createTheme({ + display: + "relative mx-auto h-[213px] w-[208px] rounded-[2.5rem] border-[10px] border-gray-900 dark:border-gray-800 dark:bg-gray-800", + buttons: { + top: "absolute -end-[16px] top-[40px] h-[41px] w-[6px] rounded-e-lg bg-gray-800 dark:bg-gray-800", + bottom: "absolute -end-[16px] top-[88px] h-[32px] w-[6px] rounded-e-lg bg-gray-800 dark:bg-gray-800", + }, + band: { + top: "relative mx-auto h-[63px] max-w-[133px] rounded-t-[2.5rem] bg-gray-800 dark:bg-gray-700", + bottom: "relative mx-auto h-[63px] max-w-[133px] rounded-b-[2.5rem] bg-gray-800 dark:bg-gray-700", + }, + content: "h-[193px] w-[188px] overflow-hidden rounded-[2rem]", +}); + +export const mockupTheme = { + default: defaultMockupTheme, + desktop: desktopMockupTheme, + googlePixel: googlePixelMockupTheme, + iPhone12: iPhone12MockupTheme, + laptop: laptopMockupTheme, + smartwatch: smartwatchMockupTheme, + tablet: tabletMockupTheme, +}; + +export type FlowbiteDefaultMockupTheme = typeof defaultMockupTheme; +export type FlowbiteDesktopMockupTheme = typeof desktopMockupTheme; +export type FlowbiteGooglePixelMockupTheme = typeof googlePixelMockupTheme; +export type FlowbiteIPhone12MockupTheme = typeof iPhone12MockupTheme; +export type FlowbiteLaptopMockupTheme = typeof laptopMockupTheme; +export type FlowbiteSmartwatchMockupTheme = typeof smartwatchMockupTheme; +export type FlowbiteTabletMockupTheme = typeof tabletMockupTheme; + +export type FlowbiteMockupTheme = typeof mockupTheme; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index ac9ade2cd..7011ef414 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -24,6 +24,7 @@ export * from "./components/Label"; export * from "./components/List"; export * from "./components/ListGroup"; export * from "./components/MegaMenu"; +export * from "./components/Mockup"; export * from "./components/Modal"; export * from "./components/Navbar"; export * from "./components/Pagination"; diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts index 73d563ae3..405a5218a 100644 --- a/packages/ui/src/theme.ts +++ b/packages/ui/src/theme.ts @@ -22,6 +22,7 @@ import { labelTheme } from "./components/Label/theme"; import { listTheme } from "./components/List/theme"; import { listGroupTheme } from "./components/ListGroup/theme"; import { megaMenuTheme } from "./components/MegaMenu/theme"; +import { mockupTheme } from "./components/Mockup/theme"; import { modalTheme } from "./components/Modal/theme"; import { navbarTheme } from "./components/Navbar/theme"; import { paginationTheme } from "./components/Pagination/theme"; @@ -54,8 +55,8 @@ export const theme: FlowbiteTheme = { card: cardTheme, carousel: carouselTheme, checkbox: checkboxTheme, - datepicker: datePickerTheme, darkThemeToggle: darkThemeToggleTheme, + datepicker: datePickerTheme, drawer: drawerTheme, dropdown: dropdownTheme, fileInput: fileInputTheme, @@ -64,9 +65,10 @@ export const theme: FlowbiteTheme = { helperText: helperTextTheme, kbd: kbdTheme, label: labelTheme, - listGroup: listGroupTheme, list: listTheme, + listGroup: listGroupTheme, megaMenu: megaMenuTheme, + mockup: mockupTheme, modal: modalTheme, navbar: navbarTheme, pagination: paginationTheme, @@ -77,14 +79,14 @@ export const theme: FlowbiteTheme = { rating: ratingTheme, ratingAdvanced: ratingAdvancedTheme, select: selectTheme, - textInput: textInputTheme, - textarea: textareaTheme, - toggleSwitch: toggleSwitchTheme, sidebar: sidebarTheme, spinner: spinnerTheme, table: tableTheme, tabs: tabTheme, + textarea: textareaTheme, + textInput: textInputTheme, timeline: timelineTheme, toast: toastTheme, + toggleSwitch: toggleSwitchTheme, tooltip: tooltipTheme, }; From 32f11e8188c0ebb713b2bb6cd4774bf287025478 Mon Sep 17 00:00:00 2001 From: SutuSebastian Date: Wed, 29 May 2024 19:08:51 +0300 Subject: [PATCH 2/7] chore: changeset --- .changeset/spicy-eels-press.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/spicy-eels-press.md diff --git a/.changeset/spicy-eels-press.md b/.changeset/spicy-eels-press.md new file mode 100644 index 000000000..42587dd08 --- /dev/null +++ b/.changeset/spicy-eels-press.md @@ -0,0 +1,5 @@ +--- +"flowbite-react": patch +--- + +feat(components): add "Device Mockups" From a2f8a111d12d3f42ff09590706683140c46531a8 Mon Sep 17 00:00:00 2001 From: SutuSebastian Date: Thu, 30 May 2024 10:16:52 +0300 Subject: [PATCH 3/7] fix: import types --- packages/ui/src/components/Mockup/DefaultMockup.tsx | 2 +- packages/ui/src/components/Mockup/DesktopMockup.tsx | 2 +- packages/ui/src/components/Mockup/GooglePixelMockup.tsx | 2 +- packages/ui/src/components/Mockup/IPhone12Mockup.tsx | 2 +- packages/ui/src/components/Mockup/LaptopMockup.tsx | 2 +- packages/ui/src/components/Mockup/SmartwatchMockup.tsx | 2 +- packages/ui/src/components/Mockup/TabletMockup.tsx | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/ui/src/components/Mockup/DefaultMockup.tsx b/packages/ui/src/components/Mockup/DefaultMockup.tsx index a44c4acbb..103111e03 100644 --- a/packages/ui/src/components/Mockup/DefaultMockup.tsx +++ b/packages/ui/src/components/Mockup/DefaultMockup.tsx @@ -1,4 +1,4 @@ -import { ComponentProps } from "react"; +import type { ComponentProps } from "react"; import { twMerge } from "tailwind-merge"; import { mergeDeep } from "../../helpers/merge-deep"; import { getTheme } from "../../theme-store"; diff --git a/packages/ui/src/components/Mockup/DesktopMockup.tsx b/packages/ui/src/components/Mockup/DesktopMockup.tsx index 59093def3..392ae188e 100644 --- a/packages/ui/src/components/Mockup/DesktopMockup.tsx +++ b/packages/ui/src/components/Mockup/DesktopMockup.tsx @@ -1,4 +1,4 @@ -import { ComponentProps } from "react"; +import type { ComponentProps } from "react"; import { mergeDeep } from "../../helpers/merge-deep"; import { getTheme } from "../../theme-store"; import type { DeepPartial } from "../../types"; diff --git a/packages/ui/src/components/Mockup/GooglePixelMockup.tsx b/packages/ui/src/components/Mockup/GooglePixelMockup.tsx index 83ca414e0..275c16460 100644 --- a/packages/ui/src/components/Mockup/GooglePixelMockup.tsx +++ b/packages/ui/src/components/Mockup/GooglePixelMockup.tsx @@ -1,4 +1,4 @@ -import { ComponentProps } from "react"; +import type { ComponentProps } from "react"; import { twMerge } from "tailwind-merge"; import { mergeDeep } from "../../helpers/merge-deep"; import { getTheme } from "../../theme-store"; diff --git a/packages/ui/src/components/Mockup/IPhone12Mockup.tsx b/packages/ui/src/components/Mockup/IPhone12Mockup.tsx index dd25d890f..2f55976e0 100644 --- a/packages/ui/src/components/Mockup/IPhone12Mockup.tsx +++ b/packages/ui/src/components/Mockup/IPhone12Mockup.tsx @@ -1,4 +1,4 @@ -import { ComponentProps } from "react"; +import type { ComponentProps } from "react"; import { twMerge } from "tailwind-merge"; import { mergeDeep } from "../../helpers/merge-deep"; import { getTheme } from "../../theme-store"; diff --git a/packages/ui/src/components/Mockup/LaptopMockup.tsx b/packages/ui/src/components/Mockup/LaptopMockup.tsx index dcf731e89..fef119659 100644 --- a/packages/ui/src/components/Mockup/LaptopMockup.tsx +++ b/packages/ui/src/components/Mockup/LaptopMockup.tsx @@ -1,4 +1,4 @@ -import { ComponentProps } from "react"; +import type { ComponentProps } from "react"; import { mergeDeep } from "../../helpers/merge-deep"; import { getTheme } from "../../theme-store"; import type { DeepPartial } from "../../types"; diff --git a/packages/ui/src/components/Mockup/SmartwatchMockup.tsx b/packages/ui/src/components/Mockup/SmartwatchMockup.tsx index 5da749eb6..e16ee3309 100644 --- a/packages/ui/src/components/Mockup/SmartwatchMockup.tsx +++ b/packages/ui/src/components/Mockup/SmartwatchMockup.tsx @@ -1,4 +1,4 @@ -import { ComponentProps } from "react"; +import type { ComponentProps } from "react"; import { mergeDeep } from "../../helpers/merge-deep"; import { getTheme } from "../../theme-store"; import type { DeepPartial } from "../../types"; diff --git a/packages/ui/src/components/Mockup/TabletMockup.tsx b/packages/ui/src/components/Mockup/TabletMockup.tsx index 94eede9bf..5b5da0ffa 100644 --- a/packages/ui/src/components/Mockup/TabletMockup.tsx +++ b/packages/ui/src/components/Mockup/TabletMockup.tsx @@ -1,4 +1,4 @@ -import { ComponentProps } from "react"; +import type { ComponentProps } from "react"; import { twMerge } from "tailwind-merge"; import { mergeDeep } from "../../helpers/merge-deep"; import { getTheme } from "../../theme-store"; From 2805b521afd83164e1c3a38657a7746209554a26 Mon Sep 17 00:00:00 2001 From: SutuSebastian Date: Wed, 5 Jun 2024 12:44:04 +0300 Subject: [PATCH 4/7] fix typo --- apps/web/examples/mockup/mockup.desktop.tsx | 6 +++--- apps/web/examples/mockup/mockup.googlePixel.tsx | 4 ++-- apps/web/examples/mockup/mockup.laptop.tsx | 4 ++-- apps/web/examples/mockup/mockup.smartwatch.tsx | 4 ++-- apps/web/examples/mockup/mockup.tablet.tsx | 4 ++-- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/apps/web/examples/mockup/mockup.desktop.tsx b/apps/web/examples/mockup/mockup.desktop.tsx index d23549bcc..9b012b950 100644 --- a/apps/web/examples/mockup/mockup.desktop.tsx +++ b/apps/web/examples/mockup/mockup.desktop.tsx @@ -1,10 +1,10 @@ -import { DefaultMockup, DesktopMockup } from "flowbite-react"; +import { DesktopMockup } from "flowbite-react"; import { type CodeData } from "~/components/code-demo"; const code = ` "use client"; -import { DefaultMockup } from "flowbite-react"; +import { DesktopMockup } from "flowbite-react"; export function Component() { return ( @@ -25,7 +25,7 @@ export function Component() { `; const codeRSC = ` -import { DefaultMockup } from "flowbite-react"; +import { DesktopMockup } from "flowbite-react"; export function Component() { return ( diff --git a/apps/web/examples/mockup/mockup.googlePixel.tsx b/apps/web/examples/mockup/mockup.googlePixel.tsx index 6badf55a3..f07d224d6 100644 --- a/apps/web/examples/mockup/mockup.googlePixel.tsx +++ b/apps/web/examples/mockup/mockup.googlePixel.tsx @@ -4,7 +4,7 @@ import { type CodeData } from "~/components/code-demo"; const code = ` "use client"; -import { DefaultMockup } from "flowbite-react"; +import { GooglePixelMockup } from "flowbite-react"; export function Component() { return ( @@ -25,7 +25,7 @@ export function Component() { `; const codeRSC = ` -import { DefaultMockup } from "flowbite-react"; +import { GooglePixelMockup } from "flowbite-react"; export function Component() { return ( diff --git a/apps/web/examples/mockup/mockup.laptop.tsx b/apps/web/examples/mockup/mockup.laptop.tsx index 6a260ac90..c3f0f4f4f 100644 --- a/apps/web/examples/mockup/mockup.laptop.tsx +++ b/apps/web/examples/mockup/mockup.laptop.tsx @@ -4,7 +4,7 @@ import { type CodeData } from "~/components/code-demo"; const code = ` "use client"; -import { DefaultMockup } from "flowbite-react"; +import { LaptopMockup } from "flowbite-react"; export function Component() { return ( @@ -25,7 +25,7 @@ export function Component() { `; const codeRSC = ` -import { DefaultMockup } from "flowbite-react"; +import { LaptopMockup } from "flowbite-react"; export function Component() { return ( diff --git a/apps/web/examples/mockup/mockup.smartwatch.tsx b/apps/web/examples/mockup/mockup.smartwatch.tsx index 086e7b0d2..15511f577 100644 --- a/apps/web/examples/mockup/mockup.smartwatch.tsx +++ b/apps/web/examples/mockup/mockup.smartwatch.tsx @@ -4,7 +4,7 @@ import { type CodeData } from "~/components/code-demo"; const code = ` "use client"; -import { DefaultMockup } from "flowbite-react"; +import { SmartwatchMockup } from "flowbite-react"; export function Component() { return ( @@ -25,7 +25,7 @@ export function Component() { `; const codeRSC = ` -import { DefaultMockup } from "flowbite-react"; +import { SmartwatchMockup } from "flowbite-react"; export function Component() { return ( diff --git a/apps/web/examples/mockup/mockup.tablet.tsx b/apps/web/examples/mockup/mockup.tablet.tsx index 87fcb4747..9a7c89182 100644 --- a/apps/web/examples/mockup/mockup.tablet.tsx +++ b/apps/web/examples/mockup/mockup.tablet.tsx @@ -4,7 +4,7 @@ import { type CodeData } from "~/components/code-demo"; const code = ` "use client"; -import { DefaultMockup } from "flowbite-react"; +import { TabletMockup } from "flowbite-react"; export function Component() { return ( @@ -25,7 +25,7 @@ export function Component() { `; const codeRSC = ` -import { DefaultMockup } from "flowbite-react"; +import { TabletMockup } from "flowbite-react"; export function Component() { return ( From f7817562c59159f398bcbbd3a86996a169176e8b Mon Sep 17 00:00:00 2001 From: SutuSebastian Date: Wed, 5 Jun 2024 13:04:14 +0300 Subject: [PATCH 5/7] refactor(docs): simplify examples; fix(storybook): example --- apps/web/examples/mockup/mockup.colors.tsx | 50 +++++++++---------- apps/web/examples/mockup/mockup.desktop.tsx | 25 +--------- .../examples/mockup/mockup.googlePixel.tsx | 25 +--------- apps/web/examples/mockup/mockup.iPhone12.tsx | 25 +--------- apps/web/examples/mockup/mockup.laptop.tsx | 25 +--------- apps/web/examples/mockup/mockup.root.tsx | 25 +--------- .../web/examples/mockup/mockup.smartwatch.tsx | 25 +--------- apps/web/examples/mockup/mockup.tablet.tsx | 25 +--------- .../src/components/Mockup/Mockup.stories.tsx | 12 ++++- 9 files changed, 41 insertions(+), 196 deletions(-) diff --git a/apps/web/examples/mockup/mockup.colors.tsx b/apps/web/examples/mockup/mockup.colors.tsx index 3064671c8..a1f0b19b2 100644 --- a/apps/web/examples/mockup/mockup.colors.tsx +++ b/apps/web/examples/mockup/mockup.colors.tsx @@ -3,36 +3,22 @@ import { twMerge } from "tailwind-merge"; import { type CodeData } from "~/components/code-demo"; const code = ` -"use client"; - -import { DefaultMockup, getTheme } from "flowbite-react"; -import { twMerge } from "tailwind-merge"; - -export function Component() { - return ( - - - - - ); -} -`; - -const codeRSC = ` import { DefaultMockup, getTheme } from "flowbite-react"; import { twMerge } from "tailwind-merge"; export function Component() { return ( - + + - - - - ); -} -`; - -const codeRSC = ` import { DesktopMockup } from "flowbite-react"; export function Component() { @@ -73,7 +50,7 @@ export const desktop: CodeData = { { fileName: "server", language: "tsx", - code: codeRSC, + code, }, ], githubSlug: "mockup/mockup.desktop.tsx", diff --git a/apps/web/examples/mockup/mockup.googlePixel.tsx b/apps/web/examples/mockup/mockup.googlePixel.tsx index f07d224d6..6104ffd6d 100644 --- a/apps/web/examples/mockup/mockup.googlePixel.tsx +++ b/apps/web/examples/mockup/mockup.googlePixel.tsx @@ -2,29 +2,6 @@ import { GooglePixelMockup } from "flowbite-react"; import { type CodeData } from "~/components/code-demo"; const code = ` -"use client"; - -import { GooglePixelMockup } from "flowbite-react"; - -export function Component() { - return ( - - - - - ); -} -`; - -const codeRSC = ` import { GooglePixelMockup } from "flowbite-react"; export function Component() { @@ -73,7 +50,7 @@ export const googlePixel: CodeData = { { fileName: "server", language: "tsx", - code: codeRSC, + code, }, ], githubSlug: "mockup/mockup.googlePixel.tsx", diff --git a/apps/web/examples/mockup/mockup.iPhone12.tsx b/apps/web/examples/mockup/mockup.iPhone12.tsx index e5d277365..7b8e9005e 100644 --- a/apps/web/examples/mockup/mockup.iPhone12.tsx +++ b/apps/web/examples/mockup/mockup.iPhone12.tsx @@ -2,29 +2,6 @@ import { IPhone12Mockup } from "flowbite-react"; import { type CodeData } from "~/components/code-demo"; const code = ` -"use client"; - -import { IPhone12Mockup } from "flowbite-react"; - -export function Component() { - return ( - - - - - ); -} -`; - -const codeRSC = ` import { IPhone12Mockup } from "flowbite-react"; export function Component() { @@ -73,7 +50,7 @@ export const iPhone12: CodeData = { { fileName: "server", language: "tsx", - code: codeRSC, + code, }, ], githubSlug: "mockup/mockup.iPhone12.tsx", diff --git a/apps/web/examples/mockup/mockup.laptop.tsx b/apps/web/examples/mockup/mockup.laptop.tsx index c3f0f4f4f..dae88726e 100644 --- a/apps/web/examples/mockup/mockup.laptop.tsx +++ b/apps/web/examples/mockup/mockup.laptop.tsx @@ -2,29 +2,6 @@ import { LaptopMockup } from "flowbite-react"; import { type CodeData } from "~/components/code-demo"; const code = ` -"use client"; - -import { LaptopMockup } from "flowbite-react"; - -export function Component() { - return ( - - - - - ); -} -`; - -const codeRSC = ` import { LaptopMockup } from "flowbite-react"; export function Component() { @@ -73,7 +50,7 @@ export const laptop: CodeData = { { fileName: "server", language: "tsx", - code: codeRSC, + code, }, ], githubSlug: "mockup/mockup.laptop.tsx", diff --git a/apps/web/examples/mockup/mockup.root.tsx b/apps/web/examples/mockup/mockup.root.tsx index d8fc47be1..b36ce2dfa 100644 --- a/apps/web/examples/mockup/mockup.root.tsx +++ b/apps/web/examples/mockup/mockup.root.tsx @@ -2,29 +2,6 @@ import { DefaultMockup } from "flowbite-react"; import { type CodeData } from "~/components/code-demo"; const code = ` -"use client"; - -import { DefaultMockup } from "flowbite-react"; - -export function Component() { - return ( - - - - - ); -} -`; - -const codeRSC = ` import { DefaultMockup } from "flowbite-react"; export function Component() { @@ -73,7 +50,7 @@ export const root: CodeData = { { fileName: "server", language: "tsx", - code: codeRSC, + code, }, ], githubSlug: "mockup/mockup.root.tsx", diff --git a/apps/web/examples/mockup/mockup.smartwatch.tsx b/apps/web/examples/mockup/mockup.smartwatch.tsx index 15511f577..e1d7a42a1 100644 --- a/apps/web/examples/mockup/mockup.smartwatch.tsx +++ b/apps/web/examples/mockup/mockup.smartwatch.tsx @@ -2,29 +2,6 @@ import { SmartwatchMockup } from "flowbite-react"; import { type CodeData } from "~/components/code-demo"; const code = ` -"use client"; - -import { SmartwatchMockup } from "flowbite-react"; - -export function Component() { - return ( - - - - - ); -} -`; - -const codeRSC = ` import { SmartwatchMockup } from "flowbite-react"; export function Component() { @@ -73,7 +50,7 @@ export const smartwatch: CodeData = { { fileName: "server", language: "tsx", - code: codeRSC, + code, }, ], githubSlug: "mockup/mockup.smartwatch.tsx", diff --git a/apps/web/examples/mockup/mockup.tablet.tsx b/apps/web/examples/mockup/mockup.tablet.tsx index 9a7c89182..a74921601 100644 --- a/apps/web/examples/mockup/mockup.tablet.tsx +++ b/apps/web/examples/mockup/mockup.tablet.tsx @@ -2,29 +2,6 @@ import { TabletMockup } from "flowbite-react"; import { type CodeData } from "~/components/code-demo"; const code = ` -"use client"; - -import { TabletMockup } from "flowbite-react"; - -export function Component() { - return ( - - - - - ); -} -`; - -const codeRSC = ` import { TabletMockup } from "flowbite-react"; export function Component() { @@ -73,7 +50,7 @@ export const tablet: CodeData = { { fileName: "server", language: "tsx", - code: codeRSC, + code, }, ], githubSlug: "mockup/mockup.tablet.tsx", diff --git a/packages/ui/src/components/Mockup/Mockup.stories.tsx b/packages/ui/src/components/Mockup/Mockup.stories.tsx index 2d0f36eb5..2d5d69bf6 100644 --- a/packages/ui/src/components/Mockup/Mockup.stories.tsx +++ b/packages/ui/src/components/Mockup/Mockup.stories.tsx @@ -119,7 +119,17 @@ export const Smartwatch: StoryFn = () => ( ); export const Colors: StoryFn = () => ( - + Date: Wed, 5 Jun 2024 16:43:46 +0300 Subject: [PATCH 6/7] refactor laptop mockup structure to make it scalable + fix docs and storybook examples --- apps/web/examples/mockup/mockup.laptop.tsx | 8 +- .../ui/src/components/Mockup/LaptopMockup.tsx | 5 +- .../src/components/Mockup/Mockup.stories.tsx | 233 ++++++++++-------- packages/ui/src/components/Mockup/theme.ts | 10 +- 4 files changed, 139 insertions(+), 117 deletions(-) diff --git a/apps/web/examples/mockup/mockup.laptop.tsx b/apps/web/examples/mockup/mockup.laptop.tsx index dae88726e..b01281ba9 100644 --- a/apps/web/examples/mockup/mockup.laptop.tsx +++ b/apps/web/examples/mockup/mockup.laptop.tsx @@ -9,12 +9,12 @@ export function Component() { @@ -27,12 +27,12 @@ export function Component() { diff --git a/packages/ui/src/components/Mockup/LaptopMockup.tsx b/packages/ui/src/components/Mockup/LaptopMockup.tsx index fef119659..0dbf9a0c7 100644 --- a/packages/ui/src/components/Mockup/LaptopMockup.tsx +++ b/packages/ui/src/components/Mockup/LaptopMockup.tsx @@ -1,4 +1,5 @@ import type { ComponentProps } from "react"; +import { twMerge } from "tailwind-merge"; import { mergeDeep } from "../../helpers/merge-deep"; import { getTheme } from "../../theme-store"; import type { DeepPartial } from "../../types"; @@ -8,11 +9,11 @@ export interface LaptopMockupProps extends ComponentProps<"div"> { theme?: DeepPartial; } -export function LaptopMockup({ children, theme: customTheme = {}, ...props }: LaptopMockupProps) { +export function LaptopMockup({ className, children, theme: customTheme = {}, ...props }: LaptopMockupProps) { const theme = mergeDeep(getTheme().mockup.laptop, customTheme); return ( -
+
{children}
diff --git a/packages/ui/src/components/Mockup/Mockup.stories.tsx b/packages/ui/src/components/Mockup/Mockup.stories.tsx index 2d5d69bf6..c4c0a97f8 100644 --- a/packages/ui/src/components/Mockup/Mockup.stories.tsx +++ b/packages/ui/src/components/Mockup/Mockup.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryFn } from "@storybook/react"; +import { ComponentProps } from "react"; import { twMerge } from "tailwind-merge"; import { getTheme } from "../../theme-store"; import { DefaultMockup } from "./DefaultMockup"; @@ -14,131 +15,151 @@ export default { } as Meta; export const Default: StoryFn = () => ( - - - - + + + + + + ); export const IPhone12: StoryFn = () => ( - - - - + + + + + + ); export const GooglePixel: StoryFn = () => ( - - - - + + + + + + ); export const Tablet: StoryFn = () => ( - - - - + + + + + + ); export const Laptop: StoryFn = () => ( - - - - + + + + + + ); export const Desktop: StoryFn = () => ( - - - - + + + + + + ); export const Smartwatch: StoryFn = () => ( - - - - + + + + + + ); export const Colors: StoryFn = () => ( - - - - + + + + + + ); + +function Container(props: ComponentProps<"div">) { + return
; +} diff --git a/packages/ui/src/components/Mockup/theme.ts b/packages/ui/src/components/Mockup/theme.ts index a526b5a2c..86ff0ad80 100644 --- a/packages/ui/src/components/Mockup/theme.ts +++ b/packages/ui/src/components/Mockup/theme.ts @@ -46,13 +46,13 @@ export const tabletMockupTheme = createTheme({ }); export const laptopMockupTheme = createTheme({ - display: - "relative mx-auto h-[172px] max-w-[301px] rounded-t-xl border-8 border-gray-800 bg-gray-800 dark:border-gray-800 md:h-[294px] md:max-w-[512px]", + root: "aspect-[2/1]", + display: "mx-[7%] h-full rounded-t-[2.2%_3.8%] bg-gray-800 p-[1.4%]", base: { - root: "relative mx-auto h-[17px] max-w-[351px] rounded-b-xl rounded-t-sm bg-gray-900 dark:bg-gray-700 md:h-[21px] md:max-w-[597px]", - inner: "absolute left-1/2 top-0 h-[5px] w-[56px] -translate-x-1/2 rounded-b-xl bg-gray-800 md:h-[8px] md:w-[96px]", + root: "relative h-[7%] rounded-b-[2%_50%] rounded-t-[0.2%_5%] bg-gray-900 dark:bg-gray-700", + inner: "absolute left-1/2 top-0 h-[35%] w-[16%] -translate-x-1/2 rounded-b-[8%_100%] bg-gray-800", }, - content: "h-[156px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 md:h-[278px]", + content: "h-full overflow-hidden rounded-[1.15%/2%] bg-white dark:bg-gray-700", }); export const desktopMockupTheme = createTheme({ From c05a9ee47177d0d75fbaabea9544d45e6b9a21f2 Mon Sep 17 00:00:00 2001 From: SutuSebastian Date: Thu, 20 Jun 2024 10:17:14 +0300 Subject: [PATCH 7/7] remove duplicate --- packages/ui/src/theme.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts index 9423893f7..37ad0f810 100644 --- a/packages/ui/src/theme.ts +++ b/packages/ui/src/theme.ts @@ -60,7 +60,6 @@ export const theme: FlowbiteTheme = { clipboard: clipboardTheme, darkThemeToggle: darkThemeToggleTheme, datepicker: datePickerTheme, - datepicker: datePickerTheme, drawer: drawerTheme, dropdown: dropdownTheme, fileInput: fileInputTheme,