@hero-design/rn-work-uikit 1.1.0-alpha.0 → 1.1.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @hero-design/rn-work-uikit
 
-## 1.1.0-alpha.0
+## 1.1.0
 
 ### Minor Changes
 
@@ -8,5 +8,4 @@
 
 ### Patch Changes
 
-- Updated dependencies [[`4de62c1c0bda0ef6f78a9c93956192641b6e9eea`](https://github.com/Thinkei/hero-design/commit/4de62c1c0bda0ef6f78a9c93956192641b6e9eea)]:
-  - @hero-design/rn@8.101.3-alpha.0
+- [#3984](https://github.com/Thinkei/hero-design/pull/3984) [`eac6055689ef74e39c21a04dfd25ace4f1bbe613`](https://github.com/Thinkei/hero-design/commit/eac6055689ef74e39c21a04dfd25ace4f1bbe613) Thanks [@ttkien](https://github.com/ttkien)! - initialise theme for work

package/THEME_OVERRIDE.md

@@ -0,0 +1,52 @@
+# Theme Override Mechanism
+
+This package provides work-specific theme overrides that take precedence over the base `@hero-design/rn` theme while maintaining full API compatibility.
+
+## How It Works
+
+### Export Strategy
+We use ES6 module export precedence where named exports override wildcard exports:
+
+```typescript
+// Re-export everything from base package
+export * from '@hero-design/rn';
+
+// Override specific theme exports (these take precedence)
+export { 
+  getTheme,
+  ThemeProvider,
+  useTheme,
+  theme,
+  // ... other theme-related exports
+} from './theme';
+```
+
+### What Gets Overridden
+Only theme-related exports are customized for work-specific needs:
+
+- **`getTheme()`** - Returns work theme with `textInput` component overrides
+- **`ThemeProvider`** - Work-specific theme provider with enhanced typing
+- **`useTheme()`** - Hook returning work theme with proper TypeScript types
+- **`theme`** - Default work theme object
+- **Theme types** - Enhanced TypeScript definitions
+
+All other components (Button, TextInput, etc.) remain unchanged from the base package.
+
+## Usage
+
+### Drop-in Replacement
+Replace your imports without any code changes:
+
+```typescript
+// Before
+import { ThemeProvider, useTheme, Button } from '@hero-design/rn';
+
+// After - same API, work theme applied automatically
+import { ThemeProvider, useTheme, Button } from '@hero-design/rn-work-uikit';
+```
+
+### Guaranteed Behavior
+- ✅ Work-specific theme overrides (currently `textInput` styling)
+- ✅ All base components and functionality preserved
+- ✅ Full TypeScript support with work theme types
+- ✅ Backward compatibility with existing code 

package/lib/index.js

@@ -1,12 +1,142 @@
 'use strict';
 
 var rn = require('@hero-design/rn');
+var React = require('react');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+
+var getTextInputTheme = function getTextInputTheme(theme) {
+  var baseTextInputTheme = theme.__hd__.textInput;
+  // Override specific values here as needed
+  var colors = _objectSpread2({}, baseTextInputTheme.colors);
+  var space = _objectSpread2({}, baseTextInputTheme.space);
+  var fonts = _objectSpread2({}, baseTextInputTheme.fonts);
+  var fontSizes = _objectSpread2({}, baseTextInputTheme.fontSizes);
+  var borderWidths = _objectSpread2({}, baseTextInputTheme.borderWidths);
+  var radii = _objectSpread2({}, baseTextInputTheme.radii);
+  var sizes = _objectSpread2({}, baseTextInputTheme.sizes);
+  var lineHeights = _objectSpread2({}, baseTextInputTheme.lineHeights);
+  return {
+    colors: colors,
+    space: space,
+    fonts: fonts,
+    fontSizes: fontSizes,
+    borderWidths: borderWidths,
+    radii: radii,
+    sizes: sizes,
+    lineHeights: lineHeights
+  };
+};
+
+var getTheme = function getTheme(scale) {
+  var systemPalette = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : rn.swagSystemPalette;
+  var baseTheme = rn.getTheme(scale, systemPalette);
+  return _objectSpread2(_objectSpread2({}, baseTheme), {}, {
+    __hd__: _objectSpread2(_objectSpread2({}, baseTheme.__hd__), {}, {
+      textInput: getTextInputTheme(baseTheme)
+    })
+  });
+};
+
+var WorkThemeProvider = rn.ThemeProvider;
+var useWorkTheme = rn.useTheme;
+
+var WorkThemeSwitcher = function WorkThemeSwitcher(_ref) {
+  var _ref$name = _ref.name,
+    name = _ref$name === void 0 ? 'work' : _ref$name,
+    children = _ref.children;
+  var theme = React.useMemo(function () {
+    switch (name) {
+      case 'swag':
+        return getTheme(undefined, rn.swagSystemPalette);
+      case 'work':
+        return getTheme(undefined, rn.workSystemPalette);
+      case 'jobs':
+        return getTheme(undefined, rn.jobsSystemPalette);
+      case 'wallet':
+        return getTheme(undefined, rn.walletSystemPalette);
+      case 'eBens':
+        return getTheme(undefined, rn.eBensSystemPalette);
+      case 'swagDark':
+        return getTheme(undefined, rn.swagDarkSystemPalette);
+      case 'swagLight':
+      case 'ehWork':
+        return getTheme(undefined, rn.swagLightSystemPalette);
+      case 'ehWorkDark':
+        return getTheme(undefined, rn.ehWorkDarkSystemPalette);
+      case 'ehJobs':
+        return getTheme(undefined, rn.swagLightJobsSystemPalette);
+    }
+  }, [name]);
+  return /*#__PURE__*/React__default.default.createElement(WorkThemeProvider, {
+    theme: theme
+  }, children);
+};
+var withWorkTheme = function withWorkTheme(C, themeName) {
+  return function (props) {
+    return /*#__PURE__*/React__default.default.createElement(WorkThemeSwitcher, {
+      name: themeName
+    }, /*#__PURE__*/React__default.default.createElement(C, props));
+  };
+};
+
+var defaultTheme = getTheme();
+
+exports.ThemeProvider = WorkThemeProvider;
+exports.ThemeSwitcher = WorkThemeSwitcher;
+exports.getTheme = getTheme;
+exports.theme = defaultTheme;
+exports.useTheme = useWorkTheme;
+exports.withTheme = withWorkTheme;
 Object.keys(rn).forEach(function (k) {
-	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
-		enumerable: true,
-		get: function () { return rn[k]; }
-	});
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return rn[k]; }
+  });
 });

package/locales/en_AU.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const locale = {
+    lang: 'en-AU',
+    dateTimeFormats: {
+        fullDate: 'dd/MM/yyyy',
+    },
+};
+
+module.exports = locale;

package/locales/en_AU.mjs

@@ -0,0 +1,8 @@
+const locale = {
+    lang: 'en-AU',
+    dateTimeFormats: {
+        fullDate: 'dd/MM/yyyy',
+    },
+};
+
+export { locale as default };

package/locales/en_CA.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const locale = {
+    lang: 'en-CA',
+    dateTimeFormats: {
+        fullDate: 'MMM dd, yyyy',
+    },
+};
+
+module.exports = locale;

package/locales/en_CA.mjs

@@ -0,0 +1,8 @@
+const locale = {
+    lang: 'en-CA',
+    dateTimeFormats: {
+        fullDate: 'MMM dd, yyyy',
+    },
+};
+
+export { locale as default };

package/locales/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var locales_en_AU = require('./en_AU.js');
+var locales_en_CA = require('./en_CA.js');
+
+var index = {
+    'en-AU': locales_en_AU,
+    'en-CA': locales_en_CA,
+};
+
+module.exports = index;

package/locales/index.mjs

@@ -0,0 +1,9 @@
+import locale from './en_AU.mjs';
+import locale$1 from './en_CA.mjs';
+
+var index = {
+    'en-AU': locale,
+    'en-CA': locale$1,
+};
+
+export { index as default };

package/locales/types.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/locales/types.mjs

@@ -0,0 +1 @@
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.1.0-alpha.0",
+  "version": "1.1.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -16,10 +16,11 @@
     "build:types": "tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json",
     "build": "yarn build:js && yarn build:types",
     "build:watch": "yarn build:js -w & yarn build:types -w",
-    "publish:npm": "yarn publish --access public"
+    "publish:npm": "yarn publish --access public",
+    "set-dev-env": "npm pkg set react-native=src/index.ts"
   },
   "dependencies": {
-    "@hero-design/rn": "^8.101.3-alpha.0"
+    "@hero-design/rn": "^8.101.1"
   },
   "peerDependencies": {
     "@hero-design/react-native-month-year-picker": "^8.43.1",
@@ -45,7 +46,6 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.27.0",
     "@babel/runtime": "^7.25.0",
-    "@emotion/jest": "^11.11.0",
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.8.0",
@@ -107,6 +107,7 @@
     "react-test-renderer": "18.2.0",
     "rollup": "^4.24.3",
     "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-delete": "^3.0.1",
     "rollup-plugin-flow": "^1.1.1",
     "rollup-plugin-visualizer": "^5.12.0",
     "ts-jest": "^29.1.1",

package/rollup.config.mjs

@@ -7,12 +7,15 @@ import replace from '@rollup/plugin-replace';
 import flow from 'rollup-plugin-flow';
 import { visualizer } from 'rollup-plugin-visualizer';
 import pkg from './package.json' assert { type: 'json' };
+import copy from 'rollup-plugin-copy';
+import del from 'rollup-plugin-delete';
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 
 const generateBuildStats = process.env.GENERATE_BUILD_STATS === 'true';
 const bundleTemplate = process.env.BUNDLE_TEMPLATE || 'treemap';
-const fileName = process.env.FILE_NAME || `stats/${pkg.version}/rn-work-uikit-stats.html`;
+const fileName =
+  process.env.FILE_NAME || `stats/${pkg.version}/rn-work-uikit-stats.html`;
 
 export default [
   {
@@ -63,6 +66,19 @@ export default [
             }),
           ]
         : []),
+      del({ targets: ['locales', 'types'] }),
+      copy({
+        targets: [
+          {
+            src: 'node_modules/@hero-design/rn/locales',
+            dest: '.',
+          },
+          {
+            src: 'node_modules/@hero-design/rn/types',
+            dest: '.',
+          },
+        ],
+      }),
     ],
   },
-]; 
+];

package/src/__tests__/__snapshots__/index.spec.tsx.snap

@@ -159,7 +159,7 @@ exports[`first test to ensure configure correctly should render TextInput with p
               ],
             ]
           }
-          testID="text-input-text-input"
+          testID="text-input"
           themeVariant="text"
           value="test value"
         />

package/src/__tests__/index.spec.tsx

@@ -16,3 +16,18 @@ describe('first test to ensure configure correctly', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 });
+
+describe('Export Completeness', () => {
+  it('should include all exports from @hero-design/rn', () => {
+    // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+    const baseRN = require('@hero-design/rn');
+    // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+    const workUIKit = require('../index');
+
+    const baseExports = Object.keys(baseRN);
+
+    baseExports.forEach((exportName) => {
+      expect(workUIKit).toHaveProperty(exportName);
+    });
+  });
+});

package/src/__tests__/theme-export-override.spec.ts

@@ -0,0 +1,90 @@
+// Mock the entire theme module to avoid import resolution issues
+jest.mock('../theme', () => {
+  const mockWorkTheme = {
+    colors: { text: 'work-color' },
+    fonts: { base: 'work-font' },
+    space: { base: 'work-space' },
+    __hd__: {
+      textInput: {
+        colors: {
+          text: '#WORK_THEME_COLOR',
+          background: '#WORK_BACKGROUND',
+        },
+        space: { containerPadding: 'WORK_PADDING' },
+        fonts: { text: 'WORK_FONT' },
+      },
+      button: { base: 'button' },
+      accordion: { base: 'accordion' },
+    },
+  };
+
+  const mockGetTheme = jest.fn(() => mockWorkTheme);
+
+  return {
+    __esModule: true,
+    default: mockWorkTheme,
+    getTheme: mockGetTheme,
+    Theme: {},
+    CustomTheme: {},
+    ThemeProvider: jest.fn(),
+    ThemeSwitcher: jest.fn(),
+    useTheme: jest.fn(),
+    withTheme: jest.fn(),
+  };
+});
+
+// Mock the base @hero-design/rn
+jest.mock('@hero-design/rn', () => ({
+  getTheme: jest.fn(() => ({
+    colors: { text: 'base-color' },
+    __hd__: {
+      textInput: {
+        colors: { text: 'BASE_THEME_COLOR' },
+        space: { containerPadding: 'BASE_PADDING' },
+      },
+    },
+  })),
+  // Re-export everything else as is
+  Button: 'MockButton',
+  TextInput: 'MockTextInput',
+  ThemeProvider: 'MockBaseThemeProvider',
+  useTheme: jest.fn(),
+}));
+
+describe('Theme Export Override', () => {
+  beforeEach(() => {
+    // Clear module cache to ensure fresh imports
+    jest.resetModules();
+  });
+
+  it('should export work-specific theme with overridden textInput from index', () => {
+    // Re-import to get the mocked version
+    // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+    const { theme: workTheme } = require('../index');
+
+    // Verify that the theme has the work-specific textInput overrides
+    expect(workTheme.__hd__.textInput.colors.text).toBe('#WORK_THEME_COLOR');
+    expect(workTheme.__hd__.textInput.colors.background).toBe(
+      '#WORK_BACKGROUND'
+    );
+    expect(workTheme.__hd__.textInput.space.containerPadding).toBe(
+      'WORK_PADDING'
+    );
+    expect(workTheme.__hd__.textInput.fonts.text).toBe('WORK_FONT');
+  });
+
+  it('should export work-specific getTheme function with overridden textInput', () => {
+    // Re-import to get the mocked version
+    // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+    const { getTheme: workGetTheme } = require('../index');
+
+    const workTheme = workGetTheme();
+
+    // Verify that getTheme returns work-specific textInput theme
+    expect(workTheme.__hd__.textInput.colors.text).toBe('#WORK_THEME_COLOR');
+    expect(workTheme.__hd__.textInput.space.containerPadding).toBe(
+      'WORK_PADDING'
+    );
+    expect(workTheme.__hd__.textInput.fonts.text).toBe('WORK_FONT');
+  });
+});

package/src/index.ts

@@ -1,2 +1,14 @@
-// Re-export all components from @hero-design/rn
+// Re-export everything from @hero-design/rn except theme exports we want to override
 export * from '@hero-design/rn';
+
+// Override theme exports with work-specific versions
+export {
+  getTheme,
+  type Theme,
+  ThemeProvider,
+  ThemeSwitcher,
+  useTheme,
+  withTheme,
+} from './theme';
+
+export { default as theme } from './theme';

package/src/theme/ThemeProvider.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ThemeProvider as BaseThemeProvider, useTheme } from '@hero-design/rn';
+import type { Theme } from './getTheme';
+
+export interface ThemeProviderProps {
+  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+  children: React.ReactNode;
+}
+
+interface ThemeProviderType {
+  (props: ThemeProviderProps): React.ReactElement;
+}
+
+const WorkThemeProvider = BaseThemeProvider as ThemeProviderType;
+
+const useWorkTheme = useTheme as () => Theme;
+
+export { WorkThemeProvider, useWorkTheme };
+
+export default WorkThemeProvider;

package/src/theme/ThemeSwitcher.tsx

@@ -0,0 +1,76 @@
+import React, { PropsWithChildren, useMemo } from 'react';
+
+import {
+  eBensSystemPalette,
+  ehWorkDarkSystemPalette,
+  jobsSystemPalette,
+  swagDarkSystemPalette,
+  swagLightJobsSystemPalette,
+  swagLightSystemPalette,
+  swagSystemPalette,
+  walletSystemPalette,
+  workSystemPalette,
+} from '@hero-design/rn';
+import getWorkTheme from './getTheme';
+import { WorkThemeProvider } from './ThemeProvider';
+
+type ThemeName =
+  | 'swag'
+  | 'swagDark'
+  | 'swagLight'
+  | 'work'
+  | 'jobs'
+  | 'wallet'
+  | 'eBens'
+  | 'ehWorkDark'
+  | 'ehWork'
+  | 'ehJobs';
+
+const WorkThemeSwitcher = ({
+  name = 'work',
+  children,
+}: {
+  name?: ThemeName;
+  children: React.ReactNode;
+}) => {
+  const theme = useMemo(() => {
+    switch (name) {
+      case 'swag':
+        return getWorkTheme(undefined, swagSystemPalette);
+      case 'work':
+        return getWorkTheme(undefined, workSystemPalette);
+      case 'jobs':
+        return getWorkTheme(undefined, jobsSystemPalette);
+      case 'wallet':
+        return getWorkTheme(undefined, walletSystemPalette);
+      case 'eBens':
+        return getWorkTheme(undefined, eBensSystemPalette);
+      case 'swagDark':
+        return getWorkTheme(undefined, swagDarkSystemPalette);
+      case 'swagLight':
+      case 'ehWork':
+        return getWorkTheme(undefined, swagLightSystemPalette);
+      case 'ehWorkDark':
+        return getWorkTheme(undefined, ehWorkDarkSystemPalette);
+      case 'ehJobs':
+        return getWorkTheme(undefined, swagLightJobsSystemPalette);
+    }
+  }, [name]);
+
+  return <WorkThemeProvider theme={theme}>{children}</WorkThemeProvider>;
+};
+
+export const withWorkTheme =
+  <P extends Record<string, unknown>>(
+    C: React.ComponentType<P>,
+    themeName: ThemeName
+  ) =>
+  (props: PropsWithChildren<P>) => {
+    return (
+      <WorkThemeSwitcher name={themeName}>
+        <C {...props} />
+      </WorkThemeSwitcher>
+    );
+  };
+
+export default WorkThemeSwitcher;

package/src/theme/__tests__/ThemeProvider.spec.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { WorkThemeProvider, useWorkTheme } from '../ThemeProvider';
+import workTheme from '..';
+
+const TestComponent = () => {
+  const theme = useWorkTheme();
+  return <Text testID="test-text">Theme loaded: {theme ? 'Yes' : 'No'}</Text>;
+};
+
+describe('WorkThemeProvider', () => {
+  it('should provide theme to children', () => {
+    const { getByTestId } = render(
+      <WorkThemeProvider theme={workTheme}>
+        <TestComponent />
+      </WorkThemeProvider>
+    );
+
+    expect(getByTestId('test-text')).toBeTruthy();
+  });
+
+  it('should allow useWorkTheme hook to access theme', () => {
+    const { getByText } = render(
+      <WorkThemeProvider theme={workTheme}>
+        <TestComponent />
+      </WorkThemeProvider>
+    );
+
+    expect(getByText('Theme loaded: Yes')).toBeTruthy();
+  });
+});