structure.ts

export const structure = [
  {
    type: 'section',
    name: 'Getting Started',
    children: [
      {
        type: 'page',
        name: 'What is UI Kitten?',
        children: [
          {
            type: 'block',
            block: 'markdown',
            source: 'getting-started/what-is-ui-kitten.md',
          },
        ],
        title: 'What is UI Kitten?',
        description: 'UI Kitten is a customizable React Native UI Library based on Evs Design System specifications, with 30+ UI components, 2 visual themes, and other supporting modules.',
        keywords: 'React native, React native framework, open source framework, free ui library, starter kit, ui toolkit, UI Components, free react native ui library, react native ui kit, ui kitten',
      },
      {
        type: 'page',
        name: 'Where to start?',
        children: [
          {
            type: 'block',
            block: 'markdown',
            source: 'getting-started/where-to-start.md',
          },
        ],
        title: 'Where to start?',
        description: 'UI Kitten is a framework of UI components powered by Eva Design System. Go through the tutorial and be familiar with basic React Native concepts.',
        keywords: 'React native, React native framework, open source framework, free ui library, starter kit, ui toolkit, UI Components, free react native ui library, react native ui kit, ui kitten',
      },
    ],
  },
  {
    type: 'section',
    name: 'Guides',
    children: [
      {
        type: 'page',
        name: 'Getting Started',
        children: [
          {
            type: 'block',
            block: 'markdown',
            source: 'guides/getting-started.md',
          },
        ],
        title: 'Getting Started',
        description: 'The guide which helps you to initialize the application with UI Kitten from scratch.',
        keywords: 'react native apps, ui kitten, ui kitten installation, kitten manual installation',
      },
      {
        type: 'page',
        name: 'Branding',
        children: [
          {
            type: 'block',
            block: 'markdown',
            source: 'guides/branding.md',
          },
        ],
        title: 'Branding',
        description: 'This UI Kitten guide shows how to create a custom theme, apply fonts and give an explanation on how theme variables are used within Eva.',
        keywords: 'react native apps, ui kitten, ui kitten design theme, Eva colors, ui kitten backgrounds, ui kitten borders, kitten typography, ui kitten text and icons',
      },
      {
        type: 'page',
        name: 'Icon Packages',
        children: [
          {
            type: 'block',
            block: 'markdown',
            source: 'guides/icon-packages.md',
          },
        ],
        title: 'Icon Packages',
        description: 'Eva Icons is a pack of beautifully crafted Open Source icons for common actions and items. UI Kitten has its own module to run it in React Native.',
        keywords: 'react native apps, ui kitten, ui kitten icons, icon packages for kitten, multiple icon packages, material icons, feature icons, asset icon package',
      },
      {
        type: 'page',
        name: 'Configure Navigation',
        children: [
          {
            type: 'block',
            block: 'markdown',
            source: 'guides/configure-navigation.md',
          },
        ],
        title: 'Configure Navigation',
        description: 'UI Kitten has built-in components to fit React Navigation API. This guide will help you to configure the app to navigate between screens with a simple 3 steps.',
        keywords: 'Ui kitten navigation, ui kitten navigation components, ui kitten components, react navigation, ui kitten bottom navigation, navigation API',
      },
      {
        type: 'page',
        name: 'Runtime Theming',
        children: [
          {
            type: 'block',
            block: 'markdown',
            source: 'guides/runtime-theming.md',
          },
        ],
        title: 'Runtime Theming',
        description: 'UI Kitten supports 2 built-in Eva Design System color schemes - Light and Dark. It is possible to change the theme statically and dynamically during the runtime.',
        keywords: 'ui kitten, react native apps, ui kitten runtime theming, eva design themes, react tools',
      },
      {
        type: 'page',
        name: 'Running on the Web',
        children: [
          {
            type: 'block',
            block: 'markdown',
            source: 'guides/running-on-the-web.md',
          },
        ],
        title: 'Running on the Web',
        description: 'Starting from version 4.1, UI Kitten has built-in support for web sites using React Native Web.',
        keywords: 'ui kitten, react native apps',
      },
      {
        type: 'page',
        name: 'Improving Performance',
        children: [
          {
            type: 'block',
            block: 'markdown',
            source: 'guides/improving-performance.md',
          },
        ],
        title: 'Improving Performance',
        description: 'How to get rid of performance issues in UI Kitten when using mapping customization or React Native Navigation by Wix',
        keywords: 'ui kitten, react native apps, custom mapping path, evaConfig, evaPackage',
      },
    ],
  },
  {
    type: 'section',
    name: 'Design System',
    children: [
      {
        type: 'page',
        name: 'Eva Design System Intro',
        children: [
          {
            type: 'block',
            block: 'markdown',
            source: 'design-system/intro.md',
          },
        ],
        title: 'Eva Design System Intro',
        description: 'UI Kitten now is a React Native implementation of Eva Design System. The components visual style and behavior are based on Design System rules and agreements.',
        keywords: 'ui kitten, react native apps, Eva design system, eva intro, eva themes',
      },
      {
        type: 'page',
        name: 'Design System Glossary',
        children: [
          {
            type: 'block',
            block: 'markdown',
            source: 'design-system/glossary.md',
          },
        ],
        title: 'Design System Glossary',
        description: 'This document contains a glossary used to describe a process of styling UI components in UI Kitten.',
        keywords: 'ui kitten, react native apps, ui kitten components, ui components, react native',
      },
      {
        type: 'page',
        name: 'Design System Theme',
        children: [
          {
            type: 'block',
            block: 'markdown',
            source: 'design-system/theme.md',
          },
        ],
        title: 'Design System Theme',
        description: 'In Eva Design System a theme is a set of semantic variables and connections between them, that represents the application\'s look & feel.',
        keywords: 'ui kitten, react native apps, ui kitten runtime theming, eva design themes, react tools',
      },
      {
        type: 'page',
        name: 'Use Theme Variables',
        children: [
          {
            type: 'block',
            block: 'markdown',
            source: 'design-system/use-theme-variables.md',
          },
        ],
        title: 'Use Theme Variables',
        description: 'UI Kitten allows you using the theme you have provided in the application root. This allows you to easily create themed components.',
        keywords: 'ui kitten, react native apps, ui kitten runtime theming, eva design themes, ui light theme, ui dark theme',
      },
      {
        type: 'page',
        name: 'Customize Mapping',
        children: [
          {
            type: 'block',
            block: 'markdown',
            source: 'design-system/customize-mapping.md',
          },
        ],
        title: 'Customize Component Mapping',
        description: 'This configuration file is later processed by Eva Design System Processor to provide a final style applied by a component.',
        keywords: 'ui kitten, react native apps, ui kitten semantic, semantic parameter, eva design components, ui kitten components',
      },
      {
        type: 'page',
        name: 'Custom Component Mapping',
        children: [
          {
            type: 'block',
            block: 'markdown',
            source: 'design-system/custom-mapping.md',
          },
        ],
        title: 'Create a Custom Component Mapping',
        description: 'This configuration file is later processed by Eva Design System Processor to provide a final style applied by a component.',
        keywords: 'ui kitten, react native apps, ui kitten theme, semantic parameter, component mapping, ui kitten components, custom mapping',
      },
      {
        type: 'page',
        name: 'Eva Light Theme',
        children: [
          {
            type: 'block',
            block: 'theme',
            name: 'Eva Light',
            source: 'eva light',
          },
        ],
        title: 'Eva Light Theme',
        description: 'Components for a Light Theme in Eva Design System that represent the application\'s look & feel.',
        keywords: 'ui kitten, react native apps, ui kitten theme, ui kitten components, eva light theme, eva components',
      },
      {
        type: 'page',
        name: 'Eva Dark Theme',
        children: [
          {
            type: 'block',
            block: 'theme',
            name: 'Eva Dark',
            source: 'eva dark',
          },
        ],
        title: 'Eva Dark Theme',
        description: 'Components for a Dark Theme in Eva Design System to represent the application\'s look & feel.',
        keywords: 'ui kitten, react native apps, ui kitten theme, ui kitten components, eva dark theme, eva components',
      },
      {
        type: 'page',
        name: 'Material Light Theme',
        children: [
          {
            type: 'block',
            block: 'theme',
            name: 'Material Light',
            source: 'material light',
          },
        ],
        title: 'Material Light Theme',
        description: 'Components for a Material Light Theme in Eva Design System to represent the application\'s look & feel.',
        keywords: 'ui kitten, react native apps, ui kitten theme, ui kitten components, material light theme, eva components',
      },
      {
        type: 'page',
        name: 'Material Dark Theme',
        children: [
          {
            type: 'block',
            block: 'theme',
            name: 'Material Dark',
            source: 'material dark',
          },
        ],
        title: 'Material Dark Theme',
        description: 'Components for a Material Dark Theme in Eva Design System to represent the application\'s look & feel.',
        keywords: 'ui kitten, react native apps, ui kitten theme, ui kitten components, material dark theme, eva components',
      },
    ],
  },
  {
    type: 'section',
    name: 'Migration',
    children: [
      {
        type: 'page',
        name: '4.x-5.0.0 Migration',
        children: [
          {
            type: 'block',
            block: 'markdown',
            source: 'migration/4.x-5.0.0-migration.md',
          },
        ],
        title: '4.x-5.0.0 Migration',
        description: 'Migration process and purposes to new UI Kitten 5.0.0 version.',
        keywords: 'ui kitten, react native apps, ui kitten 5.0, ui kitten version 5, ui kitten version 5 migration, ui kitten migration process',
      },
    ],
  },
  {
    type: 'section',
    name: 'Components',
    children: [
      {
        type: 'page',
        name: 'Components Overview',
        children: [
          {
            type: 'block',
            block: 'components-overview',
          },
        ],
        title: 'React Native Components',
        description: 'Styling & Theming, navigation, forms, models and layouts.',
        keywords: 'ui kitten, react native apps, ui kitten components, ui kitten styling, ui kitten forms, ui kitten models',
      },
      {
        type: 'group',
        name: 'Styling & Theming',
      },
      {
        type: 'tabs',
        name: 'Using Mapping',
        icon: 'styled.svg',
        source: [
          'styled',
        ],
        title: 'Using Mapping',
        description: 'Use this high Order Function to apply style mapping on a component.',
        keywords: 'ui kitten, react native apps, ui kitten components, ui kitten styling, ui kitten mapping, component mapping ui kitten',
      },
      {
        type: 'tabs',
        name: 'Using Theme',
        icon: 'with-styles.svg',
        source: [
          'useTheme',
          'useStyleSheet',
          'withStyles',
        ],
        title: 'Using Theme',
        description: 'High Order Function for creating styles mapped to current theme.',
        keywords: 'ui kitten, react native apps, ui kitten components, ui kitten styling, ui kitten theme',
      },
      {
        type: 'group',
        name: 'Global',
      },
      {
        type: 'tabs',
        name: 'Application Provider',
        icon: 'application-provider.svg',
        source: [
          'ApplicationProvider',
        ],
        title: 'Application Provider',
        description: 'ApplicationProvider is designed to be the root component of the application. It should be rendered once, to provide Eva styles for nested components.',
        keywords: 'ui kitten, react native apps, ui kitten provider, ui kitten app provider',
      },
      {
        type: 'tabs',
        name: 'Layout',
        icon: 'layout.svg',
        source: [
          'Layout',
        ],
        title: 'Layout',
        description: 'Layout is an overall page container, should be used as a root component of the screen.',
        keywords: 'ui kitten, react native apps, ui kitten layout, layout component',
      },
      {
        type: 'tabs',
        name: 'Text',
        icon: 'text.svg',
        source: [
          'Text',
        ],
        title: 'Text',
        description: 'Basic text writing. Text has pre-defined set of styles for headings, subtitles, paragraphs, and more.',
        keywords: 'ui kitten, react native apps, ui kitten text, text component',
      },
      {
        type: 'tabs',
        name: 'Divider',
        icon: 'icon.svg',
        source: [
          'Divider',
        ],
        title: 'Divider',
        description: 'A divider is a thin line that groups content in lists and layouts.',
        keywords: 'ui kitten, react native apps, ui kitten divider, divider component',
      },
      {
        type: 'tabs',
        name: 'Icon',
        icon: 'icon.svg',
        source: [
          'Icon',
        ],
        title: 'Icon',
        description: 'Animated Icon component. Icon component provides a simple way to render image by requesting it from an icon set',
        keywords: 'ui kitten, react native apps, ui kitten icon, icon component',
      },
      {
        type: 'tabs',
        name: 'Card',
        icon: 'card.svg',
        source: [
          'Card',
        ],
        title: 'Card',
        description: 'Cards contain content and actions about a single subject.',
        keywords: 'ui kitten, react native apps, ui kitten card, card component',
      },
      {
        type: 'tabs',
        name: 'List',
        icon: 'list.svg',
        source: [
          'List',
          'ListItem',
        ],
        title: 'List',
        description: 'Performant interface for rendering simple, flat lists.',
        keywords: 'ui kitten, react native apps, ui kitten list, list component',
      },
      {
        type: 'group',
        name: 'Navigation',
      },
      {
        type: 'tabs',
        name: 'Top Navigation',
        icon: 'top-navigation.svg',
        source: [
          'TopNavigation',
          'TopNavigationAction',
        ],
        overview: [
          {
            name: 'TopNavigation',
            images: ['top-navigation.png'],
          },
        ],
        title: 'Top Navigation',
        description: 'TopNavigation provides a heading component for the entire page. In basic example TopNavigation contains a title and actions.',
        keywords: 'ui kitten, react native apps, ui kitten navigation',
      },
      {
        type: 'tabs',
        name: 'Top Tabs',
        icon: 'tab.svg',
        source: [
          'TabBar',
          'TabView',
          'Tab',
        ],
        title: 'Top Tabs',
        description: 'A bar with tabs styled by Eva. TabBar should contain Tab components to provide a useful navigation component.',
        keywords: 'ui kitten, react native apps, ui kitten top tabs, top tab component, react native navigation',
      },
      {
        type: 'tabs',
        name: 'Bottom Tabs',
        icon: 'bottom-navigation.svg',
        source: [
          'BottomNavigation',
          'BottomNavigationTab',
        ],
        title: 'Bottom Tabs',
        description: 'A bar with tabs styled by Eva. BottomNavigation should contain BottomNavigationTab components to provide a usable navigation component.',
        keywords: 'ui kitten, react native apps, ui kitten bottom tabs, bottom tab component, react native navigation',
      },
      {
        type: 'tabs',
        name: 'Menu',
        icon: 'menu.svg',
        source: [
          'Menu',
          'MenuGroup',
          'MenuItem',
        ],
        title: 'Menu',
        description: 'A versatile menu for navigation. Menu should contain MenuItem or MenuGroup components to provide a useful component.',
        keywords: 'ui kitten, react native apps, ui kitten menu, ui kitten menu components',
      },
      {
        type: 'tabs',
        name: 'Drawer',
        icon: 'drawer.svg',
        source: [
          'Drawer',
          'DrawerGroup',
          'DrawerItem',
        ],
        title: 'Drawer',
        description: 'Navigation panel which slides from the side of the screen. Drawer should contain DrawerItem or DrawerGroup components to provide a useful component.',
        keywords: 'ui kitten, react native apps, ui kitten menu, ui kitten drawer',
      },
      {
        type: 'tabs',
        name: 'View Pager',
        icon: 'view-pager.svg',
        source: [
          'ViewPager',
        ],
        title: 'View Pager',
        description: 'A view with a set of swipeable pages.',
        keywords: 'ui kitten, react native apps, ui kitten view pager, pager component',
      },
      {
        type: 'group',
        name: 'Forms',
      },
      {
        type: 'tabs',
        name: 'Button',
        icon: 'button.svg',
        source: [
          'Button',
        ],
        title: 'Button',
        description: 'Buttons allow users to take actions, and make choices, with a single tap.',
        keywords: 'ui kitten, react native apps, ui kitten menu, ui kitten button',
      },
      {
        type: 'tabs',
        name: 'Button Group',
        icon: 'button-group.svg',
        source: [
          'ButtonGroup',
        ],
        title: 'Button Group',
        description: 'A group of buttons with additional styles provided by Eva. ButtonGroup should contain Button components to provide a usable component.',
        keywords: 'ui kitten, react native apps, ui kitten button group, button group component',
      },
      {
        type: 'tabs',
        name: 'CheckBox',
        icon: 'checkbox.svg',
        source: [
          'CheckBox',
        ],
        title: 'Checkbox',
        description: 'Checkboxes allow the user to select one or more items from a set.',
        keywords: 'ui kitten, react native apps, ui kitten menu, ui kitten button, ui kitten checkbox',
      },
      {
        type: 'tabs',
        name: 'Radio',
        icon: 'radio.svg',
        source: [
          'Radio',
          'RadioGroup',
        ],
        title: 'Radio',
        description: 'Radio buttons allow the user to select one option from a set.',
        keywords: 'ui kitten, react native apps, ui kitten menu, ui kitten buttons, ui kitten radio, ui kitten radio buttons',
      },
      {
        type: 'tabs',
        name: 'Toggle',
        icon: 'toggle.svg',
        source: [
          'Toggle',
        ],
        title: 'Toggle',
        description: 'Switches toggle the state of a single setting on or off.',
        keywords: ' ui kitten, react native apps, ui kitten toggles, toggle component',
      },
      {
        type: 'tabs',
        name: 'Input',
        icon: 'input.svg',
        source: [
          'Input',
        ],
        title: 'Input',
        description: 'Inputs let users enter and edit text.',
        keywords: 'ui kitten, react native apps, ui kitten input, input component',
      },
      {
        type: 'tabs',
        name: 'Select',
        icon: 'select.svg',
        source: [
          'Select',
          'SelectGroup',
          'SelectItem',
        ],
        title: 'Select',
        description: 'A dropdown menu for displaying selectable options. Select should contain SelectItem or SelectGroup components to provide a useful component.',
        keywords: 'ui kitten, ui kitten menu, kitten dropdown menu, ui kitten select',
      },
      {
        type: 'tabs',
        name: 'Autocomplete',
        icon: 'autocomplete.svg',
        source: [
          'Autocomplete',
        ],
        title: 'Autocomplete',
        description: 'Autocomplete is a normal text input enhanced by a panel of suggested options.',
        keywords: 'ui kitten, ui kitten menu, kitten dropdown menu, ui kitten autocomplete, autocomplete component',
      },
      {
        type: 'tabs',
        name: 'Datepicker',
        icon: 'datepicker.svg',
        source: [
          'Datepicker',
          'RangeDatepicker',
        ],
        title: 'Datepicker',
        description: 'Date picker provides a simple way to select a date within a picker displayed in modal. Both range and date pickers support all parameters as a calendar.',
        keywords: 'ui kitten, ui kitten menu, kitten dropdown menu, ui kitten date picker',
      },
      {
        type: 'group',
        name: 'Modals & Overlays',
      },
      {
        type: 'tabs',
        name: 'Modal',
        icon: 'dialog.svg',
        source: [
          'Modal',
        ],
        title: 'Modal',
        description: 'A wrapper that presents content above an enclosing view.',
        keywords: 'ui kitten, ui kitten menu, ui kitten modal, react native modal, modal component',
      },
      {
        type: 'tabs',
        name: 'Modal Service',
        icon: 'dialog-service.svg',
        source: [
          'ModalServiceType',
        ],
        title: 'Modal Service',
        description: 'Service that provides methods for all UI Kitten supported modals.',
        keywords: 'ui kitten, ui kitten menu, ui kitten modal service, modal service',
      },
      {
        type: 'tabs',
        name: 'Popover',
        icon: 'popover.svg',
        source: [
          'Popover',
        ],
        title: 'Popover',
        description: 'Displays a content positioned relative to another view. Popover accepts it\'s content as a child element and is displayed relative to the anchor view.',
        keywords: 'ui kitten, ui kitten menu, kitten modals, ui kitten popover',
      },
      {
        type: 'tabs',
        name: 'Tooltip',
        icon: 'tooltip.svg',
        source: [
          'Tooltip',
        ],
        title: 'Tooltip',
        description: 'Tooltip displays informative text when users focus on or tap an element.',
        keywords: 'ui kitten, ui kitten menu, kitten modals, ui kitten tooltip',
      },
      {
        type: 'tabs',
        name: 'Overflow Menu',
        icon: 'menu.svg',
        source: [
          'OverflowMenu',
          'MenuItem',
        ],
        title: 'Overflow Menu',
        description: 'Displays a menu relative to another view. Menu should contain MenuItem components to provide a useful component.',
        keywords: 'ui kitten, ui kitten menu, kitten modals, ui kitten overflow menu',
      },
      {
        type: 'group',
        name: 'Extra',
      },
      {
        type: 'tabs',
        name: 'Avatar',
        icon: 'avatar.svg',
        source: [
          'Avatar',
        ],
        title: 'Avatar',
        description: 'An Image with additional styles provided by Eva that can be used as an avatar.',
        keywords: 'ui kitten, ui kitten menu, ui kitten avatar, react native avatar',
      },
      {
        type: 'tabs',
        name: 'Spinner',
        icon: 'spinner.svg',
        source: [
          'Spinner',
        ],
        title: 'Spinner',
        description: 'Spinner displays a loading state of a page or a section.',
        keywords: 'ui kitten, ui kitten menu, kitten extra, ui kitten spinner ',
      },
      {
        type: 'tabs',
        name: 'ProgressBar',
        icon: 'progress-bar.svg',
        source: [
          'ProgressBar',
        ],
        title: 'ProgressBar',
        description: 'Displays the length of a process.',
        keywords: 'ui kitten, ui kitten menu, kitten extra, ui kitten progress bar ',
      },
      {
        type: 'tabs',
        name: 'CircularProgressBar',
        icon: 'circular-progress-bar.svg',
        source: [
          'CircularProgressBar',
        ],
        title: 'CircularProgressBar',
        description: 'Displays the length of a process.',
        keywords: 'ui kitten, ui kitten menu, kitten extra, ui kitten circular progress bar ',
      },
      {
        type: 'tabs',
        name: 'Calendar',
        icon: 'calendar.svg',
        source: [
          'Calendar',
          'RangeCalendar',
        ],
        title: 'Calendar',
        description: 'There is an alternative calendar component, to work with date ranges.',
        keywords: 'ui kitten, ui kitten menu, kitten extra components, ui kitten calendar',
      },
    ],
  },
];