Skip to content

Commit e4dff74

Browse files
Sanchitv3Sanchitv3
authored
Merge pull request #3213 from gluestack/feat/web-changes
chore: updated dependencies version
2 parents 8dcfc8d + 33f9869 commit e4dff74

File tree

11 files changed

+121
-42
lines changed

11 files changed

+121
-42
lines changed

‎apps/website/components/custom/mdx/docs-components.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,4 +102,4 @@ export const docsComponents = {
102102
blockquote: (props: any) => {
103103
return <Note {...props} />;
104104
},
105-
};
105+
};

‎packages/gluestack-ui/CHANGELOG.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
## 0.4.9-alpha.0 (2023-07-21)
22

3+
## 3.0.5
4+
5+
### Patch Changes
6+
7+
- chore: updated deps version
8+
9+
## 3.0.4
10+
11+
### Patch Changes
12+
13+
- chore: updated dependencies version
14+
315
## 3.0.3
416

517
### Patch Changes

‎packages/gluestack-ui/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "gluestack-ui",
3-
"version": "3.0.3",
3+
"version": "3.0.5",
44
"main": "dist/index.js",
55
"bin": {
66
"gluestack-ui": "./dist/index.js"

‎packages/gluestack-ui/src/commands/add.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export const add = new Command()
5151
});
5252

5353
const isTemplate = options.templateOnly;
54-
!isTemplate && log.info('\n\x1b[1mWelcome to gluestack-ui!\x1b[0m\n');
54+
!isTemplate && log.info('\n\x1b[1mWelcome to gluestack-ui v3!\x1b[0m\n');
5555

5656
if (
5757
(!options.all && options.components?.length === 0) ||

‎packages/gluestack-ui/src/commands/init.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const init = new Command()
4848
try {
4949
const options = initOptionsSchema.parse({ ...opts });
5050
const isTemplate = options.templateOnly;
51-
console.log('\n\x1b[1mWelcome to gluestack-ui!\x1b[0m\n');
51+
console.log('\n\x1b[1mWelcome to gluestack-ui v3!\x1b[0m\n');
5252
const cwd = process.cwd();
5353

5454
if (!fs.existsSync(path.join(cwd, 'package.json'))) {

‎packages/gluestack-ui/src/dependencies.ts‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,12 @@ const projectBasedDependencies: Dependencies = {
3232
'react-native-svg': '^15.2.0',
3333
'dom-helpers': '^5.2.1',
3434
'react-stately': '^3.39.0',
35-
'@gluestack-ui/core': '^3.0.0',
36-
'@gluestack-ui/utils': '^3.0.0',
35+
'@gluestack-ui/core': '^3.0.10',
36+
'@gluestack-ui/utils': '^3.0.7',
3737
'@gluestack/ui-next-adapter': '^3.0.0',
38+
"react-native-safe-area-context": "^5.6.1",
39+
'react-native-reanimated': '~4.1.0',
40+
'react-native-worklets': '^0.5.1',
3841
},
3942
devDependencies: {
4043
'@types/react-native': '0.72.8',
@@ -47,31 +50,34 @@ const projectBasedDependencies: Dependencies = {
4750
dependencies: {
4851
'nativewind': '^4.1.23',
4952
'tailwindcss': '^3.4.17',
50-
'react-native-safe-area-context': '^4.11.0',
53+
"react-native-safe-area-context": "^5.6.1",
54+
'react-native-reanimated': '~4.1.0',
55+
'react-native-worklets': '^0.5.1',
5156
'react-aria': '^3.33.0',
5257
'@expo/html-elements': '^0.10.1',
5358
'tailwind-variants': '^0.1.20',
5459
'@legendapp/motion': '^2.3.0',
5560
'react-native-svg': '^15.2.0',
5661
'react-stately': '^3.39.0',
57-
'@gluestack-ui/core': '^3.0.0',
58-
'@gluestack-ui/utils': '^3.0.0',
62+
'@gluestack-ui/core': '^3.0.10',
63+
'@gluestack-ui/utils': '^3.0.7',
5964
},
6065
},
6166
'react-native-cli': {
6267
dependencies: {
6368
'nativewind': '^4.1.23',
6469
'tailwindcss': '^3.4.17',
65-
'react-native-safe-area-context': '^4.11.0',
70+
"react-native-safe-area-context": "^5.6.1",
6671
'react-aria': '^3.33.0',
6772
'@expo/html-elements': '^0.10.1',
6873
'tailwind-variants': '^0.1.20',
6974
'@legendapp/motion': '^2.3.0',
7075
'react-native-svg': '^15.2.0',
7176
'react-stately': '^3.39.0',
72-
'react-native-reanimated': '^3.17.4',
73-
'@gluestack-ui/core': '^3.0.0',
74-
'@gluestack-ui/utils': '^3.0.0',
77+
'react-native-reanimated': '~4.1.0',
78+
'react-native-worklets': '^0.5.1',
79+
'@gluestack-ui/core': '^3.0.10',
80+
'@gluestack-ui/utils': '^3.0.7',
7581
},
7682
devDependencies: {
7783
'babel-plugin-module-resolver': '^5.0.0',

‎packages/gluestack-ui/src/util/init/modify-layout.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -136,8 +136,8 @@ async function modifyNextJsLayout(
136136
if (isAppRouter) {
137137
// App Router layout
138138
const providerWrapper = isNextjs15
139-
? `<StyledJsxRegistry>\n <GluestackUIProvider mode="light">\n {children}\n </GluestackUIProvider>\n </StyledJsxRegistry>`
140-
: `<GluestackUIProvider mode="light">\n {children}\n </GluestackUIProvider>`;
139+
? `<StyledJsxRegistry>\n <GluestackUIProvider mode="dark">\n {children}\n </GluestackUIProvider>\n </StyledJsxRegistry>`
140+
: `<GluestackUIProvider mode="dark">\n {children}\n </GluestackUIProvider>`;
141141

142142
modifiedContent = modifiedContent.replace(
143143
/(\s*{children}\s*)/g,
@@ -147,7 +147,7 @@ async function modifyNextJsLayout(
147147
// Pages Router _app.tsx - no StyledJsxRegistry needed here
148148
modifiedContent = modifiedContent.replace(
149149
/(<Component\s+{\.\.\.pageProps}\s*\/>)/g,
150-
`<GluestackUIProvider mode="light">\n $1\n </GluestackUIProvider>`
150+
`<GluestackUIProvider mode="dark">\n $1\n </GluestackUIProvider>`
151151
);
152152
}
153153

@@ -178,7 +178,7 @@ async function modifyExpoLayout(
178178
if (content.includes('<Slot />')) {
179179
modifiedContent = modifiedContent.replace(
180180
/(\s*<Slot\s*\/>\s*)/g,
181-
`\n <GluestackUIProvider mode="light">\n <Slot />\n </GluestackUIProvider>\n `
181+
`\n <GluestackUIProvider mode="dark">\n <Slot />\n </GluestackUIProvider>\n `
182182
);
183183
} else if (content.includes('return (')) {
184184
// Find the main return statement and wrap its content
@@ -188,7 +188,7 @@ async function modifyExpoLayout(
188188
if (content.trim().startsWith('<GluestackUIProvider')) {
189189
return match; // Already wrapped
190190
}
191-
return `${returnPart}\n <GluestackUIProvider mode="light">\n ${content.trim()}\n </GluestackUIProvider>\n ${closingPart}`;
191+
return `${returnPart}\n <GluestackUIProvider mode="dark">\n ${content.trim()}\n </GluestackUIProvider>\n ${closingPart}`;
192192
}
193193
);
194194
}
@@ -224,7 +224,7 @@ async function modifyReactNativeLayout(
224224
if (content.trim().startsWith('<GluestackUIProvider')) {
225225
return match; // Already wrapped
226226
}
227-
return `${returnPart}\n <GluestackUIProvider mode="light">\n ${content.trim()}\n </GluestackUIProvider>\n ${closingPart}`;
227+
return `${returnPart}\n <GluestackUIProvider mode="dark">\n ${content.trim()}\n </GluestackUIProvider>\n ${closingPart}`;
228228
}
229229
);
230230
}
@@ -253,24 +253,24 @@ function addImportsToFile(content: string, newImports: string): string {
253253
if (!newImportTrimmed) return;
254254

255255
// Extract the import path for comparison
256-
const importPathMatch = newImportTrimmed.match(/from\s+['"]([^'"]+)['"]/);
257-
const importPath = importPathMatch ? importPathMatch[1] : '';
256+
const importPathMatch = newImportTrimmed.match(/from\s+['"]([^'"]+)['"]|import\s+['"]([^'"]+)['"]/);
257+
const importPath = importPathMatch ? (importPathMatch[1] || importPathMatch[2]) : '';
258258

259-
// For CSS imports, check the import path directly
260-
const isCssImport = newImportTrimmed.match(/^import\s+['"][^'"]+['"];?\s*$/);
259+
// For CSS imports, check the import path directly - FIXED REGEX
260+
const isCssImport = newImportTrimmed.match(/^import\s+['"][^'"]*\.(css|scss|sass|less)['"];?\s*$/);
261261

262-
// Extract imported items for more precise matching
262+
// Extract imported items for more precise matching (only for non-CSS imports)
263263
const importItemsMatch = newImportTrimmed.match(/import\s+(.+?)\s+from/);
264264
const importItems = importItemsMatch ? importItemsMatch[1].trim() : '';
265265

266266
// Check if this import already exists
267267
const isDuplicate = existingImports.some(existingImport => {
268-
const existingPathMatch = existingImport.match(/from\s+['"]([^'"]+)['"]/);
269-
const existingPath = existingPathMatch ? existingPathMatch[1] : '';
268+
const existingPathMatch = existingImport.match(/from\s+['"]([^'"]+)['"]|import\s+['"]([^'"]+)['"]/);
269+
const existingPath = existingPathMatch ? (existingPathMatch[1] || existingPathMatch[2]) : '';
270270

271271
// For CSS imports, just compare paths
272272
if (isCssImport) {
273-
const existingIsCssImport = existingImport.match(/^import\s+['"][^'"]+['"];?\s*$/);
273+
const existingIsCssImport = existingImport.match(/^import\s+['"][^'"]*\.(css|scss|sass|less)['"];?\s*$/);
274274
return existingIsCssImport && existingPath === importPath;
275275
}
276276

‎packages/gluestack-ui/templates/expo/babel.config.js‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,7 @@ module.exports = function (api) {
22
api.cache(true);
33

44
return {
5-
presets: [
6-
[
7-
'babel-preset-expo',
8-
{
9-
jsxImportSource: 'nativewind',
10-
},
11-
],
12-
'nativewind/babel',
13-
],
5+
presets: [['babel-preset-expo'], 'nativewind/babel'],
146

157
plugins: [
168
[
@@ -24,7 +16,7 @@ module.exports = function (api) {
2416
},
2517
},
2618
],
27-
'react-native-reanimated/plugin',
19+
'react-native-worklets/plugin',
2820
],
2921
};
3022
};

‎packages/gluestack-ui/templates/react-native-cli/babel.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,6 @@ module.exports = {
1111
},
1212
},
1313
],
14-
'react-native-reanimated/plugin',
14+
"react-native-worklets/plugin",
1515
],
1616
};

‎src/docs/home/overview/introduction/index.mdx‎

Lines changed: 67 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,71 @@ import { GithubLink } from './githubLink';
1010

1111
Customizable components and patterns for React, Next.js & React Native.
1212

13-
**gluestack-ui v3** offers customizable, beautifully designed components for your projects. Unlike traditional libraries, it's not a pre-packaged dependency. Choose the components you need and copy-paste them directly into your React, Next.js & React Native projects.
13+
**gluestack-ui** offers customizable, beautifully designed components for your projects. Unlike traditional libraries, it's not a pre-packaged dependency. Choose the components you need and copy-paste them directly into your React, Next.js & React Native projects.
14+
15+
## gluestack-ui philosophy
16+
17+
### Why gluestack-ui exists
18+
- **Problem:** Traditional UI libraries often force developers into rigid patterns, heavy dependencies, or platform-specific implementations.
19+
20+
- **Solution:** Gluestack promotes a universal, modular, and copy-paste approach that lets developers own their UI components completely.
21+
22+
### Goals & Non-Goals
23+
24+
#### Our goals
25+
26+
- **Universal Consistency:** One codebase, same behavior across React, Next.js, and React Native.
27+
28+
- **Developer Ownership:** Copy-paste components, modify freely, avoid vendor lock-in.
29+
30+
- **Performance & Accessibility:** Lightweight, optimized, and accessible components by default.
31+
32+
- **Community-Driven:** Open architecture encouraging contributions and experimentation.
33+
34+
#### Non-goals
35+
36+
**We don't aim to**
37+
- Create another monolithic UI library with hundreds of pre-styled components
38+
- Provide opinionated design themes that limit creative freedom
39+
- Replace platform-specific optimizations with lowest-common-denominator solutions
40+
- Build a proprietary styling system that requires learning new APIs
41+
- Create dependencies that become bottlenecks for your project's evolution
42+
43+
### How gluestack-ui works
44+
45+
- **Source-to-Destination Architecture:** Maintain a single source of truth for components that automatically syncs across projects.
46+
47+
- **Copy-Paste Components:** Grab only what you need—no heavy dependencies required.
48+
49+
- **Theming & Tailwind Integration:** Flexible styling system that works for web & mobile.
50+
51+
- **TypeScript & RSC Ready:** Modern architecture for type safety and server-rendered apps.
52+
53+
### Design 101
54+
55+
- **Atomic, Composable Components:** Each component is small, reusable, and composable into more complex UIs.
56+
57+
- **Compound Components:** Components with sub-components (e.g.,
58+
`<Button>`
59+
`<ButtonText>`Click Me`</ButtonText>`
60+
`</Button>`
61+
), allowing more flexible layouts.
62+
63+
- **Accessibility by Default:** ARIA support baked in, keyboard navigable.
64+
65+
- **Minimal Runtime Overhead:** Lightweight runtime ensures high performance.
66+
67+
### Code 101
68+
69+
- **Copy-Paste Philosophy:** No “magical imports.” You copy the component directly into your codebase.
70+
71+
- **Fully Customizable:** You can override styles, props, and behavior easily.
72+
73+
- **Single Source of Truth:** All component logic lives in src/ for maintainability and easy updates.
74+
75+
- **Integration Ready:** Works out-of-the-box with Tailwind, NativeWind, and Next.js RSC.
76+
77+
This philosophy guides every decision in gluestack-ui's development, from API design to documentation structure, ensuring that developers have the tools they need to build exceptional user experiences without compromise.
1478

1579
## Why gluestack-ui v3?
1680

@@ -65,7 +129,7 @@ gluestack-ui v3 uses a sophisticated source-to-destination system:
65129
- **`create-gluestack/`** - Project initialization tool
66130

67131
### Applications (`apps/`) *(contribution change)*
68-
- **`website/`** - Documentation website (gluestack-ui.com)
132+
- **`website/`** - Documentation website (gluestack.io)
69133
- **`kitchen-sink/`** - Component showcase & testing environment
70134
- **`starter-kit-next/`** - Next.js starter template
71135
- **`starter-kit-expo/`** - Expo starter template
@@ -205,7 +269,7 @@ Get involved with the community, ask questions, and share tips, join our Discord
205269

206270
To receive updates on new primitives, announcements, blog posts, and tips on using the library.
207271

208-
[Follow gluestack on Twitter](https://twitter.com/gluestack)
272+
[Follow gluestack-ui on Twitter](https://twitter.com/gluestack)
209273

210274
### GitHub
211275

0 commit comments

Comments
 (0)