Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 6585531

Browse files
add experimental documentation using documentation.js
Basically, the point of this is to try and streamline tutorial writing process. - global dep --> https://www.npmjs.com/package/documentation Steps to writing a tutorial could than be: - Write the code. - Document the code. - Screenshot the code with polacode - generate a readme files for the code - include as a partial in the final version? --> Readme.md - publish it on medium, dev.to, codementor.io, etc...
1 parent 466f3e0 commit 6585531

File tree

6 files changed

+458
-0
lines changed

6 files changed

+458
-0
lines changed
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.star-rating {
2+
display: flex;
3+
flex-wrap: wrap;
4+
justify-content: space-around;
5+
}
6+
7+
.star {
8+
cursor: pointer;
9+
width: 2em;
10+
height: 2em;
11+
background-color: grey;
12+
-webkit-clip-path: polygon(
13+
50% 0%,
14+
63% 38%,
15+
100% 38%,
16+
69% 59%,
17+
82% 100%,
18+
50% 75%,
19+
18% 100%,
20+
31% 59%,
21+
0% 38%,
22+
37% 38%
23+
);
24+
clip-path: polygon(
25+
50% 0%,
26+
63% 38%,
27+
100% 38%,
28+
69% 59%,
29+
82% 100%,
30+
50% 75%,
31+
18% 100%,
32+
31% 59%,
33+
0% 38%,
34+
37% 38%
35+
);
36+
}
37+
38+
.star.selected {
39+
background-color: red;
40+
}
Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
/**
2+
* @name ProductRating
3+
* @description - The Rating component consists of 5 stars. Each star is represented by a div element.
4+
* - This documentation is generated by running the following command: `documentation build StarRating.js -f md -o readme.md `
5+
*
6+
* - When an div.star is clicked, the **selected class** should be added to that element and all divs before it. Also, the **selected class** should be removed from all div elements after it, if there are any.
7+
When a div element is clicked, the **selected class** should be added to that div element and to all div elements before it. Also, the **selected class** should be removed from all div elements after it, if there are any.
8+
* - Read more about this component check out {@link https://moonhighway.com/refactoring-the-star-rating-with-hooks|moonhighway} and learn how to create a **class-based star component** over at {@link https://scotch.io/tutorials/build-a-star-rating-component-for-react scotch}.
9+
* - The component should render to this HTML code:
10+
* @example
11+
<div class="star-rating">
12+
<div class="star selected"></div>
13+
<div class="star selected"></div>
14+
<div class="star selected"></div>
15+
<div class="star"></div>
16+
<div class="star"></div>
17+
<p>3 of 5 stars</p>
18+
</div>
19+
*/
20+
21+
/**
22+
* @name Components
23+
* @description - RenderedComponent
24+
* - This component will map over the Star Component and increment the key value.
25+
* @example
26+
* <StarRating totalStars={5} />
27+
* @example
28+
<StarRating>
29+
<Star key=1 className="star selected">
30+
<Star key=2 className="star selected">
31+
<Star key=3 className="star selected">
32+
<Star key=4 className="star">
33+
<Star key=5 className="star">
34+
<StarRating/>
35+
*
36+
*/
37+
38+
import React, { useState } from "react";
39+
import "./StarRating.css";
40+
41+
42+
43+
/**
44+
* @name StarComponent
45+
* @description - This function exists to be iter
46+
* @param {boolean} selected
47+
* - default value is false.
48+
* - changes the className property from .star to .star.selected
49+
* @param {function} onClick - The callback that handles the click event.
50+
* @example
51+
<Star
52+
key={currentStar} // #2
53+
selected={currentStar < starsSelected} // #3
54+
onClick={() => selectStar(currentStar + 1)} // #4
55+
/>
56+
*/
57+
export const Star = ({ selected = false, onClick = f => f }) => (
58+
<div className={selected ? "star selected" : "star"} onClick={onClick} />
59+
);
60+
61+
/**
62+
* @description - StarRating
63+
- This component will map over the Star Component and increment the key value.
64+
- #1 we set the initial state to 0 and it will increment up to the value of totalStars.
65+
- #2
66+
- #3 n=currentValue, currentStar=index
67+
- #4 key is incremented by the value of the index variable, currentStar
68+
- #5 **selected** is determined to be true or false if the **currentStar** is greater than starsSelected
69+
- #6
70+
* @param {Number} starsSelected - The current state.
71+
* @param {Function} selectStar - A setter function to set the state.
72+
* @param {Number} totalStars - This number is our "iterator".
73+
* @example
74+
* <StarRating totalStars={5} />
75+
*/
76+
77+
const StarRating = ({ totalStars }) => {
78+
const [starsSelected, selectStar] = useState(0); //#1
79+
return (
80+
<div className="star-rating">
81+
{[...Array(totalStars)] //#2
82+
.map((n, currentStar) => ( //#3
83+
<Star
84+
key={currentStar} //#4
85+
selected={currentStar < starsSelected} //#5
86+
onClick={() => selectStar(currentStar + 1)} //#6
87+
/>
88+
)
89+
)}
90+
<p>
91+
{starsSelected} of {totalStars} stars
92+
</p>
93+
</div>
94+
);
95+
};
96+
97+
98+
export default StarRating;
99+

‎JS/06-react/parcel/components/readme.md

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
2+
3+
### Table of Contents
4+
5+
- [ProductRating][1]
6+
- [Examples][2]
7+
- [Components][3]
8+
- [Examples][4]
9+
- [StarComponent][5]
10+
- [Parameters][6]
11+
- [Examples][7]
12+
- [StarRating][8]
13+
- [Parameters][9]
14+
- [Examples][10]
15+
16+
## ProductRating
17+
18+
The Rating component consists of 5 stars. Each star is represented by a div element.
19+
20+
- This documentation is generated by running the following command: `documentation build StarRating.js -f md -o readme.md`
21+
22+
- When an div.star is clicked, the **selected class** should be added to that element and all divs before it. Also, the **selected class** should be removed from all div elements after it, if there are any.
23+
When a div element is clicked, the **selected class** should be added to that div element and to all div elements before it. Also, the **selected class** should be removed from all div elements after it, if there are any.
24+
- Read more about this component check out [moonhighway][11] and learn how to create a **class-based star component** over at [ scotch][12].
25+
- The component should render to this HTML code:
26+
27+
### Examples
28+
29+
```javascript
30+
<div class="star-rating">
31+
<div class="star selected"></div>
32+
<div class="star selected"></div>
33+
<div class="star selected"></div>
34+
<div class="star"></div>
35+
<div class="star"></div>
36+
<p>3 of 5 stars</p>
37+
</div>
38+
```
39+
40+
## Components
41+
42+
RenderedComponent
43+
44+
- This component will map over the Star Component and increment the key value.
45+
46+
### Examples
47+
48+
```javascript
49+
<StarRating totalStars={5} />
50+
```
51+
52+
```javascript
53+
<StarRating>
54+
<Star key=1 className="star selected">
55+
<Star key=2 className="star selected">
56+
<Star key=3 className="star selected">
57+
<Star key=4 className="star">
58+
<Star key=5 className="star">
59+
<StarRating/>
60+
```
61+
62+
## StarComponent
63+
64+
This function exists to be iter
65+
66+
### Parameters
67+
68+
- `selected` **[boolean][13]** default value is false. - changes the className property from .star to .star.selected
69+
- `onClick` **[function][14]** The callback that handles the click event.
70+
71+
### Examples
72+
73+
```javascript
74+
<Star
75+
key={currentStar} // #2
76+
selected={currentStar < starsSelected} // #3
77+
onClick={() => selectStar(currentStar + 1)} // #4
78+
/>
79+
```
80+
81+
## StarRating
82+
83+
StarRating
84+
85+
- This component will map over the Star Component and increment the key value.
86+
- \#1 we set the initial state to 0 and it will increment up to the value of totalStars.
87+
- \#2
88+
- \#3 n=currentValue, currentStar=index
89+
- \#4 key is incremented by the value of the index variable, currentStar
90+
- \#5 **selected** is determined to be true or false if the **currentStar** is greater than starsSelected
91+
- \#6
92+
93+
### Parameters
94+
95+
- `0ドル` **[Object][15]**
96+
- `0ドル.totalStars`
97+
- `starsSelected` **[Number][16]** The current state.
98+
- `selectStar` **[Function][14]** A setter function to set the state.
99+
- `totalStars` **[Number][16]** This number is our "iterator".
100+
101+
### Examples
102+
103+
```javascript
104+
<StarRating totalStars={5} />
105+
```
106+
107+
[1]: #productrating
108+
109+
[2]: #examples
110+
111+
[3]: #components
112+
113+
[4]: #examples-1
114+
115+
[5]: #starcomponent
116+
117+
[6]: #parameters
118+
119+
[7]: #examples-2
120+
121+
[8]: #starrating
122+
123+
[9]: #parameters-1
124+
125+
[10]: #examples-3
126+
127+
[11]: https://moonhighway.com/refactoring-the-star-rating-with-hooks
128+
129+
[12]: https://scotch.io/tutorials/build-a-star-rating-component-for-react
130+
131+
[13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
132+
133+
[14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
134+
135+
[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
136+
137+
[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number

‎JS/06-react/parcel/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
"start": "node express.js && parcel ./components/index.js entry.js -d components/output",
88
"parcel": "parcel index.html",
99
"prod": "node express.js && parcel ./components/index.js entry.js -d components/output",
10+
"doc-install":"npm install -g documentation",
11+
"docs": "documentation build ./components/*.js -f md -o tutorial.md ",
1012
"test": "echo \"Error: no test specified\" && exit 1"
1113
},
1214
"keywords": [],

‎JS/06-react/parcel/readme.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# What did you build
2+
3+
## About me
4+
5+
## The problem you wanted to solve
6+
7+
## What is Subscribe Button
8+
9+
# Process
10+
11+
## Tech stack
12+
Node.js,
13+
ParcelJS,
14+
React,
15+
16+
## The process of building XYZ
17+
18+
19+
# Conclusion
20+
## Key learnings
21+
## Tips and advice
22+
1. Only use && to render boolean state, not
23+
## Final thoughts and next steps

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /