react95-native-rabbl 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Luiz Baldi, Artur Bień
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+<h1 align="center">React95 Native</h1>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/react95-native"><img src="https://flat.badgen.net/npm/dt/react95-native" alt="NPM" /></a>
+  <a href="https://www.npmjs.com/package/react95-native"><img src="https://flat.badgen.net/npm/v/react95-native" alt="react95-native version" /></a>
+  <a href="https://www.npmjs.com/package/react95-native"><img src="https://flat.badgen.net/npm/license/react95-native" alt="react95-native license" /></a>
+  <a href="https://twitter.com/intent/follow?screen_name=react95_io"><img src="https://img.shields.io/twitter/follow/react95_io" alt="React95 twitter" /></a>
+</p>
+<h3 align="center">
+  <a href="https://apps.apple.com/tr/app/react95-native/id1553479159">Components (iOS app)</a> -
+  <a href="https://coins95.web.app/">Demo app (web version)</a> -
+  <a href="https://react95.io/">Website</a> -
+  <a href="https://join.slack.com/t/react95/shared_invite/enQtOTA1NzEyNjAyNTc4LWYxZjU3NWRiMWJlMGJiMjhkNzE2MDA3ZmZjZDc1YmY0ODdlZjMwZDA1NWJiYWExYmY1NTJmNmE4OWVjNWFhMTE">Slack</a> -
+  <a href="https://www.paypal.me/react95">PayPal donation 💰</a>
+</h3>
+<p align="center">
+  <b>Refreshed</b> Windows95 UI components for your modern React-Native apps.</p>
+
+![hero](https://user-images.githubusercontent.com/28541613/152637028-eb445b2a-32cd-4672-bf75-3f3904123637.png)
+
+### Support
+
+- [Become a backer or sponsor on Patreon](https://www.patreon.com/arturbien)
+- [One-time donation via PayPal](https://www.paypal.me/react95)

package/package.json

@@ -0,0 +1,154 @@
+{
+  "name": "react95-native-rabbl",
+  "version": "0.1.1",
+  "description": "Refreshed Windows 95 style UI components for your React Native app",
+  "funding": [
+    {
+      "type": "paypal",
+      "url": "https://www.paypal.me/react95"
+    },
+    {
+      "type": "patreon",
+      "url": "https://www.patreon.com/arturbien"
+    }
+  ],
+  "contributors": [
+    {
+      "name": "Artur Bień",
+      "email": "artur.bien+react95@gmail.com",
+      "url": "https://www.linkedin.com/in/arturbien/"
+    },
+    {
+      "name": "Luiz Baldi",
+      "email": "baldilp@gmail.com",
+      "url": "https://www.linkedin.com/in/luizbaldi/"
+    }
+  ],
+  "main": "dist/commonjs/index",
+  "module": "dist/module/index",
+  "types": "dist/typescript/src/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "cz": "git-cz",
+    "test": "jest ./src",
+    "test:ci": "jest ./src --maxWorkers=2",
+    "test:watch": "jest ./src --watch",
+    "test:coverage": "jest ./src --coverage",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "typescript": "tsc --noEmit",
+    "build": "bob build",
+    "semantic-release": "semantic-release",
+    "example": "yarn --cwd example",
+    "pods": "cd example && pod-install --quiet",
+    "bootstrap": "yarn example && yarn && yarn pods"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "windows95",
+    "components",
+    "vaporwave"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react95-io/react95-native"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/react95-io/react95-native/issues"
+  },
+  "homepage": "https://github.com/react95-io/react95-native#readme",
+  "devDependencies": {
+    "@commitlint/config-conventional": "^8.3.4",
+    "@react-native-community/bob": "^0.16.2",
+    "@testing-library/jest-native": "^3.4.3",
+    "@testing-library/react-native": "^7.1.0",
+    "@types/jest": "^26.0.0",
+    "@types/react": "^16.9.19",
+    "@types/react-native": "0.62.13",
+    "@typescript-eslint/eslint-plugin": "^4.9.1",
+    "@typescript-eslint/parser": "^4.6.0",
+    "commitizen": "^4.2.2",
+    "commitlint": "^8.3.5",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "^7.12.1",
+    "eslint-config-airbnb": "18.2.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-import": "^2.21.2",
+    "eslint-plugin-jest": "^24.1.0",
+    "eslint-plugin-jsx-a11y": "^6.3.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.20.0",
+    "eslint-plugin-react-hooks": "4.0.0",
+    "husky": "^4.2.5",
+    "jest": "^26.0.1",
+    "lint-staged": "^10.5.3",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.0.5",
+    "react": "16.11.0",
+    "react-native": "0.62.2",
+    "react-test-renderer": "^17.0.1",
+    "semantic-release": "^17.3.1",
+    "typescript": "^3.8.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix",
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+      "pre-commit": "lint-staged && yarn typescript"
+    }
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "dist/"
+  ],
+  "@react-native-community/bob": {
+    "source": "src",
+    "output": "dist",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ],
+    "files": [
+      "src/"
+    ]
+  },
+  "dependencies": {
+    "@callstack/react-theme-provider": "^2.1.0"
+  }
+}

package/src/assets/fonts/src/ms-sans-serif/license.txt

@@ -0,0 +1,4 @@
+The FontStruction “MS Sans Serif”
+(https://fontstruct.com/fontstructions/show/1384746) by “lou” is licensed
+under a Creative Commons Attribution Share Alike license
+(http://creativecommons.org/licenses/by-sa/3.0/).

package/src/assets/fonts/src/ms-sans-serif/readme.txt

@@ -0,0 +1,26 @@
+The font file in this archive was created using Fontstruct the free, online
+font-building tool.
+This font was created by “lou”.
+This font has a homepage where this archive and other versions may be found:
+https://fontstruct.com/fontstructions/show/1384746
+
+Try Fontstruct at http://fontstruct.com
+It’s easy and it’s fun.
+
+NOTE FOR FLASH USERS: Fontstruct fonts (fontstructions) are optimized for Flash.
+If the font in this archive is a pixel font, it is best displayed at a font-size
+of 11.
+
+Fontstruct is sponsored by FontShop.
+Visit them at https://fontshop.com
+FontShop is the original independent font retailer. We’ve been around since
+the dawn of digital type. Whether you need the right font or need to create the
+right font from scratch, let our 26 years of experience work for you.
+
+Fontstruct is copyright ©2017 Rob Meek
+
+LEGAL NOTICE:
+In using this font you must comply with the licensing terms described in the
+file “license.txt” included with this archive.
+If you redistribute the font file in this archive, it must be accompanied by all
+the other files from this archive, including this one.

package/src/assets/fonts/src/ms-sans-serif-bold/license.txt

@@ -0,0 +1,4 @@
+The FontStruction “MS Sans Serif Bold”
+(https://fontstruct.com/fontstructions/show/1384862) by “lou” is licensed
+under a Creative Commons Attribution Share Alike license
+(http://creativecommons.org/licenses/by-sa/3.0/).

package/src/assets/fonts/src/ms-sans-serif-bold/readme.txt

@@ -0,0 +1,26 @@
+The font file in this archive was created using Fontstruct the free, online
+font-building tool.
+This font was created by “lou”.
+This font has a homepage where this archive and other versions may be found:
+https://fontstruct.com/fontstructions/show/1384862
+
+Try Fontstruct at http://fontstruct.com
+It’s easy and it’s fun.
+
+NOTE FOR FLASH USERS: Fontstruct fonts (fontstructions) are optimized for Flash.
+If the font in this archive is a pixel font, it is best displayed at a font-size
+of 11.
+
+Fontstruct is sponsored by FontShop.
+Visit them at https://fontshop.com
+FontShop is the original independent font retailer. We’ve been around since
+the dawn of digital type. Whether you need the right font or need to create the
+right font from scratch, let our 26 years of experience work for you.
+
+Fontstruct is copyright ©2017 Rob Meek
+
+LEGAL NOTICE:
+In using this font you must comply with the licensing terms described in the
+file “license.txt” included with this archive.
+If you redistribute the font file in this archive, it must be accompanied by all
+the other files from this archive, including this one.

package/src/components/AppBar/AppBar.spec.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { testId } from '../Panel/Panel';
+import { AppBar, Text } from '../..';
+
+describe('<AppBar />', () => {
+  it('should render children', () => {
+    const { getByTestId } = render(
+      <AppBar>
+        <Text>This is an AppBar</Text>
+      </AppBar>,
+    );
+
+    expect(getByTestId(testId)).toHaveTextContent('This is an AppBar');
+  });
+
+  it('should render custom styles', () => {
+    const style = { marginTop: 42 };
+
+    const { getByTestId } = render(
+      <AppBar style={style}>
+        <Text>This is an AppBar</Text>
+      </AppBar>,
+    );
+
+    expect(getByTestId(testId)).toHaveStyle(style);
+  });
+});
+
+describe('<AppBar.Content />', () => {
+  it('should render custom styles', () => {
+    const style = { marginTop: 42 };
+
+    const { getByTestId } = render(
+      <AppBar>
+        <AppBar.Content title='Title' style={style} testID='content' />
+      </AppBar>,
+    );
+
+    expect(getByTestId('content')).toHaveStyle(style);
+  });
+  describe('title', () => {
+    it('should render title', () => {
+      const { getByText } = render(
+        <AppBar>
+          <AppBar.Content title='Title' />
+        </AppBar>,
+      );
+
+      expect(getByText('Title')).toBeTruthy();
+    });
+
+    it('should pass styles to title', () => {
+      const style = { color: 'red' };
+      const { getByText } = render(
+        <AppBar>
+          <AppBar.Content title='Title' titleStyle={style} />
+        </AppBar>,
+      );
+
+      expect(getByText('Title')).toHaveStyle(style);
+    });
+  });
+
+  describe('subtitle', () => {
+    it('should render subtitle', () => {
+      const { getByText } = render(
+        <AppBar>
+          <AppBar.Content title='Title' subtitle='Subtitle' />
+        </AppBar>,
+      );
+
+      expect(getByText('Subtitle')).toBeTruthy();
+    });
+
+    it('should pass styles to subtitle', () => {
+      const style = { color: 'red' };
+      const { getByText } = render(
+        <AppBar>
+          <AppBar.Content
+            title='Title'
+            subtitle='Subtitle'
+            subtitleStyle={style}
+          />
+        </AppBar>,
+      );
+
+      expect(getByText('Subtitle')).toHaveStyle(style);
+    });
+  });
+
+  describe('prop: onPress', () => {
+    it('should handle onPress', () => {
+      const onPress = jest.fn();
+
+      const { getByTestId } = render(
+        <AppBar>
+          <AppBar.Content
+            testID='content'
+            onPress={onPress}
+            title='Title'
+            subtitle='Subtitle'
+          />
+        </AppBar>,
+      );
+
+      fireEvent(getByTestId('content'), 'press');
+      expect(onPress).toHaveBeenCalled();
+    });
+  });
+});
+
+describe('<AppBar.BackAction />', () => {
+  it('should render custom styles', () => {
+    const style = { marginTop: 42 };
+
+    const { getByTestId } = render(
+      <AppBar>
+        <AppBar.BackAction testID='backAction' style={style} />
+      </AppBar>,
+    );
+
+    expect(getByTestId('backAction')).toHaveStyle(style);
+  });
+
+  describe('prop: onPress', () => {
+    it('should handle onPress', () => {
+      const onPress = jest.fn();
+
+      const { getByTestId } = render(
+        <AppBar>
+          <AppBar.BackAction testID='backAction' onPress={onPress} />
+        </AppBar>,
+      );
+
+      fireEvent(getByTestId('backAction'), 'press');
+      expect(onPress).toHaveBeenCalled();
+    });
+  });
+});

package/src/components/AppBar/AppBar.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import type { Theme } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import AppBarContent from './AppBarContent';
+import AppBarBackAction from './AppBarBackAction';
+import Panel from '../Panel';
+
+type Props = React.ComponentPropsWithRef<typeof View> & {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+};
+
+const AppBar = ({ children, style = {}, ...rest }: Props) => {
+  return (
+    <Panel
+      style={[styles.wrapper, style]}
+      variant='raised'
+      elevation={2}
+      {...rest}
+    >
+      {children}
+    </Panel>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+    height: 56,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+  },
+});
+
+AppBar.Content = AppBarContent;
+AppBar.BackAction = AppBarBackAction;
+
+export default withTheme(AppBar);

package/src/components/AppBar/AppBarBackAction.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { $RemoveChildren } from '../../types';
+
+import { Button, ChevronIcon } from '../..';
+
+type Props = $RemoveChildren<typeof Button>;
+
+const AppBarBackAction = ({ disabled, ...rest }: Props) => {
+  return (
+    <Button disabled={disabled} square variant='menu' {...rest}>
+      <ChevronIcon
+        disabled={disabled}
+        direction='left'
+        style={{ marginLeft: -2 }}
+      />
+    </Button>
+  );
+};
+
+export default AppBarBackAction;

package/src/components/AppBar/AppBarContent.tsx

@@ -0,0 +1,84 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  TouchableWithoutFeedback,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import type { Theme, $RemoveChildren } from '../../types';
+import { withTheme } from '../../core/theming';
+
+import { Text } from '../..';
+
+type Props = $RemoveChildren<typeof View> & {
+  //   titleRef?: React.RefObject<Text>;
+  //   TODO: titleRef
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  subtitle?: React.ReactNode;
+  subtitleStyle?: StyleProp<TextStyle>;
+  theme: Theme;
+  title: React.ReactNode;
+  titleRef?: React.RefObject<Text>;
+  titleStyle?: StyleProp<TextStyle>;
+};
+
+const AppbarContent = ({
+  // titleRef,
+  onPress,
+  style,
+  subtitle,
+  subtitleStyle,
+  theme,
+  title,
+  titleStyle,
+  ...rest
+}: Props) => {
+  return (
+    <View style={[styles.container, style]} {...rest}>
+      <TouchableWithoutFeedback onPress={onPress} disabled={!onPress}>
+        <View>
+          <Text
+            theme={theme}
+            // ref={titleRef}
+            style={[styles.title, titleStyle]}
+            accessibilityTraits='header'
+          >
+            {title}
+          </Text>
+          {subtitle ? (
+            <Text
+              theme={theme}
+              secondary
+              style={[styles.subtitle, subtitleStyle]}
+            >
+              {subtitle}
+            </Text>
+          ) : null}
+        </View>
+      </TouchableWithoutFeedback>
+    </View>
+  );
+};
+
+// TODO: attach displayName to every component?
+AppbarContent.displayName = 'Appbar.Content';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 12,
+  },
+  title: {
+    fontSize: 16,
+  },
+  subtitle: {
+    fontSize: 12,
+  },
+});
+
+export default withTheme(AppbarContent);

package/src/components/AppBar/index.ts

@@ -0,0 +1 @@
+export { default } from './AppBar';

package/src/components/Button/Button.spec.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import type { Sizes } from '../../types';
+import { blockSizes } from '../../styles/styles';
+import { testId } from './Button';
+import { Button, Text } from '../..';
+
+const noop = () => {};
+
+describe('<Button />', () => {
+  it('should render children', () => {
+    const { getByText } = render(
+      <Button onPress={noop}>
+        <Text>Potato</Text>
+      </Button>,
+    );
+
+    expect(getByText('Potato')).toBeTruthy();
+  });
+
+  it('should fire press', () => {
+    const onButtonPress = jest.fn();
+
+    const { getByRole } = render(
+      <Button onPress={onButtonPress}>
+        <Text>Ok</Text>
+      </Button>,
+    );
+
+    fireEvent(getByRole('button'), 'press');
+    expect(onButtonPress).toHaveBeenCalled();
+  });
+
+  it('should handle square sizes', () => {
+    const sizes: Sizes[] = ['sm', 'md', 'lg'];
+
+    sizes.forEach(size => {
+      const { getByTestId } = render(
+        <Button onPress={noop} size={size} square>
+          <Text>Ok</Text>
+        </Button>,
+      );
+
+      expect(getByTestId(testId)).toHaveStyle({ width: blockSizes[size] });
+    });
+  });
+
+  it('should render custom styles', () => {
+    const style = { backgroundColor: 'papayawhip' };
+
+    const { getByTestId } = render(
+      <Button onPress={noop} style={style}>
+        <Text>Ok</Text>
+      </Button>,
+    );
+
+    expect(getByTestId(testId)).toHaveStyle(style);
+  });
+});