From 0fab53826cab19d189cea8b0a60d396c118b906c Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Wed, 3 Apr 2024 17:55:22 +0530 Subject: [PATCH 01/12] feat/hr -- HR Component added --- apps/web/content/docs/components/hr.mdx | 46 ++++++++++++ apps/web/data/docs-sidebar.ts | 1 + apps/web/examples/hr/hr.icon.tsx | 70 +++++++++++++++++++ apps/web/examples/hr/hr.root.tsx | 68 ++++++++++++++++++ apps/web/examples/hr/hr.square.tsx | 70 +++++++++++++++++++ apps/web/examples/hr/hr.text.tsx | 70 +++++++++++++++++++ apps/web/examples/hr/hr.trimmed.tsx | 68 ++++++++++++++++++ apps/web/examples/hr/index.ts | 5 ++ apps/web/examples/index.ts | 1 + .../src/components/Flowbite/FlowbiteTheme.ts | 2 + packages/ui/src/components/HR/HR.spec.tsx | 43 ++++++++++++ packages/ui/src/components/HR/HR.stories.tsx | 43 ++++++++++++ packages/ui/src/components/HR/HR.tsx | 51 ++++++++++++++ packages/ui/src/components/HR/HRIcon.tsx | 46 ++++++++++++ packages/ui/src/components/HR/HRSquare.tsx | 32 +++++++++ packages/ui/src/components/HR/HRText.tsx | 38 ++++++++++ packages/ui/src/components/HR/HRTrimmed.tsx | 32 +++++++++ packages/ui/src/components/HR/index.ts | 2 + packages/ui/src/components/HR/theme.ts | 27 +++++++ packages/ui/src/index.ts | 1 + packages/ui/src/theme.ts | 2 + 21 files changed, 718 insertions(+) create mode 100644 apps/web/content/docs/components/hr.mdx create mode 100644 apps/web/examples/hr/hr.icon.tsx create mode 100644 apps/web/examples/hr/hr.root.tsx create mode 100644 apps/web/examples/hr/hr.square.tsx create mode 100644 apps/web/examples/hr/hr.text.tsx create mode 100644 apps/web/examples/hr/hr.trimmed.tsx create mode 100644 apps/web/examples/hr/index.ts create mode 100644 packages/ui/src/components/HR/HR.spec.tsx create mode 100644 packages/ui/src/components/HR/HR.stories.tsx create mode 100644 packages/ui/src/components/HR/HR.tsx create mode 100644 packages/ui/src/components/HR/HRIcon.tsx create mode 100644 packages/ui/src/components/HR/HRSquare.tsx create mode 100644 packages/ui/src/components/HR/HRText.tsx create mode 100644 packages/ui/src/components/HR/HRTrimmed.tsx create mode 100644 packages/ui/src/components/HR/index.ts create mode 100644 packages/ui/src/components/HR/theme.ts diff --git a/apps/web/content/docs/components/hr.mdx b/apps/web/content/docs/components/hr.mdx new file mode 100644 index 000000000..09dcdca29 --- /dev/null +++ b/apps/web/content/docs/components/hr.mdx @@ -0,0 +1,46 @@ +--- +title: React Horizontal Line (HR) - Flowbite +description: Create a horizontal line using the HR tag to separate content such as paragraphs, blockquotes, and other elements using the utility classes from Tailwind CSS +--- + +The HR component can be used to separate content using a horizontal line by adding space between elements based on multiple styles, variants, and layouts. + +## Default HR + +Use this example to separate text content with a
horizontal line. + + + +## Trimmed + +Use this example to show a shorter version of the horizontal line. + + + +## Icon HR + +This example can be used to set a custom [SVG icon](https://flowbite.com/icons/) in the middle of the HR element. + + + +## HR with Text + +Use this example to add a text in the middle of the HR component. + + + +## HR Shape (square) + +This example can be used to separate content with a HR tag as a shape instead of a line. + + + +## Theme + +To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme). + + + +## References + +- [Flowbite HR](https://flowbite.com/docs/typography/hr/) diff --git a/apps/web/data/docs-sidebar.ts b/apps/web/data/docs-sidebar.ts index 60c49560b..c58a5e59f 100644 --- a/apps/web/data/docs-sidebar.ts +++ b/apps/web/data/docs-sidebar.ts @@ -67,6 +67,7 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [ { title: "Dropdown", href: "/docs/components/dropdown" }, { title: "Footer", href: "/docs/components/footer" }, { title: "Forms", href: "/docs/components/forms" }, + { title: "HR", href: "/docs/components/hr", isNew: true }, { title: "KBD", href: "/docs/components/kbd", isNew: true }, { title: "List group", href: "/docs/components/list-group" }, { title: "Modal", href: "/docs/components/modal" }, diff --git a/apps/web/examples/hr/hr.icon.tsx b/apps/web/examples/hr/hr.icon.tsx new file mode 100644 index 000000000..bab6608d9 --- /dev/null +++ b/apps/web/examples/hr/hr.icon.tsx @@ -0,0 +1,70 @@ +import { HRIcon } from "flowbite-react"; +import type { CodeData } from "~/components/code-demo"; + +const code = ` +"use client"; + +import { HR } from "flowbite-react"; + +function Component() { + return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ + + +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) +} +`; + +const codeRSC = ` +import { HRTrimmed } from "flowbite-react"; + +function Component() { + return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ + + +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) +} +`; + +function Component() { + return ( + <> +

+ Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest + data from other software development tools, so your IT support and operations teams have richer contextual + information to rapidly respond to requests, incidents, and changes. +

+ + + +

+ Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate + critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every + change. +

+ + ); +} + +export const icon: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code: codeRSC, + }, + ], + githubSlug: "/hr/hr.icon.tsx", + component: , +}; diff --git a/apps/web/examples/hr/hr.root.tsx b/apps/web/examples/hr/hr.root.tsx new file mode 100644 index 000000000..45e051c4a --- /dev/null +++ b/apps/web/examples/hr/hr.root.tsx @@ -0,0 +1,68 @@ +import { HR } from "flowbite-react"; +import type { CodeData } from "~/components/code-demo"; + +const code = ` +"use client"; + +import { HR } from "flowbite-react"; + +function Component() { + return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ +
+ +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) +} +`; + +const codeRSC = ` +import { HR } from "flowbite-react"; + +function Component() { + return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ +
+ +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) +} +`; + +function Component() { + return ( + <> +

+ Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest + data from other software development tools, so your IT support and operations teams have richer contextual + information to rapidly respond to requests, incidents, and changes. +

+
+

+ Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate + critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every + change. +

+ + ); +} + +export const root: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code: codeRSC, + }, + ], + githubSlug: "/hr/hr.root.tsx", + component: , +}; diff --git a/apps/web/examples/hr/hr.square.tsx b/apps/web/examples/hr/hr.square.tsx new file mode 100644 index 000000000..ee9cc44d7 --- /dev/null +++ b/apps/web/examples/hr/hr.square.tsx @@ -0,0 +1,70 @@ +import { HRSquare } from "flowbite-react"; +import type { CodeData } from "~/components/code-demo"; + +const code = ` +"use client"; + +import { HR } from "flowbite-react"; + +function Component() { + return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ + + +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) +} +`; + +const codeRSC = ` +import { HRTrimmed } from "flowbite-react"; + +function Component() { + return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ + + +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) +} +`; + +function Component() { + return ( + <> +

+ Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest + data from other software development tools, so your IT support and operations teams have richer contextual + information to rapidly respond to requests, incidents, and changes. +

+ + + +

+ Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate + critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every + change. +

+ + ); +} + +export const square: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code: codeRSC, + }, + ], + githubSlug: "/hr/hr.square.tsx", + component: , +}; diff --git a/apps/web/examples/hr/hr.text.tsx b/apps/web/examples/hr/hr.text.tsx new file mode 100644 index 000000000..c1143ac96 --- /dev/null +++ b/apps/web/examples/hr/hr.text.tsx @@ -0,0 +1,70 @@ +import { HRText } from "flowbite-react"; +import type { CodeData } from "~/components/code-demo"; + +const code = ` +"use client"; + +import { HR } from "flowbite-react"; + +function Component() { + return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ + + +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) +} +`; + +const codeRSC = ` +import { HRTrimmed } from "flowbite-react"; + +function Component() { + return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ + + +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) +} +`; + +function Component() { + return ( + <> +

+ Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest + data from other software development tools, so your IT support and operations teams have richer contextual + information to rapidly respond to requests, incidents, and changes. +

+ + + +

+ Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate + critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every + change. +

+ + ); +} + +export const text: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code: codeRSC, + }, + ], + githubSlug: "/hr/hr.text.tsx", + component: , +}; diff --git a/apps/web/examples/hr/hr.trimmed.tsx b/apps/web/examples/hr/hr.trimmed.tsx new file mode 100644 index 000000000..3dfaee809 --- /dev/null +++ b/apps/web/examples/hr/hr.trimmed.tsx @@ -0,0 +1,68 @@ +import { HRTrimmed } from "flowbite-react"; +import type { CodeData } from "~/components/code-demo"; + +const code = ` +"use client"; + +import { HR } from "flowbite-react"; + +function Component() { + return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ + + +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) +} +`; + +const codeRSC = ` +import { HRTrimmed } from "flowbite-react"; + +function Component() { + return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ + + +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) +} +`; + +function Component() { + return ( + <> +

+ Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest + data from other software development tools, so your IT support and operations teams have richer contextual + information to rapidly respond to requests, incidents, and changes. +

+ +

+ Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate + critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every + change. +

+ + ); +} + +export const trimmed: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + { + fileName: "server", + language: "tsx", + code: codeRSC, + }, + ], + githubSlug: "/hr/hr.trimmed.tsx", + component: , +}; diff --git a/apps/web/examples/hr/index.ts b/apps/web/examples/hr/index.ts new file mode 100644 index 000000000..c7d475779 --- /dev/null +++ b/apps/web/examples/hr/index.ts @@ -0,0 +1,5 @@ +export { icon } from "./hr.icon"; +export { root } from "./hr.root"; +export { square } from "./hr.square"; +export { text } from "./hr.text"; +export { trimmed } from "./hr.trimmed"; diff --git a/apps/web/examples/index.ts b/apps/web/examples/index.ts index 7992d8e29..50c83d1d4 100644 --- a/apps/web/examples/index.ts +++ b/apps/web/examples/index.ts @@ -15,6 +15,7 @@ export * as fileInput from "./fileInput"; export * as floatingLabel from "./floatingLabel"; export * as footer from "./footer"; export * as forms from "./forms"; +export * as hr from "./hr"; export * as kbd from "./kbd"; export * as list from "./list"; export * as listGroup from "./listGroup"; diff --git a/packages/ui/src/components/Flowbite/FlowbiteTheme.ts b/packages/ui/src/components/Flowbite/FlowbiteTheme.ts index a0ce75db5..84923726e 100644 --- a/packages/ui/src/components/Flowbite/FlowbiteTheme.ts +++ b/packages/ui/src/components/Flowbite/FlowbiteTheme.ts @@ -16,6 +16,7 @@ import type { FlowbiteFileInputTheme } from "../FileInput"; import type { FlowbiteFloatingLabelTheme } from "../FloatingLabel"; import type { FlowbiteFooterTheme } from "../Footer"; import type { FlowbiteHelperTextTheme } from "../HelperText"; +import type { FlowbiteHRTheme } from "../HR/HR"; import type { FlowbiteKbdTheme } from "../Kbd"; import type { FlowbiteLabelTheme } from "../Label"; import type { FlowbiteListTheme } from "../List"; @@ -61,6 +62,7 @@ export interface FlowbiteTheme { floatingLabel: FlowbiteFloatingLabelTheme; footer: FlowbiteFooterTheme; helperText: FlowbiteHelperTextTheme; + hr: FlowbiteHRTheme; kbd: FlowbiteKbdTheme; label: FlowbiteLabelTheme; list: FlowbiteListTheme; diff --git a/packages/ui/src/components/HR/HR.spec.tsx b/packages/ui/src/components/HR/HR.spec.tsx new file mode 100644 index 000000000..c05bfd02d --- /dev/null +++ b/packages/ui/src/components/HR/HR.spec.tsx @@ -0,0 +1,43 @@ +import { render } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; +import { HR } from "./HR"; + +describe.concurrent("Components / HR", () => { + it("should have data-testid='flowbite-hr' in the document", () => { + const defaultHRTestId = render(
).getByTestId("flowbite-hr"); + + expect(defaultHRTestId).toBeInTheDocument(); + }); + + it("should have data-testid='flowbite-hr-icon' in the document", () => { + const iconHRTestId = render().getByTestId("flowbite-hr-icon"); + + expect(iconHRTestId).toBeInTheDocument(); + }); + + it("should have data-testid='flowbite-hr-square' in the document", () => { + const squareHRTestId = render().getByTestId("flowbite-hr-square"); + + expect(squareHRTestId).toBeInTheDocument(); + }); + + it("should have data-testid='flowbite-hr-text' in the document", () => { + const textHRTestId = render().getByTestId("flowbite-hr-text"); + + expect(textHRTestId).toBeInTheDocument(); + }); + + it("should have 'role=separator' in the document", () => { + const separatorTextHRTestId = render().getAllByRole("separator"); + + separatorTextHRTestId.forEach((separator) => { + expect(separator).toBeInTheDocument(); + }); + }); + + it("should have data-testid='flowbite-hr-trimmed' in the document", () => { + const getByDisplayValueHRTestId = render().getByTestId("flowbite-hr-trimmed"); + + expect(getByDisplayValueHRTestId).toBeInTheDocument(); + }); +}); diff --git a/packages/ui/src/components/HR/HR.stories.tsx b/packages/ui/src/components/HR/HR.stories.tsx new file mode 100644 index 000000000..4ff5aef40 --- /dev/null +++ b/packages/ui/src/components/HR/HR.stories.tsx @@ -0,0 +1,43 @@ +import type { Meta, StoryFn } from "@storybook/react"; +import type { HRProps } from "./HR"; +import { HR } from "./HR"; +import { HRIcon } from "./HRIcon"; +import type { HRIconProps } from "./HRIcon"; +import type { HRSquareProps } from "./HRSquare"; +import { HRSquare } from "./HRSquare"; +import { HRText } from "./HRText"; +import type { HRTextProps } from "./HRText"; +import type { HRTrimmedProps } from "./HRTrimmed"; +import { HRTrimmed } from "./HRTrimmed"; + +export default { + title: "Components/HR", + component: HR, +} as Meta; + +const Template: StoryFn = (args) =>
; + +export const DefaultHR = Template.bind({}); +DefaultHR.args = {}; + +const TrimmedTemplate: StoryFn = (args) => ; + +export const TrimmedHR = TrimmedTemplate.bind({}); +TrimmedHR.args = {}; + +const IconTemplate: StoryFn = (args) => ; + +export const IconHR = IconTemplate.bind({}); +IconHR.args = {}; + +const TextTemplate: StoryFn = (args) => ; + +export const TextHR = TextTemplate.bind({}); +TextHR.args = { + text: "or", +}; + +const SquareTemplate: StoryFn = (args) => ; + +export const SquareHR = SquareTemplate.bind({}); +SquareHR.args = {}; diff --git a/packages/ui/src/components/HR/HR.tsx b/packages/ui/src/components/HR/HR.tsx new file mode 100644 index 000000000..f4a8330f1 --- /dev/null +++ b/packages/ui/src/components/HR/HR.tsx @@ -0,0 +1,51 @@ +import { forwardRef } from "react"; +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"; +import { HRIcon } from "./HRIcon"; +import type { FlowbiteHRIconTheme } from "./HRIcon"; +import type { FlowbiteHRSquareTheme } from "./HRSquare"; +import { HRSquare } from "./HRSquare"; +import { HRText } from "./HRText"; +import type { FlowbiteHRTextTheme } from "./HRText"; +import { HRTrimmed } from "./HRTrimmed"; +import type { FlowbiteHRTrimmedTheme } from "./HRTrimmed"; + +export interface FlowbiteHRTheme { + root: { + base: string; + }; + trimmed: FlowbiteHRTrimmedTheme; + icon: FlowbiteHRIconTheme; + text: FlowbiteHRTextTheme; + square: FlowbiteHRSquareTheme; +} + +export interface HRProps extends Omit, "ref"> { + theme?: DeepPartial; +} + +const HRComponent = forwardRef(({ theme: customTheme = {}, className, ...props }, ref) => { + const theme = mergeDeep(getTheme().hr.root, customTheme); + + return ( + <> +
+ + ); +}); + +HRComponent.displayName = "HR"; +HRTrimmed.displayName = "HR.Trimmed"; +HRIcon.displayName = "HR.Icon"; +HRText.displayName = "HR.Text"; +HRSquare.displayName = "HR.Square"; + +export const HR = Object.assign(HRComponent, { + Trimmed: HRTrimmed, + Icon: HRIcon, + Text: HRText, + Square: HRSquare, +}); diff --git a/packages/ui/src/components/HR/HRIcon.tsx b/packages/ui/src/components/HR/HRIcon.tsx new file mode 100644 index 000000000..666df15d6 --- /dev/null +++ b/packages/ui/src/components/HR/HRIcon.tsx @@ -0,0 +1,46 @@ +import { forwardRef } from "react"; +import type { ComponentProps, FC } from "react"; +import { FaQuoteRight } from "react-icons/fa6"; +import { twMerge } from "tailwind-merge"; +import { mergeDeep } from "../../helpers/merge-deep"; +import { getTheme } from "../../theme-store"; +import type { DeepPartial } from "../../types"; + +export interface FlowbiteHRIconTheme { + base: string; + hrLine: string; + icon: { + base: string; + icon: string; + }; +} + +export interface HRIconProps extends Omit, "ref"> { + theme?: DeepPartial; + icon?: FC>; +} + +export const HRIcon = forwardRef( + ({ theme: customTheme = {}, icon: Icon, className, ...props }, ref) => { + const theme = mergeDeep(getTheme().hr.icon, customTheme); + + const SVGIcon = Icon ? Icon : FaQuoteRight; + + return ( + <> +
+
+
+ +
+
+ + ); + }, +); diff --git a/packages/ui/src/components/HR/HRSquare.tsx b/packages/ui/src/components/HR/HRSquare.tsx new file mode 100644 index 000000000..3c4a9a780 --- /dev/null +++ b/packages/ui/src/components/HR/HRSquare.tsx @@ -0,0 +1,32 @@ +import { forwardRef } from "react"; +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"; + +export interface FlowbiteHRSquareTheme { + base: string; +} + +export interface HRSquareProps extends Omit, "ref"> { + theme?: DeepPartial; +} + +export const HRSquare = forwardRef( + ({ theme: customTheme = {}, className, ...props }, ref) => { + const theme = mergeDeep(getTheme().hr.square, customTheme); + + return ( + <> +
+ + ); + }, +); diff --git a/packages/ui/src/components/HR/HRText.tsx b/packages/ui/src/components/HR/HRText.tsx new file mode 100644 index 000000000..06f72a453 --- /dev/null +++ b/packages/ui/src/components/HR/HRText.tsx @@ -0,0 +1,38 @@ +import { forwardRef } from "react"; +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"; + +export interface FlowbiteHRTextTheme { + base: string; + hrLine: string; + text: string; +} + +export interface HRTextProps extends Omit, "ref"> { + text: string; + theme?: DeepPartial; +} + +export const HRText = forwardRef( + ({ theme: customTheme = {}, text, className, ...props }, ref) => { + const theme = mergeDeep(getTheme().hr.text, customTheme); + + return ( + <> +
+
+ {text} +
+ + ); + }, +); diff --git a/packages/ui/src/components/HR/HRTrimmed.tsx b/packages/ui/src/components/HR/HRTrimmed.tsx new file mode 100644 index 000000000..d62c5c4b8 --- /dev/null +++ b/packages/ui/src/components/HR/HRTrimmed.tsx @@ -0,0 +1,32 @@ +import { forwardRef } from "react"; +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"; + +export interface FlowbiteHRTrimmedTheme { + base: string; +} + +export interface HRTrimmedProps extends Omit, "ref"> { + theme?: DeepPartial; +} + +export const HRTrimmed = forwardRef( + ({ theme: customTheme = {}, className, ...props }, ref) => { + const theme = mergeDeep(getTheme().hr.trimmed, customTheme); + + return ( + <> +
+ + ); + }, +); diff --git a/packages/ui/src/components/HR/index.ts b/packages/ui/src/components/HR/index.ts new file mode 100644 index 000000000..a93312ac3 --- /dev/null +++ b/packages/ui/src/components/HR/index.ts @@ -0,0 +1,2 @@ +export { HR } from "./HR"; +export type { FlowbiteHRTheme, HRProps } from "./HR"; diff --git a/packages/ui/src/components/HR/theme.ts b/packages/ui/src/components/HR/theme.ts new file mode 100644 index 000000000..9f2979935 --- /dev/null +++ b/packages/ui/src/components/HR/theme.ts @@ -0,0 +1,27 @@ +import { createTheme } from "../../helpers/create-theme"; +import type { FlowbiteHRTheme } from "./HR"; + +export const hrTheme: FlowbiteHRTheme = createTheme({ + root: { + base: "my-8 h-px border-0 bg-gray-200 dark:bg-gray-700", + }, + trimmed: { + base: "mx-auto my-4 h-1 w-48 rounded border-0 bg-gray-100 dark:bg-gray-700 md:my-10", + }, + icon: { + base: "inline-flex w-full items-center justify-center", + hrLine: "my-8 h-1 w-64 rounded border-0 bg-gray-200 dark:bg-gray-700", + icon: { + base: "absolute left-1/2 -translate-x-1/2 bg-white px-4 dark:bg-gray-900", + icon: "h-4 w-4 text-gray-700 dark:text-gray-300", + }, + }, + text: { + base: "inline-flex w-full items-center justify-center", + hrLine: "my-8 h-px w-64 border-0 bg-gray-200 dark:bg-gray-700", + text: "absolute left-1/2 -translate-x-1/2 bg-white px-3 font-medium text-gray-900 dark:bg-gray-900 dark:text-white", + }, + square: { + base: "mx-auto my-8 h-8 w-8 rounded border-0 bg-gray-200 dark:bg-gray-700 md:my-12", + }, +}); diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index d4ac43525..6807ee16e 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -18,6 +18,7 @@ export * from "./components/FloatingLabel"; export * from "./components/Flowbite"; export * from "./components/Footer"; export * from "./components/HelperText"; +export * from "./components/HR"; export * from "./components/Kbd"; export * from "./components/Label"; export * from "./components/List"; diff --git a/packages/ui/src/theme.ts b/packages/ui/src/theme.ts index a5c64cb0b..a9cf62cd9 100644 --- a/packages/ui/src/theme.ts +++ b/packages/ui/src/theme.ts @@ -16,6 +16,7 @@ import { fileInputTheme } from "./components/FileInput/theme"; import { floatingLabelTheme } from "./components/FloatingLabel/theme"; import { footerTheme } from "./components/Footer/theme"; import { helperTextTheme } from "./components/HelperText/theme"; +import { hrTheme } from "./components/HR/theme"; import { kbdTheme } from "./components/Kbd/theme"; import { labelTheme } from "./components/Label/theme"; import { listTheme } from "./components/List/theme"; @@ -59,6 +60,7 @@ export const theme: FlowbiteTheme = { floatingLabel: floatingLabelTheme, footer: footerTheme, helperText: helperTextTheme, + hr: hrTheme, kbd: kbdTheme, label: labelTheme, listGroup: listGroupTheme, From 8fe1e243dc951a6f9e42637f83616f106be505be Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Wed, 3 Apr 2024 18:02:15 +0530 Subject: [PATCH 02/12] fix: Code Example formatting issue fixed --- apps/web/examples/hr/hr.icon.tsx | 20 ++++++++++---------- apps/web/examples/hr/hr.root.tsx | 20 ++++++++++---------- apps/web/examples/hr/hr.square.tsx | 20 ++++++++++---------- apps/web/examples/hr/hr.text.tsx | 20 ++++++++++---------- apps/web/examples/hr/hr.trimmed.tsx | 20 ++++++++++---------- 5 files changed, 50 insertions(+), 50 deletions(-) diff --git a/apps/web/examples/hr/hr.icon.tsx b/apps/web/examples/hr/hr.icon.tsx index bab6608d9..598c5dc31 100644 --- a/apps/web/examples/hr/hr.icon.tsx +++ b/apps/web/examples/hr/hr.icon.tsx @@ -7,13 +7,13 @@ const code = ` import { HR } from "flowbite-react"; function Component() { - return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- + -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) } `; @@ -21,13 +21,13 @@ const codeRSC = ` import { HRTrimmed } from "flowbite-react"; function Component() { - return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- + -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) } `; diff --git a/apps/web/examples/hr/hr.root.tsx b/apps/web/examples/hr/hr.root.tsx index 45e051c4a..e42792c36 100644 --- a/apps/web/examples/hr/hr.root.tsx +++ b/apps/web/examples/hr/hr.root.tsx @@ -7,13 +7,13 @@ const code = ` import { HR } from "flowbite-react"; function Component() { - return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

-
+
-

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) } `; @@ -21,13 +21,13 @@ const codeRSC = ` import { HR } from "flowbite-react"; function Component() { - return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

-
+
-

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) } `; diff --git a/apps/web/examples/hr/hr.square.tsx b/apps/web/examples/hr/hr.square.tsx index ee9cc44d7..d5a506004 100644 --- a/apps/web/examples/hr/hr.square.tsx +++ b/apps/web/examples/hr/hr.square.tsx @@ -7,13 +7,13 @@ const code = ` import { HR } from "flowbite-react"; function Component() { - return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- + -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) } `; @@ -21,13 +21,13 @@ const codeRSC = ` import { HRTrimmed } from "flowbite-react"; function Component() { - return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- + -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) } `; diff --git a/apps/web/examples/hr/hr.text.tsx b/apps/web/examples/hr/hr.text.tsx index c1143ac96..d7d2564d5 100644 --- a/apps/web/examples/hr/hr.text.tsx +++ b/apps/web/examples/hr/hr.text.tsx @@ -7,13 +7,13 @@ const code = ` import { HR } from "flowbite-react"; function Component() { - return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- + -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) } `; @@ -21,13 +21,13 @@ const codeRSC = ` import { HRTrimmed } from "flowbite-react"; function Component() { - return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- + -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) } `; diff --git a/apps/web/examples/hr/hr.trimmed.tsx b/apps/web/examples/hr/hr.trimmed.tsx index 3dfaee809..7ed18fe7e 100644 --- a/apps/web/examples/hr/hr.trimmed.tsx +++ b/apps/web/examples/hr/hr.trimmed.tsx @@ -7,13 +7,13 @@ const code = ` import { HR } from "flowbite-react"; function Component() { - return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- + -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) } `; @@ -21,13 +21,13 @@ const codeRSC = ` import { HRTrimmed } from "flowbite-react"; function Component() { - return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

+ return ( +

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- + -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) +

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

+ ) } `; From f3a4dfff392bf7085f1fb539c6776e7473290978 Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Wed, 3 Apr 2024 18:04:58 +0530 Subject: [PATCH 03/12] fixed based on AI Reviews --- apps/web/content/docs/components/hr.mdx | 2 +- packages/ui/src/components/HR/HR.tsx | 4 +--- packages/ui/src/components/HR/HRSquare.tsx | 16 +++++++--------- packages/ui/src/components/HR/HRTrimmed.tsx | 16 +++++++--------- 4 files changed, 16 insertions(+), 22 deletions(-) diff --git a/apps/web/content/docs/components/hr.mdx b/apps/web/content/docs/components/hr.mdx index 09dcdca29..bd234e155 100644 --- a/apps/web/content/docs/components/hr.mdx +++ b/apps/web/content/docs/components/hr.mdx @@ -31,7 +31,7 @@ Use this example to add a text in the middle of the HR component. ## HR Shape (square) -This example can be used to separate content with a HR tag as a shape instead of a line. +This example can be used to separate content with an HR tag as a shape instead of a line. diff --git a/packages/ui/src/components/HR/HR.tsx b/packages/ui/src/components/HR/HR.tsx index f4a8330f1..baf1935d4 100644 --- a/packages/ui/src/components/HR/HR.tsx +++ b/packages/ui/src/components/HR/HR.tsx @@ -31,9 +31,7 @@ const HRComponent = forwardRef(({ theme: customTheme = { const theme = mergeDeep(getTheme().hr.root, customTheme); return ( - <> -
- +
); }); diff --git a/packages/ui/src/components/HR/HRSquare.tsx b/packages/ui/src/components/HR/HRSquare.tsx index 3c4a9a780..724ac3f4f 100644 --- a/packages/ui/src/components/HR/HRSquare.tsx +++ b/packages/ui/src/components/HR/HRSquare.tsx @@ -18,15 +18,13 @@ export const HRSquare = forwardRef( const theme = mergeDeep(getTheme().hr.square, customTheme); return ( - <> -
- +
); }, ); diff --git a/packages/ui/src/components/HR/HRTrimmed.tsx b/packages/ui/src/components/HR/HRTrimmed.tsx index d62c5c4b8..6014615f3 100644 --- a/packages/ui/src/components/HR/HRTrimmed.tsx +++ b/packages/ui/src/components/HR/HRTrimmed.tsx @@ -18,15 +18,13 @@ export const HRTrimmed = forwardRef( const theme = mergeDeep(getTheme().hr.trimmed, customTheme); return ( - <> -
- +
); }, ); From 8e0295015c016575199c693e4b5e3fc885acd187 Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Wed, 3 Apr 2024 18:13:56 +0530 Subject: [PATCH 04/12] typecheck error fixed --- apps/web/content/docs/components/hr.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/content/docs/components/hr.mdx b/apps/web/content/docs/components/hr.mdx index bd234e155..62d4d6393 100644 --- a/apps/web/content/docs/components/hr.mdx +++ b/apps/web/content/docs/components/hr.mdx @@ -7,7 +7,7 @@ The HR component can be used to separate content using a horizontal line by addi ## Default HR -Use this example to separate text content with a
horizontal line. +Use this example to separate text content with a
horizontal line. From a3df6d533dad91b88d73a7918e710630093d341a Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Wed, 3 Apr 2024 18:17:55 +0530 Subject: [PATCH 05/12] fix: exporting other components issue fixed --- packages/ui/src/components/HR/index.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/ui/src/components/HR/index.ts b/packages/ui/src/components/HR/index.ts index a93312ac3..66138ee8e 100644 --- a/packages/ui/src/components/HR/index.ts +++ b/packages/ui/src/components/HR/index.ts @@ -1,2 +1,14 @@ export { HR } from "./HR"; export type { FlowbiteHRTheme, HRProps } from "./HR"; + +export { HRIcon } from "./HRIcon"; +export type { FlowbiteHRIconTheme, HRIconProps } from "./HRIcon"; + +export { HRSquare } from "./HRSquare"; +export type { FlowbiteHRSquareTheme, HRSquareProps } from "./HRSquare"; + +export { HRText } from "./HRText"; +export type { FlowbiteHRTextTheme, HRTextProps } from "./HRText"; + +export { HRTrimmed } from "./HRTrimmed"; +export type { FlowbiteHRTrimmedTheme, HRTrimmedProps } from "./HRTrimmed"; From b8f4a624d5f42e36160fb58482c5db9c83e4151c Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Thu, 4 Apr 2024 07:13:45 +0530 Subject: [PATCH 06/12] fix: removed redundant fragments --- packages/ui/src/components/HR/HRIcon.tsx | 24 +++++++++++------------- packages/ui/src/components/HR/HRText.tsx | 22 ++++++++++------------ 2 files changed, 21 insertions(+), 25 deletions(-) diff --git a/packages/ui/src/components/HR/HRIcon.tsx b/packages/ui/src/components/HR/HRIcon.tsx index 666df15d6..fd3c6c949 100644 --- a/packages/ui/src/components/HR/HRIcon.tsx +++ b/packages/ui/src/components/HR/HRIcon.tsx @@ -27,20 +27,18 @@ export const HRIcon = forwardRef( const SVGIcon = Icon ? Icon : FaQuoteRight; return ( - <> -
-
-
- -
+
+
+
+
- +
); }, ); diff --git a/packages/ui/src/components/HR/HRText.tsx b/packages/ui/src/components/HR/HRText.tsx index 06f72a453..83dac7136 100644 --- a/packages/ui/src/components/HR/HRText.tsx +++ b/packages/ui/src/components/HR/HRText.tsx @@ -21,18 +21,16 @@ export const HRText = forwardRef( const theme = mergeDeep(getTheme().hr.text, customTheme); return ( - <> -
-
- {text} -
- +
+
+ {text} +
); }, ); From a364bd8ed37d779c26dcbd99390ef9da4dfe1cda Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Thu, 4 Apr 2024 07:18:09 +0530 Subject: [PATCH 07/12] small doc fix --- apps/web/content/docs/components/hr.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/content/docs/components/hr.mdx b/apps/web/content/docs/components/hr.mdx index 62d4d6393..af4d137b9 100644 --- a/apps/web/content/docs/components/hr.mdx +++ b/apps/web/content/docs/components/hr.mdx @@ -7,7 +7,7 @@ The HR component can be used to separate content using a horizontal line by addi ## Default HR -Use this example to separate text content with a
horizontal line. +Use this example to separate text content with a `
` horizontal line. From 78a4585485a56795e97485c366f965664d9fb32a Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Thu, 4 Apr 2024 13:47:24 +0530 Subject: [PATCH 08/12] fix: moved the HR from common to under Typography in Sidebar Items --- apps/web/data/docs-sidebar.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/data/docs-sidebar.ts b/apps/web/data/docs-sidebar.ts index c58a5e59f..ec28f7c50 100644 --- a/apps/web/data/docs-sidebar.ts +++ b/apps/web/data/docs-sidebar.ts @@ -67,7 +67,6 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [ { title: "Dropdown", href: "/docs/components/dropdown" }, { title: "Footer", href: "/docs/components/footer" }, { title: "Forms", href: "/docs/components/forms" }, - { title: "HR", href: "/docs/components/hr", isNew: true }, { title: "KBD", href: "/docs/components/kbd", isNew: true }, { title: "List group", href: "/docs/components/list-group" }, { title: "Modal", href: "/docs/components/modal" }, @@ -98,6 +97,7 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [ href: "/typography/", items: [ { title: "Blockquote", href: "/docs/typography/blockquote", isNew: true }, + { title: "HR", href: "/docs/components/hr", isNew: true }, { title: "List", href: "/docs/typography/list", isNew: true }, ], }, From 1c003839e0efc84cb13baa4078d19728b81781fc Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Thu, 4 Apr 2024 14:16:59 +0530 Subject: [PATCH 09/12] fix: moved hr.mdx from /components/ to /typography/ --- apps/web/content/docs/{components => typography}/hr.mdx | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename apps/web/content/docs/{components => typography}/hr.mdx (100%) diff --git a/apps/web/content/docs/components/hr.mdx b/apps/web/content/docs/typography/hr.mdx similarity index 100% rename from apps/web/content/docs/components/hr.mdx rename to apps/web/content/docs/typography/hr.mdx From 643b84dfd4b3ddb4818277003cb6a0ce5d1b218e Mon Sep 17 00:00:00 2001 From: SutuSebastian Date: Wed, 19 Jun 2024 16:29:08 +0300 Subject: [PATCH 10/12] fix: sidebar `HR` slug --- apps/web/data/docs-sidebar.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/data/docs-sidebar.ts b/apps/web/data/docs-sidebar.ts index 2454ed22f..36049fb6a 100644 --- a/apps/web/data/docs-sidebar.ts +++ b/apps/web/data/docs-sidebar.ts @@ -100,8 +100,8 @@ export const DOCS_SIDEBAR: DocsSidebarSection[] = [ href: "/typography/", items: [ { title: "Blockquote", href: "/docs/typography/blockquote", isNew: true }, - { title: "HR", href: "/docs/components/hr", isNew: true }, { title: "List", href: "/docs/typography/list", isNew: true }, + { title: "HR", href: "/docs/typography/hr", isNew: true }, ], }, ]; From a7b6231267e76a50d3f72715c047e9d13ae33e4a Mon Sep 17 00:00:00 2001 From: SutuSebastian Date: Wed, 19 Jun 2024 16:45:43 +0300 Subject: [PATCH 11/12] fix: docs `HR` examples --- apps/web/examples/hr/hr.icon.tsx | 46 +++++++++++++++--------- apps/web/examples/hr/hr.root.tsx | 36 ++++++++----------- apps/web/examples/hr/hr.square.tsx | 46 +++++++++++++++--------- apps/web/examples/hr/hr.text.tsx | 46 +++++++++++++++--------- apps/web/examples/hr/hr.trimmed.tsx | 42 ++++++++++++++-------- packages/ui/src/components/HR/HRIcon.tsx | 8 ++--- 6 files changed, 132 insertions(+), 92 deletions(-) diff --git a/apps/web/examples/hr/hr.icon.tsx b/apps/web/examples/hr/hr.icon.tsx index 598c5dc31..3d5ef6fdc 100644 --- a/apps/web/examples/hr/hr.icon.tsx +++ b/apps/web/examples/hr/hr.icon.tsx @@ -2,32 +2,46 @@ import { HRIcon } from "flowbite-react"; import type { CodeData } from "~/components/code-demo"; const code = ` -"use client"; - import { HR } from "flowbite-react"; function Component() { return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- - - -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) + <> +

+ Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest + data from other software development tools, so your IT support and operations teams have richer contextual + information to rapidly respond to requests, incidents, and changes. +

+ +

+ Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate + critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every + change. +

+ + ); } `; const codeRSC = ` -import { HRTrimmed } from "flowbite-react"; +import { HRIcon } from "flowbite-react"; function Component() { return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- - - -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) + <> +

+ Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest + data from other software development tools, so your IT support and operations teams have richer contextual + information to rapidly respond to requests, incidents, and changes. +

+ +

+ Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate + critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every + change. +

+ + ); } `; @@ -39,9 +53,7 @@ function Component() { data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every diff --git a/apps/web/examples/hr/hr.root.tsx b/apps/web/examples/hr/hr.root.tsx index e42792c36..26d21a926 100644 --- a/apps/web/examples/hr/hr.root.tsx +++ b/apps/web/examples/hr/hr.root.tsx @@ -2,32 +2,24 @@ import { HR } from "flowbite-react"; import type { CodeData } from "~/components/code-demo"; const code = ` -"use client"; - import { HR } from "flowbite-react"; function Component() { return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- -
- -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) -} -`; - -const codeRSC = ` -import { HR } from "flowbite-react"; - -function Component() { - return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- + <> +

+ Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest + data from other software development tools, so your IT support and operations teams have richer contextual + information to rapidly respond to requests, incidents, and changes. +

- -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) +

+ Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate + critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every + change. +

+ + ); } `; @@ -60,7 +52,7 @@ export const root: CodeData = { { fileName: "server", language: "tsx", - code: codeRSC, + code, }, ], githubSlug: "/hr/hr.root.tsx", diff --git a/apps/web/examples/hr/hr.square.tsx b/apps/web/examples/hr/hr.square.tsx index d5a506004..698e4758e 100644 --- a/apps/web/examples/hr/hr.square.tsx +++ b/apps/web/examples/hr/hr.square.tsx @@ -2,32 +2,46 @@ import { HRSquare } from "flowbite-react"; import type { CodeData } from "~/components/code-demo"; const code = ` -"use client"; - import { HR } from "flowbite-react"; function Component() { return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- - - -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) + <> +

+ Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest + data from other software development tools, so your IT support and operations teams have richer contextual + information to rapidly respond to requests, incidents, and changes. +

+ +

+ Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate + critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every + change. +

+ + ); } `; const codeRSC = ` -import { HRTrimmed } from "flowbite-react"; +import { HRSquare } from "flowbite-react"; function Component() { return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- - - -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) + <> +

+ Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest + data from other software development tools, so your IT support and operations teams have richer contextual + information to rapidly respond to requests, incidents, and changes. +

+ +

+ Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate + critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every + change. +

+ + ); } `; @@ -39,9 +53,7 @@ function Component() { data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every diff --git a/apps/web/examples/hr/hr.text.tsx b/apps/web/examples/hr/hr.text.tsx index d7d2564d5..4ee3983d0 100644 --- a/apps/web/examples/hr/hr.text.tsx +++ b/apps/web/examples/hr/hr.text.tsx @@ -2,32 +2,46 @@ import { HRText } from "flowbite-react"; import type { CodeData } from "~/components/code-demo"; const code = ` -"use client"; - import { HR } from "flowbite-react"; function Component() { return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- - - -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) + <> +

+ Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest + data from other software development tools, so your IT support and operations teams have richer contextual + information to rapidly respond to requests, incidents, and changes. +

+ +

+ Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate + critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every + change. +

+ + ); } `; const codeRSC = ` -import { HRTrimmed } from "flowbite-react"; +import { HRText } from "flowbite-react"; function Component() { return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- - - -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) + <> +

+ Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest + data from other software development tools, so your IT support and operations teams have richer contextual + information to rapidly respond to requests, incidents, and changes. +

+ +

+ Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate + critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every + change. +

+ + ); } `; @@ -39,9 +53,7 @@ function Component() { data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every diff --git a/apps/web/examples/hr/hr.trimmed.tsx b/apps/web/examples/hr/hr.trimmed.tsx index 7ed18fe7e..0881bbeb1 100644 --- a/apps/web/examples/hr/hr.trimmed.tsx +++ b/apps/web/examples/hr/hr.trimmed.tsx @@ -2,18 +2,24 @@ import { HRTrimmed } from "flowbite-react"; import type { CodeData } from "~/components/code-demo"; const code = ` -"use client"; - import { HR } from "flowbite-react"; function Component() { return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- - - -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) + <> +

+ Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest + data from other software development tools, so your IT support and operations teams have richer contextual + information to rapidly respond to requests, incidents, and changes. +

+ +

+ Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate + critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every + change. +

+ + ); } `; @@ -22,12 +28,20 @@ import { HRTrimmed } from "flowbite-react"; function Component() { return ( -

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

- - - -

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

- ) + <> +

+ Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest + data from other software development tools, so your IT support and operations teams have richer contextual + information to rapidly respond to requests, incidents, and changes. +

+ +

+ Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate + critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every + change. +

+ + ); } `; diff --git a/packages/ui/src/components/HR/HRIcon.tsx b/packages/ui/src/components/HR/HRIcon.tsx index fd3c6c949..00007fcf6 100644 --- a/packages/ui/src/components/HR/HRIcon.tsx +++ b/packages/ui/src/components/HR/HRIcon.tsx @@ -1,5 +1,5 @@ -import { forwardRef } from "react"; import type { ComponentProps, FC } from "react"; +import { forwardRef } from "react"; import { FaQuoteRight } from "react-icons/fa6"; import { twMerge } from "tailwind-merge"; import { mergeDeep } from "../../helpers/merge-deep"; @@ -21,11 +21,9 @@ export interface HRIconProps extends Omit, "ref"> { } export const HRIcon = forwardRef( - ({ theme: customTheme = {}, icon: Icon, className, ...props }, ref) => { + ({ theme: customTheme = {}, icon: Icon = FaQuoteRight, className, ...props }, ref) => { const theme = mergeDeep(getTheme().hr.icon, customTheme); - const SVGIcon = Icon ? Icon : FaQuoteRight; - return (
( {...props} />
- +
); From 990617423bf09f06593d933e846dee2296a1fdd9 Mon Sep 17 00:00:00 2001 From: SutuSebastian Date: Wed, 19 Jun 2024 16:48:54 +0300 Subject: [PATCH 12/12] add changeset --- .changeset/tough-ducks-beam.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tough-ducks-beam.md diff --git a/.changeset/tough-ducks-beam.md b/.changeset/tough-ducks-beam.md new file mode 100644 index 000000000..1e2e99db5 --- /dev/null +++ b/.changeset/tough-ducks-beam.md @@ -0,0 +1,5 @@ +--- +"flowbite-react": patch +--- + +feat: add `HR` component