) => (
49 |
50 | ),
51 | )
52 |
53 | ResultComponent.displayName = `withTheme(${
54 | WrappedComponent.displayName || WrappedComponent.name
55 | })`
56 |
57 | const FinalComponent = hoistNonReactStatics(
58 | ResultComponent,
59 | WrappedComponent,
60 | )
61 |
62 | return FinalComponent
63 | }
64 |
65 | return withTheme
66 | }
67 |
68 | export default createWithTheme
69 |
--------------------------------------------------------------------------------
/src/core/theming.ts:
--------------------------------------------------------------------------------
1 | import createTheming from './createTheming'
2 | import { defaultTheme } from '../styles/defaultTheme'
3 |
4 | export const {
5 | ThemeProvider,
6 | withTheme,
7 | useTheme,
8 | ThemeContext,
9 | } = createTheming(defaultTheme)
10 |
--------------------------------------------------------------------------------
/src/hoc/createPicassoComponent.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/display-name */
2 | import * as React from 'react'
3 | import { StyleSheet, ViewProps } from 'react-native'
4 | import hoistNonReactStatics from 'hoist-non-react-statics'
5 | import { ThemeContext } from '../core/theming'
6 | import { buildStyleSheet } from '../util/style-helpers'
7 | import { Theme } from '../styles/defaultTheme'
8 |
9 | interface CProps extends ViewProps {
10 | className?: string
11 | children?: React.ReactNode
12 | }
13 |
14 | const createPicassoComponent = (
15 | WrappedComponent: React.ComponentType
,
16 | ) => {
17 | const EnhancedComponent = React.forwardRef(
18 | (props, ref) => {
19 | const { children, className = '', style, ...others } = props
20 |
21 | return (
22 |
23 | {(theme: Theme) => {
24 | const picassoStyle = buildStyleSheet(className, theme, 'custom')
25 |
26 | return (
27 |
36 | {children}
37 |
38 | )
39 | }}
40 |
41 | )
42 | },
43 | )
44 |
45 | const FinalComponent = hoistNonReactStatics(
46 | EnhancedComponent,
47 | WrappedComponent,
48 | )
49 |
50 | return FinalComponent
51 | }
52 |
53 | export default createPicassoComponent
54 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export { ThemeProvider, useTheme, withTheme } from './core/theming'
2 |
3 | export { default as View } from './components/View'
4 | export { default as Text } from './components/Text'
5 | export { default as TextInput } from './components/TextInput'
6 | export { default as SafeAreaView } from './components/SafeAreaView'
7 | export { default as TouchableOpacity } from './components/TouchableOpacity'
8 | export { default as createPicassoComponent } from './hoc/createPicassoComponent'
9 | export { defaultTheme } from './styles/defaultTheme'
10 |
--------------------------------------------------------------------------------
/src/styles/defaultTheme.ts:
--------------------------------------------------------------------------------
1 | interface BackgroundColors {
2 | background?: string
3 | primary?: string
4 | secondary?: string
5 | border?: string
6 | [x: string]: any
7 | }
8 |
9 | interface TextColors {
10 | primary?: string
11 | secondary?: string
12 | white?: string
13 | [x: string]: any
14 | }
15 |
16 | interface Sizes {
17 | sm?: number
18 | md?: number
19 | lg?: number
20 | xl?: number
21 | xxl?: number
22 | [x: string]: any
23 | }
24 |
25 | interface Weights {
26 | light?: string
27 | normal?: string
28 | bold?: string
29 | extrabold?: string
30 | [x: string]: any
31 | }
32 |
33 | interface Font {
34 | family?: string
35 | sizes?: Sizes
36 | weights?: Weights
37 | }
38 |
39 | interface Radius extends Sizes {
40 | round?: number
41 | [x: string]: any
42 | }
43 |
44 | export interface Theme {
45 | colors?: BackgroundColors
46 | textColors?: TextColors
47 | font?: Font
48 | elevated?: object
49 | radius?: Radius
50 | spacing?: Sizes
51 | [x: string]: any
52 | }
53 |
54 | export const defaultTheme: Theme = {
55 | colors: {
56 | background: '#eeeeee',
57 | primary: '#00B386',
58 | secondary: '#dedede',
59 | border: '#d3d3d3',
60 | },
61 | textColors: {
62 | primary: '#333333',
63 | secondary: '#666666',
64 | white: '#ffffff',
65 | },
66 | font: {
67 | family: 'Helvetica',
68 | sizes: {
69 | sm: 12,
70 | md: 16,
71 | lg: 24,
72 | xl: 32,
73 | xxl: 40,
74 | },
75 | weights: {
76 | light: '100',
77 | normal: 'normal',
78 | bold: 'bold',
79 | extrabold: '800',
80 | },
81 | },
82 | elevated: {
83 | shadowColor: '#000000',
84 | shadowOffset: { width: 0, height: 5 },
85 | shadowOpacity: 0.2,
86 | shadowRadius: 3,
87 | elevation: 5,
88 | },
89 | radius: {
90 | sm: 5,
91 | md: 10,
92 | lg: 20,
93 | xl: 40,
94 | xxl: 80,
95 | round: 1000,
96 | },
97 | spacing: {
98 | sm: 8,
99 | md: 16,
100 | lg: 24,
101 | xl: 32,
102 | xxl: 40,
103 | },
104 | }
105 |
--------------------------------------------------------------------------------
/src/test.tsx:
--------------------------------------------------------------------------------
1 | import { Text, TouchableOpacity, ViewBase } from 'react-native'
2 | import { createPicassoComponent } from '.'
3 |
4 | const MyView: React.FC = (props) => {
5 | const { children } = props
6 |
7 | return {children}
8 | }
9 |
10 | const MyViewPicasso = createPicassoComponent(TouchableOpacity)
11 |
12 | const App = () => {
13 | return (
14 |
15 | Hello
16 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/src/util/classname-helpers.ts:
--------------------------------------------------------------------------------
1 | import { Theme } from '../styles/defaultTheme'
2 | import { validPropertiesBase, validPropertiesForType } from './constants'
3 |
4 | export interface PropertyValue {
5 | property: string
6 | value: string
7 | }
8 |
9 | /**
10 | * Splits the classname and return an array of
11 | * valid picasso class types
12 | * @param {String} classname
13 | */
14 | export const splitAndValidate = (
15 | classname: string,
16 | componentType: 'view' | 'text' | 'custom',
17 | theme: Theme,
18 | ): PropertyValue[] => {
19 | const validProperties: string[] = [
20 | ...validPropertiesBase,
21 | ...validPropertiesForType[componentType],
22 | ...Object.keys(theme),
23 | ]
24 |
25 | const split = classname.split(' ')
26 |
27 | return split
28 | .map((declaration) => {
29 | const [property, value] = declaration.split('-')
30 |
31 | if (validProperties.includes(property)) {
32 | const final: PropertyValue = { property, value }
33 | return final
34 | }
35 |
36 | return { property: '', value: '' }
37 | })
38 | .filter(Boolean)
39 | }
40 |
--------------------------------------------------------------------------------
/src/util/constants.ts:
--------------------------------------------------------------------------------
1 | export const spacingProperties = [
2 | 'm',
3 | 'mr',
4 | 'ml',
5 | 'mt',
6 | 'mb',
7 | 'mx',
8 | 'my',
9 | 'p',
10 | 'pr',
11 | 'pl',
12 | 'pt',
13 | 'pb',
14 | 'px',
15 | 'py',
16 | ]
17 |
18 | export const borderWidthProperties = ['b', 'bl', 'br', 'bt', 'bb']
19 |
20 | export const alignValues: Record = {
21 | center: 'center',
22 | left: 'left',
23 | right: 'right',
24 | justify: 'justify',
25 | c: 'center',
26 | l: 'left',
27 | r: 'right',
28 | j: 'justify',
29 | }
30 |
31 | export const alignItemsValues: Record = {
32 | center: 'center',
33 | start: 'flex-start',
34 | end: 'flex-end',
35 | stretch: 'stretch',
36 | baseline: 'baseline',
37 | between: 'space-between',
38 | around: 'space-around',
39 | evenly: 'space-evenly',
40 | c: 'center',
41 | fs: 'flex-start',
42 | fe: 'flex-end',
43 | ba: 'baseline',
44 | sb: 'space-between',
45 | sa: 'space-around',
46 | se: 'space-evenly',
47 | }
48 |
49 | export const fontStyleValues: Record = {
50 | normal: 'normal',
51 | italic: 'italic',
52 | n: 'normal',
53 | i: 'italic',
54 | }
55 |
56 | export const flexValues: Record = {
57 | row: 'row',
58 | column: 'column',
59 | r: 'row',
60 | c: 'column',
61 | }
62 |
63 | export const validPropertiesBase = [
64 | ...spacingProperties,
65 | 'flex',
66 | 'f',
67 | 'alignself',
68 | 'as',
69 | ]
70 | const validPropertiesView = [
71 | 'elevated',
72 | 'radius',
73 | 'r',
74 | 'radiustl',
75 | 'rtl',
76 | 'radiustr',
77 | 'rtr',
78 | 'radiusbl',
79 | 'rbl',
80 | 'radiusbr',
81 | 'rbr',
82 | 'bg',
83 | 'alignitems',
84 | 'ai',
85 | 'justifycontent',
86 | 'jc',
87 | 'bordercolor',
88 | 'bc',
89 | ...borderWidthProperties,
90 | ]
91 | const validPropertiesText = [
92 | 'weight',
93 | 'w',
94 | 'align',
95 | 'a',
96 | 'color',
97 | 'c',
98 | 'size',
99 | 's',
100 | 'fontstyle',
101 | 'fs',
102 | ]
103 |
104 | export const validPropertiesForType = {
105 | view: validPropertiesView,
106 | text: validPropertiesText,
107 | custom: [...validPropertiesView, ...validPropertiesText],
108 | }
109 |
110 | export const PROPERTIES = {
111 | BACKGROUND: 'bg',
112 | COLOR: 'color',
113 | COLOR_SHORT: 'c',
114 | FONT_SIZE: 'size',
115 | FONT_SIZE_SHORT: 's',
116 | FONT_WEIGHT: 'weight',
117 | FONT_WEIGHT_SHORT: 'w',
118 | FONT_STYLE: 'fontstyle',
119 | FONT_STYLE_SHORT: 'fs',
120 | ALIGN_ITEMS: 'alignitems',
121 | ALIGN_ITEMS_SHORT: 'ai',
122 | JUSTIFY_CONTENT: 'justifycontent',
123 | JUSTIFY_CONTENT_SHORT: 'jc',
124 | ALIGN_SELF: 'alignself',
125 | ALIGN_SELF_SHORT: 'as',
126 | TEXT_ALIGN: 'align',
127 | TEXT_ALIGN_SHORT: 'a',
128 | FLEX: 'flex',
129 | FLEX_SHORT: 'f',
130 | BORDER_RADIUS: 'radius',
131 | BORDER_RADIUS_SHORT: 'r',
132 | BORDER_RADIUS_TOP_LEFT: 'radiustl',
133 | BORDER_RADIUS_TOP_LEFT_SHORT: 'rtl',
134 | BORDER_RADIUS_TOP_RIGHT: 'radiustr',
135 | BORDER_RADIUS_TOP_RIGHT_SHORT: 'rtr',
136 | BORDER_RADIUS_BOTTOM_LEFT: 'radiusbl',
137 | BORDER_RADIUS_BOTTOM_LEFT_SHORT: 'rbl',
138 | BORDER_RADIUS_BOTTOM_RIGHT: 'radiusbr',
139 | BORDER_RADIUS_BOTTOM_RIGHT_SHORT: 'rbr',
140 | BORDER_COLOR: 'bordercolor',
141 | BORDER_COLOR_SHORT: 'bc',
142 | }
143 |
--------------------------------------------------------------------------------
/src/util/style-helpers.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable newline-after-var */
2 | import { StyleSheet } from 'react-native'
3 | import { Theme } from '../styles/defaultTheme'
4 | import { splitAndValidate } from './classname-helpers'
5 | import {
6 | alignValues,
7 | flexValues,
8 | spacingProperties,
9 | alignItemsValues,
10 | PROPERTIES,
11 | borderWidthProperties,
12 | fontStyleValues,
13 | } from './constants'
14 |
15 | interface PropertyValue {
16 | property: string
17 | value: string
18 | }
19 |
20 | const getSide = (value: string) => {
21 | let side = ''
22 |
23 | if (value === 't') side = 'Top'
24 | else if (value === 'b') side = 'Bottom'
25 | else if (value === 'l') side = 'Left'
26 | else if (value === 'r') side = 'Right'
27 | else if (value === 'x') side = 'Horizontal'
28 | else if (value === 'y') side = 'Vertical'
29 |
30 | return side
31 | }
32 |
33 | const classesToStyle = (array: PropertyValue[], theme: Record) => {
34 | let styles: Record = {}
35 |
36 | array.forEach(({ property, value }) => {
37 | switch (property.toLowerCase()) {
38 | case PROPERTIES.BACKGROUND:
39 | styles.backgroundColor = theme.colors[value]
40 | break
41 | case PROPERTIES.COLOR:
42 | case PROPERTIES.COLOR_SHORT:
43 | styles.color = theme.textColors[value]
44 | break
45 | case PROPERTIES.FONT_SIZE:
46 | case PROPERTIES.FONT_SIZE_SHORT:
47 | styles.fontSize = theme.font?.sizes?.[value]
48 | break
49 | case PROPERTIES.FONT_WEIGHT:
50 | case PROPERTIES.FONT_WEIGHT_SHORT:
51 | styles.fontWeight = theme.font?.weights?.[value]
52 | break
53 | case PROPERTIES.ALIGN_ITEMS:
54 | case PROPERTIES.ALIGN_ITEMS_SHORT:
55 | styles.alignItems = alignItemsValues[value]
56 | break
57 | case PROPERTIES.JUSTIFY_CONTENT:
58 | case PROPERTIES.JUSTIFY_CONTENT_SHORT:
59 | styles.justifyContent = alignItemsValues[value]
60 | break
61 | case PROPERTIES.ALIGN_SELF:
62 | case PROPERTIES.ALIGN_SELF_SHORT:
63 | styles.alignSelf = alignItemsValues[value]
64 | break
65 | case PROPERTIES.TEXT_ALIGN:
66 | case PROPERTIES.TEXT_ALIGN_SHORT:
67 | styles.textAlign = alignValues[value]
68 | break
69 | case PROPERTIES.FLEX:
70 | case PROPERTIES.FLEX_SHORT:
71 | if (flexValues[value]) {
72 | styles.flexDirection = flexValues[value]
73 | } else if (!Number.isNaN(Number(value))) {
74 | styles.flex = Number(value)
75 | }
76 | break
77 | case PROPERTIES.BORDER_RADIUS:
78 | case PROPERTIES.BORDER_RADIUS_SHORT:
79 | styles.borderRadius = theme.radius?.[value]
80 | break
81 | case PROPERTIES.BORDER_RADIUS_BOTTOM_LEFT:
82 | case PROPERTIES.BORDER_RADIUS_BOTTOM_LEFT_SHORT:
83 | styles.borderBottomLeftRadius = theme.radius?.[value]
84 | break
85 | case PROPERTIES.BORDER_RADIUS_BOTTOM_RIGHT:
86 | case PROPERTIES.BORDER_RADIUS_BOTTOM_RIGHT_SHORT:
87 | styles.borderBottomRightRadius = theme.radius?.[value]
88 | break
89 | case PROPERTIES.BORDER_RADIUS_TOP_LEFT:
90 | case PROPERTIES.BORDER_RADIUS_TOP_LEFT_SHORT:
91 | styles.borderTopLeftRadius = theme.radius?.[value]
92 | break
93 | case PROPERTIES.BORDER_RADIUS_TOP_RIGHT:
94 | case PROPERTIES.BORDER_RADIUS_TOP_RIGHT_SHORT:
95 | styles.borderTopRightRadius = theme.radius?.[value]
96 | break
97 | case PROPERTIES.BORDER_COLOR:
98 | case PROPERTIES.BORDER_COLOR_SHORT:
99 | styles.borderColor = theme.colors?.[value]
100 | break
101 | case PROPERTIES.FONT_STYLE:
102 | case PROPERTIES.FONT_STYLE_SHORT:
103 | styles.fontStyle = fontStyleValues[value]
104 | break
105 | default:
106 | if (spacingProperties.includes(property.toLowerCase())) {
107 | const values = theme.spacing
108 | let main = ''
109 | const side = getSide(property[1])
110 |
111 | if (property[0] === 'm') main = 'margin'
112 | else if (property[0] === 'p') main = 'padding'
113 |
114 | styles[`${main}${side}`] = values[value]
115 | } else if (borderWidthProperties.includes(property.toLowerCase())) {
116 | const prop: string = property[1]
117 | const side = getSide(prop)
118 |
119 | if (!Number.isNaN(Number(value))) {
120 | styles[`border${side}Width`] = Number(value)
121 | }
122 | }
123 | // Custom root values like elevated
124 | else {
125 | styles = {
126 | ...styles,
127 | ...theme[property],
128 | }
129 | }
130 | }
131 | })
132 |
133 | return styles
134 | }
135 |
136 | export const buildStyleSheet = (
137 | className: string,
138 | theme: Theme,
139 | componentType: 'custom' | 'view' | 'text' = 'custom',
140 | ) => {
141 | const arrayClasses = splitAndValidate(className, componentType, theme)
142 | return StyleSheet.flatten(classesToStyle(arrayClasses, theme))
143 | }
144 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "jsx": "react-native",
4 | /* Visit https://aka.ms/tsconfig.json to read more about this file */
5 |
6 | /* Basic Options */
7 | // "incremental": true, /* Enable incremental compilation */
8 | "target": "ES2016" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
9 | "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
10 | // "lib": [], /* Specify library files to be included in the compilation. */
11 | // "allowJs": true, /* Allow javascript files to be compiled. */
12 | // "checkJs": true, /* Report errors in .js files. */
13 | "declaration": true /* Generates corresponding '.d.ts' file. */,
14 | // "declarationMap": true /* Generates a sourcemap for each corresponding '.d.ts' file. */,
15 | // "sourceMap": true /* Generates corresponding '.map' file. */,
16 | // "outFile": "./build" /* Concatenate and emit output to single file. */,
17 | "outDir": "./build" /* Redirect output structure to the directory. */,
18 | "rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
19 | // "composite": true, /* Enable project compilation */
20 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
21 | // "removeComments": true, /* Do not emit comments to output. */
22 | // "noEmit": true, /* Do not emit outputs. */
23 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */
24 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
25 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
26 |
27 | /* Strict Type-Checking Options */
28 | "strict": true /* Enable all strict type-checking options. */,
29 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
30 | // "strictNullChecks": true, /* Enable strict null checks. */
31 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */
32 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
33 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
34 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
35 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
36 |
37 | /* Additional Checks */
38 | // "noUnusedLocals": true, /* Report errors on unused locals. */
39 | // "noUnusedParameters": true, /* Report errors on unused parameters. */
40 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
41 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
42 |
43 | /* Module Resolution Options */
44 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
45 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
46 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
47 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
48 | // "typeRoots": [], /* List of folders to include type definitions from. */
49 | // "types": [], /* Type declaration files to be included in compilation. */
50 | "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
51 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
52 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
53 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
54 |
55 | /* Source Map Options */
56 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
57 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
58 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
59 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
60 |
61 | /* Experimental Options */
62 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
63 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
64 |
65 | /* Advanced Options */
66 | "skipLibCheck": true /* Skip type checking of declaration files. */,
67 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
9 | 
48 |