Step 6: Guidelines

Before submitting your app, there are a few things you should know. There are two kinds of AppNest apps - deal app and public app.

Deal App

The deal app is a private app that you can only use on your SurveySparrow account even after publishing it on the developer portal but will not be available to other SurveySparrow users. That's where the public app comes in.

Public App

After publishing the app, you can request the SurveySparrow team to make the app public and after a rigorous evaluation process by the AppNest team, you will be contacted back with further updates.

Twigs Key Considerations

1. Developers mustn’t override Twigs components’ class names to add their customized CSS. They can do so via the CSS prop in any Twigs React Components.

2. Twigs offers shorthand properties where the dollar($) symbol represents a 4-point system for width and height and a 2-point system for others. Please refer to this documentation for more information.

3. Any color codes can be configured in the ThemeProvider provided by Twigs.

4. It is recommended to use Twigs icons as the icons’ design aligns with SurveySparrow’s official theme.

5. Functional components are far simpler and easier to evaluate than the Class-based components, thereby speeding up the reviewal process.

SSDK CLI Key Considerations

1. Do not tamper with SSDK CLI configuration files as it might disrupt the complete performance of the app such as index.html and manifest.json

2. It is mandatory to use SSDK CLI’s request methods to make API calls.

3. Make sure to remove unused variables as it might throw errors when running the “ssdk pack” command

4. Make sure to include all the necessary functionalities for serverless applications within the server.js file.

UI Guidelines

User Interface (UI) guidelines for AppNest serve as a framework to ensure a consistent and cohesive design, enhancing both the usability and aesthetics of the user interface.

By constructing a clear layout, typography, color schemes, navigation, and other design elements, UI guidelines enable developers to create interfaces that are intuitive, user-friendly, and aligned with the brand identity.

Consistent adherence to these guidelines helps provide a smooth app submission process in terms of User Interface.

Fonts

• Configure the fonts by adding the <link> tag for the font specifications on the index.html file, instead of adding the @import in the index.css file.

• Make sure to set the font family on the ThemeProvider in the app.js file as well

<ThemeProvider theme={{fonts:{
     body: "Poppins, sans-serif"
   }}}>
   {child}
</ThemeProvider>

Colors

• Configure the colors of your app on the ThemeProvider of Twigs

• Colors used in the app need to align with the SurveySparrow UI theme

<ThemeProvider
 theme={{
   colors: {
     primary: 'black'
   }
 }}
>
 <App>
</ThemeProvider>

Styles

• Twigs provides a CSS property on most of its components to add custom CSS.

• It is strictly restricted to not use any of Twigs Components’ class names to override the styles as the class names get changed on production.

<Button
    css={{
      backgroundColor: '$primary100'
    }}>
    Submit
</Button>

Alert Messages

1. Use Twigs built-in Toast component to display alert messages and notifications.

2. Make sure to pass customized and understandable error messages and not the actual API error messages.

3. The notifications should be short and precise and shouldn’t be confusing to the users.

function App () {
 return (
   <>
     <Toastr duration={10000} />
     <App />
   </>
 )
}

Icons

1. Twigs comes with a react icons library called twigs-react-icons which provides all the necessary icons that align with SurveySparrow’s theme.

2. These icons are pre-built and optimized, which simplifies the process of embedding an icon with easy customizations such as size.

import { AddColumnIcon } from '@sparrowengg/twigs-react-icons';
const App = () => {
 return <AddColumnIcon />;
};