diff --git a/.vscode/settings.json b/.vscode/settings.json index 7cdc87cfe..292fbfa5f 100644 --- a/.vscode/settings.json +++ b/.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"] } diff --git a/README.md b/README.md index 73d5e4f73..53d64f372 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@
-## 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,7 +88,7 @@ export const App = () => { ``` More guides on how to get started are available -[here](https://gluestack.io/style). +[here](https://gluestack.io/style/docs). ## Contributing @@ -96,4 +96,4 @@ We welcome contributions to the `gluestack-style`! If you have an idea for a new ## 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. diff --git a/example/storybook/src/advanced/BabelPlugins/index.stories.mdx b/example/storybook/src/advanced/BabelPlugins/index.stories.mdx index 71707a3e4..6996bc30b 100644 --- a/example/storybook/src/advanced/BabelPlugins/index.stories.mdx +++ b/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: diff --git a/example/storybook/src/api/PropertyResolver/index.stories.mdx b/example/storybook/src/api/PropertyResolver/index.stories.mdx index abf7ab65d..7a682ad41 100644 --- a/example/storybook/src/api/PropertyResolver/index.stories.mdx +++ b/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. diff --git a/example/storybook/src/api/UtilityProps/index.stories.mdx b/example/storybook/src/api/UtilityProps/index.stories.mdx index ce101f2f0..cbf41785b 100644 --- a/example/storybook/src/api/UtilityProps/index.stories.mdx +++ b/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'; diff --git a/example/storybook/src/overview/Performance/index.stories.mdx b/example/storybook/src/overview/Performance/index.stories.mdx index 89819540b..88b1de710 100644 --- a/example/storybook/src/overview/Performance/index.stories.mdx +++ b/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 Performance matrics 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). diff --git a/example/storybook/src/plugins/FontsPlugin/index.stories.mdx b/example/storybook/src/plugins/FontsPlugin/index.stories.mdx index aeb8dc30b..56628938e 100644 --- a/example/storybook/src/plugins/FontsPlugin/index.stories.mdx +++ b/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: {}, diff --git a/packages/react/package.json b/packages/react/package.json index ff363ba47..b6b5f4e77 100644 --- a/packages/react/package.json +++ b/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",