shapeshifter - 🐺 Generate relational schemas, PropTypes, Flow aliases, and TypeScript interfaces from JSON or GraphQL schematic files

  •        43

Shapeshifter is a command line tool for generating ECMAScript (ES) compatible files that export PropTypes, Flow aliases, and TypeScript interfaces, as well as relation schema classes from JS, JSON or GraphQL schematic files. Schematics can represent database tables, API endpoints, data structures, resources, internal shapes, and more.

https://github.com/milesj/shapeshifter#readme
https://github.com/milesj/shapeshifter

Dependencies:

@types/graphql : ^0.13.0
@types/js-yaml : ^3.11.1
@types/webpack : ^4.1.3
@types/yargs : ^11.0.0
graphql : ^0.13.2
js-yaml : ^3.11.0
optimal : ^0.19.0
yargs : ^11.0.0

Tags
Implementation
License
Platform

   




Related Projects

prop-types - Custom React PropType validators that we use at Airbnb.

  •    Javascript

Custom React PropType validators that we use at Airbnb. Use of airbnb-js-shims or the equivalent is recommended.Since PropTypes are typically not included in production builds of React, this library’s functionality serves no useful purpose. As such, when the NODE_ENV environment variable is "production", instead of exporting the implementations of all these prop types, we export mock functions - in other words, something that ensures that no exceptions are thrown, but does no validation. When environment variables are inlined (via a browserify transform or webpack plugin), then tools like webpack or uglify are able to determine that only the mocks will be imported - and can avoid including the entire implementations in the final bundle that is sent to the browser. This allows for a much smaller ultimate file size, and faster in-browser performance, without sacrificing the benefits of PropTypes themselves.

react-values - A set of tiny React components for handling state with render props.

  •    Javascript

A set of tiny, composable React components for handling state with render props. It does this using a small render-prop-based API that exposes helpful transforms like toggle, increment, filter, etc. depending on the type of value, all based on JavaScripts native value types...

react-table - React Table - A lightweight, fast and extendable datagrid for React

  •    Javascript

Pro Tip: Using the resolveData prop - Any time the data prop value changes (using a === comparison), the table will update, but sometimes you need to materialize, alter, or shape this data before it enters the table. To do this, you can use the resolveData prop! It recieves the data prop as the only parameter and returns the resolved data. These are all of the available props (and their default values) for the main <ReactTable /> component.

react-fake-props - 🔮 Simple utility to magically generate fake props for your React tests

  •    Javascript

react-fake-props parses your Component prop types using react-docgen and generates fake props. Supports Flow and PropTypes. Works great with Jest snapshots and Enzyme.To include optional props, pass { optional: true }.

react-redux-typescript-guide - The complete guide to static typing in "React & Redux" apps using TypeScript

  •    TypeScript

You should check out Playground Project located in the /playground folder. It is a source of all the code examples found in the guide. They are all tested with the most recent version of TypeScript and 3rd party type definitions (like @types/react or @types/react-redux) to ensure the examples are up-to-date and not broken with updated definitions. Playground was created in such a way that you can simply clone the repository locally and immediately play around on your own. It will help you to learn all the examples from this guide in a real project environment without the need to create some complicated environment setup by yourself.


babel-plugin-flow-react-proptypes - A babel plugin to generate React PropTypes definitions from Flow type declarations

  •    Javascript

A babel plugin to generate React PropTypes definitions from Flow type declarations. Starting in 14.0.0, we output ES6 import/export statements by default. The deadCode option (explained below) will cause it to use common.js modules instead.

react-placeholder - A React component to easily replicate your page with nice placeholders while the content is loading

  •    TypeScript

You can pass an optional delay prop which specifies the time (in milliseconds) react-placeholder should wait before displaying the placeholder element. This is useful if you want to show a placeholder for slower connections while avoiding a brief "flash" on faster connections. Note that this delay will not affect the initial render, only subsequent "ready" state changes. Setting the firstLaunchOnly prop to true will also disable this feature.

prop-types - Runtime type checking for React props and similar objects

  •    Javascript

Runtime type checking for React props and similar objects.

apollo-tooling - :pencil2: Tooling for development and production Apollo workflows

  •    TypeScript

Apollo CLI brings together your GraphQL clients and servers with tools for validating your schema, linting your operations for compatibility with your server, and generating static types for improved client-side type safety. Generate static types for GraphQL queries. Can use the published schema in Apollo Engine or a downloaded schema.

language-babel - ES2017, flow, React JSX and GraphQL grammar and transpilation for ATOM

  •    CoffeeScript

Language grammar for all versions of JavaScript including ES2016 and ESNext, JSX syntax as used by Facebook React, Atom's etch and others, as well as optional typed JavaScript using Facebook flow. This package also supports highlighting of GraphQL language constructs when inside certain JavaScript template strings. For .graphql and .gql file support please see language-graphql . The colour of syntax is determined by the theme in use. By default the language-babel package will detect file types .js,.babel,.jsx, .es, .es6, .mjs and .flow. Use the standard ATOM interface to enable it for other file types. This provides a grammar that scopes the file in order to colour the text in a meaningful way. If other JavaScript grammars are enabled these may take precedence over language-babel. Look at the bottom right status bar indicator to determine the language grammar of a file being edited. language-babel will be shown as either Babel or Babel ES6 JavaScript. Clicking the name will allow the grammar for a file to be changed.

react-adopt - :sunglasses: Compose render props components like a pro

  •    TypeScript

React Adopt is a simple method that composes multiple render prop components, combining each prop result from your mapper.

react-router-bootstrap - Integration between React Router and React-Bootstrap

  •    Javascript

Integration between React Router v4 and React Bootstrap. Please note that by default React Router will match any location that contains path specified in to prop. To make <LinkContainer> to match the location exactly, set exact prop to true or use <IndexLinkContainer> instead.

hooks - React hooks for convenient react-navigation use

  •    TypeScript

This is the main convenience hook. It provides the regular navigation prop, as you'd get via the screen prop or by using withNavigation.

create-react-context - Polyfill for the proposed React context API

  •    Javascript

You'll need to also have react and prop-types installed. This package only "ponyfills" the React.createContext API, not other unrelated React 16+ APIs. If you are using a version of React <16, keep in mind that you can only use features available in that version.

react-splitter-layout - A simple split layout for React and modern browsers

  •    Javascript

A simple split layout for React and modern browsers. React-splitter-layout depends on React and prop-types. See package.json for more details.

babel-plugin-transform-react-remove-prop-types - Remove unnecessary React propTypes from the production build

  •    Javascript

Remove unnecessary React propTypes from the production build. Remove React propTypes from the production build, as they are only used in development. You can save bandwidth by removing them.

superstruct - A simple and composable way to validate data in Javascript.

  •    Javascript

A simple and composable way to validate data in JavaScript. Superstruct makes it easy to define interfaces and then validate JavaScript data against them. Its type annotation API was inspired by Typescript, Flow, Go, and GraphQL, giving it a familiar and easy to understand API.

react-tabs - An accessible and easy tab component for ReactJS.

  •    Javascript

An accessible and easy tab component for ReactJS.For example usages of the UMD builds have a look at the examples/umd folder. The development UMD build also needs the package prop-types being loaded besides react.

type-graphql - Create GraphQL schema and resolvers with TypeScript, using classes and decorators!

  •    TypeScript

We all know that GraphQL is so great and solves many problems that we have with REST API, like overfetching and underfetching. But developing a GraphQL API in Node.js with TypeScript is sometimes a bit of pain. Why? Let's take a look at the steps we usually have to make. The biggest problem is the redundancy in our codebase, which makes it difficult to keep things in sync. To add a new field to our entity, we have to jump through all the files - modify an entity class, the schema, as well as the interface. The same goes with inputs or arguments. It's easy to forget to update one piece or make a mistake with a single type. Also, what if we've made a typo in field name? The rename feature (F2) won't work correctly.

react-native-tableview - Native iOS UITableView for React Native with JSON support and more

  •    Objective-C

These values are provided to the tableViewStyle prop. These values are provided to the tableViewCellStyle prop.