react-native-sj-ui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +20 -0
- package/README.md +37 -0
- package/lib/module/components/TextView.js +34 -0
- package/lib/module/components/TextView.js.map +1 -0
- package/lib/module/components/ViewCard.js +17 -0
- package/lib/module/components/ViewCard.js.map +1 -0
- package/lib/module/hooks/useTheme.js +8 -0
- package/lib/module/hooks/useTheme.js.map +1 -0
- package/lib/module/index.js +9 -0
- package/lib/module/index.js.map +1 -0
- package/lib/module/package.json +1 -0
- package/lib/module/provider/ThemeContext.js +6 -0
- package/lib/module/provider/ThemeContext.js.map +1 -0
- package/lib/module/provider/UIProvider.js +17 -0
- package/lib/module/provider/UIProvider.js.map +1 -0
- package/lib/module/theme/createTheme.js +8 -0
- package/lib/module/theme/createTheme.js.map +1 -0
- package/lib/module/theme/deepMerge.js +27 -0
- package/lib/module/theme/deepMerge.js.map +1 -0
- package/lib/module/theme/defaultTheme.js +51 -0
- package/lib/module/theme/defaultTheme.js.map +1 -0
- package/lib/module/theme/types.js +2 -0
- package/lib/module/theme/types.js.map +1 -0
- package/lib/typescript/package.json +1 -0
- package/lib/typescript/src/components/TextView.d.ts +17 -0
- package/lib/typescript/src/components/TextView.d.ts.map +1 -0
- package/lib/typescript/src/components/ViewCard.d.ts +8 -0
- package/lib/typescript/src/components/ViewCard.d.ts.map +1 -0
- package/lib/typescript/src/hooks/useTheme.d.ts +2 -0
- package/lib/typescript/src/hooks/useTheme.d.ts.map +1 -0
- package/lib/typescript/src/index.d.ts +7 -0
- package/lib/typescript/src/index.d.ts.map +1 -0
- package/lib/typescript/src/provider/ThemeContext.d.ts +3 -0
- package/lib/typescript/src/provider/ThemeContext.d.ts.map +1 -0
- package/lib/typescript/src/provider/UIProvider.d.ts +9 -0
- package/lib/typescript/src/provider/UIProvider.d.ts.map +1 -0
- package/lib/typescript/src/theme/createTheme.d.ts +3 -0
- package/lib/typescript/src/theme/createTheme.d.ts.map +1 -0
- package/lib/typescript/src/theme/deepMerge.d.ts +3 -0
- package/lib/typescript/src/theme/deepMerge.d.ts.map +1 -0
- package/lib/typescript/src/theme/defaultTheme.d.ts +3 -0
- package/lib/typescript/src/theme/defaultTheme.d.ts.map +1 -0
- package/lib/typescript/src/theme/types.d.ts +59 -0
- package/lib/typescript/src/theme/types.d.ts.map +1 -0
- package/package.json +173 -0
- package/src/components/TextView.tsx +58 -0
- package/src/components/ViewCard.tsx +16 -0
- package/src/hooks/useTheme.ts +6 -0
- package/src/index.tsx +7 -0
- package/src/provider/ThemeContext.ts +5 -0
- package/src/provider/UIProvider.tsx +21 -0
- package/src/theme/createTheme.ts +7 -0
- package/src/theme/deepMerge.ts +30 -0
- package/src/theme/defaultTheme.ts +55 -0
- package/src/theme/types.ts +85 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 @sarowerj
|
|
4
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
5
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
6
|
+
in the Software without restriction, including without limitation the rights
|
|
7
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
8
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
9
|
+
furnished to do so, subject to the following conditions:
|
|
10
|
+
|
|
11
|
+
The above copyright notice and this permission notice shall be included in all
|
|
12
|
+
copies or substantial portions of the Software.
|
|
13
|
+
|
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
15
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
16
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
17
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
18
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
19
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
20
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# react-native-sj-ui
|
|
2
|
+
|
|
3
|
+
The ui library for react native application.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
```sh
|
|
9
|
+
npm install react-native-sj-ui
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
```js
|
|
17
|
+
import { multiply } from 'react-native-sj-ui';
|
|
18
|
+
|
|
19
|
+
// ...
|
|
20
|
+
|
|
21
|
+
const result = multiply(3, 7);
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## Contributing
|
|
26
|
+
|
|
27
|
+
- [Development workflow](CONTRIBUTING.md#development-workflow)
|
|
28
|
+
- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
|
|
29
|
+
- [Code of conduct](CODE_OF_CONDUCT.md)
|
|
30
|
+
|
|
31
|
+
## License
|
|
32
|
+
|
|
33
|
+
MIT
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { Text } from 'react-native';
|
|
4
|
+
import { useTheme } from "../hooks/useTheme.js";
|
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
const TextView = ({
|
|
7
|
+
size = 'body',
|
|
8
|
+
fontSize,
|
|
9
|
+
color,
|
|
10
|
+
textColor,
|
|
11
|
+
fontWeight,
|
|
12
|
+
textAlign,
|
|
13
|
+
textDecorationLine,
|
|
14
|
+
children,
|
|
15
|
+
style,
|
|
16
|
+
...rest
|
|
17
|
+
}) => {
|
|
18
|
+
const theme = useTheme();
|
|
19
|
+
const resolvedFontSize = fontSize ?? theme.typography.fontSize[size];
|
|
20
|
+
const resolvedColor = textColor ?? (color ? theme.colors[color] : theme.colors.text);
|
|
21
|
+
return /*#__PURE__*/_jsx(Text, {
|
|
22
|
+
style: [{
|
|
23
|
+
color: resolvedColor,
|
|
24
|
+
fontSize: resolvedFontSize,
|
|
25
|
+
fontWeight,
|
|
26
|
+
textAlign,
|
|
27
|
+
textDecorationLine
|
|
28
|
+
}, style],
|
|
29
|
+
...rest,
|
|
30
|
+
children: children
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
export default TextView;
|
|
34
|
+
//# sourceMappingURL=TextView.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Text","useTheme","jsx","_jsx","TextView","size","fontSize","color","textColor","fontWeight","textAlign","textDecorationLine","children","style","rest","theme","resolvedFontSize","typography","resolvedColor","colors","text"],"sourceRoot":"../../../src","sources":["components/TextView.tsx"],"mappings":";;AAEA,SAASA,IAAI,QAAQ,cAAc;AACnC,SAASC,QAAQ,QAAQ,sBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAiB7C,MAAMC,QAAiC,GAAGA,CAAC;EACzCC,IAAI,GAAG,MAAM;EACbC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,UAAU;EACVC,SAAS;EACTC,kBAAkB;EAClBC,QAAQ;EACRC,KAAK;EACL,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,KAAK,GAAGd,QAAQ,CAAC,CAAC;EAExB,MAAMe,gBAAgB,GAAGV,QAAQ,IAAIS,KAAK,CAACE,UAAU,CAACX,QAAQ,CAACD,IAAI,CAAC;EAEpE,MAAMa,aAAa,GACjBV,SAAS,KAAKD,KAAK,GAAGQ,KAAK,CAACI,MAAM,CAACZ,KAAK,CAAC,GAAGQ,KAAK,CAACI,MAAM,CAACC,IAAI,CAAC;EAChE,oBACEjB,IAAA,CAACH,IAAI;IACHa,KAAK,EAAE,CACL;MACEN,KAAK,EAAEW,aAAa;MACpBZ,QAAQ,EAAEU,gBAAgB;MAC1BP,UAAU;MACVC,SAAS;MACTC;IACF,CAAC,EACDE,KAAK,CACL;IAAA,GACEC,IAAI;IAAAF,QAAA,EAEPA;EAAQ,CACL,CAAC;AAEX,CAAC;AAED,eAAeR,QAAQ","ignoreList":[]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { View } from 'react-native';
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
const ViewCard = ({
|
|
6
|
+
children,
|
|
7
|
+
style,
|
|
8
|
+
...rest
|
|
9
|
+
}) => {
|
|
10
|
+
return /*#__PURE__*/_jsx(View, {
|
|
11
|
+
...rest,
|
|
12
|
+
style: style,
|
|
13
|
+
children: children
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
export default ViewCard;
|
|
17
|
+
//# sourceMappingURL=ViewCard.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["View","jsx","_jsx","ViewCard","children","style","rest"],"sourceRoot":"../../../src","sources":["components/ViewCard.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAwB,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOpD,MAAMC,QAAiC,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAK,CAAC,KAAK;EAC1E,oBACEJ,IAAA,CAACF,IAAI;IAAA,GAAKM,IAAI;IAAED,KAAK,EAAEA,KAAM;IAAAD,QAAA,EAC1BA;EAAQ,CACL,CAAC;AAEX,CAAC;AAED,eAAeD,QAAQ","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useContext","ThemeContext","useTheme"],"sourceRoot":"../../../src","sources":["hooks/useTheme.ts"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,YAAY,QAAQ,6BAA0B;AAEvD,OAAO,MAAMC,QAAQ,GAAGA,CAAA,KAAM;EAC5B,OAAOF,UAAU,CAACC,YAAY,CAAC;AACjC,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { SjUiProvider } from "./provider/UIProvider.js";
|
|
4
|
+
import TextView from "./components/TextView.js";
|
|
5
|
+
import ViewCard from "./components/ViewCard.js";
|
|
6
|
+
export { TextView };
|
|
7
|
+
export { SjUiProvider };
|
|
8
|
+
export { ViewCard };
|
|
9
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["SjUiProvider","TextView","ViewCard"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,YAAY,QAAQ,0BAAuB;AACpD,OAAOC,QAAQ,MAAM,0BAAuB;AAC5C,OAAOC,QAAQ,MAAM,0BAAuB;AAE5C,SAASD,QAAQ;AACjB,SAASD,YAAY;AACrB,SAASE,QAAQ","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"type":"module"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createContext","defaultTheme","ThemeContext"],"sourceRoot":"../../../src","sources":["provider/ThemeContext.ts"],"mappings":";;AAAA,SAASA,aAAa,QAAQ,OAAO;AAErC,SAASC,YAAY,QAAQ,0BAAuB;AAEpD,OAAO,MAAMC,YAAY,gBAAGF,aAAa,CAAQC,YAAY,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useMemo } from 'react';
|
|
4
|
+
import { ThemeContext } from "./ThemeContext.js";
|
|
5
|
+
import { createTheme } from "../theme/createTheme.js";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
export function SjUiProvider({
|
|
8
|
+
children,
|
|
9
|
+
theme: themeOverrides
|
|
10
|
+
}) {
|
|
11
|
+
const theme = useMemo(() => createTheme(themeOverrides), [themeOverrides]);
|
|
12
|
+
return /*#__PURE__*/_jsx(ThemeContext.Provider, {
|
|
13
|
+
value: theme,
|
|
14
|
+
children: children
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=UIProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useMemo","ThemeContext","createTheme","jsx","_jsx","SjUiProvider","children","theme","themeOverrides","Provider","value"],"sourceRoot":"../../../src","sources":["provider/UIProvider.tsx"],"mappings":";;AAAA,SAAiCA,OAAO,QAAQ,OAAO;AAEvD,SAASC,YAAY,QAAQ,mBAAgB;AAC7C,SAASC,WAAW,QAAQ,yBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQnD,OAAO,SAASC,YAAYA,CAAC;EAC3BC,QAAQ;EACRC,KAAK,EAAEC;AAC2B,CAAC,EAAE;EACrC,MAAMD,KAAK,GAAGP,OAAO,CAAC,MAAME,WAAW,CAACM,cAAc,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAE1E,oBACEJ,IAAA,CAACH,YAAY,CAACQ,QAAQ;IAACC,KAAK,EAAEH,KAAM;IAAAD,QAAA,EAAEA;EAAQ,CAAwB,CAAC;AAE3E","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["defaultTheme","deepMerge","createTheme","overrides"],"sourceRoot":"../../../src","sources":["theme/createTheme.ts"],"mappings":";;AAAA,SAASA,YAAY,QAAQ,mBAAgB;AAC7C,SAASC,SAAS,QAAQ,gBAAa;AAGvC,OAAO,SAASC,WAAWA,CAACC,SAA8B,EAAS;EACjE,OAAOF,SAAS,CAACD,YAAY,EAAEG,SAAS,CAAC;AAC3C","ignoreList":[]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function isObject(item) {
|
|
4
|
+
return item !== null && typeof item === 'object' && !Array.isArray(item);
|
|
5
|
+
}
|
|
6
|
+
export function deepMerge(target, source) {
|
|
7
|
+
if (!source) {
|
|
8
|
+
return target;
|
|
9
|
+
}
|
|
10
|
+
const output = {
|
|
11
|
+
...target
|
|
12
|
+
};
|
|
13
|
+
Object.keys(source).forEach(key => {
|
|
14
|
+
const sourceValue = source[key];
|
|
15
|
+
const targetValue = output[key];
|
|
16
|
+
if (sourceValue === undefined) {
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
if (isObject(targetValue) && isObject(sourceValue)) {
|
|
20
|
+
output[key] = deepMerge(targetValue, sourceValue);
|
|
21
|
+
} else {
|
|
22
|
+
output[key] = sourceValue;
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
return output;
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=deepMerge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["isObject","item","Array","isArray","deepMerge","target","source","output","Object","keys","forEach","key","sourceValue","targetValue","undefined"],"sourceRoot":"../../../src","sources":["theme/deepMerge.ts"],"mappings":";;AAEA,SAASA,QAAQA,CAACC,IAAa,EAAmC;EAChE,OAAOA,IAAI,KAAK,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,IAAI,CAACC,KAAK,CAACC,OAAO,CAACF,IAAI,CAAC;AAC1E;AAEA,OAAO,SAASG,SAASA,CAAIC,MAAS,EAAEC,MAAuB,EAAK;EAClE,IAAI,CAACA,MAAM,EAAE;IACX,OAAOD,MAAM;EACf;EAEA,MAAME,MAAM,GAAG;IAAE,GAAGF;EAAO,CAA4B;EAEvDG,MAAM,CAACC,IAAI,CAACH,MAAM,CAAC,CAACI,OAAO,CAAEC,GAAG,IAAK;IACnC,MAAMC,WAAW,GAAGN,MAAM,CAACK,GAAG,CAAwB;IACtD,MAAME,WAAW,GAAGN,MAAM,CAACI,GAAG,CAAC;IAE/B,IAAIC,WAAW,KAAKE,SAAS,EAAE;MAC7B;IACF;IAEA,IAAId,QAAQ,CAACa,WAAW,CAAC,IAAIb,QAAQ,CAACY,WAAW,CAAC,EAAE;MAClDL,MAAM,CAACI,GAAG,CAAC,GAAGP,SAAS,CAACS,WAAW,EAAED,WAAW,CAAC;IACnD,CAAC,MAAM;MACLL,MAAM,CAACI,GAAG,CAAC,GAAGC,WAAW;IAC3B;EACF,CAAC,CAAC;EAEF,OAAOL,MAAM;AACf","ignoreList":[]}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
export const defaultTheme = {
|
|
4
|
+
colors: {
|
|
5
|
+
primary: '#2563EB',
|
|
6
|
+
secondary: '#64748B',
|
|
7
|
+
danger: '#DC2626',
|
|
8
|
+
success: '#16A34A',
|
|
9
|
+
warning: '#D97706',
|
|
10
|
+
text: '#000000'
|
|
11
|
+
},
|
|
12
|
+
spacing: {
|
|
13
|
+
xs: 4,
|
|
14
|
+
sm: 8,
|
|
15
|
+
md: 12,
|
|
16
|
+
lg: 16,
|
|
17
|
+
xl: 24
|
|
18
|
+
},
|
|
19
|
+
radius: {
|
|
20
|
+
sm: 4,
|
|
21
|
+
md: 8,
|
|
22
|
+
lg: 12,
|
|
23
|
+
xl: 16
|
|
24
|
+
},
|
|
25
|
+
typography: {
|
|
26
|
+
fontFamily: 'System',
|
|
27
|
+
fontSize: {
|
|
28
|
+
xs: 12,
|
|
29
|
+
sm: 14,
|
|
30
|
+
md: 16,
|
|
31
|
+
lg: 18,
|
|
32
|
+
xl: 24,
|
|
33
|
+
h1: 32,
|
|
34
|
+
h2: 28,
|
|
35
|
+
h3: 24,
|
|
36
|
+
h4: 20,
|
|
37
|
+
body: 16,
|
|
38
|
+
bodySm: 14,
|
|
39
|
+
caption: 12
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
components: {
|
|
43
|
+
input: {
|
|
44
|
+
height: 48
|
|
45
|
+
},
|
|
46
|
+
button: {
|
|
47
|
+
height: 48
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
//# sourceMappingURL=defaultTheme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["defaultTheme","colors","primary","secondary","danger","success","warning","text","spacing","xs","sm","md","lg","xl","radius","typography","fontFamily","fontSize","h1","h2","h3","h4","body","bodySm","caption","components","input","height","button"],"sourceRoot":"../../../src","sources":["theme/defaultTheme.ts"],"mappings":";;AAEA,OAAO,MAAMA,YAAmB,GAAG;EACjCC,MAAM,EAAE;IACNC,OAAO,EAAE,SAAS;IAClBC,SAAS,EAAE,SAAS;IACpBC,MAAM,EAAE,SAAS;IACjBC,OAAO,EAAE,SAAS;IAClBC,OAAO,EAAE,SAAS;IAClBC,IAAI,EAAE;EACR,CAAC;EAEDC,OAAO,EAAE;IACPC,EAAE,EAAE,CAAC;IACLC,EAAE,EAAE,CAAC;IACLC,EAAE,EAAE,EAAE;IACNC,EAAE,EAAE,EAAE;IACNC,EAAE,EAAE;EACN,CAAC;EAEDC,MAAM,EAAE;IACNJ,EAAE,EAAE,CAAC;IACLC,EAAE,EAAE,CAAC;IACLC,EAAE,EAAE,EAAE;IACNC,EAAE,EAAE;EACN,CAAC;EAEDE,UAAU,EAAE;IACVC,UAAU,EAAE,QAAQ;IACpBC,QAAQ,EAAE;MACRR,EAAE,EAAE,EAAE;MACNC,EAAE,EAAE,EAAE;MACNC,EAAE,EAAE,EAAE;MACNC,EAAE,EAAE,EAAE;MACNC,EAAE,EAAE,EAAE;MACNK,EAAE,EAAE,EAAE;MACNC,EAAE,EAAE,EAAE;MACNC,EAAE,EAAE,EAAE;MACNC,EAAE,EAAE,EAAE;MACNC,IAAI,EAAE,EAAE;MACRC,MAAM,EAAE,EAAE;MACVC,OAAO,EAAE;IACX;EACF,CAAC;EAEDC,UAAU,EAAE;IACVC,KAAK,EAAE;MACLC,MAAM,EAAE;IACV,CAAC;IAEDC,MAAM,EAAE;MACND,MAAM,EAAE;IACV;EACF;AACF,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sourceRoot":"../../../src","sources":["theme/types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"type":"module"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { TextProps, TextStyle, StyleProp } from 'react-native';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
import type { TextSize, ThemeColor } from '../theme/types.js';
|
|
4
|
+
interface TextViewProps extends TextProps {
|
|
5
|
+
size?: TextSize;
|
|
6
|
+
fontSize?: TextStyle['fontSize'];
|
|
7
|
+
color?: ThemeColor;
|
|
8
|
+
textColor?: TextStyle['color'];
|
|
9
|
+
fontWeight?: TextStyle['fontWeight'];
|
|
10
|
+
textAlign?: TextStyle['textAlign'];
|
|
11
|
+
textDecorationLine?: TextStyle['textDecorationLine'];
|
|
12
|
+
style?: StyleProp<TextStyle>;
|
|
13
|
+
children: ReactNode;
|
|
14
|
+
}
|
|
15
|
+
declare const TextView: React.FC<TextViewProps>;
|
|
16
|
+
export default TextView;
|
|
17
|
+
//# sourceMappingURL=TextView.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextView.d.ts","sourceRoot":"","sources":["../../../../src/components/TextView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,mBAAgB,CAAC;AAE3D,UAAU,aAAc,SAAQ,SAAS;IACvC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAEjC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAE/B,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACnC,kBAAkB,CAAC,EAAE,SAAS,CAAC,oBAAoB,CAAC,CAAC;IACrD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmCrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ViewCard.d.ts","sourceRoot":"","sources":["../../../../src/components/ViewCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,UAAU,aAAc,SAAQ,SAAS;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAMrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,yCAEpB,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { SjUiProvider } from './provider/UIProvider.js';
|
|
2
|
+
import TextView from './components/TextView.js';
|
|
3
|
+
import ViewCard from './components/ViewCard.js';
|
|
4
|
+
export { TextView };
|
|
5
|
+
export { SjUiProvider };
|
|
6
|
+
export { ViewCard };
|
|
7
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAAuB,CAAC;AACrD,OAAO,QAAQ,MAAM,0BAAuB,CAAC;AAC7C,OAAO,QAAQ,MAAM,0BAAuB,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,OAAO,EAAE,YAAY,EAAE,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../../../src/provider/ThemeContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAgB,CAAC;AAG5C,eAAO,MAAM,YAAY,gCAAqC,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { type PropsWithChildren } from 'react';
|
|
2
|
+
import type { Theme } from '../theme/types.js';
|
|
3
|
+
import type { DeepPartial } from '../theme/types.js';
|
|
4
|
+
interface UIProviderProps {
|
|
5
|
+
theme?: DeepPartial<Theme>;
|
|
6
|
+
}
|
|
7
|
+
export declare function SjUiProvider({ children, theme: themeOverrides, }: PropsWithChildren<UIProviderProps>): import("react").JSX.Element;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=UIProvider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"UIProvider.d.ts","sourceRoot":"","sources":["../../../../src/provider/UIProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAIxD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAgB,CAAC;AAC5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAgB,CAAC;AAElD,UAAU,eAAe;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;CAC5B;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EAAE,cAAc,GACtB,EAAE,iBAAiB,CAAC,eAAe,CAAC,+BAMpC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createTheme.d.ts","sourceRoot":"","sources":["../../../../src/theme/createTheme.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,YAAS,CAAC;AAElD,wBAAgB,WAAW,CAAC,SAAS,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,KAAK,CAEjE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"deepMerge.d.ts","sourceRoot":"","sources":["../../../../src/theme/deepMerge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAS,CAAC;AAM3C,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAuBlE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAS,CAAC;AAErC,eAAO,MAAM,YAAY,EAAE,KAoD1B,CAAC"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
export interface Colors {
|
|
2
|
+
primary: string;
|
|
3
|
+
secondary: string;
|
|
4
|
+
danger: string;
|
|
5
|
+
success: string;
|
|
6
|
+
warning: string;
|
|
7
|
+
text: string;
|
|
8
|
+
}
|
|
9
|
+
export type ThemeColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'text';
|
|
10
|
+
export interface Spacing {
|
|
11
|
+
xs: number;
|
|
12
|
+
sm: number;
|
|
13
|
+
md: number;
|
|
14
|
+
lg: number;
|
|
15
|
+
xl: number;
|
|
16
|
+
}
|
|
17
|
+
export interface Radius {
|
|
18
|
+
sm: number;
|
|
19
|
+
md: number;
|
|
20
|
+
lg: number;
|
|
21
|
+
xl: number;
|
|
22
|
+
}
|
|
23
|
+
export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'bodySm' | 'caption';
|
|
24
|
+
export interface Typography {
|
|
25
|
+
fontFamily: string;
|
|
26
|
+
fontSize: {
|
|
27
|
+
xs: number;
|
|
28
|
+
sm: number;
|
|
29
|
+
md: number;
|
|
30
|
+
lg: number;
|
|
31
|
+
xl: number;
|
|
32
|
+
h1: number;
|
|
33
|
+
h2: number;
|
|
34
|
+
h3: number;
|
|
35
|
+
h4: number;
|
|
36
|
+
body: number;
|
|
37
|
+
bodySm: number;
|
|
38
|
+
caption: number;
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
export interface ComponentTheme {
|
|
42
|
+
input: {
|
|
43
|
+
height: number;
|
|
44
|
+
};
|
|
45
|
+
button: {
|
|
46
|
+
height: number;
|
|
47
|
+
};
|
|
48
|
+
}
|
|
49
|
+
export interface Theme {
|
|
50
|
+
colors: Colors;
|
|
51
|
+
spacing: Spacing;
|
|
52
|
+
radius: Radius;
|
|
53
|
+
typography: Typography;
|
|
54
|
+
components: ComponentTheme;
|
|
55
|
+
}
|
|
56
|
+
export type DeepPartial<T> = {
|
|
57
|
+
[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
|
|
58
|
+
};
|
|
59
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/theme/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,WAAW,GACX,SAAS,GACT,QAAQ,GACR,SAAS,GACT,MAAM,CAAC;AAEX,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,MAAM,QAAQ,GAChB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,MAAM,GACN,QAAQ,GACR,SAAS,CAAC;AAEd,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE;QACR,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE;QACL,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IAEF,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,MAAM,WAAW,KAAK;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,cAAc,CAAC;CAC5B;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAChE,CAAC"}
|
package/package.json
ADDED
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "react-native-sj-ui",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "The ui library for react native application.",
|
|
5
|
+
"main": "./lib/module/index.js",
|
|
6
|
+
"types": "./lib/typescript/src/index.d.ts",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"react-native-sj-ui-source": "./src/index.tsx",
|
|
10
|
+
"types": "./lib/typescript/src/index.d.ts",
|
|
11
|
+
"default": "./lib/module/index.js"
|
|
12
|
+
},
|
|
13
|
+
"./package.json": "./package.json"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"src",
|
|
17
|
+
"lib",
|
|
18
|
+
"!ios/build",
|
|
19
|
+
"!android/build",
|
|
20
|
+
"!android/gradle",
|
|
21
|
+
"!android/gradlew",
|
|
22
|
+
"!android/gradlew.bat",
|
|
23
|
+
"!android/local.properties",
|
|
24
|
+
"!**/__tests__",
|
|
25
|
+
"!**/__fixtures__",
|
|
26
|
+
"!**/__mocks__",
|
|
27
|
+
"!**/.*"
|
|
28
|
+
],
|
|
29
|
+
"scripts": {
|
|
30
|
+
"example": "yarn workspace react-native-sj-ui-example",
|
|
31
|
+
"clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
|
|
32
|
+
"prepare": "bob build",
|
|
33
|
+
"typecheck": "tsc",
|
|
34
|
+
"lint": "eslint \"**/*.{js,ts,tsx}\"",
|
|
35
|
+
"test": "jest",
|
|
36
|
+
"release": "release-it --only-version",
|
|
37
|
+
"web": "vite",
|
|
38
|
+
"build:web": "vite build"
|
|
39
|
+
},
|
|
40
|
+
"keywords": [
|
|
41
|
+
"react-native",
|
|
42
|
+
"ui",
|
|
43
|
+
"design-system",
|
|
44
|
+
"theme",
|
|
45
|
+
"components",
|
|
46
|
+
"typescript",
|
|
47
|
+
"react-native-ui"
|
|
48
|
+
],
|
|
49
|
+
"repository": {
|
|
50
|
+
"type": "git",
|
|
51
|
+
"url": "git+https://github.com/sarowerj/react-native-sj-ui.git"
|
|
52
|
+
},
|
|
53
|
+
"author": "@sarowerj <sarowerj@gmail.com> (https://github.com/sarowerj)",
|
|
54
|
+
"license": "MIT",
|
|
55
|
+
"bugs": {
|
|
56
|
+
"url": "https://github.com/sarowerj/react-native-sj-ui/issues"
|
|
57
|
+
},
|
|
58
|
+
"homepage": "https://github.com/sarowerj/react-native-sj-ui#readme",
|
|
59
|
+
"publishConfig": {
|
|
60
|
+
"registry": "https://registry.npmjs.org/"
|
|
61
|
+
},
|
|
62
|
+
"devDependencies": {
|
|
63
|
+
"@commitlint/config-conventional": "^21.0.2",
|
|
64
|
+
"@eslint/compat": "^2.1.0",
|
|
65
|
+
"@eslint/eslintrc": "^3.3.5",
|
|
66
|
+
"@eslint/js": "^10.0.1",
|
|
67
|
+
"@jest/globals": "^29.7.0",
|
|
68
|
+
"@react-native/babel-preset": "0.85.0",
|
|
69
|
+
"@react-native/eslint-config": "0.85.0",
|
|
70
|
+
"@react-native/jest-preset": "0.85.0",
|
|
71
|
+
"@release-it/conventional-changelog": "^11.0.1",
|
|
72
|
+
"@types/react": "^19.2.0",
|
|
73
|
+
"commitlint": "^21.0.2",
|
|
74
|
+
"del-cli": "^7.0.0",
|
|
75
|
+
"eslint": "^9.39.4",
|
|
76
|
+
"eslint-config-prettier": "^10.1.8",
|
|
77
|
+
"eslint-plugin-ft-flow": "^3.0.11",
|
|
78
|
+
"eslint-plugin-prettier": "^5.5.6",
|
|
79
|
+
"jest": "^29.7.0",
|
|
80
|
+
"lefthook": "^2.1.9",
|
|
81
|
+
"prettier": "^3.8.3",
|
|
82
|
+
"react": "19.2.3",
|
|
83
|
+
"react-native": "0.85.0",
|
|
84
|
+
"react-native-builder-bob": "^0.43.0",
|
|
85
|
+
"react-native-web": "~0.21.2",
|
|
86
|
+
"release-it": "^20.2.0",
|
|
87
|
+
"turbo": "^2.9.16",
|
|
88
|
+
"typescript": "^6.0.3"
|
|
89
|
+
},
|
|
90
|
+
"peerDependencies": {
|
|
91
|
+
"react": "*",
|
|
92
|
+
"react-native": "*"
|
|
93
|
+
},
|
|
94
|
+
"workspaces": [
|
|
95
|
+
"example"
|
|
96
|
+
],
|
|
97
|
+
"packageManager": "yarn@4.11.0",
|
|
98
|
+
"react-native-builder-bob": {
|
|
99
|
+
"source": "src",
|
|
100
|
+
"output": "lib",
|
|
101
|
+
"targets": [
|
|
102
|
+
[
|
|
103
|
+
"module",
|
|
104
|
+
{
|
|
105
|
+
"esm": true
|
|
106
|
+
}
|
|
107
|
+
],
|
|
108
|
+
[
|
|
109
|
+
"typescript",
|
|
110
|
+
{
|
|
111
|
+
"project": "tsconfig.build.json"
|
|
112
|
+
}
|
|
113
|
+
]
|
|
114
|
+
]
|
|
115
|
+
},
|
|
116
|
+
"prettier": {
|
|
117
|
+
"quoteProps": "consistent",
|
|
118
|
+
"singleQuote": true,
|
|
119
|
+
"tabWidth": 2,
|
|
120
|
+
"trailingComma": "es5",
|
|
121
|
+
"useTabs": false
|
|
122
|
+
},
|
|
123
|
+
"jest": {
|
|
124
|
+
"preset": "@react-native/jest-preset",
|
|
125
|
+
"testEnvironmentOptions": {
|
|
126
|
+
"customExportConditions": [
|
|
127
|
+
"require",
|
|
128
|
+
"react-native",
|
|
129
|
+
"<%- project.sourceCondition -%>"
|
|
130
|
+
]
|
|
131
|
+
},
|
|
132
|
+
"modulePathIgnorePatterns": [
|
|
133
|
+
"<rootDir>/example/node_modules",
|
|
134
|
+
"<rootDir>/lib/"
|
|
135
|
+
]
|
|
136
|
+
},
|
|
137
|
+
"commitlint": {
|
|
138
|
+
"extends": [
|
|
139
|
+
"@commitlint/config-conventional"
|
|
140
|
+
]
|
|
141
|
+
},
|
|
142
|
+
"release-it": {
|
|
143
|
+
"git": {
|
|
144
|
+
"commitMessage": "chore: release ${version}",
|
|
145
|
+
"tagName": "v${version}"
|
|
146
|
+
},
|
|
147
|
+
"npm": {
|
|
148
|
+
"publish": true
|
|
149
|
+
},
|
|
150
|
+
"github": {
|
|
151
|
+
"release": true
|
|
152
|
+
},
|
|
153
|
+
"plugins": {
|
|
154
|
+
"@release-it/conventional-changelog": {
|
|
155
|
+
"preset": {
|
|
156
|
+
"name": "angular"
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
"create-react-native-library": {
|
|
162
|
+
"type": "library",
|
|
163
|
+
"languages": "js",
|
|
164
|
+
"tools": [
|
|
165
|
+
"eslint",
|
|
166
|
+
"jest",
|
|
167
|
+
"lefthook",
|
|
168
|
+
"release-it",
|
|
169
|
+
"vite"
|
|
170
|
+
],
|
|
171
|
+
"version": "0.63.0"
|
|
172
|
+
}
|
|
173
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import type { TextProps, TextStyle, StyleProp } from 'react-native';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
import { Text } from 'react-native';
|
|
4
|
+
import { useTheme } from '../hooks/useTheme';
|
|
5
|
+
import type { TextSize, ThemeColor } from '../theme/types';
|
|
6
|
+
|
|
7
|
+
interface TextViewProps extends TextProps {
|
|
8
|
+
size?: TextSize;
|
|
9
|
+
fontSize?: TextStyle['fontSize'];
|
|
10
|
+
|
|
11
|
+
color?: ThemeColor;
|
|
12
|
+
textColor?: TextStyle['color'];
|
|
13
|
+
|
|
14
|
+
fontWeight?: TextStyle['fontWeight'];
|
|
15
|
+
textAlign?: TextStyle['textAlign'];
|
|
16
|
+
textDecorationLine?: TextStyle['textDecorationLine'];
|
|
17
|
+
style?: StyleProp<TextStyle>;
|
|
18
|
+
children: ReactNode;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const TextView: React.FC<TextViewProps> = ({
|
|
22
|
+
size = 'body',
|
|
23
|
+
fontSize,
|
|
24
|
+
color,
|
|
25
|
+
textColor,
|
|
26
|
+
fontWeight,
|
|
27
|
+
textAlign,
|
|
28
|
+
textDecorationLine,
|
|
29
|
+
children,
|
|
30
|
+
style,
|
|
31
|
+
...rest
|
|
32
|
+
}) => {
|
|
33
|
+
const theme = useTheme();
|
|
34
|
+
|
|
35
|
+
const resolvedFontSize = fontSize ?? theme.typography.fontSize[size];
|
|
36
|
+
|
|
37
|
+
const resolvedColor =
|
|
38
|
+
textColor ?? (color ? theme.colors[color] : theme.colors.text);
|
|
39
|
+
return (
|
|
40
|
+
<Text
|
|
41
|
+
style={[
|
|
42
|
+
{
|
|
43
|
+
color: resolvedColor,
|
|
44
|
+
fontSize: resolvedFontSize,
|
|
45
|
+
fontWeight,
|
|
46
|
+
textAlign,
|
|
47
|
+
textDecorationLine,
|
|
48
|
+
},
|
|
49
|
+
style,
|
|
50
|
+
]}
|
|
51
|
+
{...rest}
|
|
52
|
+
>
|
|
53
|
+
{children}
|
|
54
|
+
</Text>
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export default TextView;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { View, type ViewStyle } from 'react-native';
|
|
2
|
+
|
|
3
|
+
interface ViewCardProps extends ViewStyle {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
style?: ViewStyle;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
const ViewCard: React.FC<ViewCardProps> = ({ children, style, ...rest }) => {
|
|
9
|
+
return (
|
|
10
|
+
<View {...rest} style={style}>
|
|
11
|
+
{children}
|
|
12
|
+
</View>
|
|
13
|
+
);
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
export default ViewCard;
|
package/src/index.tsx
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { type PropsWithChildren, useMemo } from 'react';
|
|
2
|
+
|
|
3
|
+
import { ThemeContext } from './ThemeContext';
|
|
4
|
+
import { createTheme } from '../theme/createTheme';
|
|
5
|
+
import type { Theme } from '../theme/types';
|
|
6
|
+
import type { DeepPartial } from '../theme/types';
|
|
7
|
+
|
|
8
|
+
interface UIProviderProps {
|
|
9
|
+
theme?: DeepPartial<Theme>;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export function SjUiProvider({
|
|
13
|
+
children,
|
|
14
|
+
theme: themeOverrides,
|
|
15
|
+
}: PropsWithChildren<UIProviderProps>) {
|
|
16
|
+
const theme = useMemo(() => createTheme(themeOverrides), [themeOverrides]);
|
|
17
|
+
|
|
18
|
+
return (
|
|
19
|
+
<ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
|
|
20
|
+
);
|
|
21
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { DeepPartial } from './types';
|
|
2
|
+
|
|
3
|
+
function isObject(item: unknown): item is Record<string, unknown> {
|
|
4
|
+
return item !== null && typeof item === 'object' && !Array.isArray(item);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
export function deepMerge<T>(target: T, source?: DeepPartial<T>): T {
|
|
8
|
+
if (!source) {
|
|
9
|
+
return target;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const output = { ...target } as Record<string, unknown>;
|
|
13
|
+
|
|
14
|
+
Object.keys(source).forEach((key) => {
|
|
15
|
+
const sourceValue = source[key as keyof typeof source];
|
|
16
|
+
const targetValue = output[key];
|
|
17
|
+
|
|
18
|
+
if (sourceValue === undefined) {
|
|
19
|
+
return;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
if (isObject(targetValue) && isObject(sourceValue)) {
|
|
23
|
+
output[key] = deepMerge(targetValue, sourceValue);
|
|
24
|
+
} else {
|
|
25
|
+
output[key] = sourceValue;
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
return output as T;
|
|
30
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import type { Theme } from './types';
|
|
2
|
+
|
|
3
|
+
export const defaultTheme: Theme = {
|
|
4
|
+
colors: {
|
|
5
|
+
primary: '#2563EB',
|
|
6
|
+
secondary: '#64748B',
|
|
7
|
+
danger: '#DC2626',
|
|
8
|
+
success: '#16A34A',
|
|
9
|
+
warning: '#D97706',
|
|
10
|
+
text: '#000000',
|
|
11
|
+
},
|
|
12
|
+
|
|
13
|
+
spacing: {
|
|
14
|
+
xs: 4,
|
|
15
|
+
sm: 8,
|
|
16
|
+
md: 12,
|
|
17
|
+
lg: 16,
|
|
18
|
+
xl: 24,
|
|
19
|
+
},
|
|
20
|
+
|
|
21
|
+
radius: {
|
|
22
|
+
sm: 4,
|
|
23
|
+
md: 8,
|
|
24
|
+
lg: 12,
|
|
25
|
+
xl: 16,
|
|
26
|
+
},
|
|
27
|
+
|
|
28
|
+
typography: {
|
|
29
|
+
fontFamily: 'System',
|
|
30
|
+
fontSize: {
|
|
31
|
+
xs: 12,
|
|
32
|
+
sm: 14,
|
|
33
|
+
md: 16,
|
|
34
|
+
lg: 18,
|
|
35
|
+
xl: 24,
|
|
36
|
+
h1: 32,
|
|
37
|
+
h2: 28,
|
|
38
|
+
h3: 24,
|
|
39
|
+
h4: 20,
|
|
40
|
+
body: 16,
|
|
41
|
+
bodySm: 14,
|
|
42
|
+
caption: 12,
|
|
43
|
+
},
|
|
44
|
+
},
|
|
45
|
+
|
|
46
|
+
components: {
|
|
47
|
+
input: {
|
|
48
|
+
height: 48,
|
|
49
|
+
},
|
|
50
|
+
|
|
51
|
+
button: {
|
|
52
|
+
height: 48,
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
};
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
export interface Colors {
|
|
2
|
+
primary: string;
|
|
3
|
+
secondary: string;
|
|
4
|
+
danger: string;
|
|
5
|
+
success: string;
|
|
6
|
+
warning: string;
|
|
7
|
+
text: string;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export type ThemeColor =
|
|
11
|
+
| 'primary'
|
|
12
|
+
| 'secondary'
|
|
13
|
+
| 'success'
|
|
14
|
+
| 'danger'
|
|
15
|
+
| 'warning'
|
|
16
|
+
| 'text';
|
|
17
|
+
|
|
18
|
+
export interface Spacing {
|
|
19
|
+
xs: number;
|
|
20
|
+
sm: number;
|
|
21
|
+
md: number;
|
|
22
|
+
lg: number;
|
|
23
|
+
xl: number;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export interface Radius {
|
|
27
|
+
sm: number;
|
|
28
|
+
md: number;
|
|
29
|
+
lg: number;
|
|
30
|
+
xl: number;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export type TextSize =
|
|
34
|
+
| 'xs'
|
|
35
|
+
| 'sm'
|
|
36
|
+
| 'md'
|
|
37
|
+
| 'lg'
|
|
38
|
+
| 'xl'
|
|
39
|
+
| 'h1'
|
|
40
|
+
| 'h2'
|
|
41
|
+
| 'h3'
|
|
42
|
+
| 'h4'
|
|
43
|
+
| 'body'
|
|
44
|
+
| 'bodySm'
|
|
45
|
+
| 'caption';
|
|
46
|
+
|
|
47
|
+
export interface Typography {
|
|
48
|
+
fontFamily: string;
|
|
49
|
+
fontSize: {
|
|
50
|
+
xs: number;
|
|
51
|
+
sm: number;
|
|
52
|
+
md: number;
|
|
53
|
+
lg: number;
|
|
54
|
+
xl: number;
|
|
55
|
+
h1: number;
|
|
56
|
+
h2: number;
|
|
57
|
+
h3: number;
|
|
58
|
+
h4: number;
|
|
59
|
+
body: number;
|
|
60
|
+
bodySm: number;
|
|
61
|
+
caption: number;
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
export interface ComponentTheme {
|
|
66
|
+
input: {
|
|
67
|
+
height: number;
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
button: {
|
|
71
|
+
height: number;
|
|
72
|
+
};
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export interface Theme {
|
|
76
|
+
colors: Colors;
|
|
77
|
+
spacing: Spacing;
|
|
78
|
+
radius: Radius;
|
|
79
|
+
typography: Typography;
|
|
80
|
+
components: ComponentTheme;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
export type DeepPartial<T> = {
|
|
84
|
+
[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
|
|
85
|
+
};
|