From ac4be4ca71487c91e7e4be62d1cdcf3a3e204457 Mon Sep 17 00:00:00 2001 From: nina992 Date: Sat, 9 Sep 2023 18:27:54 +0400 Subject: [PATCH 1/2] refactor(web):refactor text input component --- .../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 | 26 +++++++---------- .../RightPanel/ContainerSettings/index.tsx | 2 +- .../innerPages/GeneralSettings/index.tsx | 2 +- .../PluginInstall/PublicRepo/index.tsx | 2 +- .../PublicSettings/PublicSettingsDetail.tsx | 2 +- 9 files changed, 93 insertions(+), 20 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 (78%) diff --git a/web/src/beta/components/fields/PropertyFields/index.tsx b/web/src/beta/components/fields/PropertyFields/index.tsx index 2da1bf0abc..55c4747893 100644 --- a/web/src/beta/components/fields/PropertyFields/index.tsx +++ b/web/src/beta/components/fields/PropertyFields/index.tsx @@ -3,7 +3,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 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 78% rename from web/src/beta/components/fields/TextInput/index.tsx rename to web/src/beta/components/fields/common/TextInput/index.tsx index 215043d2f3..1c318554af 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 TextField: React.FC = ({ value, placeholder, timeout = 1000, onChange }) => { const [currentValue, setCurrentValue] = useState(value ?? ""); const timeoutRef = useRef(); @@ -50,18 +47,17 @@ const TextInput: React.FC = ({ name, description, value, timeout = 1000, ); return ( - - - + ); }; -export default TextInput; +export default TextField; const StyledInput = styled.input` outline: none; 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"; From 5a15d7a1ac856d350e25a3ffb5498f7dea6ccff0 Mon Sep 17 00:00:00 2001 From: nina992 Date: Mon, 11 Sep 2023 09:45:37 +0400 Subject: [PATCH 2/2] fix_name --- web/src/beta/components/fields/common/TextInput/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/beta/components/fields/common/TextInput/index.tsx b/web/src/beta/components/fields/common/TextInput/index.tsx index 1c318554af..dd37c9b0fa 100644 --- a/web/src/beta/components/fields/common/TextInput/index.tsx +++ b/web/src/beta/components/fields/common/TextInput/index.tsx @@ -9,7 +9,7 @@ export type Props = { onChange?: (text: string) => void; }; -const TextField: React.FC = ({ value, placeholder, timeout = 1000, onChange }) => { +const TextInput: React.FC = ({ value, placeholder, timeout = 1000, onChange }) => { const [currentValue, setCurrentValue] = useState(value ?? ""); const timeoutRef = useRef(); @@ -57,7 +57,7 @@ const TextField: React.FC = ({ value, placeholder, timeout = 1000, onChan ); }; -export default TextField; +export default TextInput; const StyledInput = styled.input` outline: none;