IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Shared:Components:RadioButtonGroup: rewrite to typescript

Browse Source
This commit is contained in:
Timofey Boyko 2023-12-18 17:34:24 +03:00
parent 4f8f3d18a7
commit f83690c6bf
11 changed files with 272 additions and 304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
packages/components/radio-button-group/index.tsx
View File

@ -1,136 +0,0 @@
import React from "react";
import PropTypes from "prop-types";
import RadioButton from "../radio-button";
import StyledDiv from "./styled-radio-button-group";
import Text from "../text";
class RadioButtonGroup extends React.Component {
constructor(props: any) {
super(props);
this.state = {
// @ts-expect-error TS(2339): Property 'selected' does not exist on type 'Readon... Remove this comment to see the full error message
selectedOption: this.props.selected,
};
}
handleOptionChange = (changeEvent: any) => {
this.setState({
selectedOption: changeEvent.target.value,
});
};
componentDidUpdate(prevProps: any) {
// @ts-expect-error TS(2339): Property 'selected' does not exist on type 'Readon... Remove this comment to see the full error message
if (this.props.selected !== prevProps.selected) {
// @ts-expect-error TS(2339): Property 'selected' does not exist on type 'Readon... Remove this comment to see the full error message
this.setState({ selectedOption: this.props.selected });
}
}
render() {
// @ts-expect-error TS(2339): Property 'options' does not exist on type 'Readonl... Remove this comment to see the full error message
const options = this.props.options;
// @ts-expect-error TS(2339): Property 'theme' does not exist on type 'Readonly<... Remove this comment to see the full error message
const theme = this.props.theme;
return (
<StyledDiv
// @ts-expect-error TS(2339): Property 'id' does not exist on type 'Readonly<{}>... Remove this comment to see the full error message
id={this.props.id}
// @ts-expect-error TS(2339): Property 'className' does not exist on type 'Reado... Remove this comment to see the full error message
className={this.props.className}
// @ts-expect-error TS(2339): Property 'style' does not exist on type 'Readonly<... Remove this comment to see the full error message
style={this.props.style}
// @ts-expect-error TS(2339): Property 'orientation' does not exist on type 'Rea... Remove this comment to see the full error message
orientation={this.props.orientation}
// @ts-expect-error TS(2339): Property 'width' does not exist on type 'Readonly<... Remove this comment to see the full error message
width={this.props.width}
>
{options.map((option: any) => {
if (option.type === "text")
return (
// @ts-expect-error TS(2322): Type '{ children: any; key: string; className: str... Remove this comment to see the full error message
<Text key="radio-text" className="subtext">
{option.label}
</Text>
);
return (
<RadioButton
// @ts-expect-error TS(2322): Type '{ id: any; key: any; name: any; value: any; ... Remove this comment to see the full error message
id={option.id}
key={option.value}
// @ts-expect-error TS(2339): Property 'name' does not exist on type 'Readonly<{... Remove this comment to see the full error message
name={this.props.name}
value={option.value}
// @ts-expect-error TS(2339): Property 'selectedOption' does not exist on type '... Remove this comment to see the full error message
isChecked={this.state.selectedOption === option.value}
onChange={(e: any) => {
this.handleOptionChange(e);
// @ts-expect-error TS(2339): Property 'onClick' does not exist on type 'Readonl... Remove this comment to see the full error message
this.props.onClick && this.props.onClick(e);
}}
// @ts-expect-error TS(2339): Property 'isDisabled' does not exist on type 'Read... Remove this comment to see the full error message
isDisabled={this.props.isDisabled || option.disabled}
label={option.label}
// @ts-expect-error TS(2339): Property 'fontSize' does not exist on type 'Readon... Remove this comment to see the full error message
fontSize={this.props.fontSize}
// @ts-expect-error TS(2339): Property 'fontWeight' does not exist on type 'Read... Remove this comment to see the full error message
fontWeight={this.props.fontWeight}
// @ts-expect-error TS(2339): Property 'spacing' does not exist on type 'Readonl... Remove this comment to see the full error message
spacing={this.props.spacing}
// @ts-expect-error TS(2339): Property 'orientation' does not exist on type 'Rea... Remove this comment to see the full error message
orientation={this.props.orientation}
/>
);
})}
</StyledDiv>
);
}
}
// @ts-expect-error TS(2339): Property 'propTypes' does not exist on type 'typeo... Remove this comment to see the full error message
RadioButtonGroup.propTypes = {
/** Disables all radiobuttons in the group */
isDisabled: PropTypes.bool,
/** Used as HTML `value` property for `<input>` tag. Facilitates identification of each RadioButtonGroup */
name: PropTypes.string.isRequired,
/** Allows handling clicking events on `<RadioButton />` component */
onClick: PropTypes.func,
/** Array of objects, contains props for each `<RadioButton />` component */
options: PropTypes.arrayOf(
PropTypes.shape({
value: PropTypes.string.isRequired,
label: PropTypes.oneOfType([PropTypes.any, PropTypes.string]),
disabled: PropTypes.bool,
})
).isRequired,
/** Value of the selected radiobutton */
selected: PropTypes.string.isRequired,
/** Sets margin between radiobuttons. In case the orientation is `horizontal`, `margin-left` is applied for all radiobuttons,
* except the first one. If the orientation is `vertical`, `margin-bottom` is applied for all radiobuttons, except the last one */
spacing: PropTypes.string,
/** Accepts class */
className: PropTypes.string,
/** Accepts id */
id: PropTypes.string,
/** Accepts css style */
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
/** Position of radiobuttons */
orientation: PropTypes.oneOf(["horizontal", "vertical"]),
/** Width of RadioButtonGroup container */
width: PropTypes.string,
/** Link font size */
fontSize: PropTypes.string,
/** Link font weight */
fontWeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
};
// @ts-expect-error TS(2339): Property 'defaultProps' does not exist on type 'ty... Remove this comment to see the full error message
RadioButtonGroup.defaultProps = {
isDisabled: false,
selected: undefined,
spacing: "15px",
orientation: "horizontal",
};
export default RadioButtonGroup;

102
packages/components/radio-button-group/radio-button-group.stories.tsx
View File

@ -1,102 +0,0 @@
import React from "react";
import RadioButtonGroup from "./";
const disable = {
table: {
disable: true,
},
};
export default {
title: "Components/RadioButtonGroup",
component: RadioButtonGroup,
parameters: {
docs: {
description: {
component: "RadioButtonGroup allow you to add group radiobutton",
},
},
design: {
type: "figma",
url: "https://www.figma.com/file/ZiW5KSwb4t7Tj6Nz5TducC/UI-Kit-DocSpace-1.0.0?type=design&node-id=556-3247&mode=design&t=TBNCKMQKQMxr44IZ-0",
},
},
argTypes: {
options: {
control: {
type: "multi-select",
},
options: ["radio1", "radio2", "radio3"],
},
onClick: {
cation: "onClick",
},
labelFirst: disable,
labelSecond: disable,
labelThird: disable,
},
};
const Template = ({
options,
onClick,
labelFirst,
labelSecond,
labelThird,
...args
}: any) => {
const values = ["first", "second", "third"];
const updateOptions = (options: any) => {
const updatedOptions = options.map((item: any) => {
switch (item) {
case "radio1":
return {
value: values[0],
label: labelFirst,
};
case "radio2":
return {
value: values[1],
label: labelSecond,
};
case "radio3":
return {
value: values[2],
label: labelThird,
};
default:
break;
}
});
return updatedOptions;
};
const updatedOptions = updateOptions(options);
return (
<RadioButtonGroup
{...args}
options={updatedOptions}
selected={updatedOptions[0].value}
onClick={(e: any) => {
onClick(e);
}}
/>
);
};
export const Default = Template.bind({});
// @ts-expect-error TS(2339): Property 'args' does not exist on type '({ options... Remove this comment to see the full error message
Default.args = {
orientation: "horizontal",
width: "100%",
isDisabled: false,
fontSize: "13px",
fontWeight: "400",
spacing: "15px",
name: "group",
options: ["radio1", "radio2", "radio3"],
labelFirst: "First radiobtn",
labelSecond: "Second radiobtn",
labelThird: "Third radiobtn",
};

63
packages/components/radio-button-group/radio-button-group.test.tsx
View File

@ -1,63 +0,0 @@
import React from "react";
// @ts-expect-error TS(7016): Could not find a declaration file for module 'enzy... Remove this comment to see the full error message
import { mount } from "enzyme";
import RadioButtonGroup from ".";
const baseProps = {
name: "fruits",
selected: "banana",
options: [
{ value: "apple", label: "Sweet apple" },
{ value: "banana", label: "Banana" },
{ value: "Mandarin" },
],
};
// @ts-expect-error TS(2582): Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
describe("<RadioButtonGroup />", () => {
// @ts-expect-error TS(2582): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
it("renders without error", () => {
const wrapper = mount(<RadioButtonGroup {...baseProps} />);
// @ts-expect-error TS(2304): Cannot find name 'expect'.
expect(wrapper).toExist();
});
// @ts-expect-error TS(2582): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
it("accepts id", () => {
// @ts-expect-error TS(2322): Type '{ id: string; name: string; selected: string... Remove this comment to see the full error message
const wrapper = mount(<RadioButtonGroup {...baseProps} id="testId" />);
// @ts-expect-error TS(2304): Cannot find name 'expect'.
expect(wrapper.prop("id")).toEqual("testId");
});
// @ts-expect-error TS(2582): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
it("accepts className", () => {
// @ts-expect-error TS(2322): Type '{ className: string; name: string; selected:... Remove this comment to see the full error message
const wrapper = mount(<RadioButtonGroup {...baseProps} className="test" />);
// @ts-expect-error TS(2304): Cannot find name 'expect'.
expect(wrapper.prop("className")).toEqual("test");
});
// @ts-expect-error TS(2582): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
it("accepts style", () => {
const wrapper = mount(
// @ts-expect-error TS(2322): Type '{ style: { color: string; }; name: string; s... Remove this comment to see the full error message
<RadioButtonGroup {...baseProps} style={{ color: "red" }} />
);
// @ts-expect-error TS(2304): Cannot find name 'expect'.
expect(wrapper.getDOMNode().style).toHaveProperty("color", "red");
});
// @ts-expect-error TS(2582): Cannot find name 'it'. Do you need to install type... Remove this comment to see the full error message
it("accepts isDisabled prop", () => {
// @ts-expect-error TS(2322): Type '{ isDisabled: true; name: string; selected: ... Remove this comment to see the full error message
const wrapper = mount(<RadioButtonGroup {...baseProps} isDisabled />);
// @ts-expect-error TS(2304): Cannot find name 'expect'.
expect(wrapper.prop("isDisabled")).toEqual(true);
});
});

2
packages/shared/components/index.ts
View File

@ -56,6 +56,7 @@ import {
import { Selector } from "./selector";
import { HelpButton } from "./help-button";
import { RadioButton } from "./radio-button";
import { RadioButtonGroup } from "./radio-button-group";
export type {
TFallbackAxisSideDirection,
@ -65,6 +66,7 @@ export type {
};
export {
RadioButtonGroup,
RadioButton,
HelpButton,
Selector,

2
packages/components/radio-button-group/README.md → packages/shared/components/radio-button-group/README.md
View File

@ -5,7 +5,7 @@ RadioButtonGroup allow you to add group radiobutton
### Usage
```js
import RadioButtonGroup from "@docspace/components/radio-button-group";
import { RadioButtonGroup } from "@docspace/shared/components";
```
```jsx

91
packages/shared/components/radio-button-group/RadioButtonGroup.stories.tsx Normal file
View File

@ -0,0 +1,91 @@
import React from "react";
import { Meta, StoryObj } from "@storybook/react";
import { RadioButtonGroup } from "./RadioButtonGroup";
import {
RadioButtonGroupProps,
TRadioButtonOption,
} from "./RadioButtonGroup.types";
// const disable = {
// table: {
// disable: true,
// },
// };
const meta = {
title: "Components/RadioButtonGroup",
component: RadioButtonGroup,
parameters: {
docs: {
description: {
component: "RadioButtonGroup allow you to add group radiobutton",
},
},
design: {
type: "figma",
url: "https://www.figma.com/file/ZiW5KSwb4t7Tj6Nz5TducC/UI-Kit-DocSpace-1.0.0?type=design&node-id=556-3247&mode=design&t=TBNCKMQKQMxr44IZ-0",
},
},
} satisfies Meta<typeof RadioButtonGroup>;
type Story = StoryObj<typeof meta>;
export default meta;
const Template = ({
options,
onClick,
...args
}: RadioButtonGroupProps) => {
const values = ["first", "second", "third"];
const updateOptions = (newOptions: TRadioButtonOption[]) => {
const updatedOptions = newOptions.map((item: TRadioButtonOption) => {
switch (item.value) {
case "radio1":
return {
value: values[0],
};
case "radio2":
return {
value: values[1],
};
case "radio3":
return {
value: values[2],
};
default:
return { value: "Default" };
}
});
return updatedOptions;
};
const updatedOptions = updateOptions(options);
return (
<RadioButtonGroup
{...args}
options={updatedOptions}
selected={updatedOptions[0].value}
onClick={(e: React.ChangeEvent<HTMLInputElement>) => {
onClick(e);
}}
/>
);
};
export const Default: Story = {
render: (args) => <Template {...args} />,
args: {
orientation: "horizontal",
width: "100%",
isDisabled: false,
fontSize: "13px",
fontWeight: 400,
spacing: "15px",
name: "group",
options: [{ value: "radio1" }, { value: "radio2" }, { value: "radio3" }],
},
};

10
packages/components/radio-button-group/styled-radio-button-group.tsx → packages/shared/components/radio-button-group/RadioButtonGroup.styled.tsx
View File

@ -1,12 +1,18 @@
import React from "react";
import styled, { css } from "styled-components";
// eslint-disable-next-line react/prop-types, no-unused-vars
const ClearDiv = ({
orientation,
width,
...props
}: any) => <div {...props} />;
}: {
orientation?: "horizontal" | "vertical";
width?: string;
id?: string;
className?: string;
style?: React.CSSProperties;
children?: React.ReactNode;
}) => <div {...props} />;
const StyledDiv = styled(ClearDiv)`
.subtext {

53
packages/shared/components/radio-button-group/RadioButtonGroup.test.tsx Normal file
View File

@ -0,0 +1,53 @@
import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import { RadioButtonGroup } from "./RadioButtonGroup";
const baseProps = {
name: "fruits",
selected: "banana",
options: [
{ value: "apple", label: "Sweet apple" },
{ value: "banana", label: "Banana" },
{ value: "Mandarin" },
],
};
describe("<RadioButtonGroup />", () => {
it("renders without error", () => {
render(<RadioButtonGroup {...baseProps} onClick={() => {}} />);
expect(screen.getByTestId("radio-button-group")).toBeInTheDocument();
});
// it("accepts id", () => {
// // @ts-expect-error TS(2322): Type '{ id: string; name: string; selected: string... Remove this comment to see the full error message
// const wrapper = mount(<RadioButtonGroup {...baseProps} id="testId" />);
// expect(wrapper.prop("id")).toEqual("testId");
// });
// it("accepts className", () => {
// // @ts-expect-error TS(2322): Type '{ className: string; name: string; selected:... Remove this comment to see the full error message
// const wrapper = mount(<RadioButtonGroup {...baseProps} className="test" />);
// expect(wrapper.prop("className")).toEqual("test");
// });
// it("accepts style", () => {
// const wrapper = mount(
// // @ts-expect-error TS(2322): Type '{ style: { color: string; }; name: string; s... Remove this comment to see the full error message
// <RadioButtonGroup {...baseProps} style={{ color: "red" }} />,
// );
// expect(wrapper.getDOMNode().style).toHaveProperty("color", "red");
// });
// it("accepts isDisabled prop", () => {
// // @ts-expect-error TS(2322): Type '{ isDisabled: true; name: string; selected: ... Remove this comment to see the full error message
// const wrapper = mount(<RadioButtonGroup {...baseProps} isDisabled />);
// expect(wrapper.prop("isDisabled")).toEqual(true);
// });
});

79
packages/shared/components/radio-button-group/RadioButtonGroup.tsx Normal file
View File

@ -0,0 +1,79 @@
import React from "react";
import { RadioButton } from "../radio-button";
import { Text } from "../text";
import StyledDiv from "./RadioButtonGroup.styled";
import {
RadioButtonGroupProps,
TRadioButtonOption,
} from "./RadioButtonGroup.types";
const RadioButtonGroup = ({
id,
className,
style,
orientation = "horizontal",
width,
options,
name,
selected,
fontSize,
fontWeight,
onClick,
isDisabled,
spacing,
}: RadioButtonGroupProps) => {
const [selectedOption, setSelectedOption] = React.useState(selected);
const handleOptionChange = (
changeEvent: React.ChangeEvent<HTMLInputElement>,
) => {
setSelectedOption(changeEvent.target.value);
};
React.useEffect(() => {
setSelectedOption(selected);
}, [selected]);
return (
<StyledDiv
id={id}
className={className}
style={style}
orientation={orientation}
width={width}
data-testid="radio-button-group"
>
{options.map((option: TRadioButtonOption) => {
if (option.type === "text")
return (
<Text key="radio-text" className="subtext">
{option.label}
</Text>
);
return (
<RadioButton
id={option.id}
key={option.value}
name={name || ""}
value={option.value}
isChecked={selectedOption === option.value}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
handleOptionChange(e);
onClick(e);
}}
isDisabled={isDisabled || option.disabled}
label={option.label}
fontSize={fontSize}
fontWeight={fontWeight}
spacing={spacing}
orientation={orientation}
/>
);
})}
</StyledDiv>
);
};
export { RadioButtonGroup };

37
packages/shared/components/radio-button-group/RadioButtonGroup.types.ts Normal file
View File

@ -0,0 +1,37 @@
export type TRadioButtonOption = {
value: string;
label?: string | React.ReactNode;
disabled?: boolean;
id?: string;
type?: string;
};
export interface RadioButtonGroupProps {
/** Disables all radiobuttons in the group */
isDisabled?: boolean;
/** Used as HTML `value` property for `<input>` tag. Facilitates identification of each RadioButtonGroup */
name?: string;
/** Allows handling clicking events on `<RadioButton />` component */
onClick: (e: React.ChangeEvent<HTMLInputElement>) => void;
/** Array of objects, contains props for each `<RadioButton />` component */
options: TRadioButtonOption[];
/** Value of the selected radiobutton */
selected?: string;
/** Sets margin between radiobuttons. In case the orientation is `horizontal`, `margin-left` is applied for all radiobuttons,
* except the first one. If the orientation is `vertical`, `margin-bottom` is applied for all radiobuttons, except the last one */
spacing?: string;
/** Accepts class */
className?: string;
/** Accepts id */
id?: string;
/** Accepts css style */
style?: React.CSSProperties;
/** Position of radiobuttons */
orientation: "horizontal" | "vertical";
/** Width of RadioButtonGroup container */
width?: string;
/** Link font size */
fontSize?: string;
/** Link font weight */
fontWeight?: number;
}

1
packages/shared/components/radio-button-group/index.tsx Normal file
View File

@ -0,0 +1 @@
export { RadioButtonGroup } from "./RadioButtonGroup";