style: setup prettier

KnowsCount · Feb 9, 2022 · bb92176 · bb92176 · vercel · Feb 9, 2022
1 parent 0c4e30d
commit bb92176
Show file tree

Hide file tree

Showing 13 changed files with 280 additions and 233 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,19 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.{js,py}]
+charset = utf-8
+
+# Tab indentation (no size specified)
+[*]
+indent_style = tab
+indent_size = 4
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,8 @@
+# Ignore artifacts:
+dist
+coverage
+storybook-static
+.storybook
+
+# Ignore all HTML files:
+*.html
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,14 @@
+{
+	"semi": false,
+	"overrides": [
+		{
+			"files": ["*.tsx", "*.ts", "*.js", "*.css"],
+			"options": {
+				"useTabs": true,
+				"tabWidth": 4,
+				"singleQuote": true,
+				"trailingComma": "es5"
+			}
+		}
+	]
+}
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,11 +1,8 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials"
-  ],
-  "framework": "@storybook/react"
-}
+	stories: [
+		'../src/**/*.stories.mdx',
+		'../src/**/*.stories.@(js|jsx|ts|tsx)',
+	],
+	addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+	framework: '@storybook/react',
+}
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,9 +1,9 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-}
+	actions: { argTypesRegex: '^on[A-Z].*' },
+	controls: {
+		matchers: {
+			color: /(background|color)$/i,
+			date: /Date$/,
+		},
+	},
+}
diff --git a/package.json b/package.json
@@ -1,55 +1,55 @@
 {
-  "name": "contribution-heatmap",
-  "version": "0.0.0",
-  "description": "a github-inspired react contribution heatmap component",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/KnowsCount/contribution-heatmap.git"
-  },
-  "files": [
-    "dist"
-  ],
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/index.d.ts",
-  "keywords": [
-    "react",
-    "heatmap",
-    "component"
-  ],
-  "author": "KnowsCount <[email protected]>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/KnowsCount/contribution-heatmap/issues"
-  },
-  "homepage": "https://github.com/KnowsCount/contribution-heatmap#readme",
-  "devDependencies": {
-    "@babel/core": "^7.17.2",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.1.3",
-    "@rollup/plugin-typescript": "^8.3.0",
-    "@storybook/addon-actions": "^6.4.18",
-    "@storybook/addon-essentials": "^6.4.18",
-    "@storybook/addon-links": "^6.4.18",
-    "@storybook/react": "^6.4.18",
-    "@types/react": "^17.0.39",
-    "babel-loader": "^8.2.3",
-    "postcss": "^8.4.6",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "rollup": "^2.67.1",
-    "rollup-plugin-dts": "^4.1.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "tslib": "^2.3.1",
-    "typescript": "^4.5.5"
-  },
-  "dependencies": {}
+	"name": "contribution-heatmap",
+	"version": "0.0.0",
+	"description": "a github-inspired react contribution heatmap component",
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1",
+		"build": "rollup -c",
+		"storybook": "start-storybook -p 6006",
+		"build-storybook": "build-storybook"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/KnowsCount/contribution-heatmap.git"
+	},
+	"files": [
+		"dist"
+	],
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"types": "dist/index.d.ts",
+	"keywords": [
+		"react",
+		"heatmap",
+		"component"
+	],
+	"author": "KnowsCount <[email protected]>",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/KnowsCount/contribution-heatmap/issues"
+	},
+	"homepage": "https://github.com/KnowsCount/contribution-heatmap#readme",
+	"devDependencies": {
+		"@babel/core": "^7.17.2",
+		"@rollup/plugin-commonjs": "^21.0.1",
+		"@rollup/plugin-node-resolve": "^13.1.3",
+		"@rollup/plugin-typescript": "^8.3.0",
+		"@storybook/addon-actions": "^6.4.18",
+		"@storybook/addon-essentials": "^6.4.18",
+		"@storybook/addon-links": "^6.4.18",
+		"@storybook/react": "^6.4.18",
+		"@types/react": "^17.0.39",
+		"babel-loader": "^8.2.3",
+		"postcss": "^8.4.6",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2",
+		"rollup": "^2.67.1",
+		"rollup-plugin-dts": "^4.1.0",
+		"rollup-plugin-peer-deps-external": "^2.2.4",
+		"rollup-plugin-postcss": "^4.0.2",
+		"rollup-plugin-terser": "^7.0.2",
+		"tslib": "^2.3.1",
+		"typescript": "^4.5.5"
+	},
+	"dependencies": {}
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,11 +1,11 @@
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import typescript from '@rollup/plugin-typescript';
-import { terser } from 'rollup-plugin-terser';
-import external from 'rollup-plugin-peer-deps-external';
-import postcss from 'rollup-plugin-postcss';
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import typescript from '@rollup/plugin-typescript'
+import { terser } from 'rollup-plugin-terser'
+import external from 'rollup-plugin-peer-deps-external'
+import postcss from 'rollup-plugin-postcss'
 
-const packageJson = require('./package.json');
+const packageJson = require('./package.json')
 
 export default {
 	input: 'src/index.ts',
@@ -14,20 +14,20 @@ export default {
 			file: packageJson.main,
 			format: 'cjs',
 			sourcemap: true,
-			name: 'react-lib'
+			name: 'react-lib',
 		},
 		{
 			file: packageJson.module,
 			format: 'esm',
-			sourcemap: true
-		}
+			sourcemap: true,
+		},
 	],
 	plugins: [
 		external(),
 		resolve(),
 		commonjs(),
 		typescript({ tsconfig: './tsconfig.json' }),
 		postcss(),
-		terser()
-	]
+		terser(),
+	],
 }
diff --git a/src/Heatmap.css b/src/Heatmap.css
@@ -15,32 +15,40 @@
 	--darkest: #216e39;
 }
 
-.months { grid-area: months; }
-.days { grid-area: days; }
-.squares { grid-area: squares; }
+.months {
+	grid-area: months;
+}
+.days {
+	grid-area: days;
+}
+.squares {
+	grid-area: squares;
+}
 
 .graph {
 	display: inline-grid;
-	grid-template-areas: "empty months"
-							"days squares";
+	grid-template-areas:
+		'empty months'
+		'days squares';
 	grid-template-columns: auto 1fr;
 	grid-gap: 10px;
 }
 
 .months {
 	display: grid;
-	grid-template-columns: calc(var(--week-width) * 4) /* Jan */
-						   calc(var(--week-width) * 4) /* Feb */
-						   calc(var(--week-width) * 4) /* Mar */
-						   calc(var(--week-width) * 5) /* Apr */
-						   calc(var(--week-width) * 4) /* May */
-						   calc(var(--week-width) * 4) /* Jun */
-						   calc(var(--week-width) * 5) /* Jul */
-						   calc(var(--week-width) * 4) /* Aug */
-						   calc(var(--week-width) * 4) /* Sep */
-						   calc(var(--week-width) * 5) /* Oct */
-						   calc(var(--week-width) * 4) /* Nov */
-						   calc(var(--week-width) * 5) /* Dec */;
+	grid-template-columns:
+		calc(var(--week-width) * 4) /* Jan */
+		calc(var(--week-width) * 4) /* Feb */
+		calc(var(--week-width) * 4) /* Mar */
+		calc(var(--week-width) * 5) /* Apr */
+		calc(var(--week-width) * 4) /* May */
+		calc(var(--week-width) * 4) /* Jun */
+		calc(var(--week-width) * 5) /* Jul */
+		calc(var(--week-width) * 4) /* Aug */
+		calc(var(--week-width) * 4) /* Sep */
+		calc(var(--week-width) * 5) /* Oct */
+		calc(var(--week-width) * 4) /* Nov */
+		calc(var(--week-width) * 5) /* Dec */;
 }
 
 .days,
@@ -54,11 +62,11 @@
 	grid-auto-columns: var(--square-size);
 }
 
-
 /* Other styling */
 
 body {
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
+		sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 	font-size: 12px;
 }
 
@@ -78,18 +86,18 @@ body {
 	background-color: var(--lightest);
 }
 
-.squares li[data-level="1"] {
+.squares li[data-level='1'] {
 	background-color: var(--light);
 }
 
-.squares li[data-level="2"] {
+.squares li[data-level='2'] {
 	background-color: var(--medium);
 }
 
-.squares li[data-level="3"] {
+.squares li[data-level='3'] {
 	background-color: var(--dark);
 }
 
-.squares li[data-level="4"] {
+.squares li[data-level='4'] {
 	background-color: var(--darkest);
-}
+}
diff --git a/src/Heatmap.stories.tsx b/src/Heatmap.stories.tsx
@@ -7,4 +7,4 @@ export default {
 	component: ContributionHeatmap,
 }
 
-export const LightMode = () => <ContributionHeatmap />
+export const LightMode = () => <ContributionHeatmap />
diff --git a/src/Heatmap.tsx b/src/Heatmap.tsx
@@ -8,17 +8,26 @@ const Heatmap = () => {
 		<>
 			<div className="graph">
 				<ul className="months">
-					{months.map((months, i) => <li key={i}>{months}</li> )}
+					{months.map((months, i) => (
+						<li key={i}>{months}</li>
+					))}
 				</ul>
 				<ul className="days">
-					{days.map((days, i) => <li key={i}>{days}</li> )}
+					{days.map((days, i) => (
+						<li key={i}>{days}</li>
+					))}
 				</ul>
 				<ul className="squares">
-					{[...Array(daysInYear)].map((_, i) => <li data-level={Math.floor(Math.random() * 4)} key={i}></li> )}
+					{[...Array(daysInYear)].map((_, i) => (
+						<li
+							data-level={Math.floor(Math.random() * 4)}
+							key={i}
+						></li>
+					))}
 				</ul>
 			</div>
 		</>
 	)
 }
 
-export default Heatmap
+export default Heatmap