Integrate with-atlaskit

examples/with-atlaskit/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}

examples/with-atlaskit/README.md

@@ -0,0 +1,13 @@
+# Atlassian Atlaskit example
+
+This example shows how to use Next.js along with Atlaskit of React. This is intended to show the integration of this UI toolkit with the Framework.
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```

examples/with-atlaskit/components/ButtonComponent.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import Button, { ButtonGroup } from '@atlaskit/button'
+
+export default () => {
+  return (
+    <React.Fragment>
+      <Button style={{ margin: 10 }}>Button</Button>
+      <Button style={{ margin: 10 }} appearance="primary">
+        Primary Button
+      </Button>
+      <Button style={{ margin: 10 }} appearance="danger">
+        Danger Button
+      </Button>
+      <Button style={{ margin: 10 }} appearance="warning">
+        Warning Button
+      </Button>
+      <Button style={{ margin: 10 }} appearance="link">
+        Link Button
+      </Button>
+      <Button style={{ margin: 10 }} isDisabled>
+        Disabled Button
+      </Button>
+      <ButtonGroup appearance="primary">
+        <Button>First Button</Button>
+        <Button>Second Button</Button>
+        <Button>Third Button</Button>
+      </ButtonGroup>
+    </React.Fragment>
+  )
+}

examples/with-atlaskit/components/CheckboxComponent.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Checkbox } from '@atlaskit/checkbox'
+
+export default () => {
+  return (
+    <React.Fragment>
+      <Checkbox
+        value="Basic checkbox"
+        label="Basic checkbox"
+        onChange={() => {}}
+        name="checkbox-basic"
+        testId="cb-basic"
+      />
+      <Checkbox
+        isDisabled
+        label="Disabled"
+        value="Disabled"
+        name="checkbox-disabled"
+        testId="cb-disabled"
+      />
+      <Checkbox
+        isInvalid
+        label="Invalid"
+        value="Invalid"
+        name="checkbox-invalid"
+        testId="cb-invalid"
+      />
+    </React.Fragment>
+  )
+}

examples/with-atlaskit/components/DateTimePickerComponent.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import {
+  DatePicker,
+  DateTimePicker,
+  TimePicker,
+} from '@atlaskit/datetime-picker'
+import { Label } from '@atlaskit/field-base'
+
+export default () => {
+  return (
+    <React.Fragment>
+      <Label label="TimePicker - timeFormat (h:mm a)" />
+      <TimePicker onChange={console.log} timeFormat="h:mm a" />
+      <Label label="DatePicker - dateFormat (DD/MM/YYYY)" />
+      <DatePicker onChange={console.log} dateFormat="DD/MM/YYYY" />
+      <Label label="DateTimePicker - dateFormat (HH:mm) & timeFormat (Do MMMM YYYY)" />
+      <DateTimePicker
+        onChange={console.log}
+        timeFormat="HH:mm"
+        dateFormat="Do MMMM YYYY"
+      />
+    </React.Fragment>
+  )
+}

examples/with-atlaskit/components/DropdownMenuComponent.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import DropdownMenu, {
+  DropdownItemGroup,
+  DropdownItem,
+} from '@atlaskit/dropdown-menu'
+import { Label } from '@atlaskit/field-base'
+
+export default () => {
+  return (
+    <React.Fragment>
+      <Label label="DropdownMenu" />
+      <DropdownMenu trigger="Cities in Australia" triggerType="button">
+        <DropdownItemGroup>
+          <DropdownItem>Sydney</DropdownItem>
+          <DropdownItem>Melbourne</DropdownItem>
+          <DropdownItem>Adelaide</DropdownItem>
+          <DropdownItem>Perth</DropdownItem>
+          <DropdownItem>Brisbane</DropdownItem>
+          <DropdownItem>Canberra</DropdownItem>
+          <DropdownItem>Hobart</DropdownItem>
+          <DropdownItem>Darwin</DropdownItem>
+        </DropdownItemGroup>
+      </DropdownMenu>
+    </React.Fragment>
+  )
+}

examples/with-atlaskit/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "with-atlaskit",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@atlaskit/button": "^13.3.9",
+    "@atlaskit/checkbox": "^10.1.10",
+    "@atlaskit/datetime-picker": "^9.2.8",
+    "@atlaskit/dropdown-menu": "^9.0.2",
+    "@atlaskit/field-base": "^14.0.2",
+    "next": "^9.3.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "styled-components": "^5.0.1"
+  },
+  "devDependencies": {
+    "babel-plugin-styled-components": "^1.10.7"
+  }
+}

examples/with-atlaskit/pages/_document.js

@@ -0,0 +1,29 @@
+import Document from 'next/document'
+import { ServerStyleSheet } from 'styled-components'
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet()
+    const originalRenderPage = ctx.renderPage
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
+        })
+
+      const initialProps = await Document.getInitialProps(ctx)
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      }
+    } finally {
+      sheet.seal()
+    }
+  }
+}

examples/with-atlaskit/pages/index.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import ButtonComponent from '../components/ButtonComponent'
+import CheckboxComponent from '../components/CheckboxComponent'
+import DateTimePickerComponent from '../components/DateTimePickerComponent'
+import DropdownMenuComponent from '../components/DropdownMenuComponent'
+
+export default () => {
+  return (
+    <React.Fragment>
+      <ButtonComponent />
+      <CheckboxComponent />
+      <DateTimePickerComponent />
+      <DropdownMenuComponent />
+    </React.Fragment>
+  )
+}