squircle-view 0.0.0-stage → 0.2.0

package/src/root/index.ts

@@ -0,0 +1,5 @@
+export { SquircleView } from '../components';
+export type { ISquircleViewProps } from '../interfaces';
+export type { TSquircleViewStyle } from '../types';
+export type { ISquircleViewProps as SquircleViewProps } from '../interfaces';
+export type { TSquircleViewStyle as SquircleViewStyle } from '../types';

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './native.types';
+export * from './squircle.types';

package/src/types/native-component-registry.d.ts

@@ -0,0 +1,15 @@
+declare module 'react-native/Libraries/NativeComponent/NativeComponentRegistry' {
+  import type { HostComponent } from 'react-native';
+
+  interface IPartialViewConfig {
+    uiViewClassName: string;
+    validAttributes: Record<string, boolean>;
+  }
+
+  function get<TProps extends object>(
+    name: string,
+    viewConfigProvider: () => IPartialViewConfig
+  ): HostComponent<TProps>;
+
+  export { get };
+}

package/src/types/native.types.ts

@@ -0,0 +1,8 @@
+import type { COMPONENT_NAMES, NATIVE_VIEW_NAMES } from '../constants';
+
+type TNativeViewName =
+  (typeof NATIVE_VIEW_NAMES)[keyof typeof NATIVE_VIEW_NAMES];
+
+type TComponentName = (typeof COMPONENT_NAMES)[keyof typeof COMPONENT_NAMES];
+
+export type { TNativeViewName, TComponentName };

package/src/types/squircle.types.ts

@@ -0,0 +1,7 @@
+import type { ViewStyle } from 'react-native';
+
+type TSquircleViewStyle = ViewStyle & {
+  borderSmoothing?: number;
+};
+
+export type { TSquircleViewStyle };

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './style.utils';

package/src/utils/style.utils.ts

@@ -0,0 +1,17 @@
+import { StyleSheet, type StyleProp } from 'react-native';
+
+import type { ISquircleStyle } from '../interfaces';
+import type { TSquircleViewStyle } from '../types';
+
+const splitSquircleStyle = <T extends StyleProp<TSquircleViewStyle>>(
+  style: T
+): ISquircleStyle => {
+  const flattened = StyleSheet.flatten(style);
+  if (flattened?.borderSmoothing === undefined) {
+    return { style, borderSmoothing: undefined };
+  }
+  const { borderSmoothing, ...viewStyle } = flattened;
+  return { style: viewStyle, borderSmoothing };
+};
+
+export { splitSquircleStyle };

package/src/views/SquircleViewNativeComponent.ts

@@ -0,0 +1,12 @@
+import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+interface INativeSquircleViewProps extends ViewProps {
+  borderSmoothing?: CodegenTypes.WithDefault<CodegenTypes.Float, 0>;
+}
+
+export type { INativeSquircleViewProps };
+
+export default codegenNativeComponent<INativeSquircleViewProps>(
+  'SquircleView'
+) as HostComponent<INativeSquircleViewProps>;

package/src/views/index.ts

@@ -0,0 +1,27 @@
+import type { HostComponent } from 'react-native';
+// Registers the codegen view config outside the spec module, so Fast Refresh can re-run this file without registering the view twice.
+// eslint-disable-next-line @react-native/no-deep-imports
+import { get } from 'react-native/Libraries/NativeComponent/NativeComponentRegistry';
+
+import { NATIVE_VIEW_NAMES } from '../constants';
+import type { INativeSquircleViewProps } from './SquircleViewNativeComponent';
+
+type TNativeSquircleView = HostComponent<INativeSquircleViewProps>;
+
+const registry = globalThis as typeof globalThis & {
+  __squircleViewNativeComponent?: TNativeSquircleView;
+};
+
+const NativeSquircleView: TNativeSquircleView =
+  registry.__squircleViewNativeComponent ??
+  (registry.__squircleViewNativeComponent = get<INativeSquircleViewProps>(
+    NATIVE_VIEW_NAMES.SQUIRCLE_VIEW,
+    () => ({
+      uiViewClassName: NATIVE_VIEW_NAMES.SQUIRCLE_VIEW,
+      validAttributes: { borderSmoothing: true },
+    })
+  ));
+
+export type { INativeSquircleViewProps } from './SquircleViewNativeComponent';
+
+export { NativeSquircleView };