From dbb2afc58bec905349255d5005c830a6440cd07a Mon Sep 17 00:00:00 2001 From: galangel Date: Sun, 26 Jan 2025 23:36:22 +0200 Subject: [PATCH 1/3] Add Storybook welcome page with usage instructions and infinite scroll support --- .storybook/preview-head.html | 11 ++ src/welcome.stories.tsx | 230 +++++++++++++++++++++++++++++++++-- 2 files changed, 233 insertions(+), 8 deletions(-) create mode 100644 .storybook/preview-head.html diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 0000000..ec693ff --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1,11 @@ + diff --git a/src/welcome.stories.tsx b/src/welcome.stories.tsx index 9bf3a04..3eee811 100644 --- a/src/welcome.stories.tsx +++ b/src/welcome.stories.tsx @@ -1,15 +1,229 @@ -import React from 'react'; +import React, { CSSProperties } from 'react'; import { Meta, StoryObj } from '@storybook/react'; +import { Scroll } from './components'; +import { Item, Items } from './components/Scroll/types'; +const headerRender = + (title: string, style: CSSProperties = {}, showCollapse: boolean = false): Item['render'] => + ({ collapse }) => { + return ( +
+ {title} + {showCollapse && ( + + )} +
+ ); + }; + +const itemRender = + (text: string, style: CSSProperties = {}): Item['render'] => + () => { + return ( + + {text} + + ); + }; +const codeRender = + (code: string, style: CSSProperties = {}): Item['render'] => + () => { + return ( + 
+        
+          {code}
+        
+
+ ); + }; const WelcomePage: React.FC = () => { + const items: Items = [ + { + render: headerRender('Welcome to React Scroll Magic', { fontSize: '30px' }), + nestedItems: [ + { + render: + itemRender(` This Storybook showcases the React Scroll Magic component, which allows you to create magical scroll + interactions in your React applications. Explore the stories to see various examples and learn how to use the + component effectively.`), + }, + ], + }, + { + render: headerRender('Usage Instructions'), + nestedItems: [ + { + render: headerRender('1. Install the Scroll Component using npm or yarn:'), + nestedItems: [ + { + render: codeRender('npm install react-scroll-magic', { fontFamily: 'monospace' }), + }, + { + render: itemRender('or', { textAlign: 'center' }), + }, + { + render: codeRender('yarn add react-scroll-magic', { fontFamily: 'monospace' }), + }, + ], + }, + { + render: headerRender('2. Import the Scroll Component in your React application:'), + nestedItems: [ + { + render: codeRender('import { Scroll } from "react-scroll-magic";', { + fontFamily: 'monospace', + }), + }, + ], + }, + { + render: headerRender('3. Use the Scroll Component in your JSX:'), + nestedItems: [ + { + render: codeRender( + 'const items = [\n' + + ' { render: () =>
Item 1
},\n' + + ' { render: () =>
Item 2
},\n' + + '];\n\n' + + '\n', + { fontFamily: 'monospace' }, + ), + }, + ], + }, + { + render: headerRender('4. Customize the Scroll Component using props:'), + nestedItems: [ + { + render: codeRender( + '', + { fontFamily: 'monospace' }, + ), + }, + ], + }, + ], + }, + { + render: headerRender('Loading More Items'), + nestedItems: [ + { + render: headerRender('The Scroll component supports infinite scrolling by using the `loading` prop.'), + nestedItems: [ + { + render: headerRender('1. Define a state to keep track of the items and loading status:'), + nestedItems: [ + { + render: codeRender( + 'const [items, setItems] = useState(initialItems);\n' + + 'const [isLoading, setIsLoading] = useState(false);\n', + { fontFamily: 'monospace' }, + ), + }, + ], + }, + { + render: headerRender('2. Create a function to load more items:'), + nestedItems: [ + { + render: codeRender( + 'const loadMoreItems = async () => {\n' + + ' setIsLoading(true);\n' + + ' const newItems = await fetchMoreItems();\n' + + ' setItems((prevItems) => [...prevItems, ...newItems]);\n' + + ' setIsLoading(false);\n' + + '};', + { fontFamily: 'monospace' }, + ), + }, + ], + }, + { + render: headerRender('3. Pass the `loading` prop to the Scroll component:'), + nestedItems: [ + { + render: codeRender( + ' isLoading ?
Loading...
:
End of list
,\n' + + ' }}\n' + + '/>', + { fontFamily: 'monospace' }, + ), + }, + { + render: itemRender( + 'The `onBottomReached` function is called when the user scrolls to the bottom of the list.', + ), + }, + { + render: itemRender( + 'The optional `render` function displays a loading indicator while new items are being fetched.', + ), + }, + ], + }, + ], + }, + ], + }, + ]; return ( -
-

Welcome to React Scroll Magic

-

- This Storybook showcases the React Scroll Magic component, which allows you to create magical scroll - interactions in your React applications. Explore the stories to see various examples and learn how to use the - component effectively. -

+
+
); }; From c4051f5c376bbe943e3ffbb9ace09f117de333c5 Mon Sep 17 00:00:00 2001 From: galangel Date: Sun, 26 Jan 2025 23:43:02 +0200 Subject: [PATCH 2/3] Update README and Storybook examples to reflect package name change to @galangel/react-scroll-magic --- README.md | 41 ++++++++++++++++++++++++++--------------- src/welcome.stories.tsx | 6 +++--- 2 files changed, 29 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 5425e44..6703033 100644 --- a/README.md +++ b/README.md @@ -17,13 +17,13 @@ The Scroll Magic Component is a React component that provides smooth scrolling f To install the Scroll Component, use npm or yarn: ```bash -npm install react-scroll-magic +npm i @galangel/react-scroll-magic ``` or ```bash -yarn add react-scroll-magic +yarn add @galangel/react-scroll-magic ``` ## Usage @@ -32,18 +32,18 @@ Here is a basic example of how to use the Scroll Component in your React applica ```jsx import React from 'react'; -import { ScrollComponent } from 'react-scroll-magic'; +import { ScrollComponent } from '@galangel/react-scroll-magic'; const App = () => { return ( - - -

Scroll down to see the magic!

- - -

Keep scrolling...

- - + ); }; @@ -54,10 +54,21 @@ export default App; The Scroll Component accepts the following props: -| Prop | Type | Description | -| ---------------- | ----------------------------- | ------------------------------------------------------ | -| `stickTo` | `top`\|`bottom`\|`all` | how headers should stick | -| `scrollBehavior` | `scrollBehavior CSS property` | how the scrolling should behave when clicking a header | +| Prop | Type | Description | +| ------------------------- | ------------------------------------- | --------------------------------------------------------------- | +| `stickTo` | `top`\|`bottom`\|`all` | how headers should stick | +| `scrollBehavior` | `scrollBehavior CSS property` | how the scrolling should behave when clicking a header | +| `headerBehavior` | `stick`\|`push`\|`none` | how the headers behave when scrolling | +| `items` | `items array` | nested structure of items | +| `loading` | `Loading` | object containing loading state and optional callbacks | +| `loading.onBottomReached` | `() => Promise` | Optional callback function triggered when the bottom is reached | +| `loading.render` | `(isLoading: boolean) => JSX.Element` | Optional render function for custom loading indicator | + +### Loading Object + +The `Loading` object should have the following structure: + +| Prop | Type | Description | ## License diff --git a/src/welcome.stories.tsx b/src/welcome.stories.tsx index 3eee811..8641c56 100644 --- a/src/welcome.stories.tsx +++ b/src/welcome.stories.tsx @@ -102,13 +102,13 @@ const WelcomePage: React.FC = () => { render: headerRender('1. Install the Scroll Component using npm or yarn:'), nestedItems: [ { - render: codeRender('npm install react-scroll-magic', { fontFamily: 'monospace' }), + render: codeRender('npm install @galangel/react-scroll-magic', { fontFamily: 'monospace' }), }, { render: itemRender('or', { textAlign: 'center' }), }, { - render: codeRender('yarn add react-scroll-magic', { fontFamily: 'monospace' }), + render: codeRender('yarn add @galangel/react-scroll-magic', { fontFamily: 'monospace' }), }, ], }, @@ -116,7 +116,7 @@ const WelcomePage: React.FC = () => { render: headerRender('2. Import the Scroll Component in your React application:'), nestedItems: [ { - render: codeRender('import { Scroll } from "react-scroll-magic";', { + render: codeRender('import { Scroll } from "@galangel/react-scroll-magic";', { fontFamily: 'monospace', }), }, From 1ef244b37190f8598a4795bdb78124bf427bbfca Mon Sep 17 00:00:00 2001 From: galangel Date: Sun, 26 Jan 2025 23:43:35 +0200 Subject: [PATCH 3/3] Update README and package version for release --- README.md | 6 ------ package.json | 2 +- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/README.md b/README.md index 6703033..721e4ea 100644 --- a/README.md +++ b/README.md @@ -64,12 +64,6 @@ The Scroll Component accepts the following props: | `loading.onBottomReached` | `() => Promise` | Optional callback function triggered when the bottom is reached | | `loading.render` | `(isLoading: boolean) => JSX.Element` | Optional render function for custom loading indicator | -### Loading Object - -The `Loading` object should have the following structure: - -| Prop | Type | Description | - ## License This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. diff --git a/package.json b/package.json index 92b8ab6..170d6e6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@galangel/react-scroll-magic", - "version": "0.1.2", + "version": "1.0.0", "description": "Powerful scroll component that feels like magic!", "author": "Gal Angel (@gal.angel)", "keywords": [