Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add prettier to standardize formatting #3173

Merged
merged 3 commits into from
Aug 23, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
11 changes: 10 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,18 @@
{
"extends": "next/core-web-vitals",
"plugins": ["@typescript-eslint"],
"extends": [
"next/core-web-vitals",
"plugin:@typescript-eslint/recommended",
"prettier"
],
"rules": {
"@next/next/no-img-element": "off",
"react/display-name": "off",
"react/no-unescaped-entities": "off",
"@typescript-eslint/no-empty-function": "off",
"@typescript-eslint/no-empty-interface": "off",
"@typescript-eslint/no-unused-vars": "off",
"@typescript-eslint/no-explicit-any": "off",
"no-console": 2
}
}
1 change: 1 addition & 0 deletions .gitattributes
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
* text=auto eol=lf
7 changes: 7 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# Ignore artifacts:
build
coverage
api-generator
out
public
styles
9 changes: 9 additions & 0 deletions .prettierrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"useTabs": false,
"tabWidth": 4,
"trailingComma": "none",
"semi": true,
"singleQuote": true,
"jsxSingleQuote": false,
"printWidth": 250
}
532 changes: 283 additions & 249 deletions components/doc/accordion/index.js

Large diffs are not rendered by default.

413 changes: 233 additions & 180 deletions components/doc/autocomplete/index.js

Large diffs are not rendered by default.

91 changes: 50 additions & 41 deletions components/doc/avatar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@ import { CodeHighlight } from '../common/codehighlight';
import { DevelopmentSection } from '../common/developmentsection';

const AvatarDoc = memo(() => {

const sources = {
'class': {
class: {
tabName: 'Class Source',
content: `
import React, { Component } from 'react';
Expand Down Expand Up @@ -116,7 +115,7 @@ export class AvatarDemo extends Component {
}
`
},
'hooks': {
hooks: {
tabName: 'Hooks Source',
content: `
import React from 'react';
Expand Down Expand Up @@ -222,7 +221,7 @@ export const AvatarDemo = () => {
}
`
},
'ts': {
ts: {
tabName: 'TS Source',
content: `
import React from 'react';
Expand Down Expand Up @@ -328,7 +327,7 @@ export const AvatarDemo = () => {
}
`
},
'browser': {
browser: {
tabName: 'Browser Source',
imports: `
<script src="https://unpkg.com/primereact/core/core.min.js"></script>
Expand Down Expand Up @@ -439,82 +438,90 @@ const AvatarDemo = () => {
}
`
}
}
};

return (
<div className="content-section documentation" id="app-doc">
<TabView>
<TabPanel header="Documentation">
<h5>Import via Module</h5>
<CodeHighlight lang="js">
{`
<CodeHighlight lang="js">
{`
import { Avatar } from 'primereact/avatar';
import { AvatarGroup } from 'primereact/avatargroup';
`}
</CodeHighlight>
</CodeHighlight>

<h5>Import via CDN</h5>
<CodeHighlight>
{`
<CodeHighlight>
{`
<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/avatar/avatar.min.js"></script>
<script src="https://unpkg.com/primereact/avatargroup/avatargroup.min.js"></script>
`}
</CodeHighlight>
</CodeHighlight>

<h5>Getting Started</h5>
<p>Avatar has three built-in display modes; "label", "icon" and "image".</p>
<CodeHighlight>
{`
<CodeHighlight>
{`
<Avatar label="P" />
<Avatar icon="pi pi-search" />
<Avatar image="user.png" />
`}
</CodeHighlight>
</CodeHighlight>
<h5>Sizes</h5>
<p><i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.</p>
<CodeHighlight>
{`
<p>
<i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.
</p>
<CodeHighlight>
{`
<Avatar label="P" size="large"/>
`}
</CodeHighlight>
</CodeHighlight>
<h5>AvatarGroup</h5>
<p>A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.</p>
<CodeHighlight>
{`
<p>
A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.
</p>
<CodeHighlight>
{`
<AvatarGroup>
<Avatar label="P" />
<Avatar icon="pi pi-search" />
<Avatar image="user.png" />
<Avatar label="+2" />
</AvatarGroup>
`}
</CodeHighlight>
</CodeHighlight>
<h5>Shape</h5>
<p>Avatar comes in two different styles specified with the <i>shape</i> property, "square" is the default and "circle" is the alternative.</p>
<CodeHighlight>
{`
<p>
Avatar comes in two different styles specified with the <i>shape</i> property, "square" is the default and "circle" is the alternative.
</p>
<CodeHighlight>
{`
<Avatar label="P" shape="circle"/>
`}
</CodeHighlight>
</CodeHighlight>
<h5>Badge</h5>
<p>A badge can be added to an Avatar with the <Link href="/badge">Badge</Link> component.</p>
<CodeHighlight>
{`
<p>
A badge can be added to an Avatar with the <Link href="/badge">Badge</Link> component.
</p>
<CodeHighlight>
{`
<Avatar image="user.png" size="xlarge">
<Badge value="4" severity="danger" />
</Avatar>
`}
</CodeHighlight>
</CodeHighlight>
<h5>Templating</h5>
<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
<CodeHighlight>
{`
<CodeHighlight>
{`
<Avatar>
Content
</Avatar>
`}
</CodeHighlight>
</CodeHighlight>

<h5>Properties of Avatar</h5>
<p>Any valid attribute is passed to the root element implicitly, extended properties are as follows;</p>
Expand Down Expand Up @@ -604,7 +611,9 @@ import { AvatarGroup } from 'primereact/avatargroup';
</div>

<h5>Styling of Avatar</h5>
<p>Following is the list of structural style classes, for theming classes visit <Link href="/theming"> theming</Link> page.</p>
<p>
Following is the list of structural style classes, for theming classes visit <Link href="/theming"> theming</Link> page.
</p>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
Expand Down Expand Up @@ -667,8 +676,10 @@ import { AvatarGroup } from 'primereact/avatargroup';
<h5>Accessibility</h5>
<DevelopmentSection>
<h6>Screen Reader</h6>
<p>Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like <i>img</i> along with <i>aria-labelledby</i> or <i>aria-label</i> to describe the component.
In case avatars need to be tabbable, <i>tabIndex</i> can be added as well to implement custom key handlers.</p>
<p>
Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like <i>img</i> along with <i>aria-labelledby</i> or <i>aria-label</i> to describe the
component. In case avatars need to be tabbable, <i>tabIndex</i> can be added as well to implement custom key handlers.
</p>

<h5>Keyboard Support</h5>
<p>Component does not include any interactive elements.</p>
Expand All @@ -678,12 +689,10 @@ import { AvatarGroup } from 'primereact/avatargroup';
<p>None.</p>
</TabPanel>

{
useLiveEditorTabs({ name: 'AvatarDemo', sources: sources })
}
{useLiveEditorTabs({ name: 'AvatarDemo', sources: sources })}
</TabView>
</div>
);
})
});

export default AvatarDoc;
Loading