Skip to content

Commit f22e0f2

Browse files
SutuSebastianSutuSebastian
authored
Merge branch 'main' into feat/hr-divider
2 parents 1c00383 + 7476312 commit f22e0f2

File tree

351 files changed

+6968
-994
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

351 files changed

+6968
-994
lines changed

‎.changeset/forty-pumpkins-grow.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"flowbite-react": patch
3+
---
4+
5+
---
6+
7+
Renamed the `Tabs` attribute from `style` to `variant` to allow the use of the `style` attribute, which was previously blocked.

‎.changeset/poor-tools-hide.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"flowbite-react": minor
3+
---
4+
5+
feat(components): add "Clipboard"

‎.changeset/shiny-wolves-report.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"flowbite-react": patch
3+
---
4+
5+
Mega Menu - export all entities

‎.changeset/sour-spiders-melt.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"create-flowbite-react": patch
3+
"flowbite-react": patch
4+
---
5+
6+
update packages

‎.github/actions/setup/action.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ runs:
77
- name: Setup Bun
88
uses: oven-sh/setup-bun@v1
99
with:
10-
bun-version: 1.1.0
10+
bun-version: 1.1.14
1111

1212
- name: Setup Node
1313
uses: actions/setup-node@v4

‎.vscode/settings.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
["createTheme\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
1212
],
1313
"tailwindCSS.experimental.configFile": {
14-
"apps/web/tailwind.config.js": "apps/web/**",
15-
"packages/ui/tailwind.config.js": "packages/ui/**"
14+
"apps/web/tailwind.config.cjs": "apps/web/**",
15+
"packages/ui/tailwind.config.cjs": "packages/ui/**"
1616
},
1717
"typescript.tsdk": "node_modules/typescript/lib"
1818
}

‎apps/storybook/package.json

+17-17
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,26 @@
1111
"typecheck": "tsc --noEmit"
1212
},
1313
"dependencies": {
14-
"react": "18.2.0",
15-
"react-dom": "18.2.0"
14+
"react": "18.3.1",
15+
"react-dom": "18.3.1"
1616
},
1717
"devDependencies": {
18-
"@storybook/addon-essentials": "8.0.5",
19-
"@storybook/addon-interactions": "8.0.5",
20-
"@storybook/addon-links": "8.0.5",
21-
"@storybook/addon-themes": "8.0.5",
22-
"@storybook/blocks": "8.0.5",
23-
"@storybook/react": "8.0.5",
24-
"@storybook/react-vite": "8.0.5",
25-
"@storybook/test": "8.0.5",
26-
"@types/react": "18.2.73",
27-
"@types/react-dom": "18.2.23",
28-
"@vitejs/plugin-react": "4.2.1",
18+
"@storybook/addon-essentials": "8.1.10",
19+
"@storybook/addon-interactions": "8.1.10",
20+
"@storybook/addon-links": "8.1.10",
21+
"@storybook/addon-themes": "8.1.10",
22+
"@storybook/blocks": "8.1.10",
23+
"@storybook/react": "8.1.10",
24+
"@storybook/react-vite": "8.1.10",
25+
"@storybook/test": "8.1.10",
26+
"@types/react": "18.3.3",
27+
"@types/react-dom": "18.3.0",
28+
"@vitejs/plugin-react": "4.3.1",
2929
"autoprefixer": "10.4.19",
3030
"postcss": "8.4.38",
31-
"storybook": "8.0.5",
32-
"tailwindcss": "3.4.3",
33-
"typescript": "5.4.3",
34-
"vite": "5.2.7"
31+
"storybook": "8.1.10",
32+
"tailwindcss": "3.4.4",
33+
"typescript": "5.4.5",
34+
"vite": "5.3.1"
3535
}
3636
}

‎apps/storybook/turbo.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"extends": ["//"],
3-
"pipeline": {
3+
"tasks": {
44
"build": {
55
"outputs": ["storybook-static/**"]
66
}

‎apps/web/app/examples/[name]/layout.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
"use client";
2+
3+
import { useSearchParams } from "next/navigation";
4+
import type { PropsWithChildren } from "react";
5+
import { twMerge } from "tailwind-merge";
6+
7+
export default function ExamplePageLayout({ children }: PropsWithChildren) {
8+
const searchParams = useSearchParams();
9+
const noPadding = searchParams.get("noPadding");
10+
11+
return <main className={twMerge(noPadding === null && "p-5")}>{children}</main>;
12+
}

‎apps/web/app/examples/[name]/page.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { notFound } from "next/navigation";
2+
3+
interface Props {
4+
params: {
5+
name: string;
6+
};
7+
}
8+
9+
export default async function ExamplePage({ params }: Props) {
10+
try {
11+
const [key] = params.name.split(".");
12+
13+
const { Component } = await import(`~/examples/${key}/${params.name}`);
14+
15+
return Component ? <Component /> : notFound();
16+
} catch (e) {
17+
notFound();
18+
}
19+
}

‎apps/web/app/layout.tsx

+5-10
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { ThemeModeScript } from "flowbite-react";
22
import { Inter as InterFont } from "next/font/google";
3-
import type { Metadata, NextPage, Viewport } from "next/types";
4-
import type { FC, PropsWithChildren } from "react";
3+
import type { Metadata, Viewport } from "next/types";
4+
import type { PropsWithChildren } from "react";
5+
import { FathomScript } from "~/components/fathom-script";
56

67
import "~/styles/globals.css";
78

@@ -53,7 +54,7 @@ export const viewport: Viewport = {
5354
],
5455
};
5556

56-
const RootLayout: NextPage<PropsWithChildren> = ({ children }) => {
57+
export default function RootLayout({ children }: PropsWithChildren) {
5758
return (
5859
<html lang="en" className={`${interFont.variable} font-sans`}>
5960
<head>
@@ -65,10 +66,4 @@ const RootLayout: NextPage<PropsWithChildren> = ({ children }) => {
6566
</body>
6667
</html>
6768
);
68-
};
69-
70-
const FathomScript: FC = () => {
71-
return <script data-site="UXMSXUQI" defer src="https://cdn.usefathom.com/script.js" />;
72-
};
73-
74-
export default RootLayout;
69+
}

‎apps/web/components/banner.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import Link from "next/link";
2-
import type { FC } from "react";
32

4-
export const Banner: FC = () => {
3+
export function Banner() {
54
return (
65
<div
76
tabIndex={-1}
@@ -38,4 +37,4 @@ export const Banner: FC = () => {
3837
</div>
3938
</div>
4039
);
41-
};
40+
}

‎apps/web/components/carbon-ads.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
"use client";
22

33
import { usePathname } from "next/navigation";
4-
import type { FC } from "react";
54
import { useEffect } from "react";
65

76
interface WindowWithCarbonAds extends Window {
@@ -10,7 +9,7 @@ interface WindowWithCarbonAds extends Window {
109
};
1110
}
1211

13-
export const CarbonAds: FC = () => {
12+
export function CarbonAds() {
1413
const pathname = usePathname();
1514

1615
const isDevelopmentMode = process.env.NODE_ENV === "development";
@@ -38,4 +37,4 @@ export const CarbonAds: FC = () => {
3837
<div id="carbon-container" />
3938
</aside>
4039
);
41-
};
40+
}

‎apps/web/components/code-demo.tsx

+50-6
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { Select, Tooltip, useThemeMode } from "flowbite-react";
44
import type { ComponentProps, PropsWithChildren } from "react";
5-
import { useEffect, useState } from "react";
5+
import { useEffect, useRef, useState } from "react";
66
import type { IconType } from "react-icons";
77
import { FaCopy } from "react-icons/fa";
88
import { HiMoon, HiSun } from "react-icons/hi";
@@ -12,10 +12,18 @@ import { TfiMobile } from "react-icons/tfi";
1212
import { twMerge } from "tailwind-merge";
1313
import { CodeHighlight, type Language } from "./code-highlight";
1414

15+
type IFrameData = number | IFrameOptions;
16+
17+
interface IFrameOptions {
18+
height: number;
19+
noPadding?: boolean;
20+
}
21+
1522
interface BaseCodeData<T extends "single" | "variant"> {
1623
type: T;
1724
githubSlug: string;
1825
component: React.ReactNode;
26+
iframe?: IFrameData;
1927
}
2028

2129
interface VariantCodeData<V extends Variant> extends BaseCodeData<"variant"> {
@@ -135,8 +143,8 @@ export function CodeDemo({ data }: CodeDemoProps) {
135143
</div>
136144
</div>
137145
</div>
138-
<CodePreview view={view} isRTL={isRTL} isDarkMode={isDarkMode}>
139-
{data.component}
146+
<CodePreview view={view} isRTL={isRTL} isDarkMode={isDarkMode} iframe={data.iframe}>
147+
{data.iframe ? <IFrame data={data} isRTL={isRTL} isDarkMode={isDarkMode} /> : data.component}
140148
</CodePreview>
141149
<div className="code-syntax-wrapper">
142150
<div
@@ -173,6 +181,40 @@ export function CodeDemo({ data }: CodeDemoProps) {
173181
);
174182
}
175183

184+
function IFrame({ data, isRTL, isDarkMode }: { data: CodeData; isRTL: boolean; isDarkMode: boolean | null }) {
185+
const ref = useRef<HTMLIFrameElement>(null);
186+
187+
useEffect(() => {
188+
const document = ref.current?.contentDocument;
189+
190+
if (!document) return;
191+
192+
document.documentElement.setAttribute("dir", isRTL ? "rtl" : "ltr");
193+
194+
if (isDarkMode) {
195+
document.documentElement.classList.add("dark");
196+
} else {
197+
document.documentElement.classList.remove("dark");
198+
}
199+
}, [isRTL, isDarkMode]);
200+
201+
function getSrc() {
202+
const base = "/examples";
203+
const target = data.githubSlug.split("/")[1].replace(".tsx", "");
204+
const noPadding = typeof data.iframe === "object" && data.iframe.noPadding ? `?noPadding` : "";
205+
206+
return `${base}/${target}${noPadding}`;
207+
}
208+
209+
function getHeight(): number {
210+
const payload = data.iframe!;
211+
212+
return typeof payload === "number" ? payload : payload.height;
213+
}
214+
215+
return <iframe ref={ref} src={getSrc()} height={getHeight()} className="w-full" />;
216+
}
217+
176218
function Tabs({ tabIndex, items, onSelect }: { tabIndex: number; items: CodeItem[]; onSelect(index: number): void }) {
177219
return (
178220
<ul className="flex flex-1 text-center text-sm font-medium text-gray-500 dark:text-gray-400">
@@ -198,20 +240,22 @@ function CodePreview({
198240
view,
199241
isRTL,
200242
isDarkMode,
243+
iframe,
201244
children,
202-
}: PropsWithChildren<{ view: View; isRTL: boolean; isDarkMode: boolean | null }>) {
245+
}: PropsWithChildren<{ view: View; isRTL: boolean; isDarkMode: boolean | null; iframe?: IFrameData }>) {
203246
return (
204247
<div
205248
{...(isRTL && { dir: "rtl" })}
206249
className={twMerge("code-preview-wrapper", isDarkMode !== null && (isDarkMode ? "dark" : "light"))}
207250
>
208-
<div className="code-preview flex border-x border-gray-200 bg-white bg-gradient-to-r p-0 dark:border-gray-600 dark:bg-gray-900">
251+
<div className="flex border-x border-gray-200 bg-white bg-gradient-to-r p-0 dark:border-gray-600 dark:bg-gray-900">
209252
<div className="code-responsive-wrapper w-full">
210253
<div
211254
className={twMerge(
212-
"mx-auto w-full bg-white bg-gradient-to-r p-5 dark:bg-gray-900",
255+
"mx-auto w-full bg-white bg-gradient-to-r dark:bg-gray-900",
213256
view === "tablet" && "max-w-lg",
214257
view === "mobile" && "max-w-sm",
258+
!iframe && "p-5",
215259
)}
216260
>
217261
{children}

‎apps/web/components/fathom-script.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
"use client";
2+
3+
import { usePathname } from "next/navigation";
4+
5+
export function FathomScript() {
6+
const pathname = usePathname();
7+
const isExamplesPage = pathname.startsWith("/examples/");
8+
9+
if (isExamplesPage) return null;
10+
11+
return <script data-site="UXMSXUQI" defer src="https://cdn.usefathom.com/script.js" />;
12+
}

‎apps/web/components/homepage/components-section.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Button } from "flowbite-react";
22
import Image from "next/image";
33
import Link from "next/link";
4-
import type { ComponentProps, FC } from "react";
4+
import type { ComponentProps } from "react";
55
import { twMerge } from "tailwind-merge";
66
import { COMPONENTS_DATA } from "~/data/components";
77

8-
export const ComponentsSection: FC = () => {
8+
export function ComponentsSection() {
99
return (
1010
<section>
1111
<div className="mx-auto flex max-w-8xl flex-col gap-8 px-4 py-8 sm:gap-12 lg:px-20 lg:pt-24">
@@ -34,7 +34,7 @@ export const ComponentsSection: FC = () => {
3434
</div>
3535
</section>
3636
);
37-
};
37+
}
3838

3939
interface ComponentCardProps extends ComponentProps<"div"> {
4040
link: string;
@@ -44,7 +44,7 @@ interface ComponentCardProps extends ComponentProps<"div"> {
4444
classes: string;
4545
}
4646

47-
const ComponentCard: FC<ComponentCardProps> = ({ link, name, image, imageDark, classes }) => {
47+
function ComponentCard({ link, name, image, imageDark, classes }: ComponentCardProps) {
4848
return (
4949
<Link
5050
href={link}
@@ -80,4 +80,4 @@ const ComponentCard: FC<ComponentCardProps> = ({ link, name, image, imageDark, c
8080
</div>
8181
</Link>
8282
);
83-
};
83+
}

‎apps/web/components/homepage/contributors-section.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Tooltip } from "flowbite-react";
22
import Image from "next/image";
33
import Link from "next/link";
4-
import type { FC } from "react";
54
import { safeResJson } from "~/helpers/http";
65

76
interface Contributor {
@@ -21,7 +20,7 @@ async function fetchContributors(): Promise<Contributor[]> {
2120
}
2221
}
2322

24-
export const ContributorsSection: FC = async () => {
23+
export async function ContributorsSection() {
2524
const contributors = await fetchContributors();
2625

2726
return (
@@ -98,4 +97,4 @@ export const ContributorsSection: FC = async () => {
9897
</div>
9998
</section>
10099
);
101-
};
100+
}

0 commit comments

Comments
 (0)