chore(web): Add story background setting

web/src/beta/components/fields/ColorField/index.tsx

@@ -16,7 +16,7 @@ import { Props, RGBA } from "./types";
 const channels = ["r", "g", "b", "a"];
 const hexPlaceholder = "#RRGGBBAA";
 
-const ColorField: React.FC<Props> = ({ name, description, value, onChange }) => {
+const ColorField: React.FC<Props> = ({ name, description, value, onChange, className }) => {
   const t = useT();
   const theme = useTheme();
   const {
@@ -37,7 +37,7 @@ const ColorField: React.FC<Props> = ({ name, description, value, onChange }) =>
   } = useHooks({ value, onChange });
 
   return (
-    <Property name={name} description={description}>
+    <Property name={name} description={description} className={className}>
       <Wrapper ref={wrapperRef}>
         <Popover.Provider open={open} placement="bottom-start">
           <Popover.Trigger asChild>

web/src/beta/components/fields/ColorField/types.ts

@@ -1,5 +1,6 @@
 // Component Props
 export type Props = {
+  className?: string;
   name?: string;
   description?: string;
   value?: string;

web/src/beta/components/fields/SelectField/index.tsx

@@ -14,6 +14,7 @@ export type SelectValue = {
 };
 
 export type Props = {
+  className?: string;
   options?: SelectValue[];
   onChange: (key: string) => void;
   value?: string;
@@ -25,6 +26,7 @@ export type Props = {
 };
 
 const SelectField: React.FC<Props> = ({
+  className,
   options,
   onChange,
   value,
@@ -51,7 +53,7 @@ const SelectField: React.FC<Props> = ({
   }, [options, value]);
 
   return (
-    <Property name={name} description={description}>
+    <Property name={name} description={description} className={className}>
       <Popover.Provider open={open} placement="bottom-start" onOpenChange={handlePopOver}>
         <Popover.Trigger asChild>
           <InputWrapper disabled={disabled} onClick={handlePopOver}>

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

@@ -8,11 +8,12 @@ type Props = {
   name?: string;
   description?: string;
   children: ReactNode;
+  className?: string;
 };
 
-const Property: React.FC<Props> = ({ name, description, children }) => {
+const Property: React.FC<Props> = ({ name, description, children, className }) => {
   return (
-    <Wrapper>
+    <Wrapper className={className}>
       {name && <Text size="footnote">{name}</Text>}
       {children}
       {description && (

web/src/beta/features/Editor/Visualizer/convert-story.ts

@@ -41,6 +41,7 @@
     id: story.id,
     title: story.title,
     position: story.panelPosition === "RIGHT" ? "right" : "left",
+    bgColor: story.bgColor ?? "#f1f1f1",
     pages: storyPages(story.pages),
   };
 };
@@ -120,7 +121,7 @@
   original: PropertyGroupFragmentFragment | null | undefined,
   linkedDatasetId: string | null | undefined,
   datasets: DatasetMap | null | undefined,
 ): any => {
   const allFields: Record<
     string,
     {

web/src/beta/features/Editor/Visualizer/hooks.ts

@@ -149,7 +149,7 @@
   // Plugin
   const pluginProperty = useMemo(
     () =>
       scene?.plugins.reduce<{ [key: string]: any }>(
         (a, b) => ({ ...a, [b.pluginId]: processProperty(b.property) }),
         {},
       ),
@@ -166,7 +166,7 @@
       vt: T,
       selectedLayer?: Layer,
     ) => {
       const propertyId = (selectedLayer?.infobox?.blocks?.find(b => b.id === blockId) as any)
         ?.propertyId as string | undefined;
       if (!propertyId) return;
 
@@ -205,7 +205,6 @@
     () => convertStory(scene?.stories.find(s => s.id === storyId)),
     [storyId, scene?.stories],
   );
-
   const handleCurrentPageChange = useCallback(
     (pageId?: string) => selectSelectedStoryPageId(pageId),
     [selectSelectedStoryPageId],

web/src/beta/features/ProjectSettings/innerPages/StorySettings/StorySettingsDetail.tsx

@@ -2,9 +2,11 @@ import { useCallback, useState } from "react";
 
 import Button from "@reearth/beta/components/Button";
 import Collapse from "@reearth/beta/components/Collapse";
+import ColorField from "@reearth/beta/components/fields/ColorField";
 import SelectField from "@reearth/beta/components/fields/SelectField";
 import { Position } from "@reearth/services/gql";
 import { useT } from "@reearth/services/i18n";
+import { styled } from "@reearth/services/theme";
 
 import { SettingsFields, ButtonWrapper } from "../common";
 
@@ -21,12 +23,13 @@ const StorySettingsDetail: React.FC<Props> = ({ settingsItem, onUpdateStory }) =
   const [localPanelPosition, setLocalPanelPosition] = useState<Position | undefined>(
     settingsItem.panelPosition,
   );
-
+  const [backgroundColor, setBackgroundColor] = useState<string | undefined>(settingsItem?.bgColor);
   const handleSubmit = useCallback(() => {
     onUpdateStory({
       panelPosition: localPanelPosition,
+      bgColor: backgroundColor,
     });
-  }, [localPanelPosition, onUpdateStory]);
+  }, [backgroundColor, localPanelPosition, onUpdateStory]);
 
   const options = [
     {
@@ -42,12 +45,19 @@ const StorySettingsDetail: React.FC<Props> = ({ settingsItem, onUpdateStory }) =
   return (
     <Collapse title={t("Story Panel")} alwaysOpen>
       <SettingsFields>
-        <SelectField
-          name={t("Panel Position")}
-          value={localPanelPosition}
-          options={options}
-          onChange={value => setLocalPanelPosition(value as Position)}
-        />
+        <FieldsWrapper>
+          <SelectFieldWrapper
+            name={t("Panel Position")}
+            value={localPanelPosition}
+            options={options}
+            onChange={value => setLocalPanelPosition(value as Position)}
+          />
+          <ColorFieldWrapper
+            name={t("Background Color")}
+            value={backgroundColor}
+            onChange={value => setBackgroundColor(value)}
+          />
+        </FieldsWrapper>
         <ButtonWrapper>
           <Button
             text={t("Submit")}
@@ -63,3 +73,16 @@ const StorySettingsDetail: React.FC<Props> = ({ settingsItem, onUpdateStory }) =
 };
 
 export default StorySettingsDetail;
+
+const FieldsWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  gap: 8px;
+`;
+const SelectFieldWrapper = styled(SelectField)`
+  width: 100%;
+`;
+const ColorFieldWrapper = styled(ColorField)`
+  width: 100%;
+`;

web/src/beta/features/ProjectSettings/innerPages/StorySettings/index.tsx

@@ -9,6 +9,7 @@ import StorySettingsDetail from "./StorySettingsDetail";
 
 export type StorySettingsType = {
   panelPosition?: Position;
+  bgColor?: string;
 };
 
 type Props = {
@@ -35,7 +36,6 @@ const StorySettings: React.FC<Props> = ({
       })),
     [stories, projectId],
   );
-
   return (
     <InnerPage wide>
       <InnerMenu>
@@ -54,7 +54,10 @@ const StorySettings: React.FC<Props> = ({
         ) : (
           <StorySettingsDetail
             key={currentStory.id}
-            settingsItem={currentStory}
+            settingsItem={{
+              ...currentStory,
+              bgColor: currentStory.bgColor as string,
+            }}
             onUpdateStory={onUpdateStory}
           />
         )}

web/src/beta/features/PublishedVisualizer/hooks.ts

@@ -153,6 +153,7 @@ export default (alias?: string) => {
           id: s.id,
           title: s.title,
           position: s.position,
+          bgColor: s.bgColor,
           pages: s.pages.map(p => {
             return {
               id: p.id,

web/src/beta/features/PublishedVisualizer/types.ts

@@ -19,6 +19,7 @@ export type Story = {
   title?: string;
   position: "left" | "right";
   pages: StoryPage[];
+  bgColor?: string;
 };
 
 export type StoryPage = {

web/src/beta/lib/core/StoryPanel/index.tsx

@@ -77,9 +77,8 @@ export const StoryPanel = memo(
         },
         ref,
       );
-
       return (
-        <PanelWrapper>
+        <PanelWrapper bgColor={selectedStory?.bgColor}>
           {!!pageInfo && (
             <PageIndicator
               currentPage={pageInfo.currentPage}
@@ -114,8 +113,8 @@ export const StoryPanel = memo(
 
 export default StoryPanel;
 
-const PanelWrapper = styled.div`
+const PanelWrapper = styled.div<{ bgColor?: string }>`
   flex: 0 0 ${STORY_PANEL_WIDTH}px;
-  background: #f1f1f1;
+  background: ${({ bgColor }) => bgColor};
   color: ${({ theme }) => theme.content.weak};
 `;

web/src/beta/lib/core/StoryPanel/types.ts

@@ -3,6 +3,7 @@ export type Position = "left" | "right";
 export type Story = {
   id: string;
   title?: string;
+  bgColor?: string;
   position: Position;
   pages: StoryPage[];
 };

web/src/services/gql/__gen__/gql.ts

@@ -24,7 +24,7 @@ const documents = {
     "\n  fragment PluginFragment on Plugin {\n    id\n    name\n    extensions {\n      extensionId\n      description\n      name\n      translatedDescription(lang: $lang)\n      translatedName(lang: $lang)\n      icon\n      singleOnly\n      type\n      widgetLayout {\n        extendable {\n          vertically\n          horizontally\n        }\n        extended\n        floating\n        defaultLocation {\n          zone\n          section\n          area\n        }\n      }\n    }\n  }\n": types.PluginFragmentFragmentDoc,
     "\n  fragment ProjectFragment on Project {\n    id\n    name\n    description\n    imageUrl\n    isArchived\n    isBasicAuthActive\n    basicAuthUsername\n    basicAuthPassword\n    publicTitle\n    publicDescription\n    publicImage\n    alias\n    publishmentStatus\n    updatedAt\n    coreSupport\n  }\n": types.ProjectFragmentFragmentDoc,
     "\n  fragment PropertySchemaFieldFragment on PropertySchemaField {\n    fieldId\n    title\n    description\n    translatedTitle(lang: $lang)\n    translatedDescription(lang: $lang)\n    prefix\n    suffix\n    type\n    defaultValue\n    ui\n    min\n    max\n    choices {\n      key\n      icon\n      title\n      translatedTitle(lang: $lang)\n    }\n    isAvailableIf {\n      fieldId\n      type\n      value\n    }\n  }\n\n  fragment PropertySchemaGroupFragment on PropertySchemaGroup {\n    schemaGroupId\n    title\n    collection\n    translatedTitle(lang: $lang)\n    isList\n    representativeFieldId\n    isAvailableIf {\n      fieldId\n      type\n      value\n    }\n    fields {\n      ...PropertySchemaFieldFragment\n    }\n  }\n\n  fragment PropertyFieldFragment on PropertyField {\n    id\n    fieldId\n    type\n    value\n    links {\n      ...PropertyFieldLink\n    }\n  }\n\n  fragment PropertyGroupFragment on PropertyGroup {\n    id\n    schemaGroupId\n    fields {\n      ...PropertyFieldFragment\n    }\n  }\n\n  fragment PropertyItemFragment on PropertyItem {\n    ... on PropertyGroupList {\n      id\n      schemaGroupId\n      groups {\n        ...PropertyGroupFragment\n      }\n    }\n    ... on PropertyGroup {\n      ...PropertyGroupFragment\n    }\n  }\n\n  fragment PropertyFragmentWithoutSchema on Property {\n    id\n    items {\n      ...PropertyItemFragment\n    }\n  }\n\n  fragment PropertyFragment on Property {\n    id\n    ...PropertyFragmentWithoutSchema\n    schema {\n      id\n      groups {\n        ...PropertySchemaGroupFragment\n      }\n    }\n  }\n\n  fragment MergedPropertyGroupCommonFragment on MergedPropertyGroup {\n    schemaGroupId\n    fields {\n      fieldId\n      type\n      actualValue\n      overridden\n      links {\n        ...PropertyFieldLink\n      }\n    }\n  }\n\n  fragment MergedPropertyGroupFragment on MergedPropertyGroup {\n    ...MergedPropertyGroupCommonFragment\n    groups {\n      ...MergedPropertyGroupCommonFragment\n    }\n  }\n\n  fragment MergedPropertyFragmentWithoutSchema on MergedProperty {\n    originalId\n    parentId\n    linkedDatasetId\n    groups {\n      ...MergedPropertyGroupFragment\n    }\n  }\n\n  fragment MergedPropertyFragment on MergedProperty {\n    ...MergedPropertyFragmentWithoutSchema\n    schema {\n      id\n    }\n  }\n\n  fragment PropertyFieldLink on PropertyFieldLink {\n    datasetId\n    datasetSchemaId\n    datasetSchemaFieldId\n  }\n": types.PropertySchemaFieldFragmentFragmentDoc,
-    "\n  fragment StoryFragment on Story {\n    id\n    title\n    panelPosition\n    isBasicAuthActive\n    basicAuthUsername\n    basicAuthPassword\n    alias\n    publicTitle\n    publicDescription\n    publishmentStatus\n    publicImage\n    publicNoIndex\n    pages {\n      ...StoryPageFragment\n    }\n  }\n": types.StoryFragmentFragmentDoc,
+    "\n  fragment StoryFragment on Story {\n    id\n    title\n    panelPosition\n    bgColor\n    isBasicAuthActive\n    basicAuthUsername\n    basicAuthPassword\n    alias\n    publicTitle\n    publicDescription\n    publishmentStatus\n    publicImage\n    publicNoIndex\n    pages {\n      ...StoryPageFragment\n    }\n  }\n": types.StoryFragmentFragmentDoc,
     "\n  fragment StoryPageFragment on StoryPage {\n    id\n    title\n    swipeable\n    propertyId\n    property {\n      id\n      ...PropertyFragment\n    }\n    layersIds\n    blocks {\n      id\n      pluginId\n      extensionId\n      property {\n        id\n        ...PropertyFragment\n      }\n    }\n  }\n": types.StoryPageFragmentFragmentDoc,
     "\n  query GetAssets($teamId: ID!, $sort: AssetSortType, $keyword: String, $pagination: Pagination) {\n    assets(teamId: $teamId, keyword: $keyword, sort: $sort, pagination: $pagination) {\n      edges {\n        cursor\n        node {\n          id\n          teamId\n          name\n          size\n          url\n          contentType\n        }\n      }\n      nodes {\n        id\n        teamId\n        name\n        size\n        url\n        contentType\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      totalCount\n    }\n  }\n": types.GetAssetsDocument,
     "\n  mutation CreateAsset($teamId: ID!, $file: Upload!) {\n    createAsset(input: { teamId: $teamId, file: $file }) {\n      asset {\n        id\n        teamId\n        name\n        size\n        url\n        contentType\n      }\n    }\n  }\n": types.CreateAssetDocument,
@@ -138,7 +138,7 @@ export function gql(source: "\n  fragment PropertySchemaFieldFragment on Propert
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function gql(source: "\n  fragment StoryFragment on Story {\n    id\n    title\n    panelPosition\n    isBasicAuthActive\n    basicAuthUsername\n    basicAuthPassword\n    alias\n    publicTitle\n    publicDescription\n    publishmentStatus\n    publicImage\n    publicNoIndex\n    pages {\n      ...StoryPageFragment\n    }\n  }\n"): (typeof documents)["\n  fragment StoryFragment on Story {\n    id\n    title\n    panelPosition\n    isBasicAuthActive\n    basicAuthUsername\n    basicAuthPassword\n    alias\n    publicTitle\n    publicDescription\n    publishmentStatus\n    publicImage\n    publicNoIndex\n    pages {\n      ...StoryPageFragment\n    }\n  }\n"];
+export function gql(source: "\n  fragment StoryFragment on Story {\n    id\n    title\n    panelPosition\n    bgColor\n    isBasicAuthActive\n    basicAuthUsername\n    basicAuthPassword\n    alias\n    publicTitle\n    publicDescription\n    publishmentStatus\n    publicImage\n    publicNoIndex\n    pages {\n      ...StoryPageFragment\n    }\n  }\n"): (typeof documents)["\n  fragment StoryFragment on Story {\n    id\n    title\n    panelPosition\n    bgColor\n    isBasicAuthActive\n    basicAuthUsername\n    basicAuthPassword\n    alias\n    publicTitle\n    publicDescription\n    publishmentStatus\n    publicImage\n    publicNoIndex\n    pages {\n      ...StoryPageFragment\n    }\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */