From 61db3272d267e590080cbfdd8e6176fda1a94045 Mon Sep 17 00:00:00 2001 From: ancientbag Date: Tue, 10 Sep 2024 16:32:45 +0500 Subject: [PATCH 01/13] feat: radiogroup wip --- components/radio/.npmignore | 1 + components/radio/README.md | 1 + components/radio/package.json | 38 +++++++++++++++ components/radio/rollup.config.js | 15 ++++++ components/radio/src/Radio.stories.tsx | 26 +++++++++++ components/radio/src/Radio.types.ts | 35 ++++++++++++++ components/radio/src/assets/circle_dots.svg | 4 ++ .../radio/src/assets/circle_information.svg | 4 ++ .../radio/src/assets/circle_question.svg | 4 ++ components/radio/src/components/Radio.tsx | 46 +++++++++++++++++++ .../radio/src/components/RadioGroup.tsx | 13 ++++++ .../src/components/RadioGroupContext.tsx | 22 +++++++++ components/radio/src/index.ts | 0 components/radio/src/useRadioGroup.ts | 23 ++++++++++ components/radio/tsconfig.json | 10 ++++ 15 files changed, 242 insertions(+) create mode 100644 components/radio/.npmignore create mode 100644 components/radio/README.md create mode 100644 components/radio/package.json create mode 100644 components/radio/rollup.config.js create mode 100644 components/radio/src/Radio.stories.tsx create mode 100644 components/radio/src/Radio.types.ts create mode 100644 components/radio/src/assets/circle_dots.svg create mode 100644 components/radio/src/assets/circle_information.svg create mode 100644 components/radio/src/assets/circle_question.svg create mode 100644 components/radio/src/components/Radio.tsx create mode 100644 components/radio/src/components/RadioGroup.tsx create mode 100644 components/radio/src/components/RadioGroupContext.tsx create mode 100644 components/radio/src/index.ts create mode 100644 components/radio/src/useRadioGroup.ts create mode 100644 components/radio/tsconfig.json diff --git a/components/radio/.npmignore b/components/radio/.npmignore new file mode 100644 index 00000000..85de9cf9 --- /dev/null +++ b/components/radio/.npmignore @@ -0,0 +1 @@ +src diff --git a/components/radio/README.md b/components/radio/README.md new file mode 100644 index 00000000..7dc4e013 --- /dev/null +++ b/components/radio/README.md @@ -0,0 +1 @@ +# `@byndyusoft-ui/radio` diff --git a/components/radio/package.json b/components/radio/package.json new file mode 100644 index 00000000..a0fe1122 --- /dev/null +++ b/components/radio/package.json @@ -0,0 +1,38 @@ +{ + "name": "@byndyusoft-ui/radio", + "version": "0.0.1", + "description": "Byndyusoft UI Radio React Component", + "keywords": [ + "byndyusoft", + "byndyusoft-ui", + "react", + "radio" + ], + "author": "Denis Timashev ", + "homepage": "https://github.com/Byndyusoft/ui/tree/master/components/portal#readme", + "license": "ISC", + "main": "dist/index.js", + "types": "dist/index.d.ts", + "repository": { + "type": "git", + "url": "git+https://github.com/Byndyusoft/ui.git" + }, + "scripts": { + "build": "rollup --config", + "clean": "rimraf dist", + "lint": "eslint src --config ../../eslint.config.js", + "test": "jest --config ../../jest.config.js --roots components/portal/src", + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook" + }, + "bugs": { + "url": "https://github.com/Byndyusoft/ui/issues" + }, + "publishConfig": { + "access": "public" + }, + "peerDependencies": { + "react": ">=17", + "react-dom": ">=17" + } +} diff --git a/components/radio/rollup.config.js b/components/radio/rollup.config.js new file mode 100644 index 00000000..b14566e7 --- /dev/null +++ b/components/radio/rollup.config.js @@ -0,0 +1,15 @@ +import typescript from '@rollup/plugin-typescript'; +import baseConfig from '../../rollup.base.config'; + +export default { + ...baseConfig, + input: ['src/index.ts'], + plugins: [ + ...baseConfig.plugins, + typescript({ + tsconfig: './tsconfig.json', + module: 'ESNext', + exclude: ['src/*.stories.tsx', 'src/*.tests.tsx', 'node_modules'] + }) + ] +}; diff --git a/components/radio/src/Radio.stories.tsx b/components/radio/src/Radio.stories.tsx new file mode 100644 index 00000000..d6197dc3 --- /dev/null +++ b/components/radio/src/Radio.stories.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import cn from 'classnames'; +import { Story } from '@storybook/react'; +import RadioGroup from './components/RadioGroup'; +import Radio from './components/Radio'; + +import { ReactComponent as DotsIconSVG } from './assets/circle_dots.svg'; +import { ReactComponent as QuestionIconSVG } from './assets/circle_question.svg'; +import { ReactComponent as InformationIconSVG } from './assets/circle_information.svg'; + +const DefaultStory: Story = () => ( +
+ + + + + +
+); + +export const Default = DefaultStory.bind({}); + +export default { + title: 'components/RadioGroup', + component: RadioGroup +}; diff --git a/components/radio/src/Radio.types.ts b/components/radio/src/Radio.types.ts new file mode 100644 index 00000000..a5de4b24 --- /dev/null +++ b/components/radio/src/Radio.types.ts @@ -0,0 +1,35 @@ +import { ReactNode } from "react"; + +export type TOnChange = (value: string) => void; + +export interface IRadioProps { + value: string; + label?: string; + children?: ReactNode; +} + +export interface IRadioGroupProps { + value: string; + children: ReactNode; + name: string; + onChange?: TOnChange; +} + +export interface IUseRadioGroupState { + name: string; + value: string; + onChange?: TOnChange; +} + +export interface IRadioGroupState { + name: string; + value: string; + setValue: (value: string) => void; +} + +export interface IRadioGroupContextProviderProps { + name: string; + value: string; + children: ReactNode + onChange?: TOnChange; +} \ No newline at end of file diff --git a/components/radio/src/assets/circle_dots.svg b/components/radio/src/assets/circle_dots.svg new file mode 100644 index 00000000..8971e96c --- /dev/null +++ b/components/radio/src/assets/circle_dots.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/components/radio/src/assets/circle_information.svg b/components/radio/src/assets/circle_information.svg new file mode 100644 index 00000000..a5be7590 --- /dev/null +++ b/components/radio/src/assets/circle_information.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/components/radio/src/assets/circle_question.svg b/components/radio/src/assets/circle_question.svg new file mode 100644 index 00000000..9ba3f398 --- /dev/null +++ b/components/radio/src/assets/circle_question.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/components/radio/src/components/Radio.tsx b/components/radio/src/components/Radio.tsx new file mode 100644 index 00000000..bfa851c6 --- /dev/null +++ b/components/radio/src/components/Radio.tsx @@ -0,0 +1,46 @@ +import React, { useCallback } from 'react'; +import { IRadioProps } from '../Radio.types'; +import { useRadioGroupContext } from './RadioGroupContext'; + +const Radio = ({ value, label, children }: IRadioProps): JSX.Element => { + const { name, value: groupValue, setValue } = useRadioGroupContext(); + + const onChangeHandler = useCallback( + (event: React.ChangeEvent) => { + setValue(event.target.value); + }, + [setValue] + ); + + if (children) { + return ( +
+ + +
+ ); + } + + return ( +
+ + +
+ ); +}; + +export default Radio; diff --git a/components/radio/src/components/RadioGroup.tsx b/components/radio/src/components/RadioGroup.tsx new file mode 100644 index 00000000..dbbbc55f --- /dev/null +++ b/components/radio/src/components/RadioGroup.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { IRadioGroupProps } from '../Radio.types'; +import { RadioGroupContextProvider } from './RadioGroupContext'; + +const RadioGroup = ({ name, value, children }: IRadioGroupProps): JSX.Element => { + return ( + + {children} + + ); +}; + +export default RadioGroup; diff --git a/components/radio/src/components/RadioGroupContext.tsx b/components/radio/src/components/RadioGroupContext.tsx new file mode 100644 index 00000000..8480b21f --- /dev/null +++ b/components/radio/src/components/RadioGroupContext.tsx @@ -0,0 +1,22 @@ +import React, { createContext, useContext } from 'react'; +import { IRadioGroupContextProviderProps, IRadioGroupState } from '../Radio.types'; +import useRadioGroup from '../useRadioGroup'; + +const RadioGroupContext = createContext({} as IRadioGroupState); + +export function useRadioGroupContext(): IRadioGroupState { + const context = useContext(RadioGroupContext); + + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + if (context === undefined) { + throw new Error('useRadioGroupContext must be used within the RadioGroupContextProvider'); + } + + return context; +} + +export const RadioGroupContextProvider = ({ name, value, onChange, children }: IRadioGroupContextProviderProps) => { + const radioGroupState = useRadioGroup({ name, value, onChange }); + + return {children}; +}; diff --git a/components/radio/src/index.ts b/components/radio/src/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/components/radio/src/useRadioGroup.ts b/components/radio/src/useRadioGroup.ts new file mode 100644 index 00000000..140de6bc --- /dev/null +++ b/components/radio/src/useRadioGroup.ts @@ -0,0 +1,23 @@ +import { useCallback, useState } from 'react'; +import { IUseRadioGroupState, IRadioGroupState } from './Radio.types'; + +const useRadioGroup = ({ name, value, onChange }: IUseRadioGroupState): IRadioGroupState => { + const [_name] = useState(name); + const [_value, setValue] = useState(value); + + const setValueHandler = useCallback((targetValue: string) => { + setValue(targetValue); + + if(onChange){ + onChange(targetValue) + } + },[onChange]) + + return { + name: _name, + value: _value, + setValue: setValueHandler + }; +}; + +export default useRadioGroup; diff --git a/components/radio/tsconfig.json b/components/radio/tsconfig.json new file mode 100644 index 00000000..98f42aee --- /dev/null +++ b/components/radio/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "declaration": true, + "declarationDir": "dist", + "outDir": "dist", + "module": "commonjs" + }, + "include": ["../../types.d.ts", "src"] +} From 2cd8df29f1e6a5f52f67591e337f7d771d3c51be Mon Sep 17 00:00:00 2001 From: ancientbag Date: Wed, 11 Sep 2024 15:18:44 +0500 Subject: [PATCH 02/13] feat: radio wip --- components/{radio => radio-group}/.npmignore | 0 components/radio-group/README.md | 1 + .../{radio => radio-group}/package.json | 6 ++-- .../{radio => radio-group}/rollup.config.js | 0 .../src/RadioGroup.types.ts} | 13 ++++--- .../src/components/Radio.tsx | 22 ++---------- .../src/components/RadioGroup.tsx | 2 +- .../src/components/RadioGroupContext.tsx | 12 +++---- components/radio-group/src/index.ts | 6 ++++ .../radio-group/src/stories/CustomRadio.tsx | 29 ++++++++++++++++ .../radio-group/src/stories/Radio.stories.tsx | 34 +++++++++++++++++++ .../radio-group/src/useRadioGroupState.ts | 26 ++++++++++++++ .../{radio => radio-group}/tsconfig.json | 0 components/radio/README.md | 1 - components/radio/src/Radio.stories.tsx | 26 -------------- components/radio/src/assets/circle_dots.svg | 4 --- .../radio/src/assets/circle_information.svg | 4 --- .../radio/src/assets/circle_question.svg | 4 --- components/radio/src/index.ts | 0 components/radio/src/useRadioGroup.ts | 23 ------------- 20 files changed, 115 insertions(+), 98 deletions(-) rename components/{radio => radio-group}/.npmignore (100%) create mode 100644 components/radio-group/README.md rename components/{radio => radio-group}/package.json (89%) rename components/{radio => radio-group}/rollup.config.js (100%) rename components/{radio/src/Radio.types.ts => radio-group/src/RadioGroup.types.ts} (73%) rename components/{radio => radio-group}/src/components/Radio.tsx (53%) rename components/{radio => radio-group}/src/components/RadioGroup.tsx (86%) rename components/{radio => radio-group}/src/components/RadioGroupContext.tsx (50%) create mode 100644 components/radio-group/src/index.ts create mode 100644 components/radio-group/src/stories/CustomRadio.tsx create mode 100644 components/radio-group/src/stories/Radio.stories.tsx create mode 100644 components/radio-group/src/useRadioGroupState.ts rename components/{radio => radio-group}/tsconfig.json (100%) delete mode 100644 components/radio/README.md delete mode 100644 components/radio/src/Radio.stories.tsx delete mode 100644 components/radio/src/assets/circle_dots.svg delete mode 100644 components/radio/src/assets/circle_information.svg delete mode 100644 components/radio/src/assets/circle_question.svg delete mode 100644 components/radio/src/index.ts delete mode 100644 components/radio/src/useRadioGroup.ts diff --git a/components/radio/.npmignore b/components/radio-group/.npmignore similarity index 100% rename from components/radio/.npmignore rename to components/radio-group/.npmignore diff --git a/components/radio-group/README.md b/components/radio-group/README.md new file mode 100644 index 00000000..42e48c16 --- /dev/null +++ b/components/radio-group/README.md @@ -0,0 +1 @@ +# `@byndyusoft-ui/radio-group` diff --git a/components/radio/package.json b/components/radio-group/package.json similarity index 89% rename from components/radio/package.json rename to components/radio-group/package.json index a0fe1122..d9621ebf 100644 --- a/components/radio/package.json +++ b/components/radio-group/package.json @@ -1,7 +1,7 @@ { "name": "@byndyusoft-ui/radio", "version": "0.0.1", - "description": "Byndyusoft UI Radio React Component", + "description": "Byndyusoft UI RadioGroup React Component", "keywords": [ "byndyusoft", "byndyusoft-ui", @@ -9,7 +9,7 @@ "radio" ], "author": "Denis Timashev ", - "homepage": "https://github.com/Byndyusoft/ui/tree/master/components/portal#readme", + "homepage": "https://github.com/Byndyusoft/ui/tree/master/components/radio-group#readme", "license": "ISC", "main": "dist/index.js", "types": "dist/index.d.ts", @@ -21,7 +21,7 @@ "build": "rollup --config", "clean": "rimraf dist", "lint": "eslint src --config ../../eslint.config.js", - "test": "jest --config ../../jest.config.js --roots components/portal/src", + "test": "jest --config ../../jest.config.js --roots components/radio-group/src", "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook" }, diff --git a/components/radio/rollup.config.js b/components/radio-group/rollup.config.js similarity index 100% rename from components/radio/rollup.config.js rename to components/radio-group/rollup.config.js diff --git a/components/radio/src/Radio.types.ts b/components/radio-group/src/RadioGroup.types.ts similarity index 73% rename from components/radio/src/Radio.types.ts rename to components/radio-group/src/RadioGroup.types.ts index a5de4b24..f7f5ec8e 100644 --- a/components/radio/src/Radio.types.ts +++ b/components/radio-group/src/RadioGroup.types.ts @@ -1,11 +1,10 @@ -import { ReactNode } from "react"; +import { ReactNode } from 'react'; export type TOnChange = (value: string) => void; export interface IRadioProps { value: string; - label?: string; - children?: ReactNode; + children: ReactNode; } export interface IRadioGroupProps { @@ -15,13 +14,13 @@ export interface IRadioGroupProps { onChange?: TOnChange; } -export interface IUseRadioGroupState { +export interface IUseRadioGroupStateProps { name: string; value: string; onChange?: TOnChange; } -export interface IRadioGroupState { +export interface IUseRadioGroup { name: string; value: string; setValue: (value: string) => void; @@ -30,6 +29,6 @@ export interface IRadioGroupState { export interface IRadioGroupContextProviderProps { name: string; value: string; - children: ReactNode + children: ReactNode; onChange?: TOnChange; -} \ No newline at end of file +} diff --git a/components/radio/src/components/Radio.tsx b/components/radio-group/src/components/Radio.tsx similarity index 53% rename from components/radio/src/components/Radio.tsx rename to components/radio-group/src/components/Radio.tsx index bfa851c6..05a5ae4c 100644 --- a/components/radio/src/components/Radio.tsx +++ b/components/radio-group/src/components/Radio.tsx @@ -1,8 +1,8 @@ import React, { useCallback } from 'react'; -import { IRadioProps } from '../Radio.types'; +import { IRadioProps } from '../RadioGroup.types'; import { useRadioGroupContext } from './RadioGroupContext'; -const Radio = ({ value, label, children }: IRadioProps): JSX.Element => { +const Radio = ({ value, children }: IRadioProps): JSX.Element => { const { name, value: groupValue, setValue } = useRadioGroupContext(); const onChangeHandler = useCallback( @@ -12,22 +12,6 @@ const Radio = ({ value, label, children }: IRadioProps): JSX.Element => { [setValue] ); - if (children) { - return ( -
- - -
- ); - } - return (
{ checked={groupValue === value} onChange={onChangeHandler} /> - +
); }; diff --git a/components/radio/src/components/RadioGroup.tsx b/components/radio-group/src/components/RadioGroup.tsx similarity index 86% rename from components/radio/src/components/RadioGroup.tsx rename to components/radio-group/src/components/RadioGroup.tsx index dbbbc55f..13b817a3 100644 --- a/components/radio/src/components/RadioGroup.tsx +++ b/components/radio-group/src/components/RadioGroup.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { IRadioGroupProps } from '../Radio.types'; +import { IRadioGroupProps } from '../RadioGroup.types'; import { RadioGroupContextProvider } from './RadioGroupContext'; const RadioGroup = ({ name, value, children }: IRadioGroupProps): JSX.Element => { diff --git a/components/radio/src/components/RadioGroupContext.tsx b/components/radio-group/src/components/RadioGroupContext.tsx similarity index 50% rename from components/radio/src/components/RadioGroupContext.tsx rename to components/radio-group/src/components/RadioGroupContext.tsx index 8480b21f..2a2b5336 100644 --- a/components/radio/src/components/RadioGroupContext.tsx +++ b/components/radio-group/src/components/RadioGroupContext.tsx @@ -1,10 +1,10 @@ import React, { createContext, useContext } from 'react'; -import { IRadioGroupContextProviderProps, IRadioGroupState } from '../Radio.types'; -import useRadioGroup from '../useRadioGroup'; +import { IRadioGroupContextProviderProps, IUseRadioGroup } from '../RadioGroup.types'; +import useRadioGroupState from '../useRadioGroupState'; -const RadioGroupContext = createContext({} as IRadioGroupState); +const RadioGroupContext = createContext({} as IUseRadioGroup); -export function useRadioGroupContext(): IRadioGroupState { +export function useRadioGroupContext(): IUseRadioGroup { const context = useContext(RadioGroupContext); // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition @@ -16,7 +16,7 @@ export function useRadioGroupContext(): IRadioGroupState { } export const RadioGroupContextProvider = ({ name, value, onChange, children }: IRadioGroupContextProviderProps) => { - const radioGroupState = useRadioGroup({ name, value, onChange }); + const radioGroupState = useRadioGroupState({ name, value, onChange }); - return {children}; + return {children}; }; diff --git a/components/radio-group/src/index.ts b/components/radio-group/src/index.ts new file mode 100644 index 00000000..98edb6c1 --- /dev/null +++ b/components/radio-group/src/index.ts @@ -0,0 +1,6 @@ +export { default as RadioGroup } from './components/RadioGroup'; +export { default as Radio } from './components/Radio'; +export { default as useRadioGroupState } from './useRadioGroupState'; +export { RadioGroupContextProvider, useRadioGroupContext } from './components/RadioGroupContext'; + +export { IRadioGroupProps, IRadioProps, IUseRadioGroupStateProps, IUseRadioGroup } from './RadioGroup.types'; diff --git a/components/radio-group/src/stories/CustomRadio.tsx b/components/radio-group/src/stories/CustomRadio.tsx new file mode 100644 index 00000000..bd848aac --- /dev/null +++ b/components/radio-group/src/stories/CustomRadio.tsx @@ -0,0 +1,29 @@ +import React, { ReactNode, useCallback } from 'react'; +import { useRadioGroupContext } from '../components/RadioGroupContext'; + +const CustomRadioComponent = ({ value, children }: { value: string; children: ReactNode }): JSX.Element => { + const { name, value: groupValue, setValue } = useRadioGroupContext(); + + const onChangeHandler = useCallback( + (event: React.ChangeEvent) => { + setValue(event.target.value); + }, + [setValue] + ); + + return ( +
+ + +
+ ); +}; + +export default CustomRadioComponent; diff --git a/components/radio-group/src/stories/Radio.stories.tsx b/components/radio-group/src/stories/Radio.stories.tsx new file mode 100644 index 00000000..dc193b6d --- /dev/null +++ b/components/radio-group/src/stories/Radio.stories.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { Story } from '@storybook/react'; +import RadioGroup from '../components/RadioGroup'; +import Radio from '../components/Radio'; +import CustomRadioComponent from './CustomRadio'; + +const DefaultStory: Story = () => ( +
+ + 🍎 Apple + 🍌 Banana + 🍍 Pineapple + +
+); + +export const Default = DefaultStory.bind({}); + +const WithCustomRadioStory: Story = () => ( +
+ + 😊 Happy + 😐 Neutral + 😔 Upset + +
+); + +export const WithCustomRadio = WithCustomRadioStory.bind({}); + +export default { + title: 'components/RadioGroup', + component: RadioGroup +}; diff --git a/components/radio-group/src/useRadioGroupState.ts b/components/radio-group/src/useRadioGroupState.ts new file mode 100644 index 00000000..5ad1111f --- /dev/null +++ b/components/radio-group/src/useRadioGroupState.ts @@ -0,0 +1,26 @@ +import { useCallback, useState } from 'react'; +import { IUseRadioGroupStateProps, IUseRadioGroup } from './RadioGroup.types'; + +const useRadioGroupState = ({ name, value, onChange }: IUseRadioGroupStateProps): IUseRadioGroup => { + const [_name] = useState(name); + const [_value, setValue] = useState(value); + + const setValueHandler = useCallback( + (targetValue: string) => { + setValue(targetValue); + + if (onChange) { + onChange(targetValue); + } + }, + [onChange] + ); + + return { + name: _name, + value: _value, + setValue: setValueHandler + }; +}; + +export default useRadioGroupState; diff --git a/components/radio/tsconfig.json b/components/radio-group/tsconfig.json similarity index 100% rename from components/radio/tsconfig.json rename to components/radio-group/tsconfig.json diff --git a/components/radio/README.md b/components/radio/README.md deleted file mode 100644 index 7dc4e013..00000000 --- a/components/radio/README.md +++ /dev/null @@ -1 +0,0 @@ -# `@byndyusoft-ui/radio` diff --git a/components/radio/src/Radio.stories.tsx b/components/radio/src/Radio.stories.tsx deleted file mode 100644 index d6197dc3..00000000 --- a/components/radio/src/Radio.stories.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import cn from 'classnames'; -import { Story } from '@storybook/react'; -import RadioGroup from './components/RadioGroup'; -import Radio from './components/Radio'; - -import { ReactComponent as DotsIconSVG } from './assets/circle_dots.svg'; -import { ReactComponent as QuestionIconSVG } from './assets/circle_question.svg'; -import { ReactComponent as InformationIconSVG } from './assets/circle_information.svg'; - -const DefaultStory: Story = () => ( -
- - - - - -
-); - -export const Default = DefaultStory.bind({}); - -export default { - title: 'components/RadioGroup', - component: RadioGroup -}; diff --git a/components/radio/src/assets/circle_dots.svg b/components/radio/src/assets/circle_dots.svg deleted file mode 100644 index 8971e96c..00000000 --- a/components/radio/src/assets/circle_dots.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/components/radio/src/assets/circle_information.svg b/components/radio/src/assets/circle_information.svg deleted file mode 100644 index a5be7590..00000000 --- a/components/radio/src/assets/circle_information.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/components/radio/src/assets/circle_question.svg b/components/radio/src/assets/circle_question.svg deleted file mode 100644 index 9ba3f398..00000000 --- a/components/radio/src/assets/circle_question.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/components/radio/src/index.ts b/components/radio/src/index.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/components/radio/src/useRadioGroup.ts b/components/radio/src/useRadioGroup.ts deleted file mode 100644 index 140de6bc..00000000 --- a/components/radio/src/useRadioGroup.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { useCallback, useState } from 'react'; -import { IUseRadioGroupState, IRadioGroupState } from './Radio.types'; - -const useRadioGroup = ({ name, value, onChange }: IUseRadioGroupState): IRadioGroupState => { - const [_name] = useState(name); - const [_value, setValue] = useState(value); - - const setValueHandler = useCallback((targetValue: string) => { - setValue(targetValue); - - if(onChange){ - onChange(targetValue) - } - },[onChange]) - - return { - name: _name, - value: _value, - setValue: setValueHandler - }; -}; - -export default useRadioGroup; From d77935774742de273ec538d7421029e4c37f04f2 Mon Sep 17 00:00:00 2001 From: ancientbag Date: Wed, 11 Sep 2024 15:21:14 +0500 Subject: [PATCH 03/13] feat: story headings --- components/radio-group/src/stories/Radio.stories.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/radio-group/src/stories/Radio.stories.tsx b/components/radio-group/src/stories/Radio.stories.tsx index dc193b6d..339fbd62 100644 --- a/components/radio-group/src/stories/Radio.stories.tsx +++ b/components/radio-group/src/stories/Radio.stories.tsx @@ -6,6 +6,7 @@ import CustomRadioComponent from './CustomRadio'; const DefaultStory: Story = () => (
+ Fruit 🍎 Apple 🍌 Banana @@ -18,6 +19,7 @@ export const Default = DefaultStory.bind({}); const WithCustomRadioStory: Story = () => (
+ Mood 😊 Happy 😐 Neutral From fb91c5aeac63f35913371e263b1e863abb0af576 Mon Sep 17 00:00:00 2001 From: ancientbag Date: Fri, 4 Oct 2024 18:21:00 +0500 Subject: [PATCH 04/13] feat: radio props changes --- .../radio-group/src/RadioGroup.types.ts | 6 +-- .../radio-group/src/components/Radio.tsx | 17 +++---- .../radio-group/src/components/RadioGroup.tsx | 12 ++--- .../src/components/RadioGroupContext.tsx | 9 +++- .../radio-group/src/stories/Radio.stories.tsx | 50 +++++++++++-------- .../radio-group/src/useRadioGroupState.ts | 7 ++- 6 files changed, 55 insertions(+), 46 deletions(-) diff --git a/components/radio-group/src/RadioGroup.types.ts b/components/radio-group/src/RadioGroup.types.ts index f7f5ec8e..e18134da 100644 --- a/components/radio-group/src/RadioGroup.types.ts +++ b/components/radio-group/src/RadioGroup.types.ts @@ -8,7 +8,7 @@ export interface IRadioProps { } export interface IRadioGroupProps { - value: string; + initialValue: string; children: ReactNode; name: string; onChange?: TOnChange; @@ -16,7 +16,7 @@ export interface IRadioGroupProps { export interface IUseRadioGroupStateProps { name: string; - value: string; + initialValue: string; onChange?: TOnChange; } @@ -28,7 +28,7 @@ export interface IUseRadioGroup { export interface IRadioGroupContextProviderProps { name: string; - value: string; + initialValue: string; children: ReactNode; onChange?: TOnChange; } diff --git a/components/radio-group/src/components/Radio.tsx b/components/radio-group/src/components/Radio.tsx index 05a5ae4c..cb212c07 100644 --- a/components/radio-group/src/components/Radio.tsx +++ b/components/radio-group/src/components/Radio.tsx @@ -1,28 +1,27 @@ -import React, { useCallback } from 'react'; +import React, { useCallback, useMemo } from 'react'; import { IRadioProps } from '../RadioGroup.types'; import { useRadioGroupContext } from './RadioGroupContext'; const Radio = ({ value, children }: IRadioProps): JSX.Element => { const { name, value: groupValue, setValue } = useRadioGroupContext(); - const onChangeHandler = useCallback( - (event: React.ChangeEvent) => { - setValue(event.target.value); - }, - [setValue] - ); + const radioId = useMemo(() => `${name}-${value}`, [name, value]); + + const onChangeHandler = useCallback((event: React.ChangeEvent) => { + setValue(event.target.value); + }, []); return (
- +
); }; diff --git a/components/radio-group/src/components/RadioGroup.tsx b/components/radio-group/src/components/RadioGroup.tsx index 13b817a3..2a15487c 100644 --- a/components/radio-group/src/components/RadioGroup.tsx +++ b/components/radio-group/src/components/RadioGroup.tsx @@ -2,12 +2,10 @@ import React from 'react'; import { IRadioGroupProps } from '../RadioGroup.types'; import { RadioGroupContextProvider } from './RadioGroupContext'; -const RadioGroup = ({ name, value, children }: IRadioGroupProps): JSX.Element => { - return ( - - {children} - - ); -}; +const RadioGroup = ({ name, initialValue, children, onChange }: IRadioGroupProps): JSX.Element => ( + + {children} + +); export default RadioGroup; diff --git a/components/radio-group/src/components/RadioGroupContext.tsx b/components/radio-group/src/components/RadioGroupContext.tsx index 2a2b5336..6522fd4c 100644 --- a/components/radio-group/src/components/RadioGroupContext.tsx +++ b/components/radio-group/src/components/RadioGroupContext.tsx @@ -15,8 +15,13 @@ export function useRadioGroupContext(): IUseRadioGroup { return context; } -export const RadioGroupContextProvider = ({ name, value, onChange, children }: IRadioGroupContextProviderProps) => { - const radioGroupState = useRadioGroupState({ name, value, onChange }); +export const RadioGroupContextProvider = ({ + name, + initialValue, + onChange, + children +}: IRadioGroupContextProviderProps) => { + const radioGroupState = useRadioGroupState({ name, initialValue, onChange }); return {children}; }; diff --git a/components/radio-group/src/stories/Radio.stories.tsx b/components/radio-group/src/stories/Radio.stories.tsx index 339fbd62..cc9f673b 100644 --- a/components/radio-group/src/stories/Radio.stories.tsx +++ b/components/radio-group/src/stories/Radio.stories.tsx @@ -1,32 +1,40 @@ -import React from 'react'; +import React, { useCallback, useState } from 'react'; import { Story } from '@storybook/react'; import RadioGroup from '../components/RadioGroup'; import Radio from '../components/Radio'; import CustomRadioComponent from './CustomRadio'; -const DefaultStory: Story = () => ( -
- Fruit - - 🍎 Apple - 🍌 Banana - 🍍 Pineapple - -
-); +const DefaultStory: Story = () => { + const [value, setValue] = useState('apple'); + + return ( +
+ Fruit: {value} + + 🍎 Apple + 🍌 Banana + 🍍 Pineapple + +
+ ); +}; export const Default = DefaultStory.bind({}); -const WithCustomRadioStory: Story = () => ( -
- Mood - - 😊 Happy - 😐 Neutral - 😔 Upset - -
-); +const WithCustomRadioStory: Story = () => { + const [value, setValue] = useState('happy'); + + return ( +
+ Mood: {value} + + 😊 Happy + 😐 Neutral + 😔 Upset + +
+ ); +}; export const WithCustomRadio = WithCustomRadioStory.bind({}); diff --git a/components/radio-group/src/useRadioGroupState.ts b/components/radio-group/src/useRadioGroupState.ts index 5ad1111f..0b18519e 100644 --- a/components/radio-group/src/useRadioGroupState.ts +++ b/components/radio-group/src/useRadioGroupState.ts @@ -1,9 +1,8 @@ import { useCallback, useState } from 'react'; import { IUseRadioGroupStateProps, IUseRadioGroup } from './RadioGroup.types'; -const useRadioGroupState = ({ name, value, onChange }: IUseRadioGroupStateProps): IUseRadioGroup => { - const [_name] = useState(name); - const [_value, setValue] = useState(value); +const useRadioGroupState = ({ name, initialValue, onChange }: IUseRadioGroupStateProps): IUseRadioGroup => { + const [_value, setValue] = useState(initialValue); const setValueHandler = useCallback( (targetValue: string) => { @@ -17,7 +16,7 @@ const useRadioGroupState = ({ name, value, onChange }: IUseRadioGroupStateProps) ); return { - name: _name, + name, value: _value, setValue: setValueHandler }; From bfe06f6969c1b031c62369d5f16cdb1447316d45 Mon Sep 17 00:00:00 2001 From: ancientbag Date: Mon, 10 Feb 2025 18:35:53 +0500 Subject: [PATCH 05/13] feat: removed underscore for useRadioGroupState --- components/radio-group/src/useRadioGroupState.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/radio-group/src/useRadioGroupState.ts b/components/radio-group/src/useRadioGroupState.ts index 0b18519e..4bc129d7 100644 --- a/components/radio-group/src/useRadioGroupState.ts +++ b/components/radio-group/src/useRadioGroupState.ts @@ -2,7 +2,7 @@ import { useCallback, useState } from 'react'; import { IUseRadioGroupStateProps, IUseRadioGroup } from './RadioGroup.types'; const useRadioGroupState = ({ name, initialValue, onChange }: IUseRadioGroupStateProps): IUseRadioGroup => { - const [_value, setValue] = useState(initialValue); + const [value, setValue] = useState(initialValue); const setValueHandler = useCallback( (targetValue: string) => { @@ -17,7 +17,7 @@ const useRadioGroupState = ({ name, initialValue, onChange }: IUseRadioGroupStat return { name, - value: _value, + value, setValue: setValueHandler }; }; From 263b3bd7dd0457e4f2900a3dc29e0c4da9de78f5 Mon Sep 17 00:00:00 2001 From: ancientbag Date: Mon, 10 Feb 2025 18:36:40 +0500 Subject: [PATCH 06/13] feat: onChange shortend from useRadioGroupState --- components/radio-group/src/useRadioGroupState.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/components/radio-group/src/useRadioGroupState.ts b/components/radio-group/src/useRadioGroupState.ts index 4bc129d7..ce4b35c7 100644 --- a/components/radio-group/src/useRadioGroupState.ts +++ b/components/radio-group/src/useRadioGroupState.ts @@ -7,10 +7,7 @@ const useRadioGroupState = ({ name, initialValue, onChange }: IUseRadioGroupStat const setValueHandler = useCallback( (targetValue: string) => { setValue(targetValue); - - if (onChange) { - onChange(targetValue); - } + onChange?.(targetValue); }, [onChange] ); From 6f3dd4adfae787e2d20d75d3a89e1b68a0ef46f9 Mon Sep 17 00:00:00 2001 From: ancientbag Date: Mon, 10 Feb 2025 19:08:50 +0500 Subject: [PATCH 07/13] feat: radio component refactor --- .../radio-group/src/RadioGroup.types.ts | 12 ++++---- .../radio-group/src/components/Radio.tsx | 8 ++--- .../radio-group/src/components/RadioGroup.tsx | 4 +-- .../src/components/RadioGroupContext.tsx | 9 ++---- .../radio-group/src/stories/Radio.stories.tsx | 30 +++++++++++++++++-- .../radio-group/src/useRadioGroupState.ts | 16 ++++++---- 6 files changed, 52 insertions(+), 27 deletions(-) diff --git a/components/radio-group/src/RadioGroup.types.ts b/components/radio-group/src/RadioGroup.types.ts index e18134da..9414eb4d 100644 --- a/components/radio-group/src/RadioGroup.types.ts +++ b/components/radio-group/src/RadioGroup.types.ts @@ -8,16 +8,16 @@ export interface IRadioProps { } export interface IRadioGroupProps { - initialValue: string; + value: string; children: ReactNode; name: string; - onChange?: TOnChange; + onChange: TOnChange; } export interface IUseRadioGroupStateProps { name: string; - initialValue: string; - onChange?: TOnChange; + value: string; + onChange: TOnChange; } export interface IUseRadioGroup { @@ -28,7 +28,7 @@ export interface IUseRadioGroup { export interface IRadioGroupContextProviderProps { name: string; - initialValue: string; + value: string; children: ReactNode; - onChange?: TOnChange; + onChange: TOnChange; } diff --git a/components/radio-group/src/components/Radio.tsx b/components/radio-group/src/components/Radio.tsx index cb212c07..5d0c6fab 100644 --- a/components/radio-group/src/components/Radio.tsx +++ b/components/radio-group/src/components/Radio.tsx @@ -5,11 +5,11 @@ import { useRadioGroupContext } from './RadioGroupContext'; const Radio = ({ value, children }: IRadioProps): JSX.Element => { const { name, value: groupValue, setValue } = useRadioGroupContext(); - const radioId = useMemo(() => `${name}-${value}`, [name, value]); + const radioId = `${name}-${value}`; - const onChangeHandler = useCallback((event: React.ChangeEvent) => { + const handleInputChange = (event: React.ChangeEvent): void => { setValue(event.target.value); - }, []); + }; return (
@@ -19,7 +19,7 @@ const Radio = ({ value, children }: IRadioProps): JSX.Element => { id={radioId} value={value} checked={groupValue === value} - onChange={onChangeHandler} + onChange={handleInputChange} />
diff --git a/components/radio-group/src/components/RadioGroup.tsx b/components/radio-group/src/components/RadioGroup.tsx index 2a15487c..9bee485a 100644 --- a/components/radio-group/src/components/RadioGroup.tsx +++ b/components/radio-group/src/components/RadioGroup.tsx @@ -2,8 +2,8 @@ import React from 'react'; import { IRadioGroupProps } from '../RadioGroup.types'; import { RadioGroupContextProvider } from './RadioGroupContext'; -const RadioGroup = ({ name, initialValue, children, onChange }: IRadioGroupProps): JSX.Element => ( - +const RadioGroup = ({ name, value, children, onChange }: IRadioGroupProps): JSX.Element => ( + {children} ); diff --git a/components/radio-group/src/components/RadioGroupContext.tsx b/components/radio-group/src/components/RadioGroupContext.tsx index 6522fd4c..2a2b5336 100644 --- a/components/radio-group/src/components/RadioGroupContext.tsx +++ b/components/radio-group/src/components/RadioGroupContext.tsx @@ -15,13 +15,8 @@ export function useRadioGroupContext(): IUseRadioGroup { return context; } -export const RadioGroupContextProvider = ({ - name, - initialValue, - onChange, - children -}: IRadioGroupContextProviderProps) => { - const radioGroupState = useRadioGroupState({ name, initialValue, onChange }); +export const RadioGroupContextProvider = ({ name, value, onChange, children }: IRadioGroupContextProviderProps) => { + const radioGroupState = useRadioGroupState({ name, value, onChange }); return {children}; }; diff --git a/components/radio-group/src/stories/Radio.stories.tsx b/components/radio-group/src/stories/Radio.stories.tsx index cc9f673b..a0b19212 100644 --- a/components/radio-group/src/stories/Radio.stories.tsx +++ b/components/radio-group/src/stories/Radio.stories.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState } from 'react'; +import React, { useState } from 'react'; import { Story } from '@storybook/react'; import RadioGroup from '../components/RadioGroup'; import Radio from '../components/Radio'; @@ -10,7 +10,7 @@ const DefaultStory: Story = () => { return (
Fruit: {value} - + 🍎 Apple 🍌 Banana 🍍 Pineapple @@ -27,7 +27,7 @@ const WithCustomRadioStory: Story = () => { return (
Mood: {value} - + 😊 Happy 😐 Neutral 😔 Upset @@ -38,6 +38,30 @@ const WithCustomRadioStory: Story = () => { export const WithCustomRadio = WithCustomRadioStory.bind({}); +const ResetStateStory: Story = () => { + const [value, setValue] = useState('happy'); + + const handleResetState = (): void => { + setValue('happy'); + }; + + return ( +
+ Mood: {value} + + 😊 Happy + 😐 Neutral + 😔 Upset + + +
+ ); +}; + +export const ResetState = ResetStateStory.bind({}); + export default { title: 'components/RadioGroup', component: RadioGroup diff --git a/components/radio-group/src/useRadioGroupState.ts b/components/radio-group/src/useRadioGroupState.ts index ce4b35c7..8f87df5a 100644 --- a/components/radio-group/src/useRadioGroupState.ts +++ b/components/radio-group/src/useRadioGroupState.ts @@ -1,12 +1,18 @@ -import { useCallback, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { IUseRadioGroupStateProps, IUseRadioGroup } from './RadioGroup.types'; -const useRadioGroupState = ({ name, initialValue, onChange }: IUseRadioGroupStateProps): IUseRadioGroup => { - const [value, setValue] = useState(initialValue); +const useRadioGroupState = ({ name, value, onChange }: IUseRadioGroupStateProps): IUseRadioGroup => { + const [stateValue, setStateValue] = useState(value); + + useEffect(() => { + if (value !== stateValue) { + setStateValue(value); + } + }, [value]); const setValueHandler = useCallback( (targetValue: string) => { - setValue(targetValue); + setStateValue(targetValue); onChange?.(targetValue); }, [onChange] @@ -14,7 +20,7 @@ const useRadioGroupState = ({ name, initialValue, onChange }: IUseRadioGroupStat return { name, - value, + value: stateValue, setValue: setValueHandler }; }; From 9162eb6dc37d35317a16f96c10f581dbe0d96df6 Mon Sep 17 00:00:00 2001 From: ancientbag Date: Mon, 10 Feb 2025 19:10:45 +0500 Subject: [PATCH 08/13] feat: removed unused imports --- components/radio-group/src/components/Radio.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/radio-group/src/components/Radio.tsx b/components/radio-group/src/components/Radio.tsx index 5d0c6fab..6a76a584 100644 --- a/components/radio-group/src/components/Radio.tsx +++ b/components/radio-group/src/components/Radio.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useMemo } from 'react'; +import React from 'react'; import { IRadioProps } from '../RadioGroup.types'; import { useRadioGroupContext } from './RadioGroupContext'; From 4b9c06d63b55abbebc1ee2d707521bcf8ffe9df9 Mon Sep 17 00:00:00 2001 From: ancientbag Date: Mon, 10 Feb 2025 19:27:38 +0500 Subject: [PATCH 09/13] feat: replaced jsx.elements --- components/radio-group/src/components/Radio.tsx | 4 ++-- components/radio-group/src/components/RadioGroup.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/radio-group/src/components/Radio.tsx b/components/radio-group/src/components/Radio.tsx index 6a76a584..15e04916 100644 --- a/components/radio-group/src/components/Radio.tsx +++ b/components/radio-group/src/components/Radio.tsx @@ -1,8 +1,8 @@ -import React from 'react'; +import React, { ReactElement } from 'react'; import { IRadioProps } from '../RadioGroup.types'; import { useRadioGroupContext } from './RadioGroupContext'; -const Radio = ({ value, children }: IRadioProps): JSX.Element => { +const Radio = ({ value, children }: IRadioProps): ReactElement => { const { name, value: groupValue, setValue } = useRadioGroupContext(); const radioId = `${name}-${value}`; diff --git a/components/radio-group/src/components/RadioGroup.tsx b/components/radio-group/src/components/RadioGroup.tsx index 9bee485a..2087fbc3 100644 --- a/components/radio-group/src/components/RadioGroup.tsx +++ b/components/radio-group/src/components/RadioGroup.tsx @@ -1,8 +1,8 @@ -import React from 'react'; +import React, { ReactElement } from 'react'; import { IRadioGroupProps } from '../RadioGroup.types'; import { RadioGroupContextProvider } from './RadioGroupContext'; -const RadioGroup = ({ name, value, children, onChange }: IRadioGroupProps): JSX.Element => ( +const RadioGroup = ({ name, value, children, onChange }: IRadioGroupProps): ReactElement => ( {children} From c13d836342f8d7c4f64a7b6621b7712162311ff1 Mon Sep 17 00:00:00 2001 From: ancientbag Date: Mon, 10 Feb 2025 19:32:04 +0500 Subject: [PATCH 10/13] fix: set value with stateValue comparison --- components/radio-group/src/useRadioGroupState.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/radio-group/src/useRadioGroupState.ts b/components/radio-group/src/useRadioGroupState.ts index 8f87df5a..857da5a1 100644 --- a/components/radio-group/src/useRadioGroupState.ts +++ b/components/radio-group/src/useRadioGroupState.ts @@ -7,8 +7,9 @@ const useRadioGroupState = ({ name, value, onChange }: IUseRadioGroupStateProps) useEffect(() => { if (value !== stateValue) { setStateValue(value); + onChange?.(value); } - }, [value]); + }, [value, stateValue]); const setValueHandler = useCallback( (targetValue: string) => { From 0e5886655bd335219de866c62606beaeb67a7931 Mon Sep 17 00:00:00 2001 From: ancientbag Date: Wed, 5 Mar 2025 14:44:50 +0500 Subject: [PATCH 11/13] feat: isDisabled prop added --- components/radio-group/src/RadioGroup.types.ts | 1 + components/radio-group/src/components/Radio.tsx | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/components/radio-group/src/RadioGroup.types.ts b/components/radio-group/src/RadioGroup.types.ts index 9414eb4d..861729a3 100644 --- a/components/radio-group/src/RadioGroup.types.ts +++ b/components/radio-group/src/RadioGroup.types.ts @@ -4,6 +4,7 @@ export type TOnChange = (value: string) => void; export interface IRadioProps { value: string; + isDisabled?: boolean; children: ReactNode; } diff --git a/components/radio-group/src/components/Radio.tsx b/components/radio-group/src/components/Radio.tsx index 15e04916..6d19f097 100644 --- a/components/radio-group/src/components/Radio.tsx +++ b/components/radio-group/src/components/Radio.tsx @@ -2,7 +2,7 @@ import React, { ReactElement } from 'react'; import { IRadioProps } from '../RadioGroup.types'; import { useRadioGroupContext } from './RadioGroupContext'; -const Radio = ({ value, children }: IRadioProps): ReactElement => { +const Radio = ({ value, isDisabled, children }: IRadioProps): ReactElement => { const { name, value: groupValue, setValue } = useRadioGroupContext(); const radioId = `${name}-${value}`; @@ -20,6 +20,7 @@ const Radio = ({ value, children }: IRadioProps): ReactElement => { value={value} checked={groupValue === value} onChange={handleInputChange} + disabled={isDisabled} />
From c07c0e0732e23cab930277d69f62fc3f5943a3b1 Mon Sep 17 00:00:00 2001 From: ancientbag Date: Wed, 5 Mar 2025 14:56:47 +0500 Subject: [PATCH 12/13] test: basic tests --- .../radio-group/src/RadioGroup.tests.tsx | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 components/radio-group/src/RadioGroup.tests.tsx diff --git a/components/radio-group/src/RadioGroup.tests.tsx b/components/radio-group/src/RadioGroup.tests.tsx new file mode 100644 index 00000000..745d8ac0 --- /dev/null +++ b/components/radio-group/src/RadioGroup.tests.tsx @@ -0,0 +1,42 @@ +import React, { useState } from 'react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import RadioGroup from './components/RadioGroup'; +import Radio from './components/Radio'; + +const TestComponent = ({ selectedOption = 'apple' }: { selectedOption?: string }) => { + const [value, setValue] = useState(selectedOption); + + return ( + <> + Fruit: {value} + + Apple + Banana + Pineapple + + + ); +}; + +const setup = () => render(); + +describe('RadioGroup', () => { + test('renders radio group with labels', () => { + setup(); + + expect(screen.getByText('Apple')).toBeInTheDocument(); + expect(screen.getByText('Banana')).toBeInTheDocument(); + expect(screen.getByText('Pineapple')).toBeInTheDocument(); + }); + + test('selecting option is changing value', async () => { + setup(); + + const bananaRadio = screen.getByRole('radio', { name: 'Banana' }); + await userEvent.click(bananaRadio); + + expect(screen.getByText('Fruit: banana')).toBeInTheDocument(); + }); +}); From 9e3bc425e89b6a8303931ccbc9597fac3ff7542a Mon Sep 17 00:00:00 2001 From: ancientbag Date: Wed, 5 Mar 2025 14:57:29 +0500 Subject: [PATCH 13/13] feat: package lock upd --- package-lock.json | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/package-lock.json b/package-lock.json index 6852563a..caff8775 100644 --- a/package-lock.json +++ b/package-lock.json @@ -130,6 +130,15 @@ "react-dom": ">=17" } }, + "components/radio-group": { + "name": "@byndyusoft-ui/radio", + "version": "0.0.1", + "license": "ISC", + "peerDependencies": { + "react": ">=17", + "react-dom": ">=17" + } + }, "hooks/use-array": { "name": "@byndyusoft-ui/use-array", "version": "0.0.1", @@ -2319,6 +2328,10 @@ "resolved": "components/portal", "link": true }, + "node_modules/@byndyusoft-ui/radio": { + "resolved": "components/radio-group", + "link": true + }, "node_modules/@byndyusoft-ui/reset-css": { "resolved": "styles/reset-css", "link": true