From 8d02bc615296e264b82f223ac6a5c03ce754396c Mon Sep 17 00:00:00 2001
From: jashan <20891087+jashanbhullar@users.noreply.github.com>
Date: Wed, 30 Aug 2023 11:24:14 +0530
Subject: [PATCH 01/12] - Majorly done - Minor fixes in stories left

---
 .../fields/Toggle/index.stories.tsx           | 52 +++++++++++++
 .../beta/components/fields/Toggle/index.tsx   | 75 ++++++-------------
 2 files changed, 75 insertions(+), 52 deletions(-)
 create mode 100644 web/src/beta/components/fields/Toggle/index.stories.tsx

diff --git a/web/src/beta/components/fields/Toggle/index.stories.tsx b/web/src/beta/components/fields/Toggle/index.stories.tsx
new file mode 100644
index 000000000..df1ea9473
--- /dev/null
+++ b/web/src/beta/components/fields/Toggle/index.stories.tsx
@@ -0,0 +1,52 @@
+import { useArgs } from "@storybook/preview-api";
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import Property from "..";
+
+import Toggle from ".";
+
+type Props = React.ComponentProps<typeof Toggle>;
+
+const meta: Meta<typeof Toggle> = {
+  component: Toggle,
+  argTypes: {
+    size: {
+      options: ["sm", "md"],
+      control: { type: "radio" }, // Automatically inferred when 'options' is defined
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Toggle>;
+
+export const Default: Story = (args: Props) => {
+  const [_, updateArgs] = useArgs();
+
+  const handleChange = (checked: boolean) => updateArgs({ checked: !checked });
+
+  return (
+    <>
+      {/* TODO: Clean this and add some styling */}
+      {/* <label htmlFor=""> Just the field</label> */}
+      <Toggle {...args} onChange={handleChange} />
+      {/* <label htmlFor=""> With property</label>
+      <Property name="Switch Toggle">
+        <Toggle {...args} onChange={handleChange} />
+      </Property>
+      */}
+      <label htmlFor=""> With property and description</label>
+      <Property name="Switch Toggle" description="Switch toggle description">
+        <Toggle {...args} onChange={handleChange} />
+      </Property>
+    </>
+  );
+};
+
+Default.args = {
+  checked: false,
+  disabled: false,
+  size: "md",
+};
diff --git a/web/src/beta/components/fields/Toggle/index.tsx b/web/src/beta/components/fields/Toggle/index.tsx
index 587ad3269..4b1e921de 100644
--- a/web/src/beta/components/fields/Toggle/index.tsx
+++ b/web/src/beta/components/fields/Toggle/index.tsx
@@ -1,45 +1,26 @@
 import { useCallback } from "react";
 
-import Text from "@reearth/beta/components/Text";
-import { styled, useTheme } from "@reearth/services/theme";
+import { styled } from "@reearth/services/theme";
 
 export type ToggleSize = "sm" | "md";
 
-interface ToggleButtonProps {
-  checked?: boolean;
-  disabled?: boolean;
-  parentSelected?: boolean;
-  label?: string;
+export type Props = {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
   size?: ToggleSize;
-  onChange?: (checked: boolean) => void;
-}
-
-const ToggleButton: React.FC<ToggleButtonProps> = ({
-  checked,
-  disabled,
-  parentSelected,
-  label,
-  size = "md",
-  onChange,
-}) => {
-  const theme = useTheme();
+  disabled?: boolean;
+};
 
-  const handleClick = useCallback(() => onChange?.(!checked), [checked, onChange]);
+const ToggleButton: React.FC<Props> = ({ checked, onChange, size = "md", disabled = false }) => {
+  const handleClick = useCallback(
+    () => !disabled && onChange(checked),
+    [checked, onChange, disabled],
+  );
 
   return (
     <Wrapper>
-      {label && (
-        <Label size="body" color={theme.classic.main.text}>
-          {label}
-        </Label>
-      )}
-      <Switch
-        size={size}
-        checked={checked}
-        disabled={disabled}
-        selected={parentSelected}
-        onClick={handleClick}>
-        <TopSlider size={size} checked={checked} disabled={disabled} selected={parentSelected} />
+      <Switch size={size} checked={checked} disabled={disabled} onClick={handleClick}>
+        <TopSlider size={size} checked={checked} />
       </Switch>
     </Wrapper>
   );
@@ -54,38 +35,28 @@ const Wrapper = styled.div`
 `;
 
 const Switch = styled.label<{
-  size?: ToggleSize;
-  checked?: boolean;
-  disabled?: boolean;
-  selected?: boolean;
+  size: ToggleSize;
+  checked: boolean;
+  disabled: boolean;
 }>`
   cursor: pointer;
   width: ${({ size }) => (size === "sm" ? "28px" : "40px")};
   height: ${({ size }) => (size === "sm" ? "14px" : "20px")};
-  background: ${({ theme }) => theme.select.main};
-  border: 1px solid ${({ theme }) => theme.select.main};
-  border-radius: 11px;
-  opacity: ${({ checked, selected }) => (checked || selected ? 1 : 0.5)};
+  background: ${({ checked, theme }) => (checked ? theme.select.main : theme.secondary.main)};
+  border: 1px solid ${({ checked, theme }) => (checked ? theme.select.main : theme.secondary.main)};
+  border-radius: 12px;
+  opacity: ${({ disabled }) => (!disabled ? 1 : 0.5)};
   transition: 0.4s;
 `;
 
 const TopSlider = styled.div<{
-  size?: ToggleSize;
-  checked?: boolean;
-  disabled?: boolean;
-  selected?: boolean;
+  size: ToggleSize;
+  checked: boolean;
 }>`
   width: ${({ size }) => (size === "sm" ? "14px" : "20px")};
   height: ${({ size }) => (size === "sm" ? "14px" : "20px")};
-  background: ${({ selected, theme }) =>
-    selected ? theme.content.withBackground : theme.content.main};
+  background: ${({ theme }) => theme.content.withBackground};
   transition: 0.4s;
   border-radius: 50%;
   transform: ${({ checked }) => checked && "translateX(100%)"};
 `;
-
-const Label = styled(Text)`
-  margin-right: 10px;
-  vertical-align: middle;
-  display: inline;
-`;

From 00f822318339dfb0106e06db1a41aa944d58b312 Mon Sep 17 00:00:00 2001
From: jashan <20891087+jashanbhullar@users.noreply.github.com>
Date: Thu, 31 Aug 2023 11:49:03 +0530
Subject: [PATCH 02/12] - Classic code - Stories update

---
 .../beta/components/Slider/index.stories.tsx  | 60 +++++++++++++---
 web/src/beta/components/Slider/index.tsx      |  2 +-
 .../fields/SliderField/index.stories.tsx      | 68 +++++++++++++++++++
 .../components/fields/SliderField/index.tsx   | 17 +++++
 4 files changed, 137 insertions(+), 10 deletions(-)
 create mode 100644 web/src/beta/components/fields/SliderField/index.stories.tsx
 create mode 100644 web/src/beta/components/fields/SliderField/index.tsx

diff --git a/web/src/beta/components/Slider/index.stories.tsx b/web/src/beta/components/Slider/index.stories.tsx
index 73c4a945d..1b0163e73 100644
--- a/web/src/beta/components/Slider/index.stories.tsx
+++ b/web/src/beta/components/Slider/index.stories.tsx
@@ -1,13 +1,55 @@
-import { action } from "@storybook/addon-actions";
-import { Meta } from "@storybook/react";
+import { useArgs } from "@storybook/preview-api";
+import { Meta, StoryObj } from "@storybook/react";
+import { useCallback } from "react";
 
-import Slider from ".";
+import Text from "@reearth/beta/components/Text";
+import { styled } from "@reearth/services/theme";
 
-export default {
+import Slider, { Props } from ".";
+
+const meta: Meta<typeof Slider> = {
   component: Slider,
-} as Meta;
+};
+
+type Story = StoryObj<typeof Slider>;
+
+export default meta;
+
+export const Default: Story = (args: Props) => {
+  const [_, updateArgs] = useArgs();
+
+  const handleChange = useCallback((value: number) => updateArgs({ value: value }), [updateArgs]);
+
+  return (
+    <Wrapper>
+      <div>
+        <Text size="footnote">Without frame</Text>
+        <Slider {...args} onChange={handleChange} />
+      </div>
+      <div>
+        <Text size="footnote">With frame</Text>
+        <Slider {...args} onChange={handleChange} frame />
+      </div>
+      <div>
+        <Text size="footnote">Disabled</Text>
+        <Slider {...args} disabled={true} onChange={handleChange} />
+      </div>
+    </Wrapper>
+  );
+};
+
+Default.args = {
+  value: 50,
+  min: 0,
+  max: 100,
+  step: 1,
+  frame: false,
+};
 
-export const Default = () => <Slider value={120} min={0} max={100} onChange={action("onchange")} />;
-export const Frame = () => (
-  <Slider value={120} min={0} max={100} onChange={action("onchange")} frame />
-);
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10%;
+  margin: 2rem;
+  height: 300px;
+`;
diff --git a/web/src/beta/components/Slider/index.tsx b/web/src/beta/components/Slider/index.tsx
index 5f3229690..90233fdfd 100644
--- a/web/src/beta/components/Slider/index.tsx
+++ b/web/src/beta/components/Slider/index.tsx
@@ -5,7 +5,7 @@ import { styled, css } from "@reearth/services/theme";
 
 import "rc-slider/assets/index.css";
 
-type Props = {
+export type Props = {
   min: number;
   max: number;
   frame?: boolean;
diff --git a/web/src/beta/components/fields/SliderField/index.stories.tsx b/web/src/beta/components/fields/SliderField/index.stories.tsx
new file mode 100644
index 000000000..83dafd258
--- /dev/null
+++ b/web/src/beta/components/fields/SliderField/index.stories.tsx
@@ -0,0 +1,68 @@
+import { useArgs } from "@storybook/preview-api";
+import { Meta, StoryObj } from "@storybook/react";
+import { useCallback } from "react";
+
+import { styled } from "@reearth/services/theme";
+
+import SliderField, { Props } from ".";
+
+const meta: Meta<typeof SliderField> = {
+  component: SliderField,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SliderField>;
+
+export const Default: Story = (args: Props) => {
+  const [_, updateArgs] = useArgs();
+
+  const handleChange = useCallback((value: number) => updateArgs({ value: value }), [updateArgs]);
+
+  return (
+    <Wrapper>
+      <div>
+        <SliderField {...args} onChange={handleChange} />
+      </div>
+      <div>
+        <SliderField
+          {...args}
+          name="With Frame"
+          value={args.max - (args?.value || 0)}
+          description={"Invesere of above but controls are also opposite"}
+          onChange={handleChange}
+          frame
+        />
+      </div>
+      <div>
+        <SliderField
+          {...args}
+          name="Disabled"
+          description="Disabled field"
+          disabled={true}
+          onChange={handleChange}
+        />
+      </div>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10%;
+  margin-left: 2rem;
+  margin-top: 2rem;
+  height: 300px;
+`;
+
+Default.args = {
+  name: "Slider Field",
+  description: "Slider field Sample description",
+  value: 50,
+  min: 0,
+  max: 100,
+  step: 1,
+  disabled: false,
+  onChange: () => console.log("clicked"),
+};
diff --git a/web/src/beta/components/fields/SliderField/index.tsx b/web/src/beta/components/fields/SliderField/index.tsx
new file mode 100644
index 000000000..86ea2e13d
--- /dev/null
+++ b/web/src/beta/components/fields/SliderField/index.tsx
@@ -0,0 +1,17 @@
+import Property from "@reearth/beta/components/fields";
+import Slider, { Props as ToggleProps } from "@reearth/beta/components/Slider";
+
+export type Props = {
+  name?: string;
+  description?: string;
+} & ToggleProps;
+
+const SliderField: React.FC<Props> = ({ name, description, ...args }: Props) => {
+  return (
+    <Property name={name} description={description}>
+      <Slider {...args} />
+    </Property>
+  );
+};
+
+export default SliderField;

From 9668e21b399adfc5ab028ccfe4ab9c1f59aac8ac Mon Sep 17 00:00:00 2001
From: jashan <20891087+jashanbhullar@users.noreply.github.com>
Date: Thu, 31 Aug 2023 11:54:54 +0530
Subject: [PATCH 03/12] - Accidental addition

---
 .../fields/Toggle/index.stories.tsx           | 52 -------------------
 1 file changed, 52 deletions(-)
 delete mode 100644 web/src/beta/components/fields/Toggle/index.stories.tsx

diff --git a/web/src/beta/components/fields/Toggle/index.stories.tsx b/web/src/beta/components/fields/Toggle/index.stories.tsx
deleted file mode 100644
index df1ea9473..000000000
--- a/web/src/beta/components/fields/Toggle/index.stories.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useArgs } from "@storybook/preview-api";
-import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-
-import Property from "..";
-
-import Toggle from ".";
-
-type Props = React.ComponentProps<typeof Toggle>;
-
-const meta: Meta<typeof Toggle> = {
-  component: Toggle,
-  argTypes: {
-    size: {
-      options: ["sm", "md"],
-      control: { type: "radio" }, // Automatically inferred when 'options' is defined
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Toggle>;
-
-export const Default: Story = (args: Props) => {
-  const [_, updateArgs] = useArgs();
-
-  const handleChange = (checked: boolean) => updateArgs({ checked: !checked });
-
-  return (
-    <>
-      {/* TODO: Clean this and add some styling */}
-      {/* <label htmlFor=""> Just the field</label> */}
-      <Toggle {...args} onChange={handleChange} />
-      {/* <label htmlFor=""> With property</label>
-      <Property name="Switch Toggle">
-        <Toggle {...args} onChange={handleChange} />
-      </Property>
-      */}
-      <label htmlFor=""> With property and description</label>
-      <Property name="Switch Toggle" description="Switch toggle description">
-        <Toggle {...args} onChange={handleChange} />
-      </Property>
-    </>
-  );
-};
-
-Default.args = {
-  checked: false,
-  disabled: false,
-  size: "md",
-};

From 548ed4f5959ac13d4a4db9e7f4fe4b165d6d26aa Mon Sep 17 00:00:00 2001
From: jashan <20891087+jashanbhullar@users.noreply.github.com>
Date: Thu, 31 Aug 2023 12:07:17 +0530
Subject: [PATCH 04/12] - No frame - Added a bunch of todos to be picked up

---
 .../beta/components/Slider/index.stories.tsx  |  5 ++-
 web/src/beta/components/Slider/index.tsx      | 31 +++++--------------
 .../fields/SliderField/index.stories.tsx      |  5 ++-
 3 files changed, 11 insertions(+), 30 deletions(-)

diff --git a/web/src/beta/components/Slider/index.stories.tsx b/web/src/beta/components/Slider/index.stories.tsx
index 1b0163e73..94ff248b5 100644
--- a/web/src/beta/components/Slider/index.stories.tsx
+++ b/web/src/beta/components/Slider/index.stories.tsx
@@ -27,8 +27,8 @@ export const Default: Story = (args: Props) => {
         <Slider {...args} onChange={handleChange} />
       </div>
       <div>
-        <Text size="footnote">With frame</Text>
-        <Slider {...args} onChange={handleChange} frame />
+        <Text size="footnote">Double Max</Text>
+        <Slider {...args} max={2 * args.max} onChange={handleChange} />
       </div>
       <div>
         <Text size="footnote">Disabled</Text>
@@ -43,7 +43,6 @@ Default.args = {
   min: 0,
   max: 100,
   step: 1,
-  frame: false,
 };
 
 const Wrapper = styled.div`
diff --git a/web/src/beta/components/Slider/index.tsx b/web/src/beta/components/Slider/index.tsx
index 90233fdfd..409bf2918 100644
--- a/web/src/beta/components/Slider/index.tsx
+++ b/web/src/beta/components/Slider/index.tsx
@@ -1,39 +1,22 @@
 import RCSlider from "rc-slider";
 import React, { ComponentProps } from "react";
 
-import { styled, css } from "@reearth/services/theme";
+import { styled } from "@reearth/services/theme";
 
 import "rc-slider/assets/index.css";
 
 export type Props = {
   min: number;
   max: number;
-  frame?: boolean;
 } & Omit<ComponentProps<typeof RCSlider>, "defaultValue">;
 
-const Slider: React.FC<Props> = ({ frame = false, ...props }) => (
-  <Wrapper frame={frame}>
-    <StyledSlider {...props} />
-  </Wrapper>
-);
-
-const Wrapper = styled.div<{ frame: boolean }>`
-  display: flex;
-  align-items: center;
-  border: ${({ frame, theme }) => (frame ? `solid 1px ${theme.outline.main}` : "none")};
-  border-radius: 3px;
-  background: ${({ frame, theme }) => (frame ? theme.bg[1] : "transparent")};
-  width: 100%;
-  flex: 1;
-  box-sizing: border-box;
-  ${({ frame }) =>
-    frame &&
-    css`
-      padding: 6px 12px;
-      margin-right: 5px;
-    `};
-`;
+// TODO: Show value on hover as well as on drag
+const Slider: React.FC<Props> = ({ ...props }) => <StyledSlider {...props} />;
 
+// TODO: Update colors as per design
+// TODO: Add shadow background in the empty bar
+// TODO: Update height as per design
+// TODO: Fixed disabled state with opacity changes
 const StyledSlider = styled(RCSlider)`
   .rc-slider-handle {
     background-color: ${({ theme }) => theme.bg[2]};
diff --git a/web/src/beta/components/fields/SliderField/index.stories.tsx b/web/src/beta/components/fields/SliderField/index.stories.tsx
index 83dafd258..8cf67861a 100644
--- a/web/src/beta/components/fields/SliderField/index.stories.tsx
+++ b/web/src/beta/components/fields/SliderField/index.stories.tsx
@@ -27,11 +27,10 @@ export const Default: Story = (args: Props) => {
       <div>
         <SliderField
           {...args}
-          name="With Frame"
+          name="Inverse of above"
           value={args.max - (args?.value || 0)}
-          description={"Invesere of above but controls are also opposite"}
+          description={undefined}
           onChange={handleChange}
-          frame
         />
       </div>
       <div>

From 9da1eebda1f8e881fb293d9f0e742eae0b71792c Mon Sep 17 00:00:00 2001
From: jashan <20891087+jashanbhullar@users.noreply.github.com>
Date: Mon, 4 Sep 2023 10:20:34 +0530
Subject: [PATCH 05/12] - color changes

---
 .../beta/components/Slider/index.stories.tsx  |  5 +--
 web/src/beta/components/Slider/index.tsx      | 38 ++++++++++++++-----
 .../fields/PropertyFields/index.tsx           |  9 +++++
 3 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/web/src/beta/components/Slider/index.stories.tsx b/web/src/beta/components/Slider/index.stories.tsx
index 94ff248b5..80ff85c92 100644
--- a/web/src/beta/components/Slider/index.stories.tsx
+++ b/web/src/beta/components/Slider/index.stories.tsx
@@ -2,7 +2,6 @@ import { useArgs } from "@storybook/preview-api";
 import { Meta, StoryObj } from "@storybook/react";
 import { useCallback } from "react";
 
-import Text from "@reearth/beta/components/Text";
 import { styled } from "@reearth/services/theme";
 
 import Slider, { Props } from ".";
@@ -23,15 +22,12 @@ export const Default: Story = (args: Props) => {
   return (
     <Wrapper>
       <div>
-        <Text size="footnote">Without frame</Text>
         <Slider {...args} onChange={handleChange} />
       </div>
       <div>
-        <Text size="footnote">Double Max</Text>
         <Slider {...args} max={2 * args.max} onChange={handleChange} />
       </div>
       <div>
-        <Text size="footnote">Disabled</Text>
         <Slider {...args} disabled={true} onChange={handleChange} />
       </div>
     </Wrapper>
@@ -43,6 +39,7 @@ Default.args = {
   min: 0,
   max: 100,
   step: 1,
+  disabled: false,
 };
 
 const Wrapper = styled.div`
diff --git a/web/src/beta/components/Slider/index.tsx b/web/src/beta/components/Slider/index.tsx
index 409bf2918..bc80a710e 100644
--- a/web/src/beta/components/Slider/index.tsx
+++ b/web/src/beta/components/Slider/index.tsx
@@ -10,26 +10,46 @@ export type Props = {
   max: number;
 } & Omit<ComponentProps<typeof RCSlider>, "defaultValue">;
 
-// TODO: Show value on hover as well as on drag
-const Slider: React.FC<Props> = ({ ...props }) => <StyledSlider {...props} />;
+// TODO: Show tooltip on hover and drag
+const Slider: React.FC<Props> = ({ ...props }) => (
+  <SliderWrapper>
+    <StyledSlider {...props} />
+  </SliderWrapper>
+);
+
+const SliderWrapper = styled.div`
+  border: 1px solid red;
+`;
 
-// TODO: Update colors as per design
-// TODO: Add shadow background in the empty bar
-// TODO: Update height as per design
-// TODO: Fixed disabled state with opacity changes
 const StyledSlider = styled(RCSlider)`
+  .rc-slider-rail {
+    height: 8px;
+  }
+
   .rc-slider-handle {
-    background-color: ${({ theme }) => theme.bg[2]};
-    border: ${({ theme }) => theme.bg[2]};
+    background-color: ${({ theme }) => theme.item.default};
+    border: ${({ theme }) => theme.primary.weak};
+    height: 12px;
+    width: 12px;
+    margin-top: -2px;
   }
 
   .rc-slider-track {
-    background-color: ${({ theme }) => theme.bg[2]};
+    background-color: ${({ theme }) => theme.primary.weak};
+    height: 8px;
+  }
+
+  .rc-slider-rail {
+    background-color: ${({ theme }) => theme.outline.weaker};
+    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25) inset;
   }
 
   .rc-slider-handle:focus {
     box-shadow: none;
   }
+  background-color: transparent;
+  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
+  cursor: ${({ disabled }) => (disabled ? "not-allowd" : "inherit")};
 `;
 
 export default Slider;
diff --git a/web/src/beta/components/fields/PropertyFields/index.tsx b/web/src/beta/components/fields/PropertyFields/index.tsx
index 7be829a1c..eccc5d2aa 100644
--- a/web/src/beta/components/fields/PropertyFields/index.tsx
+++ b/web/src/beta/components/fields/PropertyFields/index.tsx
@@ -2,6 +2,7 @@ import TextInput from "@reearth/beta/components/fields/TextInput";
 import { type Item } from "@reearth/services/api/propertyApi/utils";
 
 import ColorField from "../ColorField";
+import SliderField from "../SliderField";
 import ToggleField from "../ToggleField";
 
 import useHooks from "./hooks";
@@ -50,6 +51,14 @@ const PropertyFields: React.FC<Props> = ({ propertyId, item }) => {
             description={sf.description}
             onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
           />
+        ) : sf.type == "number" ? (
+          <SliderField
+            key={sf.id}
+            name={sf.name}
+            value={value as number}
+            description={sf.description}
+            onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
+          />
         ) : (
           <p key={sf.id}>{sf.name} field</p>
         );

From 1eac54f0e07d05dcbd39e2fdd393db6e0b93e747 Mon Sep 17 00:00:00 2001
From: jashan <20891087+jashanbhullar@users.noreply.github.com>
Date: Mon, 4 Sep 2023 10:26:34 +0530
Subject: [PATCH 06/12] - updated propery field

---
 web/src/beta/components/fields/PropertyFields/index.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web/src/beta/components/fields/PropertyFields/index.tsx b/web/src/beta/components/fields/PropertyFields/index.tsx
index eccc5d2aa..8382331fa 100644
--- a/web/src/beta/components/fields/PropertyFields/index.tsx
+++ b/web/src/beta/components/fields/PropertyFields/index.tsx
@@ -20,6 +20,8 @@ const PropertyFields: React.FC<Props> = ({ propertyId, item }) => {
       {item?.schemaFields.map(sf => {
         const isList = item && "items" in item;
         const value = !isList ? item.fields.find(f => f.id === sf.id)?.value : sf.defaultValue;
+        const min = sf?.min;
+        const max = sf?.max;
 
         return sf.type === "string" ? (
           sf.ui === "color" ? (
@@ -56,6 +58,8 @@ const PropertyFields: React.FC<Props> = ({ propertyId, item }) => {
             key={sf.id}
             name={sf.name}
             value={value as number}
+            min={min as number}
+            max={max as number}
             description={sf.description}
             onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
           />

From bad069fb815385336e244a8ca56e53fefd95a597 Mon Sep 17 00:00:00 2001
From: jashan <20891087+jashanbhullar@users.noreply.github.com>
Date: Mon, 4 Sep 2023 10:31:10 +0530
Subject: [PATCH 07/12] - destrcucturing

---
 web/src/beta/components/fields/PropertyFields/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/src/beta/components/fields/PropertyFields/index.tsx b/web/src/beta/components/fields/PropertyFields/index.tsx
index 8382331fa..b06788058 100644
--- a/web/src/beta/components/fields/PropertyFields/index.tsx
+++ b/web/src/beta/components/fields/PropertyFields/index.tsx
@@ -20,8 +20,7 @@ const PropertyFields: React.FC<Props> = ({ propertyId, item }) => {
       {item?.schemaFields.map(sf => {
         const isList = item && "items" in item;
         const value = !isList ? item.fields.find(f => f.id === sf.id)?.value : sf.defaultValue;
-        const min = sf?.min;
-        const max = sf?.max;
+        const { min, max } = sf;
 
         return sf.type === "string" ? (
           sf.ui === "color" ? (

From a2a2765a636e962ab719022cd09f5b90ea03b1df Mon Sep 17 00:00:00 2001
From: jashan <20891087+jashanbhullar@users.noreply.github.com>
Date: Mon, 4 Sep 2023 13:07:53 +0530
Subject: [PATCH 08/12] - Added tooltip

---
 web/src/beta/components/Slider/index.tsx | 36 +++++++++++++++---------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/web/src/beta/components/Slider/index.tsx b/web/src/beta/components/Slider/index.tsx
index bc80a710e..223491cc9 100644
--- a/web/src/beta/components/Slider/index.tsx
+++ b/web/src/beta/components/Slider/index.tsx
@@ -10,18 +10,21 @@ export type Props = {
   max: number;
 } & Omit<ComponentProps<typeof RCSlider>, "defaultValue">;
 
-// TODO: Show tooltip on hover and drag
+const SliderWithTooltip = RCSlider.createSliderWithTooltip(RCSlider);
+
 const Slider: React.FC<Props> = ({ ...props }) => (
-  <SliderWrapper>
-    <StyledSlider {...props} />
-  </SliderWrapper>
+  <SliderStyled disabled={props.disabled as boolean}>
+    <SliderWithTooltip {...props} />
+  </SliderStyled>
 );
 
-const SliderWrapper = styled.div`
-  border: 1px solid red;
-`;
+const SliderStyled = styled.div<{ disabled: boolean }>`
+  .rc-slider-disabled {
+    background-color: transparent;
+    opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
+    cursor: ${({ disabled }) => (disabled ? "not-allowed" : "inherit")};
+  }
 
-const StyledSlider = styled(RCSlider)`
   .rc-slider-rail {
     height: 8px;
   }
@@ -44,12 +47,19 @@ const StyledSlider = styled(RCSlider)`
     box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25) inset;
   }
 
-  .rc-slider-handle:focus {
-    box-shadow: none;
+  .rc-slider-tooltip-arrow {
+    background-color: transparent;
+    border-top-color: ${({ theme }) => theme.bg[2]};
+    bottom: 2px;
+    margin-left: -8px;
+    border-width: 9px 8px 0;
+  }
+
+  .rc-slider-tooltip-inner {
+    background-color: ${({ theme }) => theme.bg[2]};
+    color: ${({ theme }) => theme.content.main};
+    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
   }
-  background-color: transparent;
-  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
-  cursor: ${({ disabled }) => (disabled ? "not-allowd" : "inherit")};
 `;
 
 export default Slider;

From 891437628f571ce7035bed86367cc399f719107c Mon Sep 17 00:00:00 2001
From: jashan <20891087+jashanbhullar@users.noreply.github.com>
Date: Mon, 4 Sep 2023 13:09:51 +0530
Subject: [PATCH 09/12] - Added tooltip

---
 web/src/beta/components/Slider/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/beta/components/Slider/index.tsx b/web/src/beta/components/Slider/index.tsx
index 223491cc9..1147a175e 100644
--- a/web/src/beta/components/Slider/index.tsx
+++ b/web/src/beta/components/Slider/index.tsx
@@ -5,12 +5,12 @@ import { styled } from "@reearth/services/theme";
 
 import "rc-slider/assets/index.css";
 
+const SliderWithTooltip = RCSlider.createSliderWithTooltip(RCSlider);
+
 export type Props = {
   min: number;
   max: number;
-} & Omit<ComponentProps<typeof RCSlider>, "defaultValue">;
-
-const SliderWithTooltip = RCSlider.createSliderWithTooltip(RCSlider);
+} & Omit<ComponentProps<typeof SliderWithTooltip>, "defaultValue">;
 
 const Slider: React.FC<Props> = ({ ...props }) => (
   <SliderStyled disabled={props.disabled as boolean}>

From 17790cb1b3637a0e1c051e76f157b67e555a40ff Mon Sep 17 00:00:00 2001
From: jashan <20891087+jashanbhullar@users.noreply.github.com>
Date: Tue, 5 Sep 2023 14:16:01 +0530
Subject: [PATCH 10/12] - property field logic fixed

---
 .../fields/PropertyFields/index.tsx           | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/web/src/beta/components/fields/PropertyFields/index.tsx b/web/src/beta/components/fields/PropertyFields/index.tsx
index b961a7820..95614b0e6 100644
--- a/web/src/beta/components/fields/PropertyFields/index.tsx
+++ b/web/src/beta/components/fields/PropertyFields/index.tsx
@@ -21,7 +21,6 @@ const PropertyFields: React.FC<Props> = ({ propertyId, item }) => {
       {item?.schemaFields.map(sf => {
         const isList = item && "items" in item;
         const value = !isList ? item.fields.find(f => f.id === sf.id)?.value : sf.defaultValue;
-        const { min, max } = sf;
 
         return sf.type === "string" ? (
           sf.ui === "color" ? (
@@ -64,15 +63,19 @@ const PropertyFields: React.FC<Props> = ({ propertyId, item }) => {
             onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
           />
         ) : sf.type == "number" ? (
-          <SliderField
-            key={sf.id}
-            name={sf.name}
-            value={value as number}
-            min={min as number}
-            max={max as number}
-            description={sf.description}
-            onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
-          />
+          sf.ui == "slider" ? (
+            <SliderField
+              key={sf.id}
+              name={sf.name}
+              value={value as number}
+              min={sf.min as number}
+              max={sf.max as number}
+              description={sf.description}
+              onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
+            />
+          ) : (
+            <p key={sf.id}>{sf.name} number field</p>
+          )
         ) : (
           <p key={sf.id}>{sf.name} field</p>
         );

From 749c5eacc23c117378f3f68c5001ae9a12e7262e Mon Sep 17 00:00:00 2001
From: jashan <20891087+jashanbhullar@users.noreply.github.com>
Date: Tue, 5 Sep 2023 14:25:54 +0530
Subject: [PATCH 11/12] - Fixed typo error

---
 web/src/beta/components/fields/SliderField/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/beta/components/fields/SliderField/index.tsx b/web/src/beta/components/fields/SliderField/index.tsx
index 86ea2e13d..34a56f886 100644
--- a/web/src/beta/components/fields/SliderField/index.tsx
+++ b/web/src/beta/components/fields/SliderField/index.tsx
@@ -1,10 +1,10 @@
 import Property from "@reearth/beta/components/fields";
-import Slider, { Props as ToggleProps } from "@reearth/beta/components/Slider";
+import Slider, { Props as SliderProps } from "@reearth/beta/components/Slider";
 
 export type Props = {
   name?: string;
   description?: string;
-} & ToggleProps;
+} & SliderProps;
 
 const SliderField: React.FC<Props> = ({ name, description, ...args }: Props) => {
   return (

From 91ddeb644c342cb71509496d1853c8f172b3a3d8 Mon Sep 17 00:00:00 2001
From: jashan <20891087+jashanbhullar@users.noreply.github.com>
Date: Wed, 6 Sep 2023 07:33:56 +0530
Subject: [PATCH 12/12] - triple equals!

---
 web/src/beta/components/fields/PropertyFields/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/beta/components/fields/PropertyFields/index.tsx b/web/src/beta/components/fields/PropertyFields/index.tsx
index 95614b0e6..3926ffb64 100644
--- a/web/src/beta/components/fields/PropertyFields/index.tsx
+++ b/web/src/beta/components/fields/PropertyFields/index.tsx
@@ -54,7 +54,7 @@ const PropertyFields: React.FC<Props> = ({ propertyId, item }) => {
             max={sf.max}
             onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
           />
-        ) : sf.type == "bool" ? (
+        ) : sf.type === "bool" ? (
           <ToggleField
             key={sf.id}
             name={sf.name}
@@ -62,8 +62,8 @@ const PropertyFields: React.FC<Props> = ({ propertyId, item }) => {
             description={sf.description}
             onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
           />
-        ) : sf.type == "number" ? (
-          sf.ui == "slider" ? (
+        ) : sf.type === "number" ? (
+          sf.ui === "slider" ? (
             <SliderField
               key={sf.id}
               name={sf.name}