Code Monkey home page Code Monkey logo

Comments (4)

javivelasco avatar javivelasco commented on May 27, 2024

Hi @episode17 !

I'm still working on this. This repository is just an example to test if this approach of writing components makes sense, it's flexible, etc. Until now, I've found this fucking awesome!! As you can check here it even works to create components for React Native. The calendar animations are built with React Motion and every component is really extensible.

Still it's an early stage and I'm changing a lot of stuff as I experiment with React Native, complex components, event adapters, and stuff like that. That's the reason why this repository has a fixed package version of react-toolbox-core with a 0.0.0-alpha.hashed version. I plan to finish a stable approach by the end of this week sending a PR to react toolbox with a full restructure in a monorepo with multiple packages. React Toolbox will be a material design implementation of React Toolbox Core using Styled Components but it will be extensible to any other look and feel/implementation.

I will try to push a react-toolbox-airbnb native DatePicker similar to the one they have in their app. I'm very close to it. Of course I will publish an article developing the idea. Some answers to your questions:

  • I think you can't skip too much boilerplate. You have to provide styled components and declaration is pretty straightforward with styled components. Sometimes you might need to do more work for example with animations but I think it's good enough.
  • A problem is how components are wired between each other. It's not discoverable so the solution is to have an exhaustive documentation for every "Node Component", how is it connected, rendered, etc. You can't assert everything is passed fine either, sometimes you might want to skip a component so you must pass a dummy () => null.
  • The real theming ie changing primary colors and stuff like that should be delegated to the implementation so if you use styled components you can use ThemeProvider. This implementation should be 100% agnostic from the styles platform.

One thing is sure: this is very very close to the final strategy! Feedback welcome.

from react-toolbox-airbnb.

episode17 avatar episode17 commented on May 27, 2024

Thanks for your response! I'm a bit late sorry.

This is good stuff. I'm still in the process of implementing this across our whole project.

It makes it so core components become very barebone which is nice, but also puts a lot of responsibility on the theme implementer side. If I have a bunch of core components that expect a Button of some sorts, nothing stops a theme from passing a different one to each factory. It's more flexible than usual, but demands greater discipline I feel.

Still find the solution very clever, let's see how it goes :)

** Forgot to mention that 3rd point is the first thing I thought about when I saw this and it's very easy to implement with styled-components, which makes this method super compelling. Not sure how to name these 2 levels of "theming" though.

from react-toolbox-airbnb.

javivelasco avatar javivelasco commented on May 27, 2024

That sounds very good and it's on the right direction indeed! I'm sorry it's taking this long, I'm currently searching for an apartment in BCN and it's a nightmare. I hope to get back to work soon.

from react-toolbox-airbnb.

olegstepura avatar olegstepura commented on May 27, 2024

@episode17 so it seems like you should have tested the method deeply till now.

What can you tell about performance?
Are the components so responsive as they are in the dev branch of react-toolbox (or at http://react-toolbox.com/#/components which uses 1.x version of react-toolbox I believe)?

from react-toolbox-airbnb.

Related Issues (2)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.