Merge pull request #2 from jaesung-0o0/develop

[Release/1.0.0-beta.0] Chat in Channel & Appearance

.gitignore

@@ -0,0 +1,51 @@
+.DS_Store
+/.build
+/Packages
+/*.xcodeproj
+xcuserdata/
+DerivedData/
+.swiftpm/config/registries.json
+.swiftpm/xcode/package.xcworkspace/contents.xcworkspacedata
+.netrc
+
+
+Swift.gitignore
+
+build/
+DerivedData/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata/
+
+*.moved-aside
+*.xccheckout
+*.xcscmblueprint
+
+*.hmap
+*.ipa
+*.dSYM.zip
+*.dSYM
+
+# Swift Package Manager
+# Add this line if you want to avoid checking in source code from Swift Package Manager dependencies.
+# Packages/
+# Package.pins
+# Package.resolved
+# .build/
+# Add this line if you want to avoid checking in Xcode SPM integration.
+.swiftpm/xcode
+
+
+*.xcodeproj/*
+!*.xcodeproj/project.pbxproj
+!*.xcodeproj/xcshareddata/
+!*.xcworkspace/contents.xcworkspacedata
+/*.gcno
+
+**/xcshareddata/WorkspaceSettings.xcsettings

Documentation/Appearance/Appearance.md

@@ -0,0 +1,27 @@
+#  Appearance
+
+The `Appearance` struct represents a set of predefined appearances used in the app's user interface such as colors and typography. 
+Use these colors to maintain consistency and familiarity in the user interface.
+
+## Example Usage
+```swift
+@Environment(\.appearance) var appearance
+
+var body: some View {
+   Text("New Chat")
+       .font(appearance.title)
+       .foregroundColor(appearance.primary)
+}
+```
+
+## Customization
+```swift
+let appearance = Appearance(tint: .orange)
+
+var body: some View {
+   ChatView()
+       .environment(\.appearance, appearance)
+}
+```
+
+

Documentation/Appearance/Colors.md

@@ -0,0 +1,18 @@
+#  Colors
+
+| Property Name | Type | Description | Default Value |
+| --- | --- | --- | --- |
+| tint | Color | The main colors used in views provided by ChatUI. | Color(.systemBlue) |
+| primary | Color | The primary label color. | Color.primary |
+| secondary | Color | The secondary label color. | Color.secondary |
+| background | Color | The background color. | Color(.systemBackground) |
+| secondaryBackground | Color | The secondary background color. | Color(.secondarySystemBackground) |
+| localMessageBackground | Color | The background color for local user's message body. | Color(.tintColor) |
+| remoteMessageBackground | Color | The background color for remote user's message body. | Color(.secondarySystemBackground) |
+| imagePlaceholder | Color | The color used in image placeholder. | Color(.secondarySystemBackground) |
+| border | Color | The color used in border. | Color(.secondarySystemBackground) |
+| disabled | Color | The color used for disabled states. | Color.secondary |
+| error | Color | The color used for error states. | Color(.systemRed) |
+| prominent | Color | The prominent color. This color is used for text on prominent buttons. | Color.white |
+| link | Color | The link color. | Color(uiColor: .link) |
+| prominentLink | Color | The link color that is used in prominent views such as local message body. | Color(uiColor: .systemYellow) |

Documentation/Appearance/ImageScales.md

@@ -0,0 +1,58 @@
+#  Image Scales
+
+This Swift extension provides convenient properties to scale `Image`
+ views to predefined sizes. The `scale(_:contentMode:)`
+ method is used to resize an image or other view to a specific size while keeping its aspect ratio.
+
+## Properties
+
+| Property Name | Size | Content Mode |
+| --- | --- | --- |
+| xSmall | 16 x 16 | .fit |
+| xSmall2 | 16 x 16 | .fill |
+| small | 20 x 20 | .fit |
+| small2 | 20 x 20 | .fill |
+| medium | 24 x 24 | .fit |
+| medium2 | 24 x 24 | .fill |
+| large | 36 x 36 | .fit |
+| large2 | 36 x 36 | .fill |
+| xLarge | 48 x 48 | .fit |
+| xLarge2 | 48 x 48 | .fill |
+| xxLarge | 64 x 64 | .fit |
+| xxLarge2 | 64 x 64 | .fill |
+| xxxLarge | 90 x 90 | .fit |
+| xxxLarge2 | 90 x 90 | .fill |
+
+## Method
+
+```swift
+func scale(_ scale: CGSize, contentMode: ContentMode) -> some View
+
+```
+
+**Description**
+
+Scales the view to the specified size while maintaining its aspect ratio.
+
+Use this method to resize an image or other view to a specific size while keeping its aspect ratio.
+
+**Parameters**
+
+| Parameter | Description |
+| --- | --- |
+| scale | The target size for the view, specified as a CGSize. |
+| contentMode | The content mode to use when scaling the view. The default value is ContentMode.aspectFit. |
+
+**Return Value**
+
+A new view that scales the original view to the specified size.
+
+**Example Usage**
+
+```swift
+Image("my-image")
+    .scale(CGSize(width: 100, height: 100), contentMode: .fill)
+```
+
+In this example, the Image view is scaled to a size of `100` points by `100` points while maintaining its aspect ratio. The `contentMode` parameter is set to `.fill`, which means that the image is stretched to fill the available space, possibly cutting off some of the edges.
+

Documentation/Appearance/Images.md

@@ -0,0 +1,37 @@
+#  Images
+
+ChatUI provides image objects as an extension of the Image class in SwiftUI, where each image is created as a static variable with a default value being an image with a specific system name. These image names can be used to display icons, avatars, and other images. The names of these images can be used in the code to display the respective icon for various purposes in the user interface. 
+
+| Property Name | Type | Default Value | Description |
+| --- | --- | --- | --- |
+| menu | Image | Image(systemName: "circle.grid.2x2.fill") | Icon for a menu |
+| camera | Image | Image(systemName: "camera.fill") | Icon for a camera |
+| photoLibrary | Image | Image(systemName: "photo") | Icon for a photo library |
+| mic | Image | Image(systemName: "mic.fill") | Icon for a microphone |
+| giphy | Image | Image(systemName: "face.smiling.fill") | Icon for GIPHY |
+| send | Image | Image(systemName: "paperplane.fill") | Icon for sending a message |
+| buttonHidden | Image | Image(systemName: "chevron.right") | Icon for a hidden button |
+| directionDown | Image | Image(systemName: "chevron.down") | Icon for a downward direction |
+| location | Image | Image(systemName: "location.fill") | Icon for a location |
+| document | Image | Image(systemName: "paperclip") | Icon for a document |
+| music | Image | Image(systemName: "music.note") | Icon for music |
+| sending | Image | Image(systemName: "circle.dotted") | Icon for a message that is currently being sent |
+| sent | Image | Image(systemName: "checkmark.circle") | Icon for a sent message |
+| delivered | Image | Image(systemName: "checkmark.circle.fill") | Icon for a delivered message |
+| failed | Image | Image(systemName: "exclamationmark.circle") | Icon for a failed message |
+| downloadFailed | Image | Image(systemName: "icloud.slash") | Icon for a failed download |
+| close | Image | Image(systemName: "xmark.circle.fill") | Icon for closing a window |
+| flip | Image | Image(systemName: "arrow.triangle.2.circlepath") | Icon for flipping an object |
+| delete | Image | Image(systemName: "trash") | Icon for deleting an object |
+| pause | Image | Image(systemName: "pause.circle.fill") | Icon for pausing an activity |
+| play | Image | Image(systemName: "play.circle.fill") | Icon for playing an activity |
+| person | Image | Image(systemName: "person.crop.circle.fill") | Icon for a person |
+
+The example usage in the code demonstrates how to use these images to display the send icon, by making the icon resizable, setting its size, and clipping it to a circle shape.
+
+```swift
+Image.send
+    .resizable()
+    .frame(width: 100, height: 100)
+    .clipShape(Circle())
+```

Documentation/Appearance/Typography.md

@@ -0,0 +1,9 @@
+#  Typography
+
+| Property Name | Type | Description | Default Value |
+| --- | --- | --- | --- |
+| messageBody | Font | The font used in message's body. | .subheadline |
+| caption | Font | The font used in additional minor information such as date. | .caption |
+| footnote | Font | The font used in additional major information such as sender's name. | .footnote |
+| title | Font | The font used in the title such as the title of the channel in ChannelInfoView. | .headline |
+| subtitle | Font | The font used in the subtitle such as the subtitle of the channel in ChannelInfoView. | .footnote |

Documentation/Chat_in_Channel/ChannelInfoView.md

@@ -0,0 +1,2 @@
+#  ChannelInfoView
+

Documentation/Chat_in_Channel/MessageField.md

@@ -0,0 +1,91 @@
+#  MessageField
+
+The message field is a UI component for sending messages.
+
+## How to send a new message
+
+When creating a `MessageField`, you can provide an action for how to handle a new `MessageStyle` information in the `onSend` parameter. `MessageStyle` can contain different types of messages, such as text, media (photo, video, document, contact), and voice.
+
+```swift
+MessageField { messageStyle in
+    viewModel.sendMessage($0)
+}
+```
+
+### Supported message styles
+
+- [x] text
+- [x] voice
+- [x] photo library
+- [x] giphy
+- [x] location
+- [ ] camera (*coming soon*)
+- [ ] document (*coming soon*)
+- [ ] contacts (*coming soon*)
+
+## Handling menu items
+
+```swift
+MessageField(isMenuItemPresented: $isMenuItemPresented) { ... }
+
+if isMenuItemPresented {
+    MyMenuItemList()
+}
+```
+
+## Sending location
+
+To send a location, you can use the `LocationSelector` component, which presents a UI for the user to select a location. When the user taps the send location button, the `onSend` action of the `MessageField` is called.
+
+> **NOTE:** 
+>
+> If you want to use `sendMessagePublisher` instead `onSend`, please refer to [Sending a new message by using publisher](https://www.notion.so/ChatUI-ab3dddb98c44434d993c96ae9da6b929#d918e619224147958c840e678c93890a)
+
+```swift
+@State private var showsLocationSelector: Bool = false
+
+var body: some View {
+    LocationSelector(isPresented: $showsLocationSelector)
+}
+```
+
+## Sending a new message by using publisher
+
+```swift
+public var sendMessagePublisher: PassthroughSubject<MessageStyle, Never>
+```
+
+`sendMessagePublisher` is a Combine `Publisher` that passes `MessageStyle` object.
+
+### How to publish
+
+To publish a new message, you can create a new `MessageStyle` object and send it using `send(_:)`.
+
+```swift
+let _ = Empty<Void, Never>()
+    .sink(
+        receiveCompletion: { _ in
+            // Create `MessageStyle` object
+            let style = MessageStyle.text("{TEXT}")
+            // Publish the created style object via `send(_:)`
+            sendMessagePublisher.send(style)
+        },
+        receiveValue: { _ in }
+    )
+```
+
+### How to subscribe
+
+You can subscribe to `sendMessagePublisher` to handle new messages.
+
+```swift
+.onReceive(sendMessagePublisher) { messageStyle in
+    // Handle `messageStyle` here (e.g., sending message with the style)
+}
+```
+
+### Use cases
+- rating system
+- answering by defined message
+
+- - -

Documentation/Chat_in_Channel/MessageList.md

@@ -0,0 +1,37 @@
+# MessageList
+
+## Lists messages in row contents
+
+In the constructor, you can list message objects that conform to `MessageProtocol` to display messages using the `rowContent` parameter.
+
+All the body and row contents are flipped vertically so that new messages can be listed from the bottom.
+
+The messages are listed in the following order, depending on the `readReceipt` value of the `MessageProtocol`. For more details, please refer to `MessageProtocol/readReceipt` or `ReadReceipt`.
+
+sending → failed → sent → delivered → seen
+
+## Scrolls to bottom
+
+When a new message is sent or the scroll button is tapped, the view automatically scrolls to the bottom. You can also scroll the message list in other situations using the `scrollDownPublisher` by subscribing to it. See the following examples for how to use it.
+
+### How to publish
+
+```swift
+let _ = Empty<Void, Never>()
+    .sink(
+        receiveCompletion: { _ in
+            scrollDownPublisher.send(())
+        },
+        receiveValue: { _ in }
+    )
+```
+
+### How to subscribe
+
+```swift
+.onReceive(scrollDownPublisher) { _ in
+    withAnimation {
+        scrollView.scrollTo(id, anchor: .bottom)
+    }
+}
+```

Documentation/Chat_in_Channel/MessageRow.md

@@ -0,0 +1,22 @@
+#  MessageRow
+
+## Displays message content
+
+This is a view that is provided by default in ChatUI to display message information.
+
+It shows the following information:
+
+- Message content
+- Message sent date
+- Message sender information
+- Message delivery status
+
+## Message Delivery Status
+
+The message delivery status can be one of the following:
+
+- sending
+- failed
+- sent
+- delivered
+- seen

Package.resolved

@@ -0,0 +1,23 @@
+{
+  "pins" : [
+    {
+      "identity" : "giphy-ios-sdk",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/Giphy/giphy-ios-sdk",
+      "state" : {
+        "revision" : "699483a3a2b534e9dc3a3ab85a9f7095e306bde1",
+        "version" : "2.2.2"
+      }
+    },
+    {
+      "identity" : "libwebp-xcode",
+      "kind" : "remoteSourceControl",
+      "location" : "https://github.com/SDWebImage/libwebp-Xcode",
+      "state" : {
+        "revision" : "4f52fc9b29600a03de6e05af16df0d694cb44301",
+        "version" : "1.2.4"
+      }
+    }
+  ],
+  "version" : 2
+}