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  styled-components --save

🔨 Usage

The <View> component supports all of the default CSSProperties as props. The styles transformed and handled by Styled Components.

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>);
};

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 is use tag you can use Div, Span, Form, Input, Image components if you need another tag.

Advanced Example

import { ThemeProvider, ResponsiveProvider, View, Span, Text } 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

• Save the code from Section 2 into a folder named codemod and within that, a file named to-app-studio.js.
• Use jscodeshift to run the transformation:

npx jscodeshift -t codemod/to-app-studio.ts <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, [email protected]

❤️ Sponsors and Backers

License

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