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

package/site/components/Documentation/Documentation.tsx

@@ -1,302 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable global-require */
-import * as React from 'react';
-import { RouteComponentProps } from 'react-router';
-import { Redirect, Route, Switch } from 'react-router-dom';
-import { Flex, Text } from '@bitrise/bitkit';
-import Provider from '../../../src/Components/Provider/Provider';
-import documentation from '../../../documentation.json';
-import SideMenu from '../SideMenu/SideMenu';
-import SideMenuItem from '../SideMenu/SideMenuItem';
-import ComponentDocumentationPage from './ComponentDocumentationPage';
-import SectionColors from './Materials/SectionColors';
-import SectionIcons from './Materials/SectionIcons';
-import SectionTypography from './Materials/SectionTypography';
-
-const { useEffect } = React;
-
-const SectionMap = {
-  AddonBeam: {
-    Showcase: require('./Components/SectionAddonBeam').default,
-    components: [documentation.AddonBeam, documentation.AddonBeamLink],
-  },
-  AddonFooter: {
-    Showcase: require('./Components/SectionAddonFooter').default,
-    components: [documentation.AddonFooter],
-  },
-  Appear: {
-    Showcase: require('./Components/SectionAppear').default,
-    components: [documentation.Appear],
-  },
-  Avatar: {
-    Showcase: require('./Components/SectionAvatar').default,
-    components: [documentation.Avatar],
-  },
-  Badge: {
-    Showcase: require('./Components/SectionBadge').default,
-    components: [documentation.Badge],
-  },
-  Base: {
-    Showcase: require('./Components/SectionBase').default,
-    components: [documentation.Base],
-  },
-  Button: {
-    Showcase: require('./Components/SectionButtons').default,
-    components: [documentation.Button, documentation.Buttons, documentation.ColorButton],
-  },
-  Card: {
-    Showcase: require('./Components/SectionCards').default,
-    components: [documentation.Card, documentation.CardContent, documentation.CardDivider],
-  },
-  Checkbox: {
-    Showcase: require('./Components/SectionCheckbox').default,
-    components: [documentation.Checkbox],
-  },
-  DatePicker: {
-    Showcase: require('./Components/SectionDatePicker').default,
-    components: [documentation.DatePicker],
-  },
-  Divider: {
-    Showcase: require('./Components/SectionDivider').default,
-    components: [documentation.Divider],
-  },
-  Dot: {
-    Showcase: require('./Components/SectionDot').default,
-    components: [documentation.Dot],
-  },
-  Dropdown: {
-    Showcase: require('./Components/SectionDropdowns').default,
-    components: [
-      documentation.Dropdown,
-      documentation.DropdownButton,
-      documentation.DropdownMenus,
-      documentation.DropdownMenu,
-      documentation.DropdownMenuItem,
-    ],
-  },
-  Expand: {
-    Showcase: require('./Components/SectionExpand').default,
-    components: [documentation.Expand],
-  },
-  Flex: {
-    Showcase: require('./Components/SectionFlex').default,
-    components: [documentation.Flex],
-  },
-  Grid: {
-    Showcase: require('./Components/SectionGrid').default,
-    components: [documentation.Grid],
-  },
-  Hamburger: {
-    Showcase: require('./Components/SectionHamburger').default,
-    components: [documentation.Hamburger],
-  },
-  Icon: {
-    Showcase: require('./Components/SectionIcons').default,
-    components: [documentation.Icon],
-  },
-  Image: {
-    components: [documentation.Image],
-  },
-  Input: {
-    Showcase: require('./Components/SectionInputs').default,
-    components: [
-      documentation.Input,
-      documentation.InputContainer,
-      documentation.InputContent,
-      documentation.InputInlineHelp,
-      documentation.InputLabel,
-    ],
-  },
-  Link: {
-    components: [documentation.Link],
-  },
-  List: {
-    Showcase: require('./Components/SectionList').default,
-    components: [documentation.List, documentation.ListItem],
-  },
-  Logo: {
-    components: [documentation.Logo],
-  },
-  Modal: {
-    Showcase: require('./Components/SectionModals').default,
-    components: [
-      documentation.Modal,
-      documentation.ModalTitle,
-      documentation.ModalHeader,
-      documentation.ModalHeaderProgress,
-      documentation.ModalBody,
-    ],
-  },
-  Notification: {
-    Showcase: require('./Components/SectionNotification').default,
-    components: [documentation.Notification],
-  },
-  Placement: {
-    Showcase: require('./Components/SectionPlacement').default,
-    components: [
-      documentation.Placement,
-      documentation.PlacementArea,
-      documentation.PlacementArrow,
-      documentation.PlacementManager,
-      documentation.PlacementReference,
-    ],
-  },
-  Progress: {
-    Showcase: require('./Components/SectionProgress').default,
-    components: [
-      documentation.ProgressBar,
-      documentation.ProgressButton,
-      documentation.ProgressBitbot,
-      documentation.ProgressSpinner,
-      documentation.ProgressColorButton,
-    ],
-  },
-  RadioButton: {
-    Showcase: require('./Components/SectionRadioButton').default,
-    components: [documentation.RadioButton],
-  },
-  Ribbon: {
-    Showcase: require('./Components/SectionRibbon').default,
-    components: [documentation.Ribbon],
-  },
-  Sidebar: {
-    Showcase: require('./Components/SectionSidebar').default,
-    components: [
-      documentation.Sidebar,
-      documentation.SidebarMenu,
-      documentation.SidebarMenuItem,
-      documentation.SidebarSubMenu,
-      documentation.SidebarSubMenuItem,
-    ],
-  },
-  Skeleton: {
-    Showcase: require('./Components/SectionSkeleton').default,
-    components: [documentation.Skeleton, documentation.SkeletonBox],
-  },
-  Status: {
-    Showcase: require('./Components/SectionStatus').default,
-    components: [documentation.Status404, documentation.Status500],
-  },
-  Table: {
-    Showcase: require('./Components/SectionTable').default,
-    components: [
-      documentation.Table,
-      documentation.TableBody,
-      documentation.TableCell,
-      documentation.TableHeader,
-      documentation.TableHeaderCell,
-      documentation.TableHeaderRow,
-      documentation.TableRow,
-    ],
-  },
-  Tabs: {
-    Showcase: require('./Components/SectionTabs').default,
-    components: [documentation.Tab, documentation.Tabs],
-  },
-  Text: {
-    Showcase: require('./Components/SectionText').default,
-    components: [documentation.Text],
-    information: `Bitkit uses 'TT Norms' for the regular font and 'Source Code Pro'
-      for the monospace font. Both of these are not websafe fonts and are not provided
-      as part of the Bitkit.`,
-  },
-  Textarea: {
-    Showcase: require('./Components/SectionTextarea').default,
-    components: [documentation.Textarea],
-  },
-  Toggle: {
-    Showcase: require('./Components/SectionToggle').default,
-    components: [documentation.Toggle],
-  },
-  Tooltip: {
-    Showcase: require('./Components/SectionTooltips').default,
-    components: [documentation.Tooltip],
-  },
-  Visibility: {
-    components: [documentation.Visibility, documentation.VisibilityContainer],
-  },
-};
-
-const Documentation = (props: RouteComponentProps) => {
-  const { location } = props;
-
-  useEffect(() => {
-    const element = location.hash && document.querySelector(location.hash);
-
-    if (location.hash && element) {
-      element.scrollIntoView();
-    } else {
-      window.scrollTo({ top: 0 });
-    }
-  }, [location]);
-
-  return (
-    <Provider>
-      <Flex direction="horizontal" gap="x12" grow>
-        <Flex>
-          <Flex margin="x6">
-            <Text margin="x2">Materials</Text>
-
-            <Route path="/documentation/materials/colors">
-              {({ match }) => <SideMenu active={!!match} name="Colors" to="/documentation/materials/colors" />}
-            </Route>
-
-            <Route path="/documentation/materials/icons">
-              {({ match }) => <SideMenu active={!!match} name="Icons" to="/documentation/materials/icons" />}
-            </Route>
-
-            <Route path="/documentation/materials/typography">
-              {({ match }) => <SideMenu active={!!match} name="Typography" to="/documentation/materials/typography" />}
-            </Route>
-          </Flex>
-
-          <Flex margin="x6">
-            <Text margin="x2">Components</Text>
-
-            {Object.entries(SectionMap).map(([sectionName, { components }]) => (
-              <Route key={sectionName} path={`/documentation/components/${sectionName}`}>
-                {({ match }) => (
-                  <SideMenu active={!!match} name={sectionName} to={`/documentation/components/${sectionName}`}>
-                    {components.map((c) => {
-                      if (!c) {
-                        return;
-                      }
-                      const { displayName } = c;
-                      return (
-                        <Route key={displayName} path={`/documentation/components/${sectionName}#${displayName}`}>
-                          {({ match: m }) => (
-                            <SideMenuItem active={!!m} to={`/documentation/components/${sectionName}#${displayName}`}>
-                              {displayName}
-                            </SideMenuItem>
-                          )}
-                        </Route>
-                      );
-                    })}
-                  </SideMenu>
-                )}
-              </Route>
-            ))}
-          </Flex>
-        </Flex>
-
-        <Flex grow initial="none">
-          <Switch>
-            <Route path="/documentation/404" render={() => null} />
-            <Route
-              path="/documentation/components/:sectionName"
-              render={(properties) => <ComponentDocumentationPage {...properties} map={SectionMap} />}
-            />
-
-            <Route component={SectionColors} path="/documentation/materials/colors" />
-            <Route component={SectionIcons} path="/documentation/materials/icons" />
-            <Route component={SectionTypography} path="/documentation/materials/typography" />
-
-            <Redirect to="/documentation/materials/colors" />
-          </Switch>
-        </Flex>
-      </Flex>
-    </Provider>
-  );
-};
-
-export default Documentation;

package/site/components/Documentation/Materials/SectionColors.css

@@ -1,33 +0,0 @@
-.SectionColors__color {
-  transform-origin: center;
-  transition-property: border-radius, transform;
-  transition-duration: var(--transition-duration--base);
-  transition-timing-function: var(--transition-timing-function);
-
-  &:active {
-    transform: scale(0.925);
-  }
-}
-
-.SectionColors__color--active,
-.SectionColors__color--active:active {
-  transform: scale(1.25);
-  border-radius: var(--size--x1);
-  z-index: 1;
-}
-
-.SectionColors__color-row:first-child > :first-child {
-  border-top-left-radius: var(--size--x1);
-}
-
-.SectionColors__color-row:first-child > :last-child {
-  border-top-right-radius: var(--size--x1);
-}
-
-.SectionColors__color-row:last-child > :first-child {
-  border-bottom-left-radius: var(--size--x1);
-}
-
-.SectionColors__color-row:last-child > :last-child {
-  border-bottom-right-radius: var(--size--x1);
-}

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

@@ -1,197 +0,0 @@
-import * as React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import classnames from 'classnames';
-import { variables, Card, CardContent, Flex, Link, Text, TypeColors } from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-import './SectionColors.css';
-
-const { useState } = React;
-
-const colorGrid: [TypeColors, boolean][][] = [
-  [
-    ['black', true],
-    ['gray-8', true],
-    ['gray-7', true],
-    ['gray-6', true],
-    ['gray-5', false],
-    ['gray-4', false],
-    ['gray-3', false],
-    ['gray-2', false],
-    ['gray-1', false],
-    ['white', false],
-  ],
-  [
-    ['black', true],
-    ['aqua-5', true],
-    ['grape-5', true],
-    ['red-5', true],
-    ['orange-5', true],
-    ['yellow-5', true],
-    ['green-5', true],
-    ['blue-5', true],
-    ['darkblue-5', true],
-    ['violet-5', true],
-  ],
-  [
-    ['black', true],
-    ['aqua-4', true],
-    ['grape-4', true],
-    ['red-4', true],
-    ['orange-4', true],
-    ['yellow-4', true],
-    ['green-4', true],
-    ['blue-4', true],
-    ['darkblue-4', true],
-    ['violet-4', true],
-  ],
-  [
-    ['black', true],
-    ['aqua-3', false],
-    ['grape-3', true],
-    ['red-3', true],
-    ['orange-3', true],
-    ['yellow-3', true],
-    ['green-3', true],
-    ['blue-3', true],
-    ['darkblue-3', true],
-    ['violet-3', true],
-  ],
-  [
-    ['black', true],
-    ['aqua-2', false],
-    ['grape-2', false],
-    ['red-2', false],
-    ['orange-2', false],
-    ['yellow-2', false],
-    ['green-2', false],
-    ['blue-2', false],
-    ['darkblue-2', false],
-    ['violet-2', false],
-  ],
-  [
-    ['black', true],
-    ['aqua-1', false],
-    ['grape-1', false],
-    ['red-1', false],
-    ['orange-1', false],
-    ['yellow-1', false],
-    ['green-1', false],
-    ['blue-1', false],
-    ['darkblue-1', false],
-    ['violet-1', false],
-  ],
-];
-
-const SectionColors = () => {
-  const [[permActiveColor, isPermActiveColorDark], setPermActiveColor] = useState<[TypeColors, boolean]>([
-    'grape-3',
-    true,
-  ]);
-  const [[tempActiveColor, isTempActiveColorDark], setTempActiveColor] = useState<[TypeColors | null, boolean]>([
-    null,
-    true,
-  ]);
-
-  const activeColor = tempActiveColor || permActiveColor;
-  const isActiveColorDark = tempActiveColor ? isTempActiveColorDark : isPermActiveColorDark;
-
-  return (
-    <Flex>
-      <Text margin="x12" size="8" weight="bold">
-        Colors
-      </Text>
-
-      <Card elevation="x2">
-        <CardContent padding="x6">
-          <Flex direction="horizontal" gap="x6">
-            <Flex borderColor="gray-2" borderRadius="x2">
-              {colorGrid.map((colors, index) => (
-                <Flex className="SectionColors__color-row" direction="horizontal" key={index}>
-                  {colors.map(([color, isDark]) => (
-                    <Flex
-                      backgroundColor={color}
-                      className={classnames('SectionColors__color', {
-                        'SectionColors__color--active': color === permActiveColor,
-                      })}
-                      clickable
-                      container={color === permActiveColor}
-                      elevation={color === permActiveColor ? 'x1' : undefined}
-                      grow
-                      height="2rem"
-                      key={color}
-                      onClick={() => setPermActiveColor([color, isDark])}
-                      onMouseEnter={() => setTempActiveColor([color, isDark])}
-                      onMouseLeave={() => setTempActiveColor([null, isDark])}
-                      width="2rem"
-                    />
-                  ))}
-                </Flex>
-              ))}
-            </Flex>
-
-            <Flex
-              backgroundColor={activeColor}
-              borderRadius="x2"
-              direction="vertical"
-              grow
-              initial="none"
-              padding="x6"
-              textColor={isActiveColorDark ? 'gray-1' : 'grape-5'}
-            >
-              <Flex grow>
-                <Text letterSpacing="x2" size="2" uppercase>
-                  {activeColor.replace('-', ' ')}
-                </Text>
-                <Text size="2">
-                  <code>{variables.colorMap[activeColor]}</code>
-                </Text>
-                <Text size="2">
-                  <code>rgb({variables.rgbMap[activeColor].join(', ')})</code>
-                </Text>
-              </Flex>
-
-              <Flex>
-                <Text size="2">
-                  <code>var(--color-{activeColor.replace('-', '--')})</code>
-                </Text>
-                <Text size="2">
-                  <code>
-                    variables.color{activeColor.charAt(0).toUpperCase() + activeColor.slice(1).replace('-', '')}
-                  </code>
-                </Text>
-              </Flex>
-            </Flex>
-          </Flex>
-        </CardContent>
-      </Card>
-
-      <Text margin="x12">
-        Colors from the available swatch above can be used from exported javascript variables, the available CSS
-        variables (
-        <Link color="grape-3" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">
-          Custom Properties
-        </Link>
-        ) and also from the handy props provided by the{' '}
-        <Link Component={RouterLink} color="grape-3" to="/documentation/components/base">
-          Base component
-        </Link>
-        , which makes them available on all components (...there's some exceptions).
-      </Text>
-
-      <CodeBlock title="Colors from the React components">{`<Flex backgroundColor="grape-5" borderRadius="x1" padding="x2" textColor="gray-1">
-  <Icon name="Bitbot">
-</Flex>`}</CodeBlock>
-
-      <CodeBlock title="Colors from the Javascript variables">{`import { variables } from '@bitrise/bitkit';
-
-console.log(variables.colorAqua1) // ${variables.colorAqua1}`}</CodeBlock>
-
-      <CodeBlock language="css" title="Colors from the CSS variables">{`.MyComponent {
-  background-color: var(--color-grape--5);
-  color: var(--color-gray--1);
-}`}</CodeBlock>
-    </Flex>
-  );
-};
-
-export default SectionColors;

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

@@ -1,106 +0,0 @@
-import * as React from 'react';
-import { Link as RouterLink } from 'react-router-dom';
-import sample from 'lodash.sample';
-import {
-  variables,
-  Flex,
-  Grid,
-  Icon,
-  Input,
-  InputContainer,
-  InputContent,
-  InputLabel,
-  Link,
-  Text,
-  TypeIconName,
-} from '@bitrise/bitkit';
-import CodeBlock from '../../CodeBlock/CodeBlock';
-
-const { useEffect, useState } = React;
-
-const SectionIcons = () => {
-  const [iconName, setIconName] = useState<string>('');
-  const [iconRandomName, setIconRandomName] = useState<TypeIconName | null>(null);
-  const icons = variables.icons.filter((name) => !iconName || name.toLowerCase().includes(iconName.toLowerCase()));
-
-  useEffect(() => {
-    const iconRandomName = sample(variables.icons);
-
-    if (iconRandomName) {
-      setIconRandomName(iconRandomName);
-    }
-  }, [icons.length === 0]);
-
-  return (
-    <Flex>
-      <Text margin="x6" size="8" weight="bold">
-        Icons
-      </Text>
-
-      <Text>
-        All of the Icons below can be achieved with the React{' '}
-        <Link Component={RouterLink} color="grape-3" to="/documentation/components/icon">
-          Icon component
-        </Link>{' '}
-        and outputs inline SVG for super quality and easy alignment. The SVG elements uses{' '}
-        <code>fill: currentColor;</code> and so inherits the font color from it's parent.
-      </Text>
-
-      <CodeBlock title="Icon component example">{'<Icon name="Bitbot" size="2rem" textColor="grape-3" />'}</CodeBlock>
-
-      <InputLabel>Icon search</InputLabel>
-
-      <InputContainer>
-        <InputContent>
-          <Input
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setIconName(e.target.value)}
-            placeholder="Looking for something special?"
-            value={iconName}
-          />
-          <Icon name="Magnifier" />
-        </InputContent>
-      </InputContainer>
-
-      {!!icons.length && (
-        <Grid alignChildren="middle" gap="x2" margin="x8" repeatWidthMin="4rem">
-          {icons.map((name) => (
-            <Flex
-              alignChildren="middle"
-              backgroundColor="gray-1"
-              borderRadius="x1"
-              clickable
-              direction="vertical"
-              key={name}
-              padding="x2"
-              title={name}
-            >
-              <Icon name={name} />
-              <Text ellipsis margin="x1" size="1">
-                {name}
-              </Text>
-            </Flex>
-          ))}
-        </Grid>
-      )}
-
-      {!icons.length && iconRandomName && (
-        <Flex alignChildren="middle" direction="vertical" gap="x4" margin="x12">
-          <Flex backgroundColor="gray-1" borderRadius="x2" padding="x2" title={iconRandomName}>
-            <Icon name={iconRandomName} size="3rem" />
-          </Flex>
-
-          <Flex>
-            <Text align="middle" margin="x1">
-              No icons found matching "{iconName}".
-            </Text>
-            <Text align="middle" margin="x1">
-              How about this random icon called "{iconRandomName}"?
-            </Text>
-          </Flex>
-        </Flex>
-      )}
-    </Flex>
-  );
-};
-
-export default SectionIcons;