@bitrise/bitkit 9.5.2 → 9.5.3-alpha-src.1

package/site/components/Documentation/Materials/SectionTypography.tsx

@@ -1,143 +0,0 @@
-import * as React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import {
-  variables,
-  Card,
-  CardContent,
-  CardDivider,
-  Expand,
-  Flex,
-  Icon,
-  Link,
-  Text,
-  TypeTextSize,
-} from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-
-const { useState } = React;
-
-const configurations: {
-  fontSizePx: number;
-  lineHeightPx: number;
-  size: TypeTextSize;
-  uppercase?: boolean;
-}[] = [
-  {
-    fontSizePx: variables.fontSize1Px,
-    lineHeightPx: variables.lineHeight1Px,
-    size: '1',
-  },
-  {
-    fontSizePx: variables.fontSize2Px,
-    lineHeightPx: variables.lineHeight2Px,
-    size: '2',
-  },
-  {
-    fontSizePx: variables.fontSize3Px,
-    lineHeightPx: variables.lineHeight3Px,
-    size: '3',
-  },
-  {
-    fontSizePx: variables.fontSize4Px,
-    lineHeightPx: variables.lineHeight4Px,
-    size: '4',
-  },
-  {
-    fontSizePx: variables.fontSize5Px,
-    lineHeightPx: variables.lineHeight5Px,
-    size: '5',
-  },
-  {
-    fontSizePx: variables.fontSize6Px,
-    lineHeightPx: variables.lineHeight6Px,
-    size: '6',
-  },
-  {
-    fontSizePx: variables.fontSize7Px,
-    lineHeightPx: variables.lineHeight7Px,
-    size: '7',
-  },
-  {
-    fontSizePx: variables.fontSize8Px,
-    lineHeightPx: variables.lineHeight8Px,
-    size: '8',
-  },
-];
-
-const SectionTypography = () => {
-  const [expanded, setExpanded] = useState<{ [key in TypeTextSize]?: boolean }>({});
-
-  return (
-    <Flex>
-      <Text Component="h2" margin="x6" size="8" weight="bold">
-        Typography
-      </Text>
-
-      <Text Component="p">
-        You can mix and match to get any text you like, but below shows the best combinations to use from the design
-        guide. All of these examples can be achieved with the{' '}
-        <Link Component={RouterLink} color="grape-3" to="/documentation/components/text">
-          Text component
-        </Link>
-        .
-      </Text>
-
-      <CodeBlock title="Text component example">{`<Text letterSpacing="x5" size="1" uppercase weight="medium">
-  I must protest your unauthorised presence on this bridge!
-</Text>
-
-<Text size="8">
-  I must protest your unauthorised presence on this bridge!
-</Text>`}</CodeBlock>
-
-      {configurations.map((config) => (
-        <Card direction="vertical" elevation="x2" key={config.size} margin="x6" onClick={() => {}}>
-          <Link color="grape-5" onClick={() => setExpanded({ ...expanded, [config.size]: !expanded[config.size] })}>
-            <CardContent paddingHorizontal="x6" paddingVertical="x4">
-              <Flex alignChildrenVertical="middle" direction="horizontal" gap="x6">
-                <Flex grow initial="none">
-                  <Text Component="h3" margin="x1" weight="bold">
-                    Size {config.size}
-                  </Text>
-                  <Text Component="p" margin="x1" size="2">
-                    Font size: {config.fontSizePx}px{' '}
-                    <Text emphasis inline textColor="gray-5">
-                      ({config.fontSizePx / 16}rem)
-                    </Text>
-                    <br />
-                    Line height: {config.lineHeightPx}px{' '}
-                    <Text emphasis inline textColor="gray-5">
-                      ({config.lineHeightPx / 16}rem)
-                    </Text>
-                  </Text>
-                </Flex>
-
-                <Flex>
-                  <Text size={config.size} textColor="gray-3">
-                    Aa
-                  </Text>
-                </Flex>
-
-                <Flex>
-                  <Icon name={expanded[config.size] ? 'ChevronDown' : 'ChevronRight'} />
-                </Flex>
-              </Flex>
-            </CardContent>
-          </Link>
-
-          <Expand expanded={!!expanded[config.size]}>
-            <CardDivider />
-
-            <CardContent padding="x6">
-              <Text size={config.size} textColor="gray-7">
-                I must protest your unauthorised presence on this bridge!
-              </Text>
-            </CardContent>
-          </Expand>
-        </Card>
-      ))}
-    </Flex>
-  );
-};
-
-export default SectionTypography;

package/site/components/Page/Page.tsx

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { Base, BaseProps } from '@bitrise/bitkit';
-
-const Page: React.SFC<BaseProps> = (props: BaseProps) => {
-  return <Base {...props} />;
-};
-
-export default Page;

package/site/components/Page/PageTitle.tsx

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { Text, TextProps } from '@bitrise/bitkit';
-
-const PageTitle: React.SFC<TextProps> = (props: TextProps) => {
-  return <Text {...props} margin="x6" size="6" textColor="grape-5" weight="bold" />;
-};
-
-export default PageTitle;

package/site/components/PropsTable/PropsTable.tsx

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { PropDescriptor } from 'react-docgen';
-import { Table, TableProps, TableBody, Text } from '@bitrise/bitkit';
-import PropsTableRow from './PropsTableRow';
-
-interface Props extends TableProps {
-  composes?: string[];
-  displayName: string;
-  props: {
-    [key: string]: PropDescriptor;
-  };
-}
-
-const PropsTable: React.SFC<Props> = ({ composes, displayName, props = {}, ...rest }: Props) => {
-  if (Object.keys(props).length === 0) {
-    return (
-      <Text margin="x1" size="2" textColor="gray-5">
-        This component has no props to show{' '}
-        {composes && composes.length && `, however it extends ${composes.join(', ')}`}.
-      </Text>
-    );
-  }
-
-  return (
-    <Table {...rest}>
-      <TableBody>
-        {Object.entries(props).map(([propName, prop]) => (
-          <PropsTableRow {...prop} id={`${displayName}-${propName}`} key={propName} name={propName} />
-        ))}
-      </TableBody>
-    </Table>
-  );
-};
-
-export default PropsTable;

package/site/components/PropsTable/PropsTableCellUnion.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { FlowElementsType, FlowLiteralType, FlowTypeDescriptor, PropDescriptor } from 'react-docgen';
-import { Text } from '@bitrise/bitkit';
-
-interface Props extends PropDescriptor {
-  flowType: FlowElementsType;
-}
-
-const elementFormatter = (element: FlowTypeDescriptor) => {
-  switch (element.name) {
-    case 'literal':
-      return (element as FlowLiteralType).value;
-    case 'string':
-      return 'String';
-    default:
-      return element.name;
-  }
-};
-const PropsTableCellUnion: React.SFC<Props> = (props: Props) => {
-  const { flowType } = props;
-
-  if (!flowType) {
-    return null;
-  }
-
-  return <Text size="2">{flowType.elements.map(elementFormatter).join(' | ')}</Text>;
-};
-
-export default PropsTableCellUnion;

package/site/components/PropsTable/PropsTableRow.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { PropDescriptor, FlowTypeName } from 'react-docgen';
-import { Flex, TableCell, TableRow, Text } from '@bitrise/bitkit';
-import PropsTableCellUnion from './PropsTableCellUnion';
-
-interface Props extends PropDescriptor {
-  name: string;
-}
-
-const CellMap: {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key in FlowTypeName]?: React.ComponentType<any>;
-} = {
-  union: PropsTableCellUnion,
-};
-
-const PropsTableRow: React.SFC<Props> = (props: Props) => {
-  const { defaultValue, description, flowType, name, required, ...rest } = props;
-  const TypeCell = flowType && CellMap[flowType.name as FlowTypeName];
-
-  return (
-    <TableRow {...rest}>
-      <TableCell>
-        <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2">
-          <Flex>
-            <Text>{name}</Text>
-          </Flex>
-
-          {required && (
-            <Flex>
-              <Text size="1" textColor="red-3" uppercase>
-                [Required]
-              </Text>
-            </Flex>
-          )}
-        </Flex>
-
-        <Text size="2">{description}</Text>
-      </TableCell>
-
-      <TableCell>
-        {flowType && flowType.name}
-        {defaultValue && (
-          <Text breakOn="none" size="2" textColor="gray-5">
-            Default Value: {defaultValue.value}
-          </Text>
-        )}
-      </TableCell>
-
-      <TableCell>{TypeCell && <TypeCell {...props} />}</TableCell>
-    </TableRow>
-  );
-};
-
-export default PropsTableRow;

package/site/components/Root/Root.tsx

@@ -1,89 +0,0 @@
-import * as React from 'react';
-import { Link as RouterLink, Switch, Route, Redirect } from 'react-router-dom';
-import { Flex, Icon, Image, Link, Tabs, Tab, Text } from '@bitrise/bitkit';
-import Documentation from '../Documentation/Documentation';
-
-const Root = () => {
-  return (
-    <Flex direction="vertical" grow maxWidth="75rem" paddingHorizontal="x6">
-      <Flex Component="header" alignChildrenVertical="middle" direction="horizontal" gap="x6" paddingVertical="x6">
-        <Flex grow>
-          <Link Component={RouterLink} color="grape-5" to="/">
-            <Flex alignChildrenVertical="middle" direction="horizontal" gap="x2">
-              <Flex>
-                <Icon name="Bitbot" />
-              </Flex>
-
-              <Flex>
-                <Text>Bitkit</Text>
-              </Flex>
-            </Flex>
-          </Link>
-        </Flex>
-
-        <Flex>
-          <Tabs>
-            <Route path="/documentation">
-              {({ match }) => (
-                <Tab active={!!match} to="/documentation">
-                  Documentation
-                </Tab>
-              )}
-            </Route>
-          </Tabs>
-        </Flex>
-      </Flex>
-
-      <Flex direction="vertical" grow paddingVertical="x6">
-        <Switch>
-          <Route component={Documentation} path="/documentation" />
-          <Redirect to="/documentation" />
-        </Switch>
-      </Flex>
-
-      <Flex Component="footer" paddingVertical="x16">
-        <Flex alignChildren="middle" direction="vertical" margin="x4">
-          <Icon margin="x2" name="Bitbot" size="3rem" />
-
-          <Text letterSpacing="x5" size="1" uppercase>
-            Bitkit
-          </Text>
-
-          <Flex direction="horizontal" gap="x1">
-            <Flex>
-              <Text letterSpacing="x5" size="1" uppercase>
-                Built with
-              </Text>
-            </Flex>
-
-            <Flex>
-              <Icon name="Heart" size="1rem" />
-            </Flex>
-
-            <Flex>
-              <Text letterSpacing="x5" size="1" uppercase>
-                in Budapest
-              </Text>
-            </Flex>
-          </Flex>
-        </Flex>
-
-        <Flex alignChildren="middle" direction="horizontal" gap="x4" margin="x4">
-          <Flex>
-            <Link color="gray-5" href="https://github.com/bitrise-io/bitkit" target="BitkitGithub">
-              <Image src="https://img.shields.io/bitrise/32b14416be4b7b24?token=HajDQ5RghA58-GjGCjGPMA" />
-            </Link>
-          </Flex>
-
-          <Flex>
-            <Link color="gray-5" href="https://www.npmjs.com/package/@bitrise/bitkit" target="BitkitNPM">
-              <Image src="https://img.shields.io/npm/v/@bitrise/bitkit" />
-            </Link>
-          </Flex>
-        </Flex>
-      </Flex>
-    </Flex>
-  );
-};
-
-export default Root;

package/site/components/Root/index.tsx

@@ -1,4 +0,0 @@
-import { withRouter } from 'react-router-dom';
-import Root from './Root';
-
-export default withRouter(Root);

package/site/components/Sandbox/Sandbox.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { Route, Switch } from 'react-router-dom';
-import SectionAddonBeamSandbox from '../Documentation/Components/SectionAddonBeamSandbox';
-import SectionRibbonSandbox from '../Documentation/Components/SectionRibbonSandbox';
-import SectionStatusSandbox404 from '../Documentation/Components/SectionStatusSandbox404';
-import SectionStatusSandbox500 from '../Documentation/Components/SectionStatusSandbox500';
-
-const Sandbox = () => {
-  return (
-    <Switch>
-      <Route component={SectionAddonBeamSandbox} path="/sandbox/addonbeam" />
-      <Route component={SectionRibbonSandbox} path="/sandbox/ribbon" />
-      <Route component={SectionStatusSandbox404} path="/sandbox/status404" />
-      <Route component={SectionStatusSandbox500} path="/sandbox/status500" />
-    </Switch>
-  );
-};
-
-export default Sandbox;

package/site/components/Sandbox/SandboxFrame.css

@@ -1,20 +0,0 @@
-.Sandbox__iframe {
-  width: 100%;
-  border: none;
-}
-
-.Sandbox__frame-content {
-  position: relative;
-  padding-right: var(--size--x4);
-  border-left: 0.0625rem solid var(--color-gray--2);
-}
-
-.Sandbox__frame-handle {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  border-left: 0.0625rem solid var(--color-gray--2);
-  background-color: var(--color-gray--1);
-  cursor: col-resize;
-}

package/site/components/Sandbox/SandboxFrame.tsx

@@ -1,77 +0,0 @@
-import * as React from 'react';
-import { hooks, Flex, FlexProps, Icon } from '@bitrise/bitkit';
-import './SandboxFrame.css';
-
-const { useRef } = React;
-const { useEventListener } = hooks;
-
-interface Props extends FlexProps {
-  minHeight: number | string;
-  src: string;
-}
-const SandboxFrame = (props: Props) => {
-  const { src, ...rest } = props;
-  const refContainer = useRef<HTMLDivElement>();
-  const refContent = useRef<HTMLDivElement>();
-  const xStart = useRef<number>(0);
-  const refContentWidth = useRef<number>(0);
-  const isDragging = useRef<boolean>(false);
-
-  const handleMouseDown = (event: React.MouseEvent) => {
-    isDragging.current = true;
-    xStart.current = event.clientX;
-
-    if (refContainer.current) {
-      refContainer.current.style.pointerEvents = 'none';
-    }
-
-    if (refContent.current) {
-      refContentWidth.current = refContent.current.offsetWidth;
-    }
-  };
-
-  useEventListener(document, 'mouseup', () => {
-    isDragging.current = false;
-
-    if (refContainer.current) {
-      refContainer.current.style.pointerEvents = null;
-    }
-  });
-
-  useEventListener(document, 'mousemove', ({ clientX }) => {
-    if (isDragging.current && refContainer.current && refContent.current) {
-      const containerWidth = refContainer.current.clientWidth;
-      const dx = xStart.current - clientX;
-      const p = Math.max(0, Math.min(1, (refContentWidth.current / 2 - dx) / (containerWidth / 2)));
-
-      refContent.current.style.width = `${p * 100}%`;
-    }
-  });
-
-  return (
-    <Flex
-      {...rest}
-      alignChildrenHorizontal="middle"
-      backgroundColor="black"
-      className="Sandbox__frame"
-      direction="horizontal"
-      grow
-      innerRef={refContainer}
-    >
-      <Flex className="Sandbox__frame-content" direction="horizontal" elevation="x2" innerRef={refContent} width="100%">
-        <Flex Component="iframe" {...rest} className="Sandbox__iframe" grow src={src} />
-
-        <Flex
-          alignChildren="middle"
-          className="Sandbox__frame-handle"
-          direction="vertical"
-          onMouseDown={handleMouseDown}
-        >
-          <Icon name="Pause" size="1rem" />
-        </Flex>
-      </Flex>
-    </Flex>
-  );
-};
-
-export default SandboxFrame;

package/site/components/Section/Section.tsx

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { Base, BaseProps } from '@bitrise/bitkit';
-
-const Section: React.SFC<BaseProps> = (props: BaseProps) => {
-  return <Base {...props} margin="x4" />;
-};
-
-export default Section;

package/site/components/Section/SectionSubTitle.tsx

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { Text, TextProps } from '@bitrise/bitkit';
-
-const SectionSubTitle: React.SFC<TextProps> = (props: TextProps) => {
-  return <Text {...props} margin="x3" size="2" uppercase />;
-};
-
-export default SectionSubTitle;

package/site/components/Section/SectionTitle.tsx

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { Text, TextProps } from '@bitrise/bitkit';
-
-const SectionTitle: React.SFC<TextProps> = (props: TextProps) => {
-  return <Text {...props} margin="x6" size="5" textColor="grape-4" weight="bold" />;
-};
-
-export default SectionTitle;

package/site/components/SideMenu/SideMenu.css

@@ -1,39 +0,0 @@
-.SideMenu {
-  color: var(--color-gray--5);
-  transition-property: background-color;
-  transition-duration: var(--transition-duration--fast);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.SideMenu__link {
-  cursor: pointer;
-}
-
-.SideMenu__link-text {
-  padding: var(--size--x1) 0;
-  border-bottom: 0.125rem solid transparent;
-  transition-property: color;
-  transition-duration: var(--transition-duration--fast);
-  transition-timing-function: var(--transition-timing-function);
-}
-
-.SideMenu--active .SideMenu__link-text {
-  border-bottom-color: var(--color-aqua--3);
-  color: var(--color-aqua--3);
-}
-
-.SideMenu__item {
-  display: block;
-  margin-left: var(--size--x4);
-  transition-property: color;
-  transition-duration: var(--transition-duration--fast);
-  transition-timing-function: var(--transition-timing-function);
-
-  &:hover {
-    color: var(--color-aqua--3);
-  }
-}
-
-.SideMenu__item--active {
-  border-bottom: 0.125rem solid var(--color-aqua--3);
-}

package/site/components/SideMenu/SideMenu.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-import classnames from 'classnames';
-import { Base, BaseProps, Flex, Expand, Icon, Text, Visibility, VisibilityContainer } from '@bitrise/bitkit';
-import './SideMenu.css';
-
-interface Props extends BaseProps {
-  active: boolean;
-  children?: React.ReactNode;
-  name: string;
-  to?: string;
-}
-
-const SideMenu: React.SFC<Props> = (props: Props) => {
-  const { active, children, name, to, ...rest } = props;
-  const classes = classnames('SideMenu', {
-    'SideMenu--active': active,
-  });
-
-  return (
-    <Base {...rest} className={classes} margin="x1">
-      <VisibilityContainer
-        Component={to ? Link : undefined}
-        alignChildrenVertical="middle"
-        className="SideMenu__link"
-        direction="horizontal"
-        enabled={!active}
-        gap="x4"
-        to={to}
-      >
-        <Flex grow initial="none">
-          <Text className="SideMenu__link-text" inline>
-            {name}
-          </Text>
-        </Flex>
-
-        {children && (
-          <Visibility Component={Flex}>
-            <Icon name="ChevronDown" />
-          </Visibility>
-        )}
-      </VisibilityContainer>
-
-      {children && (
-        <Expand className="SideMenu__items" expanded={active} paddingVertical="x2">
-          {children}
-        </Expand>
-      )}
-    </Base>
-  );
-};
-
-export default SideMenu;

package/site/components/SideMenu/SideMenuItem.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import { Link } from 'react-router-dom';
-import { Base, BaseProps } from '@bitrise/bitkit';
-
-interface Props extends BaseProps {
-  active: boolean;
-  children: React.ReactNode;
-  onClick?: (event: React.SyntheticEvent) => void;
-  to?: string;
-}
-
-const SidebarMenuItem: React.SFC<Props> = (props: Props) => {
-  const { active, children, onClick, to, ...rest } = props;
-  const classes = classnames('SideMenu__item', {
-    'SideMenu__item--active': active,
-  });
-
-  const handleClick = (event: React.SyntheticEvent) => {
-    event.stopPropagation();
-
-    if (onClick) {
-      onClick(event);
-    }
-  };
-
-  return (
-    <Base {...rest} Component={to ? Link : undefined} className={classes} onClick={handleClick} to={to}>
-      {children}
-    </Base>
-  );
-};
-
-export default SidebarMenuItem;