From c7f8d13836cc235f92080a8d036df635377d083a Mon Sep 17 00:00:00 2001 From: BabuTechBsf Date: Wed, 2 Oct 2024 20:05:25 +0530 Subject: [PATCH 1/2] added code changes displayname --- src/components/breadcrumb/breadcrumb.jsx | 24 ++++++---- .../breadcrumb/breadcrumb.stories.js | 44 ++++++++----------- src/components/breadcrumb/index.js | 10 +---- src/components/breadcrumb/readme.md | 34 +++++++------- src/components/index.js | 12 +---- src/components/radio-button-group/index.js | 2 +- .../radio-button-group/radio-button-group.jsx | 8 +++- .../radio-button-group.stories.js | 34 +++++++------- src/components/radio-button-group/readme.md | 26 +++++------ 9 files changed, 91 insertions(+), 103 deletions(-) diff --git a/src/components/breadcrumb/breadcrumb.jsx b/src/components/breadcrumb/breadcrumb.jsx index 7b0ad707..3297904f 100644 --- a/src/components/breadcrumb/breadcrumb.jsx +++ b/src/components/breadcrumb/breadcrumb.jsx @@ -30,14 +30,17 @@ const Breadcrumb = ( { children, size = 'sm' } ) => { ); }; +Breadcrumb.displayName = 'Breadcrumb'; const BreadcrumbList = ( { children } ) => { return <>{ children }; }; +BreadcrumbList.displayName = 'Breadcrumb.List'; const BreadcrumbItem = ( { children } ) => { return
  • { children }
    • ; }; +BreadcrumbItem.displayName = 'Breadcrumb.Item'; const BreadcrumbLink = ( { href, @@ -63,6 +66,7 @@ const BreadcrumbLink = ( { ); }; +BreadcrumbLink.displayName = 'Breadcrumb.Link'; const BreadcrumbSeparator = ( { type } ) => { const { sizes } = useContext( BreadcrumbContext ); @@ -77,6 +81,7 @@ const BreadcrumbSeparator = ( { type } ) => { ); }; +BreadcrumbSeparator.displayName = 'Breadcrumb.Separator'; const BreadcrumbEllipsis = () => { const { sizes } = useContext( BreadcrumbContext ); @@ -88,6 +93,7 @@ const BreadcrumbEllipsis = () => { /> ); }; +BreadcrumbEllipsis.displayName = 'Breadcrumb.Ellipsis'; const BreadcrumbPage = ( { children } ) => { const { sizes } = useContext( BreadcrumbContext ); @@ -98,13 +104,13 @@ const BreadcrumbPage = ( { children } ) => { ); }; +BreadcrumbPage.displayName = 'Breadcrumb.Page'; -export { - Breadcrumb, - BreadcrumbList, - BreadcrumbItem, - BreadcrumbLink, - BreadcrumbSeparator, - BreadcrumbEllipsis, - BreadcrumbPage, -}; +export default Object.assign( Breadcrumb, { + List: BreadcrumbList, + Item: BreadcrumbItem, + Link: BreadcrumbLink, + Separator: BreadcrumbSeparator, + Ellipsis: BreadcrumbEllipsis, + Page: BreadcrumbPage +} ); \ No newline at end of file diff --git a/src/components/breadcrumb/breadcrumb.stories.js b/src/components/breadcrumb/breadcrumb.stories.js index 2b6f3792..13536547 100644 --- a/src/components/breadcrumb/breadcrumb.stories.js +++ b/src/components/breadcrumb/breadcrumb.stories.js @@ -1,14 +1,6 @@ // Breadcrumb.stories.js -import { - Breadcrumb, - BreadcrumbList, - BreadcrumbItem, - BreadcrumbLink, - BreadcrumbSeparator, - BreadcrumbEllipsis, - BreadcrumbPage, -} from './breadcrumb'; // Adjust the import path as needed +import Breadcrumb from './breadcrumb'; // Adjust the import path as needed export default { title: 'Atoms/Breadcrumb', @@ -35,23 +27,23 @@ export default { const Template = ( args ) => ( - - - Home - - - - - - - - Category - - - - Current Page - - + + + Home + + + + + + + + Category + + + + Current Page + + ); diff --git a/src/components/breadcrumb/index.js b/src/components/breadcrumb/index.js index 47706fff..8df86190 100644 --- a/src/components/breadcrumb/index.js +++ b/src/components/breadcrumb/index.js @@ -1,9 +1 @@ -export { - Breadcrumb, - BreadcrumbList, - BreadcrumbItem, - BreadcrumbLink, - BreadcrumbSeparator, - BreadcrumbEllipsis, - BreadcrumbPage, -} from './breadcrumb.jsx'; +export { default } from './breadcrumb.jsx'; \ No newline at end of file diff --git a/src/components/breadcrumb/readme.md b/src/components/breadcrumb/readme.md index 244a06a0..e84c5e8a 100644 --- a/src/components/breadcrumb/readme.md +++ b/src/components/breadcrumb/readme.md @@ -12,21 +12,21 @@ - **default value:** `sm` - **description:** The size of the breadcrumb, can be `sm` or `md`. -## `BreadcrumbList` Props +## `Breadcrumb.List` Props - **Description:** Wrapper for the breadcrumb list. ### children - **type:** `ReactNode` - **description:** The child items to be rendered as a list of breadcrumb items. -## `BreadcrumbItem` Props +## `Breadcrumb.Item` Props - **Description:** Represents a single breadcrumb item. ### children - **type:** `ReactNode` - **description:** The content for the breadcrumb item, usually containing a link or static text. -## `BreadcrumbLink` Props +## `Breadcrumb.Link` Props - **Description:** The clickable link within a breadcrumb item. ### href (required) @@ -46,7 +46,7 @@ - **default value:** `a` - **description:** Used as a wrapper for breadcrumb links. Defaults to an anchor `('a')`, but can be customized with components like `Link` from React Router. -## `BreadcrumbSeparator` Props +## `Breadcrumb.Separator` Props - **Description:** Separator used between breadcrumb items. ### type (optional) @@ -57,7 +57,7 @@ ## `BreadcrumbEllipsis` Props - **Description:** Displays an ellipsis when the breadcrumb list is too long, or represents hidden items. -## `BreadcrumbPage` Props +## `Breadcrumb.Page` Props - **Description:** Represents the current page in the breadcrumb trail, displayed as static text instead of a link. ### children @@ -68,15 +68,17 @@ ```jsx - - Home - - - - Category - - - - Current Page - + + + Home + + + + Category + + + + Current Page + + diff --git a/src/components/index.js b/src/components/index.js index c33e606a..494a1f67 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,7 +1,7 @@ export { default as Button } from './button/index'; export { default as Switch } from './switch/index'; export { default as Checkbox } from './checkbox/index'; -export { RadioButtonGroup, RadioButton } from './radio-button-group/index'; +export { default as RadioButton } from './radio-button-group/index'; export { default as Badge } from './badge/index'; export { default as TextArea } from './textarea/index'; export { default as Avatar } from './avatar/index'; @@ -22,15 +22,7 @@ export { default as ProgressSteps } from './progress-steps/index'; export { default as Skeleton } from './skeleton/index'; export { default as Menu } from './menu-item/index'; export { default as Sidebar } from './sidebar/index'; -export { - Breadcrumb, - BreadcrumbList, - BreadcrumbItem, - BreadcrumbLink, - BreadcrumbSeparator, - BreadcrumbEllipsis, - BreadcrumbPage, -} from './breadcrumb/index'; +export { default as Breadcrumb } from './breadcrumb/index'; export { default as Dialog } from './dialog/index'; export { default as Topbar } from './topbar/index'; export { default as Drawer } from './drawer/index'; diff --git a/src/components/radio-button-group/index.js b/src/components/radio-button-group/index.js index a201542f..7d2edabe 100644 --- a/src/components/radio-button-group/index.js +++ b/src/components/radio-button-group/index.js @@ -1 +1 @@ -export { RadioButtonGroup, RadioButton } from './radio-button-group.jsx'; +export { default } from './radio-button-group.jsx'; diff --git a/src/components/radio-button-group/radio-button-group.jsx b/src/components/radio-button-group/radio-button-group.jsx index bbf97782..70fa86a1 100644 --- a/src/components/radio-button-group/radio-button-group.jsx +++ b/src/components/radio-button-group/radio-button-group.jsx @@ -140,6 +140,7 @@ const RadioButtonGroup = ( { ); }; +RadioButtonGroup.displayName = 'RadioButton.Group'; const RadioButtonComponent = ( { @@ -363,7 +364,7 @@ const RadioButtonComponent = ( ); }; const RadioButton = forwardRef( RadioButtonComponent ); -RadioButton.displayName = 'RadioButton'; +RadioButton.displayName = 'RadioButton.Button'; const ButtonGroupItem = ( { id, @@ -454,4 +455,7 @@ const ButtonGroupItem = ( { ); }; -export { RadioButtonGroup, RadioButton }; +export default Object.assign( RadioButton, { + Group: RadioButtonGroup, + Button: RadioButton, +} ); \ No newline at end of file diff --git a/src/components/radio-button-group/radio-button-group.stories.js b/src/components/radio-button-group/radio-button-group.stories.js index 22a1f319..d4fa8b1f 100644 --- a/src/components/radio-button-group/radio-button-group.stories.js +++ b/src/components/radio-button-group/radio-button-group.stories.js @@ -1,11 +1,11 @@ import React, { useState } from 'react'; -import { RadioButtonGroup, RadioButton } from './radio-button-group.jsx'; +import RadioButton from './radio-button-group.jsx'; import { Plus, Smile } from 'lucide-react'; import Badge from '../badge/badge.jsx'; export default { - title: 'Atoms/RadioButtonGroup', - component: RadioButtonGroup, + title: 'Atoms/RadioButton', + component: RadioButton.Group, parameters: { layout: 'centered', }, @@ -106,7 +106,7 @@ export default { }, label: { description: - '`RadioButton` : Object containing heading and description for each RadioButton.', + '`RadioButton.Button` : Object containing heading and description for each RadioButton.', control: { type: 'object', }, @@ -122,7 +122,7 @@ export default { }, }, borderOn: { - description: '`RadioButton` : Adds a border around the button.', + description: '`RadioButton.Button` : Adds a border around the button.', control: 'boolean', table: { type: { summary: 'boolean' }, @@ -130,7 +130,7 @@ export default { }, }, useSwitch: { - description: '`RadioButton` :Uses a switch for selection.', + description: '`RadioButton.Button` :Uses a switch for selection.', control: 'boolean', table: { type: { summary: 'boolean' }, @@ -139,14 +139,14 @@ export default { }, icon: { description: - '`RadioButton` :Custom icon component to be displayed.', + '`RadioButton.Button` :Custom icon component to be displayed.', control: { type: 'text', }, defaultValue: null, }, inlineIcon: { - description: '`RadioButton` : Positions icon inline to the label.', + description: '`RadioButton.Button` : Positions icon inline to the label.', control: 'boolean', table: { type: { summary: 'boolean' }, @@ -154,7 +154,7 @@ export default { }, }, hideSelection: { - description: '`RadioButton` : Positions icon inline to the label.', + description: '`RadioButton.Button` : Positions icon inline to the label.', control: 'boolean', table: { type: { summary: 'boolean' }, @@ -162,7 +162,7 @@ export default { }, }, reversePosition: { - description: '`RadioButton` : Positions icon inline to the label.', + description: '`RadioButton.Button` : Positions icon inline to the label.', control: 'boolean', table: { type: { summary: 'boolean' }, @@ -170,14 +170,14 @@ export default { }, }, badgeItem: { - description: '`RadioButton` : Badge Item to be displayed.', + description: '`RadioButton.Button` : Badge Item to be displayed.', control: { type: 'text', }, defaultValue: null, }, disabled: { - description: '`RadioButton` : Disables radio button.', + description: '`RadioButton.Button` : Disables radio button.', control: 'boolean', table: { type: { summary: 'boolean' }, @@ -191,7 +191,7 @@ const Template = ( args ) => { const [ value, setValue ] = useState( args.value || args.defaultValue ); return ( - { > { [ 1, 2, 3, 4, 5, 6 ].map( ( num ) => args.style === 'tile' ? ( - - + ) : ( - { /> ) ) } - + ); }; diff --git a/src/components/radio-button-group/readme.md b/src/components/radio-button-group/readme.md index d7d72405..ce329f3e 100644 --- a/src/components/radio-button-group/readme.md +++ b/src/components/radio-button-group/readme.md @@ -1,6 +1,6 @@ # Radio Button Group -## `RadioButtonGroup` Props +## `RadioButton.Group` Props - **Description:** Wrapper for the button group. ### name (optional) @@ -65,7 +65,7 @@ - **description:** The `multiSelection` prop allows selecting more than one option when set to `true`. -## `RadioButton` Props +## `RadioButton.Button` Props ### id (optional) - **type:** `string` @@ -131,7 +131,7 @@ The label also accepts a React component. - **default value:** `false` - **description:** Used Switch as radio button when set to `true`. -## `RadioButton` Props of Style `tile` +## `RadioButton.Button` Props of Style `tile` ### id (optional) - **type:** `string` @@ -158,25 +158,25 @@ The label also accepts a React component. ### Example: ``` - console.log( value ) } > - - - - + + + + - - - - - + + + + ``` \ No newline at end of file From 4c8870377950b6a676bb2a3fffba01639ac71412 Mon Sep 17 00:00:00 2001 From: BabuTechBsf Date: Wed, 2 Oct 2024 20:06:23 +0530 Subject: [PATCH 2/2] added lints --- src/components/breadcrumb/breadcrumb.jsx | 4 ++-- src/components/breadcrumb/index.js | 2 +- .../radio-button-group/radio-button-group.jsx | 2 +- .../radio-button-group/radio-button-group.stories.js | 12 ++++++++---- 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/breadcrumb/breadcrumb.jsx b/src/components/breadcrumb/breadcrumb.jsx index 3297904f..308a625d 100644 --- a/src/components/breadcrumb/breadcrumb.jsx +++ b/src/components/breadcrumb/breadcrumb.jsx @@ -112,5 +112,5 @@ export default Object.assign( Breadcrumb, { Link: BreadcrumbLink, Separator: BreadcrumbSeparator, Ellipsis: BreadcrumbEllipsis, - Page: BreadcrumbPage -} ); \ No newline at end of file + Page: BreadcrumbPage, +} ); diff --git a/src/components/breadcrumb/index.js b/src/components/breadcrumb/index.js index 8df86190..f939ff31 100644 --- a/src/components/breadcrumb/index.js +++ b/src/components/breadcrumb/index.js @@ -1 +1 @@ -export { default } from './breadcrumb.jsx'; \ No newline at end of file +export { default } from './breadcrumb.jsx'; diff --git a/src/components/radio-button-group/radio-button-group.jsx b/src/components/radio-button-group/radio-button-group.jsx index 70fa86a1..0f99cb8e 100644 --- a/src/components/radio-button-group/radio-button-group.jsx +++ b/src/components/radio-button-group/radio-button-group.jsx @@ -458,4 +458,4 @@ const ButtonGroupItem = ( { export default Object.assign( RadioButton, { Group: RadioButtonGroup, Button: RadioButton, -} ); \ No newline at end of file +} ); diff --git a/src/components/radio-button-group/radio-button-group.stories.js b/src/components/radio-button-group/radio-button-group.stories.js index d4fa8b1f..6275ded7 100644 --- a/src/components/radio-button-group/radio-button-group.stories.js +++ b/src/components/radio-button-group/radio-button-group.stories.js @@ -122,7 +122,8 @@ export default { }, }, borderOn: { - description: '`RadioButton.Button` : Adds a border around the button.', + description: + '`RadioButton.Button` : Adds a border around the button.', control: 'boolean', table: { type: { summary: 'boolean' }, @@ -146,7 +147,8 @@ export default { defaultValue: null, }, inlineIcon: { - description: '`RadioButton.Button` : Positions icon inline to the label.', + description: + '`RadioButton.Button` : Positions icon inline to the label.', control: 'boolean', table: { type: { summary: 'boolean' }, @@ -154,7 +156,8 @@ export default { }, }, hideSelection: { - description: '`RadioButton.Button` : Positions icon inline to the label.', + description: + '`RadioButton.Button` : Positions icon inline to the label.', control: 'boolean', table: { type: { summary: 'boolean' }, @@ -162,7 +165,8 @@ export default { }, }, reversePosition: { - description: '`RadioButton.Button` : Positions icon inline to the label.', + description: + '`RadioButton.Button` : Positions icon inline to the label.', control: 'boolean', table: { type: { summary: 'boolean' },