Merge pull request #362 from gluestack/patch

Patch

example/storybook/.gitignore

@@ -1,4 +1,5 @@
 node_modules/
+.env
 .expo/
 dist/
 npm-debug.*

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',

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"),

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',

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 <StorybookUIRoot />;
+};

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(
+      <Wrapper>
+        <BoxStory />
+      </Wrapper>
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});

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(
+            <Wrapper>
+              <Button {...props} />
+            </Wrapper>
+          )
+          .toJSON();
+        expect(tree).toMatchSnapshot();
+      });
+    } else {
+      opts.forEach((arg) => {
+        it(`${key} ${arg}`, () => {
+          //@ts-ignore
+          const props = {
+            [key]: arg,
+          };
+          const tree = renderer
+            .create(
+              <Wrapper>
+                <Button {...props} />
+              </Wrapper>
+            )
+            .toJSON();
+          expect(tree).toMatchSnapshot();
+        });
+      });
+    }
+  }
+});

example/storybook/__tests__/Button.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const Button = () => {
+  return <div>helleeo</div>;
+};

example/storybook/__tests__/Checkbox.test.js

@@ -0,0 +1,52 @@
+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 MyCheckboxMeta, {
+  Checkbox,
+} from '../src/components/Forms/Checkbox/Checkbox.stories';
+import Wrapper from '../src/components/Wrapper';
+
+describe('Checkbox component', () => {
+  const argTypes = MyCheckboxMeta.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(
+            <Wrapper>
+              <Checkbox {...props} />
+            </Wrapper>
+          )
+          .toJSON();
+        expect(tree).toMatchSnapshot();
+      });
+    } else {
+      opts.forEach((arg) => {
+        it(`${key} ${arg}`, () => {
+          //@ts-ignore
+          const props = {
+            [key]: arg,
+          };
+          const tree = renderer
+            .create(
+              <Wrapper>
+                <Checkbox {...props} />
+              </Wrapper>
+            )
+            .toJSON();
+          expect(tree).toMatchSnapshot();
+        });
+      });
+    }
+  }
+});

example/storybook/__tests__/__snapshots__/Box.test.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="css-view-175oi2r"
+  data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k n7aciq-1q64x7k"
+  dir={null}
+>
+  <div
+    className="css-view-175oi2r"
+    data-style="y9czwk-1hh0pc0 14bja7p-1q64x7k yljpgc-5lm9f0"
+    dir={null}
+  >
+    <div
+      className="css-view-175oi2r"
+      data-style="1mk50wr-1q64x7k 14bja7p-1q64x7k aj8jl8-2q7xs9"
+      dir={null}
+    >
+      <div
+        className="css-text-1rynq56"
+        data-style="1mo3ip0-13uhtwo 1mo3ip0-1j1xgf6 1mo3ip0-1j1xgf6 14bja7p-1q64x7k 12ukb3i-v2qyhg"
+        dir="auto"
+      >
+        BOX
+      </div>
+    </div>
+  </div>
+</div>
+`;