app-studio 0.1.16 → 0.1.18
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 +73 -28
- package/package.json +3 -8
package/README.md
CHANGED
|
@@ -25,6 +25,9 @@
|
|
|
25
25
|
[issues-helper-url]: https://github.com/actions-cool/issues-helper
|
|
26
26
|
|
|
27
27
|
|
|
28
|
+
`App-studio` provides CSS design props for layout, spacing, sizing, shadows with the 'shadow' prop, event management through the `on` prop, and theming. Components include `Element` for fundamental design, `View` based on the `div`, `Text` for text styles, `Form` for form-related designs, and `Image` based on the `img` tag.
|
|
29
|
+
|
|
30
|
+
Supported events: `hover`, `active`, `focus`, and `disabled`.
|
|
28
31
|
|
|
29
32
|
|
|
30
33
|
## ✨ Features
|
|
@@ -69,11 +72,11 @@ import { View } from 'app-studio';
|
|
|
69
72
|
function Example() {
|
|
70
73
|
return (
|
|
71
74
|
<View
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
75
|
+
backgroundColor="color.grey"
|
|
76
|
+
padding={20}
|
|
77
|
+
on={{ hover: { backgroundColor: 'color.blue.100' } }}
|
|
78
|
+
>
|
|
79
|
+
Hello
|
|
77
80
|
</View>
|
|
78
81
|
);
|
|
79
82
|
}
|
|
@@ -82,21 +85,72 @@ function Example() {
|
|
|
82
85
|
|
|
83
86
|
You can Use View is use <div> tag you can use Div, Span, Form, Input, Image components if you need another tag.
|
|
84
87
|
|
|
85
|
-
|
|
88
|
+
## Advanced Example
|
|
89
|
+
|
|
90
|
+
```javascript
|
|
91
|
+
import { ThemeProvider, ResponsiveProvider, View, Span, Text } from 'app-studio';
|
|
92
|
+
|
|
93
|
+
const theme = {
|
|
94
|
+
main: { primary: '#fff7ed' },
|
|
95
|
+
components: { button: { background: '#fff7ed' } }
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
const colors = {
|
|
99
|
+
main: { blue: '#94a3b8' },
|
|
100
|
+
palette: { blueGray: { 500: '#64748b' } }
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
function Example() {
|
|
104
|
+
return (
|
|
105
|
+
<ResponsiveProvider>
|
|
106
|
+
<ThemeProvider theme={theme} colors={colors}>
|
|
107
|
+
<Span
|
|
108
|
+
backgroundColor="color.blue"
|
|
109
|
+
padding={10}
|
|
110
|
+
media={{
|
|
111
|
+
mobile: {
|
|
112
|
+
padding: 20
|
|
113
|
+
}
|
|
114
|
+
}}
|
|
115
|
+
>
|
|
116
|
+
Base element
|
|
117
|
+
</Span>
|
|
118
|
+
<View
|
|
119
|
+
backgroundColor="theme.primary"
|
|
120
|
+
margin={10}
|
|
121
|
+
width={200}
|
|
122
|
+
on={{ hover: { backgroundColor: 'color.blueGray.500' } }}
|
|
123
|
+
>
|
|
124
|
+
Hover to change color
|
|
125
|
+
</View>
|
|
126
|
+
<Button backgroundColor="theme.button.background">Click here </Button>
|
|
127
|
+
<Text color="theme.primary">Hello</Text>
|
|
128
|
+
</ThemeProvider>
|
|
129
|
+
</ResponsiveProvider>
|
|
130
|
+
|
|
131
|
+
);
|
|
132
|
+
}
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
## Transform JavaScript/TypeScript JSX
|
|
137
|
+
|
|
138
|
+
- Save the code from **Section 2** into a folder named `codemod` and within that, a file named `to-app-studio.js`.
|
|
139
|
+
- Use `jscodeshift` to run the transformation:
|
|
140
|
+
|
|
141
|
+
```bash
|
|
142
|
+
npx jscodeshift -t codemod/to-app-studio.js <path_to_your_js_or_tsx_files> --assetsDir=src/assets --assetsUrl=/assets
|
|
143
|
+
```
|
|
86
144
|
|
|
87
|
-
|
|
145
|
+
Replace `<path_to_your_js_or_tsx_files>` with the actual path to your JavaScript/TypeScript files.
|
|
88
146
|
|
|
89
147
|
|
|
90
148
|
## 🔗 Links
|
|
91
149
|
- [Change Log](CHANGELOG.md)
|
|
92
150
|
- [Versioning Release Note](https://github.com/rize-network/app-studio/wiki/)
|
|
93
|
-
- [FAQ](https://ant.design/docs/react/faq)
|
|
94
|
-
- [CodeSandbox Template](https://u.ant.design/codesandbox-repro) for bug reports
|
|
95
|
-
- [Customize Theme](https://ant.design/docs/react/customize-theme)
|
|
96
151
|
- [How to Apply for Being A Collaborator](https://github.com/rize-network/app-studio/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
|
|
97
152
|
|
|
98
153
|
|
|
99
|
-
|
|
100
154
|
## 🤝 Contributing [](http://makeapullrequest.com)
|
|
101
155
|
|
|
102
156
|
Read our [contributing guide](https://ant.design/docs/react/contributing) and let's build a better rize-network together.
|
|
@@ -109,31 +163,22 @@ If you are a collaborator, please follow our [Pull Request principle](https://gi
|
|
|
109
163
|
|
|
110
164
|
|
|
111
165
|
|
|
112
|
-
##
|
|
113
|
-
|
|
114
|
-
[](https://opencollective.com/rize#support)
|
|
166
|
+
## Roadmap
|
|
115
167
|
|
|
116
|
-
|
|
168
|
+
- Integrate React Native
|
|
117
169
|
|
|
170
|
+
## Author
|
|
118
171
|
|
|
119
|
-
|
|
120
|
-
## Fundamentals
|
|
172
|
+
SteedMonteiro, steed@rize.network
|
|
121
173
|
|
|
122
|
-
| Property | Type | Default | Description |
|
|
123
|
-
| ----------- | :----: | :-------: | --------------------- |
|
|
124
|
-
| title | string | undefined | change the title |
|
|
125
|
-
| description | string | undefined | change the descrition | -->
|
|
126
174
|
|
|
127
|
-
##
|
|
175
|
+
## ❤️ Sponsors and Backers [](https://opencollective.com/rize#support) [](https://opencollective.com/rize#support)
|
|
128
176
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
- manage all pseudo class : https://html.spec.whatwg.org/multipage/semantics-other.html#selector-hover
|
|
177
|
+
[](https://opencollective.com/rize#support)
|
|
178
|
+
[](https://opencollective.com/rize#support)
|
|
132
179
|
|
|
133
|
-
## Author
|
|
134
180
|
|
|
135
|
-
SteedMonteiro, steed@rize.network
|
|
136
181
|
|
|
137
182
|
## License
|
|
138
183
|
|
|
139
|
-
App Studio is available under the MIT license. See the LICENSE file for more info.
|
|
184
|
+
App Studio is available under the MIT license. See the LICENSE file for more info.
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.1.
|
|
2
|
+
"version": "0.1.18",
|
|
3
3
|
"name": "app-studio",
|
|
4
4
|
"description": "App Studio is a responsive and themeable framework to build cross platform applications",
|
|
5
5
|
"repository": "git@github.com:rize-network/app-studio.git",
|
|
@@ -39,8 +39,6 @@
|
|
|
39
39
|
"prepublishOnly": "npm run build",
|
|
40
40
|
"size": "size-limit",
|
|
41
41
|
"analyze": "size-limit --why",
|
|
42
|
-
"storybook": "start-storybook -p 6006",
|
|
43
|
-
"build-storybook": "build-storybook",
|
|
44
42
|
"upgrade": "ncu -u"
|
|
45
43
|
},
|
|
46
44
|
"peerDependencies": {
|
|
@@ -59,11 +57,6 @@
|
|
|
59
57
|
"@commitlint/cli": "^16.1.0",
|
|
60
58
|
"@commitlint/config-conventional": "^16.0.0",
|
|
61
59
|
"@size-limit/preset-small-lib": "^7.0.5",
|
|
62
|
-
"@storybook/addon-essentials": "^6.4.17",
|
|
63
|
-
"@storybook/addon-info": "^5.3.21",
|
|
64
|
-
"@storybook/addon-links": "^6.4.17",
|
|
65
|
-
"@storybook/addons": "^6.4.17",
|
|
66
|
-
"@storybook/react": "^6.4.17",
|
|
67
60
|
"@types/color": "^3.0.3",
|
|
68
61
|
"@types/react": "^17.0.38",
|
|
69
62
|
"@types/react-dom": "^17.0.11",
|
|
@@ -72,6 +65,7 @@
|
|
|
72
65
|
"@typescript-eslint/parser": "^5.10.1",
|
|
73
66
|
"babel-loader": "^8.2.3",
|
|
74
67
|
"chalk": "^5.0.0",
|
|
68
|
+
"cheerio": "^1.0.0-rc.12",
|
|
75
69
|
"commitlint": "^16.1.0",
|
|
76
70
|
"cross-env": "^7.0.3",
|
|
77
71
|
"eslint": "^8.8.0",
|
|
@@ -85,6 +79,7 @@
|
|
|
85
79
|
"husky": "^7.0.4",
|
|
86
80
|
"jscodeshift": "^0.15.0",
|
|
87
81
|
"lint-staged": "^12.3.2",
|
|
82
|
+
"postcss": "^8.4.31",
|
|
88
83
|
"prettier": "^2.5.1",
|
|
89
84
|
"react": "^17.0.2",
|
|
90
85
|
"size-limit": "^7.0.5",
|