Giter Site home page Giter Site logo

library-to-build-forms's Introduction

library-to-build-forms

Major tech used

  • React
  • Storybook link
  • MaterialUI
  • FormatJS

Structure of the project

NOTE

The project builts from only src/lib and for this reason ignore the src/App.js and src/index.js as those files there are not even called by the library. You may see this clear checking the package.json.

  • The project is a collection of libraries under the src/lib.
  • Every folder is like a separate library and it's entry point is like src/lib/<LIB_NAME>/<LIB_NAME.jsx>.
  • FormatJS is added as <IntlProvider messages={enMessages} defaultLocale="en" locale="en"> under every src/lib/<LIB_NAME>/<LIB_NAME.jsx>.
  • Under src/stories we have the StoryBook stories to test and develop the components. Not familiar with the tool check the link link

Simple instructions

NOTE

To make the run without complex languages building, languages are already built in src/compiled-lang the only transaltion avaliable for real is for Italian in src/compiled-lang/it.json the other are just compiled from English bu not translated yet.

  1. yarn
  2. yarn run storybook

NOTE

The project doesn't start with yarn start above instruction are the way!

Known Issues

The form builder and previwer:

  • There is no way right now to interact with the form pages in case an external App wants to route to a page number or interact with one of the pages

FormatJS:

  • FormatJS was implemnted as minimum working implemntation but that not optimal
  • FormatJS is not fully implemnted as at this time there are issues on passing dynamically the messages (E.G. the project should support more localse and change the messages based on it like now we have EN as default but if I change to IT I shuld see the messages in Italian)
  • FormatJS implemnted on StoryBook stories in that way I can pass a different locale and see the text in that locale, so I can test StoryBook stories with the required locale aside from the default EN
  • FormatJS messages are not fully extracted/compiled the reasons can be a bad FormatJS configuration or the wrongly usage of useIntl or FormattedMessage

To do

  • Improve the builder and previwer to expose pages of the form to external to allow interaction or routing to specific page number
  • Use transifex as translate vendor for Formatjs and apply the CLI #builtin-formatters
  • Find a way to implement the workflow of FormatJS as distribute-libraries
  • FormatJS implemnted on StoryBook stories to test it with different locale
  • Language and locale support aside the default locale EN

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.