Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

revert: "feat(components): add input text rebuild EARLY Iterations" #2315

Merged
merged 1 commit into from
Jan 15, 2025
Merged

revert: "feat(components): add input text rebuild EARLY Iterations" #2315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 0 additions & 10 deletions docs/components/InputText/InputText.stories.mdx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading