How to use reakit - 10 common examples

export default ({ code, filename, jsx }) => {
  const copyTooltip = useTooltipState({ placement: "top-end" })
  const downloadTooltip = useTooltipState({ placement: "top-end" })
  const [copied, setCopied] = useState(false)

  const save = () => {
    dialog
      .showSaveDialog(null, {
        defaultPath: `${filename ? filename.split(".")[0] : "icon"}.${
          jsx ? "jsx" : "js"
        }`
      })
      .then(({ filePath }) => {
        if (filePath === undefined) {
          return
        }

        fs.writeFile(filePath, code, err => {
          // eslint-disable-next-line

avatar,
  isPro,
  isTeam,
  name,
  username,
  bio,
  associations,
  socialLinks,
  isEditing = false,
  canEdit = true,
  toggleEditing,
  onEdit,
  children,
}) => {
  const initialValues = { bio, socialLinks };
  const form = useFormState({
    values: initialValues,
    onValidate: validateWithYup,
    onSubmit: (values: Values) => {
      values.socialLinks = values.socialLinks.filter((link: string) => link);
      // onEdit(values)
      toggleEditing();
    },
  });

  const reset = () => {
    form.reset();
    toggleEditing();
  };

  // TODO:
  // - Need support for uploading Team Avatars

export function PlaygroundPreview({
  code,
  modules,
  update,
  componentName,
  ...htmlProps
}: PlaygroundPreviewOptions & PlaygroundPreviewHTMLProps) {
  const options = useOptions(
    "PlaygroundPreview",
    { code, modules, componentName },
    htmlProps
  );

  const ref = React.useRef(null);
  const { id: prefix } = useId({ baseId: "preview" });
  const [error, setError] = React.useState(null);

  const handleError = React.useCallback((e: Error) => {
    setError(e);
    console.error(e); // eslint-disable-line no-console
  }, []);

  const [rendered, setRendered] = React.useState(() => {
    try {
      const Example = compileComponent(
        options.code,
        options.modules,
        options.componentName
      );
      return ;
    } catch (e) {

transform: rotate(360deg);
  }
`;
export const spinnerProperties = css`
  animation: ${rotate} 0.6s infinite linear;
  border: 0.1em solid ${props => palette(props.color)(props)};
  border-radius: 100%;
  border-right-color: transparent;
  border-top-color: transparent;
  display: inline-block;
  height: 1em;
  width: 1em;
  position: relative;
`;

export default styled(Box)`
  font-size: 20px;
  ${spinnerProperties};

  & {
    ${theme('fannypack.Spinner.base')};
  }

  ${props => sizes[props.size]} /* Extend size styles */;
`;

// @flow
import styled, { css } from 'reakit/styled';
import { theme } from 'styled-tools';
import Box from 'reakit/Box';

export const Caption = styled(Box)`
  caption-side: ${props => props.position};

  & {
    ${theme('fannypack.Table.Caption.base')};
  }
`;

export const TableCell = styled(Box)`
  padding: ${theme('fannypack.Table.spacing')}rem;

  & {
    ${theme('fannypack.Table.Cell.base')};
  }
`;

export const TableFoot = styled(Box)`
  font-weight: bold;

  & {
    ${props =>
      props.hasBorder &&
      css`
        border-top: 2px solid ${theme('fannypack.Table.borderColor')};
      `};

// @flow
import styled, { css } from 'reakit/styled';
import { palette, theme } from 'styled-tools';
import { tint } from 'polished';
import Label from 'reakit/Label';

import { Box } from '../primitives';
import HiddenInput from '../_utils/HiddenInput';

export const SwitchIcon = styled(Box)`
  background-color: ${palette('whiteDarker')};
  border: 1px solid #bdbdbd;
  border-radius: 1em;
  height: 1.5em;
  position: relative;
  width: 3em;

  & {
    ${props =>
      props.state &&
      css`
        border-color: ${props => palette(`${props.state}Lighter`)};
        box-shadow: ${props => palette(`${props.state}Lighter`)} 0px 0px 0px 1px !important;
      `};
  }

({
    Icon,
    primaryActionLabel,
    onPrimaryClick,
    disablePrimary = false,
    small = false,
    block = false,
    disabled = false,
    secondary = false,
    red = false,
    danger = false,
    children,
    className,
  }) => {
    const menu = useMenuState();
    const buttonProps = { small, block, disabled, secondary, red, danger };

    return (
      
        {/*
        // @ts-ignore */}
         onPrimaryClick(e, menu)}
          className={className}
          {...buttonProps}
          disabled={disablePrimary || disabled}
        >
          {Icon && }
          {primaryActionLabel}

export const Menu: React.FC = ({
  label,
  as = MenuButton,
  disabled = false,
  onOpen = () => {},
  onClose = () => {},
  onToggle = () => {},
  children,
  ...props
}) => {
  const menu = useMenuState();
  useEffect(() => {
    if (menu.visible) {
      onOpen();
    } else {
      onClose();
    }
  }, [onOpen, onClose, menu.visible]);

  return (
    
      
        {label}
      
      
        {children && (children as React.ReactElement[]).length
          ? /* eslint-disable react/no-array-index-key */

* Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * =====
 */
import { styled } from 'reakit';

export const Row = styled.div`
    /* display: grid;
    grid-template-columns: fit-content(300px) 1fr; */

    /* // TODO: Determine a better way to handle long repoMetadata */

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    width: 100%;
    margin: 24px 0px;
    border-radius: 5px;
    box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
`;

interface ColumnProps {

export const Profile: React.FC = ({
  match: {
    params: { username },
    url,
  },
}) => {
  // Replace with API
  const [data, setData] = useState(initialState);
  const [query, setQuery] = useState(``);
  const [isEditing, setIsEditing] = useState(false);
  const tabs = useTabState({
    manual: true,
    orientation: 'vertical',
    selectedId: 'Sandboxes',
  });

  const {
    state: {
      profile: { current: user, notFound },
    },
    actions: {
      profile: { profileMounted },
    },
  } = useOvermind();

  useEffect(() => {
    profileMounted({ username });