@bitrise/bitkit 10.1.0-alpha-chakra.3 → 10.1.0-alpha-breadcrumb.2

package/package.json

@@ -1,16 +1,29 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.1.0-alpha-chakra.3",
+  "version": "10.1.0-alpha-breadcrumb.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "scripts": {
+    "build": "yarn build:lib && yarn build:site",
+    "build:docs": "ts-node ./scripts/build-docs",
     "build:icons": "ts-node ./scripts/build-icons.ts",
+    "build:lib": "rm -rf ./lib && yarn build:lib:cjs && yarn build:lib:esn",
+    "build:lib:esn": "tsc -p src -m esnext -t esnext --outDir lib/esn",
+    "build:lib:cjs": "tsc -p src --outDir lib/cjs",
+    "build:prepare": "rm -rf ./dist && mkdir dist && cp site/index.html dist && ln -s index.html dist/404.html",
+    "build:site": "yarn build:prepare && yarn build:docs && yarn tsc:site && yarn build:site:esbuild",
+    "tsc:site": "tsc --noEmit -p site/tsconfig.json",
+    "build:site:esbuild": "esbuild --bundle site/index.tsx --outdir=dist --target=esnext --loader:.woff2=file --loader:.woff=file --minify --sourcemap",
     "commitlint": "commitlint",
-    "lint": "eslint src/**/*.tsx",
+    "lint": "yarn lint:js",
+    "lint:js": "eslint src/**/*.tsx",
     "semantic-release": "semantic-release",
-    "start": "yarn storybook",
+    "serve": "superstatic ./dist --port 4001 -c superstatic.json",
+    "start": "yarn build:prepare && concurrently \"yarn start:docs\" \"yarn start:esbuild\" \"yarn serve\"",
+    "start:esbuild": "esbuild --bundle site/index.tsx --watch --outdir=dist --target=esnext --loader:.woff2=file --loader:.woff=file",
+    "start:docs": "ts-node ./scripts/build-docs-watch",
     "test": "jest ./src",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
@@ -20,14 +33,15 @@
     "framer-motion": "./node_modules/framer-motion/dist/cjs"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.2.4",
+    "@chakra-ui/react": "^2.2.1",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
+    "@juggle/resize-observer": "^3.3.1",
     "@popperjs/core": "^2.11.5",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.11",
-    "framer-motion": "^6.5.1",
-    "luxon": "^2.5.0",
+    "framer-motion": "^6.3.15",
+    "luxon": "^2.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-popper": "^2.3.0"
@@ -37,13 +51,13 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.9",
-    "@babel/parser": "^7.18.9",
+    "@babel/core": "^7.18.5",
+    "@babel/parser": "^7.18.5",
     "@bitrise/eslint-plugin": "^2.2.0",
-    "@chakra-ui/cli": "^2.1.2",
+    "@chakra-ui/cli": "^2.1.0",
     "@commitlint/cli": "^16.3.0",
     "@commitlint/config-conventional": "^16.2.4",
-    "@google-cloud/storage": "^5.20.5",
+    "@google-cloud/storage": "^5.19.4",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
@@ -57,43 +71,63 @@
     "@storybook/react": "^6.5.9",
     "@storybook/testing-library": "^0.0.13",
     "@storybook/theming": "^6.5.9",
-    "@svgr/core": "^6.3.0",
+    "@svgr/cli": "^6.2.1",
+    "@svgr/core": "^6.2.1",
     "@types/cheerio": "^0.22.31",
     "@types/clipboard": "^2.0.1",
     "@types/enzyme": "^3.10.12",
-    "@types/jest": "^27.5.2",
-    "@types/luxon": "^2.4.0",
-    "@types/react": "18.0.15",
-    "@types/react-dom": "^18.0.6",
+    "@types/fscreen": "^1.0.1",
+    "@types/jest": "^27.5.1",
+    "@types/lodash.sample": "^4.2.7",
+    "@types/lodash.shuffle": "^4.2.7",
+    "@types/luxon": "^2.3.2",
+    "@types/prismjs": "^1.26.0",
+    "@types/react": "18.0.14",
+    "@types/react-dom": "^18.0.5",
+    "@types/react-router": "^5.1.18",
+    "@types/react-router-dom": "^5.3.3",
     "@types/vfile-message": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.30.7",
-    "@typescript-eslint/parser": "^5.30.7",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "axios": "^0.27.2",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.2.5",
     "babel-plugin-polyfill-corejs2": "^0.3.1",
+    "concurrently": "^7.2.2",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
-    "eslint": "^8.20.0",
+    "esbuild": "^0.14.47",
+    "eslint": "^8.18.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.6.0",
+    "eslint-plugin-jest": "^26.5.3",
     "eslint-plugin-jsx-a11y": "^6.6.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^4.1.0",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.1",
+    "eslint-plugin-storybook": "^0.5.13",
     "eslint-plugin-testing-library": "^5.5.1",
+    "fscreen": "^1.2.0",
     "glob": "^8.0.3",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
     "jsdom": "^19.0.0",
+    "lodash.sample": "^4.2.1",
+    "lodash.shuffle": "^4.2.0",
+    "node-watch": "^0.7.3",
     "prettier": "^2.7.1",
+    "prismjs": "^1.28.0",
+    "react": "^18.2.0",
+    "react-docgen": "5.4.2",
+    "react-dom": "^18.2.0",
+    "react-router": "^5.3.1",
+    "react-router-dom": "^5.3.1",
     "recast": "^0.21.1",
     "semantic-release": "^19.0.3",
+    "superstatic": "^8.0.0",
     "ts-jest": "^27.1.5",
-    "ts-node": "^10.9.1",
+    "ts-node": "^10.8.1",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.7.4",
     "webpack": "^5.73.0"
@@ -119,7 +153,7 @@
   },
   "resolutions": {
     "**/ast-types": "npm:@gkz/ast-types",
-    "ts-node": "^10.9.1",
+    "ts-node": "^10.8.1",
     "@types/react": "17.0.40"
   }
 }

package/src/Components/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,30 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import Breadcrumb from './Breadcrumb';
+import BreadcrumbLink from './BreadcrumbLink';
+
+export default {
+  title: 'Components/Breadcrumb',
+  component: Breadcrumb,
+  subcomponents: { BreadcrumbLink },
+} as ComponentMeta<typeof Breadcrumb>;
+
+const Template: ComponentStory<typeof Breadcrumb> = (props) => (
+  <Breadcrumb {...props}>
+    <BreadcrumbLink
+      avatarUrl="https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png"
+      href="#"
+    >
+      Bitrise #Core
+    </BreadcrumbLink>
+    <BreadcrumbLink avatarName="Bitkit" href="#">
+      bitkit
+    </BreadcrumbLink>
+    <BreadcrumbLink isCurrentPage>settings</BreadcrumbLink>
+  </Breadcrumb>
+);
+
+export const WithProps = Template.bind({});
+WithProps.args = {
+  hasSeparatorAfterLast: false,
+  hasSeparatorBeforeFirst: false,
+};

package/src/Components/Breadcrumb/Breadcrumb.theme.ts

@@ -0,0 +1,25 @@
+import type { SystemStyleObject } from '@chakra-ui/theme-tools';
+
+const BreadcrumbTheme: SystemStyleObject = {
+  baseStyle: {
+    container: {
+      '> ol': {
+        display: 'flex',
+        alignItems: 'center',
+      },
+    },
+    link: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8',
+      '[aria-current]': {
+        color: 'red',
+      },
+    },
+    separator: {
+      display: 'flex',
+    },
+  },
+};
+
+export default BreadcrumbTheme;

package/src/Components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,51 @@
+import { Children } from 'react';
+import {
+  Breadcrumb as ChakraBreadcrumb,
+  BreadcrumbProps as ChakraBreadcrumbProps,
+  BreadcrumbItem,
+  BreadcrumbSeparator,
+  forwardRef,
+  useBreakpointValue,
+} from '@chakra-ui/react';
+import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
+import Icon, { TypeIconName } from '../Icon/Icon';
+
+export interface BreadcrumbProps extends ChakraBreadcrumbProps {
+  hasSeparatorAfterLast?: boolean;
+  hasSeparatorBeforeFirst?: boolean;
+  separatorIconName?: TypeIconName;
+}
+
+/**
+ * Breadcrumbs is a navigation pattern that helps users understand the hierarchy of a website.
+ */
+const Breadcrumb = forwardRef<BreadcrumbProps, 'nav'>((props, ref) => {
+  const { children, hasSeparatorAfterLast, hasSeparatorBeforeFirst, separatorIconName, ...rest } = props;
+  const isMobile = !!useBreakpointValue({ [BREAKPOINTS.MOBILE]: true, [BREAKPOINTS.DESKTOP]: false }, 'desktop');
+
+  const childrenCount = Children.count(children);
+  const items = Children.map(children, (child, index) => {
+    return (
+      <BreadcrumbItem>
+        {hasSeparatorBeforeFirst && index === 0 && <BreadcrumbSeparator />}
+        {child}
+        {hasSeparatorAfterLast && index === childrenCount - 1 && <BreadcrumbSeparator />}
+      </BreadcrumbItem>
+    );
+  });
+
+  const defaultIconName = isMobile ? 'ChevronLeft' : 'ChevronRight';
+  const properties = {
+    separator: <Icon name={separatorIconName || defaultIconName} color="neutral.70" size="16" />,
+    ...rest,
+  };
+  return (
+    <ChakraBreadcrumb {...properties} ref={ref}>
+      {items}
+    </ChakraBreadcrumb>
+  );
+});
+
+Breadcrumb.defaultProps = {};
+
+export default Breadcrumb;

package/src/Components/Breadcrumb/BreadcrumbLink.tsx

@@ -0,0 +1,34 @@
+import {
+  BreadcrumbLink as ChakraBreadcrumbLink,
+  BreadcrumbLinkProps as ChakraBreadcrumbLinkProps,
+  forwardRef,
+  useBreakpointValue,
+} from '@chakra-ui/react';
+import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
+import Avatar from '../Avatar/Avatar';
+
+export interface BreadcrumbLinkProps extends ChakraBreadcrumbLinkProps {
+  avatarName?: string;
+  avatarUrl?: string;
+}
+
+const BreadcrumbLink = forwardRef<BreadcrumbLinkProps, 'a'>((props, ref) => {
+  const { avatarName, avatarUrl, children, isCurrentPage, ...rest } = props;
+  const isMobile = !!useBreakpointValue({ [BREAKPOINTS.MOBILE]: true, [BREAKPOINTS.DESKTOP]: false }, 'desktop');
+
+  const properties: ChakraBreadcrumbLinkProps = {
+    color: isCurrentPage ? 'neutral.40' : 'inherit',
+    isCurrentPage,
+    ...rest,
+  };
+  return (
+    <ChakraBreadcrumbLink {...properties} color={isCurrentPage ? 'neutral.40' : 'inherit'} ref={ref}>
+      {!isMobile && (avatarName || avatarUrl) && (
+        <Avatar name={avatarName || children?.toString()} src={avatarUrl} borderRadius="4" />
+      )}
+      {children}
+    </ChakraBreadcrumbLink>
+  );
+});
+
+export default BreadcrumbLink;

package/src/Components/Dialog/Dialog.tsx

@@ -5,6 +5,7 @@ import {
   ModalCloseButton,
   ModalHeader,
   useBreakpointValue,
+  usePrefersReducedMotion,
   HTMLChakraProps,
 } from '@chakra-ui/react';
 import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
@@ -35,12 +36,14 @@ const Dialog = ({
   ...rest
 }: DialogProps) => {
   const dialogSize = useBreakpointValue({ [BREAKPOINTS.MOBILE]: 'mobile', [BREAKPOINTS.DESKTOP]: size });
+  const prefersReducedMotion = usePrefersReducedMotion();
+
   return (
     <Modal
       closeOnEsc={isClosable}
       closeOnOverlayClick={false}
       isOpen={isOpen}
-      motionPreset="none"
+      motionPreset={prefersReducedMotion ? 'none' : 'scale'}
       onClose={isClosable ? onClose : () => {}}
       scrollBehavior={scrollBehavior}
       size={dialogSize}

package/src/Components/Tabs/Tab.tsx

@@ -1,4 +1,6 @@
 import {
+  Badge as ChakraBadge,
+  BadgeProps as ChakraBadgeProps,
   Button,
   Tab as ChakraTab,
   TabProps as ChakraTabProps,
@@ -6,8 +8,28 @@ import {
   useMultiStyleConfig,
   useTab,
 } from '@chakra-ui/react';
-import Badge, { BadgeProps } from '../Badge/Badge';
-import Icon, { TypeIconName } from '../Icon/Icon';
+import Icon from '../../Old/Icon/Icon';
+import { TypeIconName } from '../../Old/Icon/tsx';
+
+// TODO: separated component
+interface BadgeProps extends ChakraBadgeProps {
+  backgroundColor?: ChakraBadgeProps['backgroundColor'];
+  children?: number | string;
+  color?: ChakraBadgeProps['color'];
+}
+
+const Badge = (props: BadgeProps) => {
+  const properties: ChakraBadgeProps = {
+    ...props,
+    borderRadius: '4',
+    fontSize: '1',
+    lineHeight: '1',
+    paddingY: '3px',
+    paddingX: '8',
+    textTransform: 'uppercase',
+  };
+  return <ChakraBadge {...properties} />;
+};
 
 export interface TabProps extends ChakraTabProps {
   badge?: BadgeProps;

package/src/Components/Transitions/Fade.stories.tsx

@@ -0,0 +1,26 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { useDisclosure } from '@chakra-ui/react';
+import Button from '../Button/Button';
+import Box from '../Box/Box';
+import Fade from './Fade';
+
+export default {
+  title: 'Components/Fade',
+  component: Fade,
+} as ComponentMeta<typeof Fade>;
+
+export const WithProps: ComponentStory<typeof Fade> = (props) => {
+  const { isOpen, onToggle } = useDisclosure();
+
+  return (
+    <Box height="200">
+      <Button onClick={onToggle}>Toggle fade transition</Button>
+
+      <Fade in={isOpen} {...props}>
+        <Box p="32" color="neutral.10" mt="4" bg="neutral.90">
+          Fade
+        </Box>
+      </Fade>
+    </Box>
+  );
+};

package/src/Components/Transitions/Fade.tsx

@@ -0,0 +1,12 @@
+import { Fade as ChakraFade, FadeProps, forwardRef } from '@chakra-ui/react';
+
+/**
+ * Fade is a transition component
+ */
+const Fade = forwardRef<FadeProps, 'div'>((props, ref) => {
+  return <ChakraFade {...props} ref={ref} />;
+});
+
+export type { FadeProps };
+
+export default Fade;

package/src/Old/AddonBeam/AddonBeam.css

@@ -0,0 +1,16 @@
+:root {
+  --AddonBeam--height: 3rem;
+}
+
+.AddonBeam {
+  min-height: var(--AddonBeam--height);
+  padding: 0.375rem 1.25rem;
+}
+
+.AddonBeam__link {
+  padding: 0.375rem var(--size--x2);
+  border-radius: var(--size--x2);
+  transition-property: background-color;
+  transition-duration: var(--transition-duration--base);
+  transition-timing-function: var(--transition-timing-function);
+}

package/src/Old/AddonBeam/AddonBeam.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { TypeIconName } from '../Icon/tsx';
+import Flex, { Props as FlexProps } from '../Flex/Flex';
+import Hamburger from '../Hamburger/Hamburger';
+import Icon from '../Icon/Icon';
+import Link from '../Link/Link';
+import Image from '../Image/Image';
+import Text from '../Text/Text';
+import AddonBeamLink from './AddonBeamLink';
+import './AddonBeam.css';
+
+export interface Props extends FlexProps {
+  /** The icon that appears to the very left of the beam that represents the add-on */
+  addonIcon: TypeIconName;
+  /** The name that appears next to the add-on icon */
+  addonName: string;
+  /** Image src for the Bitrise application */
+  appImage?: string;
+  /** Link back to the Bitrise application */
+  appLink?: string;
+  /** Name for the Bitrise application */
+  appName?: string;
+  /** Flag that indicates with a badge that the addon is in a Beta stage  */
+  isBeta?: boolean;
+  /** Flag for if the Hamburger menu icon should be in an active state */
+  isHamburgerIconActive?: boolean;
+  /** */
+  isInResponsiveView?: boolean;
+  /** Event handler for when the Hamburger menu item is clicked */
+  onHamburgerIconClick?: (event: React.SyntheticEvent) => void;
+}
+
+/** The common internal Add-on Beam for Bitrise made add-ons */
+const AddonBeam: React.FunctionComponent<Props> = (props: Props) => {
+  const {
+    addonIcon,
+    addonName,
+    appImage,
+    appLink,
+    appName,
+    children,
+    isBeta,
+    isHamburgerIconActive,
+    isInResponsiveView,
+    onHamburgerIconClick,
+    ...rest
+  } = props;
+
+  return (
+    <Flex
+      {...rest}
+      alignChildrenHorizontal="between"
+      alignChildrenVertical="middle"
+      className="AddonBeam"
+      container
+      direction="horizontal"
+    >
+      {isInResponsiveView && !!onHamburgerIconClick && (
+        <Flex>
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+          <Link color="neutral.100" onClick={onHamburgerIconClick}>
+            <Hamburger active={isHamburgerIconActive} />
+          </Link>
+        </Flex>
+      )}
+
+      <Flex
+        absolute={isInResponsiveView ? 'center' : undefined}
+        alignChildrenVertical="middle"
+        direction="horizontal"
+        gap="x2"
+      >
+        <Flex>
+          <Icon name={addonIcon} />
+        </Flex>
+
+        <Flex>
+          <Text size="3">
+            <Text inline weight="bold">
+              {addonName}
+            </Text>{' '}
+            by Bitrise
+          </Text>
+        </Flex>
+      </Flex>
+
+      {!isInResponsiveView && appName && (
+        <Flex absolute="center">
+          <AddonBeamLink href={appLink}>
+            <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2">
+              {appImage && (
+                <Flex>
+                  <Image borderRadius="x1" height="1.5rem" src={appImage} width="1.5rem" />
+                </Flex>
+              )}
+
+              <Flex alignChildrenVertical="middle" direction="horizontal" gap="x1">
+                <Flex>{appName}</Flex>
+                <Flex>
+                  <Icon name="OpenInBrowser" />
+                </Flex>
+              </Flex>
+            </Flex>
+          </AddonBeamLink>
+        </Flex>
+      )}
+
+      {children && !isInResponsiveView && (
+        <Flex alignChildrenVertical="middle" direction="horizontal" gap="x6">
+          {children}
+        </Flex>
+      )}
+    </Flex>
+  );
+};
+
+export default AddonBeam;

package/src/Old/AddonBeam/AddonBeamLink.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { TypeIconName } from '../Icon/tsx';
+import Flex, { Props as FlexProps } from '../Flex/Flex';
+import Icon from '../Icon/Icon';
+
+export interface Props extends FlexProps {
+  Component?: FlexProps['Component'];
+  /** Name of the icon that appears next to the text of the link. */
+  icon?: TypeIconName;
+  /** @Ignore */
+  to?: string;
+}
+
+/**
+ * Link that appears to the very right of the beam.
+ */
+const AddonBeamLink: React.FunctionComponent<Props> = (props: Props) => {
+  const { children, icon, ...rest } = props;
+
+  return (
+    <Flex {...rest} className="AddonBeam__link" direction="horizontal" gap="x1">
+      {icon && (
+        <Flex>
+          <Icon name={icon} />
+        </Flex>
+      )}
+
+      <Flex>{children}</Flex>
+    </Flex>
+  );
+};
+
+AddonBeamLink.defaultProps = {
+  Component: 'a',
+};
+
+export default AddonBeamLink;

package/src/Old/AddonFooter/AddonFooter.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import Flex, { Props as FlexProps } from '../Flex/Flex';
+import Icon from '../Icon/Icon';
+import Text from '../Text/Text';
+
+export interface Props extends FlexProps {
+  /** Name of the add-on. */
+  addonName: string;
+}
+
+/** A common Bitrise footer component */
+const AddonFooter: React.FunctionComponent<Props> = ({ addonName, ...rest }: Props) => (
+  <Flex {...rest} alignChildren="middle" direction="vertical">
+    <Icon margin="x2" name="Bitbot" size="1.5rem" />
+    <Text align="middle" letterSpacing="x5" size="1" uppercase>
+      {addonName}
+    </Text>
+    <Text align="middle" letterSpacing="x5" size="1" uppercase>
+      An Official Bitrise Add-on
+    </Text>
+  </Flex>
+);
+
+export default AddonFooter;

package/src/Old/AppLayout/AppLayout.css

@@ -0,0 +1,45 @@
+.AppLayout__header,
+.AppLayout__sidebar {
+  position: sticky;
+}
+
+.AppLayout__header {
+  top: 0;
+  z-index: var(--z-index-Header);
+}
+
+.AppLayout__sidebar {
+  top: var(--AddonBeam--height);
+  width: 18.75rem;
+  height: calc(100vh - var(--AddonBeam--height));
+  background-color: var(--color-grape--5);
+  overflow: auto;
+  z-index: var(--z-index-Sidebar);
+}
+
+.AppLayout--responsive-view {
+  &.App--sidebar-visible {
+    max-height: 100vh;
+    overflow: hidden;
+  }
+
+  & .AppLayout__sidebar {
+    display: flex;
+    width: 100%;
+    margin-left: -100%;
+
+    /**
+     * "justify-contnet: flex-end" breaks the vertical scroll
+     *
+     * https://bugs.chromium.org/p/chromium/issues/detail?id=411624
+     * https://github.com/philipwalton/flexbugs/issues/53
+     */
+    & > :first-child {
+      margin-top: auto;
+    }
+  }
+
+  &.AppLayout--sidebar-visible .AppLayout__sidebar {
+    transform: translateX(100%);
+  }
+}

package/src/Old/AppLayout/AppLayout.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import Flex, { Props as FlexProps } from '../Flex/Flex';
+import './AppLayout.css';
+
+export interface Props extends FlexProps {
+  isInResponsiveView?: boolean;
+  isSidebarVisible?: boolean;
+}
+
+const AppLayout: React.FunctionComponent<Props> = (props: Props) => {
+  const { isInResponsiveView, isSidebarVisible, ...rest } = props;
+  const classes = classnames('AppLayout', {
+    'AppLayout--responsive-view': isInResponsiveView,
+    'AppLayout--sidebar-visible': isSidebarVisible,
+  });
+
+  return <Flex {...rest} className={classes} direction="vertical" grow />;
+};
+
+export default AppLayout;