diff --git a/.eslintignore b/.eslintignore index 4be2f8fc5e..ce41e4260b 100644 --- a/.eslintignore +++ b/.eslintignore @@ -16,3 +16,4 @@ babel.config.js example/storybook/__tests__/* +example/storybook/* \ No newline at end of file diff --git a/README.md b/README.md index 19266ae74e..aac6aa886a 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ gluestack-ui is a library of copy-pasteable components & patterns crafted with T

- gluestack-ui logo + gluestack-ui logo

diff --git a/_template/package-template/package.json b/_template/package-template/package.json deleted file mode 100644 index 9ac28824b4..0000000000 --- a/_template/package-template/package.json +++ /dev/null @@ -1,57 +0,0 @@ -{ - "name": "@gluestack/template", - "version": "0.0.1", - "main": "lib/commonjs/index", - "module": "lib/module/index", - "types": "lib/typescript/index.d.ts", - "react-native": "src/index", - "source": "src/index", - "typings": "lib/typescript/index.d.ts", - "scripts": { - "build": "bob build", - "clean": "rm -rf lib", - "dev:web": "cd example/native && yarn web --clear" - }, - "devDependencies": { - "@types/react": "^18.0.22", - "@types/react-native": "^0.72.3", - "babel-plugin-transform-remove-console": "^6.9.4", - "react": "^18.1.0", - "react-dom": "18.1.0", - "react-native": "^0.72.4", - "react-native-builder-bob": "^0.20.1", - "react-native-web": "^0.19.9", - "tsconfig": "*", - "typescript": "^4.7.4" - }, - "dependencies": { - "@expo/html-elements": "^0.2.2", - "@gluestack/styled": "*", - "@react-native-aria/focus": "^0.2.9", - "lodash.merge": "^4.6.2" - }, - "peerDependencies": { - "react": "*", - "react-dom": "*", - "react-native": "*", - "react-native-web": "*" - }, - "react-native-builder-bob": { - "source": "src", - "output": "lib", - "targets": [ - "commonjs", - [ - "module", - { - "babelrc": true - } - ], - "typescript" - ] - }, - "files": [ - "lib/", - "src/" - ] -} diff --git a/img/gluestack-banner.png b/assets/gluestack-banner.png similarity index 100% rename from img/gluestack-banner.png rename to assets/gluestack-banner.png diff --git a/img/gluestack-logo.svg b/assets/gluestack-logo.svg similarity index 100% rename from img/gluestack-logo.svg rename to assets/gluestack-logo.svg diff --git a/img/gluestack-ui-banner.svg b/assets/gluestack-ui-banner.svg similarity index 100% rename from img/gluestack-ui-banner.svg rename to assets/gluestack-ui-banner.svg diff --git a/example/babel-plugin-styled-resolver-expo/.gitignore b/example/babel-plugin-styled-resolver-expo/.gitignore deleted file mode 100644 index ec8a36a257..0000000000 --- a/example/babel-plugin-styled-resolver-expo/.gitignore +++ /dev/null @@ -1,14 +0,0 @@ -node_modules/ -.expo/ -dist/ -npm-debug.* -*.jks -*.p8 -*.p12 -*.key -*.mobileprovision -*.orig.* -web-build/ - -# macOS -.DS_Store diff --git a/example/babel-plugin-styled-resolver-expo/App.web.tsx b/example/babel-plugin-styled-resolver-expo/App.web.tsx deleted file mode 100644 index 05c35d0e5d..0000000000 --- a/example/babel-plugin-styled-resolver-expo/App.web.tsx +++ /dev/null @@ -1,630 +0,0 @@ -// import { StatusBar } from "expo-status-bar"; -// @ts-nocheck -import { Text } from 'react-native'; -// import { useState } from 'react'; -import { styled, StyledProvider } from '@gluestack-style/react'; -import { config } from './gluestack-ui.config'; -// import { MyButton1 } from './Button1'; -// import { MyButton2 } from './Button2'; -// import { MyButton3 } from './Button3'; -// import { MyButton4 } from './Button4'; -// import ButtonComponents from './Button5'; -import { Button } from './Button'; - -// import { createConfig } from 'gluestack-style'; -// createConfig(config); -// onReady((config) => { -// console.log(config); -// }); - -// import MyButton from './styled-components/StyledButton/index'; -// import MyButtonText from './styled-components/StyledButton/StyledButtonText'; - -// import { -// set as setColorMode, -// get as getColorMode, -// onChange, -// } from '@gluestack/color-mode'; - -// window['setColorMode'] = setColorMode; -// window['getColorMode'] = getColorMode; - -// onChange((colorMode) => { -// //console.log('color mode', colorMode); -// if (colorMode === 'dark') { -// document.body.classList.remove('gs-light'); -// document.body.classList.add('gs-dark'); -// } else if (colorMode === 'light') { -// document.body.classList.remove('gs-dark'); -// document.body.classList.add('gs-light'); -// } else { -// document.body.classList.remove('gs-light'); -// document.body.classList.remove('gs-dark'); -// } -// }); - -// const MyButton = styled( -// Pressable, -// { -// baseStyle: { -// style: { -// bg: '$green500', -// p: '$3', -// shadow: '$4', -// }, - -// colorMode: { -// dark: { -// style: { -// bg: 'aqua', -// }, -// }, -// }, -// queries: [ -// { -// condition: '$md', -// value: { -// style: { -// bg: 'blue', -// }, -// state: { -// hover: { -// style: { -// bg: 'aqua', -// }, -// hover: { -// style: { -// bg: 'red', -// }, -// }, - -// colorMode: { -// dark: { -// style: { -// bg: 'purple', -// }, -// }, -// light: { -// style: { -// bg: 'aqua', -// }, -// }, -// }, -// state: { -// hover: { -// style: { -// bg: '$yellow500', -// }, -// }, -// }, -// }, -// }, -// }, -// }, -// ], - -// // state: { -// // hover: { -// // style: { -// // bg: '$green500', -// // }, -// // // state: { -// // // focus: { -// // // style: { -// // // bg: 'purple', -// // // }, -// // // }, -// // // }, -// // }, -// // }, - -// // state: { -// // hover: { -// // style: { -// // bg: 'yellow', -// // }, - -// // // hover: { -// // // style: { -// // // bg: 'yellow', -// // // }, -// // // hover: { -// // // style: { -// // // bg: 'yellow', -// // // }, -// // // hover: { -// // // style: { -// // // bg: 'aqua', -// // // }, -// // // }, -// // // }, -// // // }, -// // descendants: { -// // _text: { -// // style: { -// // color: 'purple', -// // }, -// // }, -// // }, -// // }, - -// // active: { -// // style: { -// // bg: '', -// // }, -// // }, -// // }, -// // descendants: { -// // _text: { -// // style: { -// // color: 'white', -// // }, -// // }, -// // }, -// }, -// // variants: { -// // greenBox: { -// // style: { -// // bg: '$green500', -// // }, -// // state: { -// // hover: { -// // style: { -// // bg: '$green600', -// // }, -// // }, -// // active: { -// // style: { -// // bg: '$green700', -// // }, -// // }, -// // }, -// // queries: [ -// // { -// // condition: '$md', -// // value: { -// // style: { -// // bg: '$blue500', -// // }, -// // state: { -// // hover: { -// // style: { -// // bg: '$green500', -// // }, -// // state: { -// // focus: { -// // style: { -// // bg: 'purple', -// // }, -// // }, -// // }, -// // }, -// // }, -// // colorMode: { -// // dark: { -// // style: { -// // bg: '$red500', -// // }, -// // }, -// // light: { -// // style: { -// // bg: '$blue500', -// // }, -// // }, -// // }, -// // }, -// // }, -// // ], -// // }, -// // // blueBox: { -// // // style: { -// // // bg: '$yellow500', -// // // }, -// // // // colorMode: { -// // // // dark: { -// // // // style: { -// // // // bg: '$yellow100', -// // // // }, -// // // // }, -// // // // }, -// // // // state: { -// // // // hover: { -// // // // style: { -// // // // bg: '$yellow600', -// // // // }, -// // // // }, -// // // // active: { -// // // // style: { -// // // // bg: '$yellow700', -// // // // }, -// // // // }, -// // // // }, -// // // }, -// // }, -// // sizes: { -// // // small: { -// // // style: { -// // // p: '$10', -// // // }, -// // // }, -// // large: { -// // style: { -// // px: '$20', -// // py: '$10', -// // }, -// // state: { -// // hover: { -// // style: { -// // bg: 'pink', -// // }, -// // }, -// // }, -// // }, -// // }, -// }, -// {} -// ); - -// const MyBox = styled( -// View, -// { -// baseStyle: { -// style: { -// bg: '$amber200', -// }, -// }, -// }, -// {} -// ); -const MyButtonText = styled( - Text, - { color: '$blue200' }, - { ancestorStyle: ['_text'] } -); - -// function Button() { -// const { pressableProps, isPressed } = useIsPressed(); -// let { isFocused, focusProps } = useFocus(); -// const { isHovered, hoverProps } = useHover(); - -// return ( -// console.log('styled', flush())} -// > -// Hello World -// -// ); -// } - -// console.log(StyledLink, 'styled link here'); -// const MyCustomComponent = () => { -// return ( -// -// -// Hello World {MyButtonString} -// -// -// ); -// }; -export default function App() { - // const [state, setState] = useState(true); - - return ( - <> - - {/* {Array.from({ length: 1000 }, () => { - return ; - })} */} - - - - ); - // return ( - // //
- // // - // // {state ? ( - // // - // // {Array.from({ length: 1 }, () => { - // // return
- // <> - // - - // - // - // @@ -75,23 +74,23 @@ const PopoverContent = ({ targetRef }) => { ); }; -export function PopoverExample(props: any) { +export function PopoverExample() { const [visible, setVisible] = React.useState(false); let ref = React.useRef(null); return ( - + setVisible(!visible)} style={{ - backgroundColor: "#F3F4F6", + backgroundColor: '#F3F4F6', maxWidth: 100, padding: 10, - justifyContent: "center", - alignItems: "center", + justifyContent: 'center', + alignItems: 'center', }} > Press me diff --git a/example/storybook/src/react-native-aria/Radio/index.tsx b/example/storybook/src/react-native-aria/Radio/index.tsx index 9a26f20141..0de5ba23ca 100644 --- a/example/storybook/src/react-native-aria/Radio/index.tsx +++ b/example/storybook/src/react-native-aria/Radio/index.tsx @@ -1,10 +1,10 @@ -import React from "react"; -import { useRadioGroupState } from "@react-stately/radio"; -import { useRadio, useRadioGroup } from "@react-native-aria/radio"; -import { Platform, Pressable, Text, View } from "react-native"; -import { VisuallyHidden } from "@react-aria/visually-hidden"; -import { MaterialCommunityIcons } from "@expo/vector-icons"; -import { useFocusRing } from "@react-native-aria/focus"; +import React from 'react'; +import { useRadioGroupState } from '@react-stately/radio'; +import { useRadio, useRadioGroup } from '@react-native-aria/radio'; +import { Platform, Pressable, Text, View } from 'react-native'; +import { VisuallyHidden } from '@react-aria/visually-hidden'; +import { MaterialCommunityIcons } from '@expo/vector-icons'; +import { useFocusRing } from '@react-native-aria/focus'; let RadioContext = React.createContext({}); @@ -40,32 +40,32 @@ export function Radio(props: any) { let { isFocusVisible, focusProps } = useFocusRing(); let isSelected = state.selectedValue === props.value; - const icon = isSelected ? "radiobox-marked" : "radiobox-blank"; + const icon = isSelected ? 'radiobox-marked' : 'radiobox-blank'; return ( <> - {Platform.OS === "web" ? ( + {Platform.OS === 'web' ? ( ) : ( - + - + {props.children} - {isSelected ? "selected" : "not selected"} + {isSelected ? 'selected' : 'not selected'} )} diff --git a/example/storybook/src/react-native-aria/Slider/index.tsx b/example/storybook/src/react-native-aria/Slider/index.tsx index 9e8a9b9351..7f1c93a165 100644 --- a/example/storybook/src/react-native-aria/Slider/index.tsx +++ b/example/storybook/src/react-native-aria/Slider/index.tsx @@ -1,10 +1,10 @@ -import React from "react"; -import { View, Text, Pressable, Platform } from "react-native"; -import { useSlider, useSliderThumb } from "@react-native-aria/slider"; -import { useSliderState } from "@react-stately/slider"; -import { useFocusRing } from "@react-native-aria/focus"; -import { VisuallyHidden } from "@react-aria/visually-hidden"; -import { mergeProps } from "@react-aria/utils"; +import React from 'react'; +import { View, Text, Pressable, Platform } from 'react-native'; +import { useSlider, useSliderThumb } from '@react-native-aria/slider'; +import { useSliderState } from '@react-stately/slider'; +import { useFocusRing } from '@react-native-aria/focus'; +import { VisuallyHidden } from '@react-aria/visually-hidden'; +import { mergeProps } from '@react-aria/utils'; const useLayout = () => { const [layout, setLayout] = React.useState({}); @@ -38,12 +38,12 @@ export function Slider(props) { }} > {/* Create a flex container for the label and output element. */} - + {props.label && {props.label}} - {Platform.OS === "web" && ( + {Platform.OS === 'web' && ( {state.getThumbValueLabel(0)} @@ -57,16 +57,16 @@ export function Slider(props) { ref={trackRef} style={{ height: 30, - width: " 100%", + width: ' 100%', }} > @@ -94,7 +94,7 @@ function Thumb(props) { return ( - {Platform.OS === "web" && ( + {Platform.OS === 'web' && ( diff --git a/example/storybook/src/react-native-aria/Switch/index.tsx b/example/storybook/src/react-native-aria/Switch/index.tsx index cf6252fb58..02e379dc9d 100644 --- a/example/storybook/src/react-native-aria/Switch/index.tsx +++ b/example/storybook/src/react-native-aria/Switch/index.tsx @@ -7,8 +7,8 @@ * @benkeroumamine */ -import { useToggleState } from "@react-stately/toggle"; -import React, { useRef } from "react"; +import { useToggleState } from '@react-stately/toggle'; +import React, { useRef } from 'react'; import { StyleSheet, Text, @@ -16,14 +16,14 @@ import { Animated, Platform, Pressable, -} from "react-native"; -import { useSwitch } from "@react-native-aria/switch"; -import { useFocusRing } from "@react-native-aria/focus"; -import { VisuallyHidden } from "@react-aria/visually-hidden"; +} from 'react-native'; +import { useSwitch } from '@react-native-aria/switch'; +import { useFocusRing } from '@react-native-aria/focus'; +import { VisuallyHidden } from '@react-aria/visually-hidden'; const calculateDimensions = (size: any) => { switch (size) { - case "small": + case 'small': return { width: 40, padding: 10, @@ -31,7 +31,7 @@ const calculateDimensions = (size: any) => { circleHeight: 15, translateX: 22, }; - case "large": + case 'large': return { width: 70, padding: 20, @@ -52,9 +52,9 @@ const calculateDimensions = (size: any) => { const defaultProps = { isOn: false, - onColor: "#4cd137", - offColor: "#ecf0f1", - size: "medium", + onColor: '#4cd137', + offColor: '#ecf0f1', + size: 'medium', labelStyle: {}, thumbOnStyle: {}, thumbOffStyle: {}, @@ -64,7 +64,7 @@ const defaultProps = { disabled: false, animationSpeed: 300, useNativeDriver: true, - circleColor: "white", + circleColor: 'white', }; export function Switch(origProps: any) { @@ -78,7 +78,7 @@ export function Switch(origProps: any) { const createToggleSwitchStyle = () => [ { - justifyContent: "center", + justifyContent: 'center', width: dimensions.current.width, borderRadius: 20, padding: dimensions.current.padding, @@ -89,17 +89,17 @@ export function Switch(origProps: any) { const createInsideCircleStyle = () => [ { - alignItems: "center", - justifyContent: "center", - margin: Platform.OS === "web" ? 0 : 4, - left: Platform.OS === "web" ? 4 : 0, - position: "absolute", + alignItems: 'center', + justifyContent: 'center', + margin: Platform.OS === 'web' ? 0 : 4, + left: Platform.OS === 'web' ? 4 : 0, + position: 'absolute', backgroundColor: props.circleColor, transform: [{ translateX: offsetX.current }], width: dimensions.current.circleWidth, height: dimensions.current.circleHeight, borderRadius: dimensions.current.circleWidth / 2, - shadowColor: "#000", + shadowColor: '#000', shadowOffset: { width: 0, height: 2, @@ -128,14 +128,14 @@ export function Switch(origProps: any) { {icon} - {isOn ? "on" : "off"} + {isOn ? 'on' : 'off'} ); } const styles = StyleSheet.create({ container: { - alignItems: "center", + alignItems: 'center', }, labelStyle: { marginHorizontal: 10, @@ -147,12 +147,12 @@ export function ControlledSwitch() { const { isFocusVisible, focusProps } = useFocusRing(); const inputRef = useRef(null); let { inputProps } = useSwitch( - { "aria-label": "Example switch" }, + { 'aria-label': 'Example switch' }, state, inputRef ); - if (Platform.OS === "web") { + if (Platform.OS === 'web') { return (