➕ Added jotai for state management

🐛 Added scope to prevent atomSharing between multiple custoplayers

Author: Etesam913

.prettierrc

@@ -1,7 +1,7 @@
 {
   "semi": true,
   "tabWidth": 2,
-  "printWidth": 100,
+  "printWidth": 80,
   "singleQuote": true,
   "trailingComma": "all",
   "jsxSingleQuote": true,

packages/custoplayer/package.json

@@ -10,6 +10,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
+    "jotai": "^1.13.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "styled-components": "5.3.5"
@@ -39,7 +40,8 @@
   "peerDependencies": {
     "react": "16.8.0 || 17.x",
     "react-dom": "16.8.0 || 17.x",
-    "styled-components": "5.0.0"
+    "styled-components": "5.0.0",
+    "jotai": "1.13.1"
   },
   "files": [
     "dist"

packages/custoplayer/src/App.tsx

@@ -4,9 +4,7 @@ import MyButton from './lib/MyButton';
 function App() {
   return (
     <Wrapper>
-      <MyButton>Click me</MyButton>
-      <MyButton>Click me</MyButton>
-      <MyButton>Click me</MyButton> <MyButton>Click me</MyButton>
+      <MyButton></MyButton>
     </Wrapper>
   );
 }

packages/custoplayer/src/lib/MyButton.stories.tsx

@@ -2,14 +2,14 @@ import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
 import MyButton from './MyButton';
 
 const meta: ComponentMeta<typeof MyButton> = {
-    title: 'Design System/MyButton',
-    component: MyButton,
+  title: 'Design System/MyButton',
+  component: MyButton,
 };
 export default meta;
 
 export const Primary: ComponentStoryObj<typeof MyButton> = {
-    args: {
-        disabled: false,
-        children: 'Hello',
-    },
+  args: {
+    disabled: false,
+    children: 'Hello',
+  },
 };

packages/custoplayer/src/lib/MyButton.tsx

@@ -1,6 +1,27 @@
 import styled from 'styled-components';
+import { Provider, atom, useAtom } from 'jotai';
+import { useMemo } from 'react';
 
-const MyButton = styled.button`
+const countAtom = atom(0);
+
+function MyButton() {
+  /* 
+    Scope is required to prevent two custoplayer's
+    from sharing the same atoms
+  */
+  const myScope = useMemo(() => {
+    return Symbol();
+  }, []);
+  const [count, setCount] = useAtom(countAtom, myScope);
+  return (
+    <Provider scope={myScope}>
+      <StyledButton onClick={() => setCount((prev) => prev + 1)}>
+        {count}
+      </StyledButton>
+    </Provider>
+  );
+}
+const StyledButton = styled.button`
   border: none;
   border-radius: 0.5rem;
   background-color: green;

sites/my-site/src/App.tsx

@@ -3,12 +3,11 @@ import { MyButton } from 'custoplayer';
 import './App.css';
 
 function App() {
-  const [count, setCount] = useState(0);
-
   return (
     <div className='App'>
       <p>
-        <MyButton onClick={() => setCount((count) => count + 1)}>Click here!</MyButton>
+        <MyButton>Click here!</MyButton>
+        <MyButton>Click here!</MyButton>
       </p>
     </div>
   );

yarn.lock

@@ -7029,6 +7029,11 @@ jest-worker@^27.4.5:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
+jotai@^1.13.1:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/jotai/-/jotai-1.13.1.tgz#20cc46454cbb39096b12fddfa635b873b3668236"
+  integrity sha512-RUmH1S4vLsG3V6fbGlKzGJnLrDcC/HNb5gH2AeA9DzuJknoVxSGvvg8OBB7lke+gDc4oXmdVsaKn/xDUhWZ0vw==
+
 js-string-escape@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"