import { Button, Header, List, Message } from 'semantic-ui-react'

import CodeSnippet from 'docs/src/components/CodeSnippet'
import {
  semanticUIDocsURL,
  semanticUIRepoURL,
  semanticUICSSRepoURL,
} from 'docs/src/utils'

export const meta = {
  title: 'Usage',
}

<Header as='h1' content='Usage' textAlign='center' />

## JavaScript
        
The Semantic UI React package can be installed via Yarn:

<CodeSnippet mode='sh' value={`$ yarn add ${props.pkg.name}`} />
        
Installing Semantic UI React provides the JavaScript for your components. You'll also need
to include a stylesheet to provide the styling for your components. This is the typical
pattern for component frameworks, such as Semantic UI or Bootstrap.

The method you choose to include the stylesheet in your project will depend on the level
of customisation you require.

### Examples

For examples on how to import and use Semantic UI React components, click the code icon
next to any example. Here are a few direct links:

* [Button](/elements/button#button-example-button)
* [List](/elements/list#list-example-list)
* [Card](/views/card#card-example-card)
* [Modal](/modules/modal#modal-example-modal)

## CSS

<Message warning>
  <Message.Header as='h3'>Semantic UI support</Message.Header>
  <p>
    The release 2.3 of Semantic UI introduced some backward incompatible changes, so you
    should use corresponding version of Semantic UI React:
  </p>
  <Message.List>
    <Message.Item>for SUI 2.2 use 0.80.2 and below</Message.Item>
    <Message.Item>for SUI 2.3 use 0.81.0 and higher</Message.Item>
  </Message.List>
</Message>

### Content Delivery Network (CDN)

You can use the default Semantic UI stylesheet by including a Semantic UI CDN link in your _index.html_ file.

This is the quickest way to get started with Semantic UI React. You won't be able to use
custom themes with this method.

<CodeSnippet
  mode='html'
  value={`<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@${props.versions.sui}/dist/semantic.min.css"></link>`}
/>

### Semantic UI CSS package

The <a href={semanticUICSSRepoURL}>Semantic UI CSS package</a> is automatically synced
with the main Semantic UI repository to provide a lightweight CSS only version of Semantic
UI.

Semantic UI CSS can be installed as a package in your project using Yarn. You won't be able to use custom themes with this method.

```sh
$ yarn add semantic-ui-css
```

After install, you'll need to include the minified CSS file in your _index.js_ file:
        
```jsx
import 'semantic-ui-css/semantic.min.css';
```

### Semantic UI package

Install the full <a href={semanticUIRepoURL}>Semantic UI package</a>.

Semantic UI includes Gulp build tools so your project can preserve its own theme changes, allowing you to customise the style variables.

<p>
  Detailed documentation on theming in Semantic UI is provided <a href={`${semanticUIDocsURL}usage/theming.html`}>here</a>.
</p>

```sh
$ yarn add semantic-ui --dev
```

After building the project with Gulp, you'll need to include the minified CSS file in your _index.js_ file:

```jsx
import '../semantic/dist/semantic.min.css';
```

## Bundlers
       
Semantic UI React is fully supported by all modern JavaScript bundlers. We made some
example recipes with some of them. You can use them as start point for your projects.

### Webpack 2/3

Webpack 2/3 fully supports Semantic UI React, it also supports Tree Shaking. Please ensure that you
build your app in production mode before release, it will strip `propTypes` from your build.

<Message warning>
  <p>
    Webpack 2/3 tree shaking does not completely remove unused exports, there are numerous
    issues that are long-standing bugs:
  </p>
  <List>
    <List.Item
      icon='github'
      content={
        <a
          href='https://github.com/webpack/webpack/issues/1750'
          rel='noopener noreferrer'
          target='_blank'
        >
          webpack/webpack#1750
        </a>
      }
    />
    <List.Item
      icon='github'
      content={
        <a
          href='https://github.com/webpack/webpack/issues/2867'
          rel='noopener noreferrer'
          target='_blank'
        >
          webpack/webpack#2867
        </a>
      }
    />
    <List.Item
      icon='github'
      content={
        <a
          href='https://github.com/webpack/webpack/issues/2899'
          rel='noopener noreferrer'
          target='_blank'
        >
          webpack/webpack#2899
        </a>
      }
    />
    <List.Item
      icon='github'
      content={
        <a
          href='https://github.com/webpack/webpack/issues/3092'
          rel='noopener noreferrer'
          target='_blank'
        >
          webpack/webpack#3092
        </a>
      }
    />
  </List>
  <p>
    Semantic UI React imports will be not optimized, so we recommend to use
    <code>babel-plugin-lodash</code> in your builds. You can find example configuration in
    <code>examples/webpack3</code> directory.
  </p>
</Message>

<Button
  content='Webpack boilerplate'
  href='https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples/webpack3'
  icon='github'
  labelPosition='left'
/>
<Button
  content='Example configuration of plugin'
  href='https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples/webpack3/.babelrc'
  icon='github'
  labelPosition='left'
/>
<Button
  content='babel-plugin-lodash'
  href='https://github.com/lodash/babel-plugin-lodash'
  icon='github'
  labelPosition='left'
/>

### Webpack 4

Webpack 4 fully supports Semantic UI React, it also fully supports Tree Shaking. Please
ensure that you build your app in production mode before release, it will strip `propTypes` from your build.

Please ensure that you're using `semantic-ui-react@0.81.2` or higher because we added the
[`sideEffects`](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free) option in this release.