Prettier fixes

jepsar · May 22, 2023 · 2bc8cc9 · 2bc8cc9
1 parent 4bea83e
commit 2bc8cc9
Show file tree

Hide file tree

Showing 77 changed files with 1,311 additions and 845 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,8 +1,7 @@
 {
-  "plugins": ["@typescript-eslint", "jest-dom"],
+  "plugins": ["jest-dom"],
   "extends": [
     "next/core-web-vitals",
-    "plugin:@typescript-eslint/recommended",
     "prettier"
   ],
   "rules": {

diff --git a/components/doc/aligncontent/centerdoc.js b/components/doc/aligncontent/centerdoc.js
@@ -25,7 +25,7 @@ export function CenterDoc(props) {
                 <p>Flex lines are distributed at the center of the container.</p>
             </DocSectionText>
             <div className="card">
-                <div className="flex align-content-center flex-wrap card-container yellow-container" style={{minHeight:'200px'}}>
+                <div className="flex align-content-center flex-wrap card-container yellow-container" style={{ minHeight: '200px' }}>
                     <div className="flex align-items-center justify-content-center w-4rem h-4rem bg-yellow-500 font-bold text-white border-round m-2">1</div>
                     <div className="flex align-items-center justify-content-center w-4rem h-4rem bg-yellow-500 font-bold text-white border-round m-2">2</div>
                     <div className="flex align-items-center justify-content-center w-4rem h-4rem bg-yellow-500 font-bold text-white border-round m-2">3</div>

diff --git a/components/doc/aligncontent/enddoc.js b/components/doc/aligncontent/enddoc.js
@@ -25,7 +25,7 @@ export function EndDoc(props) {
                 <p>Flex lines are distributed at the end of the container.</p>
             </DocSectionText>
             <div className="card">
-                <div className="flex align-content-end flex-wrap card-container green-container" style={{minHeight:'200px'}}>
+                <div className="flex align-content-end flex-wrap card-container green-container" style={{ minHeight: '200px' }}>
                     <div className="flex align-items-center justify-content-center w-4rem h-4rem bg-green-500 font-bold text-white border-round m-2">1</div>
                     <div className="flex align-items-center justify-content-center w-4rem h-4rem bg-green-500 font-bold text-white border-round m-2">2</div>
                     <div className="flex align-items-center justify-content-center w-4rem h-4rem bg-green-500 font-bold text-white border-round m-2">3</div>

diff --git a/components/doc/aligncontent/startdoc.js b/components/doc/aligncontent/startdoc.js
@@ -25,7 +25,7 @@ export function StartDoc(props) {
                 <p>Flex lines are distributed at the start of the container.</p>
             </DocSectionText>
             <div className="card">
-                <div className="flex align-content-start flex-wrap card-container blue-container" style={{minHeight:'200px'}}>
+                <div className="flex align-content-start flex-wrap card-container blue-container" style={{ minHeight: '200px' }}>
                     <div className="flex align-items-center justify-content-center w-4rem h-4rem bg-blue-500 font-bold text-white border-round m-2">1</div>
                     <div className="flex align-items-center justify-content-center w-4rem h-4rem bg-blue-500 font-bold text-white border-round m-2">2</div>
                     <div className="flex align-items-center justify-content-center w-4rem h-4rem bg-blue-500 font-bold text-white border-round m-2">3</div>

diff --git a/components/doc/alignitems/baselinedoc.js b/components/doc/alignitems/baselinedoc.js
@@ -25,10 +25,16 @@ export function BaselineDoc(props) {
                 <p>Items are located at the baseline of the container.</p>
             </DocSectionText>
             <div className="card">
-                <div className="flex align-items-baseline flex-wrap card-container indigo-container" style={{minHeight:'200px'}}>
-                    <div className="flex align-items-center justify-content-center bg-indigo-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '50px' }}>1</div>
-                    <div className="flex align-items-center justify-content-center bg-indigo-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '150px' }}>2</div>
-                    <div className="flex align-items-center justify-content-center bg-indigo-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '100px' }}>3</div>
+                <div className="flex align-items-baseline flex-wrap card-container indigo-container" style={{ minHeight: '200px' }}>
+                    <div className="flex align-items-center justify-content-center bg-indigo-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '50px' }}>
+                        1
+                    </div>
+                    <div className="flex align-items-center justify-content-center bg-indigo-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '150px' }}>
+                        2
+                    </div>
+                    <div className="flex align-items-center justify-content-center bg-indigo-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '100px' }}>
+                        3
+                    </div>
                 </div>
             </div>
             <DocSectionCode code={code} />

diff --git a/components/doc/alignitems/centerdoc.js b/components/doc/alignitems/centerdoc.js
@@ -25,10 +25,16 @@ export function CenterDoc(props) {
                 <p>Items are located at the center of the container.</p>
             </DocSectionText>
             <div className="card">
-                <div className="flex align-items-center flex-wrap card-container green-container" style={{minHeight:'200px'}}>
-                    <div className="flex align-items-center justify-content-center bg-green-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '50px' }}>1</div>
-                    <div className="flex align-items-center justify-content-center bg-green-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '150px' }}>2</div>
-                    <div className="flex align-items-center justify-content-center bg-green-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '100px' }}>3</div>
+                <div className="flex align-items-center flex-wrap card-container green-container" style={{ minHeight: '200px' }}>
+                    <div className="flex align-items-center justify-content-center bg-green-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '50px' }}>
+                        1
+                    </div>
+                    <div className="flex align-items-center justify-content-center bg-green-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '150px' }}>
+                        2
+                    </div>
+                    <div className="flex align-items-center justify-content-center bg-green-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '100px' }}>
+                        3
+                    </div>
                 </div>
             </div>
             <DocSectionCode code={code} />

diff --git a/components/doc/alignitems/enddoc.js b/components/doc/alignitems/enddoc.js
@@ -25,10 +25,16 @@ export function EndDoc(props) {
                 <p>Items are located at the end of the container.</p>
             </DocSectionText>
             <div className="card">
-                <div className="flex align-items-end flex-wrap card-container purple-container" style={{minHeight:'200px'}}>
-                    <div className="flex align-items-center justify-content-center bg-purple-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '50px' }}>1</div>
-                    <div className="flex align-items-center justify-content-center bg-purple-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '150px' }}>2</div>
-                    <div className="flex align-items-center justify-content-center bg-purple-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '100px' }}>3</div>
+                <div className="flex align-items-end flex-wrap card-container purple-container" style={{ minHeight: '200px' }}>
+                    <div className="flex align-items-center justify-content-center bg-purple-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '50px' }}>
+                        1
+                    </div>
+                    <div className="flex align-items-center justify-content-center bg-purple-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '150px' }}>
+                        2
+                    </div>
+                    <div className="flex align-items-center justify-content-center bg-purple-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '100px' }}>
+                        3
+                    </div>
                 </div>
             </div>
             <DocSectionCode code={code} />

diff --git a/components/doc/alignitems/responsivedoc.js b/components/doc/alignitems/responsivedoc.js
@@ -53,9 +53,13 @@ export function ResponsiveDoc(props) {
                 </div>
             </DocSectionText>
             <div className="card">
-                <div className="flex md:align-items-center align-items-stretch flex-wrap card-container orange-container" style={{minHeight:'200px'}}>
-                    <div className="flex align-items-center justify-content-center bg-orange-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '50px' }}>1</div>
-                    <div className="flex align-items-center justify-content-center bg-orange-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '50px' }}>2</div>
+                <div className="flex md:align-items-center align-items-stretch flex-wrap card-container orange-container" style={{ minHeight: '200px' }}>
+                    <div className="flex align-items-center justify-content-center bg-orange-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '50px' }}>
+                        1
+                    </div>
+                    <div className="flex align-items-center justify-content-center bg-orange-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '50px' }}>
+                        2
+                    </div>
                 </div>
             </div>
             <DocSectionCode code={code} />

diff --git a/components/doc/alignitems/startdoc.js b/components/doc/alignitems/startdoc.js
@@ -25,10 +25,16 @@ export function StartDoc(props) {
                 <p>Items are located at the start of the container.</p>
             </DocSectionText>
             <div className="card">
-                <div className="flex align-items-start flex-wrap card-container yellow-container" style={{minHeight:'200px'}}>
-                    <div className="flex align-items-center justify-content-center bg-yellow-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '50px' }}>1</div>
-                    <div className="flex align-items-center justify-content-center bg-yellow-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '150px' }}>2</div>
-                    <div className="flex align-items-center justify-content-center bg-yellow-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '100px' }}>3</div>
+                <div className="flex align-items-start flex-wrap card-container yellow-container" style={{ minHeight: '200px' }}>
+                    <div className="flex align-items-center justify-content-center bg-yellow-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '50px' }}>
+                        1
+                    </div>
+                    <div className="flex align-items-center justify-content-center bg-yellow-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '150px' }}>
+                        2
+                    </div>
+                    <div className="flex align-items-center justify-content-center bg-yellow-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '100px' }}>
+                        3
+                    </div>
                 </div>
             </div>
             <DocSectionCode code={code} />

diff --git a/components/doc/alignitems/stretchdoc.js b/components/doc/alignitems/stretchdoc.js
@@ -25,10 +25,16 @@ export function StretchDoc(props) {
                 <p>Items are stretched to fit the container.</p>
             </DocSectionText>
             <div className="card">
-                <div className="flex align-items-stretch flex-wrap card-container blue-container" style={{minHeight:'200px'}}>
-                    <div className="flex align-items-center justify-content-center bg-blue-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '50px' }}>1</div>
-                    <div className="flex align-items-center justify-content-center bg-blue-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '50px' }}>2</div>
-                    <div className="flex align-items-center justify-content-center bg-blue-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '50px' }}>3</div>
+                <div className="flex align-items-stretch flex-wrap card-container blue-container" style={{ minHeight: '200px' }}>
+                    <div className="flex align-items-center justify-content-center bg-blue-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '50px' }}>
+                        1
+                    </div>
+                    <div className="flex align-items-center justify-content-center bg-blue-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '50px' }}>
+                        2
+                    </div>
+                    <div className="flex align-items-center justify-content-center bg-blue-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '50px' }}>
+                        3
+                    </div>
                 </div>
             </div>
             <DocSectionCode code={code} />

diff --git a/components/doc/alignself/baselinedoc.js b/components/doc/alignself/baselinedoc.js
@@ -25,10 +25,16 @@ export function BaselineDoc(props) {
                 <p>Item is located at the baseline of the container.</p>
             </DocSectionText>
             <div className="card">
-                <div className="flex align-items-stretch flex-wrap card-container indigo-container" style={{minHeight:'200px'}}>
-                    <div className="flex align-items-center justify-content-center bg-indigo-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '50px' }}>1</div>
-                    <div className="align-self-baseline flex align-items-center justify-content-center bg-indigo-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '50px' }}>2</div>
-                    <div className="flex align-items-center justify-content-center bg-indigo-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '50px' }}>3</div>
+                <div className="flex align-items-stretch flex-wrap card-container indigo-container" style={{ minHeight: '200px' }}>
+                    <div className="flex align-items-center justify-content-center bg-indigo-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '50px' }}>
+                        1
+                    </div>
+                    <div className="align-self-baseline flex align-items-center justify-content-center bg-indigo-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '50px' }}>
+                        2
+                    </div>
+                    <div className="flex align-items-center justify-content-center bg-indigo-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '50px' }}>
+                        3
+                    </div>
                 </div>
             </div>
             <DocSectionCode code={code} />

diff --git a/components/doc/alignself/centerdoc.js b/components/doc/alignself/centerdoc.js
@@ -25,10 +25,16 @@ export function CenterDoc(props) {
                 <p>Item is located at the center of the container.</p>
             </DocSectionText>
             <div className="card">
-                <div className="flex align-items-stretch flex-wrap card-container green-container" style={{minHeight:'200px'}}>
-                    <div className="flex align-items-center justify-content-center bg-green-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '50px' }}>1</div>
-                    <div className="flex align-self-center align-items-center justify-content-center bg-green-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '50px' }}>2</div>
-                    <div className="flex align-items-center justify-content-center bg-green-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '50px' }}>3</div>
+                <div className="flex align-items-stretch flex-wrap card-container green-container" style={{ minHeight: '200px' }}>
+                    <div className="flex align-items-center justify-content-center bg-green-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '50px' }}>
+                        1
+                    </div>
+                    <div className="flex align-self-center align-items-center justify-content-center bg-green-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '50px' }}>
+                        2
+                    </div>
+                    <div className="flex align-items-center justify-content-center bg-green-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '50px' }}>
+                        3
+                    </div>
                 </div>
             </div>
             <DocSectionCode code={code} />

diff --git a/components/doc/alignself/enddoc.js b/components/doc/alignself/enddoc.js
@@ -25,10 +25,16 @@ export function EndDoc(props) {
                 <p>Item is located at the end of the container.</p>
             </DocSectionText>
             <div className="card">
-                <div className="flex align-items-stretch flex-wrap card-container purple-container" style={{minHeight:'200px'}}>
-                    <div className="flex align-items-center justify-content-center bg-purple-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '50px' }}>1</div>
-                    <div className="align-self-end flex align-items-center justify-content-center bg-purple-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '50px' }}>2</div>
-                    <div className="flex align-items-center justify-content-center bg-purple-500 font-bold text-white border-round m-2"  style={{ minWidth: '200px', minHeight: '50px' }}>3</div>
+                <div className="flex align-items-stretch flex-wrap card-container purple-container" style={{ minHeight: '200px' }}>
+                    <div className="flex align-items-center justify-content-center bg-purple-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '50px' }}>
+                        1
+                    </div>
+                    <div className="align-self-end flex align-items-center justify-content-center bg-purple-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '50px' }}>
+                        2
+                    </div>
+                    <div className="flex align-items-center justify-content-center bg-purple-500 font-bold text-white border-round m-2" style={{ minWidth: '200px', minHeight: '50px' }}>
+                        3
+                    </div>
                 </div>
             </div>
             <DocSectionCode code={code} />