Image Editor App for React

// Inside src/config.ts, you'll find the following options

// ----- GENERAL SETTINGS -----
// Switches the layout of the sidebar from left to right
const reverseLayout = false

// Sets the saved image file name
const saveImageFileName = 'image.png'

// Sets the MIME type of the saved file
const saveImageFileFormat = 'image/png'

// ----- SIDEBAR SETTINGS -----
// Change the order or remove items to disable certain menus
const options = [
    'crop',
    'filter',
    'text',
    'adjustments',
    'templates'
]

// Sidebar item translations
const optionTranslations = {
    crop: 'Crop',
    filter: 'Filter',
    text: 'Text',
    adjustments: 'Adjustments',
    templates: 'Templates'
}

// Sidebar item icons
const optionIcons = {
    crop: 'crop',
    filter: 'filter',
    text: 'text',
    adjustments: 'adjustments',
    templates: 'template'
}

// Sidebar button translations at the bottom of the sidebar
const sidebarButtonTranslations = {
    save: 'Save Image',
    uploadNew: 'Upload New',
    clearStyles: 'Clear Styles'
}

// ----- INSERT IMAGE SETTINGS -----
// Translations for the "Upload image" view
const insertImageTranslations = {
    dragAndDrop: 'Drag & drop your image here',
    uploadImage: 'Upload image',

    // Use the {0} placeholder to insert the file extension into the string
    uploadError: '{0} is an unsupported format. You can only upload images.'
}

// ----- CROP SETTINGS -----
// Translations for the "Crop" page
const cropTranslations = {
    preview: 'Preview (Crop is applied automatically)'
}

// ----- FILTER SETTINGS -----
// Available predefined filters on the "Filters" page
const filters = [
    {
        label: 'Vibrant',
        filters: {
            brightness: '110%',
            contrast: '150%',
            saturate: '120%'
        }
    },
    { ... }
]

// ----- TEXT SETTINGS -----
// Translations for the "Text" page
const textTranslations = {
    defaultTextValue: 'Edit your text',
    deleteText: 'Delete Text',
    addNewText: 'Add New Text'
}

// The default font used for texts
const defaultFont = '24px sans-serif'

// Default text color, must be a six digit hexadecimal value
const defaultColor = '#FFFFFF'

// The default position where new text nodes are inserted
const defaultPosition = {
    x: 20,
    y: 20
}

// ----- ADJUSTMENTS SETTINGS -----
// Change the order or remove items to disable sliders in the "Adjustments" page
const adjustments = [
    'brightness',
    'contrast',
    'grayscale',
    'hue',
    'invert',
    'saturate',
    'sepia'
]

// Adjustment slider translations
const adjumentsControls = {
    brightness: 'Brightness',
    contrast: 'Contrast',
    grayscale: 'Grayscale',
    hue: 'Hue',
    invert: 'Invert colors',
    saturate: 'Saturation',
    sepia: 'Sepia'
}

// ----- TEMPLATES SETTINGS -----
// Translations for the "Templates" page
const templateTranslations = {
    addNewButtonLabel: 'Add New Template',
    noStyles: 'No styles are applied to the current image. Edit the image first to save it as a new template.',
    templateAlreadyExists: 'The above styles are already added as a template.',
    save: 'Save changes',
    cancel: 'Cancel',
    deleteButton: 'Delete',
    applyStylesLabel: 'Apply styles'
}