From ee4fade3b6269450de6a229538b9c897ccf39f32 Mon Sep 17 00:00:00 2001 From: nina992 <89770889+nina992@users.noreply.github.com> Date: Mon, 11 Sep 2023 10:28:54 +0400 Subject: [PATCH] refactor: refactor text input component (#677) Co-authored-by: nina992 --- .../fields/PropertyFields/index.tsx | 2 +- .../fields/TextField/index.stories.tsx | 26 +++++++++++++++++ .../components/fields/TextField/index.tsx | 29 +++++++++++++++++++ .../fields/common/TextInput/index.stories.tsx | 22 ++++++++++++++ .../fields/{ => common}/TextInput/index.tsx | 24 +++++++-------- .../RightPanel/ContainerSettings/index.tsx | 2 +- .../innerPages/GeneralSettings/index.tsx | 2 +- .../PluginInstall/PublicRepo/index.tsx | 2 +- .../PublicSettings/PublicSettingsDetail.tsx | 2 +- 9 files changed, 92 insertions(+), 19 deletions(-) create mode 100644 web/src/beta/components/fields/TextField/index.stories.tsx create mode 100644 web/src/beta/components/fields/TextField/index.tsx create mode 100644 web/src/beta/components/fields/common/TextInput/index.stories.tsx rename web/src/beta/components/fields/{ => common}/TextInput/index.tsx (79%) diff --git a/web/src/beta/components/fields/PropertyFields/index.tsx b/web/src/beta/components/fields/PropertyFields/index.tsx index 025f55f262..b83661c031 100644 --- a/web/src/beta/components/fields/PropertyFields/index.tsx +++ b/web/src/beta/components/fields/PropertyFields/index.tsx @@ -4,7 +4,7 @@ import NumberField from "@reearth/beta/components/fields/NumberField"; import SelectField from "@reearth/beta/components/fields/SelectField"; import SliderField from "@reearth/beta/components/fields/SliderField"; import SpacingInput, { SpacingValues } from "@reearth/beta/components/fields/SpacingInput"; -import TextInput from "@reearth/beta/components/fields/TextInput"; +import TextInput from "@reearth/beta/components/fields/TextField"; import ToggleField from "@reearth/beta/components/fields/ToggleField"; import { type LatLng } from "@reearth/beta/utils/value"; import { type Item } from "@reearth/services/api/propertyApi/utils"; diff --git a/web/src/beta/components/fields/TextField/index.stories.tsx b/web/src/beta/components/fields/TextField/index.stories.tsx new file mode 100644 index 0000000000..e8a4d41646 --- /dev/null +++ b/web/src/beta/components/fields/TextField/index.stories.tsx @@ -0,0 +1,26 @@ +import { Meta, StoryObj } from "@storybook/react"; + +import TextField, { Props } from "./index"; + +const meta: Meta = { + component: TextField, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + name: "Text input field", + value: "Text field", + description: "The text input description", + }, +}; + +export const WithPlaceholder: Story = { + args: { + placeholder: "Text Input", + name: "Text input field", + description: "The text input description", + }, +}; diff --git a/web/src/beta/components/fields/TextField/index.tsx b/web/src/beta/components/fields/TextField/index.tsx new file mode 100644 index 0000000000..1659e59b79 --- /dev/null +++ b/web/src/beta/components/fields/TextField/index.tsx @@ -0,0 +1,29 @@ +import TextInput from "@reearth/beta/components/fields/common/TextInput"; + +import Property from ".."; + +export type Props = { + name?: string; + description?: string; + value?: string; + placeholder?: string; + timeout?: number; + onChange?: (text: string) => void; +}; + +const TextField: React.FC = ({ + name, + description, + value, + placeholder, + timeout, + onChange, +}) => { + return ( + + + + ); +}; + +export default TextField; diff --git a/web/src/beta/components/fields/common/TextInput/index.stories.tsx b/web/src/beta/components/fields/common/TextInput/index.stories.tsx new file mode 100644 index 0000000000..8cf977bd84 --- /dev/null +++ b/web/src/beta/components/fields/common/TextInput/index.stories.tsx @@ -0,0 +1,22 @@ +import { Meta, StoryObj } from "@storybook/react"; + +import TextInput, { Props } from "./index"; + +const meta: Meta = { + component: TextInput, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + value: "Text Input", + }, +}; + +export const WithPlaceholder: Story = { + args: { + placeholder: "Text Input", + }, +}; diff --git a/web/src/beta/components/fields/TextInput/index.tsx b/web/src/beta/components/fields/common/TextInput/index.tsx similarity index 79% rename from web/src/beta/components/fields/TextInput/index.tsx rename to web/src/beta/components/fields/common/TextInput/index.tsx index 215043d2f3..dd37c9b0fa 100644 --- a/web/src/beta/components/fields/TextInput/index.tsx +++ b/web/src/beta/components/fields/common/TextInput/index.tsx @@ -2,17 +2,14 @@ import { useCallback, useEffect, useRef, useState } from "react"; import { styled } from "@reearth/services/theme"; -import Property from ".."; - -type Props = { - name?: string; - description?: string; +export type Props = { value?: string; + placeholder?: string; timeout?: number; onChange?: (text: string) => void; }; -const TextInput: React.FC = ({ name, description, value, timeout = 1000, onChange }) => { +const TextInput: React.FC = ({ value, placeholder, timeout = 1000, onChange }) => { const [currentValue, setCurrentValue] = useState(value ?? ""); const timeoutRef = useRef(); @@ -50,14 +47,13 @@ const TextInput: React.FC = ({ name, description, value, timeout = 1000, ); return ( - - - + ); }; diff --git a/web/src/beta/features/Editor/tabs/widgets/RightPanel/ContainerSettings/index.tsx b/web/src/beta/features/Editor/tabs/widgets/RightPanel/ContainerSettings/index.tsx index 7b33503715..81f9c68df9 100644 --- a/web/src/beta/features/Editor/tabs/widgets/RightPanel/ContainerSettings/index.tsx +++ b/web/src/beta/features/Editor/tabs/widgets/RightPanel/ContainerSettings/index.tsx @@ -1,4 +1,4 @@ -import TextInput from "@reearth/beta/components/fields/TextInput"; +import TextInput from "@reearth/beta/components/fields/TextField"; import SidePanelSectionField from "@reearth/beta/components/SidePanelSectionField"; import { WidgetAreaPadding, WidgetAreaState } from "@reearth/services/state"; diff --git a/web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx index 012a5899b0..98a5ce99b2 100644 --- a/web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx +++ b/web/src/beta/features/ProjectSettings/innerPages/GeneralSettings/index.tsx @@ -2,7 +2,7 @@ import { useCallback, useState, useMemo } from "react"; import Button from "@reearth/beta/components/Button"; import Collapse from "@reearth/beta/components/Collapse"; -import TextInput from "@reearth/beta/components/fields/TextInput"; +import TextInput from "@reearth/beta/components/fields/TextField"; import Modal from "@reearth/beta/components/Modal"; import Text from "@reearth/beta/components/Text"; import { useT } from "@reearth/services/i18n"; diff --git a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/index.tsx b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/index.tsx index 526ec9f170..5092e10b41 100644 --- a/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/index.tsx +++ b/web/src/beta/features/ProjectSettings/innerPages/PluginSettings/PluginInstall/PublicRepo/index.tsx @@ -1,7 +1,7 @@ import React from "react"; import Button from "@reearth/beta/components/Button"; -import TextInput from "@reearth/beta/components/fields/TextInput"; +import TextInput from "@reearth/beta/components/fields/TextField"; import { Icons } from "@reearth/beta/components/Icon"; import Loading from "@reearth/beta/components/Loading"; import Modal from "@reearth/beta/components/Modal"; diff --git a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx index 1411befaba..4151ba17c8 100644 --- a/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx +++ b/web/src/beta/features/ProjectSettings/innerPages/PublicSettings/PublicSettingsDetail.tsx @@ -2,7 +2,7 @@ import { useCallback, useState } from "react"; import Button from "@reearth/beta/components/Button"; import Collapse from "@reearth/beta/components/Collapse"; -import TextInput from "@reearth/beta/components/fields/TextInput"; +import TextInput from "@reearth/beta/components/fields/TextField"; import { useT } from "@reearth/services/i18n"; import { SettingsFields, ButtonWrapper } from "../common";