App Studio

App-studio provides CSS design props for layout, spacing, sizing, shadows with the 'shadow' prop, event management through the on prop, and theming. Components include Element for fundamental design, View based on the div, Text for text styles, Form for form-related designs, and Image based on the img tag.

Supported events: hover, active, focus, and disabled.

✨ Features

• 🌈 Add styled props to your application.
• 📦 A set of Simple and powerful React components.
• 🌍 Internationalization support for dozens of languages.
• 🎨 Powerful theme customization in every detail.

📦 Install

npm install app-studio --save

🔨 Usage

The <View> component supports all of the default CSSProperties as props. The styles are transformed.

1. Add Responsive and Theme Provider to your application root:

import React from 'react';
import { ResponsiveProvider, ThemeProvider } from 'app-studio';

const Root = () => {
    return (
        <ResponsiveProvider>
            <ThemeProvider>
                <App />
            </ThemeProvider>
        </ResponsiveProvider>
    );
};

2. Use components in your application:

import React from 'react';
import { View } from 'app-studio';

function Example() {
    return (
        <View 
            backgroundColor="color.grey" 
            padding={20}
            on={{ hover: { backgroundColor: 'color.blue.100' } }}
        >
            Hello
        </View>
    );
}

You can use View for a <div> tag. You can also use Div, Span, Form, Input, and Image components if you need another tag.

Advanced Example

import { ThemeProvider, ResponsiveProvider, View, Span, Text, Button } from 'app-studio';

const theme = {
  main: { primary: '#fff7ed' },
  components: { button: { background: '#fff7ed' } }
};

const colors = {
  main: { blue: '#94a3b8' },
  palette: { blueGray: { 500: '#64748b' } }
};

function Example() {
  return (
    <ResponsiveProvider>
        <ThemeProvider theme={theme} colors={colors}>
          <Span
            backgroundColor="color.blue"
            padding={10}
            media={{
                mobile: {
                  padding: 20
                }
            }}
          >
            Base element
          </Span>
          <View 
            backgroundColor="theme.primary" 
            margin={10}
            width={200}
            on={{ hover: { backgroundColor: 'color.blueGray.500' } }}
          >
            Hover to change color
          </View>
          <Button backgroundColor="theme.button.background">Click here</Button>
          <Text color="theme.primary">Hello</Text>
        </ThemeProvider>
    </ResponsiveProvider>
  );
}

Transform JavaScript/TypeScript JSX

To transform your existing JavaScript/TypeScript JSX code to use App-Studio:

1. Install the codemod tool:

npm install -g @app-studio/codemod

2. Run the transformation:

app-studio-codemod to-app-studio <path_to_your_js_or_tsx_files> --assetsDir=src/assets --assetsUrl=/assets

Replace <path_to_your_js_or_tsx_files> with the actual path to your JavaScript/TypeScript files.

🔗 Links

• Change Log
• Versioning Release Note
• How to Apply for Being A Collaborator

🤝 Contributing

Read our contributing guide and let's build a better rize-network together.

We welcome all contributions. Please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as GitHub issues. If you'd like to improve code, check out the Development Instructions and have a good time! :)

If you are a collaborator, please follow our Pull Request principle to create a Pull Request with collaborator template.

Roadmap

• Integrate React Native

Author

SteedMonteiro, steed@rize.network

❤️ Sponsors and Backers

License

App Studio is available under the MIT license. See the LICENSE file for more info.