diff --git a/example/storybook/.eslintignore b/example/storybook/.eslintignore deleted file mode 100644 index db4129932..000000000 --- a/example/storybook/.eslintignore +++ /dev/null @@ -1,8 +0,0 @@ -example -packages/**/example - -# packages/**/example -# !.build/test.js - -ui/packages/ui/.ondevice -babel.config.js \ No newline at end of file diff --git a/example/storybook/.gitignore b/example/storybook/.gitignore index e1ca74255..ff3356b87 100644 --- a/example/storybook/.gitignore +++ b/example/storybook/.gitignore @@ -1,4 +1,5 @@ node_modules/ +.env .expo/ dist/ npm-debug.* diff --git a/example/storybook/.ondevice/main.js b/example/storybook/.ondevice/main.js index 05e0949cc..502fb5327 100644 --- a/example/storybook/.ondevice/main.js +++ b/example/storybook/.ondevice/main.js @@ -1,5 +1,5 @@ module.exports = { - stories: ['../src/**/*.stories.?(ts|tsx|js|jsx)'], + stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'], addons: [ '@storybook/addon-ondevice-notes', '@storybook/addon-ondevice-controls', diff --git a/example/storybook/.ondevice/storybook.requires.js b/example/storybook/.ondevice/storybook.requires.js index 49424d0fc..0c8a85310 100644 --- a/example/storybook/.ondevice/storybook.requires.js +++ b/example/storybook/.ondevice/storybook.requires.js @@ -11,10 +11,10 @@ import { global.STORIES = [ { titlePrefix: '', - directory: './src', + directory: './components', files: '**/*.stories.?(ts|tsx|js|jsx)', importPathMatcher: - '^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$', + '^\\.[\\\\/](?:components(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$', }, ]; @@ -52,7 +52,7 @@ const getStories = () => { // "./src/api/AsForwarder/AsForwarder.stories.tsx": require("../src/api/AsForwarder/AsForwarder.stories.tsx"), // "./src/api/ColorModeBasedStyles/ColorMode.stories.tsx": require("../src/api/ColorModeBasedStyles/ColorMode.stories.tsx"), // "./src/api/CompoundVariants/CompoundVarinats.stories.tsx": require("../src/api/CompoundVariants/CompoundVarinats.stories.tsx"), - // "./src/api/createStyled/createStyled.stories.tsx": require("../src/api/createStyled/createStyled.stories.tsx"), + './src/api/createStyled/createStyled.stories.tsx': require('../src/api/createStyled/createStyled.stories.tsx'), './src/api/DescendantsStyles/ContextBasedStyles.stories.tsx': require('../src/api/DescendantsStyles/ContextBasedStyles.stories.tsx'), // "./src/api/MultipleProvder/MultipleProvider.stories.tsx": require("../src/api/MultipleProvder/MultipleProvider.stories.tsx"), // "./src/api/PlatformBasedStyles/PlatformBasedStyles.stories.tsx": require("../src/api/PlatformBasedStyles/PlatformBasedStyles.stories.tsx"), diff --git a/example/storybook/.storybook/main.js b/example/storybook/.storybook/main.js index 1edf5f9a1..ee58367e1 100644 --- a/example/storybook/.storybook/main.js +++ b/example/storybook/.storybook/main.js @@ -1,7 +1,15 @@ const path = require('path'); -module.exports = { - stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], +// console.log(path.resolve('../../', 'node_modules/@gluestack-style/react')); +module.exports = { + stories: [ + '../src/**/*.stories.mdx', + '../src/**/*.stories.@(js|jsx|ts|tsx)', + // '../src/overview/**/*.stories.mdx', + // '../src/overview/**/*.stories.@(js|jsx|ts|tsx)', + // '../src/getting-started/**/*.stories.mdx', + // '../src/getting-started/**/*.stories.@(js|jsx|ts|tsx)', + ], addons: [ 'storybook-dark-mode', '@storybook/addon-links', diff --git a/example/storybook/App.tsx b/example/storybook/App.tsx index 0d7ab2995..aabdac3ce 100644 --- a/example/storybook/App.tsx +++ b/example/storybook/App.tsx @@ -1,2 +1,30 @@ import StorybookUIRoot from './.ondevice/Storybook'; -export { StorybookUIRoot as default }; + +import React from 'react'; +// import { useFonts } from 'expo-font'; + +export default () => { + // const [loaded] = useFonts({ + // 'Roboto-Bold': require('./assets/fonts/Roboto-Bold.ttf'), + // 'Roboto-Italic': require('./assets/fonts/Roboto-Italic.ttf'), + // 'Roboto-Light': require('./assets/fonts/Roboto-Light.ttf'), + // 'Roboto-Regular': require('./assets/fonts/Roboto-Regular.ttf'), + // 'Roboto-Medium': require('./assets/fonts/Roboto-Medium.ttf'), + + // 'Montserrat-Bold': require('./assets/fonts/Montserrat-Bold.ttf'), + // 'Montserrat-Italic': require('./assets/fonts/Montserrat-Italic.ttf'), + // 'Montserrat-Light': require('./assets/fonts/Montserrat-Light.ttf'), + // 'Montserrat-Regular': require('./assets/fonts/Montserrat-Regular.ttf'), + // 'Montserrat-Medium': require('./assets/fonts/Montserrat-Medium.ttf'), + // 'Montserrat-MediumItalic': require('./assets/fonts/Montserrat-MediumItalic.ttf'), + // 'Montserrat-Black': require('./assets/fonts/Montserrat-Black.ttf'), + // 'Montserrat-BlackItalic': require('./assets/fonts/Montserrat-BlackItalic.ttf'), + // 'Montserrat-ExtraBold': require('./assets/fonts/Montserrat-ExtraBold.ttf'), + // 'Montserrat-ExtraBoldItalic': require('./assets/fonts/Montserrat-ExtraBoldItalic.ttf'), + // 'Montserrat-SemiBold': require('./assets/fonts/Montserrat-SemiBold.ttf'), + // 'Montserrat-SemiBoldItalic': require('./assets/fonts/Montserrat-SemiBoldItalic.ttf'), + // }); + + // if (!loaded) return null; + return ; +}; diff --git a/example/storybook/SX.js b/example/storybook/SX.js deleted file mode 100644 index 11ee0a420..000000000 --- a/example/storybook/SX.js +++ /dev/null @@ -1,79 +0,0 @@ -// SX -// style -// queries -// colorMode -// state -// descendants - -// baseStyle: SX -// variants: Map -// sizes: Map - -// baseStyle: { -// style: { -// bg: 'red' -// }, - -// colorMode: { -// dark: { -// style: 'blue' -// } -// }, - -// queries: [{ -// condition: '$md', -// value: { -// style: { -// bg: 'blue', -// }, -// state: { -// hover: { -// style: { -// bg: '$green900', -// }, -// colorMode: { -// dark: { -// style: { -// bg: 'purple', -// }, -// }, -// light: { -// style: { -// bg: 'aqua', -// }, -// }, -// }, -// state: { -// hover: { -// style: { -// bg: '$yellow500', -// }, -// }, -// }, -// }, -// }, -// }, -// }, -// ], -// state: { -// hover: { -// style: { -// bg: 'red', -// }, -// // descendants: { -// // _text: { -// // style: { -// // color: 'white', -// // }, -// // }, -// // }, -// }, - -// active: { -// style: { -// bg: 'purple', -// }, -// }, -// }, - -// } diff --git a/example/storybook/__tests__/Box.test.js b/example/storybook/__tests__/Box.test.js new file mode 100644 index 000000000..b4b2b805e --- /dev/null +++ b/example/storybook/__tests__/Box.test.js @@ -0,0 +1,19 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +// import { storiesOf } from '@storybook/react'; +// import { action } from '@storybook/addon-actions'; +import { render } from '@testing-library/react-native'; + +import BoxStory from '../src/components/Layout/Box/Box'; +import Wrapper from '../src/components/Wrapper'; + +test('renders correctly', () => { + const tree = renderer + .create( + + + + ) + .toJSON(); + expect(tree).toMatchSnapshot(); +}); diff --git a/example/storybook/__tests__/Button.test.js b/example/storybook/__tests__/Button.test.js new file mode 100644 index 000000000..7820c6748 --- /dev/null +++ b/example/storybook/__tests__/Button.test.js @@ -0,0 +1,54 @@ +import React from 'react'; +import renderer from 'react-test-renderer'; +// import { storiesOf } from '@storybook/react'; +// import { action } from '@storybook/addon-actions'; +import { render } from '@testing-library/react-native'; + +import MyButtonMeta, { + Button, +} from '../src/components/Forms/Button/Button.stories'; +import Wrapper from '../src/components/Wrapper'; + +const { argTypes } = MyButtonMeta; + +describe('Button component', () => { + const argTypes = MyButtonMeta.argTypes; + + for (const key in argTypes) { + const opts = argTypes[key].options; + + if (argTypes[key].type === 'boolean') { + it(`${key}`, () => { + //@ts-ignore + const props = { + [key]: true, + }; + const tree = renderer + .create( + +