Merge pull request #482 from gluestack/main

Backmerge: main

.vscode/settings.json

@@ -16,5 +16,6 @@
   // Path to a .prettierignore or similar file
   "prettier.ignorePath": ".prettierignore",
   // If true, puts the `>` of a multi-line jsx element at the end of the last line instead of being alone on the next line
-  "editor.wordWrap": "on"
+  "editor.wordWrap": "on",
+  "cSpell.words": ["gluestack", "Pressable", "themeable"]
 }

README.md

@@ -6,7 +6,7 @@
   <br>
 </h3>
 
-## A library that allows you to use CSS in your React and React Native projects with a modern, powerful and flexible way. `gluestack-style` allows you to write CSS using JavaScript, which enables you to take advantage of the power and expressiveness of both languages. With its simple and intuitive API, you can easily create dynamic styles, responsive design, and handle themes for your applications.
+**A library that allows you to use CSS in your React and React Native projects with a modern, powerful and flexible way. `gluestack-style` allows you to write CSS using JavaScript, which enables you to take advantage of the power and expressiveness of both languages. With its simple and intuitive API, you can easily create dynamic styles, responsive design, and handle themes for your applications.**
 
 ## Documentation
 
@@ -88,12 +88,12 @@ export const App = () => {
 ```
 
 More guides on how to get started are available
-[here](https://gluestack.io/style).
+[here](https://gluestack.io/style/docs).
 
 ## Contributing
 
 We welcome contributions to the `gluestack-style`! If you have an idea for a new component or a bug fix, please read our [contributing guide](./CONTRIBUTING.md) instructions on how to submit a pull request.
 
 ## License
 
-Licensed under the MIT License, Copyright © 2021 GeekyAnts. See [LICENSE](https://github.com/gluestack/gluestack-style/blob/master/LICENSE) for more information.
+Licensed under the MIT License, Copyright © 2021 GeekyAnts. See [LICENSE](https://github.com/gluestack/gluestack-style/blob/main/LICENSE) for more information.

example/storybook/src/advanced/BabelPlugins/index.stories.mdx

@@ -1,6 +1,6 @@
 ---
 title: Babel Plugins | gluestack-style
-description: All the Babel plugins gluestack-style provides for its ecosystem. It transpiles your styled function calls and resolves the component styling in build time.
+description: All the Babel plugins gluestack-style provides for its ecosystem. It transpile your styled function calls and resolves the component styling in build time.
 ---
 
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
@@ -12,7 +12,7 @@ import { Box, AppProvider } from '@gluestack/design-system';
 
 ### @gluestack-style/babel-plugin-styled-resolver
 
-@gluestack-style/babel-plugin-styled-resolver transpiles your `styled` function calls and resolves the `component styling` in build time. It also generates all the `CSS rules` and style ids based on which these CSS styles are applied on the component. Doing this saves tons of time on runtime because all your style calculation is already done and all your app has to do is to inject this style into a style tag and viola! All your styles appear instantaneously. This helps us to improve the performance of the apps 5-6 times. If you provide the `components` option then it also resolves the inline styles of the components created using `@gluestack-style/react`.
+@gluestack-style/babel-plugin-styled-resolver transpile your `styled` function calls and resolves the `component styling` in build time. It also generates all the `CSS rules` and style ids based on which these CSS styles are applied on the component. Doing this saves tons of time on runtime because all your style calculation is already done and all your app has to do is to inject this style into a style tag and viola! All your styles appear instantaneously. This helps us to improve the performance of the apps 5-6 times. If you provide the `components` option then it also resolves the inline styles of the components created using `@gluestack-style/react`.
 
 ## Installation Steps:
 

example/storybook/src/api/PropertyResolver/index.stories.mdx

@@ -187,4 +187,4 @@ export const config = createConfig({
 } as const);
 ```
 
-> Warning: We strongly advise against using this feature" as this can impact your performance since this needs to be resolved on the fly and can not be optimised at build time.
+> Warning: We strongly advise against using this feature" as this can impact your performance since this needs to be resolved on the fly and can not be optimized at build time.

example/storybook/src/api/UtilityProps/index.stories.mdx

@@ -1,6 +1,6 @@
 ---
 title: Utility Props | gluestack-style
-description: Writing inline styles with Utlity Props. We provide you the ability to pass down utility props on any Styled Component which internally converts to `sx` prop.
+description: Writing inline styles with Utility Props. We provide you the ability to pass down utility props on any Styled Component which internally converts to `sx` prop.
 ---
 
 import { Canvas, Meta, Story } from '@storybook/addon-docs';

example/storybook/src/overview/Performance/index.stories.mdx

@@ -16,7 +16,7 @@ We tested the performance of our landing page, built with `gluestack-style` and
 <img
   src="/assets/PerformanceScreenshot.png"
   width="100%"
-  alt="Performance matrics from lighthouse report"
+  alt="Performance metrics from lighthouse report"
 />
 
 We have run the benchmark, and we are getting great results compared to other libraries. We don't want the comparison with other libraries to be the ultimate scoring system. It doesn't give the full picture of any library. There are other important metrics too. Also, we may go wrong in how we run the benchmark, we may end up with selection bias too (unintentionally).

example/storybook/src/plugins/FontsPlugin/index.stories.mdx

@@ -21,7 +21,7 @@ The font plugin, a utility for the styled function, provides a unified way to pa
 Include the `FontResolver` plugin in your config. To customize font resolution, pass a mapFonts callback function to the constructor.
 
 ```js
-import { FontResolver } from '@gluetsack-style/react';
+import { FontResolver } from '@gluestack-style/react';
 
 export const config = {
   aliases: {},

packages/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "keywords": [
     "React Native",
     "Next.js",