Blockquote component #311
Blockquote component #311
Conversation
This commit adds a new component called FwbBlockquote. It includes the template, script, and styles for rendering a blockquote element with customizable size, alignment, type, and citation. The component also utilizes the useBlockquoteClasses composable to generate the appropriate CSS classes based on the props. Note: This commit message follows the established convention of starting with a type (feat) followed by a concise description of the changes.
|
Warning Rate limit exceeded@ogzcode has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 21 minutes and 30 seconds before requesting another review. How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. WalkthroughThe recent updates introduce a new set of Vue.js components and related documentation to enhance the usage of blockquotes within the Flowbite framework. Key additions include the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant Blockquote
User->>App: Request to display blockquote
App->>Blockquote: Render blockquote component
Blockquote->>Blockquote: Apply styles and props (size, align)
Blockquote->>User: Display formatted blockquote
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
✅ Deploy Preview for sensational-seahorse-8635f8 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range, codebase verification and nitpick comments (3)
docs/components/typography/blockquote/FwbBlockquoteExample.vue (1)
1-7: Consider adding more usage examples.The example is straightforward and demonstrates basic usage. Adding more examples with different props (e.g.,
cite,size,type) could be beneficial for users to understand the component's versatility.docs/components/typography/blockquote/FwbBlockquoteAlignExample.vue (1)
1-7: Consider adding more alignment examples.The example demonstrates alignment but adding more examples with different alignment values (
center,right) could be beneficial for users.docs/components/blockquote.md (1)
67-67: Possible missing comma.There might be a missing comma in the sentence.
- Choose from multiple sizes with the `size` prop for the default blockquote component based on surrounding elements and dimensions. + Choose from multiple sizes, with the `size` prop for the default blockquote component based on surrounding elements and dimensions.Tools
LanguageTool
[uncategorized] ~67-~67: Possible missing comma found.
Context: ...ote> ``` ## Size Choose from multiple sizes with thesizeprop for the default bl...(AI_HYDRA_LEO_MISSING_COMMA)
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (10)
- docs/.vitepress/config.mts (1 hunks)
- docs/components/blockquote.md (1 hunks)
- docs/components/typography/blockquote/FwbBlockquoteAlignExample.vue (1 hunks)
- docs/components/typography/blockquote/FwbBlockquoteExample.vue (1 hunks)
- docs/components/typography/blockquote/FwbBlockquoteSizeExample.vue (1 hunks)
- docs/components/typography/blockquote/FwbBlockquoteSolidExample.vue (1 hunks)
- src/components/FwbBlockquote/FwbBlockquote.vue (1 hunks)
- src/components/FwbBlockquote/composables/useBlockquoteClasses.ts (1 hunks)
- src/components/FwbBlockquote/types.ts (1 hunks)
- src/index.ts (1 hunks)
Files skipped from review due to trivial changes (5)
- docs/.vitepress/config.mts
- docs/components/typography/blockquote/FwbBlockquoteSizeExample.vue
- docs/components/typography/blockquote/FwbBlockquoteSolidExample.vue
- src/components/FwbBlockquote/types.ts
- src/index.ts
Additional context used
LanguageTool
docs/components/blockquote.md
[uncategorized] ~67-~67: Possible missing comma found.
Context: ...ote> ``` ## Size Choose from multiple sizes with thesizeprop for the default bl...(AI_HYDRA_LEO_MISSING_COMMA)
Markdownlint
docs/components/blockquote.md
15-15: Expected: h2; Actual: h4
Heading levels should only increment by one level at a time(MD001, heading-increment)
15-15: Punctuation: '.'
Trailing punctuation in heading(MD026, no-trailing-punctuation)
Additional comments not posted (15)
docs/components/typography/blockquote/FwbBlockquoteExample.vue (1)
9-11: LGTM!The import statement is correct and aligns with the project's structure.
docs/components/typography/blockquote/FwbBlockquoteAlignExample.vue (1)
9-18: LGTM!The import statement and props definition are correct and align with the project's structure.
src/components/FwbBlockquote/FwbBlockquote.vue (2)
1-5: LGTM!The template section is well-structured and correctly binds the props to the blockquote element.
7-29: LGTM!The script setup section is well-structured, imports necessary modules, defines props with defaults, and uses a composable for class management. The use of TypeScript and composables aligns with best practices.
src/components/FwbBlockquote/composables/useBlockquoteClasses.ts (5)
5-5: LGTM!The default CSS classes for blockquote elements are well-defined.
6-10: LGTM!The alignment CSS classes for blockquote elements are well-defined.
11-15: LGTM!The size CSS classes for blockquote elements are well-defined.
17-21: LGTM!The type definition for the blockquote classes properties is clear and well-defined.
23-40: LGTM!The composable function for computing blockquote CSS classes is well-structured and follows best practices.
docs/components/blockquote.md (6)
1-6: LGTM!The imports for the Blockquote component examples are necessary and correctly defined.
8-13: LGTM!The introduction provides a clear and concise overview of the Blockquote component and its reference.
17-28: LGTM!The default blockquote example is clear and effectively demonstrates the usage of the component.
30-39: LGTM!The solid background example is clear and effectively demonstrates the usage of the component.
41-63: LGTM!The alignment examples are clear and effectively demonstrate the usage of the component.
69-87: LGTM!The size examples are clear and effectively demonstrate the usage of the component.
docs/components/blockquote.md
Outdated
| ## Size | ||
|
|
||
| Choose from multiple sizes with the `size` prop for the default blockquote component based on surrounding elements and dimensions. |
There was a problem hiding this comment.
Fix heading level and punctuation.
The heading level should be h2 and the trailing punctuation should be removed.
- ## Size
+ ### Size- ## Size
+ ## SizeTools
LanguageTool
[uncategorized] ~67-~67: Possible missing comma found.
Context: ...ote> ``` ## Size Choose from multiple sizes with thesizeprop for the default bl...(AI_HYDRA_LEO_MISSING_COMMA)
Sqrcz
added
🔧 enhancement
There was a problem hiding this comment.
Hey,
Thank you for this... It's always good to increase number of available components 🎉
Please take a look at the comments below as well as the linter that is set up within a project... currently running npm run lint on this branch results in this:
✖ 85 problems (60 errors, 25 warnings)
57 errors and 25 warnings potentially fixable with the `--fix` option.
Please fix those few things so we can maintain same code style across all over our components. 🙏
Thanks 🙌
src/components/FwbBlockquote/composables/useBlockquoteClasses.ts
Outdated
Show resolved
Hide resolved
| size: 'md', | ||
| align: 'left', |
There was a problem hiding this comment.
size and alignment should be changed just by overriding tailwind classes... and not by dedicated props.
(again, take a look at src/components/Typography/FwbP.vue to see how it's done there)
| const blockquoteAlignClasses: Record<BlockquoteAlign, string> = { | ||
| left: "text-left", | ||
| center: "text-center", | ||
| right: "text-right", | ||
| }; | ||
| const blockquoteSizeClasses: Record<BlockquoteSize, string> = { | ||
| sm: "text-lg", | ||
| md: "text-xl", | ||
| lg: "text-2xl", | ||
| }; |
There was a problem hiding this comment.
as stated above... this should be achieved by tailwind classes directly on the component
| return twMerge( | ||
| blockquoteSizeClasses[props.size], | ||
| blockquoteAlignClasses[props.align], | ||
| props.type === "solid" ? "bg-gray-100 dark:bg-gray-800 border-l-4 border-gray-300 p-4 dark:border-gray-500" : "", | ||
| defaultBlockquoteClasses, | ||
| attrs.class as string | ||
| ); |
There was a problem hiding this comment.
we have dedicated composable fot this src/components/Typography/FwbP.vue has a simple use case example
This commit updates the FwbBlockquote component in the typography/blockquote directory. The changes include: - Fixing a typo in the component name from "FwbBlockquote" to "fwb-blockquote" to adhere to the naming convention. - Adding missing spaces in the blockquote text to improve readability. - Adding multiple blockquote examples with different sizes and alignments to the documentation page. Note: This commit message follows the established convention of starting with a type (feat) followed by a concise description of the changes.
This commit updates the FwbBlockquote component in the typography/blockquote directory. The changes include: - Fixing a typo in the component name from "FwbBlockquote" to "fwb-blockquote" to adhere to the naming convention. Note: This commit message follows the established convention of starting with a type (chore) followed by a concise description of the changes.
This commit removes the deprecated FwbBlockquote component and its related files: - src/components/FwbBlockquote/FwbBlockquote.vue - src/components/FwbBlockquote/composables/useBlockquoteClasses.ts - src/components/FwbBlockquote/types.ts The functionality of the FwbBlockquote component has been replaced by the new FwbBlockquote component located at src/components/Typography/FwbBlockquote.vue. Note: This commit message follows the established convention of starting with a type (refactor) followed by a concise description of the changes.
There was a problem hiding this comment.
Actionable comments posted: 7
Outside diff range, codebase verification and nitpick comments (3)
docs/components/typography/blockquote/FwbBlockquoteExample.vue (1)
1-7: Fix the repeated text in the blockquote.The quote text is repeated, which may be an oversight.
- "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application." + "Flowbite is just awesome. Perfect choice for your next SaaS application."docs/components/typography/blockquote/FwbBlockquoteSolidExample.vue (1)
1-7: Fix the repeated text in the blockquote.The quote text is repeated, which may be an oversight.
- "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application." + "Flowbite is just awesome. Perfect choice for your next SaaS application."docs/components/typography/blockquote/FwbBlockquoteSizeExample.vue (1)
1-13: Fix the repeated text in the blockquote components.The quote text is repeated in each blockquote, which may be an oversight.
- "Flowbite is just awesome. Perfect choice for your next SaaS application.Perfect choice for your next SaaS application." + "Flowbite is just awesome. Perfect choice for your next SaaS application."
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (8)
- docs/.vitepress/config.mts (1 hunks)
- docs/components/blockquote.md (1 hunks)
- docs/components/typography/blockquote/FwbBlockquoteAlignExample.vue (1 hunks)
- docs/components/typography/blockquote/FwbBlockquoteExample.vue (1 hunks)
- docs/components/typography/blockquote/FwbBlockquoteSizeExample.vue (1 hunks)
- docs/components/typography/blockquote/FwbBlockquoteSolidExample.vue (1 hunks)
- src/components/Typography/FwbBlockquote.vue (1 hunks)
- src/index.ts (1 hunks)
Files skipped from review due to trivial changes (1)
- docs/.vitepress/config.mts
Files skipped from review as they are similar to previous changes (1)
- src/index.ts
Additional context used
GitHub Check: lint (18.x)
docs/components/typography/blockquote/FwbBlockquoteExample.vue
[failure] 11-11:
Newline required at end of file but not founddocs/components/typography/blockquote/FwbBlockquoteSolidExample.vue
[failure] 11-11:
Newline required at end of file but not founddocs/components/typography/blockquote/FwbBlockquoteSizeExample.vue
[failure] 17-17:
Newline required at end of file but not founddocs/components/typography/blockquote/FwbBlockquoteAlignExample.vue
[warning] 2-2:
Expected indentation of 2 spaces but found 4 spaces
[warning] 3-3:
Expected indentation of 4 spaces but found 8 spaces
[warning] 4-4:
Expected indentation of 6 spaces but found 12 spaces
[warning] 5-5:
Expected indentation of 4 spaces but found 8 spaces
[warning] 6-6:
Expected indentation of 4 spaces but found 8 spaces
[warning] 7-7:
Expected indentation of 6 spaces but found 12 spaces
[warning] 8-8:
Expected indentation of 4 spaces but found 8 spaces
[warning] 9-9:
Expected indentation of 4 spaces but found 8 spaces
[warning] 10-10:
Expected indentation of 6 spaces but found 12 spaces
[warning] 11-11:
Expected indentation of 4 spaces but found 8 spaces
[failure] 17-17:
Newline required at end of file but not foundsrc/components/Typography/FwbBlockquote.vue
[failure] 20-20:
Expected indentation of 2 spaces but found 4
[failure] 21-21:
Expected indentation of 2 spaces but found 4
[failure] 22-22:
Expected indentation of 2 spaces but found 4
[failure] 25-25:
Strings must use singlequote
[failure] 25-25:
Extra semicolon
[failure] 26-26:
Strings must use singlequote
Markdownlint
docs/components/blockquote.md
15-15: Expected: h2; Actual: h4
Heading levels should only increment by one level at a time(MD001, heading-increment)
15-15: Punctuation: '.'
Trailing punctuation in heading(MD026, no-trailing-punctuation)
Additional comments not posted (3)
src/components/Typography/FwbBlockquote.vue (1)
1-5: LGTM!The template section is well-defined.
docs/components/blockquote.md (2)
1-6: LGTM!The script setup section is well-defined.
58-58: Fix heading level.The heading level should be h2.
-## Size +### SizeLikely invalid or redundant comment.
docs/components/typography/blockquote/FwbBlockquoteAlignExample.vue
Outdated
Show resolved
Hide resolved
docs/components/typography/blockquote/FwbBlockquoteAlignExample.vue
Outdated
Show resolved
Hide resolved
docs/components/typography/blockquote/FwbBlockquoteSolidExample.vue
Outdated
Show resolved
Hide resolved
| <script lang="ts" setup> | ||
| import { computed } from 'vue' | ||
| import { useMergeClasses } from '@/composables/useMergeClasses' | ||
|
|
||
| type BlockquoteType = 'default' | 'solid' | ||
|
|
||
| interface BlockquoteProps { | ||
| type?: BlockquoteType; | ||
| cite?: string; | ||
| class?: string; | ||
| } | ||
|
|
||
| const props = withDefaults(defineProps<BlockquoteProps>(), { | ||
| type: 'default', | ||
| cite: '', | ||
| class: '', | ||
| }) | ||
|
|
||
| const defaultBlockquoteClasses = "font-semibold text-lg italic text-gray-900 dark:text-white"; | ||
| const solidBlockquoteClasses = "bg-gray-100 dark:bg-gray-800 border-l-4 border-gray-300 p-4 dark:border-gray-500" | ||
|
|
||
| const blockquoteClasses = computed(() => useMergeClasses([ | ||
| defaultBlockquoteClasses, | ||
| props.type === 'solid' ? solidBlockquoteClasses : '', | ||
| props.class | ||
| ])); | ||
|
|
||
| </script> |
There was a problem hiding this comment.
Fix indentation, string quotes, and extra semicolon issues in the script section.
Proper formatting improves readability and adheres to coding standards.
- type: 'default',
- cite: '',
- class: '',
+ type: 'default',
+ cite: '',
+ class: '',-const defaultBlockquoteClasses = "font-semibold text-lg italic text-gray-900 dark:text-white";
-const solidBlockquoteClasses = "bg-gray-100 dark:bg-gray-800 border-l-4 border-gray-300 p-4 dark:border-gray-500";
+const defaultBlockquoteClasses = 'font-semibold text-lg italic text-gray-900 dark:text-white'
+const solidBlockquoteClasses = 'bg-gray-100 dark:bg-gray-800 border-l-4 border-gray-300 p-4 dark:border-gray-500'Tools
GitHub Check: lint (18.x)
[failure] 20-20:
Expected indentation of 2 spaces but found 4
[failure] 21-21:
Expected indentation of 2 spaces but found 4
[failure] 22-22:
Expected indentation of 2 spaces but found 4
[failure] 25-25:
Strings must use singlequote
[failure] 25-25:
Extra semicolon
[failure] 26-26:
Strings must use singlequote
docs/components/typography/blockquote/FwbBlockquoteSizeExample.vue
Outdated
Show resolved
Hide resolved
docs/components/blockquote.md
Outdated
| Original reference: [https://flowbite.com/docs/typography/blockquote/](https://flowbite.com/docs/typography/blockquote/) | ||
| ::: | ||
|
|
||
| #### Get started with a collection of blockquote components when quoting external sources such as quotes inside an article, user reviews, and testimonials based on multiple examples of layouts, styles, and contexts. |
There was a problem hiding this comment.
Fix heading level and trailing punctuation.
The heading level should be h2 and the trailing punctuation should be removed.
-#### Get started with a collection of blockquote components when quoting external sources such as quotes inside an article, user reviews, and testimonials based on multiple examples of layouts, styles, and contexts.
+## Get started with a collection of blockquote components when quoting external sources such as quotes inside an article, user reviews, and testimonials based on multiple examples of layouts, styles, and contextsCommittable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| #### Get started with a collection of blockquote components when quoting external sources such as quotes inside an article, user reviews, and testimonials based on multiple examples of layouts, styles, and contexts. | |
| ## Get started with a collection of blockquote components when quoting external sources such as quotes inside an article, user reviews, and testimonials based on multiple examples of layouts, styles, and contexts |
Tools
Markdownlint
15-15: Expected: h2; Actual: h4
Heading levels should only increment by one level at a time(MD001, heading-increment)
15-15: Punctuation: '.'
Trailing punctuation in heading(MD026, no-trailing-punctuation)
I hope it turned out the way you wanted. |
There was a problem hiding this comment.
Thank you for all of the changes. Now logic is way simpler and does the same thing 🎉
There are some small lint issues in example files (you can see comments added by GH Action)... to mitigate that you could configure your code editor to "lint on save" or run npm run lint-fix after making changes. ;)
Let's not block this one though... Good work we have a new component :)
#219
Hi,
1.I created the Blockquote component according to the code layout of the project.
2.I made it according to the examples and style scheme on the Flowbite and React-Flowbite sites.
3.I created the doc page for Blockquote and added it to the navigation.
4.I created sample components for the doc page and added their usage as well.
5.I did not add all the description content on the Flowbite site, I just created examples for size, align and type and added them to the doc page.
I hope the component turned out the way you wanted. I worked hard for this and I would be very happy if you accept my PR.
I will be waiting for your feedback.
@Sqrcz @cogor @zoltanszogyenyi @robert1508
Summary by CodeRabbit
New Features
Bug Fixes
Documentation