import React from 'react'
import {ApplyTheme} from '@instructure/ui-themeable'
import '@instructure/canvas-high-contrast-theme'
import '@instructure/canvas-theme'

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}

export const globalTypes = {
  canvasTheme: {
    name: 'Canvas Theme',
    description: 'Default or High Contrast',
    defaultValue: 'canvas',
    toolbar: {
      icon: 'user',
      items: ['canvas', 'canvas-high-contrast']
    }
  }
}

const canvasThemeProvider = (Story, context) => {
  const canvasTheme = context.globals.canvasTheme
  return (
    <ApplyTheme theme={ApplyTheme.generateTheme(canvasTheme)}>
      <Story {...context}/>
    </ApplyTheme>
  )
}

export const decorators = [canvasThemeProvider]

import React from 'react'
import {ApplyTheme} from '@instructure/ui-themeable'
import {ApplyTextDirection} from '@instructure/ui-i18n'
import '@instructure/canvas-high-contrast-theme'
import '@instructure/canvas-theme'

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}

export const globalTypes = {
  canvasTheme: {
    name: 'Canvas Theme',
    description: 'Default or High Contrast',
    defaultValue: 'canvas',
    toolbar: {
      icon: 'user',
      items: ['canvas', 'canvas-high-contrast']
    }
  },
  bidirectional: {
    name: 'Bidirectional',
    description: 'Left-to-right or Right-to-left',
    defaultValue: 'ltr',
    toolbar: {
      icon: 'transfer',
      items: ['ltr', 'rtl']
    }
  }
}

const canvasThemeProvider = (Story, context) => {
  const canvasTheme = context.globals.canvasTheme
  return (
    <ApplyTheme theme={ApplyTheme.generateTheme(canvasTheme)}>
      <Story {...context}/>
    </ApplyTheme>
  )
}

const bidirectionalProvider = (Story, context) => {
  const direction = context.globals.bidirectional
  return (
    <ApplyTextDirection dir={direction}>
          <Story {...context}/>
    </ApplyTextDirection>
  )
}

export const decorators = [canvasThemeProvider, bidirectionalProvider]

Add bidirectional toggle to storybook
Add bidirectional toggle to storybook

closes OUT-4253

flag=none

Test-plan: - Find bidirectional toggle, ensure rtl / ltr function as
   expected
Change-Id: I15d61906f7ff2f8202b5bac51418ec9fa56b3c20
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/258581
Tested-by: Service Cloud Jenkins <9144042a601061f88f1e1d7a1753ea3e2972119d@instructure.com>
Reviewed-by: Michael Brewer-Davis <785693f4c81267e5b88c0f98d39b56a39a2b6910@instructure.com>
Reviewed-by: Augusto Callejas <7d9b9fd126d23d111f693e51511b33ea0e7192f6@instructure.com>
QA-Review: Martin Yosifov <6a3824bf5c535ee1ddd50b39e2ac9b6ba130ccb0@instructure.com>
Product-Review: Brian Watson <4411c2aac809443ec63e2dd517de0f2dbc7408c6@instructure.com>
