Skip to content

Delightfully simple building blocks for quick prototyping πŸš€

License

Notifications You must be signed in to change notification settings

Trampoline-CX/cubes

Repository files navigation

Cubes

Delightfully simple building blocks for quick prototyping ⚑

Build Latest NPM Version MIT License

Storybook


πŸ‘¨β€πŸ”¬ Experiment Now!

Start swiftly ⚑ using Playroom, where you can build prototypes easily and share them with the URL, without hassle or account creation.

πŸƒ Getting Started

Using expo-cli and npx, use create-cubes starter template:

npx expo init --template https://github.com/Trampoline-CX/create-cubes.git

Usage

After your project creation, there are some things worth mentioning to help you get started.

Expo

A Cubes project uses Expo (React Native), to prototype Apps on Web, Android and iOS with a unique code base. For Android and iOS, you can install the Expo App on the Play Store or App Store and then scan the barcode when starting the project with a Phone.

Start Project

Start the project using yarn start. You can also use yarn web, yarn android or yarn ios to directly start the project on the platform of your choice (make sure to connect a device first πŸ˜‰).

After being started, saving changes in your code base will update the experience directly ⚑

AppProvider

This must be the Root component (or Cube πŸ˜‰) of your App (see it in App file). By default, when creating a project, your AppProvider provides a very basic Navigation Schema (read more about Navigation here).

However, you can prototype a single screen if you want by not providing a Navigation Schema and embedding your Screen content directly in AppProvider.

const MyScreen = () => (
  <AppProvider>
    <Screen>
      <TopBar />
      <Screen.Content>
        <DisplayText>See, No Navigation!</DisplayText>
      </Screen.Content>
    </Screen>
  </AppProvider>
)

πŸ“š Documentation (Storybook)

All Cubes (components), along with their properties and usage, are documented in our Storybook. There is also extra documentation there 🀫

If you don't know Storybook, it's a cool place where you can document your components and design guidelines. Learn more on their website!

πŸ‘¨β€πŸŽ“ Examples

Here is a basic Example of an App Prototype using Cubes:

πŸ‘ Contributing

If you like Cubes but think it could benefit from some improvements, feel free to consult our contributing guide or open an issue.