Merge pull request #1168 from GetStream/remove-scss

Remove sass files and draw styles from stream-chat-css

Author: DanC5

.stylelintignore

@@ -93,7 +93,7 @@ For components that implement significant logic, it's helpful to split the compo
 The preferred method for overriding the pre-defined styles in the library is to two step process. First, import our bundled CSS into the file where you instantiate your chat application. Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults. For example:
 
 ```js
-import 'stream-chat-react/dist/css/index.css';
+import 'stream-chat-css/dist/css/index.css';
 import './App.css';
 ```
 

README.md

@@ -188,7 +188,7 @@ import {
   Thread,
   Window,
 } from 'stream-chat-react';
-import 'stream-chat-react/dist/css/index.css';
+import 'stream-chat-css/dist/css/index.css';
 
 const filters = { type: 'messaging' };
 const options = { state: true, presence: true, limit: 10 };

docusaurus/docs/React/basics/getting-started.mdx

@@ -135,7 +135,7 @@ export const CustomPreview = (props: ChannelPreviewUIComponentProps) => {
 Let's take advantage of the SDK's [CSS classes](../customization/css-and-theming.mdx) for styling. We'll import the bundled CSS into the file where the application is instantiated then apply a class to the button element.
 
 ```tsx
-import 'stream-chat-react/dist/css/index.css';
+import 'stream-chat-css/dist/css/index.css';
 
 <div
   className={'str-chat__channel-preview-messenger'}

docusaurus/docs/React/custom-code-examples/channel-list-preview.mdx

@@ -20,7 +20,8 @@ default container CSS.
 
 To override pre-defined library styles, follow this simple process:
 
-- Import our bundled CSS into the file where you instantiate your chat application
+- Import our bundled CSS into the file where you instantiate your chat application. We maintain a separate repository, `stream-chat-css`,
+  which houses all of the SCSS files for the components.
 
 - Use the browser inspector or view the library code and locate default styles you wish to override
 
@@ -31,7 +32,7 @@ To override pre-defined library styles, follow this simple process:
 For example:
 
 ```jsx
-import 'stream-chat-react/dist/css/index.css';
+import 'stream-chat-css/dist/css/index.css';
 import './App.css';
 ```
 

docusaurus/docs/React/customization/css-and-theming.mdx

@@ -10,7 +10,7 @@ import {
   Thread,
   Window,
 } from 'stream-chat-react';
-import 'stream-chat-react/dist/css/index.css';
+import 'stream-chat-css/dist/css/index.css';
 import './App.css';
 
 const apiKey = process.env.REACT_APP_STREAM_KEY as string;

examples/capacitor/src/App.tsx

@@ -11421,6 +11421,11 @@ stream-browserify@^2.0.1:
     inherits "~2.0.1"
     readable-stream "^2.0.2"
 
+[email protected]:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-css/-/stream-chat-css-1.0.0.tgz#4bb204825edb8931784fb414253e284b2a2cb273"
+  integrity sha512-PqV7ikbV9WsWDjc48RolSHdCtdKC6U/zmmz2V8ZhTPz6DV1dpmkQnd0mKoSSi7jlmtwHzGEEQyCtzg/396tbwg==
+
 "stream-chat-react@link:../..":
   version "0.0.0"
   uid ""

examples/capacitor/yarn.lock

@@ -1,5 +1,5 @@
 // pages/_app.js
-import 'stream-chat-react/dist/css/index.css';
+import 'stream-chat-css/dist/css/index.css';
 import './App.css';
 
 export default function MyApp({ Component, pageProps }) {

examples/nextjs/pages/_app.js

@@ -10749,6 +10749,11 @@ stream-browserify@^2.0.1:
     inherits "~2.0.1"
     readable-stream "^2.0.2"
 
+[email protected]:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-css/-/stream-chat-css-1.0.0.tgz#4bb204825edb8931784fb414253e284b2a2cb273"
+  integrity sha512-PqV7ikbV9WsWDjc48RolSHdCtdKC6U/zmmz2V8ZhTPz6DV1dpmkQnd0mKoSSi7jlmtwHzGEEQyCtzg/396tbwg==
+
 "stream-chat-react@link:../..":
   version "0.0.0"
   uid ""

examples/nextjs/yarn.lock

@@ -10,7 +10,7 @@ import {
   Thread,
   Window,
 } from 'stream-chat-react';
-import 'stream-chat-react/dist/css/index.css';
+import 'stream-chat-css/dist/css/index.css';
 import './App.css';
 
 const apiKey = process.env.REACT_APP_STREAM_KEY as string;