glamorous.test.tsx

import * as React from "react";
import glamorous, {
  withTheme, ThemeProvider
} from "../";

// Needed if generating definition files
// https://github.com/Microsoft/TypeScript/issues/5938
import { GlamorousComponent, GlamorousComponentProps } from "../";

import { CSSPropertiesPseudo, CSSPropertiesLossy } from "../"


// Glamorous built in Components named exports

import { Article, H1, P } from '../'

const useBuiltInNamedExports = (
  <Article color="black">
    <H1 float="left">Test</H1>
    <P marginBottom="10px">Built in components</P>
  </Article>
)


// Properties
const Static = glamorous.div({
  "fontSize": 20,
  "textAlign": "center",
});

// multi level nested properties

glamorous.div({
  ':hover': {
    '& .vendor-class': {
      height: '10px',
    }
  }
})

glamorous.svg({
  ':hover': {
    '& .vendor-class': {
      height: '10px',
    }
  }
})

export interface StaticProps {
  visible: boolean
}

const StaticWithProps = glamorous.div<StaticProps>(
  (props) => ({
    display: props.visible ? 'block' : 'none'
  })
)

const useStatic = (
  <StaticWithProps visible />
)

// Properties Array
glamorous.div({
  overflowWrap: "break-word",
  display: ["flex", "block"],
});

glamorous.circle({
  textAlign: "center",
  display: ["marker", "block"],
});

// pseudo and complex Properties
glamorous.div({
  ':active': {
    "fontSize": 10,
  },
  '&:active': {
    "fontSize": 20,
    "textAlign": "center",
  },
});

// classname string style
const Classname = glamorous.div(
  {
    "fontSize": 20,
    "textAlign": "center",
  },
  'example',
);

// StyleFunction
const StyleFunction = glamorous.h1<{ color: string }>(
  {
    "fontSize": "10px",
    "zIndex": "auto",
  },
  'example',
  (props) => ({
    "color": props.color,
  }),
);

// withComponent
const ExampleWithComponent = Classname
  .withComponent('p')

const OtherExampleWithComponent = StyleFunction
  .withComponent('p')

const UseWithComponent = () => (
  <Classname>
    <OtherExampleWithComponent color="red">
    </OtherExampleWithComponent>
  </Classname>
)


const StyleFunctionUseColor = () => (
  <StyleFunction color="red" />
)

// StyleFunction Array return
const StyleFunctionArray = glamorous.h1<{ color: string }>(
  (props) => [
    'example',
    {
      "color": props.color,
    }
  ],
);

// Style Array
const StyleArray = glamorous.h1<{ color: string }>(
  [
    'example',
    (props) => [
      'example',
      {
        "color": props.color,
      }
    ],
  ]
);

// theme styles
const Divider = glamorous.span<{
  theme: { main: { color: string; } }
}>(
  {
    "fontSize": "10px",
    "zIndex": "auto"
  },
  ({theme}) => ({
    "color": theme.main && theme.main.color,
  }),
);

// n-number of styles
const SpanDivider = glamorous.span<{
  theme: { awesome: string, main: string }
}>(
  {
    "fontSize": "10px",
  },
  ({theme}) => ({
    "color": theme.awesome,
  }),
  {
    "fontWeight": 500,
  },
  {
    "fontFamily": "Roboto",
    "fontWeight": 500,
  },
  ({theme}) => ({
    "color": theme.main,
  }),
);

interface DividerInsideDividerProps {
  color: string;
};

// component styles
const DividerInsideDivider = glamorous(Divider)<{
  visible: boolean
}>(
  ({visible}) => ({
    display: visible ? 'block' : 'none',
  })
);

const DividerInsideDividerWithTheme = glamorous(Divider)<{
  visible: boolean
  theme: { main: { color: string } }
}>(
  {
    "fontSize": "10px",
  },
  ({visible, theme}) => ({
    display: visible ? 'block' : 'none',
    "color": theme.main.color,
  }),
);

const theme = {
  "main": {
    "color": "red",
  },
};

export const Balloon = () => (
  <ThemeProvider theme={theme}>
    <Divider theme={{
      main: { color: "blue" }
    }}>
      <DividerInsideDivider visible />
      <DividerInsideDividerWithTheme visible />
      <DividerInsideDividerWithTheme
        visible
        theme={{
          main: { color: "blue" }
        }}
      >
        <Static>Static</Static>
        <StyleFunction color="blue">
          Hello
        </StyleFunction>
      </DividerInsideDividerWithTheme>
    </Divider>
  </ThemeProvider>
);

export class AirBalloon extends React.Component<{}, {}> {
  private spanElem: HTMLSpanElement;

  public render() {
    return (
      <Divider
        innerRef={(
          c: HTMLSpanElement
        ) => { this.spanElem = c; }}
      >
        Hello
        <SpanDivider>
          Span Divider
        </SpanDivider>
      </Divider>
    );
  }
}

class Test extends React.Component<object, object> {
  private div: HTMLDivElement
  render() {
    return <div ref={(c: HTMLDivElement) => { this.div = c }} />
  }
}

// React Class Wrapped Component

interface ClassToWrapProps {
  className: string
  test: number
}

class ClassToWrap extends React.Component<ClassToWrapProps, object> {
  render() {
    return <div className={this.props.className} />
  }
}

const WrappedClass = glamorous(ClassToWrap)({})

const useWrappedClass = (
  <WrappedClass
    test={10}
    className=''
  />
)

// React Stateless Wrapped Component

export interface WrappedStatelessProps {
  theme: {
    visible: boolean
  }
}

const StatelessToWrap: React.StatelessComponent<object> = () => (
  <div />
)

const WrappedStateless = glamorous(StatelessToWrap)<WrappedStatelessProps>(
  (props) => ({
    display: props.theme.visible ? 'block' : 'none'
  })
)

// Exported Component (for testing declaration generation)
export const ExportTest = glamorous.div(
  {}
)

// Theme Provider

interface ExampleTheme {
  color: string
}

const exampleTheme: ExampleTheme = {
  color: "red",
}

const ThemedComponent = glamorous.h1<
  { theme: ExampleTheme }
>({
  fontSize: '10px'
}, ({theme}) => ({
  color: theme ? theme.color : 'blue'
}))

export const ThemeProviderAndThemedComponent = () => (
  <ThemeProvider theme={exampleTheme}>
    <ThemedComponent />
  </ThemeProvider>
);

// Glamorous component using general prop

const props: GlamorousComponentProps<React.HTMLProps<HTMLButtonElement>> = {
  name: 'button',
  onClick: () => {}
}

const GlamorousButton = glamorous.button({
  fontSize: '10px'
})

const UseGlamorousButtonWithGlamorousComponentProps = (
  <GlamorousButton {...props} />
)

// Extended component with theme prop

interface ExampleTheme {
  color: string
}

interface Props {
  title: string
  theme: ExampleTheme
}

const ComponentWithTheme: React.SFC<Props> = (props) => (
  <h3 style={{
    color: props.theme.color
  }}>
    {props.title}
  </h3>
)

const NonGlamorousThemedComponent = withTheme<
  Props
>(ComponentWithTheme)


const NonGlamorousAlsoThemedComponent = withTheme<
  Props
>(ComponentWithTheme)

const UseNonGlamorousThemedComponent = (
  <div>
    <NonGlamorousThemedComponent
      title='test'
    />
    <NonGlamorousAlsoThemedComponent
      title='test'
    />
  </div>
)

// displayName

const TestDisplayName: React.SFC<object> = () => <div />

glamorous(
  TestDisplayName,
  {
    displayName: 'example'
  },
)

// custom glamorous component factory

interface ExampleComponentProps {
  visible: boolean
}

const ExampleComponent: React.SFC<ExampleComponentProps> = () => <div />

const StyledExampleComponent = glamorous(ExampleComponent)(
  (props) => ({
    display: props.visible ? 'none' : 'block'
  })
)

const StyledExampleComponentHTMLKey = glamorous<{ visible: boolean }>('div')(
  (props) => ({
    display: props.visible ? 'none' : 'block'
  })
)

const StyledExampleComponentSVGKey = glamorous<{ visible: boolean }>('circle')(
  {
    fill: 'black',
  },
  (props) => ({
    display: props.visible ? 'none' : 'block'
  })
)

glamorous('circle')({ allowReorder: 'yes' })
glamorous('div')({ color: 'red' })

const usingStyledExampleComponent = (
  <div>
    <StyledExampleComponent
      visible={false}
    />
    <StyledExampleComponent
      visible={false}
      className=""
      theme={{}}
    />
    <StyledExampleComponentHTMLKey visible={false} />
    <StyledExampleComponentSVGKey visible={false} />
  </div>
)

// shouldClassNameUpdate

interface ShouldClassNameUpdateProps {
  color: string
}

const TestShouldClassNameUpdate: React.SFC<ShouldClassNameUpdateProps> = () => <div />

const pureDivFactory = glamorous(TestShouldClassNameUpdate, {
  shouldClassNameUpdate: (props, previousProps, context, previousContext) => {
    if (props.color !== props.color) {
      return false
    }
    return true
  },
})


interface ShouldClassNameUpdateContext {
  color: string
}

const pureDivFactory2 = glamorous<ShouldClassNameUpdateProps, ShouldClassNameUpdateContext>(TestShouldClassNameUpdate, {
  shouldClassNameUpdate: (props, previousProps, context, previousContext) => {
    if (context.color !== previousContext.color) {
      return false
    }

    return true
  },
})

const Div = pureDivFactory({marginLeft: 1})

// withProps

const WithPropsDiv = glamorous('div', {
  withProps: {primaryColor: 'red'}
})(
  (props) => ({
    color: props.primaryColor
  })
)

const SimpleComponent = () => <div />

const WithPropsSimpleComponent = glamorous(SimpleComponent, {
  withProps: {primaryColor: 'red'}
})(
  (props) => ({
    color: props.primaryColor
  })
)

const MethodWithPropsComponent = glamorous(SimpleComponent)({}).withProps({
  primaryColor: 'red'
})

const useWithProps = (
  <div>
    <WithPropsDiv />
    <WithPropsDiv primaryColor="red" />
    <WithPropsSimpleComponent />
    <WithPropsSimpleComponent primaryColor="red" />
    <MethodWithPropsComponent />
    <MethodWithPropsComponent primaryColor="1" />
  </div>
)

// propsAreCssOverrides

const ComponentPropsAreCssOverides = glamorous(SimpleComponent, {propsAreCssOverrides: true})({
  margin: 1,
  fontSize: 1,
})

const DivPropsAreCssOverides = glamorous('div', {propsAreCssOverrides: true})({
  margin: 1,
  fontSize: 1,
})


const usePropsAreCssOverrides = (
  <div>
    <ComponentPropsAreCssOverides
      display={'block'}
    />
    <DivPropsAreCssOverides
      display={'block'}
    />
  </div>
)

const BuiltinSingleElement: JSX.Element = <glamorous.Div />;

const BuiltinSingleChild: JSX.Element = (
  <glamorous.Div>
    <glamorous.Span>Hello, world!</glamorous.Span>
  </glamorous.Div>
);

const BuiltinMultipleChild: JSX.Element = (
  <glamorous.Div>
    <glamorous.Span>Hello,</glamorous.Span>
    <glamorous.Span>world!</glamorous.Span>
  </glamorous.Div>
);

const BuiltinStyledSingleElement: JSX.Element =
  <glamorous.Div color='red'/>

const BuiltinStyledWithSingleChild: JSX.Element = (
  <glamorous.Div color='red'>
    <glamorous.Span>Hello, world!</glamorous.Span>
  </glamorous.Div>
);

const BuiltinStyledWithMultipleChild: JSX.Element = (
  <glamorous.Div color='red'>
    <glamorous.Span>Hello,</glamorous.Span>
    <glamorous.Span>world!</glamorous.Span>
  </glamorous.Div>
);

const CustomStatelessComponent: React.SFC<{}> = (_props) => <div />
class CustomClassComponent extends React.Component<{}, {}> {
  render() {
    return null
  }
}
const CustomGlamorousComponent = glamorous.div()
const CustomGlamorousComponent2 = glamorous('div')()
const CustomGlamorousComponent3 = glamorous(CustomGlamorousComponent)()
const BuiltinStyledComponentChildren: JSX.Element = (
  <glamorous.Div height={18}>
    <CustomStatelessComponent />
    <CustomClassComponent />
    <CustomGlamorousComponent />
    <CustomGlamorousComponent2 />
    <CustomGlamorousComponent3 />
  </glamorous.Div>
)
const BuiltinStyledWithPrimitivesChildren: JSX.Element = (
  <glamorous.Div color='red'>
    {null}
    {false}
    {true}
    {undefined}
    {5}
  </glamorous.Div>
);

const BuiltinStyledWithFragment: JSX.Element = (
  <glamorous.Div color='red'>
    <React.Fragment />
  </glamorous.Div>
);