waleed-clock-works 0.0.4

package/.bundle/config

@@ -0,0 +1,2 @@
+BUNDLE_PATH: "vendor/bundle"
+BUNDLE_FORCE_RUBY_PLATFORM: 1

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native',
+};

package/.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  arrowParens: 'avoid',
+  singleQuote: true,
+  trailingComma: 'all',
+};

package/.watchmanconfig

@@ -0,0 +1 @@
+{}

package/App.tsx

@@ -0,0 +1,279 @@
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Svg, {
+  Circle,
+  Line,
+  Text as SvgText,
+  Path,
+  Polygon,
+  G,
+  Rect,
+} from 'react-native-svg';
+
+interface ClockProps {
+  size?: number;
+  backgroundColor?: string;
+}
+
+export default function AnalogClock({
+  size = 300,
+  backgroundColor = '#F9FAFB',
+}: ClockProps) {
+  const center = size / 2;
+  const radius = center - 10;
+
+  const [dateStr, setDateStr] = useState('');
+
+  const [angles, setAngles] = useState({
+    hour: 0,
+    minute: 0,
+    second: 0,
+  });
+
+  useEffect(() => {
+    const startTime = new Date();
+
+    const startSecs = startTime.getSeconds();
+    const startMins = startTime.getMinutes();
+    const startHrs = startTime.getHours() % 12;
+
+    const initialSecondAngle = startSecs * 6;
+    const initialMinuteAngle = startMins * 6 + startSecs * 0.1;
+    const initialHourAngle = startHrs * 30 + startMins * 0.5;
+
+    const formatDate = (date: Date) => {
+      const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
+      return `${days[date.getDay()]} | ${date.getDate()}`;
+    };
+
+    setDateStr(formatDate(startTime));
+
+    const updateClock = () => {
+      const now = new Date();
+      const elapsedSeconds =
+        (now.getTime() - startTime.getTime()) / 1000;
+
+      setAngles({
+        second: initialSecondAngle + elapsedSeconds * 6,
+        minute: initialMinuteAngle + elapsedSeconds * 0.1,
+        hour: initialHourAngle + elapsedSeconds * 0.0083333,
+      });
+
+      setDateStr(formatDate(now));
+    };
+
+    updateClock();
+    const interval = setInterval(updateClock, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const renderClockFace = () => {
+    const elements = [];
+
+    for (let i = 1; i <= 60; i++) {
+      const angle = (i * 6 * Math.PI) / 180 - Math.PI / 2;
+      const isHourTick = i % 5 === 0;
+      const isMajorHourTick = i % 15 === 0;
+
+      let tickLength = 5;
+      if (isHourTick) tickLength = 10;
+      if (isMajorHourTick) tickLength = 14;
+
+      const tickStartX = center + (radius - tickLength) * Math.cos(angle);
+      const tickStartY = center + (radius - tickLength) * Math.sin(angle);
+      const tickEndX = center + radius * Math.cos(angle);
+      const tickEndY = center + radius * Math.sin(angle);
+
+      elements.push(
+        <Line
+          key={`tick-${i}`}
+          x1={tickStartX}
+          y1={tickStartY}
+          x2={tickEndX}
+          y2={tickEndY}
+          stroke={isHourTick ? '#111827' : '#9CA3AF'}
+          strokeWidth={isHourTick ? 2.5 : 1}
+        />
+      );
+
+      if (isHourTick) {
+        const hourNumber = i / 5;
+        const numberX =
+          center + (radius - 32) * Math.cos(angle);
+        const numberY =
+          center + (radius - 32) * Math.sin(angle);
+
+        elements.push(
+          <SvgText
+            key={`num-${hourNumber}`}
+            x={numberX}
+            y={numberY + size * 0.022}
+            fill="#111827"
+            fontSize={size * 0.065}
+            fontWeight="bold"
+            textAnchor="middle"
+          >
+            {hourNumber}
+          </SvgText>
+        );
+      }
+    }
+
+    return elements;
+  };
+
+  return (
+    <View style={styles.screen}>
+      <View
+        style={[
+          styles.container,
+          { width: size, height: size },
+        ]}
+      >
+        <Svg width={size} height={size}>
+          {/* Outer circle */}
+          <Circle
+            cx={center}
+            cy={center}
+            r={radius}
+            stroke="#111827"
+            strokeWidth="4"
+            fill={backgroundColor}
+          />
+
+          {/* Clock face */}
+          {renderClockFace()}
+
+          {/* Logo */}
+          <G
+            transform={`translate(${center}, ${
+              center - size * 0.16
+            }) scale(${size / 300})`}
+          >
+            <Polygon
+              points="0,-16 12,-4 0,8 -12,-4"
+              fill="none"
+              stroke="#111827"
+              strokeWidth="1.5"
+            />
+            <Circle cx="0" cy="-4" r="3" fill="#EF4444" />
+            <Path
+              d="M -6,-4 A 6,6 0 0,1 6,-4"
+              fill="none"
+              stroke="#111827"
+              strokeWidth="1.5"
+            />
+
+            <SvgText
+              x="0"
+              y="26"
+              fill="#111827"
+              fontSize="13"
+              fontWeight="900"
+              letterSpacing="2.5"
+              textAnchor="middle"
+            >
+              WALEED
+            </SvgText>
+
+            <SvgText
+              x="0"
+              y="38"
+              fill="#6B7280"
+              fontSize="7.5"
+              fontWeight="600"
+              letterSpacing="3.5"
+              textAnchor="middle"
+            >
+              CLOCKWORKS
+            </SvgText>
+          </G>
+
+          {/* Date */}
+          <G
+            transform={`translate(${
+              center + radius * 0.36
+            }, ${center + 14}) scale(${
+              size / 300
+            })`}
+          >
+            <Rect
+              x="-30"
+              y="-10"
+              width="60"
+              height="20"
+              rx="3"
+              fill="#FFFFFF"
+              stroke="#D1D5DB"
+              strokeWidth="1.5"
+            />
+            <SvgText
+              x="0"
+              y="3.5"
+              fill="#111827"
+              fontSize="9"
+              fontWeight="bold"
+              textAnchor="middle"
+            >
+              {dateStr}
+            </SvgText>
+          </G>
+
+          {/* Hour hand */}
+          <Line
+            x1={center}
+            y1={center}
+            x2={center}
+            y2={center - radius * 0.45}
+            stroke="#111827"
+            strokeWidth="6"
+            strokeLinecap="round"
+            transform={`rotate(${angles.hour}, ${center}, ${center})`}
+          />
+
+          {/* Minute hand */}
+          <Line
+            x1={center}
+            y1={center}
+            x2={center}
+            y2={center - radius * 0.7}
+            stroke="#4B5563"
+            strokeWidth="4"
+            strokeLinecap="round"
+            transform={`rotate(${angles.minute}, ${center}, ${center})`}
+          />
+
+          {/* Second hand */}
+          <Line
+            x1={center}
+            y1={center + 15}
+            x2={center}
+            y2={center - radius * 0.82}
+            stroke="#EF4444"
+            strokeWidth="2"
+            strokeLinecap="round"
+            transform={`rotate(${angles.second}, ${center}, ${center})`}
+          />
+
+          {/* Center dot */}
+          <Circle cx={center} cy={center} r={6} fill="#111827" />
+          <Circle cx={center} cy={center} r={2} fill="#FFFFFF" />
+        </Svg>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#FFFFFF',
+  },
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/Gemfile

@@ -0,0 +1,17 @@
+source 'https://rubygems.org'
+
+# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
+ruby ">= 2.6.10"
+
+# Exclude problematic versions of cocoapods and activesupport that causes build failures.
+gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
+gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
+gem 'xcodeproj', '< 1.26.0'
+gem 'concurrent-ruby', '< 1.3.4'
+
+# Ruby 3.4.0 has removed some libraries from the standard library.
+gem 'bigdecimal'
+gem 'logger'
+gem 'benchmark'
+gem 'mutex_m'
+gem 'nkf'

package/README.md

@@ -0,0 +1,51 @@
+# 🕒 Waleed Clock Works
+
+A smooth, animated, and customizable **Analog Clock component** for React Native built with `react-native-svg`.
+
+---
+
+## 📦 Installation
+
+```bash
+npm install waleed-clock-works
+
+
+
+## Props
+
+| Property         | Type   | Default   | Description |
+|------------------|--------|----------|-------------|
+| size             | number | 300      | The total height and width (diameter) of the clock layout in pixels. All internal markings scale automatically based on this value. |
+| backgroundColor  | string | #F9FAFB  | The hex or RGB background fill color of the clock face. |
+
+---
+
+## Keywords
+
+react-native, analog-clock, clock, svg-clock, realtime clock, digital analog hybrid, animated clock, react-native-svg clock, time widget, UI component, mobile clock, clock UI, reusable component, custom clock, live clock, clock face
+
+---
+
+## License
+
+MIT License
+
+Copyright (c) 2026 Waleed Ayub
+
+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/__tests__/App.test.tsx

@@ -0,0 +1,13 @@
+/**
+ * @format
+ */
+
+import React from 'react';
+import ReactTestRenderer from 'react-test-renderer';
+import App from '../App';
+
+test('renders correctly', async () => {
+  await ReactTestRenderer.act(() => {
+    ReactTestRenderer.create(<App />);
+  });
+});

package/android/app/build.gradle

@@ -0,0 +1,119 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+    /* Folders */
+    //   The root of your project, i.e. where "package.json" lives. Default is '../..'
+    // root = file("../../")
+    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
+    // reactNativeDir = file("../../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
+    // codegenDir = file("../../node_modules/@react-native/codegen")
+    //   The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
+    // cliFile = file("../../node_modules/react-native/cli.js")
+
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. Default is "debug", "debugOptimized".
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "liteDebugOptimized", "prodDebug", "prodDebugOptimized"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+    //
+    //   The command to run when bundling. By default is 'bundle'
+    // bundleCommand = "ram-bundle"
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+    // entryFile = file("../js/MyApplication.android.js")
+    //
+    //   A list of extra flags to pass to the 'bundle' commands.
+    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+    // extraPackagerArgs = []
+
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is 'hermesc'
+    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    //
+    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+    // hermesFlags = ["-O", "-output-source-map"]
+
+    /* Autolinking */
+    autolinkLibrariesWithApp()
+}
+
+/**
+ * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
+ */
+def enableProguardInReleaseBuilds = false
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = io.github.react-native-community:jsc-android-intl:2026004.+`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
+
+android {
+    ndkVersion rootProject.ext.ndkVersion
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
+
+    namespace "com.waleedclockworks"
+    defaultConfig {
+        applicationId "com.waleedclockworks"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+    }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+}

package/android/app/proguard-rules.pro

@@ -0,0 +1,10 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:

package/android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,27 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:name=".MainApplication"
+      android:label="@string/app_name"
+      android:icon="@mipmap/ic_launcher"
+      android:roundIcon="@mipmap/ic_launcher_round"
+      android:allowBackup="false"
+      android:theme="@style/AppTheme"
+      android:usesCleartextTraffic="${usesCleartextTraffic}"
+      android:supportsRtl="true">
+      <activity
+        android:name=".MainActivity"
+        android:label="@string/app_name"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
+        android:launchMode="singleTask"
+        android:windowSoftInputMode="adjustResize"
+        android:exported="true">
+        <intent-filter>
+            <action android:name="android.intent.action.MAIN" />
+            <category android:name="android.intent.category.LAUNCHER" />
+        </intent-filter>
+      </activity>
+    </application>
+</manifest>

package/android/app/src/main/java/com/waleedclockworks/MainActivity.kt

@@ -0,0 +1,22 @@
+package com.waleedclockworks
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+
+class MainActivity : ReactActivity() {
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  override fun getMainComponentName(): String = "WaleedClockWorks"
+
+  /**
+   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
+   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
+   */
+  override fun createReactActivityDelegate(): ReactActivityDelegate =
+      DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+}

package/android/app/src/main/java/com/waleedclockworks/MainApplication.kt

@@ -0,0 +1,27 @@
+package com.waleedclockworks
+
+import android.app.Application
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactHost
+import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
+import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
+
+class MainApplication : Application(), ReactApplication {
+
+  override val reactHost: ReactHost by lazy {
+    getDefaultReactHost(
+      context = applicationContext,
+      packageList =
+        PackageList(this).packages.apply {
+          // Packages that cannot be autolinked yet can be added manually here, for example:
+          // add(MyReactNativePackage())
+        },
+    )
+  }
+
+  override fun onCreate() {
+    super.onCreate()
+    loadReactNative(this)
+  }
+}

package/android/app/src/main/res/drawable/rn_edit_text_material.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2014 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<inset xmlns:android="http://schemas.android.com/apk/res/android"
+       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
+       android:insetTop="@dimen/abc_edit_text_inset_top_material"
+       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
+       >
+
+    <selector>
+        <!--
+          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
+          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
+          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
+
+          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+
+          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
+        -->
+        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
+        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
+    </selector>
+
+</inset>

package/android/app/src/main/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">WaleedClockWorks</string>
+</resources>

package/android/app/src/main/res/values/styles.xml

@@ -0,0 +1,9 @@
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
+        <!-- Customize your theme here. -->
+        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
+    </style>
+
+</resources>