Socket
Socket
Sign inDemoInstall

create-next-app-with-gluestack-ui

Package Overview
Dependencies
Maintainers
2
Versions
141
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

create-next-app-with-gluestack-ui - npm Package Compare versions

Comparing version 0.0.5 to 0.1.0-alpha.0

5

package.json

@@ -13,3 +13,3 @@ {

"description": "A CLI tool for easily adding components from gluestack-ui to your projects.",
"version": "0.0.5",
"version": "0.1.0-alpha.0",
"license": "MIT",

@@ -36,3 +36,4 @@ "main": "dist/index.js",

"bin": {
"test-cli1234": "dist/index.js"
"create-next-app-with-gluestack-ui": "dist/index.js",
"create-next-app-with-gluestack-ui@latest": "dist/index.js"
},

@@ -39,0 +40,0 @@ "prettier": {

1164

src/app-router/gluestack-ui.config.ts
export const config = {
componentPath: './components',
componentPath: "./components",
theme: {
aliases: {
bg: 'backgroundColor',
bgColor: 'backgroundColor',
bg: "backgroundColor",
bgColor: "backgroundColor",
// dimension
h: 'height',
w: 'width',
h: "height",
w: "width",
// padding
p: 'padding',
px: 'paddingHorizontal',
py: 'paddingVertical',
pt: 'paddingTop',
pb: 'paddingBottom',
pr: 'paddingRight',
pl: 'paddingLeft',
p: "padding",
px: "paddingHorizontal",
py: "paddingVertical",
pt: "paddingTop",
pb: "paddingBottom",
pr: "paddingRight",
pl: "paddingLeft",
// margin
m: 'margin',
mx: 'marginHorizontal',
my: 'marginVertical',
mt: 'marginTop',
mb: 'marginBottom',
mr: 'marginRight',
ml: 'marginLeft',
m: "margin",
mx: "marginHorizontal",
my: "marginVertical",
mt: "marginTop",
mb: "marginBottom",
mr: "marginRight",
ml: "marginLeft",
// Borders
rounded: 'borderRadius',
rounded: "borderRadius",
} as const,
tokens: {
shadow: {
'none': {
shadowColor: 'transparent',
none: {
shadowColor: "transparent",
shadowOffset: {

@@ -41,4 +41,4 @@ width: 0,

},
'0': {
shadowColor: '$backgroundLight800',
"0": {
shadowColor: "$backgroundLight800",
shadowOffset: {

@@ -52,4 +52,4 @@ width: 0,

},
'1': {
shadowColor: '$backgroundLight800',
"1": {
shadowColor: "$backgroundLight800",
shadowOffset: {

@@ -63,4 +63,4 @@ width: 0,

},
'2': {
shadowColor: '$backgroundLight800',
"2": {
shadowColor: "$backgroundLight800",
shadowOffset: {

@@ -74,4 +74,4 @@ width: 0,

},
'3': {
shadowColor: '$backgroundLight800',
"3": {
shadowColor: "$backgroundLight800",
shadowOffset: {

@@ -85,4 +85,4 @@ width: 0,

},
'4': {
shadowColor: '$backgroundLight800',
"4": {
shadowColor: "$backgroundLight800",
shadowOffset: {

@@ -96,4 +96,4 @@ width: 0,

},
'5': {
shadowColor: '$backgroundLight800',
"5": {
shadowColor: "$backgroundLight800",
shadowOffset: {

@@ -107,4 +107,4 @@ width: 0,

},
'6': {
shadowColor: 'b$backgroundLight800',
"6": {
shadowColor: "b$backgroundLight800",
shadowOffset: {

@@ -118,4 +118,4 @@ width: 0,

},
'7': {
shadowColor: '$backgroundLight800k',
"7": {
shadowColor: "$backgroundLight800k",
shadowOffset: {

@@ -129,4 +129,4 @@ width: 0,

},
'8': {
shadowColor: '$backgroundLight800',
"8": {
shadowColor: "$backgroundLight800",
shadowOffset: {

@@ -140,4 +140,4 @@ width: 0,

},
'9': {
shadowColor: '$backgroundLight800',
"9": {
shadowColor: "$backgroundLight800",
shadowOffset: {

@@ -153,501 +153,501 @@ width: 0,

colors: {
rose50: '#fff1f2',
rose100: '#ffe4e6',
rose200: '#fecdd3',
rose300: '#fda4af',
rose400: '#fb7185',
rose500: '#f43f5e',
rose600: '#e11d48',
rose700: '#be123c',
rose800: '#9f1239',
rose900: '#881337',
pink50: '#fdf2f8',
pink100: '#fce7f3',
pink200: '#fbcfe8',
pink300: '#f9a8d4',
pink400: '#f472b6',
pink500: '#ec4899',
pink600: '#db2777',
pink700: '#be185d',
pink800: '#9d174d',
pink900: '#831843',
fuchsia50: '#fdf4ff',
fuchsia100: '#fae8ff',
fuchsia200: '#f5d0fe',
fuchsia300: '#f0abfc',
fuchsia400: '#e879f9',
fuchsia500: '#d946ef',
fuchsia600: '#c026d3',
fuchsia700: '#a21caf',
fuchsia800: '#86198f',
fuchsia900: '#701a75',
purple50: '#faf5ff',
purple100: '#f3e8ff',
purple200: '#e9d5ff',
purple300: '#d8b4fe',
purple400: '#c084fc',
purple500: '#a855f7',
purple600: '#9333ea',
purple700: '#7e22ce',
purple800: '#6b21a8',
purple900: '#581c87',
violet50: '#f5f3ff',
violet100: '#ede9fe',
violet200: '#ddd6fe',
violet300: '#c4b5fd',
violet400: '#a78bfa',
violet500: '#8b5cf6',
violet600: '#7c3aed',
violet700: '#6d28d9',
violet800: '#5b21b6',
violet900: '#4c1d95',
indigo50: '#eef2ff',
indigo100: '#e0e7ff',
indigo200: '#c7d2fe',
indigo300: '#a5b4fc',
indigo400: '#818cf8',
indigo500: '#6366f1',
indigo600: '#4f46e5',
indigo700: '#4338ca',
indigo800: '#3730a3',
indigo900: '#312e81',
blue50: '#eff6ff',
blue100: '#dbeafe',
blue200: '#bfdbfe',
blue300: '#93c5fd',
blue400: '#60a5fa',
blue500: '#3b82f6',
blue600: '#2563eb',
blue600_alpha10: '#06b6d41a',
blue600_alpha20: '#06b6d433',
blue700: '#1d4ed8',
blue800: '#1e40af',
blue900: '#1e3a8a',
lightBlue50: '#f0f9ff',
lightBlue100: '#e0f2fe',
lightBlue200: '#bae6fd',
lightBlue300: '#7dd3fc',
lightBlue400: '#38bdf8',
lightBlue500: '#0ea5e9',
lightBlue600: '#0284c7',
lightBlue700: '#0369a1',
lightBlue800: '#075985',
lightBlue900: '#0c4a6e',
darkBlue50: '#dbf4ff',
darkBlue100: '#addbff',
darkBlue200: '#7cc2ff',
darkBlue300: '#4aa9ff',
darkBlue400: '#1a91ff',
darkBlue500: '#0077e6',
darkBlue600: '#005db4',
darkBlue700: '#004282',
darkBlue800: '#002851',
darkBlue900: '#000e21',
cyan50: '#ecfeff',
cyan100: '#cffafe',
cyan200: '#a5f3fc',
cyan300: '#67e8f9',
cyan400: '#22d3ee',
cyan500: '#06b6d4',
cyan600: '#0891b2',
cyan700: '#0e7490',
cyan800: '#155e75',
cyan900: '#164e63',
teal50: '#f0fdfa',
teal100: '#ccfbf1',
teal200: '#99f6e4',
teal300: '#5eead4',
teal400: '#2dd4bf',
teal500: '#14b8a6',
teal600: '#0d9488',
teal700: '#0f766e',
teal800: '#115e59',
teal900: '#134e4a',
emerald50: '#ecfdf5',
emerald100: '#d1fae5',
emerald200: '#a7f3d0',
emerald300: '#6ee7b7',
emerald400: '#34d399',
emerald500: '#10b981',
emerald600: '#059669',
emerald700: '#047857',
emerald800: '#065f46',
emerald900: '#064e3b',
green50: '#f0fdf4',
green100: '#dcfce7',
green200: '#bbf7d0',
green300: '#86efac',
green400: '#4ade80',
green500: '#22c55e',
green600: '#16a34a',
green700: '#15803d',
green800: '#166534',
green900: '#14532d',
lime50: '#f7fee7',
lime100: '#ecfccb',
lime200: '#d9f99d',
lime300: '#bef264',
lime400: '#a3e635',
lime500: '#84cc16',
lime600: '#65a30d',
lime700: '#4d7c0f',
lime800: '#3f6212',
lime900: '#365314',
yellow50: '#fefce8',
yellow100: '#fef9c3',
yellow200: '#fef08a',
yellow300: '#fde047',
yellow400: '#facc15',
yellow500: '#eab308',
yellow600: '#ca8a04',
yellow700: '#a16207',
yellow800: '#854d0e',
yellow900: '#713f12',
amber50: '#fffbeb',
amber100: '#fef3c7',
amber200: '#fde68a',
amber300: '#fcd34d',
amber400: '#fbbf24',
amber500: '#f59e0b',
amber600: '#d97706',
amber700: '#b45309',
amber800: '#92400e',
amber900: '#78350f',
orange50: '#fff7ed',
orange100: '#ffedd5',
orange200: '#fed7aa',
orange300: '#fdba74',
orange400: '#fb923c',
orange500: '#f97316',
orange600: '#ea580c',
orange700: '#c2410c',
orange800: '#9a3412',
orange900: '#7c2d12',
red50: '#fef2f2',
red100: '#fee2e2',
red200: '#fecaca',
red300: '#fca5a5',
red400: '#f87171',
red500: '#ef4444',
red600: '#dc2626',
red700: '#b91c1c',
red800: '#991b1b',
red900: '#7f1d1d',
warmGray50: '#fafaf9',
warmGray100: '#f5f5f4',
warmGray200: '#e7e5e4',
warmGray300: '#d6d3d1',
warmGray400: '#a8a29e',
warmGray500: '#78716c',
warmGray600: '#57534e',
warmGray700: '#44403c',
warmGray800: '#292524',
warmGray900: '#1c1917',
trueGray50: '#fafafa',
trueGray100: '#f5f5f5',
trueGray200: '#e5e5e5',
trueGray300: '#d4d4d4',
trueGray400: '#a3a3a3',
trueGray500: '#737373',
trueGray600: '#525252',
trueGray700: '#404040',
trueGray800: '#262626',
trueGray900: '#171717',
gray50: '#fafafa',
gray100: '#f4f4f5',
gray200: '#e4e4e7',
gray300: '#d4d4d8',
gray400: '#a1a1aa',
gray500: '#71717a',
gray600: '#52525b',
gray700: '#3f3f46',
gray800: '#27272a',
gray900: '#18181b',
coolGray50: '#f9fafb',
coolGray100: '#f3f4f6',
coolGray200: '#e5e7eb',
coolGray300: '#d1d5db',
coolGray400: '#9ca3af',
coolGray500: '#6b7280',
coolGray600: '#4b5563',
coolGray700: '#374151',
coolGray800: '#1f2937',
coolGray900: '#111827',
blueGray50: '#f8fafc',
blueGray100: '#f1f5f9',
blueGray200: '#e2e8f0',
blueGray300: '#cbd5e1',
blueGray400: '#94a3b8',
blueGray500: '#64748b',
blueGray600: '#475569',
blueGray700: '#334155',
blueGray800: '#1e293b',
blueGray900: '#0f172a',
dark50: '#18181b',
dark100: '#27272a',
dark200: '#3f3f46',
dark300: '#52525b',
dark400: '#71717a',
dark500: '#a1a1aa',
dark600: '#d4d4d8',
dark700: '#e4e4e7',
dark800: '#f4f4f5',
dark900: '#fafafa',
rose50: "#fff1f2",
rose100: "#ffe4e6",
rose200: "#fecdd3",
rose300: "#fda4af",
rose400: "#fb7185",
rose500: "#f43f5e",
rose600: "#e11d48",
rose700: "#be123c",
rose800: "#9f1239",
rose900: "#881337",
pink50: "#fdf2f8",
pink100: "#fce7f3",
pink200: "#fbcfe8",
pink300: "#f9a8d4",
pink400: "#f472b6",
pink500: "#ec4899",
pink600: "#db2777",
pink700: "#be185d",
pink800: "#9d174d",
pink900: "#831843",
fuchsia50: "#fdf4ff",
fuchsia100: "#fae8ff",
fuchsia200: "#f5d0fe",
fuchsia300: "#f0abfc",
fuchsia400: "#e879f9",
fuchsia500: "#d946ef",
fuchsia600: "#c026d3",
fuchsia700: "#a21caf",
fuchsia800: "#86198f",
fuchsia900: "#701a75",
purple50: "#faf5ff",
purple100: "#f3e8ff",
purple200: "#e9d5ff",
purple300: "#d8b4fe",
purple400: "#c084fc",
purple500: "#a855f7",
purple600: "#9333ea",
purple700: "#7e22ce",
purple800: "#6b21a8",
purple900: "#581c87",
violet50: "#f5f3ff",
violet100: "#ede9fe",
violet200: "#ddd6fe",
violet300: "#c4b5fd",
violet400: "#a78bfa",
violet500: "#8b5cf6",
violet600: "#7c3aed",
violet700: "#6d28d9",
violet800: "#5b21b6",
violet900: "#4c1d95",
indigo50: "#eef2ff",
indigo100: "#e0e7ff",
indigo200: "#c7d2fe",
indigo300: "#a5b4fc",
indigo400: "#818cf8",
indigo500: "#6366f1",
indigo600: "#4f46e5",
indigo700: "#4338ca",
indigo800: "#3730a3",
indigo900: "#312e81",
blue50: "#eff6ff",
blue100: "#dbeafe",
blue200: "#bfdbfe",
blue300: "#93c5fd",
blue400: "#60a5fa",
blue500: "#3b82f6",
blue600: "#2563eb",
blue600_alpha10: "#06b6d41a",
blue600_alpha20: "#06b6d433",
blue700: "#1d4ed8",
blue800: "#1e40af",
blue900: "#1e3a8a",
lightBlue50: "#f0f9ff",
lightBlue100: "#e0f2fe",
lightBlue200: "#bae6fd",
lightBlue300: "#7dd3fc",
lightBlue400: "#38bdf8",
lightBlue500: "#0ea5e9",
lightBlue600: "#0284c7",
lightBlue700: "#0369a1",
lightBlue800: "#075985",
lightBlue900: "#0c4a6e",
darkBlue50: "#dbf4ff",
darkBlue100: "#addbff",
darkBlue200: "#7cc2ff",
darkBlue300: "#4aa9ff",
darkBlue400: "#1a91ff",
darkBlue500: "#0077e6",
darkBlue600: "#005db4",
darkBlue700: "#004282",
darkBlue800: "#002851",
darkBlue900: "#000e21",
cyan50: "#ecfeff",
cyan100: "#cffafe",
cyan200: "#a5f3fc",
cyan300: "#67e8f9",
cyan400: "#22d3ee",
cyan500: "#06b6d4",
cyan600: "#0891b2",
cyan700: "#0e7490",
cyan800: "#155e75",
cyan900: "#164e63",
teal50: "#f0fdfa",
teal100: "#ccfbf1",
teal200: "#99f6e4",
teal300: "#5eead4",
teal400: "#2dd4bf",
teal500: "#14b8a6",
teal600: "#0d9488",
teal700: "#0f766e",
teal800: "#115e59",
teal900: "#134e4a",
emerald50: "#ecfdf5",
emerald100: "#d1fae5",
emerald200: "#a7f3d0",
emerald300: "#6ee7b7",
emerald400: "#34d399",
emerald500: "#10b981",
emerald600: "#059669",
emerald700: "#047857",
emerald800: "#065f46",
emerald900: "#064e3b",
green50: "#f0fdf4",
green100: "#dcfce7",
green200: "#bbf7d0",
green300: "#86efac",
green400: "#4ade80",
green500: "#22c55e",
green600: "#16a34a",
green700: "#15803d",
green800: "#166534",
green900: "#14532d",
lime50: "#f7fee7",
lime100: "#ecfccb",
lime200: "#d9f99d",
lime300: "#bef264",
lime400: "#a3e635",
lime500: "#84cc16",
lime600: "#65a30d",
lime700: "#4d7c0f",
lime800: "#3f6212",
lime900: "#365314",
yellow50: "#fefce8",
yellow100: "#fef9c3",
yellow200: "#fef08a",
yellow300: "#fde047",
yellow400: "#facc15",
yellow500: "#eab308",
yellow600: "#ca8a04",
yellow700: "#a16207",
yellow800: "#854d0e",
yellow900: "#713f12",
amber50: "#fffbeb",
amber100: "#fef3c7",
amber200: "#fde68a",
amber300: "#fcd34d",
amber400: "#fbbf24",
amber500: "#f59e0b",
amber600: "#d97706",
amber700: "#b45309",
amber800: "#92400e",
amber900: "#78350f",
orange50: "#fff7ed",
orange100: "#ffedd5",
orange200: "#fed7aa",
orange300: "#fdba74",
orange400: "#fb923c",
orange500: "#f97316",
orange600: "#ea580c",
orange700: "#c2410c",
orange800: "#9a3412",
orange900: "#7c2d12",
red50: "#fef2f2",
red100: "#fee2e2",
red200: "#fecaca",
red300: "#fca5a5",
red400: "#f87171",
red500: "#ef4444",
red600: "#dc2626",
red700: "#b91c1c",
red800: "#991b1b",
red900: "#7f1d1d",
warmGray50: "#fafaf9",
warmGray100: "#f5f5f4",
warmGray200: "#e7e5e4",
warmGray300: "#d6d3d1",
warmGray400: "#a8a29e",
warmGray500: "#78716c",
warmGray600: "#57534e",
warmGray700: "#44403c",
warmGray800: "#292524",
warmGray900: "#1c1917",
trueGray50: "#fafafa",
trueGray100: "#f5f5f5",
trueGray200: "#e5e5e5",
trueGray300: "#d4d4d4",
trueGray400: "#a3a3a3",
trueGray500: "#737373",
trueGray600: "#525252",
trueGray700: "#404040",
trueGray800: "#262626",
trueGray900: "#171717",
gray50: "#fafafa",
gray100: "#f4f4f5",
gray200: "#e4e4e7",
gray300: "#d4d4d8",
gray400: "#a1a1aa",
gray500: "#71717a",
gray600: "#52525b",
gray700: "#3f3f46",
gray800: "#27272a",
gray900: "#18181b",
coolGray50: "#f9fafb",
coolGray100: "#f3f4f6",
coolGray200: "#e5e7eb",
coolGray300: "#d1d5db",
coolGray400: "#9ca3af",
coolGray500: "#6b7280",
coolGray600: "#4b5563",
coolGray700: "#374151",
coolGray800: "#1f2937",
coolGray900: "#111827",
blueGray50: "#f8fafc",
blueGray100: "#f1f5f9",
blueGray200: "#e2e8f0",
blueGray300: "#cbd5e1",
blueGray400: "#94a3b8",
blueGray500: "#64748b",
blueGray600: "#475569",
blueGray700: "#334155",
blueGray800: "#1e293b",
blueGray900: "#0f172a",
dark50: "#18181b",
dark100: "#27272a",
dark200: "#3f3f46",
dark300: "#52525b",
dark400: "#71717a",
dark500: "#a1a1aa",
dark600: "#d4d4d8",
dark700: "#e4e4e7",
dark800: "#f4f4f5",
dark900: "#fafafa",
// Will keep following colors
white: '#FFFFFF',
black: '#000000',
secondary0: '#FCFCFC',
secondary50: '#F5F5F5',
secondary100: '#E5E5E5',
secondary200: '#DBDBDB',
secondary300: '#D4D4D4',
secondary400: '#A3A3A3',
secondary500: '#8C8C8C',
secondary600: '#737373',
secondary700: '#525252',
secondary800: '#404040',
secondary900: '#262626',
secondary950: '#171717',
tertiary50: '#ecfdf5',
tertiary100: '#d1fae5',
tertiary200: '#a7f3d0',
tertiary300: '#6ee7b7',
tertiary400: '#34d399',
tertiary500: '#10b981',
tertiary600: '#059669',
tertiary700: '#047857',
tertiary800: '#065f46',
tertiary900: '#064e3b',
danger50: '#fff1f2',
danger100: '#ffe4e6',
danger200: '#fecdd3',
danger300: '#fda4af',
danger400: '#fb7185',
danger500: '#f43f5e',
danger600: '#e11d48',
danger700: '#be123c',
danger800: '#9f1239',
danger900: '#881337',
error50: '#fef2f2',
error100: '#fee2e2',
error200: '#fecaca',
error300: '#fca5a5',
error400: '#f87171',
error500: '#ef4444',
error600: '#dc2626',
error700: '#b91c1c',
error800: '#991b1b',
error900: '#7f1d1d',
success50: '#f0fdf4',
success100: '#dcfce7',
success200: '#bbf7d0',
success300: '#86efac',
success400: '#4ade80',
success500: '#22c55e',
success600: '#16a34a',
success700: '#15803d',
success800: '#166534',
success900: '#14532d',
warning50: '#fff7ed',
warning100: '#ffedd5',
warning200: '#fed7aa',
warning300: '#fdba74',
warning400: '#fb923c',
warning500: '#f97316',
warning600: '#ea580c',
warning700: '#c2410c',
warning800: '#9a3412',
warning900: '#7c2d12',
muted50: '#fafafa',
muted100: '#f5f5f5',
muted200: '#e5e5e5',
muted300: '#d4d4d4',
muted400: '#a3a3a3',
muted500: '#737373',
muted600: '#525252',
muted700: '#404040',
muted800: '#262626',
muted900: '#171717',
info50: '#f0f9ff',
info100: '#e0f2fe',
info200: '#bae6fd',
info300: '#7dd3fc',
info400: '#38bdf8',
info500: '#0ea5e9',
info600: '#0284c7',
info700: '#0369a1',
info800: '#075985',
info900: '#0c4a6e',
light50: '#fafaf9',
light100: '#f5f5f4',
light200: '#e7e5e4',
light300: '#d6d3d1',
light400: '#a8a29e',
light500: '#78716c',
light600: '#57534e',
light700: '#44403c',
light800: '#292524',
light900: '#1c1917',
textLight0: '#FCFCFC',
textLight50: '#F5F5F5',
textLight100: '#E5E5E5',
textLight200: '#DBDBDB',
textLight300: '#D4D4D4',
textLight400: '#A3A3A3',
textLight500: '#8C8C8C',
textLight600: '#737373',
textLight700: '#525252',
textLight800: '#404040',
textLight900: '#262626',
textLight950: '#171717',
textDark0: '#FCFCFC',
textDark50: '#F5F5F5',
textDark100: '#E5E5E5',
textDark200: '#DBDBDB',
textDark300: '#D4D4D4',
textDark400: '#A3A3A3',
textDark500: '#8C8C8C',
textDark600: '#737373',
textDark700: '#525252',
textDark800: '#404040',
textDark900: '#262626',
textDark950: '#171717',
borderDark0: '#FCFCFC',
borderDark50: '#F5F5F5',
borderDark100: '#E5E5E5',
borderDark200: '#DBDBDB',
borderDark300: '#D4D4D4',
borderDark400: '#A3A3A3',
borderDark500: '#8C8C8C',
borderDark600: '#737373',
borderDark700: '#525252',
borderDark800: '#404040',
borderDark900: '#262626',
borderDark950: '#171717',
borderLight0: '#FCFCFC',
borderLight50: '#F5F5F5',
borderLight100: '#E5E5E5',
borderLight200: '#DBDBDB',
borderLight300: '#D4D4D4',
borderLight400: '#A3A3A3',
borderLight500: '#8C8C8C',
borderLight600: '#737373',
borderLight700: '#525252',
borderLight800: '#404040',
borderLight900: '#262626',
borderLight950: '#171717',
backgroundDark0: '#FCFCFC',
backgroundDark50: '#F5F5F5',
backgroundDark100: '#E5E5E5',
backgroundDark200: '#DBDBDB',
backgroundDark300: '#D4D4D4',
backgroundDark400: '#A3A3A3',
backgroundDark500: '#8C8C8C',
backgroundDark600: '#737373',
backgroundDark700: '#525252',
backgroundDark800: '#404040',
backgroundDark900: '#262626',
backgroundDark950: '#171717',
backgroundLight0: '#FCFCFC',
backgroundLight50: '#F5F5F5',
backgroundLight100: '#E5E5E5',
backgroundLight200: '#DBDBDB',
backgroundLight300: '#D4D4D4',
backgroundLight400: '#A3A3A3',
backgroundLight500: '#8C8C8C',
backgroundLight600: '#737373',
backgroundLight700: '#525252',
backgroundLight800: '#404040',
backgroundLight900: '#262626',
backgroundLight950: '#171717',
primary0: '#E5F1FB',
primary50: '#CCE9FF',
primary100: '#ADDBFF',
primary200: '#7CC2FF',
primary300: '#4AA9FF',
primary400: '#1A91FF',
primary500: '#0077E6',
primary600: '#005DB4',
primary600_alpha60: '#5C93C8',
primary700: '#004282',
primary800: '#002851',
primary900: '#011838',
primary950: '#000711',
backgroundLightError: '#FEF1F1',
backgroundDarkError: '#2E2020',
backgroundLightWarning: '#FFF4EB',
backgroundDarkWarning: '#2E231B',
backgroundLightSuccess: '#EDFCF2',
backgroundDarkSuccess: '#1C2B21',
backgroundLightInfo: '#EBF8FE',
backgroundDarkInfo: '#1A282E',
backgroundLightMuted: '#F6F6F7',
backgroundDarkMuted: '#252526',
white: "#FFFFFF",
black: "#000000",
secondary0: "#FCFCFC",
secondary50: "#F5F5F5",
secondary100: "#E5E5E5",
secondary200: "#DBDBDB",
secondary300: "#D4D4D4",
secondary400: "#A3A3A3",
secondary500: "#8C8C8C",
secondary600: "#737373",
secondary700: "#525252",
secondary800: "#404040",
secondary900: "#262626",
secondary950: "#171717",
tertiary50: "#ecfdf5",
tertiary100: "#d1fae5",
tertiary200: "#a7f3d0",
tertiary300: "#6ee7b7",
tertiary400: "#34d399",
tertiary500: "#10b981",
tertiary600: "#059669",
tertiary700: "#047857",
tertiary800: "#065f46",
tertiary900: "#064e3b",
danger50: "#fff1f2",
danger100: "#ffe4e6",
danger200: "#fecdd3",
danger300: "#fda4af",
danger400: "#fb7185",
danger500: "#f43f5e",
danger600: "#e11d48",
danger700: "#be123c",
danger800: "#9f1239",
danger900: "#881337",
error50: "#fef2f2",
error100: "#fee2e2",
error200: "#fecaca",
error300: "#fca5a5",
error400: "#f87171",
error500: "#ef4444",
error600: "#dc2626",
error700: "#b91c1c",
error800: "#991b1b",
error900: "#7f1d1d",
success50: "#f0fdf4",
success100: "#dcfce7",
success200: "#bbf7d0",
success300: "#86efac",
success400: "#4ade80",
success500: "#22c55e",
success600: "#16a34a",
success700: "#15803d",
success800: "#166534",
success900: "#14532d",
warning50: "#fff7ed",
warning100: "#ffedd5",
warning200: "#fed7aa",
warning300: "#fdba74",
warning400: "#fb923c",
warning500: "#f97316",
warning600: "#ea580c",
warning700: "#c2410c",
warning800: "#9a3412",
warning900: "#7c2d12",
muted50: "#fafafa",
muted100: "#f5f5f5",
muted200: "#e5e5e5",
muted300: "#d4d4d4",
muted400: "#a3a3a3",
muted500: "#737373",
muted600: "#525252",
muted700: "#404040",
muted800: "#262626",
muted900: "#171717",
info50: "#f0f9ff",
info100: "#e0f2fe",
info200: "#bae6fd",
info300: "#7dd3fc",
info400: "#38bdf8",
info500: "#0ea5e9",
info600: "#0284c7",
info700: "#0369a1",
info800: "#075985",
info900: "#0c4a6e",
light50: "#fafaf9",
light100: "#f5f5f4",
light200: "#e7e5e4",
light300: "#d6d3d1",
light400: "#a8a29e",
light500: "#78716c",
light600: "#57534e",
light700: "#44403c",
light800: "#292524",
light900: "#1c1917",
textLight0: "#FCFCFC",
textLight50: "#F5F5F5",
textLight100: "#E5E5E5",
textLight200: "#DBDBDB",
textLight300: "#D4D4D4",
textLight400: "#A3A3A3",
textLight500: "#8C8C8C",
textLight600: "#737373",
textLight700: "#525252",
textLight800: "#404040",
textLight900: "#262626",
textLight950: "#171717",
textDark0: "#FCFCFC",
textDark50: "#F5F5F5",
textDark100: "#E5E5E5",
textDark200: "#DBDBDB",
textDark300: "#D4D4D4",
textDark400: "#A3A3A3",
textDark500: "#8C8C8C",
textDark600: "#737373",
textDark700: "#525252",
textDark800: "#404040",
textDark900: "#262626",
textDark950: "#171717",
borderDark0: "#FCFCFC",
borderDark50: "#F5F5F5",
borderDark100: "#E5E5E5",
borderDark200: "#DBDBDB",
borderDark300: "#D4D4D4",
borderDark400: "#A3A3A3",
borderDark500: "#8C8C8C",
borderDark600: "#737373",
borderDark700: "#525252",
borderDark800: "#404040",
borderDark900: "#262626",
borderDark950: "#171717",
borderLight0: "#FCFCFC",
borderLight50: "#F5F5F5",
borderLight100: "#E5E5E5",
borderLight200: "#DBDBDB",
borderLight300: "#D4D4D4",
borderLight400: "#A3A3A3",
borderLight500: "#8C8C8C",
borderLight600: "#737373",
borderLight700: "#525252",
borderLight800: "#404040",
borderLight900: "#262626",
borderLight950: "#171717",
backgroundDark0: "#FCFCFC",
backgroundDark50: "#F5F5F5",
backgroundDark100: "#E5E5E5",
backgroundDark200: "#DBDBDB",
backgroundDark300: "#D4D4D4",
backgroundDark400: "#A3A3A3",
backgroundDark500: "#8C8C8C",
backgroundDark600: "#737373",
backgroundDark700: "#525252",
backgroundDark800: "#404040",
backgroundDark900: "#262626",
backgroundDark950: "#171717",
backgroundLight0: "#FCFCFC",
backgroundLight50: "#F5F5F5",
backgroundLight100: "#E5E5E5",
backgroundLight200: "#DBDBDB",
backgroundLight300: "#D4D4D4",
backgroundLight400: "#A3A3A3",
backgroundLight500: "#8C8C8C",
backgroundLight600: "#737373",
backgroundLight700: "#525252",
backgroundLight800: "#404040",
backgroundLight900: "#262626",
backgroundLight950: "#171717",
primary0: "#E5F1FB",
primary50: "#CCE9FF",
primary100: "#ADDBFF",
primary200: "#7CC2FF",
primary300: "#4AA9FF",
primary400: "#1A91FF",
primary500: "#0077E6",
primary600: "#005DB4",
primary600_alpha60: "#5C93C8",
primary700: "#004282",
primary800: "#002851",
primary900: "#011838",
primary950: "#000711",
backgroundLightError: "#FEF1F1",
backgroundDarkError: "#2E2020",
backgroundLightWarning: "#FFF4EB",
backgroundDarkWarning: "#2E231B",
backgroundLightSuccess: "#EDFCF2",
backgroundDarkSuccess: "#1C2B21",
backgroundLightInfo: "#EBF8FE",
backgroundDarkInfo: "#1A282E",
backgroundLightMuted: "#F6F6F7",
backgroundDarkMuted: "#252526",
},
space: {
'px': '1px',
'0': 0,
'0.5': 2,
'1': 4,
'1.5': 6,
'2': 8,
'2.5': 10,
'3': 12,
'3.5': 14,
'4': 16,
'4.5': 18,
'5': 20,
'6': 24,
'7': 28,
'8': 32,
'9': 36,
'10': 40,
'11': 44,
'12': 48,
'16': 64,
'20': 80,
'24': 96,
'32': 128,
'40': 160,
'48': 192,
'56': 224,
'64': 256,
'72': 288,
'80': 320,
'96': 384,
'1/2': '50%',
'1/3': '33.333%',
'2/3': '66.666%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.666%',
'2/6': '33.333%',
'3/6': '50%',
'4/6': '66.666%',
'5/6': '83.333%',
'full': '100%',
px: "1px",
"0": 0,
"0.5": 2,
"1": 4,
"1.5": 6,
"2": 8,
"2.5": 10,
"3": 12,
"3.5": 14,
"4": 16,
"4.5": 18,
"5": 20,
"6": 24,
"7": 28,
"8": 32,
"9": 36,
"10": 40,
"11": 44,
"12": 48,
"16": 64,
"20": 80,
"24": 96,
"32": 128,
"40": 160,
"48": 192,
"56": 224,
"64": 256,
"72": 288,
"80": 320,
"96": 384,
"1/2": "50%",
"1/3": "33.333%",
"2/3": "66.666%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
"1/5": "20%",
"2/5": "40%",
"3/5": "60%",
"4/5": "80%",
"1/6": "16.666%",
"2/6": "33.333%",
"3/6": "50%",
"4/6": "66.666%",
"5/6": "83.333%",
full: "100%",
},
borderWidths: {
'0': 0,
'1': 1,
'2': 2,
'4': 4,
'8': 8,
"0": 0,
"1": 1,
"2": 2,
"4": 4,
"8": 8,
},
radii: {
'none': 0,
'xs': 2,
'sm': 4,
'md': 6,
'lg': 8,
'xl': 12,
'2xl': 16,
'3xl': 24,
'full': 9999,
none: 0,
xs: 2,
sm: 4,
md: 6,
lg: 8,
xl: 12,
"2xl": 16,
"3xl": 24,
full: 9999,
},

@@ -662,42 +662,42 @@ breakpoints: {

mediaQueries: {
base: '@media screen and (min-width: 0)',
xs: '@media screen and (min-width: 400px)',
sm: '@media screen and (min-width: 480px)',
md: '@media screen and (min-width: 768px)',
lg: '@media screen and (min-width: 992px)',
xl: '@media screen and (min-width: 1280px)',
base: "@media screen and (min-width: 0)",
xs: "@media screen and (min-width: 400px)",
sm: "@media screen and (min-width: 480px)",
md: "@media screen and (min-width: 768px)",
lg: "@media screen and (min-width: 992px)",
xl: "@media screen and (min-width: 1280px)",
},
letterSpacings: {
'xs': -0.4,
'sm': -0.2,
'md': 0,
'lg': 0.2,
'xl': 0.4,
'2xl': 1.6,
xs: -0.4,
sm: -0.2,
md: 0,
lg: 0.2,
xl: 0.4,
"2xl": 1.6,
},
lineHeights: {
'2xs': 16,
'xs': 18,
'sm': 20,
'md': 22,
'lg': 24,
'xl': 28,
'2xl': 32,
'3xl': 40,
'4xl': 48,
'5xl': 56,
'6xl': 72,
'7xl': 90,
"2xs": 16,
xs: 18,
sm: 20,
md: 22,
lg: 24,
xl: 28,
"2xl": 32,
"3xl": 40,
"4xl": 48,
"5xl": 56,
"6xl": 72,
"7xl": 90,
},
fontWeights: {
hairline: '100',
thin: '200',
light: '300',
normal: '400',
medium: '500',
semibold: '600',
bold: '700',
extrabold: '800',
black: '900',
extraBlack: '950',
hairline: "100",
thin: "200",
light: "300",
normal: "400",
medium: "500",
semibold: "600",
bold: "700",
extrabold: "800",
black: "900",
extraBlack: "950",
},

@@ -710,16 +710,16 @@ fonts: {

fontSizes: {
'2xs': 10,
'xs': 12,
'sm': 14,
'md': 16,
'lg': 18,
'xl': 20,
'2xl': 24,
'3xl': 30,
'4xl': 36,
'5xl': 48,
'6xl': 60,
'7xl': 72,
'8xl': 96,
'9xl': 128,
"2xs": 10,
xs: 12,
sm: 14,
md: 16,
lg: 18,
xl: 20,
"2xl": 24,
"3xl": 30,
"4xl": 36,
"5xl": 48,
"6xl": 60,
"7xl": 72,
"8xl": 96,
"9xl": 128,
},

@@ -747,4 +747,4 @@ opacity: {

type Config = typeof config.theme;
declare module '@gluestack-style/react' {
declare module "@gluestack-style/react" {
interface ICustomConfig extends Config {}
}

38

src/app-router/package.json
{
"name": "nextjs-app-router",
"description": "Next.js app router with gluestack-ui template",
"version": "0.1.0",

@@ -16,17 +17,7 @@ "private": true,

"dependencies": {
"@types/node": "20.3.2",
"@types/react": "18.2.14",
"@types/react-dom": "18.2.6",
"next": "13.4.7",
"react": "18.2.0",
"react-dom": "18.2.0",
"typescript": "5.1.3",
"@expo/html-elements": "latest",
"@expo/next-adapter": "^5.0.2",
"@gluestack-style/animation-plugin": "latest",
"@gluestack-style/react": "latest",
"@gluestack-ui/provider": "latest",
"@gluestack-style/animation-plugin": "latest",
"@gluestack/ui-next-adapter": "latest",
"@gluestack-ui/actionsheet": "latest",
"@legendapp/motion": "latest",
"@gluestack-ui/icon": "latest",
"react-native-svg": "latest",
"@gluestack-ui/alert": "latest",

@@ -41,3 +32,3 @@ "@gluestack-ui/alert-dialog": "latest",

"@gluestack-ui/hstack": "latest",
"@expo/html-elements": "latest",
"@gluestack-ui/icon": "latest",
"@gluestack-ui/input": "latest",

@@ -50,2 +41,3 @@ "@gluestack-ui/link": "latest",

"@gluestack-ui/progress": "latest",
"@gluestack-ui/provider": "latest",
"@gluestack-ui/radio": "latest",

@@ -60,9 +52,19 @@ "@gluestack-ui/select": "latest",

"@gluestack-ui/tooltip": "latest",
"@gluestack-ui/vstack": "latest"
"@gluestack-ui/vstack": "latest",
"@gluestack/ui-next-adapter": "latest",
"@legendapp/motion": "latest",
"@types/node": "20.3.2",
"@types/react": "18.2.14",
"@types/react-dom": "18.2.6",
"next": "13.4.7",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native-svg": "latest",
"react-native-web": ">=0.18.12",
"typescript": "5.1.3"
},
"devDependencies": {
"react-native-web": "^0.18.12",
"react-native": "^0.70.7",
"@types/react-native": "^0.71.6"
}
},
"peerDependencies": {}
}

14

src/app-router/README.md

@@ -1,2 +0,2 @@

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
This is a [Next.js](https://nextjs.org/) + [Gluestack-ui](https://ui.gluestack.io/) project template bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

@@ -19,2 +19,4 @@ ## Getting Started

This project uses [`@gluestack-ui`](https://ui.gluestack.io/docs/overview/introduction) library that provides optionally styled and accessible components. These components are designed for easy integration into applications developed with React and React Native.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

@@ -24,8 +26,12 @@

To learn more about Next.js, take a look at the following resources:
To learn more about Next.js + Gluestack UI template, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
- [Gluestack UI Documenatation](https://ui.gluestack.io/docs/overview/introduction) - learn about core concepts and architecture of gluestack-ui.
- [Gluestack Style Documentaion](https://style.gluestack.io/docs/overview/introduction) - learn about the universal styling library that is used in Gluestack-ui
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
You can check out:
- [the gluestack-ui GitHub repository](https://github.com/gluestack/gluestack-ui)
- [the gluestack-style GitHub repository](https://github.com/gluestack/gluestack-style)
Your feedback and contributions are welcome!

@@ -32,0 +38,0 @@ ## Deploy on Vercel

152

src/index.ts

@@ -6,8 +6,8 @@ #!/usr/bin/env node

import {
cancel,
isCancel,
log,
multiselect,
spinner,
text,
cancel,
isCancel,
log,
multiselect,
spinner,
text,
} from '@clack/prompts';

@@ -18,82 +18,82 @@ import { select } from '@clack/prompts';

function installDependencies(projectName: string) {
const projectPath = path.join(process.cwd(), projectName);
// try {
// execSync(`cd ${projectPath} && yarn`);
// console.log('Yarn command executed successfully.');
// } catch (error) {
// console.error(`Error executing yarn: ${error}`);
// }
const projectPath = path.join(process.cwd(), projectName);
// try {
// execSync(`cd ${projectPath} && yarn`);
// console.log('Yarn command executed successfully.');
// } catch (error) {
// console.error(`Error executing yarn: ${error}`);
// }
const s = spinner();
s.start('⏳ Installing dependencies...');
const s = spinner();
s.start('⏳ Installing dependencies...');
try {
spawnSync(
`yarn && git init && touch .gitignore
try {
spawnSync(
`yarn && git init && touch .gitignore
echo "node_modules .next" >> .gitignore`,
{
cwd: projectPath,
stdio: 'inherit',
shell: true,
}
);
s.stop(`\x1b[32mDependencies have been installed successfully.\x1b[0m`);
} catch (err) {
log.error(`\x1b[31mError: ${err}\x1b[0m`);
log.error('\x1b[31mError installing dependencies:\x1b[0m');
log.warning(` - Run \x1b[33m yarn \x1b[0m manually!`);
throw new Error('Error installing dependencies.');
}
{
cwd: projectPath,
stdio: 'inherit',
shell: true,
}
);
s.stop(`\x1b[32mDependencies have been installed successfully.\x1b[0m`);
} catch (err) {
log.error(`\x1b[31mError: ${err}\x1b[0m`);
log.error('\x1b[31mError installing dependencies:\x1b[0m');
log.warning(` - Run \x1b[33m yarn \x1b[0m manually!`);
throw new Error('Error installing dependencies.');
}
}
async function main() {
let projectPath = path.join(
path.resolve(__dirname, '..'),
'src',
'page-router'
);
let projectPath = path.join(
path.resolve(__dirname, '..'),
'src',
'page-router'
);
const projectType = await select({
message: 'Pick a project type.',
options: [
{
value: 'app-router',
label: 'nextjs app Router',
hint: 'Next versions 13.4 and React server components support',
},
{
value: 'page-router',
label: 'nextjs page router',
hint: 'Next js page routing',
},
],
});
if (isCancel(projectType)) {
cancel('Operation cancelled.');
process.exit(0);
}
if (projectType === 'app-router') {
projectPath = path.join(path.resolve(__dirname, '..'), 'src', 'app-router');
}
const projectType = await select({
message: 'Pick a project type.',
options: [
{
value: 'app-router',
label: 'nextjs app Router',
hint: 'Next versions 13.4 and React server components support',
},
{
value: 'page-router',
label: 'nextjs page router',
hint: 'Next js page routing',
},
],
});
if (isCancel(projectType)) {
cancel('Operation cancelled.');
process.exit(0);
}
if (projectType === 'app-router') {
projectPath = path.join(path.resolve(__dirname, '..'), 'src', 'app-router');
}
const projectName = await text({
message: 'What is the name of your application?',
placeholder: 'my-app',
defaultValue: 'my-app',
// validate(value) {
// if (value.length === 0) return `Value is required!`;
// },
});
if (isCancel(projectName)) {
cancel('Operation cancelled.');
process.exit(0);
}
// copy directory
const data = fs.cpSync(projectPath, path.join(process.cwd(), projectName), {
recursive: true,
});
const projectName = await text({
message: 'What is the name of your application?',
placeholder: 'my-app',
defaultValue: 'my-app',
// validate(value) {
// if (value.length === 0) return `Value is required!`;
// },
});
if (isCancel(projectName)) {
cancel('Operation cancelled.');
process.exit(0);
}
// copy directory
const data = fs.cpSync(projectPath, path.join(process.cwd(), projectName), {
recursive: true,
});
installDependencies(projectName);
installDependencies(projectName);
}
main();
main();

12

src/page-router/package.json

@@ -5,2 +5,6 @@ {

"private": true,
"repository": {
"type": "git",
"url": "https://github.com/gluestack/nextjs-page-router.git"
},
"scripts": {

@@ -54,9 +58,9 @@ "dev": "next dev",

"@gluestack-ui/tooltip": "latest",
"@gluestack-ui/vstack": "latest"
"@gluestack-ui/vstack": "latest",
"react-native-web": ">=0.18.12"
},
"devDependencies": {
"react-native-web": "^0.18.12",
"react-native": "^0.70.7",
"@types/react-native": "^0.71.6"
}
},
"peerDependencies": {}
}

18

src/page-router/README.md

@@ -1,2 +0,2 @@

This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
This is a [Next.js](https://nextjs.org/) + [Gluestack-ui](https://ui.gluestack.io/) project template bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

@@ -17,8 +17,6 @@ ## Getting Started

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
This project uses [`@gluestack-ui`](https://ui.gluestack.io/docs/overview/introduction) library that provides optionally styled and accessible components. These components are designed for easy integration into applications developed with React and React Native.
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

@@ -28,8 +26,12 @@

To learn more about Next.js, take a look at the following resources:
To learn more about Next.js + Gluestack UI template, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
- [Gluestack UI Documenatation](https://ui.gluestack.io/docs/overview/introduction) - learn about core concepts and architecture of gluestack-ui.
- [Gluestack Style Documentaion](https://style.gluestack.io/docs/overview/introduction) - learn about the universal styling library that is used in Gluestack-ui
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
You can check out:
- [the gluestack-ui GitHub repository](https://github.com/gluestack/gluestack-ui)
- [the gluestack-style GitHub repository](https://github.com/gluestack/gluestack-style)
Your feedback and contributions are welcome!

@@ -36,0 +38,0 @@ ## Deploy on Vercel

dist/index.d.ts
src/app-router/package-lock.json
src/app-router/yarn.lock
src/page-router/package-lock.json
src/page-router/yarn.lock
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc