move @joystream/components into atlas app, clean up build process

README.md

@@ -10,13 +10,13 @@ $ yarn start
 
 To start the app on `localhost:1234`, Storybook on `localhost:6006` and the bundler in watch mode.
 
-To build both the component package and the app together, run
+To build the app for distribution, run:
 
 ```bash
 $ yarn build
 ```
 
-To run tests (Currently WIP) run
+To run tests (Currently WIP) run:
 
 ```bash
 $ yarn test
@@ -24,7 +24,6 @@ $ yarn test
 
 ## Packages
 
-This monorepo consists of two packages, `app` and `@joystream/components` (the components package).
 This repo is managed with [yarn workspaces](https://classic.yarnpkg.com/en/docs/workspaces/)
 
 To run a command in a workspace:
@@ -33,22 +32,21 @@ To run a command in a workspace:
 $ yarn workspace YOUR_WORKSPACE_NAME YOUR_COMMAND
 ```
 
-For example, to add `react-spring` to `@joystream/components`:
+For example, to add `react-spring` to `atlas-app`:
 
 ```bash
-$ yarn workspace @joystream/components add react-spring
+$ yarn workspace atlas-app add react-spring
 ```
 
-### Components Package
-
-The components package is located under `./packages/components` and can is usually referenced by `@joystream/components`.
-It is, as the name suggests, a component library and everything related to components and atomic parts of the UI belongs here.
-
 ### App package
 
-The components package is located under `./packages/app` and is where the actual Atlas application lives.
+The app package is located under `./packages/app` and is where the actual Atlas application lives.
 Business logic, full pages and data fetching should all reside here.
 
+### Shared folder
+
+Historically, Atlas codebase was split between two packages - `app` and `@joystream/components`. Due to build process and developer experience issues it was decided to merge those packages into one until the separation is actually needed. Hence the `shared` directory under `app/src`. This folder is what used to be `@joystream/components` and it's intended to be application-agnostic. That means no Atlas-specific logic (like routing) should be put there, only atomic UI components.
+
 ## Deploy Previews
 
 Each PR has deploy previews for both for Storybook and for the App on Chromia and Netlify respectively.

babel.config.json

@@ -4,6 +4,5 @@
 		"@babel/preset-react",
 		"@babel/preset-typescript",
 		"@emotion/babel-preset-css-prop"
-	],
-	"babelrcRoots": ["*", "packages/*"]
+	]
 }

package.json

@@ -8,7 +8,7 @@
 		"start": "concurrently \"yarn dev\" \"yarn storybook\"",
 		"build": "lerna run build",
 		"dev": "lerna run --parallel dev",
-		"storybook": "lerna run --scope @joystream/components --stream storybook",
+		"storybook": "lerna run --scope atlas-app --stream storybook",
 		"clean": "lerna clean && rm -rf node_modules",
 		"test": "jest"
 	},
@@ -24,36 +24,9 @@
 		"@babel/preset-react": "^7.8.3",
 		"@babel/preset-typescript": "^7.9.0",
 		"@emotion/babel-preset-css-prop": "^10.0.27",
-		"@fortawesome/fontawesome-svg-core": "^1.2.28",
-		"@fortawesome/free-solid-svg-icons": "^5.13.0",
-		"@fortawesome/react-fontawesome": "^0.1.9",
-		"@parcel/transformer-svg-react": "^2.0.0-nightly.1739",
-		"@rollup/plugin-babel": "^5.0.3",
-		"@rollup/plugin-commonjs": "^11.0.2",
-		"@rollup/plugin-node-resolve": "^7.1.1",
-		"@storybook/addon-actions": "^5.3.17",
-		"@storybook/addon-docs": "^5.3.17",
-		"@storybook/addon-knobs": "^5.3.17",
-		"@storybook/addon-links": "^5.3.17",
-		"@storybook/addon-storysource": "^5.3.17",
-		"@storybook/addons": "^5.3.19",
-		"@storybook/react": "^5.3.17",
-		"@storybook/theming": "^5.3.19",
-		"@svgr/rollup": "^5.4.0",
-		"@svgr/webpack": "^5.4.0",
-		"@types/reach__router": "^1.3.5",
-		"@types/react": "^16.9.36",
-		"@types/react-dom": "^16.9.8",
-		"@types/react-redux": "^7.1.9",
-		"@types/redux": "^3.6.0",
 		"@typescript-eslint/eslint-plugin": "^3.2.0",
 		"@typescript-eslint/parser": "^3.2.0",
-		"babel-core": "^6.26.3",
 		"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",
@@ -67,14 +40,7 @@
 		"jest": "^26.0.1",
 		"lerna": "^3.20.2",
 		"lint-staged": "^10.2.7",
-		"parcel": "^2.0.0-alpha.3.2",
 		"prettier": "^2.0.5",
-		"react-docgen-typescript-loader": "^3.7.1",
-		"rollup": "^2.1.0",
-		"rollup-plugin-babel": "^4.4.0",
-		"rollup-plugin-peer-deps-external": "^2.2.2",
-		"rollup-plugin-typescript2": "^0.26.0",
-		"storybook-addon-jsx": "^7.1.15",
 		"ts-loader": "^6.2.1",
 		"typescript": "^3.8.3"
 	}

packages/app/.parcelrc

@@ -0,0 +1,6 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "*.svg": ["@parcel/transformer-svgo", "@parcel/transformer-svg-react"]
+  }
+}

packages/app/package.json

@@ -1,10 +1,10 @@
 {
-	"name": "app",
+	"name": "atlas-app",
 	"version": "1.0.0",
 	"description": "A user governed video platform",
-	"homepage": "https://github.com/Joystream/atlas#readme",
+	"homepage": "https://github.com/Joystream/joystream/tree/init_atlas/atlas",
 	"license": "ISC",
-	"main": "src/app.js",
+	"main": "../../dist/app.html",
 	"directories": {
 		"src": "src",
 		"test": "__tests__"
@@ -14,25 +14,60 @@
 	],
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/Joystream/atlas.git"
+		"url": "https://github.com/Joystream/joystream.git"
 	},
 	"scripts": {
 		"start": "parcel public/index.html",
 		"build": "parcel build public/index.html",
 		"dev": "parcel public/index.html",
-		"test": "echo \"Error: run tests from root\" && exit 1"
+		"storybook": "start-storybook -p 6006 -c src/shared/.storybook",
+		"build-storybook": "build-storybook -c src/shared/.storybook",
+		"test": "echo \"Error: run tests from root\" && exit 1",
+		"chromatic": "chromatic --project-token=qq8aetz26u"
 	},
 	"bugs": {
-		"url": "https://github.com/Joystream/atlas/issues"
+		"url": "https://github.com/Joystream/joystream/issues"
 	},
 	"dependencies": {
 		"@emotion/core": "^10.0.28",
-		"@joystream/components": "1.0.0",
 		"@reach/router": "^1.3.3",
+		"@types/reach__router": "^1.3.5",
+		"@types/react": "^16.9.36",
+		"@types/react-dom": "^16.9.8",
+		"@types/react-redux": "^7.1.9",
+		"@types/redux": "^3.6.0",
 		"emotion-normalize": "^10.1.0",
 		"react": "^16.13.1",
 		"react-dom": "^16.13.1",
 		"react-redux": "^7.2.0",
-		"redux": "^4.0.5"
+		"redux": "^4.0.5",
+		"react-player": "^2.2.0",
+		"react-spring": "^8.0.27",
+		"use-resize-observer": "^6.1.0",
+		"chromatic": "^4.0.3",
+		"react-docgen-typescript-loader": "^3.7.1",
+		"storybook-addon-jsx": "^7.1.15",
+		"parcel": "^2.0.0-beta.1",
+		"@fortawesome/fontawesome-svg-core": "^1.2.28",
+		"@fortawesome/free-solid-svg-icons": "^5.13.0",
+		"@fortawesome/react-fontawesome": "^0.1.9",
+		"@parcel/transformer-svg-react": "^2.0.0-nightly.1739",
+		"@parcel/transformer-svgo": "^2.0.0-nightly.1739",
+		"@storybook/addon-actions": "^5.3.17",
+		"@storybook/addon-docs": "^5.3.17",
+		"@storybook/addon-knobs": "^5.3.17",
+		"@storybook/addon-links": "^5.3.17",
+		"@storybook/addon-storysource": "^5.3.17",
+		"@storybook/addons": "^5.3.19",
+		"@storybook/react": "^5.3.17",
+		"@storybook/theming": "^5.3.19",
+		"@svgr/webpack": "^5.4.0"
+	},
+	"alias": {
+		"components": "./src/components",
+		"shared": "./src/shared",
+		"store": "./src/store",
+		"theme": "./src/theme",
+		"views": "./src/views"
 	}
 }

packages/app/src/App.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import { Provider } from "react-redux";
 import { Router } from "@reach/router";
 
-import store from "./store";
-import { Layout } from "./components";
-import HomeView from "app/src/views/HomeView";
+import store from "store";
+import { Layout } from "components";
+import { HomeView } from "views";
 
 export default function App() {
 	return (

packages/app/src/components/ChannelGallery.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { css } from "@emotion/core";
-import { ChannelPreview, Gallery } from "@joystream/components";
+import { ChannelPreview, Gallery } from "shared/components";
 
 const channels = [
 	{

packages/app/src/components/Hero.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { css } from "@emotion/core";
-import { Header, Button } from "@joystream/components";
+import { Button, Header } from "shared/components";
 
 type HeroProps = {
 	backgroundImg: string;

packages/app/src/components/Layout.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { GlobalStyle } from "@joystream/components";
+import { GlobalStyle } from "shared/components";
 
 const Layout: React.FC = ({ children }) => (
 	<main>

packages/app/src/components/SeriesGallery.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { css } from "@emotion/core";
-import { Gallery, SeriesPreview } from "@joystream/components";
+import { Gallery, SeriesPreview } from "shared/components";
 
 type SeriesGalleryProps = {
 	title: string;

packages/app/src/components/TagsGallery.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { TagButton, Gallery } from "@joystream/components";
+import { Gallery, TagButton } from "shared/components";
 
 const tags = [
 	"finance",

packages/app/src/components/VideoGallery.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from "react";
 import { css, SerializedStyles } from "@emotion/core";
 
-import { Gallery, VideoPreview } from "@joystream/components";
+import { Gallery, VideoPreview } from "shared/components";
 
 type VideoGalleryProps = {
 	title: string;

packages/components/.storybook/main.js → packages/app/src/shared/.storybook/main.js

@@ -1,6 +1,6 @@
 const path = require("path");
 
-const AssetsDir = path.join(__dirname, "..", "assets");
+const IconsDir = path.join(__dirname, "..", "icons");
 
 module.exports = {
 	stories: ["../stories/**/*.stories.(js|jsx|ts|tsx|mdx)"],
@@ -15,10 +15,10 @@ module.exports = {
 	webpackFinal: async (config) => {
 		// Disable the Storybook internal-`.svg`-rule for components loaded from our app.
 		const svgRule = config.module.rules.find((rule) => "test.svg".match(rule.test));
-		svgRule.exclude = [AssetsDir];
+		svgRule.exclude = [IconsDir];
 		config.module.rules.push({
 			test: /\.svg$/i,
-			include: [AssetsDir],
+			include: [IconsDir],
 			use: [
 				{
 					loader: "@svgr/webpack",

packages/components/.storybook/preview.jsx → packages/app/src/shared/.storybook/preview.jsx

@@ -4,7 +4,7 @@ import { addDecorator, addParameters } from "@storybook/react";
 import { withKnobs } from "@storybook/addon-knobs";
 import { jsxDecorator } from "storybook-addon-jsx";
 import theme from "./theme";
-import GlobalStyle from "../src/components/GlobalStyle";
+import { GlobalStyle } from "../components";
 
 const wrapperStyle = css`
 	padding: 10px;

packages/components/.storybook/theme.js → packages/app/src/shared/.storybook/theme.js

@@ -1,6 +1,5 @@
 import { create } from "@storybook/theming/create";
-
-import { colors } from "../src/theme";
+import { colors } from "../theme";
 
 export default create({
 	base: "dark",

packages/app/src/shared/__tests__/Avatar.test.js

@@ -0,0 +1,13 @@
+import React from "react"
+import { mount } from "enzyme"
+import Avatar from "../components/Avatar"
+
+describe("Avatar component", () => {
+
+	const component = mount(<Avatar img="https://s3.amazonaws.com/keybase_processed_uploads/9003a57620356bd89d62bd34c7c0c305_360_360.jpg" />)
+
+	it("Should render correctly", () => {
+		expect(component).toMatchSnapshot()
+	})
+
+})

packages/components/__tests__/Button.test.js → packages/app/src/shared/__tests__/Button.test.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { mount } from "enzyme";
-import Button from "./../src/components/Button";
+import { Button } from "../components";
 
 describe("Button component", () => {
 	it("Should render default button correctly", () => {

packages/components/src/components/Avatar/Avatar.style.tsx → packages/app/src/shared/components/Avatar/Avatar.style.tsx

@@ -1,5 +1,5 @@
 import { makeStyles, StyleFn } from "../../utils";
-import { spacing, colors } from "../../theme";
+import { colors, spacing } from "../../theme";
 
 export type AvatarStyleProps = {
 	size: "small" | "default" | "large";

packages/components/src/components/Button/Button.tsx → packages/app/src/shared/components/Button/Button.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { SerializedStyles } from "@emotion/core";
 import { ButtonStyleProps, useCSS } from "./Button.style";
-import BlockIcon from "../../../assets/block.svg";
+import { BlockIcon } from "../../icons";
 
 type ButtonProps = {
 	children?: React.ReactNode;

packages/components/src/components/ChannelPreview/ChannelPreview.tsx → packages/app/src/shared/components/ChannelPreview/ChannelPreview.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { SerializedStyles } from "@emotion/core";
 import { ChannelPreviewStyleProps, useCSS } from "./ChannelPreview.style";
-import Avatar from "../Avatar/Avatar";
+import Avatar from "../Avatar";
 
 type ChannelPreviewProps = {
 	views: string;

packages/components/src/components/Checkbox/Checkbox.tsx → packages/app/src/shared/components/Checkbox/Checkbox.tsx

@@ -1,7 +1,6 @@
-import React, { useState } from "react";
-import { useCSS, CheckboxStyleProps } from "./Checkbox.style";
-import CheckIcon from "../../../assets/check.svg";
-import DashIcon from "../../../assets/dash.svg";
+import React from "react";
+import { CheckboxStyleProps, useCSS } from "./Checkbox.style";
+import { CheckIcon, DashIcon } from "../../icons";
 
 type CheckboxProps = {
 	label?: string;

packages/app/src/shared/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+import Checkbox from "./Checkbox";
+export default Checkbox;

packages/components/src/components/Dropdown/Dropdown.tsx → packages/app/src/shared/components/Dropdown/Dropdown.tsx

@@ -1,8 +1,7 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useRef, useState } from "react";
 import { DropdownStyleProps, useCSS } from "./Dropdown.style";
-import ChevronIconUp from "../../../assets/chevron-down-big.svg";
-import ChevronIconDown from "../../../assets/chevron-up-big.svg";
-import { spacing } from "./../../theme";
+import { ChevronIconDown, ChevronIconUp } from "../../icons";
+import { spacing } from "../../theme";
 
 type DropdownOption = {
 	text: string;

packages/app/src/shared/components/Gallery/index.ts

@@ -0,0 +1,3 @@
+import Gallery from "./Gallery";
+
+export default Gallery;

packages/components/src/components/NavButton/NavButton.tsx → packages/app/src/shared/components/NavButton/NavButton.tsx

@@ -1,8 +1,7 @@
 import React from "react";
 import { SerializedStyles } from "@emotion/core";
-import { useCSS, NavButtonStyleProps } from "./NavButton.style";
-import ChevronRightIcon from "../../../assets/chevron-right-big.svg";
-import ChevronLeftIcon from "../../../assets/chevron-left-big.svg";
+import { NavButtonStyleProps, useCSS } from "./NavButton.style";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../icons";
 
 type NavButtonProps = {
 	direction: "right" | "left";

packages/components/src/components/Sidenav/Sidenav.style.ts → packages/app/src/shared/components/Sidenav/Sidenav.style.ts

@@ -1,4 +1,5 @@
-import { theme, utils } from "../..";
+import theme from "../../theme";
+import { makeStyles, StyleFn } from "../../utils";
 
 export const SIDENAV_WIDTH = 56;
 export const EXPANDED_SIDENAV_WIDTH = 360;
@@ -7,7 +8,7 @@ type SidenavStyleProps = {
 	expanded: boolean;
 };
 
-const nav: utils.StyleFn = () => ({
+const nav: StyleFn = () => ({
 	position: "fixed",
 	top: 0,
 	left: 0,
@@ -26,12 +27,12 @@ const nav: utils.StyleFn = () => ({
 	color: theme.colors.white,
 });
 
-const expandButton: utils.StyleFn = () => ({
+const expandButton: StyleFn = () => ({
 	padding: "7px",
 	margin: "-4px",
 });
 
-const drawerOverlay: utils.StyleFn<SidenavStyleProps> = (_, { expanded }) => ({
+const drawerOverlay: StyleFn<SidenavStyleProps> = (_, { expanded }) => ({
 	position: "fixed",
 	top: 0,
 	right: 0,
@@ -44,11 +45,11 @@ const drawerOverlay: utils.StyleFn<SidenavStyleProps> = (_, { expanded }) => ({
 	backgroundColor: "rgba(0, 0, 0, 0.5)",
 });
 
-const navItemsWrapper: utils.StyleFn = () => ({
+const navItemsWrapper: StyleFn = () => ({
 	marginTop: "90px",
 });
 
-const navItemContainer: utils.StyleFn = () => ({
+const navItemContainer: StyleFn = () => ({
 	":not(:first-child)": {
 		marginTop: theme.spacing.xxxl,
 	},
@@ -56,7 +57,7 @@ const navItemContainer: utils.StyleFn = () => ({
 	flexDirection: "column",
 });
 
-const navItem: utils.StyleFn = () => ({
+const navItem: StyleFn = () => ({
 	display: "flex",
 	alignItems: "center",
 	"> span": {
@@ -68,7 +69,7 @@ const navItem: utils.StyleFn = () => ({
 	},
 });
 
-const navSubitemsWrapper: utils.StyleFn = () => ({
+const navSubitemsWrapper: StyleFn = () => ({
 	paddingLeft: `calc(${theme.typography.sizes.icon.xlarge} + ${theme.spacing.xxl})`,
 	overflow: "hidden",
 	"> div": {
@@ -77,7 +78,7 @@ const navSubitemsWrapper: utils.StyleFn = () => ({
 	},
 });
 
-const navSubitem: utils.StyleFn = () => ({
+const navSubitem: StyleFn = () => ({
 	fontSize: theme.typography.sizes.body2,
 	fontFamily: theme.typography.fonts.base,
 	marginTop: theme.spacing.xxl,
@@ -87,15 +88,15 @@ const navSubitem: utils.StyleFn = () => ({
 });
 
 export const useSidenavCSS = (props: SidenavStyleProps) => ({
-	nav: utils.makeStyles([nav])(props),
-	expandButton: utils.makeStyles([expandButton])(props),
-	drawerOverlay: utils.makeStyles([drawerOverlay])(props),
-	navItemsWrapper: utils.makeStyles([navItemsWrapper])(props),
+	nav: makeStyles([nav])(props),
+	expandButton: makeStyles([expandButton])(props),
+	drawerOverlay: makeStyles([drawerOverlay])(props),
+	navItemsWrapper: makeStyles([navItemsWrapper])(props),
 });
 
 export const useNavItemCSS = (props: SidenavStyleProps) => ({
-	navItemContainer: utils.makeStyles([navItemContainer])(props),
-	navItem: utils.makeStyles([navItem])(props),
-	navSubitemsWrapper: utils.makeStyles([navSubitemsWrapper])(props),
-	navSubitem: utils.makeStyles([navSubitem])(props),
+	navItemContainer: makeStyles([navItemContainer])(props),
+	navItem: makeStyles([navItem])(props),
+	navSubitemsWrapper: makeStyles([navSubitemsWrapper])(props),
+	navSubitem: makeStyles([navSubitem])(props),
 });

packages/app/src/shared/components/Typography/Typography.style.ts

@@ -0,0 +1,113 @@
+import { typography, colors, spacing } from "../../theme"
+
+export type TypographyStyleProps = {
+	variant: "hero" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "overhead"
+}
+
+export let makeStyles = ({
+  variant = "body1"
+}: TypographyStyleProps) => {
+
+	const base = {
+		fontFamily: typography.fonts.base,
+		color: colors.white
+	}
+
+	let specific = {}
+
+	switch(variant) {
+		case "hero":
+			specific = {
+				fontSize: typography.sizes.hero,
+				fontWeight: typography.weights.medium,
+				margin: `${spacing.xxxl} 0`
+			}
+			break
+		case "h1":
+			specific = {
+				fontSize: typography.sizes.h1,
+				fontWeight: typography.weights.medium,
+				margin: `${spacing.xxl} 0`
+			}
+			break
+		case "h2":
+			specific = {
+				fontSize: typography.sizes.h2,
+				fontWeight: typography.weights.medium,
+				margin: `${spacing.xl} 0`
+			}
+			break
+		case "h3":
+			specific = {
+				fontSize: typography.sizes.h3,
+				fontWeight: typography.weights.medium,
+				margin: `${spacing.l} 0`
+			}
+			break
+		case "h4":
+			specific = {
+				fontSize: typography.sizes.h4,
+				fontWeight: typography.weights.medium,
+				margin: `${spacing.l} 0`
+			}
+			break
+		case "h5":
+			specific = {
+				fontSize: typography.sizes.h5,
+				fontWeight: typography.weights.medium,
+				margin: `${spacing.m} 0`
+			}
+			break
+		case "h6":
+			specific = {
+				fontSize: typography.sizes.h6,
+				fontWeight: typography.weights.medium,
+				margin: `${spacing.m} 0`
+			}
+			break
+		case "subtitle1":
+			specific = {
+				fontSize: typography.sizes.subtitle1,
+				fontWeight: typography.weights.light,
+				margin: `${spacing.l} 0`
+			}
+			break
+		case "subtitle2":
+			specific = {
+				fontSize: typography.sizes.subtitle2,
+				fontWeight: typography.weights.regular,
+				margin: `${spacing.m} 0`
+			}
+			break
+		case "body1":
+			specific = {
+				fontSize: typography.sizes.body1,
+				fontWeight: typography.weights.light,
+				margin: `${spacing.s} 0`
+			}
+			break
+		case "body2":
+			specific = {
+				fontSize: typography.sizes.body2,
+				fontWeight: typography.weights.light,
+				margin: `${spacing.xs} 0`
+			}
+			break
+		case "caption":
+			specific = {
+				fontSize: typography.sizes.caption,
+				fontWeight: typography.weights.light,
+				margin: `${spacing.xs} 0`
+			}
+			break
+		case "overhead":
+			specific = {
+				fontSize: typography.sizes.overhead,
+				fontWeight: typography.weights.regular,
+				margin: `${spacing.xs} 0`
+			}
+			break
+	}
+
+	return { ...base, ...specific }
+}

packages/components/src/components/VideoPreview/VideoPreview.styles.tsx → packages/app/src/shared/components/VideoPreview/VideoPreview.styles.tsx

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
-import { colors, spacing, typography } from "./../../theme";
-import Avatar from "components/Avatar";
-import Play from "../../../assets/play.svg";
+import { colors, spacing, typography } from "../../theme";
+import Avatar from "../Avatar";
+import { Play } from "../../icons";
 
 const HOVER_BORDER_SIZE = "2px";
 

packages/app/src/shared/components/index.ts

@@ -0,0 +1,24 @@
+export { default as Avatar } from "./Avatar";
+export { default as Button } from "./Button";
+export { default as Carousel } from "./Carousel";
+export { default as Dropdown } from "./Dropdown";
+export { default as Grid } from "./Grid";
+export { default as Header } from "./Header";
+export { default as Link } from "./Link";
+export { default as NavButton } from "./NavButton";
+export { default as RadioButton } from "./RadioButton";
+export { default as Checkbox } from "./Checkbox";
+export { default as TagButton } from "./TagButton";
+export { default as Tabs } from "./Tabs";
+export { default as Tab } from "./Tabs/Tab";
+export { default as Tag } from "./Tag";
+export { default as TextField } from "./TextField";
+export { default as Typography } from "./Typography";
+export { default as VideoPreview } from "./VideoPreview";
+export { default as VideoPlayer } from "./VideoPlayer";
+export { default as SeriesPreview } from "./SeriesPreview";
+export { default as ChannelPreview } from "./ChannelPreview";
+export { default as HamburgerButton } from "./HamburgerButton";
+export { default as Gallery } from "./Gallery";
+export { default as Sidenav, SIDENAV_WIDTH, EXPANDED_SIDENAV_WIDTH, NavItem } from "./Sidenav";
+export { default as GlobalStyle } from "./GlobalStyle";