feat: ASC-17988 - view create delete story (#110)

* fix: change communityFeed to community

* Revert "chore: refactor"

This reverts commit b95505efdbae870ba5e4d2c44d8190ed353bf671.

* chore: remove unused mock data and recoil

* chore: add meta file when build

* fix: add required dataLength

* fix: fix Avatar style

* chore: ASC-0000 - deprecated withSDK

* chore: fix types

* feat: change return type of useLiveCollection from array to object and fix bugs

* fix: useLiveCollection

* chore: update useSize

* fix: Chat

* fix: remove any and fix bugs

* chore: remove unused code

* chore: refactor post

* chore: livestream -> liveStream

* chore: update deps

* chore: add eslint-disable on postcss.config.js

* chore: refactoring

* feat: CategoryCommunities

* feat: Edit Community #1

* chore: upgrade storybook

* feat: Edit Community #2

* feat: Edit Community #3

* feat: social to typescript

* feat: js -> ts,tsx

* feat: fix mention highlighter

* chore: fix types

* fix: comment and community

* feat: fix UserSelector

* feat: remove react-intl-formatted-duration

* fix: fix react-loading-skeleton

* fix: update tsup.config.ts

* fix: update pnpm-lock.yaml

* feat: update storybook

* feat: upgrade @amityco/ts-sdk and move to deps

* fix: fix usePostHeaderProps

* fix: fix bugs

* chore: upgrade storybook

* fix: fix ASC-18323 and ASC-18331

* fix: fix ASC-18325 Community Navigation

* fix: react-intl and comments

* fix: ASC-18338

* fix: post and comment bugs

* fix: fix type and cleanup console.log

* fix: fix UserSelector

* feat: singleton observer

* feat: cache data for 2s to prevent 429

* fix: postCreator size

* chore: remove console.log

* chore: upgrade storybook

* feat: fix thumbnail and convert them to typescript

* fix: fix create community ASC-18323

* fix: fix type and some bugs

* fix: fix type

* fix: fix storybook build

* fix: fix story hook

* feat: new CustomComponentsProvider

* fix: ASC-18853

* fix: fix storybook build

* fix: undefined error on useFollowCount

* fix: image and post creation

* fix: like button

* chore: optimistic like button

* fix: type

* chore: remove console.log

* fix: mentioned post creation and display

* fix: MyCommunitySidebar

* fix: community info and edit community

* chore: remove console.log

* chore: lazy loading and refactoring

* fix: fix type

* fix: hide leave chat button for conversation chat

* fix: onCreateSuccess callback

* fix: post video creation

* chore: update file uploader

* fix: post image gallery

* fix: community avatar uploader

* chore: delete commented code

* fix: avatar on community list

* feat: implement StoryViewer component

* feat: add format time ago function for story

* feat: add useStories hook

* feat: add custom ts sdk and react-insta-stories

* feat: add react-spring-bottomsheet

* fix: add story of StoryViewer

* fix: add StoryViewer types

* fix: edit post

* feat: bring back postRenderer and refactor flagged

* chore: reduce request amount

* feat: add v4 icons for story

* fix: import

* fix: story

* fix: styles

* feat: upgrade @amityco/ts-sdk

* fix: draft story

* fix: permissions

* chore: upgrade storybook

* fix: post creator and editor and mention

* fix: remove console.log

* fix: remove unused

* fix: fix user mention

* fix: remove bottom sheet

* fix: add loading and error to stories hook

* fix: remove unused

* fix: px to rem

* fix: extract color

* fix: props

* fix: subscribeTopic and globalSubscribeTopic

* fix: comment mention

* fix: comment mention

* fix: liveStream

* fix: followers followings

* fix: update user profile

* fix: followers followings

* fix: default comment limit

* fix: upgrade react-hook-form to fix edit community issue

* fix: style

* fix: type

* fix: style

* fix: remove query condition

* fix: import

* fix: setImageMode

* fix: gradient bg

* fix: chat

* fix: grid layout

* fix: mentions

* fix: chat avatar

* fix: type

* fix: add null to currentStory

* fix: props and types

* fix: add icon props

* fix: useStories hook

* feat: ASC-18036 add json config

* fix: react error

* fix: storybook fullscreen centered ui

* fix: add error handling

* fix: user mention

* chore: remove prop-types import

* chore: remove prop-types

* chore: fix types

* chore: update deps

* fix: leave chat behavior

* fix: mention width

* feat: ASC-17988 view story

* fix: story title style

* fix: story ring

* fix: remove avatar overlay

* fix: update ts sdk custom build

* fix: story draft linear gradient

* feat: add/edit chat members

* fix: update stories hook type

* feat: amity uikit config

* fix: modal sheet create portal  on story container

* fix: add onClickCreateStory prop

* fix: remove unused type

* fix: add video on draft story

* fix: add story ring with haveStories state

* fix: action sheet

* fix: remove unused

* fix: component props

* fix: add actions prop

* fix: button border-radius

* feat: add socialSettings

* chore: apiKey and apiRegion inputs

* feat: bring back old hooks and fix bugs

* fix: revert UiKitDecorator

* fix: update packages

* fix: remove line story

* fix: remove unused

* fix: update icons

* fix: update navigation param

* fix: remove unused

* fix: update close icon

* fix: story viewer tap backdrop to close

* fix: story viewer close icon

* fix: update i18n

* fix: remove unused

* feat: update code based on docs

* fix: create story

* feat: update @amityco/ts-sdk deps

* fix: story draft

* fix: add pause and play button

* fix: update i18n

* fix: add error icon

* fix: add error state for story tab

* fix: moved story state

* fix: story error state

* fix: story viewer avatar

* feat: upgrade @amityco/ts-sdk to 6.16

* feat: add type declaration file

* fix: typings

* fix: community should close after all story end

* fix: next prev story logic

* chore: clean

* fix: remove console.log

* fix: isSeen

* fix: story sort

* fix: story pause play button

* fix: story avatar

* fix: export

* fix: remove props type

* fix: mobile sidenav

* fix: move styled component

* fix: mobile side menu

* fix: side menu close button

* fix: close icon

* fix: add story control button

* fix: deps

* fix: show gradient bg from image

* fix: add type

* fix: remove console.log

* fix: replace old cover with linear gradient

* fix: notification show at bottom for mobile

* fix: add error and uploading ui

* fix: add uploading and error notification

* fix: story footer default state

* fix: navigate story

* fix: border radius on story draft

* fix: last story to navigate back

* fix: navigate when all stories end

* fix: handle error and uploading state

* fix: handle stories error

* fix: all stories end navigate logic

* fix: delete story logic

* fix: support story for mobile

* fix: pause

* fix: arrow logic

* fix: image mode

* fix: types

* fix: action item

* fix: notification for mobile

* fix: move targetRootId

* fix: add isCreator prop

* fix: cleanup

* fix: remove console.log from navigation

* fix: sidemenu

* fix: toast

* fix: remove unused

* fix: remove console.log

* fix: cleanup

* fix: toast

---------

Co-authored-by: Bonn <[email protected]>

.storybook/main.ts

@@ -9,7 +9,6 @@ const config: StorybookConfig = {
     '@storybook/addon-controls',
     '@storybook/addon-viewport',
     '@storybook/addon-toolbars',
-
     '@storybook/addon-a11y',
   ],
   framework: '@storybook/react-vite',

amity-uikit.config.json

@@ -0,0 +1,162 @@
+{
+  "global_theme": {
+    "light_theme": {
+      "primary_color": "#1D1234",
+      "secondary_color": "#AB1234"
+    }
+  },
+  "excludes": [],
+  "customizations": {
+    "page-id/*/*": {
+      "background_color": "#1234DB"
+    },
+    "page-id/component-id/*": {
+      "background_color": "#123456"
+    },
+    "page-id/component-id/element-id": {
+      "icon": "icon1",
+      "background_color": "#654321"
+    },
+    "page-id/*/element-id": {
+      "icon": "icon2",
+      "background_color": "#aabbcc"
+    },
+    "*/component-id/*": {
+      "background_color": "#456456"
+    },
+    "*/*/element-id": {
+      "icon": "icon3",
+      "background_color": "#AB1234"
+    },
+    "*/component-id/element-id": {
+      "icon": "icon4",
+      "background_color": "#ffddaa"
+    },
+    "select_target_page": {
+      "page_theme": {
+        "light_theme": {
+          "primary_color": "#1D1234",
+          "secondary_color": "#AB1234"
+        }
+      },
+      "title": "Share to"
+    },
+    "select_target_page/*/back_button": {
+      "back_icon": "back"
+    },
+    "camera_page": {
+      "resolution": "720p"
+    },
+    "camera_page/*/close_button": {
+      "close_icon": "close"
+    },
+    "create_story_page": {},
+    "create_story_page/*/back_button": {
+      "back_icon": "back",
+      "background_color": "#1234DB"
+    },
+    "create_story_page/*/aspect_ratio_button": {
+      "aspect_ratio_icon": "aspect_ratio",
+      "background_color": "#1234DB"
+    },
+    "create_story_page/*/story_hyperlink_button": {
+      "hyperlink_button_icon": "hyperlink_button",
+      "background_color": "#1234DB"
+    },
+    "create_story_page/*/hyper_link": {
+      "hyper_link_icon": "hyper_link",
+      "background_color": "#1234DB"
+    },
+    "create_story_page/*/share_story_button": {
+      "share_icon": "share_story_button",
+      "background_color": "#1234DB",
+      "hide_avatar": false
+    },
+    "story_page": {},
+    "story_page/*/progress_bar": {
+      "progress_color": "#FFFFFF",
+      "background_color": "#50FFFFFF"
+    },
+    "story_page/*/overflow_menu": {
+      "overflow_menu_icon": "threeDot"
+    },
+    "story_page/*/close_button": {
+      "close_icon": "close"
+    },
+    "story_page/*/story_impression_button": {
+      "impression_icon": "impression"
+    },
+    "story_page/*/story_comment_button": {
+      "comment_icon": "comment",
+      "background_color": "#1234DD"
+    },
+    "story_page/*/story_reaction_button": {
+      "reaction_icon": "like",
+      "background_color": "#1243EE"
+    },
+    "story_page/*/create_new_story_button": {
+      "create_new_story_icon": "plus",
+      "background_color": "#1243EE"
+    },
+    "story_page/*/speaker_button": {
+      "mute_icon": "mute",
+      "unmute_icon": "unmute",
+      "background_color": "#1243EE"
+    },
+    "*/edit_comment_component/*": {
+      "component_theme": {
+        "light_theme": {
+          "primary_color": "#1D1234",
+          "secondary_color": "#AB1234"
+        }
+      }
+    },
+    "*/edit_comment_component/cancel_button": {
+      "cancel_icon": "",
+      "cancel_button_text": "cancel",
+      "background_color": "#1243EE"
+    },
+    "*/edit_comment_component/save_button": {
+      "save_icon": "",
+      "save_button_text": "Save",
+      "background_color": "#1243EE"
+    },
+    "*/hyper_link_config_component/*": {
+      "component_theme": {
+        "light_theme": {
+          "primary_color": "#1D1234",
+          "secondary_color": "#AB1234"
+        }
+      }
+    },
+    "*/hyper_link_config_component/done_button": {
+      "done_icon": "",
+      "done_button_text": "Done",
+      "background_color": "#1243EE"
+    },
+    "*/hyper_link_config_component/cancel_button": {
+      "cancel_icon": "",
+      "cancel_button_text": "Cancel"
+    },
+    "*/comment_tray_component/*": {
+      "component_theme": {
+        "light_theme": {
+          "primary_color": "#1D1234",
+          "secondary_color": "#AB1234"
+        }
+      }
+    },
+    "*/story_tab_component/*": {},
+    "*/story_tab_component/story_ring": {
+      "progress_color": ["#339AF9", "#78FA58"],
+      "background_color": ["#EBECEF"]
+    },
+    "*/story_tab_component/create_new_story_button": {
+      "create_new_story_icon": "plus",
+      "background_color": "#1243EE"
+    },
+    "*/*/close_button": {
+      "close_icon": "close"
+    }
+  }
+}

package.json

@@ -59,6 +59,7 @@
     "@types/lodash": "^4.14.202",
     "@types/prop-types": "^15.7.11",
     "@types/react": "^17.0.74",
+    "@types/react-dom": "^18.2.18",
     "@types/react-helmet": "^6.1.11",
     "@types/react-infinite-scroller": "^1.2.5",
     "@types/react-mentions": "^4.1.13",
@@ -100,6 +101,7 @@
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^3.3.4",
     "clsx": "^2.1.0",
+    "extract-colors": "^4.0.2",
     "filesize": "^9.0.11",
     "hls.js": "^1.4.14",
     "linkify-react": "^4.1.3",
@@ -109,6 +111,8 @@
     "polished": "^4.2.2",
     "react-hook-form": "^7.49.2",
     "react-infinite-scroll-component": "^6.1.0",
+    "react-insta-stories": "^2.6.2",
+    "react-modal-sheet": "^2.2.0",
     "react-intl": "^6.5.5",
     "react-loading-skeleton": "^3.3.1",
     "react-mentions": "^4.4.10",