Currently, we are rendering code blocks with ```js

It looks good in the website, but in GitHub markdown it loses markup highlight.

Example: https://github.com/diegohaz/reas/blob/master/docs/state.md

A table with initialState, selectors and actions.

References:

• https://react.semantic-ui.com/elements/image
• http://jxnblk.com/rebass/components/Image

https://reactjs.org/docs/forwarding-refs.html

Hello.
I love styled components, and use mainly my components and sometimes Rebass.
I think an article or something to talk about reas in comparison with Rebass can be usefull.

Thank you for the work on reas !

Nothing fancy, just a link.

According to styled-components/styled-components#1546, .extend will probably be deprecated in the next minor and removed in the next major release of styled-components.

Currently, if we want to "fade" or apply another transitions to Hidden and derivate components, we have to do this:

const MyHidden = Hidden.extend`
  display: block !important;
  opacity: 0;
  ${props => props.visible && "opacity: 1"};
`;

We need a nicer way to do that, without having to put that !important.

We should hide menu and display a button to open it.

Status

• Move to @reakit organization.
• Change the package name to reakit.
• Add a deprecate warning on reas package.
• Launch new website.

Branch: reakit

I'm really impressed how this project, which started as something highly experimental, has evolved so much. And this is certainly due to the fact that so many people have believed on it, either collaborating directly or just testing it on their projects.

This project is one of the reasons I quit my job a few months ago. Improving it is my highest priority right now.

I'm opening this issue to tell you guys what I'm planning for Reas in the near future, to say thank you for collaborating on this project, and to invite you to participate in what's to come.

@Thomazella @Andarist @jyash97 @wordofchristian @joao-alberto @Thebigbignooby @boywithsilverwings @mgmgpyaesonewin @menor @nathanforce

ReaKit

When I first designed Reas, its only focus was composability. as was the main method responsible for ensuring high composability, and every component was built around it. So, the name of the library was an obvious combination of "React" and "as".

Let me give you a brief example of what I mean by composability. Let's create some styled components:

import { styled, Base, Button as BaseButton } from "reakit";

const Button = styled(BaseButton)`
  text-transform: uppercase;
  font-weight: 600;
`;

const ButtonRounded = styled(Button)`
  border-radius: 1.25em;
  padding: 0 1.375em;
`;

const ButtonPrimary = styled(Button)`
  background-color: #fc4577;
  border: none;
  color: white;
`;

Now, we can render each one separately:

<Button>Button</Button>

<ButtonRounded>Rounded</ButtonRounded>

<ButtonPrimary>Primary</ButtonPrimary>

Finally, we can leverage composability and combine them:

<ButtonPrimary as={ButtonRounded}>Primary + Rounded</ButtonPrimary>

As the project evolved, it became more ambitious. Not only it needed to be composable, but also accessible, and a focus on interactivity was emerging with Containers. It turned out that calling it a "Toolkit" was more appropriate.

And, as you have noticed, I like the obvious:

React + Toolkit = ReaKit

Keeping the tradition of #40, I also don't know how to pronounce it. 😆

Changing the repository name should be seamless. Commit history and everything will be kept. GitHub will automatically redirect diegohaz/reas to diegohaz/reakit and the latter to reakit/reakit.

Migrating to https://www.npmjs.com/package/reakit should be as easy as just replacing all instances of reas to reakit or creating an alias.

Thanks to @brunomacf and @marco-souza from @nosebit for the npm package name.

The new website is being built in the reakit branch and should be done by the next few weeks. Here are some screenshots of it:

The work on master will continue as normal during this time. Nothing will change.

If you like what you read and would like to follow or contribute to this future, join us on https://reakit.slack.com (message me your email address and I'll send you an invite).

Thank you, guys.

Field renders and input with id="input" which leaves two html elements with the same id on the page. The anchor chooses the first one, so it scrolls to Field.

prettier, eslint-config-prettier, eslint-plugin-prettier

I know very few about the new React Context API. But I wonder if we can make something like withStepContext, with the same interface as withStepState, but providing global state. It would be an alternative to withStepReducer (planned on #8):

import React from 'react'
import { Step, withStepState, withStepContext, withStepReducer } from 'reas'

const MySteps = ({ step }) => (
  <div>
    <Step step="foo" {...step}>Foo</Step>
    <Step step="bar" {...step}>Foo</Step>
    <Step step="baz" {...step}>Foo</Step>
  </div>
)

// today
export default withStepState(MySteps)
// or maybe
export default withStepContext(MySteps)
// or maybe
export default withStepReducer(MySteps)

UPDATE:

Since we've replaced state enhancers HOCs with render props in #47, this is the new way I'm planning to have global state:

import React from 'react'
import { Step } from 'reas'

const MySteps = () => (
  <Step.State global="foo">
    {step => (
      <div>
        <Step step="foo" {...step}>Foo</Step>
        <Step step="bar" {...step}>Foo</Step>
        <Step step="baz" {...step}>Foo</Step>
      </div>
    )}
  </Step.State>
)

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav

Similar to Block, but with display: grid.

Currently, if we pass a different pos to Tooltip or Popover, we also need to change the pos prop on the Arrow component.

<Tooltip pos="bottom">
  <Tooltip.Arrow pos="top" />
  Tooltip
</Tooltip>

That's kind of annoying. Setting pos="bottom" on Tooltip should automatically and correctly position Tooltip.Arrow.

We can't reliably set props on Arrow from Tooltip. The best option we have, I guess, is to change the styles. Something like this:

import { ifProp } from "styled-tools";
import TooltipArrow from "./TooltipArrow";

const Tooltip = styled(Base)`
  position: absolute;
  ${TooltipArrow} {
    // styles based on Tooltip pos
    ${ifProp({ pos: "bottom" }, /* apply styles for pos top */)}
  }
`;

In order to get Perpendicular styles, we should use getStyle from styled-tools:

import { ifProp, getStyle } from "styled-tools";
import TooltipArrow from "./TooltipArrow";

const Tooltip = styled(Base)`
  position: absolute;
  ${TooltipArrow} {
    ${ifProp({ pos: "bottom" }, getStyle(TooltipArrow, { pos: "top" }))};
  }
`;

I'm thinking about splitting it into lib, es and umd in the root directory.

Also, we should be able to import components and other modules this way:

import Button from "reakit/Button";
import as from "reakit/as";
// or, at least
import Button from "reakit/lib/Button";
import as from "reakit/lib/as";

Probably something using React Portals.

Currently, we have a reverse prop on Perpendicular which rotates the component by 180 degrees. We should rename that prop to angle and accept a number so it'll be consistent with the angle prop on Arrow:

https://github.com/diegohaz/reakit/blob/4523918e64ee73ab5c9b87deb08b29eddd9af95c/src/components/Arrow/Arrow.js#L39-L45

reverse is used by two other components: PopoverArrow and TooltipArrow. These are the lines that should be updated:

https://github.com/diegohaz/reakit/blob/4523918e64ee73ab5c9b87deb08b29eddd9af95c/src/components/Perpendicular/Perpendicular.js#L24-L26

https://github.com/diegohaz/reakit/blob/4523918e64ee73ab5c9b87deb08b29eddd9af95c/src/components/Perpendicular/Perpendicular.js#L54-L66

https://github.com/diegohaz/reakit/blob/4523918e64ee73ab5c9b87deb08b29eddd9af95c/src/components/Popover/PopoverArrow.js#L18-L24

https://github.com/diegohaz/reakit/blob/4523918e64ee73ab5c9b87deb08b29eddd9af95c/src/components/Tooltip/TooltipArrow.js#L17-L23

A PR is very welcome. Since it's a breaking change, the PR should be sent to the next branch.

Yeah, I created this library and gave it a name that I don't even know how to pronounce.

I tend to call it re-as, but it's very hard for me to say as without sounding like ass.

I'm creating this issue to see how people read it and finally learn how to pronounce it correctly.

References:

• http://nikgraf.github.io/belle/#/component/card?_k=zc4tyc
• http://jxnblk.com/rebass/components/Card
• https://react.semantic-ui.com/views/card
• http://www.material-ui.com/#/components/card

Following #57 and #97, I think we should rename destroy prop to unmount on Hidden.

There are other components setting destroy. A global search and replace should do the job.

I'm opening a separate issue for that because it would be a breaking change. A PR should target the next branch.

EDIT: I'm also thinking about styleProp. Maybe it should be hiddenStyle and visibleStyle with some sane shortcuts:

<Hidden
  hiddenStyle="display"
  hiddenStyle="visibility"
  hiddenStyle="opacity"
  hiddenStyle={{ width: 0 }}
  visibleStyle={{ width: "100%" }}
/>

With create-react-app, razzle etc.

http://blueprintjs.com/docs/#core/components/menu
https://material-ui.com/demos/menus/
https://react.semantic-ui.com/collections/menu
http://adrianroselli.com/2017/10/dont-use-aria-menu-roles-for-site-nav.html
https://www.smashingmagazine.com/2017/11/building-accessible-menu-systems/
https://stackoverflow.com/questions/41141247/aria-role-menuitem-for-a-or-li

<Menu>
  <Menu.Item>Item 1</Menu.Item>
  <Menu.Item>Item 2</Menu.Item>
  <Menu.Divider />
  <Menu.Item>Item 3</Menu.Item>
</Menu>

References:

• https://react.semantic-ui.com/elements/list
• http://www.material-ui.com/#/components/list

• add link to the GitHub repository (#4);
• style inline code;
• add logo.

Currently, we are not documenting prop types except those added to examples. That's because react-styleguidist, which uses react-docgen under the hood, can't identify our components due to the way we declare it.

https://react.semantic-ui.com/modules/sidebar
https://material-ui.com/demos/drawers/

<Sidebar.Container>
  {sidebar => (
    <Sidebar {...sidebar}>
      ...
    </Sidebar>
  )}
</Sidebar.Container>

withHiddenReducer, for example.

Hi @diegohaz ,

I just discover Reas an I love the concept to create component like Lego.
The goal of this it's create components with the minimun styles to add, is not it?

I was play with it and I saw the Group component with the button component.
I try the List component with group like this

  <List as={Group} vertical>
      <List.Item>Item 1</List.Item>
      <List.Item>Item 2</List.Item>
      <List.Item>Item 3</List.Item>
      <List.Item>Item 4</List.Item> 
  </List>

); 

I was thinking see the list with border like the group buttons example, but It does'nt work.

You think implemented It or maybe there a a other way to make it?

I know for the moment it's a experimentation but I find the idea really good, I hope you will push the concept far far way.

I believe you work on a new version of the site?
Don't forget add a kind of sandBox for create a community and allow them to show their experimentations / artworks

import { ThemeProvider } from "reas";

const theme = {
  Button: `
    background-color: red;
  `
}

const App = () => (
  <ThemeProvider theme={theme}>
    ...
  </ThemeProvider>
);

We're already exporting ThemeProvider from styled-components. To make that work, we need to add theme in all components. For example, in Button:

import styled from "styled-components";
import { prop } from "styled-tools";
import Base from "../Base";

const Button = styled(Base)`
  ${prop("theme.Button")}
`;

export default Button;

Instructions:

1. Fork, clone the repository in your local machine and install dependencies (yarn or npm install);
2. Run yarn docs or npm run docs and open http://localhost:6060 in your browser;
3. Duplicate any simple component inside src/components (e.g. Block) naming it Blockquote (generact can help you with that);
4. Update Blockquote.js to create the component and Blockquote.md to update docs (and to see if everything is working);
5. Update src/components/index.js to add Blockquote.js to exports.

We should use a tool to generate changelogs. It should support "beta" versions like v0.10.0.

Any help with docs would be very welcome.

And, since I'm not a native English speaker, I could have made some mistakes. If you find an error, please do submit a PR with the correction.

Thank you, guys.

Hi!

First, thanks for such a cool lib!
Unfortunately, I have got this: 'reas' does not contain an export named 'Navigation'. I am using reas NPM package (0.10.2), just checked it - it really does not have such component :(

We need a Layout component where we can define Slots where other components can be placed.

I'm thinking in something like this:

import { Layout, Block } from "reas";

const MyLayout = ({ children }) => (
  <Layout>
    <Layout.Slot as="header" name="header" />
    <Layout.Slot as="main" name="main">{children}</Layout.Slot>
    <Layout.Slot as="footer" name="footer" />
  </Layout>
);

const MyComponent = () => (
  <MyLayout>
    <Block as={Layout.Fill} slot="main">Main</Block>
    <Block as={Layout.Fill} slot="footer">Footer</Block>
    <Block as={Layout.Fill} slot="header">Header</Block>
  </MyLayout>
);

Probably, Layout.Fill should use something like React.createPortal.