import Link from '../../components/Link';

<Meta
  title="Documentation/Guidelines/Naming conventions"
  subtitle="Naming convention & linting"
  parameters={{
    componentSubtitle: 'Guidelines',
    previewTabs: {
      canvas: { hidden: true },
    },
  }}
/>

<hr/>

<p>
  The UI Kit uses the{' '}
  <a href="http://getbem.com/naming">BEM naming convention</a>.
</p>

<h3>Namespacing</h3>
<p>
  The Components are built to be included individually and not clobber global
  styles - all class attributes are prefixed by the{' '}
  <i className="wfp--inline-highlight">wfp--</i> moniker.
</p>

<h3>Linting</h3>
<p>
  Use{' '}
  <Link href="https://eslint.org/" target="_blank">
    ES-Lint
  </Link>{' '}
  which is a linting utility for JavaScript and JSX while building your React
  Application to analyze source code to flag programming errors, bugs, stylistic
  errors and suspicious constructs.
</p>
<p>
  If you want to use the ESLint configuration in a project you can install it
  with the{' '}
  <Link href="https://www.npmjs.com/package/eslint-config-react-app">
    eslint-config-react-app
  </Link>
  . It also includes the eslint-plugin-jsx-a11y accessibility rules by default. When
  using Create React App no action is needed since it already includes the configuration.
</p>

<h4>Basic rules used when building the UI Kit</h4>

<ul className="wfp--story__list">
  <li>ECMAScript 6 features</li>
  <li>no require statements</li>
  <li>spaces (2 space indentation)</li>
  <li>Semicolon is required at the end of a line</li>
</ul>
