Add Chromia And Partial Jest Setup

.gitignore

@@ -39,8 +39,8 @@ pids
 lib-cov
 
 # Coverage directory used by tools like istanbul
-coverage
-
+.coverage
+.jest-cache
 # nyc test coverage
 .nyc_output
 

enzyme.config.js

@@ -1,3 +0,0 @@
-import Enzyme from 'enzyme'
-import Adapter from 'enzyme-adapter-react-16'
-Enzyme.configure({ adapter: new Adapter() })

jest.config.js

@@ -1,18 +1,30 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
 module.exports = {
-  preset: "ts-jest",
-  setupFiles: [
-    "<rootDir>/enzyme.config.js"
-  ],
-  moduleFileExtensions: [
-    "js",
-    "ts",
-    "tsx"
-  ],
-  transform: {
-    "^.+\\.tsx?$": "ts-jest",
-    "^.+\\.jsx?$": "babel-jest"
-  },
-  snapshotSerializers: [
-    "enzyme-to-json/serializer"
-  ]
-}
+	// The directory where Jest should store its cached dependency information
+	cacheDirectory: ".jest-cache",
+
+	// Automatically clear mock calls and instances between every test
+	clearMocks: true,
+
+	// The directory where Jest should output its coverage files
+	coverageDirectory: ".coverage",
+
+	// An array of regexp pattern strings used to skip coverage collection
+	coveragePathIgnorePatterns: ["/node_modules/", "<rootDir>/packages/(?:.+?)/dist/"],
+
+	// An array of directory names to be searched recursively up from the requiring module's location
+	moduleDirectories: ["node_modules", "packages"],
+
+	// An array of file extensions your modules use
+	moduleFileExtensions: ["js", "json", "jsx", "ts", "tsx", "node"],
+	// Run tests from one or more projects
+	projects: ["<rootDir>", "<rootDir>/packages/*"],
+
+	// A list of paths to modules that run some code to configure or set up the testing framework before each test
+	setupFilesAfterEnv: ["<rootDir>/setupTests.js"],
+
+	// An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+	testPathIgnorePatterns: ["/node_modules/", "<rootDir>/packages/(?:.+?)/dist/"],
+};

package.json

@@ -46,13 +46,15 @@
 		"@typescript-eslint/eslint-plugin": "^3.2.0",
 		"@typescript-eslint/parser": "^3.2.0",
 		"babel-core": "^6.26.3",
-		"babel-jest": "^25.4.0",
 		"babel-loader": "^8.0.6",
 		"babel-plugin-transform-export-extensions": "^6.22.0",
 		"babel-preset-env": "^1.7.0",
 		"babel-preset-react": "^6.24.1",
+		"chromatic": "^4.0.3",
 		"concurrently": "^5.2.0",
 		"csstype": "^2.6.10",
+		"enzyme": "^3.11.0",
+		"enzyme-adapter-react-16": "^1.15.2",
 		"eslint": "^7.2.0",
 		"eslint-config-prettier": "^6.11.0",
 		"eslint-plugin-jsx-a11y": "^6.2.3",

packages/components/.babelrc

@@ -1,3 +0,0 @@
-{
-	"plugins": ["@babel/plugin-transform-runtime"]
-}

packages/components/__tests__/Banner.test.js

@@ -1,13 +0,0 @@
-import React from "react"
-import { mount } from "enzyme"
-import Banner from "./../src/components/Banner"
-
-describe("Banner component", () => {
-
-  const component = mount(<Banner src="http://static.libsyn.com/p/assets/2/c/2/5/2c25acab892a768e/Twitter_Cover.png" />)
-
-  it("Should render correctly", () => {
-    expect(component).toMatchSnapshot()
-  })
-
-})

packages/components/__tests__/Button.test.js

@@ -1,15 +1,13 @@
-import React from "react"
-import { mount } from "enzyme"
-import Button from "./../src/components/Button"
+import React from "react";
+import { mount } from "enzyme";
+import Button from "./../src/components/Button";
 
 describe("Button component", () => {
-
-  it("Should render default button correctly", () => {
-    expect(mount(<Button>Click me!</Button>)).toMatchSnapshot()
-  })
-
-  it("Should render custom button correctly", () => {
-    expect(mount(<Button size="large" color="success">Hello Atlas</Button>)).toMatchSnapshot()
-  })
-
-})
+	it("Should render default button correctly", () => {
+		expect(mount(<Button>Click me!</Button>)).toMatchSnapshot();
+	});
+
+	it("Should render custom button correctly", () => {
+		expect(mount(<Button size="large">Hello Atlas</Button>)).toMatchSnapshot();
+	});
+});

packages/components/__tests__/ChannelSummary.test.js

@@ -1,20 +0,0 @@
-import React from "react"
-import { mount } from "enzyme"
-import ChannelSummary from "./../src/components/ChannelSummary"
-
-describe("ChannelSummary component", () => {
-
-  const component = mount(
-    <ChannelSummary
-      img={"https://s3.amazonaws.com/keybase_processed_uploads/9003a57620356bd89d62bd34c7c0c305_360_360.jpg"}
-      size="default"
-      name={"Test channel"}
-      isPublic={true}
-      isVerified={true}
-    />)
-
-  it("Should render correctly", () => {
-    expect(component).toMatchSnapshot()
-  })
-
-})

packages/components/__tests__/DetailsTable.test.js

@@ -1,20 +0,0 @@
-import React from "react"
-import { mount } from "enzyme"
-import DetailsTable from "./../src/components/DetailsTable"
-
-describe("DetailsTable component", () => {
-
-  const component = mount(<DetailsTable details={{
-    explicit: "yes",
-    "first released": "2019-02-27",
-    language: "English",
-    category: "Science & Technology",
-    license: "Original content",
-    attribution: ""
-  }} />)
-
-  it("Should render correctly", () => {
-    expect(component).toMatchSnapshot()
-  })
-
-})

packages/components/__tests__/Grid.test.js

@@ -1,19 +0,0 @@
-import React from "react"
-import { mount } from "enzyme"
-import Grid from "./../src/components/Grid"
-
-describe("Grid component", () => {
-
-  const Item = ({ text }) => <div>{text}</div>
-
-  const component = mount(<Grid
-      minItemWidth="250"
-      maxItemWidth="600"
-      items={[...Array(10).keys()].map((i, index) => <Item key={index} text={`test-${i}`} />)}
-    />)
-
-  it("Should render correctly", () => {
-    expect(component).toMatchSnapshot()
-  })
-
-})

packages/components/__tests__/SearchBar.test.js

@@ -1,13 +0,0 @@
-import React from "react"
-import { mount } from "enzyme"
-import SearchBar from "./../src/components/SearchBar"
-
-describe("SearchBar component", () => {
-
-  const component = mount(<SearchBar placeholder="Type here..." value="test" />)
-
-  it("Should render correctly", () => {
-    expect(component).toMatchSnapshot()
-  })
-
-})

packages/components/__tests__/Tag.test.js

@@ -1,25 +0,0 @@
-import React from "react"
-import { mount } from "enzyme"
-import Tag from "./../src/components/Tag"
-import { faCheck } from "@fortawesome/free-solid-svg-icons"
-import { colors } from "./../src/theme"
-
-describe("Tag component", () => {
-
-  const component = mount(<Tag icon={faCheck} text="test" color={colors.other.success} />)
-
-  it("Should render correctly", () => {
-    expect(component).toMatchSnapshot()
-  })
-
-  it("Should render icon.", () => {
-    expect(component.find("svg"))
-      .toHaveLength(1)
-  })
-
-  it("Should render text.", () => {
-    expect(component.contains(<span>test</span>))
-      .toBe(true)
-  })
-
-})

packages/components/__tests__/VideoPlayer.test.js

@@ -1,17 +0,0 @@
-import React from "react"
-import { mount } from "enzyme"
-import VideoPlayer from "./../src/components/VideoPlayer"
-
-describe("VideoPlayer component", () => {
-
-  const component = mount(
-    <VideoPlayer
-      src={"https://www.computt.com/asset/v0/5EjgEKNpyDbNdjcJoZ8izWuzeDUtAcaUvwG8vUWZQZ256NLb"}
-      poster={"https://ssl-static.libsyn.com/p/assets/a/4/8/f/a48f1a0697e958ce/Cover_2.png"}
-    />)
-
-  it("Should render correctly", () => {
-    expect(component).toMatchSnapshot()
-  })
-
-})

packages/components/__tests__/VideoPreview.test.js

@@ -1,17 +0,0 @@
-import React from "react"
-import { mount } from "enzyme"
-import VideoPreview from "./../src/components/VideoPreview"
-
-describe("VideoPreview component", () => {
-
-  const component = mount(
-    <VideoPreview
-      title="Test"
-      poster="https://ssl-static.libsyn.com/p/assets/a/4/8/f/a48f1a0697e958ce/Cover_2.png"
-    />)
-
-  it("Should render correctly", () => {
-    expect(component).toMatchSnapshot()
-  })
-
-})

packages/components/__tests__/__snapshots__/Avatar.test.js.snap

@@ -1,28 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Avatar component Should render correctly 1`] = `
-<Memo(Avatar)
-  img="https://s3.amazonaws.com/keybase_processed_uploads/9003a57620356bd89d62bd34c7c0c305_360_360.jpg"
->
-  <div
-    css={
-      Object {
-        "map": undefined,
-        "name": "9ax11r",
-        "next": undefined,
-        "styles": "
-    background-image: url(https://s3.amazonaws.com/keybase_processed_uploads/9003a57620356bd89d62bd34c7c0c305_360_360.jpg);
-    background-size: cover;
-    background-position: center;
-    border-radius: 50%;
-    min-width: 4.75rem;
-    min-height: 4.75rem;
-    max-width: 4.75rem;
-    max-height: 4.75rem;
-  ",
-        "toString": [Function],
-      }
-    }
-  />
-</Memo(Avatar)>
-`;
+exports[`Avatar component Should render correctly 1`] = `ReactWrapper {}`;

packages/components/__tests__/__snapshots__/Banner.test.js.snap

@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Banner component Should render correctly 1`] = `
-<Memo(Banner)
-  src="http://static.libsyn.com/p/assets/2/c/2/5/2c25acab892a768e/Twitter_Cover.png"
->
-  <div
-    css={
-      Object {
-        "map": undefined,
-        "name": "p5v1zq",
-        "next": undefined,
-        "styles": "
-    background-image: url(http://static.libsyn.com/p/assets/2/c/2/5/2c25acab892a768e/Twitter_Cover.png);
-    background-size: cover;
-    background-position: center;
-    width: 100%;
-    min-height: 6.25rem;
-  ",
-        "toString": [Function],
-      }
-    }
-  />
-</Memo(Banner)>
-`;

packages/components/__tests__/__snapshots__/ChannelSummary.test.js.snap

@@ -1,377 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ChannelSummary component Should render correctly 1`] = `
-<Memo(ChannelSummary)
-  img="https://s3.amazonaws.com/keybase_processed_uploads/9003a57620356bd89d62bd34c7c0c305_360_360.jpg"
-  isPublic={true}
-  isVerified={true}
-  name="Test channel"
-  size="default"
->
-  <div
-    css={
-      Object {
-        "map": undefined,
-        "name": "cbmrdi",
-        "next": undefined,
-        "styles": "
-      display: grid;
-      grid-template: auto / 4.75rem;
-      margin: 30px 0;
-    ",
-        "toString": [Function],
-      }
-    }
-  >
-    <div
-      css={
-        Object {
-          "map": undefined,
-          "name": "15zzzm1",
-          "next": undefined,
-          "styles": "
-      grid-column: 1 / 1;
-      cursor: pointer;
-    ",
-          "toString": [Function],
-        }
-      }
-      onClick={[Function]}
-    >
-      <Memo(Avatar)
-        img="https://s3.amazonaws.com/keybase_processed_uploads/9003a57620356bd89d62bd34c7c0c305_360_360.jpg"
-        size="default"
-      >
-        <div
-          css={
-            Object {
-              "map": undefined,
-              "name": "9ax11r",
-              "next": undefined,
-              "styles": "
-    background-image: url(https://s3.amazonaws.com/keybase_processed_uploads/9003a57620356bd89d62bd34c7c0c305_360_360.jpg);
-    background-size: cover;
-    background-position: center;
-    border-radius: 50%;
-    min-width: 4.75rem;
-    min-height: 4.75rem;
-    max-width: 4.75rem;
-    max-height: 4.75rem;
-  ",
-              "toString": [Function],
-            }
-          }
-        />
-      </Memo(Avatar)>
-    </div>
-    <div
-      css={
-        Object {
-          "map": undefined,
-          "name": "1efshn",
-          "next": undefined,
-          "styles": "
-      grid-column: 2 / 2;
-      flex-direction: column;
-      margin: 0 0 0 1rem;
-      & > a {
-        text-decoration: none;
-      }
-    ",
-          "toString": [Function],
-        }
-      }
-    >
-      <h1
-        css={
-          Object {
-            "map": undefined,
-            "name": "1k3ibyh",
-            "next": undefined,
-            "styles": "
-      color: #2E86AB;
-      margin: 0.75rem 0;
-      display: inline-block;
-      cursor: pointer;
-    ",
-            "toString": [Function],
-          }
-        }
-        onClick={[Function]}
-      >
-        Test channel
-      </h1>
-      <div
-        css={
-          Object {
-            "map": undefined,
-            "name": "1t1yw03",
-            "next": undefined,
-            "styles": "
-      text-transform: uppercase;
-      font-size: 0.825rem;
-      & > *:not(last-child) {
-        margin-right: 0.5rem;
-      }
-    ",
-            "toString": [Function],
-          }
-        }
-      >
-        <Memo(Tag)
-          color="#219653"
-          icon={
-            Object {
-              "icon": Array [
-                512,
-                512,
-                Array [],
-                "f00c",
-                "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z",
-              ],
-              "iconName": "check",
-              "prefix": "fas",
-            }
-          }
-          text="Verified"
-        >
-          <div
-            css={
-              Object {
-                "map": undefined,
-                "name": "1wt924n",
-                "next": undefined,
-                "styles": "
-      display: inline-block;
-      font-family: 'Lato','Helvetica Neue',Arial,Helvetica,sans-serif;
-      border: 1px solid #219653;
-      border-radius: 4px;
-      padding: 5px 10px;
-      color: #219653;
-      cursor: default;
-      vertical-align: middle;
-    ",
-                "toString": [Function],
-              }
-            }
-          >
-            <FontAwesomeIcon
-              border={false}
-              className=""
-              css={
-                Object {
-                  "map": undefined,
-                  "name": "1nzu8hs",
-                  "next": undefined,
-                  "styles": "
-      & > path:nth-of-type(1) {
-        color: inherit;
-        flex-shrink: 0;
-      }
-    ",
-                  "toString": [Function],
-                }
-              }
-              fixedWidth={false}
-              flip={null}
-              icon={
-                Object {
-                  "icon": Array [
-                    512,
-                    512,
-                    Array [],
-                    "f00c",
-                    "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z",
-                  ],
-                  "iconName": "check",
-                  "prefix": "fas",
-                }
-              }
-              inverse={false}
-              listItem={false}
-              mask={null}
-              pull={null}
-              pulse={false}
-              rotation={null}
-              size={null}
-              spin={false}
-              swapOpacity={false}
-              symbol={false}
-              title=""
-              transform={null}
-            >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-check fa-w-16 "
-                css={
-                  Object {
-                    "map": undefined,
-                    "name": "1nzu8hs",
-                    "next": undefined,
-                    "styles": "
-      & > path:nth-of-type(1) {
-        color: inherit;
-        flex-shrink: 0;
-      }
-    ",
-                    "toString": [Function],
-                  }
-                }
-                data-icon="check"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
-            </FontAwesomeIcon>
-            <span
-              style={
-                Object {
-                  "margin": "0 10px 0 0",
-                }
-              }
-            />
-            <span>
-              Verified
-            </span>
-          </div>
-        </Memo(Tag)>
-        <Memo(Tag)
-          color="#2F80ED"
-          icon={
-            Object {
-              "icon": Array [
-                576,
-                512,
-                Array [],
-                "f06e",
-                "M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z",
-              ],
-              "iconName": "eye",
-              "prefix": "fas",
-            }
-          }
-          text="Public"
-        >
-          <div
-            css={
-              Object {
-                "map": undefined,
-                "name": "kqccd5",
-                "next": undefined,
-                "styles": "
-      display: inline-block;
-      font-family: 'Lato','Helvetica Neue',Arial,Helvetica,sans-serif;
-      border: 1px solid #2F80ED;
-      border-radius: 4px;
-      padding: 5px 10px;
-      color: #2F80ED;
-      cursor: default;
-      vertical-align: middle;
-    ",
-                "toString": [Function],
-              }
-            }
-          >
-            <FontAwesomeIcon
-              border={false}
-              className=""
-              css={
-                Object {
-                  "map": undefined,
-                  "name": "1nzu8hs",
-                  "next": undefined,
-                  "styles": "
-      & > path:nth-of-type(1) {
-        color: inherit;
-        flex-shrink: 0;
-      }
-    ",
-                  "toString": [Function],
-                }
-              }
-              fixedWidth={false}
-              flip={null}
-              icon={
-                Object {
-                  "icon": Array [
-                    576,
-                    512,
-                    Array [],
-                    "f06e",
-                    "M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z",
-                  ],
-                  "iconName": "eye",
-                  "prefix": "fas",
-                }
-              }
-              inverse={false}
-              listItem={false}
-              mask={null}
-              pull={null}
-              pulse={false}
-              rotation={null}
-              size={null}
-              spin={false}
-              swapOpacity={false}
-              symbol={false}
-              title=""
-              transform={null}
-            >
-              <svg
-                aria-hidden="true"
-                className="svg-inline--fa fa-eye fa-w-18 "
-                css={
-                  Object {
-                    "map": undefined,
-                    "name": "1nzu8hs",
-                    "next": undefined,
-                    "styles": "
-      & > path:nth-of-type(1) {
-        color: inherit;
-        flex-shrink: 0;
-      }
-    ",
-                    "toString": [Function],
-                  }
-                }
-                data-icon="eye"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                style={Object {}}
-                viewBox="0 0 576 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
-                  fill="currentColor"
-                  style={Object {}}
-                />
-              </svg>
-            </FontAwesomeIcon>
-            <span
-              style={
-                Object {
-                  "margin": "0 10px 0 0",
-                }
-              }
-            />
-            <span>
-              Public
-            </span>
-          </div>
-        </Memo(Tag)>
-      </div>
-    </div>
-  </div>
-</Memo(ChannelSummary)>
-`;

packages/components/__tests__/__snapshots__/DetailsTable.test.js.snap

@@ -1,334 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DetailsTable component Should render correctly 1`] = `
-<Memo(DetailsTable)
-  details={
-    Object {
-      "attribution": "",
-      "category": "Science & Technology",
-      "explicit": "yes",
-      "first released": "2019-02-27",
-      "language": "English",
-      "license": "Original content",
-    }
-  }
->
-  <table
-    css={
-      Object {
-        "map": undefined,
-        "name": "1eb017w",
-        "next": undefined,
-        "styles": "
-      text-align: left;
-      border-collapse: separate;
-      border-spacing: 0;
-      text-transform: capitalize;
-    ",
-        "toString": [Function],
-      }
-    }
-  >
-    <tbody>
-      <tr
-        css={
-          Object {
-            "map": undefined,
-            "name": "oc1vdi",
-            "next": undefined,
-            "styles": "
-      td {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-      }
-    ",
-            "toString": [Function],
-          }
-        }
-        key="explicit"
-      >
-        <td
-          css={
-            Object {
-              "map": undefined,
-              "name": "uva6ry",
-              "next": undefined,
-              "styles": "
-      font-weight: 700;
-      padding: 0.5rem 0.75rem;
-      width: 25%;
-      color: #999;
-    ",
-              "toString": [Function],
-            }
-          }
-        >
-          explicit
-        </td>
-        <td
-          css={
-            Object {
-              "map": undefined,
-              "name": "naho03",
-              "next": undefined,
-              "styles": "
-      padding: 0.5rem 0.75rem;
-    ",
-              "toString": [Function],
-            }
-          }
-        >
-          yes
-        </td>
-      </tr>
-      <tr
-        css={
-          Object {
-            "map": undefined,
-            "name": "oc1vdi",
-            "next": undefined,
-            "styles": "
-      td {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-      }
-    ",
-            "toString": [Function],
-          }
-        }
-        key="first released"
-      >
-        <td
-          css={
-            Object {
-              "map": undefined,
-              "name": "uva6ry",
-              "next": undefined,
-              "styles": "
-      font-weight: 700;
-      padding: 0.5rem 0.75rem;
-      width: 25%;
-      color: #999;
-    ",
-              "toString": [Function],
-            }
-          }
-        >
-          first released
-        </td>
-        <td
-          css={
-            Object {
-              "map": undefined,
-              "name": "naho03",
-              "next": undefined,
-              "styles": "
-      padding: 0.5rem 0.75rem;
-    ",
-              "toString": [Function],
-            }
-          }
-        >
-          2019-02-27
-        </td>
-      </tr>
-      <tr
-        css={
-          Object {
-            "map": undefined,
-            "name": "oc1vdi",
-            "next": undefined,
-            "styles": "
-      td {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-      }
-    ",
-            "toString": [Function],
-          }
-        }
-        key="language"
-      >
-        <td
-          css={
-            Object {
-              "map": undefined,
-              "name": "uva6ry",
-              "next": undefined,
-              "styles": "
-      font-weight: 700;
-      padding: 0.5rem 0.75rem;
-      width: 25%;
-      color: #999;
-    ",
-              "toString": [Function],
-            }
-          }
-        >
-          language
-        </td>
-        <td
-          css={
-            Object {
-              "map": undefined,
-              "name": "naho03",
-              "next": undefined,
-              "styles": "
-      padding: 0.5rem 0.75rem;
-    ",
-              "toString": [Function],
-            }
-          }
-        >
-          English
-        </td>
-      </tr>
-      <tr
-        css={
-          Object {
-            "map": undefined,
-            "name": "oc1vdi",
-            "next": undefined,
-            "styles": "
-      td {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-      }
-    ",
-            "toString": [Function],
-          }
-        }
-        key="category"
-      >
-        <td
-          css={
-            Object {
-              "map": undefined,
-              "name": "uva6ry",
-              "next": undefined,
-              "styles": "
-      font-weight: 700;
-      padding: 0.5rem 0.75rem;
-      width: 25%;
-      color: #999;
-    ",
-              "toString": [Function],
-            }
-          }
-        >
-          category
-        </td>
-        <td
-          css={
-            Object {
-              "map": undefined,
-              "name": "naho03",
-              "next": undefined,
-              "styles": "
-      padding: 0.5rem 0.75rem;
-    ",
-              "toString": [Function],
-            }
-          }
-        >
-          Science & Technology
-        </td>
-      </tr>
-      <tr
-        css={
-          Object {
-            "map": undefined,
-            "name": "oc1vdi",
-            "next": undefined,
-            "styles": "
-      td {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-      }
-    ",
-            "toString": [Function],
-          }
-        }
-        key="license"
-      >
-        <td
-          css={
-            Object {
-              "map": undefined,
-              "name": "uva6ry",
-              "next": undefined,
-              "styles": "
-      font-weight: 700;
-      padding: 0.5rem 0.75rem;
-      width: 25%;
-      color: #999;
-    ",
-              "toString": [Function],
-            }
-          }
-        >
-          license
-        </td>
-        <td
-          css={
-            Object {
-              "map": undefined,
-              "name": "naho03",
-              "next": undefined,
-              "styles": "
-      padding: 0.5rem 0.75rem;
-    ",
-              "toString": [Function],
-            }
-          }
-        >
-          Original content
-        </td>
-      </tr>
-      <tr
-        css={
-          Object {
-            "map": undefined,
-            "name": "oc1vdi",
-            "next": undefined,
-            "styles": "
-      td {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-      }
-    ",
-            "toString": [Function],
-          }
-        }
-        key="attribution"
-      >
-        <td
-          css={
-            Object {
-              "map": undefined,
-              "name": "uva6ry",
-              "next": undefined,
-              "styles": "
-      font-weight: 700;
-      padding: 0.5rem 0.75rem;
-      width: 25%;
-      color: #999;
-    ",
-              "toString": [Function],
-            }
-          }
-        >
-          attribution
-        </td>
-        <td
-          css={
-            Object {
-              "map": undefined,
-              "name": "naho03",
-              "next": undefined,
-              "styles": "
-      padding: 0.5rem 0.75rem;
-    ",
-              "toString": [Function],
-            }
-          }
-        />
-      </tr>
-    </tbody>
-  </table>
-</Memo(DetailsTable)>
-`;

packages/components/__tests__/__snapshots__/Grid.test.js.snap

@@ -1,300 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Grid component Should render correctly 1`] = `
-<Memo(Grid)
-  items={
-    Array [
-      <Item
-        text="test-0"
-      />,
-      <Item
-        text="test-1"
-      />,
-      <Item
-        text="test-2"
-      />,
-      <Item
-        text="test-3"
-      />,
-      <Item
-        text="test-4"
-      />,
-      <Item
-        text="test-5"
-      />,
-      <Item
-        text="test-6"
-      />,
-      <Item
-        text="test-7"
-      />,
-      <Item
-        text="test-8"
-      />,
-      <Item
-        text="test-9"
-      />,
-    ]
-  }
-  maxItemWidth="600"
-  minItemWidth="250"
->
-  <div
-    className=""
-    css={
-      Object {
-        "map": undefined,
-        "name": "1sl9x6x",
-        "next": undefined,
-        "styles": "
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(250px, 600px));
-      gap: 30px;
-    ",
-        "toString": [Function],
-      }
-    }
-  >
-    <div
-      css={
-        Object {
-          "map": undefined,
-          "name": "wuoxs",
-          "next": undefined,
-          "styles": "
-      width: 100%;
-      cursor: pointer;
-    ",
-          "toString": [Function],
-        }
-      }
-      key="grid-item-0"
-    >
-      <Item
-        key="0"
-        text="test-0"
-      >
-        <div>
-          test-0
-        </div>
-      </Item>
-    </div>
-    <div
-      css={
-        Object {
-          "map": undefined,
-          "name": "wuoxs",
-          "next": undefined,
-          "styles": "
-      width: 100%;
-      cursor: pointer;
-    ",
-          "toString": [Function],
-        }
-      }
-      key="grid-item-1"
-    >
-      <Item
-        key="1"
-        text="test-1"
-      >
-        <div>
-          test-1
-        </div>
-      </Item>
-    </div>
-    <div
-      css={
-        Object {
-          "map": undefined,
-          "name": "wuoxs",
-          "next": undefined,
-          "styles": "
-      width: 100%;
-      cursor: pointer;
-    ",
-          "toString": [Function],
-        }
-      }
-      key="grid-item-2"
-    >
-      <Item
-        key="2"
-        text="test-2"
-      >
-        <div>
-          test-2
-        </div>
-      </Item>
-    </div>
-    <div
-      css={
-        Object {
-          "map": undefined,
-          "name": "wuoxs",
-          "next": undefined,
-          "styles": "
-      width: 100%;
-      cursor: pointer;
-    ",
-          "toString": [Function],
-        }
-      }
-      key="grid-item-3"
-    >
-      <Item
-        key="3"
-        text="test-3"
-      >
-        <div>
-          test-3
-        </div>
-      </Item>
-    </div>
-    <div
-      css={
-        Object {
-          "map": undefined,
-          "name": "wuoxs",
-          "next": undefined,
-          "styles": "
-      width: 100%;
-      cursor: pointer;
-    ",
-          "toString": [Function],
-        }
-      }
-      key="grid-item-4"
-    >
-      <Item
-        key="4"
-        text="test-4"
-      >
-        <div>
-          test-4
-        </div>
-      </Item>
-    </div>
-    <div
-      css={
-        Object {
-          "map": undefined,
-          "name": "wuoxs",
-          "next": undefined,
-          "styles": "
-      width: 100%;
-      cursor: pointer;
-    ",
-          "toString": [Function],
-        }
-      }
-      key="grid-item-5"
-    >
-      <Item
-        key="5"
-        text="test-5"
-      >
-        <div>
-          test-5
-        </div>
-      </Item>
-    </div>
-    <div
-      css={
-        Object {
-          "map": undefined,
-          "name": "wuoxs",
-          "next": undefined,
-          "styles": "
-      width: 100%;
-      cursor: pointer;
-    ",
-          "toString": [Function],
-        }
-      }
-      key="grid-item-6"
-    >
-      <Item
-        key="6"
-        text="test-6"
-      >
-        <div>
-          test-6
-        </div>
-      </Item>
-    </div>
-    <div
-      css={
-        Object {
-          "map": undefined,
-          "name": "wuoxs",
-          "next": undefined,
-          "styles": "
-      width: 100%;
-      cursor: pointer;
-    ",
-          "toString": [Function],
-        }
-      }
-      key="grid-item-7"
-    >
-      <Item
-        key="7"
-        text="test-7"
-      >
-        <div>
-          test-7
-        </div>
-      </Item>
-    </div>
-    <div
-      css={
-        Object {
-          "map": undefined,
-          "name": "wuoxs",
-          "next": undefined,
-          "styles": "
-      width: 100%;
-      cursor: pointer;
-    ",
-          "toString": [Function],
-        }
-      }
-      key="grid-item-8"
-    >
-      <Item
-        key="8"
-        text="test-8"
-      >
-        <div>
-          test-8
-        </div>
-      </Item>
-    </div>
-    <div
-      css={
-        Object {
-          "map": undefined,
-          "name": "wuoxs",
-          "next": undefined,
-          "styles": "
-      width: 100%;
-      cursor: pointer;
-    ",
-          "toString": [Function],
-        }
-      }
-      key="grid-item-9"
-    >
-      <Item
-        key="9"
-        text="test-9"
-      >
-        <div>
-          test-9
-        </div>
-      </Item>
-    </div>
-  </div>
-</Memo(Grid)>
-`;

packages/components/__tests__/__snapshots__/SearchBar.test.js.snap

@@ -1,84 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SearchBar component Should render correctly 1`] = `
-<Memo(SearchBar)
-  placeholder="Type here..."
-  value="test"
->
-  <div
-    css={
-      Object {
-        "map": undefined,
-        "name": "laoupi",
-        "next": undefined,
-        "styles": "
-      display: flex;
-      padding: 1.5rem;
-      margin: 1rem;
-      border-radius: 0.5rem;
-      border: none;
-
-      & * {
-        font-size: 1rem;
-      }
-    ",
-        "toString": [Function],
-      }
-    }
-  >
-    <input
-      css={
-        Object {
-          "map": undefined,
-          "name": "c0kzty",
-          "next": undefined,
-          "styles": "
-      padding: 0.75rem 0.5rem;
-      font-weight: 100;
-      border-radius: 0.25rem;
-      border: 1px solid #000;
-    ",
-          "toString": [Function],
-        }
-      }
-      onChange={[Function]}
-      placeholder="Type here..."
-      type="text"
-      value="test"
-    />
-    <Memo(Button)
-      onClick={[Function]}
-    >
-      <button
-        css={
-          Object {
-            "map": undefined,
-            "name": "1s1uxvy",
-            "next": undefined,
-            "styles": "
-    
-    padding: 0.75rem 0.5rem;
-
-    font-size: 1rem;
-
-    width: auto;
-  ;
-    border-radius: 0.25rem;
-    border-color: ;
-    border-style: solid;
-    border-width: 2px;
-    font-style: 'Lato','Helvetica Neue',Arial,Helvetica,sans-serif;
-    background-color: #2578C2;
-    color: #fff;
-  ",
-            "toString": [Function],
-          }
-        }
-        onClick={[Function]}
-      >
-        Search
-      </button>
-    </Memo(Button)>
-  </div>
-</Memo(SearchBar)>
-`;

packages/components/__tests__/__snapshots__/Tag.test.js.snap

@@ -1,130 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tag component Should render correctly 1`] = `
-<Memo(Tag)
-  color="#219653"
-  icon={
-    Object {
-      "icon": Array [
-        512,
-        512,
-        Array [],
-        "f00c",
-        "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z",
-      ],
-      "iconName": "check",
-      "prefix": "fas",
-    }
-  }
-  text="test"
->
-  <div
-    css={
-      Object {
-        "map": undefined,
-        "name": "1wt924n",
-        "next": undefined,
-        "styles": "
-      display: inline-block;
-      font-family: 'Lato','Helvetica Neue',Arial,Helvetica,sans-serif;
-      border: 1px solid #219653;
-      border-radius: 4px;
-      padding: 5px 10px;
-      color: #219653;
-      cursor: default;
-      vertical-align: middle;
-    ",
-        "toString": [Function],
-      }
-    }
-  >
-    <FontAwesomeIcon
-      border={false}
-      className=""
-      css={
-        Object {
-          "map": undefined,
-          "name": "1nzu8hs",
-          "next": undefined,
-          "styles": "
-      & > path:nth-of-type(1) {
-        color: inherit;
-        flex-shrink: 0;
-      }
-    ",
-          "toString": [Function],
-        }
-      }
-      fixedWidth={false}
-      flip={null}
-      icon={
-        Object {
-          "icon": Array [
-            512,
-            512,
-            Array [],
-            "f00c",
-            "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z",
-          ],
-          "iconName": "check",
-          "prefix": "fas",
-        }
-      }
-      inverse={false}
-      listItem={false}
-      mask={null}
-      pull={null}
-      pulse={false}
-      rotation={null}
-      size={null}
-      spin={false}
-      swapOpacity={false}
-      symbol={false}
-      title=""
-      transform={null}
-    >
-      <svg
-        aria-hidden="true"
-        className="svg-inline--fa fa-check fa-w-16 "
-        css={
-          Object {
-            "map": undefined,
-            "name": "1nzu8hs",
-            "next": undefined,
-            "styles": "
-      & > path:nth-of-type(1) {
-        color: inherit;
-        flex-shrink: 0;
-      }
-    ",
-            "toString": [Function],
-          }
-        }
-        data-icon="check"
-        data-prefix="fas"
-        focusable="false"
-        role="img"
-        style={Object {}}
-        viewBox="0 0 512 512"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-          fill="currentColor"
-          style={Object {}}
-        />
-      </svg>
-    </FontAwesomeIcon>
-    <span
-      style={
-        Object {
-          "margin": "0 10px 0 0",
-        }
-      }
-    />
-    <span>
-      test
-    </span>
-  </div>
-</Memo(Tag)>
-`;

packages/components/__tests__/__snapshots__/VideoPlayer.test.js.snap

@@ -1,148 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VideoPlayer component Should render correctly 1`] = `
-<Memo(VideoPlayer)
-  poster="https://ssl-static.libsyn.com/p/assets/a/4/8/f/a48f1a0697e958ce/Cover_2.png"
-  src="https://www.computt.com/asset/v0/5EjgEKNpyDbNdjcJoZ8izWuzeDUtAcaUvwG8vUWZQZ256NLb"
->
-  <div
-    css={
-      Object {
-        "map": undefined,
-        "name": "19dglr4",
-        "next": undefined,
-        "styles": "
-      max-width: 48rem;
-      & .video-player {
-      }
-    ",
-        "toString": [Function],
-      }
-    }
-  >
-    <ReactPlayer
-      config={
-        Object {
-          "file": Object {
-            "attributes": Object {
-              "className": "video-player",
-            },
-          },
-        }
-      }
-      controls={true}
-      css={
-        Object {
-          "map": undefined,
-          "name": "bggj8i",
-          "next": undefined,
-          "styles": "
-      width: 100%;
-      height: 100%;
-    ",
-          "toString": [Function],
-        }
-      }
-      height="360px"
-      light="https://ssl-static.libsyn.com/p/assets/a/4/8/f/a48f1a0697e958ce/Cover_2.png"
-      loop={false}
-      muted={false}
-      onBuffer={[Function]}
-      onBufferEnd={[Function]}
-      onDisablePIP={[Function]}
-      onDuration={[Function]}
-      onEnablePIP={[Function]}
-      onEnded={[Function]}
-      onError={[Function]}
-      onPause={[Function]}
-      onPlay={[Function]}
-      onProgress={[Function]}
-      onReady={[Function]}
-      onSeek={[Function]}
-      onStart={[Function]}
-      pip={false}
-      playbackRate={1}
-      playing={false}
-      playsinline={false}
-      progressInterval={1000}
-      style={Object {}}
-      url="https://www.computt.com/asset/v0/5EjgEKNpyDbNdjcJoZ8izWuzeDUtAcaUvwG8vUWZQZ256NLb"
-      volume={null}
-      width="640px"
-      wrapper="div"
-    >
-      <div
-        css={
-          Object {
-            "map": undefined,
-            "name": "bggj8i",
-            "next": undefined,
-            "styles": "
-      width: 100%;
-      height: 100%;
-    ",
-            "toString": [Function],
-          }
-        }
-        style={
-          Object {
-            "height": "360px",
-            "width": "640px",
-          }
-        }
-      >
-        <Preview
-          light="https://ssl-static.libsyn.com/p/assets/a/4/8/f/a48f1a0697e958ce/Cover_2.png"
-          onClick={[Function]}
-          url="https://www.computt.com/asset/v0/5EjgEKNpyDbNdjcJoZ8izWuzeDUtAcaUvwG8vUWZQZ256NLb"
-        >
-          <div
-            className="react-player__preview"
-            onClick={[Function]}
-            style={
-              Object {
-                "alignItems": "center",
-                "backgroundImage": "url(https://ssl-static.libsyn.com/p/assets/a/4/8/f/a48f1a0697e958ce/Cover_2.png)",
-                "backgroundPosition": "center",
-                "backgroundSize": "cover",
-                "cursor": "pointer",
-                "display": "flex",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": "100%",
-              }
-            }
-          >
-            <div
-              className="react-player__shadow"
-              style={
-                Object {
-                  "alignItems": "center",
-                  "background": "radial-gradient(rgb(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 60%)",
-                  "borderRadius": "64px",
-                  "display": "flex",
-                  "height": "64px",
-                  "justifyContent": "center",
-                  "width": "64px",
-                }
-              }
-            >
-              <div
-                className="react-player__play-icon"
-                style={
-                  Object {
-                    "borderColor": "transparent transparent transparent white",
-                    "borderStyle": "solid",
-                    "borderWidth": "16px 0 16px 26px",
-                    "marginLeft": "7px",
-                  }
-                }
-              />
-            </div>
-          </div>
-        </Preview>
-      </div>
-    </ReactPlayer>
-  </div>
-</Memo(VideoPlayer)>
-`;

packages/components/__tests__/__snapshots__/VideoPreview.test.js.snap

@@ -1,103 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VideoPreview component Should render correctly 1`] = `
-<Memo(VideoPreview)
-  poster="https://ssl-static.libsyn.com/p/assets/a/4/8/f/a48f1a0697e958ce/Cover_2.png"
-  title="Test"
->
-  <div
-    css={
-      Object {
-        "map": undefined,
-        "name": "0",
-        "next": undefined,
-        "styles": "",
-        "toString": [Function],
-      }
-    }
-  >
-    <div
-      css={
-        Object {
-          "map": undefined,
-          "name": "fqj6m7",
-          "next": undefined,
-          "styles": "
-      width: 100%;
-      background-color: black;
-    ",
-          "toString": [Function],
-        }
-      }
-    >
-      <img
-        css={
-          Object {
-            "map": undefined,
-            "name": "1lk1tws",
-            "next": undefined,
-            "styles": "
-      display: block;
-      width: 100%;
-      height: auto;
-    ",
-            "toString": [Function],
-          }
-        }
-        onClick={[Function]}
-        src="https://ssl-static.libsyn.com/p/assets/a/4/8/f/a48f1a0697e958ce/Cover_2.png"
-      />
-    </div>
-    <div
-      css={
-        Object {
-          "map": undefined,
-          "name": "1r27l9a",
-          "next": undefined,
-          "styles": "
-      display: grid;
-      grid-template: auto / auto;
-      margin: 10px 0 0;
-    ",
-          "toString": [Function],
-        }
-      }
-    >
-      <div
-        css={
-          Object {
-            "map": undefined,
-            "name": "opyjht",
-            "next": undefined,
-            "styles": "
-      grid-column: 1 / 1;
-    ",
-            "toString": [Function],
-          }
-        }
-      >
-        <h3
-          css={
-            Object {
-              "map": undefined,
-              "name": "1yuwxk0",
-              "next": undefined,
-              "styles": "
-      margin: 0;
-      font-weight: 700;
-      text-transform: capitalize;
-      color: #000;
-      font-size: 0.825rem;
-    ",
-              "toString": [Function],
-            }
-          }
-          onClick={[Function]}
-        >
-          Test
-        </h3>
-      </div>
-    </div>
-  </div>
-</Memo(VideoPreview)>
-`;

packages/components/now.json

@@ -1,11 +0,0 @@
-{
-  "builds": [
-    {
-      "src": "package.json",
-      "use": "@now/static-build",
-      "config": {
-        "distDir": "storybook-static"
-      }
-    }
-  ]
-}

packages/components/package.json

@@ -25,8 +25,8 @@
 		"build": "rollup -c",
 		"storybook": "start-storybook -p 6006",
 		"build-storybook": "build-storybook",
-		"now-build": "build-storybook",
-		"test": "echo \"Error: run tests from root\" && exit 1"
+		"test": "echo \"Error: run tests from root\" && exit 1",
+		"chromatic": "chromatic --project-token=qq8aetz26u"
 	},
 	"bugs": {
 		"url": "https://github.com/Joystream/atlas/issues"

packages/components/src/theme/colors.ts

@@ -1,28 +1,28 @@
 export default {
-  white: "#FFFFFF",
-  black: "#000000",
-  gray: {
-    900: "#0B0C0F",
-    800: "#181C20",
-    700: "#272D33",
-    600: "#343D44",
-    500: "#424E57",
-    400: "#52616B",
-    300: "#7B8A95",
-    200: "#B5C1C9",
-    100: "#DAE2EB",
-    50: "#F4F6F8"
-  },
-  blue: {
-    900: "#030041",
-    700: "#261EE4",
-    600: "#2F2FF4",
-    500: "#4038FF",
-    400: "#5252FF",
-    300: "#6C6CFF",
-    100: "#B4BBFF",
-    50: "#E0E1FF"
-  },
-  success: "#1CCB00",
-  error: "#B00020"
+	white: "#FFFFFF",
+	black: "#000000",
+	gray: {
+		900: "#0B0C0F",
+		800: "#181C20",
+		700: "#272D33",
+		600: "#343D44",
+		500: "#424E57",
+		400: "#52616B",
+		300: "#7B8A95",
+		200: "#B5C1C9",
+		100: "#DAE2EB",
+		50: "#F4F6F8"
+	},
+	blue: {
+		900: "#030041",
+		700: "#261EE4",
+		600: "#2F2FF4",
+		500: "#4038FF",
+		400: "#5252FF",
+		300: "#6C6CFF",
+		100: "#B4BBFF",
+		50: "#E0E1FF"
+	},
+	success: "#1CCB00",
+	error: "#FF3861"
 }

setupTests.js

@@ -0,0 +1,5 @@
+// setup file
+import { configure } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+
+configure({ adapter: new Adapter() });