Skip to content

Commit

Permalink
refactor: 💡 type refactoring
Browse files Browse the repository at this point in the history
✅ Closes: #358
  • Loading branch information
CrisGrud committed Oct 20, 2023
1 parent f17de66 commit 9339a24
Show file tree
Hide file tree
Showing 9 changed files with 69 additions and 64 deletions.
6 changes: 3 additions & 3 deletions src/components/BreadCrumbs/index.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const Template: ComponentStory<typeof BreadCrumbs> = (args) => <BreadCrumbs {...

export const Primary = Template.bind({});
Primary.args = {
link: [
links: [
{
label: "page1",
href: "",
Expand All @@ -59,7 +59,7 @@ SeparatorCustom.args = { ...Primary.args, separator: "<" };

export const WithIcon = Template.bind({});
WithIcon.args = {
link: [
links: [
{
label: "page1",
href: "",
Expand All @@ -81,7 +81,7 @@ WithIcon.args = {
export const Localized = Template.bind({});
Localized.args = {
localized: true,
link: [
links: [
{
label: "locale.page1",
href: "",
Expand Down
6 changes: 3 additions & 3 deletions src/components/BreadCrumbs/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const DEFAULT_TEST_OPTIONS: ITestOptions<BreadCrumbsType> = {
domNode: "nav",
localized: true,
props: {
link: [{ label: "PAGE", href: "" }],
links: [{ label: "PAGE", href: "" }],
onClick: jest.fn(),
},
};
Expand Down Expand Up @@ -39,7 +39,7 @@ describe("BreadCrumbs test suite:", () => {
it("icon", () => {
const { element } = getBreadCrumbsTestable({
props: {
link: [
links: [
{ label: "HOME", href: "", icon: Icons.home },
{ label: "PAGE", href: "", icon: Icons.business },
],
Expand All @@ -54,7 +54,7 @@ describe("BreadCrumbs test suite:", () => {
const onClickHandler = jest.fn();
const { element, wrapper } = getBreadCrumbsTestable({
props: {
link: [
links: [
{ label: "HOME", href: "" },
{ label: "PAGE", href: "" },
],
Expand Down
6 changes: 3 additions & 3 deletions src/components/BreadCrumbs/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const DATA_CY_DEFAULT = "bredCrumbs";
export const DATA_CY_SHORTCUT = "breadCrumbs";
export const LOCALIZABLE_PROPS: ILocalizableProperty[] = [{ name: "link.label", type: "any[]" }];

const BreadCrumbs: FC<BreadCrumbsType> = ({ dataCy = DATA_CY_DEFAULT, link, onClick, size = "small", separator }) => {
const BreadCrumbs: FC<BreadCrumbsType> = ({ dataCy = DATA_CY_DEFAULT, links, onClick, size = "small", separator }) => {
const typographySize = useMemo(() => {
if (size === "small") {
return "label";
Expand All @@ -22,8 +22,8 @@ const BreadCrumbs: FC<BreadCrumbsType> = ({ dataCy = DATA_CY_DEFAULT, link, onCl

return (
<MUIBreadcrumbs data-cy={dataCy} aria-label="breadcrumb" separator={separator}>
{link.map((i, index) => {
return link.length - 1 !== index ? (
{links.map((i, index) => {
return links.length - 1 !== index ? (
<Link
key={index}
underline="hover"
Expand Down
4 changes: 2 additions & 2 deletions src/components/Stepper/index.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const Template: ComponentStory<typeof Stepper> = (args) => <Stepper {...args} da

export const Primary = Template.bind({});
Primary.args = {
stepList: [
stepsList: [
{ label: "STEP1", content: "CONTENT PAGE 1" },
{ label: "STEP2", content: "CONTENT PAGE 2" },
{ label: "STEP3", content: <Progress type="Linear" /> },
Expand All @@ -52,7 +52,7 @@ ActiveStep.args = { ...Primary.args, activeStep: 2 };
export const Localized = Template.bind({});
Localized.args = {
localized: true,
stepList: [
stepsList: [
{ label: "locale.step1", content: "CONTENT PAGE 1" },
{ label: "locale.step2", content: "CONTENT PAGE 2" },
{ label: "locale.step3", content: <Progress type="Linear" /> },
Expand Down
2 changes: 1 addition & 1 deletion src/components/Stepper/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const DEFAULT_TEST_OPTIONS: ITestOptions<StepperType> = {
domNode: "span",
localized: true,
props: {
stepList: [
stepsList: [
{ label: "PAGE", content: "CONTENT1" },
{ label: "PAGE2", content: "CONTENT2" },
{ label: "PAGE3w", content: "CONTENT1" },
Expand Down
8 changes: 4 additions & 4 deletions src/components/Stepper/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const LOCALIZABLE_PROPS: ILocalizableProperty[] = [

const Stepper: FC<StepperType> = ({
dataCy = DATA_CY_DEFAULT,
stepList,
stepsList,
labelBackButton = "Back",
labelNextButton = "Next",
labelFinishButton = "Finish",
Expand All @@ -33,14 +33,14 @@ const Stepper: FC<StepperType> = ({
<Grid container spacing={2} sx={{ flexGrow: 1 }}>
<Grid item xs={12}>
<MUIStepper data-cy={dataCy} activeStep={activeStep} alternativeLabel>
{stepList.map((i, index) => (
{stepsList.map((i, index) => (
<Step key={index}>
<StepLabel>{i.label}</StepLabel>
</Step>
))}
</MUIStepper>
</Grid>
{activeStep === stepList.length ? (
{activeStep === stepsList.length ? (
<Grid container spacing={2} sx={{ pt: 2 }}>
<Grid item xs={12}>
{finishContent}
Expand All @@ -54,7 +54,7 @@ const Stepper: FC<StepperType> = ({
) : (
<Grid container spacing={2} sx={{ pt: 2 }}>
<Grid item xs={12}>
{stepList[activeStep].content && stepList[activeStep].content}
{stepsList[activeStep].content && stepsList[activeStep].content}
</Grid>
<Grid item xs={12}>
<div style={{ display: "flex", justifyContent: "space-between" }}>
Expand Down
45 changes: 25 additions & 20 deletions src/types/BreadCrumbs.ts
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
import { IBase, ILocalizable } from "./Base";
import { ILocalizable } from "./Base";
import { IIconElement } from "./Icon";

export type BreadCrumbsType = IBase &
ILocalizable & {
/**
* List of Links
*/
link: { label: string; href: string; icon?: IIconElement }[];
/**
* Callback for click events
*/
onClick: (href: string) => void;
/**
* Text size
*/
size?: "small" | "medium" | "large";
/**
* Text size
*/
separator?: "-" | "/" | "<" | ">" | "|";
};
export type BreadCrumbsType = ILocalizable & {
/**
* List of Links
*/
links: LinkType[];
/**
* Callback for click events
*/
onClick: (href: string) => void;
/**
* Text size
*/
size?: "small" | "medium" | "large";
/**
* Text size
*/
separator?: "-" | "/" | "<" | ">" | "|";
};

export type LinkType = {
label: string;
href: string;
icon?: IIconElement;
};
23 changes: 11 additions & 12 deletions src/types/DateTimePicker.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import { IBase, ILocalizable } from "./Base";
import { ILocalizable } from "./Base";

export type DateTimePickerType = IBase &
ILocalizable & {
label: string;
value?: Date | string | number;
onAccept?: (value: Date | undefined | null) => void;
ampm?: boolean;
mobileView?: boolean;
timeZone?: string;
format?: string;
timeView?: "hrs" | "min" | "sec";
};
export type DateTimePickerType = ILocalizable & {
label: string;
value?: Date | string | number;
onAccept?: (value: Date | undefined | null) => void;
ampm?: boolean;
mobileView?: boolean;
timeZone?: string;
format?: string;
timeView?: "hrs" | "min" | "sec";
};

export type viewType = "year" | "month" | "day" | "hours" | "minutes" | "seconds";
33 changes: 17 additions & 16 deletions src/types/Stepper.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
import { IBase, ILocalizable } from "./Base";
import { ILocalizable } from "./Base";

export type StepperType = IBase &
ILocalizable & {
stepList: {
label: string;
content?: React.ReactNode;
}[];
labelBackButton?: string;
labelNextButton?: string;
labelFinishButton?: string;
activeStep: number;
onNextClick: () => void;
onBackClick: () => void;
onFinishClick: () => void;
finishContent: React.ReactNode;
};
export type StepperType = ILocalizable & {
stepsList: StepListType[];
labelBackButton?: string;
labelNextButton?: string;
labelFinishButton?: string;
activeStep: number;
onNextClick: () => void;
onBackClick: () => void;
onFinishClick: () => void;
finishContent: React.ReactNode;
};

export type StepListType = {
label: string;
content?: React.ReactNode;
};

0 comments on commit 9339a24

Please sign in to comment.