Merge pull request #21 from matheusps/feature/theme-strategy

Feature/theme strategy

package.json

@@ -24,6 +24,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.3.3",
     "@types/jest": "^24.0.11",
+    "@types/lodash": "^4.14.123",
     "@types/node": "^11.13.0",
     "@types/react": "^16.8.12",
     "@types/react-dom": "^16.8.3",
@@ -42,6 +43,7 @@
     "webpack-dev-server": "^3.2.1"
   },
   "dependencies": {
+    "lodash": "^4.17.11",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "styled-components": "^4.2.0"

src/__tests__/Container.test.tsx

@@ -6,7 +6,7 @@ import StellarTheme from '../components/StellarTheme'
 describe('Container component', () => {
   const component = render(
     <StellarTheme>
-      <Container bg="primary" />
+      <Container color="primary" />
     </StellarTheme>
   )
 

src/__tests__/__snapshots__/Container.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`Container component should match snapshot 1`] = `
 <DocumentFragment>
   <div
     class="sc-bdVaJa gECytu"
+    color="primary"
   />
 </DocumentFragment>
 `;

src/components/Container/index.tsx

@@ -1,27 +1,26 @@
 import React, { FunctionComponent } from 'react'
 import styled from 'styled-components'
+import { selectTheme } from '../../global/helpers'
 
-interface ContainerProps {
-  bg: 'primary'
-  theme?: any
-}
+interface Props extends EnhancedWithTheme {}
 
-const Div = styled.div`
-  background-color: ${(props: ContainerProps) => {
-    switch (props.bg) {
-      case 'primary':
-        return props.theme.color.primary.lighten
-    }
-  }};
+const Div = styled.div<EnhancedWithTheme>`
+  background-color: ${props =>
+    selectTheme(props.theme, props.color, props.shade)};
   padding: 1rem;
 `
 
-const Container: FunctionComponent<ContainerProps> = ({ bg, children }) => {
-  return <Div bg={bg}>{children}</Div>
+const Container: FunctionComponent<Props> = ({ color, shade, children }) => {
+  return (
+    <Div color={color} shade={shade}>
+      {children}
+    </Div>
+  )
 }
 
 Container.defaultProps = {
-  bg: 'primary',
+  color: 'primary',
+  shade: 'lighten',
 }
 
 export default Container

src/components/Loader/Readme.md

@@ -1,7 +1,12 @@
 Loader colors
 
 ```js
+
 <Loader />
+<Loader shade='lighten' />
+<Loader shade='darken' />
+
 <Loader color='secondary' />
 <Loader color='success' />
+
 ```

src/components/Loader/helpers/styled.ts

@@ -1,5 +1,7 @@
 import styled, { keyframes } from 'styled-components'
 
+import { selectTheme } from '../../../global/helpers'
+
 const infiniteSpin = keyframes`
   from {transform: rotate(0deg)}
   to {transform: rotate(360deg)}
@@ -12,17 +14,8 @@ const Svg = styled.svg`
   animation-timing-function: linear;
 `
 
-const Circle = styled.circle`
-  stroke: ${props => {
-    switch (props.color) {
-      case 'primary':
-        return props.theme.color.primary.default
-      case 'secondary':
-        return props.theme.color.secondary.default
-      case 'success':
-        return props.theme.color.success.default
-    }
-  }};
+const Circle = styled.circle<EnhancedWithTheme>`
+  stroke: ${props => selectTheme(props.theme, props.color, props.shade)};
 `
 
 /** @component */

src/components/Loader/index.tsx

@@ -8,6 +8,7 @@ const Loader: FunctionComponent<LoaderProps> = ({
   size,
   speed,
   color,
+  shade,
   gap,
 }) => (
   <Svg
@@ -22,6 +23,7 @@ const Loader: FunctionComponent<LoaderProps> = ({
       cx={16}
       cy={16}
       color={color}
+      shade={shade}
       r={14 - getThickness(thickness!) / 2}
       fill="none"
       strokeWidth={getThickness(thickness!)}
@@ -33,6 +35,7 @@ const Loader: FunctionComponent<LoaderProps> = ({
 
 Loader.defaultProps = {
   color: 'primary',
+  shade: 'default',
   size: '2rem',
   thickness: 'md',
   speed: 'normal',

src/components/Loader/typings.d.ts

@@ -1,10 +1,6 @@
-type Measure = 'sm' | 'md' | 'lg' | 'xl'
-type Speed = 'fast' | 'slow' | 'normal'
-type Color = 'primary' | 'secondary' | 'success'
-interface LoaderProps {
-  color?: Color
-  speed?: Speed
-  gap?: Measure
-  thickness?: Measure
-  size?: string
+interface LoaderProps extends EnhancedWithTheme {
+  readonly speed?: Speed
+  readonly gap?: Measure
+  readonly thickness?: Measure
+  readonly size?: string
 }

src/components/StellarTheme/stockThemes.ts

@@ -1,5 +1,5 @@
 export const light = {
-  color: {
+  colors: {
     base: {
       default: '#fafafa',
       darken: '#cecece',

src/global/helpers.ts

@@ -0,0 +1,7 @@
+import { get } from 'lodash'
+
+export const selectTheme = (
+  props?: ThemeProps,
+  choose?: Color,
+  shade?: Shade
+): string => get(props!, `colors.${choose!}.${shade!}`)

src/global/typings.d.ts

@@ -0,0 +1,29 @@
+type Measure = 'sm' | 'md' | 'lg' | 'xl'
+type Speed = 'fast' | 'slow' | 'normal'
+
+type Color = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error'
+
+type Shade = 'default' | 'lighten' | 'darken' | 'constrast'
+interface Shades {
+  default: string
+  lighten: string
+  darken: string
+  constrast: string
+}
+interface ColorSystem {
+  readonly base: Shades
+  readonly primary: Shades
+  readonly secondary: Shades
+  readonly success: Shades
+  readonly info: Shades
+  readonly warning: Shades
+  readonly error: Shades
+}
+interface ThemeProps {
+  readonly colors: ColorSystem
+}
+
+interface EnhancedWithTheme {
+  readonly color?: Color
+  readonly shade?: Shade
+}

yarn.lock

@@ -963,6 +963,11 @@
   dependencies:
     "@types/jest-diff" "*"
 
+"@types/lodash@^4.14.123":
+  version "4.14.123"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.123.tgz#39be5d211478c8dd3bdae98ee75bb7efe4abfe4d"
+  integrity sha512-pQvPkc4Nltyx7G1Ww45OjVqUsJP4UsZm+GWJpigXgkikZqJgRm4c48g027o6tdgubWHwFRF15iFd+Y4Pmqv6+Q==
+
 "@types/node@*", "@types/node@^11.13.0":
   version "11.13.0"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-11.13.0.tgz#b0df8d6ef9b5001b2be3a94d909ce3c29a80f9e1"