Skip to content

Commit

Permalink
Improve theme granularity; Full RSC support; Doc example fixes (#1104)
Browse files Browse the repository at this point in the history 
* refactor:
- remove redundant `PropsWithChildren`
- add granular theme override for: Datepicker, Dropdown, Modal, Navbar, Rating, Sidebar, Table, Timeline, Toast

* fix: sidebar tests

* add `sharp` for image optimisations

* granular theming for `TableHead`, `TableBody` passing down custom theme object to `TableHeadCell` and `TableCell`

* fix naming convention

* granular theming for:
- `TimelineItem` -> [`TimelinePoint`, `TimelineContent`]
- `TimelineContent` ->  [`TimelineTime`, `TimelineTitle`, `TimelineBody`]

* refactor(components): explicit exports; avoid "component undefined" erorr in RSC

* tests: add typesafety to custom `theme` object

---------

Co-authored-by: Sebastian Sutu <[email protected]>
  • Loading branch information
@SutuSebastian
SutuSebastian and Sebastian Sutu authored Nov 6, 2023
1 parent e3903af commit 5bea210
Show file tree
Hide file tree
Showing 157 changed files with 1,203 additions and 667 deletions.
8 changes: 5 additions & 3 deletions app/docs/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,11 @@ function DocsNavbar({ isCollapsed, setCollapsed }: DocsLayoutState) {
<Navbar
fluid
theme={{
base: 'sticky top-0 z-[60] bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between w-full mx-auto py-2.5 px-4',
inner: {
base: 'mx-auto flex flex-wrap justify-between items-center w-full',
root: {
base: 'sticky top-0 z-[60] bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between w-full mx-auto py-2.5 px-4',
inner: {
base: 'mx-auto flex flex-wrap justify-between items-center w-full',
},
},
}}
>
Expand Down
4 changes: 2 additions & 2 deletions components/homepage/components-section.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Link from 'next/link';
import type { ComponentProps, FC, PropsWithChildren } from 'react';
import type { ComponentProps, FC } from 'react';
import { COMPONENTS_DATA } from '~/data/components';
import { Button } from '~/src';

Expand Down Expand Up @@ -34,7 +34,7 @@ export const ComponentsSection: FC = () => {
);
};

interface ComponentCardProps extends PropsWithChildren, ComponentProps<'div'> {
interface ComponentCardProps extends ComponentProps<'div'> {
link: string;
name?: string;
image?: string;
Expand Down
8 changes: 5 additions & 3 deletions components/homepage/home-navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@ export const HomeNavbar: FC = () => {
return (
<Navbar
theme={{
base: 'sticky top-0 z-40 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between w-full mx-auto py-0',
inner: {
base: 'mx-auto flex flex-wrap justify-between items-center w-full xl:max-w-8xl px-4 py-2.5 xl:px-20 max-w-none',
root: {
base: 'sticky top-0 z-40 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between w-full mx-auto py-0',
inner: {
base: 'mx-auto flex flex-wrap justify-between items-center w-full xl:max-w-8xl px-4 py-2.5 xl:px-20 max-w-none',
},
},
}}
>
Expand Down
20 changes: 10 additions & 10 deletions examples/avatar/avatar.stackedLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { type CodeData } from '~/components/code-demo';
import { Avatar } from '~/src';
import { Avatar, AvatarGroup } from '~/src';

const code = `
'use client';
Expand Down Expand Up @@ -29,25 +29,25 @@ function Component() {
`;

const codeRSC = `
import { Avatar } from 'flowbite-react';
import { Avatar, AvatarGroup } from 'flowbite-react';
function Component() {
return (
<div className="flex flex-wrap gap-2">
<Avatar.Group>
<AvatarGroup>
<Avatar img="/images/people/profile-picture-1.jpg" rounded stacked />
<Avatar img="/images/people/profile-picture-2.jpg" rounded stacked />
<Avatar img="/images/people/profile-picture-3.jpg" rounded stacked />
<Avatar img="/images/people/profile-picture-4.jpg" rounded stacked />
<Avatar img="/images/people/profile-picture-5.jpg" rounded stacked />
</Avatar.Group>
<Avatar.Group>
</AvatarGroup>
<AvatarGroup>
<Avatar img="/images/people/profile-picture-1.jpg" rounded stacked />
<Avatar img="/images/people/profile-picture-2.jpg" rounded stacked />
<Avatar img="/images/people/profile-picture-3.jpg" rounded stacked />
<Avatar img="/images/people/profile-picture-4.jpg" rounded stacked />
<Avatar.Counter total={99} href="#" />
</Avatar.Group>
</AvatarGroup>
</div>
);
}
Expand All @@ -56,20 +56,20 @@ function Component() {
function Component() {
return (
<div className="flex flex-wrap gap-2">
<Avatar.Group>
<AvatarGroup>
<Avatar img="/images/people/profile-picture-1.jpg" rounded stacked />
<Avatar img="/images/people/profile-picture-2.jpg" rounded stacked />
<Avatar img="/images/people/profile-picture-3.jpg" rounded stacked />
<Avatar img="/images/people/profile-picture-4.jpg" rounded stacked />
<Avatar img="/images/people/profile-picture-5.jpg" rounded stacked />
</Avatar.Group>
<Avatar.Group>
</AvatarGroup>
<AvatarGroup>
<Avatar img="/images/people/profile-picture-1.jpg" rounded stacked />
<Avatar img="/images/people/profile-picture-2.jpg" rounded stacked />
<Avatar img="/images/people/profile-picture-3.jpg" rounded stacked />
<Avatar img="/images/people/profile-picture-4.jpg" rounded stacked />
<Avatar.Counter total={99} href="#" />
</Avatar.Group>
</AvatarGroup>
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion examples/rating/rating.advanced.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ function Component() {
`;

const codeRSC = `
import { Rating, RatingStar } from 'flowbite-react';
import { Rating, RatingAdvanced, RatingStar } from 'flowbite-react';
function Component() {
return (
Expand Down
120 changes: 60 additions & 60 deletions examples/timeline/timeline.horizontal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,62 +65,62 @@ function Component() {
}
`;

const codeRSC = `
import {
Button,
Timeline,
TimelineBody,
TimelineContent,
TimelineItem,
TimelinePoint,
TimelineTime,
TimelineTitle,
} from 'flowbite-react';
import { HiArrowNarrowRight, HiCalendar } from 'react-icons/hi';
// const codeRSC = `
// import {
// Button,
// Timeline,
// TimelineBody,
// TimelineContent,
// TimelineItem,
// TimelinePoint,
// TimelineTime,
// TimelineTitle,
// } from 'flowbite-react';
// import { HiArrowNarrowRight, HiCalendar } from 'react-icons/hi';

function Component() {
return (
<Timeline horizontal>
<TimelineItem>
<TimelinePoint icon={HiCalendar} />
<TimelineContent>
<TimelineTime>February 2022</TimelineTime>
<TimelineTitle>Application UI code in Tailwind CSS</TimelineTitle>
<TimelineBody>
Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order
E-commerce & Marketing pages.
</TimelineBody>
<Button color="gray">
Learn More
<HiArrowNarrowRight className="ml-2 h-3 w-3" />
</Button>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelinePoint icon={HiCalendar} />
<TimelineContent>
<TimelineTime>March 2022</TimelineTime>
<TimelineTitle>Marketing UI design in Figma</TimelineTitle>
<TimelineBody>
All of the pages and components are first designed in Figma and we keep a parity between the two versions
even as we update the project.
</TimelineBody>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelinePoint icon={HiCalendar} />
<TimelineContent>
<TimelineTime>April 2022</TimelineTime>
<TimelineTitle>E-Commerce UI code in Tailwind CSS</TimelineTitle>
<TimelineBody>
Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
</TimelineBody>
</TimelineContent>
</TimelineItem>
</Timeline>
);
}
`;
// function Component() {
// return (
// <Timeline horizontal>
// <TimelineItem>
// <TimelinePoint icon={HiCalendar} />
// <TimelineContent>
// <TimelineTime>February 2022</TimelineTime>
// <TimelineTitle>Application UI code in Tailwind CSS</TimelineTitle>
// <TimelineBody>
// Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order
// E-commerce & Marketing pages.
// </TimelineBody>
// <Button color="gray">
// Learn More
// <HiArrowNarrowRight className="ml-2 h-3 w-3" />
// </Button>
// </TimelineContent>
// </TimelineItem>
// <TimelineItem>
// <TimelinePoint icon={HiCalendar} />
// <TimelineContent>
// <TimelineTime>March 2022</TimelineTime>
// <TimelineTitle>Marketing UI design in Figma</TimelineTitle>
// <TimelineBody>
// All of the pages and components are first designed in Figma and we keep a parity between the two versions
// even as we update the project.
// </TimelineBody>
// </TimelineContent>
// </TimelineItem>
// <TimelineItem>
// <TimelinePoint icon={HiCalendar} />
// <TimelineContent>
// <TimelineTime>April 2022</TimelineTime>
// <TimelineTitle>E-Commerce UI code in Tailwind CSS</TimelineTitle>
// <TimelineBody>
// Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
// </TimelineBody>
// </TimelineContent>
// </TimelineItem>
// </Timeline>
// );
// }
// `;

function Component() {
return (
Expand Down Expand Up @@ -173,11 +173,11 @@ export const horizontal: CodeData = {
language: 'tsx',
code,
},
{
fileName: 'server',
language: 'tsx',
code: codeRSC,
},
// {
// fileName: 'server',
// language: 'tsx',
// code: codeRSC,
// },
],
githubSlug: 'timeline/timeline.horizontal.tsx',
component: <Component />,
Expand Down
120 changes: 60 additions & 60 deletions examples/timeline/timeline.vertical.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,62 +65,62 @@ function Component() {
}
`;

const codeRSC = `
import {
Button,
Timeline,
TimelineBody,
TimelineContent,
TimelineItem,
TimelinePoint,
TimelineTime,
TimelineTitle,
} from 'flowbite-react';
import { HiArrowNarrowRight, HiCalendar } from 'react-icons/hi';
// const codeRSC = `
// import {
// Button,
// Timeline,
// TimelineBody,
// TimelineContent,
// TimelineItem,
// TimelinePoint,
// TimelineTime,
// TimelineTitle,
// } from 'flowbite-react';
// import { HiArrowNarrowRight, HiCalendar } from 'react-icons/hi';

function Component() {
return (
<Timeline>
<TimelineItem>
<TimelinePoint icon={HiCalendar} />
<TimelineContent>
<TimelineTime>February 2022</TimelineTime>
<TimelineTitle>Application UI code in Tailwind CSS</TimelineTitle>
<TimelineBody>
Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order
E-commerce & Marketing pages.
</TimelineBody>
<Button color="gray">
Learn More
<HiArrowNarrowRight className="ml-2 h-3 w-3" />
</Button>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelinePoint icon={HiCalendar} />
<TimelineContent>
<TimelineTime>March 2022</TimelineTime>
<TimelineTitle>Marketing UI design in Figma</TimelineTitle>
<TimelineBody>
All of the pages and components are first designed in Figma and we keep a parity between the two versions
even as we update the project.
</TimelineBody>
</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelinePoint icon={HiCalendar} />
<TimelineContent>
<TimelineTime>April 2022</TimelineTime>
<TimelineTitle>E-Commerce UI code in Tailwind CSS</TimelineTitle>
<TimelineBody>
Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
</TimelineBody>
</TimelineContent>
</TimelineItem>
</Timeline>
);
}
`;
// function Component() {
// return (
// <Timeline>
// <TimelineItem>
// <TimelinePoint icon={HiCalendar} />
// <TimelineContent>
// <TimelineTime>February 2022</TimelineTime>
// <TimelineTitle>Application UI code in Tailwind CSS</TimelineTitle>
// <TimelineBody>
// Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order
// E-commerce & Marketing pages.
// </TimelineBody>
// <Button color="gray">
// Learn More
// <HiArrowNarrowRight className="ml-2 h-3 w-3" />
// </Button>
// </TimelineContent>
// </TimelineItem>
// <TimelineItem>
// <TimelinePoint icon={HiCalendar} />
// <TimelineContent>
// <TimelineTime>March 2022</TimelineTime>
// <TimelineTitle>Marketing UI design in Figma</TimelineTitle>
// <TimelineBody>
// All of the pages and components are first designed in Figma and we keep a parity between the two versions
// even as we update the project.
// </TimelineBody>
// </TimelineContent>
// </TimelineItem>
// <TimelineItem>
// <TimelinePoint icon={HiCalendar} />
// <TimelineContent>
// <TimelineTime>April 2022</TimelineTime>
// <TimelineTitle>E-Commerce UI code in Tailwind CSS</TimelineTitle>
// <TimelineBody>
// Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
// </TimelineBody>
// </TimelineContent>
// </TimelineItem>
// </Timeline>
// );
// }
// `;

function Component() {
return (
Expand Down Expand Up @@ -173,11 +173,11 @@ export const vertical: CodeData = {
language: 'tsx',
code,
},
{
fileName: 'server',
language: 'tsx',
code: codeRSC,
},
// {
// fileName: 'server',
// language: 'tsx',
// code: codeRSC,
// },
],
githubSlug: 'timeline/timeline.vertical.tsx',
component: <Component />,
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@
"react-icons": "^4.10.1",
"react-indiana-drag-scroll": "^2.2.0",
"react-markdown": "^9.0.0",
"sharp": "^0.32.6",

This comment has been minimized.

Sign in to view

Copy link
@BanDroid

BanDroid Nov 20, 2023 •
edited
Loading

please dont use sharp, here's the issue for termux users. CSS/Frontend library should never rely on native libs.

This comment has been minimized.

Sign in to view

Copy link
@rluders

rluders Nov 20, 2023

Collaborator

@SutuSebastian sharp isn't just a dependency for the docs?

This comment has been minimized.

Sign in to view

Copy link
@BanDroid

BanDroid Nov 20, 2023

if sharp needed for optimization, atleast let the user set it themself if the dependency use somekind of native libs that are not universal such as libvips (not available for android). because this could broke some system that doesn't supported.

This comment has been minimized.

Sign in to view

Copy link
@SutuSebastian

SutuSebastian Nov 20, 2023

Author Collaborator

@SutuSebastian sharp isn't just a dependency for the docs?

it is, but since we don't use a monorepo structure to isolate lib packages vs website packages, it is what it is

This comment has been minimized.

Sign in to view

Copy link
@SutuSebastian

SutuSebastian Nov 20, 2023

Author Collaborator

if sharp needed for optimization, atleast let the user set it themself if the dependency use somekind of native libs that are not universal such as libvips (not available for android). because this could broke some system that doesn't supported.

agreed

This comment has been minimized.

Sign in to view

Copy link
@rluders

rluders Nov 20, 2023

Collaborator

@BanDroid well, maybe? Are you having problems using the library or to run the documentation locally? I mean, if this is a dependency on the documentation, I think that this is fine to have it as a dependency... since you can remove the dependency locally and then just don't commit it when contributing. However, if this is a dependency that is being included in the library, then I agree that it should be removed, or at least fixed to not be included in the library.

The problem of having a mono repository and not handling the docs and library with separated dependencies.

This comment has been minimized.

Sign in to view

Copy link
@rluders

rluders Nov 20, 2023

Collaborator

I do think that it was probably some optimization for the documentation that is maybe accidentally being included as a dependency for the library itself.

This comment has been minimized.

Sign in to view

Copy link
@rluders

rluders Nov 20, 2023

Collaborator

@SutuSebastian maybe we can remove it as a dependency and add it during the docs deployment process?

This comment has been minimized.

Sign in to view

Copy link
@BanDroid

BanDroid Nov 20, 2023

@BanDroid well, maybe? Are you having problems using the library or to run the documentation locally? I mean, if this is a dependency on the documentation, I think that this is fine to have it as a dependency... since you can remove the dependency locally and then just don't commit it when contributing. However, if this is a dependency that is being included in the library, then I agree that it should be removed, or at least fixed to not be included in the library.

The problem of having a mono repository and not handling the docs and library with separated dependencies.

yes, i tested 0.7.0-beta.5, it always failed after running postcss install from sharp and related to the issue i mentioned, then i see package.json in flowbite-react in my node_modules, there was sharp as deep dependency which causing it to always fail because my OS was Android arm64v8.

it was working fine when i tested 0.7.0-beta.4 because sharp is not deep dependency.

This comment has been minimized.

Sign in to view

Copy link
@rluders

rluders Nov 20, 2023

Collaborator

Thanks, @BanDroid. We need to address this issue.

This comment has been minimized.

Sign in to view

Copy link
@rluders

rluders Nov 20, 2023

Collaborator

Could you please open a propper issue?

This comment has been minimized.

Sign in to view

Copy link
@BanDroid

BanDroid Nov 20, 2023

alright
"tailwind-merge": "^1.13.2"
},
"devDependencies": {
Expand Down
Loading

1 comment on commit 5bea210

@vercel
Copy link

@vercel vercel bot commented on 5bea210 Nov 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

flowbite-react – ./

flowbite-react-git-main-themesberg.vercel.app
flowbite-react-themesberg.vercel.app
flowbite-react-phi.vercel.app
www.flowbite-react.com
flowbite-react.com

Please sign in to comment.