Skip to content

Commit

Permalink
revert: "feat(components): add input text rebuild EARLY Iterations" (#…
Browse files Browse the repository at this point in the history 
…2315)

Revert "feat(components): add input text rebuild EARLY Iterations (#2213)"

This reverts commit f02601b.
  • Loading branch information
@MichaelParadis
MichaelParadis authored Jan 15, 2025
1 parent 304e776 commit ce22675
Show file tree
Hide file tree
Showing 14 changed files with 378 additions and 1,410 deletions.
10 changes: 0 additions & 10 deletions docs/components/InputText/InputText.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,13 +176,3 @@ If you need to capture the error message and render it outside of the component.
Read the
[InputValidation](../?path=/docs/components-forms-and-inputs-inputvalidation--docs)
documentation.

### Version 2 Shim (Expermimental)

If you need to use the version 2 shim, you can pass `version={2}` to the
`InputText` and provide the required props. Due to issues with typescript
[see](https://github.com/microsoft/TypeScript/issues/32447) the aria attributes
(and other props separated by `-`) are not typed correctly. This means that the
shim will not enforce the version to be set to `2` when using these props. As a
result version 1 usages will have these props appear in the intellisense but
they will not do anything.
265 changes: 2 additions & 263 deletions docs/components/InputText/Web.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import React, { useState } from "react";
import { ComponentMeta, ComponentStory } from "@storybook/react";
import { InputText } from "@jobber/components/InputText";
import { Button } from "@jobber/components/Button";
import { Content } from "@jobber/components/Content";
import { Grid } from "@jobber/components/Grid";
import { Box } from "@jobber/components/Box";

export default {
Expand All @@ -16,9 +14,7 @@ export default {
} as ComponentMeta<typeof InputText>;

const BasicTemplate: ComponentStory<typeof InputText> = args => {
const [value, setValue] = React.useState("");

return <InputText {...args} value={value} onChange={setValue} version={2} />;
return <InputText {...args} />;
};

export const Basic = BasicTemplate.bind({});
Expand Down Expand Up @@ -61,6 +57,7 @@ Toolbar.args = {

export const Readonly = BasicTemplate.bind({});
Readonly.args = {
defaultValue: "Rocinante",
readonly: true,
};

Expand All @@ -76,264 +73,6 @@ Clearable.args = {
clearable: "always",
};

export const VersionComparison = () => {
const [values, setValues] = React.useState({
basic: "",
multiline: "",
error: "",
disabled: "",
readonly: "",
withToolbar: "",
prefix: "",
suffix: "",
both: "",
rightAlign: "",
centerAlign: "",
sizeSmall: "",
sizeLarge: "",
inline: "",
multilineResize: "",
});
const [multiline, setMultiline] = React.useState(false);
const [inline, setInline] = React.useState(false);
const [invalid, setInvalid] = React.useState<boolean | undefined>(undefined);
const [disabled, setDisabled] = React.useState(false);
const [errorMessage, setErrorMessage] = React.useState<string | undefined>();
const [description, setDescription] = React.useState<string>("");

const extraProps = {
invalid,
error: errorMessage,
multiline,
inline,
disabled,
description,
};

const handleChange = (field: keyof typeof values) => (value: string) => {
setValues(prev => ({ ...prev, [field]: value }));
};

const toolbar = (
<div style={{ display: "flex", gap: "0.5rem" }}>
<Button label="Rewrite" size="small" icon="sparkles" fullWidth={false} />
<Button
ariaLabel="Undo"
size="small"
icon="redo"
type="tertiary"
fullWidth={false}
/>
</div>
);

const renderBothVersions = (
title: string,
props: Record<string, unknown>,
field: keyof typeof values,
) => (
<Grid>
<Grid.Cell size={{ xs: 12 }}>
<h3>{title}</h3>
</Grid.Cell>
<Grid.Cell size={{ xs: 6 }}>
<InputText
{...props}
version={1}
value={values[field]}
onChange={handleChange(field)}
/>
</Grid.Cell>
<Grid.Cell size={{ xs: 6 }}>
<InputText
{...props}
version={2}
value={values[field]}
onChange={handleChange(field)}
/>
</Grid.Cell>
</Grid>
);

return (
<Content>
<div style={{ display: "flex", flexDirection: "column", gap: "2rem" }}>
<Grid>
<Grid.Cell size={{ xs: 6 }}>
<h2>V1</h2>
</Grid.Cell>
<Grid.Cell size={{ xs: 6 }}>
<h2>V2</h2>
</Grid.Cell>
</Grid>
{renderBothVersions(
"Left Aligned (Default)",
{
placeholder: "Default alignment",
...extraProps,
},
"basic",
)}

{renderBothVersions(
"Right Aligned",
{
placeholder: "Right aligned text",
align: "right",
...extraProps,
},
"rightAlign",
)}

{renderBothVersions(
"Center Aligned",
{
placeholder: "Center aligned text",
align: "center",
...extraProps,
},
"centerAlign",
)}

{renderBothVersions(
"With Prefix",
{
placeholder: "Input with prefix",
prefix: { label: "$" },
...extraProps,
},
"prefix",
)}

{renderBothVersions(
"With Suffix",
{
placeholder: "Input with suffix",
suffix: { label: "%" },
...extraProps,
title: "this is a title",
},
"suffix",
)}

{renderBothVersions(
"With Prefix and Suffix",
{
placeholder: "Input with both",
prefix: { icon: "search" },
suffix: { icon: "calendar" },
...extraProps,
},
"both",
)}

{renderBothVersions(
"With Toolbar",
{
placeholder: "With toolbar",
toolbar: toolbar,
...extraProps,
},
"withToolbar",
)}

{renderBothVersions(
"Combined Features",
{
placeholder: "All features",
align: "right",
prefix: { label: "$" },
suffix: { icon: "remove" },
toolbar: toolbar,
...extraProps,
},
"both",
)}
{renderBothVersions(
"Size small",
{
placeholder: "With Size",
size: "small",
...extraProps,
},
"sizeSmall",
)}
{renderBothVersions(
"Size large",
{ placeholder: "With Size", size: "large", ...extraProps },
"sizeLarge",
)}
{renderBothVersions(
"Multiline Resize",
{
placeholder: "Multiline resize",
rows: { min: 2, max: 10 },
multiline: true,
},
"multilineResize",
)}
</div>
<Grid>
<Grid.Cell size={{ xs: 6 }}>
<Button
label="Toggle Multiline"
onClick={() => setMultiline(!multiline)}
/>
</Grid.Cell>
<Grid.Cell size={{ xs: 6 }}>
<Button label="Toggle inline" onClick={() => setInline(!inline)} />
</Grid.Cell>
<Grid.Cell size={{ xs: 6 }}>
<Button
label="Toggle Invalid"
onClick={() => {
if (invalid) {
setInvalid(undefined);
} else {
setInvalid(true);
}
}}
/>
</Grid.Cell>
<Grid.Cell size={{ xs: 6 }}>
<Button
label="Toggle Error message"
onClick={() => {
if (errorMessage) {
setErrorMessage(undefined);
} else {
setErrorMessage("This is an error message");
}
}}
/>
</Grid.Cell>
<Grid.Cell size={{ xs: 6 }}>
<Button
label="Toggle Disabled"
onClick={() => {
setDisabled(!disabled);
}}
/>
</Grid.Cell>
<Grid.Cell size={{ xs: 6 }}>
<Button
label="Toggle Description"
onClick={() => {
setDescription(description ? "" : "This is a description");
}}
/>
</Grid.Cell>
<Grid.Cell size={{ xs: 6 }}>
<Button
label="Reset MultiLine resize"
onClick={() => handleChange("multilineResize")("")}
/>
</Grid.Cell>
</Grid>
</Content>
);
};

const ControlledTemplate: ComponentStory<typeof InputText> = args => {
const [value, setValue] = useState("");

Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/FormField/FormFieldTypes.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { ChangeEvent, ReactNode, RefObject } from "react";
import { ChangeEvent, ReactNode, RefObject } from "react";
import { RegisterOptions } from "react-hook-form";
import { XOR } from "ts-xor";
import { Clearable } from "@jobber/hooks/src/useShowClear";
Expand Down Expand Up @@ -222,12 +222,12 @@ export interface FormFieldProps extends CommonFormFieldProps {
/**
* Focus callback.
*/
onFocus?(event?: React.FocusEvent): void;
onFocus?(): void;

/**
* Blur callback.
*/
onBlur?(event?: React.FocusEvent): void;
onBlur?(): void;

onKeyUp?(event: React.KeyboardEvent<HTMLInputElement>): void;

Expand Down
10 changes: 5 additions & 5 deletions packages/components/src/FormField/hooks/useFormFieldWrapperStyles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ export interface useFormFieldWrapperStylesProps
| "disabled"
| "inline"
> {
readonly error?: string;
suffixRef?: RefObject<HTMLDivElement>;
prefixRef?: RefObject<HTMLDivElement>;
readonly error: string;
suffixRef: RefObject<HTMLDivElement>;
prefixRef: RefObject<HTMLDivElement>;
}

export interface LabelPadding {
Expand Down Expand Up @@ -86,8 +86,8 @@ export function useFormFieldWrapperStyles({
getAffixPaddding({
value,
type,
prefixWidth: prefixRef?.current?.offsetWidth || 0,
suffixWidth: suffixRef?.current?.offsetWidth || 0,
prefixWidth: prefixRef.current?.offsetWidth || 0,
suffixWidth: suffixRef.current?.offsetWidth || 0,
}),
);
}, [value]);
Expand Down
Loading

0 comments on commit ce22675

Please sign in to comment.