From d63ac36e8ca191717a17616ddadae2caac9e8d88 Mon Sep 17 00:00:00 2001
From: galangel <gal0angel@gmail.com>
Date: Wed, 15 Jan 2025 23:34:58 +0200
Subject: [PATCH] No tailwind

---
 README.md                                | 13 ++++----
 package.json                             |  6 +---
 src/components/Scroll/Scroll.stories.tsx | 16 +++++-----
 src/components/Scroll/ScrollHeader.tsx   |  4 +--
 src/components/Scroll/ScrollItem.tsx     |  6 +---
 src/components/Scroll/ScrollList.tsx     |  6 +---
 src/index.css                            | 38 ++++++++++++++++++++++--
 src/utils/cn.ts                          |  6 ----
 8 files changed, 53 insertions(+), 42 deletions(-)
 delete mode 100644 src/utils/cn.ts

diff --git a/README.md b/README.md
index 2e530f7..5425e44 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,6 @@ The Scroll Magic Component is a React component that provides smooth scrolling f
 
 - sticky headers in both directions
 - scroll to header by click
-- support tailwind
 - typescript
 
 ## Installation
@@ -37,14 +36,14 @@ import { ScrollComponent } from 'react-scroll-magic';
 
 const App = () => {
   return (
-    <ScrollComponent>
-      <ScrollHeader>
+    <Scroll>
+      <Scroll.Header>
         <h1>Scroll down to see the magic!</h1>
-      </ScrollHeader>
-      <ScrollItem>
+      </Scroll.Header>
+      <Scroll.Item>
         <p>Keep scrolling...</p>
-      </ScrollItem>
-    </ScrollComponent>
+      </Scroll.Item>
+    </Scroll>
   );
 };
 
diff --git a/package.json b/package.json
index 756402d..d7a20fd 100644
--- a/package.json
+++ b/package.json
@@ -27,14 +27,10 @@
     "prepare": "npm run build",
     "storybook": "storybook dev -p 6006"
   },
-  "peerDependencies": {
+  "dependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
-  "dependencies": {
-    "clsx": "^2.1.0",
-    "tailwind-merge": "^2.2.1"
-  },
   "devDependencies": {
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
diff --git a/src/components/Scroll/Scroll.stories.tsx b/src/components/Scroll/Scroll.stories.tsx
index efcf78f..17c0bdd 100644
--- a/src/components/Scroll/Scroll.stories.tsx
+++ b/src/components/Scroll/Scroll.stories.tsx
@@ -1,7 +1,5 @@
 import { Meta, Story } from '@storybook/react';
-import { Scroll } from './Scroll';
-import { ScrollHeader } from './ScrollHeader';
-import { ScrollItem } from './ScrollItem';
+import { Scroll } from './index';
 
 export default {
   title: 'Components/Scroll',
@@ -11,21 +9,21 @@ export default {
 const BunchOfItems = ({ numberOfItems }: { numberOfItems: number }) => {
   const items = Array.from({ length: numberOfItems }, (_, i) => i);
   return items.map((item) => (
-    <ScrollItem key={item} style={{ height: '20px', backgroundColor: '#b0b0b0' }}>
+    <Scroll.Item key={item} style={{ height: '20px', backgroundColor: '#b0b0b0' }}>
       Content {item}
-    </ScrollItem>
+    </Scroll.Item>
   ));
 };
 
 const Template: Story = (args) => (
   <Scroll style={{ height: '200px', width: '200px', overflow: 'auto', fontSize: '10px' }} {...args}>
-    <ScrollHeader style={{ height: '20px', backgroundColor: '#ce7ba4', width: '100%' }}>Header 1</ScrollHeader>
+    <Scroll.Header style={{ height: '20px', backgroundColor: '#ce7ba4', width: '100%' }}>Header 1</Scroll.Header>
     <BunchOfItems numberOfItems={20} />
-    <ScrollHeader style={{ height: '20px', backgroundColor: '#f58383', width: '100%' }}>Header 2</ScrollHeader>
+    <Scroll.Header style={{ height: '20px', backgroundColor: '#f58383', width: '100%' }}>Header 2</Scroll.Header>
     <BunchOfItems numberOfItems={20} />
-    <ScrollHeader style={{ height: '20px', backgroundColor: '#4378b8', width: '100%' }}>Header 3</ScrollHeader>
+    <Scroll.Header style={{ height: '20px', backgroundColor: '#4378b8', width: '100%' }}>Header 3</Scroll.Header>
     <BunchOfItems numberOfItems={20} />
-    <ScrollHeader style={{ height: '20px', backgroundColor: '#61d771', width: '100%' }}>Header 4</ScrollHeader>
+    <Scroll.Header style={{ height: '20px', backgroundColor: '#61d771', width: '100%' }}>Header 4</Scroll.Header>
     <BunchOfItems numberOfItems={20} />
   </Scroll>
 );
diff --git a/src/components/Scroll/ScrollHeader.tsx b/src/components/Scroll/ScrollHeader.tsx
index a8569d5..5406e44 100644
--- a/src/components/Scroll/ScrollHeader.tsx
+++ b/src/components/Scroll/ScrollHeader.tsx
@@ -35,9 +35,9 @@ export const ScrollHeader: React.FC<IScrollHeaderProps> = ({ children, style = {
   return (
     <li
       onClick={handleClick}
-      className={`${className} sticky flex box-border border-none list-none p-0 m-0 w-full z-10 cursor-pointer ${stickTo === 'top' || stickTo === 'all' ? 'top-0' : ''} ${stickTo === 'bottom' || stickTo === 'all' ? 'bottom-0' : ''}`}
+      className={`scroll-header ${className}`}
       style={{ ...style, top, bottom }}
-      aria-label="Accordion Header"
+      aria-label="Scroll Header"
       role="heading"
       aria-level={1}
       {...props}
diff --git a/src/components/Scroll/ScrollItem.tsx b/src/components/Scroll/ScrollItem.tsx
index 5fa5b50..aa147af 100644
--- a/src/components/Scroll/ScrollItem.tsx
+++ b/src/components/Scroll/ScrollItem.tsx
@@ -6,11 +6,7 @@ export const ScrollItem: React.FC<React.PropsWithChildren<React.LiHTMLAttributes
   ...props
 }) => {
   return (
-    <li
-      role="listitem"
-      className={`${className} flex w-full box-border relative p-0 m-0 border-none list-none`}
-      {...props}
-    >
+    <li role="listitem" aria-label="Scroll Item" className={`scroll-item ${className}`} {...props}>
       {children}
     </li>
   );
diff --git a/src/components/Scroll/ScrollList.tsx b/src/components/Scroll/ScrollList.tsx
index c7d6395..f127be7 100644
--- a/src/components/Scroll/ScrollList.tsx
+++ b/src/components/Scroll/ScrollList.tsx
@@ -17,11 +17,7 @@ export const ScrollList: React.FC<React.PropsWithChildren<React.LiHTMLAttributes
   }, [listRef]);
 
   return (
-    <ul
-      ref={listRef}
-      className={`${className} box-border h-full m-0 p-0 w-full list-inside overflow-x-hidden overflow-y-scroll relative`}
-      {...props}
-    >
+    <ul ref={listRef} className={`scroll-list ${className}`} {...props}>
       {children}
     </ul>
   );
diff --git a/src/index.css b/src/index.css
index b5c61c9..f4e0095 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,35 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+.scroll-list {
+  box-sizing: border-box;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  list-style-position: inside;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  position: relative;
+}
+
+.scroll-header {
+  position: sticky;
+  display: flex;
+  box-sizing: border-box;
+  border: none;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  z-index: 10;
+  cursor: pointer;
+}
+
+.scroll-item {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+  padding: 0;
+  margin: 0;
+  border: none;
+  list-style: none;
+}
diff --git a/src/utils/cn.ts b/src/utils/cn.ts
deleted file mode 100644
index 2819a83..0000000
--- a/src/utils/cn.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}