Coder Social home page Coder Social logo

jeremyfrancis / deco-components Goto Github PK

View Code? Open in Web Editor NEW

This project forked from decosoftware/deco-components

0.0 0.0 0.0 131 KB

Registry of React Native components, compatible with Deco IDE (https://www.decosoftware.com/)

License: MIT License

JavaScript 100.00%

deco-components's Introduction

Deco Components

What are Deco Components?

Deco Components are templates and dependencies that can be downloaded and inserted into your project through the Deco IDE.

Currently, templates are snippets of JSX with associated metadata. This metadata is used to identify important properties and build up the Deco UI for quickly tweaking the component.

Metadata files should not be created manually - they are created automatically in Deco as you add properties to the property panel through โŒฅ Option + click.

Contributing Components

Want to add components to Deco?

Please submit a pull request which adds your component(s) to the package.json, following the schema described below.

For now, we'll review every component to make sure it works as expected in Deco. We plan to expand on the schema and make the "registry" more scalable moving forward :)

FAQ

What about native modules?
  • We plan to at least automatically run rnpm link after the npm install succeeds. You'll have to reload the simulator manually in order for these components to show up though (can't hot reload binaries... yet). Maybe there's more we can do here to make inserting native modules just as awesome as inserting pure-JS components.
What about components that aren't JSX / React Native?
  • We plan to support other kinds of templates and frameworks. The format and IDE are agnostic to the kind of data and dependencies, but to keep it simple, we're limiting components to React-Native-compatible JSX for now.

Component Schema

{
  // (String) Component name
  "name": "Activity Indicator IOS",

  // (String) Component publisher
  "publisher": "deco",

  // (String) Semver string of the component schema
  "schemaVersion": "0.0.1",

  // (String[]) Searchable tags
  "tags": ["core", "ui", "react-native"],

  // (String) Image to display in the insert menu
  "thumbnail": "https://placehold.it/100/100",

  // (String) A brief description
  "description": "A React Native component",

  // (Object) Metadata for the property inspector
  "inspector": {

    // (String) Automatically group properties - can be overriden individually
    "group": "ACTIVITY INDICATOR IOS"

  },

  // (Object) Where to find the component's text/metadata
  "template": {

    // (String) URL or relative path to the component's text
    "text": "https://rawgit.com/dabbott/deco-packages-test/master/core/ActivityIndicatorIOS.jsx",

    // (String) URL or relative path to the component's metadata
    "metadata": "https://rawgit.com/dabbott/deco-packages-test/master/.deco/core/ActivityIndicatorIOS.jsx.deco"
  },

  // (Object) Imports to insert at the top of the file
  "imports": {

    // (String|String[]|Object)
    // => import React from "react-native"
    "react-native": "React",

    // (String|String[]|Object)
    // => import { ActivityIndicatorIOS } from "react-native-2"
    "react-native-2": [

      // (String) Member to import
      "ActivityIndicatorIOS"

    ],

    // (String|String[]|Object)
    // => import React, * as R, { View, Text as T } from "react-native-3"
    "react-native-3": {

      // (String) Default import name
      default: 'React',

      // (Boolean) Should include *
      star: true,

      // (String) Alias for *
      alias: 'R',

      // ((String|Object)[])
      members: [

        // (String) Member to import
        'View',

        {
          // (String) Member to import
          name: 'Text',

          // (String) Alias for imported member
          alias: 'T'
        }

      ]

    }

  },

  // (Object) Dependencies to install
  "dependencies": {

    // (String) Will run `npm install react-native --save`
    "react-native": "*"

  },
}

deco-components's People

Contributors

dabbott avatar dsibiski avatar gdowens avatar

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.