Skip to content
This repository has been archived by the owner on Dec 11, 2023. It is now read-only.

Backmerge: main #497

Merged
merged 11 commits into from
Oct 25, 2023
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

## Documentation

You can find detailed documentation for each component, including a list of props and examples, in https://gluestack.io/style/docs website.
You can find detailed documentation for each component, including a list of props and examples, in https://gluestack.io/style/docs/getting-started/installation website.

## Features

Expand Down
2 changes: 1 addition & 1 deletion example/storybook/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
},
"dependencies": {
"@expo/html-elements": "^0.4.2",
"@gluestack-style/react": "1.0.7",
"@gluestack-style/react": "1.0.8",
"@gluestack-ui/actionsheet": "^0.2.16",
"@gluestack-ui/alert-dialog": "^0.1.14",
"@gluestack-ui/button": "^0.1.23",
Expand Down
4 changes: 2 additions & 2 deletions example/storybook/src/advanced/BabelPlugins/index.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ import { Box, AppProvider } from '@gluestack/design-system';

3. Just make sure your `babel.config.js` and `gluestack-style.config.js/ts` are in the same directory. We suggest you keep both of them at the root of your app codebase.

### **Let us see how this Babel plugin works.**
### Let us see how this Babel plugin works.

- First, it traverses your files and tries to find `styled` imported from `@gluestack-style/react`.
- Once it finds a declaration of `styled` it then looks for its function call.
Expand Down Expand Up @@ -196,7 +196,7 @@ module.exports = function (api) {

- `components`: The `components` option allows you to specify the library/import_path name & file path of components created using `@gluestack-style/react`. This option is useful in scenarios where you are creating a custom component with the styled function and using it with inline styles. If you want to resolve those inline styles on build time just define this option with the library name and file path of the components folder or library.

> **Note**: Even using this option if you have extended your config, added aliases, tokens or propertyResolver to a StyledComponent then it will not be resolved on build time. It will be resolved on runtime.
> Note: Even using this option if you have extended your config, added aliases, tokens or propertyResolver to a StyledComponent then it will not be resolved on build time. It will be resolved on runtime.

```js
// babel.config.js
Expand Down
5 changes: 5 additions & 0 deletions example/storybook/src/api/Typescript/index.stories.mdx
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
---
title: Typescript | gluestack-style
description: Typing for gluestack
---

import { Canvas, Meta, Story, Source } from '@storybook/addon-docs';

<Meta title="api/Typescript" />
Expand Down
4 changes: 2 additions & 2 deletions example/storybook/src/overview/Introduction/index.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ gluestack-style is different from other styling libraries like Glamour, Emotion,

gluestack-style originally started as part of NativeBase, a universal component library for both React and React Native. However, we realized that not everyone needs all the components from NativeBase, so we broke it down into two separate libraries:

- [gluestack-style](https://gluestack.io/style/docs) - The high-performing and universal styling library.
- [gluestack-ui](https://gluestack.io/ui/docs) - A set of ready-to-use universal components that can be added to any project and styled to fit your needs. You can even customize the components as desired.
- [gluestack-style](https://gluestack.io/style) - The high-performing and universal styling library.
- [gluestack-ui](https://gluestack.io/ui/docs/overview/introduction) (Alpha) - A set of ready-to-use universal components that can be added to any project and styled to fit your needs. You can even customize the components as desired.

## But aren’t React Native and React Native Web sufficient?

Expand Down
2 changes: 1 addition & 1 deletion packages/benchmark-next/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
},
"devDependencies": {
"@gluestack-style/babel-plugin-styled-resolver": "1.0.0",
"@gluestack-style/react": "1.0.7",
"@gluestack-style/react": "1.0.8",
"@emotion/styled": "^11.3.0",
"@expo/next-adapter": "^4.0.13",
"@types/react": "17.0.1",
Expand Down
8 changes: 8 additions & 0 deletions packages/react/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
# @gluestack-style/react

## 1.0.8

### Patch Changes

- - Fixed global style platform based resolution
- Fixed useToken to return default value as fallback
- Fixed theme passing props resolution

## 1.0.7

### Patch Changes
Expand Down
2 changes: 1 addition & 1 deletion packages/react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

## Documentation

You can find detailed documentation for each component, including a list of props and examples, in https://gluestack.io/style/docs website.
You can find detailed documentation for each component, including a list of props and examples, in https://gluestack.io/style/docs/getting-started/installation website.

## Installation

Expand Down
2 changes: 1 addition & 1 deletion packages/react/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@gluestack-style/react",
"description": "A universal & performant styling library for React Native, Next.js & React",
"version": "1.0.7",
"version": "1.0.8",
"keywords": [
"React Native",
"Next.js",
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/createGlobalStyles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { stableHash } from './stableHash';
import { resolvePlatformTheme } from './styled';
import { updateOrderUnResolvedMap } from './updateOrderUnResolvedMap';

export const createGlobalStyles = (globalStyle: object, Platform) => {
export const createGlobalStyles = (globalStyle: object, Platform: any) => {
const versboseComponentTheme = convertStyledToStyledVerbosed(globalStyle);
resolvePlatformTheme(versboseComponentTheme, Platform.OS);
const componentHash = stableHash({
Expand Down