Skip to content

Commit cec2ee4

Browse files
fakundofakundo
committed
docs: update docs
1 parent 4a8d60b commit cec2ee4

18 files changed

+233
-161
lines changed

‎.storybook/manager.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,21 @@ addons.setConfig({
55
theme: theme,
66
showToolbar: false,
77
});
8+
9+
addons.register('TitleAddon', api => {
10+
const setTitle = () => {
11+
let title = 'react-transitioning';
12+
let storyData = null;
13+
try {
14+
storyData = api.getCurrentStoryData();
15+
title = `${title} ⋅ ${storyData.title.replace(/\//g, ' / ')} / ${storyData.name}`;
16+
} catch {}
17+
document.title = title;
18+
};
19+
20+
new MutationObserver(() => {
21+
if (document.title.endsWith('Storybook')) {
22+
setTitle();
23+
}
24+
}).observe(document.querySelector('title')!, { childList: true, subtree: true, characterData: true });
25+
});

‎.storybook/preview.css‎

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,40 @@
1-
#storybook-root, .sb-story {
2-
color: #C9CDCF;
3-
min-height: 100px;
1+
html {
2+
font-size: 12px;
43
}
5-
button {
6-
color: #1B1C1D;
7-
background-color: #C9CDCF;
4+
5+
#storybook-root,
6+
.sb-story {
7+
color: #c9cdcf;
8+
min-height: 10rem;
9+
font-family: monospace;
810
}
9-
pre {
11+
12+
button,
13+
pre,
14+
input {
1015
margin: 0;
16+
}
17+
18+
button {
19+
font: inherit;
20+
cursor: pointer;
21+
}
22+
23+
hr {
24+
margin: 1rem 0;
25+
border: 0;
26+
border-top: 1px solid #ffffff1a;
27+
}
28+
29+
.group {
30+
display: flex;
31+
gap: .5rem;
32+
align-items: center;
33+
flex-wrap: wrap;
34+
}
35+
36+
label {
37+
display: flex;
38+
gap: .25rem;
39+
align-items: center;
1140
}

‎.storybook/preview.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ const preview: Preview = {
1414
storySort: {
1515
order: [
1616
'Introduction',
17-
'Components',
18-
['Transition', 'StyleTransition', 'CSSTransition'],
1917
'Examples',
2018
['Basic Transition', 'Fade Transition', ['Inline Styles']],
19+
'Components',
20+
['Transition', 'StyleTransition', 'CSSTransition'],
2121
],
2222
},
2323
},

‎README.md‎

Lines changed: 22 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,25 @@
33
[![npm](https://img.shields.io/npm/v/react-transitioning.svg)](https://www.npmjs.com/package/react-transitioning)
44
[![GitHub](https://img.shields.io/badge/GitHub-%23121011.svg?logo=github&logoColor=white)](https://github.com/fakundo/react-transitioning)
55

6-
A simple React library that provides components for managing animations and transitions with ease. It allows seamless transitions for both individual components and groups of elements. The library is inspired by [react-transition-group](https://reactcommunity.org/react-transition-group/) and shares a similar API with a few notable differences.
7-
8-
## Key Features
9-
10-
- **Ease of Use**: Simple and intuitive API for creating animations and transitions for both components and groups of elements.
11-
- **Modern Approach**: Built with functional components and hooks, avoiding deprecated methods like `findDOMNode`.
12-
- **No External Dependencies**: No additional dependencies, keeping your project lightweight and reducing potential conflicts.
13-
- **No `nodeRef` Required**: Unlike `react-transition-group`, there's no need to pass a `nodeRef` prop.
14-
- **Flexibility**: Supports both CSS-based and inline style-based animations.
15-
- **Lightweight**: Minimal bundle size to keep your application fast.
16-
17-
The library provides components that allow you to easily create custom components with animations and transitions tailored to your needs. You can integrate them into your own React components to add smooth animations and transitions with minimal effort.
6+
A library that provides React components for managing animations and transitions with ease. It allows seamless transitions for both individual components and groups of elements. Lightweight and has no dependencies. Inspired by [react-transition-group](https://reactcommunity.org/react-transition-group/) and has almost the same API.
187

198
```tsx
209
<FadeTransition in={visible}>
2110
<div>Fading element</div>
2211
</FadeTransition>
2312
```
2413

14+
## Key Features
15+
16+
- Built with functional components and hooks, avoiding deprecated methods like `findDOMNode`.
17+
- Unlike `react-transition-group`, there's no need to pass a `nodeRef` prop.
18+
- Supports both CSS-based and inline style-based transitions.
19+
- Minimal bundle size.
20+
- No dependencies.
21+
2522
## Installation
2623

27-
To install the library, run:
24+
To install `react-transitioning`, run the following command in your project:
2825

2926
```bash
3027
npm install react-transitioning
@@ -36,7 +33,7 @@ yarn add react-transitioning
3633

3734
For more detailed information and usage examples, check out the [Docs](https://fakundo.github.io/react-transitioning/).
3835

39-
## Usage
36+
## Quick Review
4037

4138
### Transition Component
4239

@@ -47,7 +44,7 @@ import { Transition } from 'react-transitioning'
4744

4845
...
4946

50-
<Transition in={!hidden} appear exit={false}>
47+
<Transition in={visible} appear exit={false}>
5148
{(transitionState) => (
5249
<pre>{JSON.stringify(transitionState)}</pre>
5350
)}
@@ -63,7 +60,7 @@ import { CSSTransition } from 'react-transitioning'
6360

6461
...
6562

66-
<CSSTransition in={!hidden} classNames="fade">
63+
<CSSTransition in={visible} classNames="fade">
6764
<div>Animated element</div>
6865
</CSSTransition>
6966
```
@@ -78,7 +75,7 @@ import { StyleTransition } from 'react-transitioning'
7875
...
7976

8077
<StyleTransition
81-
in={!hidden}
78+
in={visible}
8279
duration={300}
8380
styles={{
8481
enter: { opacity: 0 },
@@ -107,22 +104,9 @@ import { TransitionGroup } from 'react-transitioning'
107104
</TransitionGroup>
108105
```
109106

110-
### Detecting Transition End:
111-
112-
```tsx
113-
<CSSTransition
114-
in={!hidden}
115-
classNames="fade"
116-
addEndListener={(phase, done) => {
117-
nodeRef.current.addEventListener('transitionend', done, { once: true, capture: false })
118-
}}
119-
>
120-
<div ref={nodeRef}>Animated element</div>
121-
</CSSTransition>
122-
```
123-
## API
107+
## Component Props
124108

125-
### Transition Props
109+
### TransitionProps
126110

127111
```ts
128112
type TransitionProps = {
@@ -159,7 +143,7 @@ type TransitionState = {
159143
}
160144
```
161145
162-
### CSSTransition Props
146+
### CSSTransitionProps
163147
164148
```ts
165149
type CSSTransitionProps = Omit<TransitionProps, 'children'> & {
@@ -178,12 +162,12 @@ type CSSTransitionProps = Omit<TransitionProps, 'children'> & {
178162
}
179163
```
180164
181-
if `classNames` is a string, then the computed `className` will be suffixed based on the current transition state.
182-
For example, when `classNames` is `"fade"`, the `fade-appear-active` class will be applied during the `appearActive` phase.
165+
if `classNames` is a string, then the computed class name will be suffixed based on the current transition state.
166+
For example, when `classNames` is `"fade"`, the `"fade-appear-active"` class will be applied during the `appearActive` phase.
183167
184-
If `classNames` is an object, the final `className` will be taken from that object based on the current transition state.
168+
If `classNames` is an object, the final class name will be taken from that object based on the current transition state.
185169
186-
### StyleTransition Props
170+
### StyleTransitionProps
187171
188172
```ts
189173
type StyleTransitionProps = Omit<TransitionProps, 'children'> & {
@@ -204,7 +188,7 @@ type StyleTransitionProps = Omit<TransitionProps, 'children'> & {
204188
205189
The `styles` prop allows you to define inline styles based on the current transition state. For example, when the element enters, the `enterActive` styles will be applied.
206190
207-
### TransitionGroup Props
191+
### TransitionGroupProps
208192
209193
```ts
210194
type TransitionGroupProps = {

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,9 @@
1919
"lint": "eslint src && eslint stories",
2020
"watch": "tsup --watch",
2121
"build": "tsup --clean",
22+
"titlefix": "node scripts/titlefix",
2223
"dev": "storybook dev -p 6006",
23-
"docs": "storybook build -o docs"
24+
"docs": "storybook build -o docs && yarn run titlefix"
2425
},
2526
"keywords": [
2627
"react",

‎scripts/titlefix.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const fs = require('fs');
2+
3+
const INDEX_PATH = 'docs/index.html';
4+
const DEFAULT_TITLE = '@storybook/core - Storybook';
5+
const NEW_TITLE = 'react-transitioning ⋅ Docs';
6+
7+
const indexHtml = fs.readFileSync(INDEX_PATH, { encoding: 'utf-8' });
8+
const changedHtml = indexHtml.replace(new RegExp(DEFAULT_TITLE), NEW_TITLE);
9+
fs.writeFileSync(INDEX_PATH, changedHtml);

‎stories/Intro.mdx‎

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,22 @@ import { Meta } from "@storybook/blocks";
77
[![npm](https://img.shields.io/npm/v/react-transitioning.svg)](https://www.npmjs.com/package/react-transitioning)
88
[![GitHub](https://img.shields.io/badge/GitHub-%23121011.svg?logo=github&logoColor=white)](https://github.com/fakundo/react-transitioning)
99

10-
A simple React library that provides components for managing animations and transitions with ease. It allows seamless transitions for both individual components and groups of elements. The library is inspired by [react-transition-group](https://reactcommunity.org/react-transition-group/) and shares a similar API with a few notable differences.
11-
12-
## Key Features
13-
14-
- **Ease of Use**: Simple and intuitive API for creating animations and transitions for both components and groups of elements.
15-
- **Modern Approach**: Built with functional components and hooks, avoiding deprecated methods like `findDOMNode`.
16-
- **No External Dependencies**: No additional dependencies, keeping your project lightweight and reducing potential conflicts.
17-
- **No `nodeRef` Required**: Unlike `react-transition-group`, there's no need to pass a `nodeRef` prop.
18-
- **Flexibility**: Supports both CSS-based and inline style-based animations.
19-
- **Lightweight**: Minimal bundle size to keep your application fast.
20-
21-
The library provides components that allow you to easily create custom components with animations and transitions tailored to your needs. You can integrate them into your own React components to add smooth animations and transitions with minimal effort.
10+
A library that provides React components for managing animations and transitions with ease. It allows seamless transitions for both individual components and groups of elements. Lightweight and has no dependencies. Inspired by [react-transition-group](https://reactcommunity.org/react-transition-group/) and has almost the same API.
2211

2312
```tsx
2413
<FadeTransition in={visible}>
2514
<div>Fading element</div>
2615
</FadeTransition>
2716
```
2817

18+
## Key Features
19+
20+
- Built with functional components and hooks, avoiding deprecated methods like `findDOMNode`.
21+
- Unlike `react-transition-group`, there's no need to pass a `nodeRef` prop.
22+
- Supports both CSS-based and inline style-based transitions.
23+
- Minimal bundle size.
24+
- No dependencies.
25+
2926
## Installation
3027

3128
To install `react-transitioning`, run the following command in your project:
@@ -36,19 +33,19 @@ npm install react-transitioning
3633
yarn add react-transitioning
3734
```
3835

36+
## Usage Examples
37+
38+
- [Basic Transition Component](../?path=/docs/examples-basic-transition--docs): Demonstrates the functionality of a basic transition component.
39+
- [Fade Transition with Inline Styles](../?path=/docs/examples-fade-transition-inline-styles--docs): Implements a fading transition using inline styles.
40+
- [Fade Transition with Class Names](../?path=/docs/examples-fade-transition-class-names--docs): Implements a fading transition using CSS class names.
41+
- [Transition Group: Conditional Render](../?path=/docs/examples-transition-group-conditional-render--docs): Renders children conditionally with animations.
42+
- [Transition Group: Item List](../?path=/docs/examples-transition-group-item-list--docs): Renders an array of items with animations.
43+
3944
## Components Overview
4045

4146
The library includes the following components to manage transitions and animations:
4247

4348
- [Transition](../?path=/docs/components-transition--docs): Controls the mounting and unmounting of a component with transitions.
4449
- [StyleTransition](../?path=/docs/components-styletransition--docs): Applies inline styles during the transition phases.
4550
- [CSSTransition](../?path=/docs/components-csstransition--docs): Adds CSS classes during the transition phases for seamless animations.
46-
- [TransitionGroup](../?path=/docs/components-transitiongroup--docs): Manages a group of transitioning elements.
47-
48-
## Usage Examples
49-
50-
- [Basic Transition Component](../?path=/docs/examples-basic-transition--docs): Demonstrates the functionality of a basic transition component.
51-
- [Fade Transition with Inline Styles](../?path=/docs/examples-fade-transition-inline-styles--docs): Implements a fading transition using inline styles.
52-
- [Fade Transition with Class Names](../?path=/docs/examples-fade-transition-class-names--docs): Implements a fading transition using CSS class names.
53-
- [Transition Group: Conditional Render](../?path=/docs/examples-transition-group-conditional-render--docs): Renders children conditionally with animations.
54-
- [Transition Group: Item List](../?path=/docs/examples-transition-group-item-list--docs): Renders an array of items with animations.
51+
- [TransitionGroup](../?path=/docs/components-transitiongroup--docs): Manages a group of transitioning elements.

‎stories/components/CSSTransition.stories.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,18 @@ const META: Meta<typeof CSSTransition> = {
1313
args: {
1414
in: true,
1515
appear: true,
16-
classNames: 'fade',
1716
children: (
1817
<div
1918
style={{
2019
width: 100,
2120
height: 100,
22-
background: 'olive',
21+
borderRadius: '15%',
22+
background: 'linear-gradient(to bottom right, seagreen, teal)',
2323
}}
2424
/>
2525
),
2626
alwaysMounted: true,
27+
classNames: 'fade',
2728
},
2829
};
2930

‎stories/components/StyleTransition.stories.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,27 +14,27 @@ const META: Meta<typeof StyleTransition> = {
1414
args: {
1515
in: true,
1616
appear: true,
17-
styles: {
18-
appear: { opacity: 0 },
19-
appearActive: { opacity: 1 },
20-
enter: { opacity: 0 },
21-
enterActive: { opacity: 1 },
22-
exit: { opacity: 1 },
23-
exitActive: { opacity: 0 },
24-
exitDone: { opacity: 0 },
25-
},
2617
children: (
2718
<div
2819
style={{
2920
width: 100,
3021
height: 100,
31-
background: 'olive',
32-
transition: `all ${DURATION}ms`,
22+
borderRadius: '15%',
23+
background: 'linear-gradient(to bottom right, seagreen, teal)',
3324
}}
3425
/>
3526
),
3627
alwaysMounted: true,
3728
duration: DURATION,
29+
styles: {
30+
appear: { opacity: 0 },
31+
appearActive: { opacity: 1, transition: `opacity ${DURATION}ms` },
32+
enter: { opacity: 0 },
33+
enterActive: { opacity: 1, transition: `opacity ${DURATION}ms` },
34+
exit: { opacity: 1 },
35+
exitActive: { opacity: 0, transition: `opacity ${DURATION}ms` },
36+
exitDone: { opacity: 0 },
37+
},
3838
},
3939
};
4040

0 commit comments

Comments
 (0)