@wayke-se/components-react 3.0.0-beta.11 → 3.0.0-beta.13

package/src/components/Sphere/wrapper.tsx

@@ -1,253 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-const compassSize = size(4);
-const controlBtnSize = size(4);
-
-export const Wrapper = styled.div`
-  width: 100%;
-  height: 0 !important;
-  padding-bottom: 66.666% !important; // 3:2
-
-  .pnlm-container {
-    background-image: none;
-    background-color: ${(props) => props.theme.color.accentDark};
-  }
-
-  // Compass
-
-  .pnlm-compass {
-    width: ${compassSize};
-    height: ${compassSize};
-    border-radius: 50%;
-    bottom: ${size(2)};
-    left: ${size(2)};
-    right: auto;
-    margin-top: 0;
-    border: 5px solid transparent;
-    border-top-color: ${(props) => props.theme.color.textLight};
-    background-color: rgba(255, 255, 255, 0.4);
-    background-image: none;
-    backdrop-filter: blur(5px);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    box-sizing: border-box;
-
-    &:hover {
-      background-color: red;
-    }
-  }
-
-  // Controls (zoom & fullscreen button)
-
-  .pnlm-grab,
-  .pnlm-grabbing {
-    .pnlm-controls-container {
-      display: block;
-    }
-  }
-
-  .pnlm-controls-container {
-    display: none;
-    top: ${size(2)};
-    left: ${size(2)};
-  }
-
-  .pnlm-controls {
-    margin-top: 0;
-
-    & + .pnlm-controls {
-      margin-top: ${size(1)};
-    }
-  }
-
-  // Fullscreen button
-
-  .pnlm-fullscreen-toggle-button {
-    display: none;
-    position: relative;
-    width: ${controlBtnSize};
-    height: ${controlBtnSize};
-    background-image: none;
-    background-color: rgba(255, 255, 255, 0.4);
-    backdrop-filter: blur(5px);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    color: ${(props) => props.theme.color.textDark};
-    border: 0;
-    border-radius: 50%;
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.6);
-    }
-
-    &:before {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 0.875rem;
-    }
-  }
-
-  .pnlm-fullscreen-toggle-button-inactive {
-    &:before {
-      content: '⤢';
-    }
-
-    &.pnlm-fullscreen-toggle-button-active {
-      &:before {
-        content: '⤢';
-      }
-    }
-  }
-
-  // Gyroscope (Orientation)
-
-  .pnlm-orientation-button {
-    background-image: none;
-    width: ${controlBtnSize};
-    height: ${controlBtnSize};
-    background-color: ${(props) => props.theme.color.accentDark};
-    color: ${(props) => props.theme.color.textDark};
-    border: 0;
-    border-radius: 999px;
-
-    &:hover {
-      background-color: red;
-    }
-
-    &:before {
-      content: 'A';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 0.875rem;
-    }
-
-    &.pnlm-orientation-button-active {
-      background-color: green;
-
-      &:hover {
-        background-color: pink;
-      }
-    }
-  }
-
-  // Zoom controls
-
-  .pnlm-zoom-controls {
-    display: none;
-    height: auto;
-    width: auto;
-    background-color: transparent;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    border: 0;
-    border-radius: 999px;
-
-    > * {
-      &:first-child {
-        border-top-left-radius: 999px;
-        border-top-right-radius: 999px;
-      }
-
-      &:last-child {
-        border-bottom-left-radius: 999px;
-        border-bottom-right-radius: 999px;
-      }
-    }
-  }
-
-  .pnlm-zoom-in,
-  .pnlm-zoom-out {
-    position: relative;
-    display: block;
-    width: ${controlBtnSize};
-    height: ${controlBtnSize};
-    background-image: none;
-    background-color: rgba(255, 255, 255, 0.4);
-    backdrop-filter: blur(5px);
-    color: ${(props) => props.theme.color.textDark};
-    border-radius: 0;
-
-    &:before {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.6);
-    }
-  }
-
-  .pnlm-zoom-in {
-    top: auto;
-
-    &:before {
-      content: '+';
-    }
-  }
-
-  .pnlm-zoom-out {
-    bottom: auto;
-    border-top: 1px solid ${(props) => props.theme.color.textDark};
-
-    &:before {
-      content: '-';
-    }
-  }
-
-  // Load Button
-
-  .pnlm-load-button {
-    top: auto;
-    bottom: ${size(2)};
-    transform: translateX(-50%);
-    width: auto;
-    height: auto;
-    padding: ${size(1.75)} ${size(2)};
-    border-radius: 3px;
-    margin: 0;
-    background-color: ${(props) => props.theme.color.accentDark};
-    color: ${(props) => props.theme.color.textDark};
-    line-height: 1.1;
-    user-select: none;
-
-    &:hover {
-      background-color: ${(props) => props.theme.color.accentDark};
-    }
-
-    p {
-      margin: 0;
-      font-size: 0.875rem;
-    }
-  }
-
-  // Load box
-
-  .pnlm-load-box {
-    background-color: transparent;
-    height: auto;
-    margin: 0;
-    width: 150px;
-    transform: translate(-50%, -50%);
-
-    > p {
-      display: none;
-    }
-  }
-
-  // Load bar
-
-  .pnlm-lbar {
-    width: 100%;
-    background-color: rgba(255, 255, 255, 0.4);
-    border: 0;
-  }
-
-  .pnlm-lbar-fill {
-    background-color: ${(props) => props.theme.color.textLight};
-  }
-`;

package/src/components/SrOnly/index.tsx

@@ -1,14 +0,0 @@
-import styled from 'styled-components';
-
-// Adds element only visible to screen readers
-export const SrOnly = styled.div`
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-`;

package/src/components/SwitchBar/index.tsx

@@ -1,55 +0,0 @@
-import React, { useState, useCallback } from 'react';
-
-import { Wrapper, Header, Body, Info, Action, InfoContent, InfoBtn, Title } from './wrapper';
-import Modal from '../Modal/index';
-import { ButtonInline } from '../Button/index';
-import { IconInfo } from '../Icon/index';
-
-interface Props {
-  title: string;
-  body?: string;
-  actionTitle?: string;
-  children: React.ReactNode;
-  onClick?: () => void;
-}
-
-const SwitchBar = ({ title, body, actionTitle, children, onClick }: Props) => {
-  const [info, setInfo] = useState(false);
-  const onToggleInfo = useCallback(() => setInfo(!info), [info]);
-
-  return (
-    <>
-      <Wrapper>
-        <Header>
-          <Info>
-            <InfoContent>
-              <Title>{title}</Title>
-            </InfoContent>
-            {children && (
-              <InfoContent>
-                <InfoBtn onClick={onToggleInfo} title="Mer information">
-                  <IconInfo block />
-                </InfoBtn>
-              </InfoContent>
-            )}
-          </Info>
-          {actionTitle && (
-            <Action>
-              <ButtonInline onClick={onClick} title={actionTitle}>
-                {actionTitle}
-              </ButtonInline>
-            </Action>
-          )}
-        </Header>
-        {body && <Body>{body}</Body>}
-      </Wrapper>
-      {info && (
-        <Modal title={title} onClose={onToggleInfo}>
-          {children}
-        </Modal>
-      )}
-    </>
-  );
-};
-
-export default SwitchBar;

package/src/components/SwitchBar/wrapper.tsx

@@ -1,80 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-import { ButtonReset } from '../Button/index';
-
-export const Wrapper = styled.div`
-  padding: ${size(1.5)} ${size(2)};
-  background-color: ${(props) => props.theme.color.accentDark};
-  border-radius: 3px;
-  font-size: 0.875rem;
-`;
-
-export const Header = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-export const Body = styled.div`
-  font-size: 0.875rem;
-  margin-top: ${size(1)};
-`;
-
-export const Info = styled.div`
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-`;
-
-export const Action = styled.div`
-  flex-shrink: 0;
-  padding-left: ${size(1.5)};
-  font-size: 0.875rem;
-`;
-
-export const InfoContent = styled.div`
-  & + & {
-    margin-left: ${size(0.75)};
-  }
-`;
-
-export const InfoBtn = styled(ButtonReset).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text',
-}))`
-  position: relative;
-  display: block;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: ${size(-0.5)};
-    bottom: ${size(-0.5)};
-    left: ${size(-0.5)};
-    right: ${size(-0.5)};
-    background-color: ${(props) => props.theme.color.accentDark};
-    border-radius: 50%;
-    opacity: 0;
-    transition: opacity 200ms ease;
-  }
-
-  > * {
-    position: relative;
-    z-index: 1;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.95);
-  }
-`;
-
-export const Title = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__font--bold',
-}))`
-  font-size: 1rem;
-`;

package/src/components/TableColumn/index.tsx

@@ -1,18 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-export const TableColumn = styled.div`
-  line-height: 1.2;
-`;
-
-export const TableColumnRow = styled.div`
-  display: flex;
-  align-items: flex-start;
-  margin: ${size(-1)};
-`;
-
-export const TableColumnCell = styled.div`
-  flex: 1 0 50%;
-  padding: ${size(1)};
-`;

package/src/components/TableList/index.tsx

@@ -1,39 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-export const TableList = styled.ul`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  border-top: 1px solid ${(props) => props.theme.color.border};
-  border-bottom: 1px solid ${(props) => props.theme.color.border};
-  font-size: 0.875rem;
-`;
-
-export const TableListItem = styled.li`
-  display: flex;
-  align-items: center;
-  padding: ${size(1)} 0;
-
-  & + & {
-    border-top: 1px solid ${(props) => props.theme.color.border};
-  }
-`;
-
-export const TableListKey = styled.div`
-  flex: 1 1 auto;
-`;
-
-export const TableListValue = styled.div`
-  flex-shrink: 0;
-  padding-left: ${size(1)};
-`;
-
-export const TableListBooleanPos = styled.div`
-  color: ${(props) => props.theme.color.ui.positive};
-`;
-
-export const TableListBooleanNeg = styled.div`
-  color: ${(props) => props.theme.color.ui.negative};
-`;

package/src/components/Tabs/index.tsx

@@ -1,34 +0,0 @@
-import * as React from 'react';
-
-import { Action, Item, List, Wrapper } from './wrapper';
-
-export interface ITabItem {
-  name: string;
-  displayName: string;
-}
-
-export interface ITabInterface<T> {
-  tabs: ITabItem[];
-  active: string;
-  onClick?: (name: T) => void;
-}
-
-const Tabs = <T extends {}>({ tabs, active, onClick }: ITabInterface<T>) => (
-  <Wrapper>
-    <List>
-      {tabs.map((tab) => (
-        <Item key={tab.name}>
-          <Action
-            title={tab.displayName}
-            onClick={onClick ? () => onClick(tab.name as unknown as T) : undefined}
-            active={tab.name === active ? 'true' : undefined}
-          >
-            {tab.displayName}
-          </Action>
-        </Item>
-      ))}
-    </List>
-  </Wrapper>
-);
-
-export default Tabs;

package/src/components/Tabs/wrapper.tsx

@@ -1,82 +0,0 @@
-import * as React from 'react';
-import styled, { css } from 'styled-components';
-
-import { ButtonReset } from '../Button/index';
-import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.div`
-  overflow: hidden;
-  margin-top: ${size(-1)};
-  margin-left: ${size(-1)};
-  margin-right: ${size(-1)};
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    margin-left: ${size(-2)};
-    margin-right: ${size(-2)};
-  }
-`;
-
-export const List = styled.ul`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  white-space: nowrap;
-  font-size: 0;
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    padding-left: ${size(1)};
-    padding-right: ${size(1)};
-  }
-`;
-
-export const Item = styled.li`
-  display: inline-block;
-  vertical-align: bottom;
-  font-size: 1rem;
-`;
-
-type ActionProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
-> & {
-  active?: boolean | string;
-};
-
-export const Action = styled(ButtonReset).attrs(() => ({
-  role: 'tab',
-  className: 'wayke__theme wayke__font--bold',
-}))<ActionProps>`
-  position: relative;
-  display: block;
-  padding: ${size(1)};
-  color: ${(props) => props.theme.color.textDarkLighten};
-
-  :hover {
-    color: ${(props) => props.theme.color.textDark};
-  }
-
-  :after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: ${size(1)};
-    right: ${size(1)};
-    height: 2px;
-    background-color: ${(props) => props.theme.color.textDark};
-    transform: scaleY(0);
-    transition: transform 200ms ease;
-    z-index: 1;
-  }
-
-  ${(props) =>
-    props.active &&
-    css`
-      color: ${(props) => props.theme.color.textDark};
-
-      :after {
-        transform: scaleY(1);
-      }
-    `}
-`;

package/src/components/ThreeSixty/Rotation.tsx

@@ -1,136 +0,0 @@
-import React, { useState, useEffect, useRef, cloneElement, Children } from 'react';
-
-const calculateCurrentFrame = (startFrame: number, delta: number, length: number): number => {
-  const frame = (startFrame + delta) % length;
-  if (frame < 0) {
-    return frame + length;
-  }
-
-  return frame;
-};
-
-type PropsType = {
-  children: React.ReactNode;
-};
-
-type RotationEvent = any;
-
-const Rotation = ({ children }: PropsType) => {
-  const startFrame = useRef(0);
-  const pointerPosition = useRef<number>();
-  const max = useRef(0);
-
-  const [state, setState] = useState({
-    current: 0,
-    outsideMouseMove: false,
-  });
-
-  useEffect(() => {
-    document.addEventListener('mouseup', touchEnd);
-
-    return () => {
-      window.document.removeEventListener('mouseup', touchEnd);
-      window.document.body.removeEventListener('mousemove', mouseMove);
-      window.document.body.removeEventListener('mouseup', mouseUp);
-    };
-  }, []);
-
-  const touchMove = (event: RotationEvent) => {
-    const notTouched = typeof pointerPosition.current !== 'number';
-    event.preventDefault();
-    if (notTouched) {
-      return;
-    }
-
-    const childCount = Children.count(children);
-
-    const { offsetWidth } = event.currentTarget;
-    const pointer = calculatePointerPosition(event);
-    const max = offsetWidth;
-    const offset = pointer - (pointerPosition.current || 0);
-    const delta = Math.floor((offset / max) * childCount);
-    setCurrentFrame(calculateCurrentFrame(startFrame.current, delta, childCount));
-  };
-
-  const mouseMove = (event: RotationEvent) => {
-    const notTouched = typeof pointerPosition.current !== 'number';
-    event.preventDefault();
-    if (notTouched || !state.outsideMouseMove) return;
-
-    const childCount = Children.count(children);
-
-    const pointer = calculatePointerPosition(event);
-    const offset = pointer - (pointerPosition.current || 0);
-    const delta = Math.floor((offset / max.current) * childCount);
-    setCurrentFrame(calculateCurrentFrame(startFrame.current, delta, childCount));
-  };
-
-  const mouseUp = () => {
-    window.document.body.removeEventListener('mousemove', mouseMove);
-    window.document.body.removeEventListener('mouseup', mouseUp);
-
-    pointerPosition.current = undefined;
-    startFrame.current = 0;
-  };
-
-  const touchStart = (event: RotationEvent) => {
-    event.preventDefault();
-    pointerPosition.current = calculatePointerPosition(event);
-    startFrame.current = state.current;
-
-    const { offsetWidth } = event.currentTarget;
-    max.current = offsetWidth;
-
-    window.document.body.addEventListener('mousemove', mouseMove);
-    window.document.body.addEventListener('mouseup', mouseUp);
-  };
-
-  const touchEnd = (event: RotationEvent) => {
-    event.preventDefault();
-    pointerPosition.current = undefined;
-    startFrame.current = 0;
-  };
-
-  const onMouseEnter = () => {
-    if (state.outsideMouseMove) setState({ ...state, outsideMouseMove: false });
-  };
-
-  const onMouseLeave = () => {
-    if (!state.outsideMouseMove) setState({ ...state, outsideMouseMove: true });
-  };
-
-  const setCurrentFrame = (current: number) => {
-    if (current !== state.current) {
-      setState({ ...state, current });
-    }
-  };
-
-  const calculatePointerPosition = (event: RotationEvent): number => {
-    const { clientX } = event.type.indexOf('touch') === 0 ? event.changedTouches[0] : event;
-    const { offsetLeft } = event.currentTarget;
-    return clientX - offsetLeft;
-  };
-
-  return (
-    <div
-      onTouchStart={touchStart}
-      onTouchMove={touchMove}
-      onTouchEnd={touchEnd}
-      onMouseDown={touchStart}
-      onMouseMove={touchMove}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-    >
-      {Children.map(children, (child, i) =>
-        cloneElement(child as React.ReactElement, {
-          style: {
-            width: '100%',
-            display: state.current === i ? 'block' : 'none',
-          },
-        })
-      )}
-    </div>
-  );
-};
-
-export default Rotation;