Merge branch 'master' into release

Author: M-i-k-e-l

demo/src/screens/MenuStructure.js

@@ -174,6 +174,7 @@ export const navigationData = {
   Incubator: {
     title: 'Incubator (Experimental)',
     screens: [
+      {title: 'Calendar', tags: 'calendar', screen: 'unicorn.components.IncubatorCalendarScreen'},
       {title: 'ChipsInput (New)', tags: 'chips input', screen: 'unicorn.components.IncubatorChipsInputScreen'},
       {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
       {title: 'Dialog (New)', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},

demo/src/screens/componentScreens/ColorSwatchScreen.tsx

@@ -51,6 +51,10 @@ export default class ColorSwatchScreen extends Component {
     this.setState({color2: value});
   };
 
+  unavailableOnPress = () => {
+    console.log(`Pressed on unavailable color swatch!`);
+  };
+
   render() {
     const {color, color1, color2, selected} = this.state;
 
@@ -61,10 +65,16 @@ export default class ColorSwatchScreen extends Component {
             Single ColorSwatch
           </Text>
           <View row>
-            <ColorSwatch selected={selected} onPress={this.onPress}/>
             <View>
-              <ColorSwatch selected color={Colors.$backgroundMajorLight}/>
-              <Text>Disabled</Text>
+              <ColorSwatch selected={selected} onPress={this.onPress}/>
+            </View>
+            <View>
+              <ColorSwatch color={Colors.$backgroundMajorLight}/>
+              <Text text90R>Disabled</Text>
+            </View>
+            <View>
+              <ColorSwatch unavailable onPress={this.unavailableOnPress} color={Colors.yellow10}/>
+              <Text text90R>Unavailable</Text>
             </View>
           </View>
 

demo/src/screens/incubatorScreens/IncubatorCalendarScreen/MockData.ts

@@ -0,0 +1,27 @@
+import React, {Component} from 'react';
+import {View, Incubator} from 'react-native-ui-lib';
+import {data} from './MockData';
+
+export default class CalendarScreen extends Component {
+  // constructor(props) {
+  //   super(props);
+    
+  //   setTimeout(() => {
+  //     this.setState({date: 1676026748000});
+  //   }, 2000);
+  // }
+
+  state = {
+    date: undefined
+  };
+  
+  render() {
+    return (
+      <View flex>
+        <Incubator.Calendar data={data} staticHeader initialDate={this.state.date}>
+          <Incubator.Calendar.Agenda/>
+        </Incubator.Calendar>
+      </View>
+    );
+  }
+}

demo/src/screens/incubatorScreens/IncubatorCalendarScreen/index.tsx

@@ -1,6 +1,7 @@
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 
 export function registerScreens(registrar) {
+  registrar('unicorn.components.IncubatorCalendarScreen', () => require('./IncubatorCalendarScreen').default);
   registrar('unicorn.components.IncubatorChipsInputScreen', () => require('./IncubatorChipsInputScreen').default);
   registrar('unicorn.incubator.TouchableOpacityScreen', () =>
     gestureHandlerRootHOC(require('./TouchableOpacityScreen').default));

demo/src/screens/incubatorScreens/index.js

@@ -32,6 +32,7 @@
     "pre-push": "npm run build:dev && npm run test",
     "docs:deploy": "./scripts/deployDocs.sh",
     "docs:build": "node scripts/buildDocs.js",
+    "calendar:createMocks": "node scripts/createCalendarMockData.js",
     "snippets:build": "node scripts/generateSnippets.js",
     "demo": "./scripts/demo.sh",
     "release": "node ./scripts/release.js"
@@ -40,6 +41,7 @@
     "babel-plugin-transform-inline-environment-variables": "^0.0.2",
     "color": "^3.1.0",
     "commons-validator-js": "^1.0.237",
+    "date-fns": "^2.29.3",
     "deprecated-react-native-prop-types": "^2.3.0",
     "hoist-non-react-statics": "^3.0.0",
     "lodash": "^4.17.21",
@@ -107,7 +109,7 @@
     "react-native": "0.68.2",
     "react-native-gesture-handler": "2.5.0",
     "react-native-haptic-feedback": "^1.11.0",
-    "react-native-linear-gradient": "2.5.6",
+    "react-native-linear-gradient": "2.6.2",
     "react-native-navigation": "7.30.0",
     "react-native-reanimated": "2.13.0",
     "react-native-shimmer-placeholder": "^2.0.6",

package.json

@@ -10,6 +10,10 @@ const packages = [
     filename: 'config.js',
     content: `module.exports = require('./src/commons/Config').default;\n`
   },
+  {
+    filename: 'constants.js',
+    content: `module.exports = require('./src/commons/Constants').default;\n`
+  },
   {
     filename: 'core.js',
     components: ['View', 'Text', 'Image', 'TouchableOpacity', 'Button'],

scripts/buildPackages.js

@@ -0,0 +1,37 @@
+const fs = require('fs');
+const HOUR_IN_MS = 60 * 60 * 1000;
+const ID_LENGTH = 10;
+
+function generateId() {
+  let result = '';
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const charactersLength = characters.length;
+  for (let i = 0; i < ID_LENGTH; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+}
+
+const data = [];
+
+for (let year = 2021; year <= 2023; ++year) {
+  for (let month = 0; month <= 11; ++month) {
+    for (let day = 1; day <= 31; day += Math.random() > 0.5 ? 2 : 1) {
+      for (let hour = 9; hour <= 19; hour += Math.random() > 0.5 ? 4 : 3) {
+        const startDate = new Date(year, month, day, hour, 0);
+        if (startDate.getDay() >= 2 && startDate.getDay() <= 5) {
+          const start = startDate.getTime();
+          const end = start + HOUR_IN_MS * (Math.random() > 0.5 ? 0.5 : 1);
+          const id = generateId();
+          data.push({id, start, end});
+        }
+      }
+    }
+  }
+}
+
+console.log(`${data.length} events were created`);
+
+fs.writeFileSync('demo/src/screens/incubatorScreens/IncubatorCalendarScreen/MockData.ts',
+  `// Note: to generate new data run calendar:createMocks and update createCalendarMockData script \n` +
+  `export const data = ${JSON.stringify(data)};`);

scripts/createCalendarMockData.js

@@ -240,9 +240,9 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
   render() {
     const {label, labelStyle, containerStyle, labelProps} = this.props;
     return label ? (
-      <View row centerV style={[containerStyle]}>
+      <View row centerV style={containerStyle}>
         {this.renderCheckbox()}
-        <Text style={[this.styles.checkboxLabel, labelStyle]} {...labelProps} onPress={this.onPress}>
+        <Text flexS style={[this.styles.checkboxLabel, labelStyle]} {...labelProps} onPress={this.onPress}>
           {label}
         </Text>
       </View>

src/components/checkbox/index.tsx

@@ -19,9 +19,9 @@
     {"name": "onPress", "type": "(value: string, options: object) => void", "description": "Callback from press event"},
     {"name": "index", "type": "number", "description": "The index of the Swatch if in array"},
     {"name": "style", "type": "ViewStyle", "description": "Component's style"},
-    {"name": "testID", "type": "string", "description": "The test id for e2e tests"}
+    {"name": "testID", "type": "string", "description": "The test id for e2e tests"},
+    {"name": "unavailable", "type": "boolean", "description": "Is the initial state is unavailable"},
+    {"name": "size", "type": "number", "description": "Color Swatch size"}
   ],
-  "snippet": [
-    "<ColorSwatch color={Colors.red30$1} selected={true$2} onPress={() => console.log('pressed')$3}/>"
-  ]
+  "snippet": ["<ColorSwatch color={Colors.red30$1} selected={true$2} onPress={() => console.log('pressed')$3}/>"]
 }