minor improvements to ui component docs (#2805)

* minor improvements to ui component docs

* polish queue.mdx, remove duplicate icon
This commit is contained in:
Nimra Ahmed
2023-12-04 12:32:35 +05:00
committed by GitHub
parent de2f7212d1
commit 2171eff1a0
7 changed files with 20 additions and 18 deletions

View File

@@ -2,21 +2,22 @@
title: Message Queue title: Message Queue
sidebar_position: 5 sidebar_position: 5
sidebar_custom_props: sidebar_custom_props:
icon: TbTopologyStar icon: TbSchema
--- ---
Queues facilitate async operations to be performed.It could be used for performing background tasks such as sending a welcome email on register. Queues facilitate async operations to be performed. They can be used for performing background tasks such as sending a welcome email on register.
Each use case will have its own queue class extended from `MessageQueueServiceBase`. Each use case will have its own queue class extended from `MessageQueueServiceBase`.
Currently queue supports 2 drivers which can be configurred by env variable `MESSAGE_QUEUE_TYPE` Currently, queue supports two drivers which can be configurred by env variable `MESSAGE_QUEUE_TYPE`.
1. `pg-boss` this is the default driver, uses [pg-boss](https://github.com/timgit/pg-boss) under the hood. 1. `pg-boss`: this is the default driver, which uses [pg-boss](https://github.com/timgit/pg-boss) under the hood.
2. `bull-mq` it uses [bull-mq](https://bullmq.io/) under the hood. 2. `bull-mq`: this uses [bull-mq](https://bullmq.io/) under the hood.
Steps to create and use a new queue ## Steps to create and use a new queue
1. add a queue name for your new queue under enum `MESSAGE_QUEUES`.
2. provide factory implementation of the queue with queue name as dependency token. 1. Add a queue name for your new queue under enum `MESSAGE_QUEUES`.
3. inject the queue that you created in the required module/service with queue name as dependency token. 2. Provide the factory implementation of the queue with the queue name as the dependency token.
4. add worker class with token based injection just like producer. 3. Inject the queue that you created in the required module/service with the queue name as the dependency token.
4. Add worker class with token based injection just like producer.
### Example usage ### Example usage
```ts ```ts

View File

@@ -57,5 +57,6 @@ export {
TbColorPicker, TbColorPicker,
TbCircleDot, TbCircleDot,
TbUpload, TbUpload,
TbVariable TbVariable,
TbSchema,
} from "react-icons/tb"; } from "react-icons/tb";

View File

@@ -676,4 +676,4 @@ declare module '@emotion/react' {
} }
} }
export { AnimatedCheckmark, type AnimatedCheckmarkProps, AppTooltip, type AppTooltipProps, AutosizeTextInput, AutosizeTextInputVariant, Button, type ButtonAccent, ButtonGroup, type ButtonGroupProps, type ButtonPosition, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, CheckboxShape, CheckboxSize, CheckboxVariant, Checkmark, type CheckmarkProps, Chip, ChipAccent, ChipSize, ChipVariant, CircularProgressBar, ColorSchemeCard, type ColorSchemeCardProps, ColorSchemePicker, type ColorSchemePickerProps, type ColorSchemeSegmentProps, EntityChip, type EntityChipProps, EntityChipVariant, EntityTitleDoubleTextInput, type EntityTitleDoubleTextInputProps, FloatingButton, FloatingButtonGroup, type FloatingButtonGroupProps, type FloatingButtonPosition, type FloatingButtonProps, type FloatingButtonSize, FloatingIconButton, FloatingIconButtonGroup, type FloatingIconButtonGroupProps, type FloatingIconButtonPosition, type FloatingIconButtonProps, type FloatingIconButtonSize, IconAddressBook, IconPicker, ImageInput, LabelPosition, LightButton, type LightButtonAccent, type LightButtonProps, LightIconButton, type LightIconButtonAccent, type LightIconButtonProps, type LightIconButtonSize, MainButton, OverflowingTextWithTooltip, ProgressBar, type ProgressBarControls, type ProgressBarProps, Radio, RadioGroup, type RadioProps, RadioSize, RoundedIconButton, SoonPill, Tag, type TagColor, type TagProps, TooltipPosition, castToTagColor, darkTheme, lightTheme }; export { AnimatedCheckmark, AnimatedCheckmarkProps, AppTooltip, AppTooltipProps, AutosizeTextInput, AutosizeTextInputVariant, Button, ButtonAccent, ButtonGroup, ButtonGroupProps, ButtonPosition, ButtonProps, ButtonSize, ButtonVariant, Checkbox, CheckboxShape, CheckboxSize, CheckboxVariant, Checkmark, CheckmarkProps, Chip, ChipAccent, ChipSize, ChipVariant, CircularProgressBar, ColorSchemeCard, ColorSchemeCardProps, ColorSchemePicker, ColorSchemePickerProps, ColorSchemeSegmentProps, EntityChip, EntityChipProps, EntityChipVariant, EntityTitleDoubleTextInput, EntityTitleDoubleTextInputProps, FloatingButton, FloatingButtonGroup, FloatingButtonGroupProps, FloatingButtonPosition, FloatingButtonProps, FloatingButtonSize, FloatingIconButton, FloatingIconButtonGroup, FloatingIconButtonGroupProps, FloatingIconButtonPosition, FloatingIconButtonProps, FloatingIconButtonSize, IconAddressBook, IconPicker, ImageInput, LabelPosition, LightButton, LightButtonAccent, LightButtonProps, LightIconButton, LightIconButtonAccent, LightIconButtonProps, LightIconButtonSize, MainButton, OverflowingTextWithTooltip, ProgressBar, ProgressBarControls, ProgressBarProps, Radio, RadioGroup, RadioProps, RadioSize, RoundedIconButton, SoonPill, Tag, TagColor, TagProps, TooltipPosition, castToTagColor, darkTheme, lightTheme };

File diff suppressed because one or more lines are too long

View File

@@ -15,7 +15,7 @@ export const MyComponent = () => {
accent="blue" accent="blue"
soon={false} soon={false}
disabled={false} disabled={false}
focus={true} focus={false}
onClick={() => console.log("click")} onClick={() => console.log("click")}
/> />
<Button <Button
@@ -29,7 +29,7 @@ export const MyComponent = () => {
accent="blue" accent="blue"
soon={false} soon={false}
disabled={false} disabled={false}
focus={true} focus={false}
onClick={() => console.log("click")} onClick={() => console.log("click")}
/> />
<Button <Button
@@ -43,7 +43,7 @@ export const MyComponent = () => {
accent="blue" accent="blue"
soon={false} soon={false}
disabled={false} disabled={false}
focus={true} focus={false}
onClick={() => console.log("click")} onClick={() => console.log("click")}
/> />
</ButtonGroup> </ButtonGroup>

View File

@@ -2,7 +2,7 @@ import { ColorSchemePicker } from "@/ui/input/color-scheme/components/ColorSchem
export const MyComponent = () => { export const MyComponent = () => {
return <ColorSchemePicker return <ColorSchemePicker
value value="Dark"
onChange onChange
/>; />;
}; };

View File

@@ -27,7 +27,7 @@ const StyledTag = styled.h3<{
background: ${({ color, theme }) => theme.tag.background[color]}; background: ${({ color, theme }) => theme.tag.background[color]};
border-radius: ${({ theme }) => theme.border.radius.sm}; border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ color, theme }) => theme.tag.text[color]}; color: ${({ color, theme }) => theme.tag.text[color]};
display: flex; display: inline-flex;
flex-direction: row; flex-direction: row;
font-size: ${({ theme }) => theme.font.size.md}; font-size: ${({ theme }) => theme.font.size.md};
font-style: normal; font-style: normal;