/margin_padding

Primary LanguageTypeScript

Draftbit Coding Challenge: Prism

The goal of this coding challenge is two part:

  • Demonstrate your skillset and how you think about solving problems
  • Get a glimpse at the types of problems we're solving at Draftbit

The Challenge

You'll be recreating Draftbit's Prism component for setting margin & padding. The way this works is when you select a component from the Layer Tree, we fetch all the possible props and render them inside the Properties Panel.

This is just one section of the properties panel. Other sections include Flex, Size, Background colors, etc.

Prism Component

The prism component lives in a pane called "Margins & Padding". This pane is collapsible.

There are 3 high-level states you need to account for:

  • default: there is no previous value, the input is pristine.
  • changed: a value has been changed from the default value. There is a yellow line shown.
  • focused: the input is focused and has a value. Values should include a number and a metric, ie: 100%, 20pt, etc.

Hints

  • There's a stubbed out PropertiesPanel Rescript component that we import in App.tsx but don't be afraid to write this in plain Javascript. We're ok with that!
  • Some folks can do this in just a few hours, but take as much time as you need.
  • Ask as many questions as you need to be successful.
  • We're more concerned about the functionality than the appearance: getting it working > getting it pixel perfect.
  • Show your work. Just like in school, "why" you did something is more valuable than the final answer!

Project Setup

We've created the base environment for you. It includes Rescript by default, but you're more than welcome to write plain JavaScript. Pick the experience you're most comfortable with (just know you'll end up learning Reason one way or another here =P).

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn re:start

Starts the Rescript compiler in watch mode.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn re:build

Build your Rescript files. You must do this before running yarn build.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

Learn More