docs: update README.md (#1093)

- Since Storybook is no longer used for development purposes and a new
app for testing purposes has been added, we are updating the
documentation.

README.md

@@ -1,4 +1,4 @@
-# sendbird-uikit
+# @sendbird/uikit-react
 
 [![Platform React](https://img.shields.io/badge/Platform-React-orange.svg)](https://reactjs.org)
 [![Language TypeScript](https://img.shields.io/badge/Language-TypeScript-orange.svg)](https://www.typescriptlang.org/)
@@ -41,35 +41,31 @@ You need to install:
 * [nodejs](https://nodejs.org/en/download/) 18>=
 * npm 9>= or yarn 3>=
 
-### Development
+
+## Development
 
-We use storybook for development and rollup for building the npm distribution(bundled JS file)
-Make sure you have nodejs and yarn(or npm) installed and run
+We use vite app for development and rollup for building the npm distribution(bundled JS file)
+Make sure you have nodejs and yarn installed and run
 
-> Make a copy of .env.example and save it as .env 
-> Set your appId `STORYBOOK_APP_ID`
+> Make a copy of `apps/testing/.env.example` and save it as `apps/testing/.env` 
+> Set your appId to `VITE_APP_ID`
 
-```
+```shell
 yarn install
-yarn storybook
-```
-or
-```
-npm install
-npm run storybook
+yarn dev
 ```
 
-* By default, storybook opens in http://localhost:6006/
-* Smart Components such as ChannelList, Channel, ChannelSetting, App can be found under `OTHERS`
-* Dumb components such as inputs, buttons etc can be found under `OTHERS/UI Components` in storybook sidebar
-* Overridden storybook configs can be found in: `./storybook`
+* By default, vite app opens in http://localhost:5173/
+* Please refer to the following link for more details: [Link](apps/testing/README.md)
 
-### Husky
+### Storybook
 
-We use Husky for githooks
+We provide a Storybook to easily view and understand the components.
+<br/>https://sendbird.github.io/sendbird-uikit-react/
 
-To enable Husky in local, run:
-`yarn husky install` or `npx husky install`
+```shell
+yarn storybook
+```
 
 ### Build
 
@@ -80,69 +76,31 @@ We have both `ESM` and `CJS` output
 ```
 yarn build
 ```
-or
-```
-npm run build
-```
 
 The bundled JS code can be found in `./dist`
 The CSS is in `./dist/dist/index.css`
 
 **Caveats**
- - We tried development on Mac OS / Linux systems. You might encounter problems in running `yarn build` or `npm run build` in Windows machines
+ - We tried development on Mac OS / Linux systems. You might encounter problems in running `yarn build`  in Windows machines
 
-## Running the tests
+### Tests
 
 We have implemented tests for dumb ui components only. Technologies used: Jest and testing-library
 
 ```
 yarn test
 ```
-or
-```
-npm run test
-```
 
 ### Lint
 
 ```
 yarn lint
 ```
-or
-```
-npm run lint
-```
-
-* .eslintrc.json lints ts files and .eslintrc.js lints js files
-
-### Webpack 5
-
-Webpack 5 removes stream and buffer componets from default polyfill
-To enable these, install buffer and stream and then add the following to webpack.cofig.js
-```javascript
-module.exports = {
-  //...
-  resolve: {
-    fallback: {
-      buffer: require.resolve('buffer'),
-      stream: require.resolve('stream-browserify'),
-    },
-  },
-};
-
-```
-To read more: https://webpack.js.org/configuration/resolve/#resolvefallback
 
 ### Creating/Exporting New Components
 
 1. Define your component inside `./src`.
-2. ~~Add the following line to `./src/index.ts`:~~
-    ```
-    export { default as NewComponent } from './src/location/of/NewComponent';
-    ```
-    - Will be imported as: `import { NewComponent } from '@sendbird/uikit-react';`
-    - We don't do this anymore for new components; we prefer fine-grained exports (as in step 3).
-3. Add the following line to `./rollup.module-exports.js`:
+2. Add the following line to `./rollup.module-exports.js`:
     ```
     'NewComponent/SubComponent': 'location/of/NewComponent/SubComponent',
     ```

apps/testing/README.md

@@ -1,30 +1,14 @@
-# React + TypeScript + Vite
+## Development App
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+This app is used for development purposes, and when a PR is created, the preview of this app is provided via Netlify.
 
-Currently, two official plugins are available:
+### Page Structure
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- `/`: This is the main page. Feel free to develop on the PlaygroundPage.
+- `/group_channel`: This is the group channel page. It's used for QA or testing purposes, so please modify only if necessary.
+- `/open_channel`: This is the open channel page. It's used for QA or testing purposes, so please modify only if necessary.
+- `/url-builder`: You can dynamically set the app ID or enable/disable specific features by extracting URL parameters.
 
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+### App settings
+- All app pages can change the app's settings through query params in the URL. (Easily extractable from the url-builder page)
+- To add specific features via query params, modify the `utils/paramsBuilder.ts` file.

apps/testing/src/App.tsx

@@ -1,31 +1,13 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-
-import GroupChannelApp from '../../../src/modules/App';
-import OpenChannelApp from '../../../src/modules/OpenChannelApp';
-
-import { InitialParams, useConfigParams } from './utils/paramsBuilder.ts';
-import { URLBuilder } from './URLBuilder.tsx';
-
-const defaultProps: InitialParams = {
-  appId: import.meta.env.VITE_APP_ID,
-  userId: import.meta.env.VITE_USER_ID ?? 'test',
-  accessToken: import.meta.env.VITE_ACCESS_TOKEN,
-};
-
-function GroupChannelPage() {
-  const props = useConfigParams(defaultProps);
-  return <GroupChannelApp {...props} breakpoint={/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)} config={{ logLevel: 'all' }} />;
-}
-
-function OpenChannelPage() {
-  const props = useConfigParams(defaultProps);
-  return <OpenChannelApp {...props} />;
-}
+import { URLBuilderPage } from './pages/URLBuilderPage.tsx';
+import { GroupChannelPage } from './pages/GroupChannelPage.tsx';
+import { OpenChannelPage } from './pages/OpenChannelPage.tsx';
+import { PlaygroundPage } from './pages/PlaygroundPage.tsx';
 
 const router = createBrowserRouter([
   {
     path: '/',
-    element: <GroupChannelPage />,
+    element: <PlaygroundPage />,
   },
   {
     path: '/group_channel',
@@ -37,7 +19,7 @@ const router = createBrowserRouter([
   },
   {
     path: '/url-builder',
-    element: <URLBuilder />,
+    element: <URLBuilderPage />,
   },
 ]);
 

apps/testing/src/libs/const.ts

@@ -0,0 +1,7 @@
+import { InitialParams } from '../utils/paramsBuilder.ts';
+
+export const defaultProps: InitialParams = {
+  appId: import.meta.env.VITE_APP_ID,
+  userId: import.meta.env.VITE_USER_ID ?? 'test',
+  accessToken: import.meta.env.VITE_ACCESS_TOKEN,
+};

apps/testing/src/pages/GroupChannelPage.tsx

@@ -0,0 +1,8 @@
+import { useConfigParams } from '../utils/paramsBuilder.ts';
+import GroupChannelApp from '../../../../src/modules/App';
+import { defaultProps } from '../libs/const.ts';
+
+export function GroupChannelPage() {
+  const props = useConfigParams(defaultProps);
+  return <GroupChannelApp {...props} breakpoint={/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)} config={{ logLevel: 'all' }} />;
+}

apps/testing/src/pages/OpenChannelPage.tsx

@@ -0,0 +1,8 @@
+import { useConfigParams } from '../utils/paramsBuilder.ts';
+import OpenChannelApp from '../../../../src/modules/OpenChannelApp';
+import { defaultProps } from '../libs/const.ts';
+
+export function OpenChannelPage() {
+  const props = useConfigParams(defaultProps);
+  return <OpenChannelApp {...props} />;
+}

apps/testing/src/pages/PlaygroundPage.tsx

@@ -0,0 +1,8 @@
+import { useConfigParams } from '../utils/paramsBuilder.ts';
+import GroupChannelApp from '../../../../src/modules/App';
+import { defaultProps } from '../libs/const.ts';
+
+export function PlaygroundPage() {
+  const props = useConfigParams(defaultProps);
+  return <GroupChannelApp {...props} breakpoint={/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)} config={{ logLevel: 'all' }} />;
+}

apps/testing/src/URLBuilder.tsx → apps/testing/src/pages/URLBuilderPage.tsx

@@ -1,10 +1,10 @@
-import { paramKeys } from './utils/paramsBuilder.ts';
+import { paramKeys } from '../utils/paramsBuilder.ts';
 import React, { useEffect } from 'react';
 
 const appConfigs = ['appId', 'userId', 'nickname', 'enableProfileEdit', 'enableMultipleFilesMessage'];
 const uikitConfigs = [...paramKeys];
 
-export function URLBuilder() {
+export function URLBuilderPage() {
   useEffect(() => {
     uikitConfigs.forEach((label) => {
       const elem = document.getElementsByName(label)[0];

package.json

@@ -33,6 +33,7 @@
     "node": ">=18"
   },
   "scripts": {
+    "dev": "yarn start:apps:testing",
     "test": "jest",
     "test-update-snapshot": "jest -u",
     "test:coverage": "yarn test --coverage",