etendo-ui-library 1.2.65 → 1.2.66

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.
Files changed (2) hide show
  1. package/README.md +35 -173
  2. package/package.json +16 -7
package/README.md CHANGED
@@ -1,196 +1,58 @@
1
- #
1
+ # Etendo UI Installation Guide
2
2
 
3
- # etendo-ui-library
3
+ ## How to Install Etendo UI
4
4
 
5
- ![Etendo Logo](https://etendo.software/wp-content/uploads/2021/04/etendo-logo-footer-min-1.png 'Etendo Logo')
5
+ To get started with Etendo UI, follow these steps to install the library and its required dependencies.
6
6
 
7
- ### This library provides you with a set of React and React Native UI components to fast-track your application development process.
7
+ ### How To Install Components
8
8
 
9
- #
9
+ #### 🚀 Step 1: Install Etendo UI library using Yarn
10
10
 
11
- # Installation
11
+ Install the Etendo UI library by running the following command:
12
12
 
13
- The etendo-ui-library can be installed using either npm or yarn.
14
-
15
- ## Npm:
16
-
17
- ```
18
- npm install etendo-ui-library
19
- ```
20
-
21
- ## Yarn:
22
-
23
- ```
13
+ ```bash
24
14
  yarn add etendo-ui-library
25
15
  ```
26
16
 
27
- #
17
+ #### 📦 Step 2: Installation for Mobile or Web
28
18
 
29
- # Android Project Setup
19
+ - **For a Mobile installation**, install these dependencies using Yarn:
30
20
 
31
- ### To create a new Android project:
21
+ ```bash
22
+ yarn add react-native-web react-native-svg react-native-svg-transformer react-native-svg-web react-dom
23
+ ```
32
24
 
33
- ```
34
- npx react-native init appName --version 0.68.1
35
- ```
25
+ - **For a Web installation**, use the following command:
36
26
 
37
- After initializing the Android project, modify your metro.config.js file to include the following configuration:
38
-
39
- ```javascript
40
- const {getDefaultConfig} = require('metro-config');
41
-
42
- module.exports = (async () => {
43
- const {
44
- resolver: {sourceExts, assetExts},
45
- } = await getDefaultConfig();
46
- return {
47
- transformer: {
48
- getTransformOptions: async () => ({
49
- transform: {
50
- experimentalImportSupport: false,
51
- inlineRequires: true,
52
- },
53
- }),
54
- babelTransformerPath: require.resolve('react-native-svg-transformer'),
55
- },
56
- resolver: {
57
- assetExts: assetExts.filter(ext => ext !== 'svg'),
58
- sourceExts: [...sourceExts, 'svg'],
59
- },
60
- };
61
- })();
62
- ```
27
+ ```bash
28
+ yarn add react-native react-native-web react-native-svg react-native-svg-transformer react-native-svg-web
29
+ ```
63
30
 
64
- ### Finally, install the following dependencies:
31
+ ### After Installation
65
32
 
66
- ```
67
- yarn add react-native-svg && yarn add react-native-svg-transformer
68
- ```
69
-
70
- ## Usage
71
-
72
- To use a component from the etendo-ui-library, import it and use it in your JSX code. Below is an example of how to use the Input component.
73
-
74
- ```javascript
75
- //import
76
- import Input from 'etendo-ui-library/components/input/Input';
77
-
78
- export default function Home() {
79
- return (
80
- //usage
81
- <Input
82
- titleLabel="ReadOnly"
83
- helperText="Start Date"
84
- placeholder="Write a text"
85
- disabled={false}
86
- value="27/04/2022"
87
- typeField="readOnly"
88
- isError={true}
89
- keyboardType="text"
90
- />
91
- );
92
- }
93
- ```
33
+ Once you have completed these steps, you are ready to start using Etendo UI components in your project!
94
34
 
95
- **Remember to replace the attribute values with your desired ones!**
96
-
97
- And that's it! You are now ready to use the etendo-ui-library in your React Native or React Web application. Please refer to the detailed documentation on Storybook and NPM for more examples and use cases.
98
-
99
- #
100
-
101
- # Web Project Setup (React Web)
102
-
103
- To create a new Next.js project:
104
-
105
- `npx create-next-app`
106
-
107
- After initializing the Next.js project, modify your next.config.js file to include the following configuration:
108
-
109
- ```javascript
110
- const path = require('path');
111
- const withTM = require('next-transpile-modules')(['etendo-ui-library']);
112
-
113
- module.exports = withTM({
114
- webpack: (config, {defaultLoaders}) => {
115
- config.resolve.alias = {
116
- ...(config.resolve.alias || {}),
117
- 'react-native$': 'react-native-web',
118
- 'react-native-svg$': 'react-native-svg-web',
119
- };
120
-
121
- config.module.rules.push({
122
- test: /\.tsx?$/,
123
- use: [
124
- defaultLoaders.babel,
125
- {
126
- loader: 'ts-loader',
127
- options: {
128
- transpileOnly: true,
129
- experimentalWatchApi: true,
130
- },
131
- },
132
- ],
133
- });
134
-
135
- config.module.rules.push({
136
- test: /\.css$/,
137
- use: [
138
- defaultLoaders.babel,
139
- {
140
- loader: 'etendo-ui-library/dist/webpack/css-loader.js',
141
- options: {
142
- importLoaders: 1,
143
- modules: {
144
- localIdentName: '[name]__[local]__[hash:base64:5]',
145
- },
146
- },
147
- },
148
- 'postcss-loader',
149
- ],
150
- });
151
- return config;
152
- },
153
- });
154
- ```
155
-
156
- ### Next, install the following dependencies using the commands below:
35
+ > **Note:** Make sure to adjust the versions of the dependencies based on your project's requirements.
157
36
 
158
- ```bash
159
- yarn add react-native-web
37
+ If you encounter any issues during the installation process or have any questions, please refer to the Etendo UI documentation or reach out to our support team.
160
38
 
161
- yarn add next-transpile-modules
39
+ ## Using the Playground to Test Components
162
40
 
163
- yarn add -D ts-loader
41
+ To use the Playground for testing Etendo UI components, follow these steps:
164
42
 
165
- yarn add babel-loader --dev
43
+ 1. **General Setup**:
44
+ - Run `yarn install` in the `etendo_ui_library` directory.
166
45
 
167
- yarn add react-native-svg-transformer
168
-
169
- yarn add react-native-svg
170
-
171
- yarn add --dev babel-plugin-module-resolver
172
- ```
173
-
174
- Usage
175
- To use a component from the etendo-ui-library, import it and use it in your JSX code. Below is an example of how to use the Input component.
176
-
177
- ```javascript
178
- //import
179
- import Input from 'etendo-ui-library/components/input/Input';
180
-
181
- //usage
182
- <Input
183
- titleLabel="ReadOnly"
184
- helperText="Start Date"
185
- placeholder="Write a text"
186
- disabled={false}
187
- value="password"
188
- typeField="textInputPassword"
189
- isError={true}
190
- keyboardType="text"
191
- />;
192
- ```
46
+ 2. **For Mobile Testing**:
47
+ - Navigate to `examples/ReactNative`.
48
+ - Run `yarn install` to install necessary dependencies.
49
+ - To test on iOS, execute `yarn run ios`.
50
+ - For Android, use `yarn run android`.
193
51
 
194
- **Remember to replace the attribute values with your desired ones!**
52
+ 3. **For Web Testing**:
53
+ - Change directory to `examples/nextjs`.
54
+ - Ensure that you have Node.js version **18.17.0 or later** installed. It is worth mentioning that this is only required for this web playground, to develop the **Etendo UI** Node.js **16.10.0 or higher** is required.
55
+ - Run `yarn install` to install dependencies.
56
+ - Start the development server with `yarn run dev`.
195
57
 
196
- That's it! You are now ready to use the etendo-ui-library in your React Web application. Please refer to the detailed documentation on Storybook and NPM for more examples and use cases.
58
+ Happy coding with Etendo UI! 🚀🎉
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "etendo-ui-library",
3
- "version": "1.2.65",
3
+ "version": "1.2.66",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "android": "react-native run-android",
@@ -15,7 +15,11 @@
15
15
  "build-storybook": "build-storybook",
16
16
  "build": "yarn build:web && yarn build:native",
17
17
  "build:web": "tsc --emitDeclarationOnly --outDir dist-web && babel src --out-dir dist-web --extensions '.ts,.tsx' --config-file ./babel.config.web.js",
18
- "build:native": "tsc --emitDeclarationOnly --outDir dist-native && babel src --out-dir dist-native --extensions '.ts,.tsx' --config-file ./babel.config.native.js"
18
+ "build:native": "tsc --emitDeclarationOnly --outDir dist-native && babel src --out-dir dist-native --extensions '.ts,.tsx' --config-file ./babel.config.native.js",
19
+ "nextjs": "cd examples/nextjs && yarn install && yarn dev",
20
+ "copy-to-reactnative": "cp -R src/* ./examples/ReactNative",
21
+ "copy-to-nextjs": "cp -R src/* ./examples/nextjs/apps/web/app",
22
+ "watch": "nodemon --watch src -e js,jsx,ts,tsx --exec \"concurrently 'yarn copy-to-reactnative' 'yarn copy-to-nextjs'\""
19
23
  },
20
24
  "main": "index.js",
21
25
  "types": "index.d.ts",
@@ -47,19 +51,21 @@
47
51
  "@react-native-community/eslint-config": "^3.2.0",
48
52
  "@react-native-community/slider": "^4.4.2",
49
53
  "@testing-library/react-native": "^11.1.0",
50
- "@tsconfig/react-native": "^2.0.2",
51
- "@types/jest": "^29.2.1",
52
- "@types/react": "^18.0.24",
54
+ "@tsconfig/react-native": "^3.0.2",
55
+ "@types/jest": "^29.5.9",
56
+ "@types/react": "^18.2.38",
53
57
  "@types/react-native": "^0.72.2",
54
- "@types/react-test-renderer": "^18.0.0",
58
+ "@types/react-test-renderer": "^18.0.6",
55
59
  "@typescript-eslint/eslint-plugin": "^5.17.0",
56
60
  "@typescript-eslint/parser": "^5.17.0",
57
61
  "babel-jest": "^29.2.1",
58
62
  "babel-loader": "^9.1.2",
59
63
  "babel-plugin-module-resolver": "^5.0.0",
64
+ "concurrently": "^8.2.2",
60
65
  "eslint": "^8.19.0",
61
66
  "jest": "^29.2.1",
62
67
  "metro-react-native-babel-preset": "0.73.9",
68
+ "nodemon": "^3.0.1",
63
69
  "prettier": "^2.8.8",
64
70
  "react": "18.2.0",
65
71
  "react-dom": "^18.2.0",
@@ -69,10 +75,13 @@
69
75
  "react-native-svg-web": "^1.0.9",
70
76
  "react-native-web": "^0.19.4",
71
77
  "react-test-renderer": "18.2.0",
72
- "typescript": "^5.1.3"
78
+ "typescript": "^5.3.2"
73
79
  },
74
80
  "jest": {
75
81
  "preset": "react-native",
82
+ "testPathIgnorePatterns": [
83
+ "examples/"
84
+ ],
76
85
  "moduleFileExtensions": [
77
86
  "ts",
78
87
  "tsx",