cpk-ui 0.1.0 → 0.1.2
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/README.md +150 -11
- package/components/uis/Styled/StyledComponents.tsx +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,25 +2,164 @@
|
|
|
2
2
|
|
|
3
3
|
React Native UI components for [Expo](https://expo.dev).
|
|
4
4
|
|
|
5
|
-
[](https://npmjs.org/package/cpk-ui)
|
|
6
|
+
[](https://npmjs.org/package/cpk-ui)
|
|
7
|
+
[](https://github.com/crossplatformkorea/cpk-ui/actions/workflows/ci.yml)
|
|
8
8
|
[](https://codecov.io/gh/crossplatformkorea/cpk-ui)
|
|
9
|
-
[](https://github.com/crossplatformkorea/cpk-ui/actions/workflows/publish.yml)
|
|
10
10
|
[](https://opencollective.com/crossplatformkorea/tiers/badge.svg)
|
|
11
11
|
|
|
12
|
-
<img src="https://
|
|
12
|
+
<img src="https://github.com/user-attachments/assets/c31ac1c2-cc0e-4f13-a542-c35045c266cd" width="320"/>
|
|
13
13
|
|
|
14
|
-
##
|
|
14
|
+
## Demo
|
|
15
15
|
|
|
16
16
|
Check out [ui.crossplatformkorea.com](https://ui.crossplatformkorea.com)
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
## Introduction
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
`cpk-ui` is a foundational design system and UI components library managed by Cross-Platform Korea. It is built using our preferred technologies, including [emotion](https://emotion.sh/docs/@emotion/native), [typescript](https://www.typescriptlang.org/), [jest](https://jestjs.io), [react-native-testing-library](https://github.com/callstack/react-native-testing-library), [expo](https://expo.io), and [storybook](https://storybook.js.org).
|
|
21
|
+
|
|
22
|
+
### Philosophy
|
|
23
|
+
|
|
24
|
+
`cpk-ui` aims to provide user-friendly, lightweight, and adaptable UI components. It emphasizes customizable `theme` variations and a responsive layout to enhance developer experience.
|
|
25
|
+
|
|
26
|
+
### Installation
|
|
27
|
+
|
|
28
|
+
#### For Expo
|
|
29
|
+
|
|
30
|
+
```sh
|
|
31
|
+
expo install cpk-ui @emotion/react @emotion/native @expo/vector-icons react-native-gesture-handler react-native-svg expo-screen-orientation @expo/match-media
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
#### For React Native CLI
|
|
35
|
+
|
|
36
|
+
```sh
|
|
37
|
+
# Using yarn
|
|
38
|
+
yarn add cpk-ui @emotion/react @emotion/native @expo/vector-icons react-native-gesture-handler react-native-svg expo-screen-orientation @expo/match-media
|
|
39
|
+
|
|
40
|
+
# Install expo modules
|
|
41
|
+
npx install-expo-modules@latest
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### Usage
|
|
45
|
+
|
|
46
|
+
We focus on supporting `iOS`, `Android`, and `web` platforms, enabling [expo](https://expo.io) users to write efficient and reliable cross-platform code. For more insights into the project’s direction, refer to the [cpk-ui strategy](https://github.com/hyochan/cpk-ui/issues).
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
import {CpkProvider} from 'cpk-ui';
|
|
50
|
+
|
|
51
|
+
<CpkProvider>
|
|
52
|
+
<App />
|
|
53
|
+
</CpkProvider>;
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Theming
|
|
57
|
+
|
|
58
|
+
> The embedded `theme` module functionality provides the ability to create `light` and `dark` themes.
|
|
59
|
+
|
|
60
|
+
### Customizing Theme
|
|
61
|
+
|
|
62
|
+
#### 1. Define colors for `light` and `dark` theme
|
|
63
|
+
|
|
64
|
+
The `light` and `dark` theme color definitions are provided as examples above. They are objects that contain color properties for different UI components and states.
|
|
65
|
+
|
|
66
|
+
#### 2. Integrating with `CpkProvider`
|
|
67
|
+
|
|
68
|
+
When integrating with `CpkProvider`, you will provide your defined light and dark themes as the custom theme:
|
|
69
|
+
|
|
70
|
+
```tsx
|
|
71
|
+
<CpkProvider customTheme={{light, dark}}>
|
|
72
|
+
<App />
|
|
73
|
+
</CpkProvider>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Fonts
|
|
77
|
+
|
|
78
|
+
`cpk-ui` uses [Pretendard](https://github.com/orioncactus/pretendard) as its default font. The fonts are automatically installed with `cpk-ui`, but you must confirm they are loaded using `assetLoaded` from `useCPK`.
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
import {useCPK} from 'cpk-ui';
|
|
82
|
+
|
|
83
|
+
const {assetLoaded} = useCPK();
|
|
84
|
+
|
|
85
|
+
if (!assetLoaded) {
|
|
86
|
+
return <Loading />;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
return <Main />;
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### Icons
|
|
93
|
+
|
|
94
|
+
Integrate [Phosphoricons](https://phosphoricons.com) easily using the `Icon` component.
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
97
|
+
import {Icon} from 'cpk-ui';
|
|
98
|
+
|
|
99
|
+
<Icon name="..." color="#AAA" size={32} />;
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### Installing Fonts (Recommended)
|
|
103
|
+
|
|
104
|
+
`cpk-ui` uses [Pretendard](https://github.com/orioncactus/pretendard) as its default font. The font families include `Pretendard`, `Pretendard-Bold`, and `Pretendard-Thin`. From version `0.2.1`, these fonts are automatically installed when you add `cpk-ui`. However, it is important to ensure that the fonts are loaded properly using `assetLoaded` from the `CpkProvider`.
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
import {useCPK} from 'cpk-ui';
|
|
108
|
+
|
|
109
|
+
const {assetLoaded} = useCPK();
|
|
110
|
+
|
|
111
|
+
if (!assetLoaded) {
|
|
112
|
+
// Render loading state
|
|
113
|
+
return ...;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
return <Main/>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### Compatibility
|
|
120
|
+
|
|
121
|
+
| Package | Version |
|
|
122
|
+
| :----------------: | :------: |
|
|
123
|
+
| react | >=16.13 |
|
|
124
|
+
| react-native | >=0.58 |
|
|
125
|
+
| emotion | >=11.0.0 |
|
|
126
|
+
| emotion/react | >=11.0.0 |
|
|
127
|
+
| emotion/native | >=11.0.0 |
|
|
128
|
+
| @expo/vector-icons | \* |
|
|
129
|
+
|
|
130
|
+
### Troubleshooting
|
|
131
|
+
|
|
132
|
+
#### Resolving Issues with "cpk-ui" on Expo Web
|
|
133
|
+
|
|
134
|
+
If you encounter errors when using "cpk-ui" with expo-web, follow these steps to configure webpack:
|
|
135
|
+
|
|
136
|
+
1. **Install `@expo/webpack-config`**
|
|
137
|
+
|
|
138
|
+
```sh
|
|
139
|
+
yarn add @expo/webpack-config
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
2. **Configure Webpack**
|
|
143
|
+
|
|
144
|
+
Create a `webpack.config.js` file in your project root and add the following configuration:
|
|
145
|
+
|
|
146
|
+
```javascript
|
|
147
|
+
const createExpoWebpackConfigAsync = require('@expo/webpack-config');
|
|
21
148
|
|
|
22
|
-
|
|
149
|
+
module.exports = async function (env, argv) {
|
|
150
|
+
const config = await createExpoWebpackConfigAsync(
|
|
151
|
+
{
|
|
152
|
+
...env,
|
|
153
|
+
babel: {
|
|
154
|
+
dangerouslyAddModulePathsToTranspile: ['cpk-ui'],
|
|
155
|
+
},
|
|
156
|
+
},
|
|
157
|
+
argv,
|
|
158
|
+
);
|
|
159
|
+
return config;
|
|
160
|
+
};
|
|
161
|
+
```
|
|
23
162
|
|
|
24
|
-
|
|
163
|
+
### Contributing
|
|
25
164
|
|
|
26
|
-
|
|
165
|
+
Read the [Contributing Guide](./CONTRIBUTING.md) before submitting pull requests. Thank you to everyone contributing to this project!
|