chore(web): Slider Field

web/src/beta/components/Slider/index.stories.tsx

@@ -1,13 +1,51 @@
-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 { 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>
+        <Slider {...args} onChange={handleChange} />
+      </div>
+      <div>
+        <Slider {...args} max={2 * args.max} onChange={handleChange} />
+      </div>
+      <div>
+        <Slider {...args} disabled={true} onChange={handleChange} />
+      </div>
+    </Wrapper>
+  );
+};
+
+Default.args = {
+  value: 50,
+  min: 0,
+  max: 100,
+  step: 1,
+  disabled: 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;
+`;

web/src/beta/components/Slider/index.tsx

@@ -1,52 +1,55 @@
 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";
 
-type Props = {
+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}>
+// TODO: Show tooltip on hover and drag
+const Slider: React.FC<Props> = ({ ...props }) => (
+  <SliderWrapper>
     <StyledSlider {...props} />
-  </Wrapper>
+  </SliderWrapper>
 );
 
-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;
-    `};
+const SliderWrapper = styled.div`
+  border: 1px solid red;
 `;
 
 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;

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";
@@ -19,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" ? (
@@ -50,6 +53,16 @@ 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}
+            min={min as number}
+            max={max as number}
+            description={sf.description}
+            onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
+          />
         ) : (
           <p key={sf.id}>{sf.name} field</p>
         );

web/src/beta/components/fields/SliderField/index.stories.tsx

@@ -0,0 +1,67 @@
+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="Inverse of above"
+          value={args.max - (args?.value || 0)}
+          description={undefined}
+          onChange={handleChange}
+        />
+      </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"),
+};

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;