Skip to content

Commit 8ae311d

Browse files
arthurdennerarthurdenner
committed
style: Configuring ESLint and Prettier and formatting code by its rules
1 parent c730b6f commit 8ae311d

File tree

7 files changed

+113
-89
lines changed

7 files changed

+113
-89
lines changed

‎.gitignore‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
dist/
12
node_modules/
23
package-lock.json
3-
yarn.lock
4+
yarn.lock
5+
*.log
6+
.eslintcache

‎.prettierrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"singleQuote": true,
3+
"trailingComma": "es5"
4+
}

‎package.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
"description": "Calendars styled with Semantic UI for React",
55
"main": "dist/index.js",
66
"scripts": {
7+
"build": "kcd-scripts build",
8+
"lint": "kcd-scripts lint",
9+
"precommit": "kcd-scripts precommit",
710
"storybook": "start-storybook -p 9001 -c .storybook",
811
"test": "kcd-scripts test"
912
},
@@ -30,6 +33,17 @@
3033
"babel-runtime": "^6.26.0",
3134
"kcd-scripts": "^0.36.1"
3235
},
36+
"eslintConfig": {
37+
"extends": "./node_modules/kcd-scripts/eslint.js",
38+
"rules": {
39+
"import/no-unassigned-import": 0
40+
}
41+
},
42+
"eslintIgnore": [
43+
"node_modules",
44+
"coverage",
45+
"dist"
46+
],
3347
"repository": {
3448
"type": "git",
3549
"url": "https://github.com/arthurdenner/react-semantic-ui-calendars.git"

‎src/components/button/button.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
import React from 'react';
2+
import PropTypes from 'prop-types';
23
import { Button } from 'semantic-ui-react';
34
import './button.css';
45

5-
const CustomButton = ({ content, icon, iconPosition, ...otherProps }) => (
6+
const CustomButton = ({ icon, ...otherProps }) => (
67
<Button basic compact icon={icon} className="clndr-btn" {...otherProps} />
78
);
89

10+
CustomButton.propTypes = {
11+
icon: PropTypes.string.isRequired,
12+
};
13+
914
export default CustomButton;

‎src/components/calendar/calendar.js‎

Lines changed: 81 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,98 @@
1-
import React, { Component } from 'react';
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
23
import { Segment } from 'semantic-ui-react';
3-
import cn from 'classnames';
44
import Dayzed from 'dayzed';
55
import Button from '../button';
66
import CalendarCell from '../cell';
77
import { monthNamesShort, weekdayNamesShort } from '../../data';
88
import 'semantic-ui-css/semantic.min.css';
99
import './calendar.css';
1010

11-
class Calendar extends Component {
12-
render() {
13-
const {
14-
fluid,
15-
onDateSelected,
16-
selected,
17-
selectedClassName,
18-
...otherProps
19-
} = this.props;
11+
const Calendar = ({
12+
fluid,
13+
onDateSelected,
14+
selected,
15+
selectedClassName,
16+
...otherProps
17+
}) => (
18+
<Dayzed
19+
{...otherProps}
20+
onDateSelected={onDateSelected}
21+
selected={selected}
22+
render={({ calendars, getBackProps, getForwardProps, getDateProps }) =>
23+
calendars.map(calendar => (
24+
<Segment compact={!fluid} key={`${calendar.year}-${calendar.month}`}>
25+
<div className="clndr-control">
26+
<Button
27+
icon="angle double left"
28+
title="Last year"
29+
{...getBackProps({ calendars, offset: 12 })}
30+
/>
31+
<Button
32+
icon="angle left"
33+
style={{ marginRight: 0 }}
34+
title="Last month"
35+
{...getBackProps({ calendars })}
36+
/>
2037

21-
return (
22-
<Dayzed
23-
{...otherProps}
24-
onDateSelected={onDateSelected}
25-
selected={selected}
26-
render={({ calendars, getBackProps, getForwardProps, getDateProps }) =>
27-
calendars.map(calendar => (
28-
<Segment
29-
compact={!fluid}
30-
key={`${calendar.year}-${calendar.month}`}
31-
>
32-
<div className="clndr-control">
33-
<Button
34-
icon="angle double left"
35-
iconPosition="left"
36-
title="Last year"
37-
{...getBackProps({ calendars, offset: 12 })}
38-
/>
39-
<Button
40-
icon="angle left"
41-
iconPosition="left"
42-
style={{ marginRight: 0 }}
43-
title="Last month"
44-
{...getBackProps({ calendars })}
45-
/>
38+
<span className="clndr-control-month">
39+
{monthNamesShort[calendar.month]} {calendar.year}
40+
</span>
4641

47-
<span className="clndr-control-month">
48-
{monthNamesShort[calendar.month]} {calendar.year}
49-
</span>
42+
<Button
43+
icon="angle right"
44+
title="Next month"
45+
{...getForwardProps({ calendars })}
46+
/>
47+
<Button
48+
icon="angle double right"
49+
style={{ marginRight: 0 }}
50+
title="Next year"
51+
{...getForwardProps({ calendars, offset: 12 })}
52+
/>
53+
</div>
54+
<div className="clndr-days">
55+
{weekdayNamesShort.map(weekday => (
56+
<CalendarCell
57+
key={`${calendar.year}-${calendar.month}-${weekday}`}
58+
>
59+
{weekday}
60+
</CalendarCell>
61+
))}
62+
{calendar.weeks.map(week =>
63+
week.map((dateObj, index) => {
64+
const key = `${calendar.year}-${calendar.month}-${index}`;
5065

51-
<Button
52-
icon="angle right"
53-
iconPosition="right"
54-
title="Next month"
55-
{...getForwardProps({ calendars })}
56-
/>
57-
<Button
58-
icon="angle double right"
59-
iconPosition="right"
60-
style={{ marginRight: 0 }}
61-
title="Next year"
62-
{...getForwardProps({ calendars, offset: 12 })}
63-
/>
64-
</div>
65-
<div className="clndr-days">
66-
{weekdayNamesShort.map(weekday => (
66+
return dateObj ? (
6767
<CalendarCell
68-
key={`${calendar.year}-${calendar.month}-${weekday}`}
68+
key={key}
69+
selectedClassName={selectedClassName}
70+
{...dateObj}
71+
{...getDateProps({ dateObj })}
6972
>
70-
{weekday}
73+
{dateObj.date.getDate()}
7174
</CalendarCell>
72-
))}
73-
{calendar.weeks.map(week =>
74-
week.map((dateObj, index) => {
75-
const key = `${calendar.year}-${calendar.month}-${index}`;
75+
) : (
76+
<CalendarCell key={key} />
77+
);
78+
})
79+
)}
80+
</div>
81+
</Segment>
82+
))
83+
}
84+
/>
85+
);
7686

77-
return !dateObj ? (
78-
<CalendarCell key={key} />
79-
) : (
80-
<CalendarCell
81-
key={key}
82-
selectedClassName={selectedClassName}
83-
{...dateObj}
84-
{...getDateProps({ dateObj })}
85-
>
86-
{dateObj.date.getDate()}
87-
</CalendarCell>
88-
);
89-
})
90-
)}
91-
</div>
92-
</Segment>
93-
))
94-
}
95-
/>
96-
);
97-
}
98-
}
87+
Calendar.propTypes = {
88+
fluid: PropTypes.bool,
89+
onDateSelected: PropTypes.func,
90+
selected: PropTypes.instanceOf(Date),
91+
selectedClassName: PropTypes.string,
92+
};
93+
94+
Calendar.defaultProps = {
95+
onDateSelected: () => {},
96+
};
9997

10098
export default Calendar;

‎src/components/cell/cell.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,14 @@ const CalendarCell = ({
2121
);
2222

2323
CalendarCell.propTypes = {
24+
selected: PropTypes.bool,
2425
selectable: PropTypes.bool,
2526
selectedClassName: PropTypes.string,
2627
today: PropTypes.bool,
2728
};
2829

2930
CalendarCell.defaultProps = {
30-
selectable: false,
3131
selectedClassName: 'clndr-cell-selected',
32-
today: false,
3332
};
3433

3534
export default CalendarCell;

‎stories/single.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@ class Single extends React.Component {
66
selectedDate: null,
77
};
88

9-
handleOnDateSelected = ({ selected, selectable, date }) => {
9+
handleOnDateSelected = ({ selectable, date }) => {
1010
if (!selectable) {
1111
return;
1212
}
13+
1314
this.setState(({ selectedDate }) => {
1415
let newDate = date;
1516

@@ -27,7 +28,7 @@ class Single extends React.Component {
2728
return (
2829
<div style={{ margin: 50 }}>
2930
<Calendar
30-
selected={this.state.selectedDate}
31+
selected={selectedDate}
3132
onDateSelected={this.handleOnDateSelected}
3233
/>
3334
</div>

0 commit comments

Comments
 (0)