@amityco/ui-kit-open-source 3.6.0 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/ui-kit-open-source",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "engines": {
     "node": ">=16",
     "pnpm": ">=8"
@@ -13,6 +13,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/esm/index.js",
       "default": "./dist/index.js"
+    },
+    "./dist/index.css": {
+      "import": "./dist/esm/index.css",
+      "default": "./dist/index.css"
     }
   },
   "files": [
@@ -29,17 +33,18 @@
     "test:watch": "jest --watch",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build --output-dir ./storybook-build",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
+    "lint": "eslint . && stylelint \"**/*.css\"",
+    "stylelint": "stylelint",
+    "lint:fix": "eslint . --fix && stylelint \"**/*.css\" --fix",
     "tsc": "tsc"
   },
   "peerDependencies": {
-    "@amityco/ts-sdk": "~6.21.0",
+    "@amityco/ts-sdk": "^6.27.0",
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2"
   },
   "devDependencies": {
-    "@amityco/ts-sdk": "^6.26.0",
+    "@amityco/ts-sdk": "^6.27.0",
     "@storybook/addon-a11y": "^7.6.7",
     "@storybook/addon-actions": "^7.6.7",
     "@storybook/addon-backgrounds": "^7.6.7",
@@ -65,7 +70,8 @@
     "@typescript-eslint/eslint-plugin": "^6.18.0",
     "@typescript-eslint/parser": "^6.18.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.19",
+    "browserslist": "^4.23.0",
     "esbuild-plugin-replace": "^1.4.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
@@ -75,7 +81,7 @@
     "husky": "^8.0.3",
     "jest": "^29.7.0",
     "lint-staged": "^13.3.0",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.38",
     "prettier": "2.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -83,6 +89,9 @@
     "standard-version": "^9.5.0",
     "storybook": "^7.6.7",
     "styled-components": "^6.1.6",
+    "stylelint": "^16.6.1",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-no-unsupported-browser-features": "^8.0.1",
     "svg-url-loader": "^7.1.1",
     "ts-jest": "^29.1.1",
     "tsup": "^7.3.0",
@@ -97,8 +106,10 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^3.3.4",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@tanstack/react-query": "^5.28.14",
     "clsx": "^2.1.0",
+    "dayjs": "^1.11.11",
     "extract-colors": "^4.0.2",
     "filesize": "^9.0.11",
     "framer-motion": "^11.1.7",
@@ -107,12 +118,17 @@
     "linkifyjs": "^4.1.3",
     "lodash": "^4.17.21",
     "millify": "^6.1.0",
+    "modern-normalize": "^2.0.0",
     "polished": "^4.3.1",
+    "react-aria": "^3.33.1",
+    "react-aria-components": "^1.2.1",
     "react-hook-form": "^7.49.2",
     "react-infinite-scroll-component": "^6.1.0",
+    "react-insta-stories": "^2.6.2",
     "react-intl": "^6.5.5",
     "react-loading-skeleton": "^3.3.1",
     "react-mentions": "^4.4.10",
+    "react-modal-sheet": "^2.2.0",
     "react-sizeme": "^3.0.2",
     "react-textarea-autosize": "^8.5.3",
     "react-timeago": "^7.2.0",
@@ -121,11 +137,13 @@
     "react-use": "^17.4.2",
     "stylis": "^4.3.1",
     "uuid": "^8.3.2",
+    "vaul": "^0.9.1",
     "zod": "^3.22.4"
   },
   "lint-staged": {
-    "*.{js,jsx}": "eslint --cache --fix",
-    "*.{json,md}": "prettier --write"
+    "*.{js,jsx,ts,tsx}": "eslint --cache --fix",
+    "*.{json,md,css}": "prettier --write",
+    "*.{css}": "stylelint --fix"
   },
   "postcss": {
     "plugins": {

package/readme.md

@@ -0,0 +1,136 @@
+# Amity UI-Kit for Web (Open-Source)
+
+## Prerequisites
+
+Before getting started, ensure that you have the following prerequisites installed on your system:
+
+- [Node.js](https://nodejs.org/) LTS version (currently version 20)
+- [pnpm](https://pnpm.io/) version 8
+
+## How to install PNPM (Optional)
+
+```
+corepack enable pnpm
+```
+
+Ref: https://pnpm.io/installation#using-corepack
+
+## Running Storybook (Optional)
+
+To run Storybook and view the UI components in isolation, follow these steps:
+
+1. Clone the Amity UI-Kit repository:
+
+   ```
+   git clone https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git
+   ```
+
+2. Navigate to the cloned repository's directory:
+
+   ```
+   cd Amity-Social-Cloud-UIKit-Web-OpenSource
+   ```
+
+3. Install the dependencies using pnpm:
+
+   ```
+   pnpm install
+   ```
+
+4. Create a `.env` file at the root of the project with the following content:
+
+   ```
+   STORYBOOK_API_REGION=<API_REGION>
+   STORYBOOK_API_KEY=<API_KEY>
+   ```
+
+   Replace `<API_REGION>` and `<API_KEY>` with your actual credentials.
+
+5. Run Storybook:
+
+   ```
+   pnpm run storybook
+   ```
+
+6. Open your browser and navigate to `http://localhost:6006` to view the Storybook interface.
+
+## Installation
+
+To install the Amity UI-Kit together with another project, follow these steps:
+
+1. Clone the repository using the following command:
+
+   ```
+   git clone https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git
+   ```
+
+2. Navigate to the cloned repository's directory:
+
+   ```
+   cd ./Amity-Social-Cloud-UIKit-Web-OpenSource
+   ```
+
+3. Install the dependencies using pnpm:
+
+   ```
+   pnpm install
+   ```
+
+4. Build the project:
+
+   ```
+   pnpm run build
+   ```
+
+5. Pack the project
+
+   ```
+   pnpm pack
+   ```
+
+6. Navigate to your application's directory:
+
+   ```
+   cd <path-to-your-app>
+   ```
+
+7. Install the Amity UI-Kit to your application using one of the following package managers:
+   - NPM:
+     ```
+     npm i file:<path-to-amity-ui-kit-repository>/<path-to-tgz-file> --save
+     ```
+   - Yarn (Classic):
+     ```
+     yarn add file:<path-to-amity-ui-kit-repository>/<path-to-tgz-file>
+     ```
+   - PNPM:
+     ```
+     pnpm i file:<path-to-amity-ui-kit-repository>/<path-to-tgz-file>
+     ```
+
+## Documentation
+
+For detailed information and guidance on using the Amity UI-Kit, please refer to our comprehensive online documentation available at [https://docs.amity.co](https://docs.amity.co).
+
+If you require further assistance or have any questions, please don't hesitate to contact our dedicated UI-Kit support team at **developers@amity.co**. We are here to help you make the most of the Amity UI-Kit.
+
+## Contributing
+
+We welcome contributions from the community to help improve and enhance the Amity UI-Kit. If you are interested in contributing to this project, please review our [contributing guide](https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource/blob/develop/contributing.md) for guidelines and best practices.
+
+Thank you for choosing the Amity UI-Kit for your web development needs!
+
+### FAQ
+
+Q: I tried to run `pnpm build` and it throws a types error.
+A: Try to structure your project to be like this:
+
+```
+- your_app
+  - src
+- Amity-Social-Cloud-UIKit-Web-OpenSource
+  - src
+```
+
+Q: The modifications I made to the code do not appear to be applied.
+A: Please attempt to execute `npm cache clean` or `npm cache clean --force` to resolve this issue.