feat(new tool): Snowflake ID extractor

components.d.ts

@@ -90,17 +90,28 @@ declare module '@vue/runtime-core' {
     HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
     IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default']
     'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
+    'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
+    IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['default']
+    IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
+    IconMdiCamera: typeof import('~icons/mdi/camera')['default']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     IconMdiClose: typeof import('~icons/mdi/close')['default']
     IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
+    IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
+    IconMdiDownload: typeof import('~icons/mdi/download')['default']
     IconMdiEye: typeof import('~icons/mdi/eye')['default']
     IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
     IconMdiHeart: typeof import('~icons/mdi/heart')['default']
+    IconMdiPause: typeof import('~icons/mdi/pause')['default']
+    IconMdiPlay: typeof import('~icons/mdi/play')['default']
+    IconMdiRecord: typeof import('~icons/mdi/record')['default']
+    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     IconMdiSearch: typeof import('~icons/mdi/search')['default']
     IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
     IconMdiTriangleDown: typeof import('~icons/mdi/triangle-down')['default']
+    IconMdiVideo: typeof import('~icons/mdi/video')['default']
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
     IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
     Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
@@ -129,23 +140,39 @@ declare module '@vue/runtime-core' {
     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
+    NCheckbox: typeof import('naive-ui')['NCheckbox']
     NButton: typeof import('naive-ui')['NButton']
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
+    NDivider: typeof import('naive-ui')['NDivider']
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NH1: typeof import('naive-ui')['NH1']
+    NH2: typeof import('naive-ui')['NH2']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NImage: typeof import('naive-ui')['NImage']
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
+    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NProgress: typeof import('naive-ui')['NProgress']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSlider: typeof import('naive-ui')['NSlider']
+    NSpin: typeof import('naive-ui')['NSpin']
+    NStatistic: typeof import('naive-ui')['NStatistic']
+    NSwitch: typeof import('naive-ui')['NSwitch']
+    NTable: typeof import('naive-ui')['NTable']
+    NTag: typeof import('naive-ui')['NTag']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
@@ -163,6 +190,7 @@ declare module '@vue/runtime-core' {
     RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
     SafelinkDecoder: typeof import('./src/tools/safelink-decoder/safelink-decoder.vue')['default']
     SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
+    SnowflakeIdExtractor: typeof import('./src/tools/snowflake-id-extractor/snowflake-id-extractor.vue')['default']
     SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
     SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']
     StringObfuscator: typeof import('./src/tools/string-obfuscator/string-obfuscator.vue')['default']

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as snowflakeIdExtractor } from './snowflake-id-extractor';
 import { tool as emailNormalizer } from './email-normalizer';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
@@ -89,7 +90,19 @@ import { tool as yamlViewer } from './yaml-viewer';
 export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Crypto',
-    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, ulidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser, pdfSignatureChecker],
+    components: [
+      tokenGenerator,
+      hashText,
+      bcrypt,
+      uuidGenerator,
+      ulidGenerator,
+      cypher,
+      bip39,
+      hmacGenerator,
+      rsaKeyPairGenerator,
+      passwordStrengthAnalyser,
+      pdfSignatureChecker,
+    ],
   },
   {
     name: 'Converter',
@@ -135,6 +148,7 @@ export const toolsByCategory: ToolCategory[] = [
       httpStatusCodes,
       jsonDiff,
       safelinkDecoder,
+      snowflakeIdExtractor,
     ],
   },
   {
@@ -160,7 +174,14 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
+    components: [
+      ipv4SubnetCalculator,
+      ipv4AddressConverter,
+      ipv4RangeExpander,
+      macAddressLookup,
+      macAddressGenerator,
+      ipv6UlaGenerator,
+    ],
   },
   {
     name: 'Math',

src/tools/snowflake-id-extractor/index.ts

@@ -0,0 +1,12 @@
+import { Id } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Snowflake ID extractor',
+  path: '/snowflake-id-extractor',
+  description: 'Extract timestamp, machine ID, and sequence number from a Snowflake ID',
+  keywords: ['snowflake', 'id', 'extractor'],
+  component: () => import('./snowflake-id-extractor.vue'),
+  icon: Id,
+  createdAt: new Date('2024-07-22'),
+});

src/tools/snowflake-id-extractor/snowflake-id-extractor.service.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest';
+import { extractId, extractMachineId, extractTimestamp } from './snowflake-id-extractor.service';
+
+describe('snowflake-id-extractor', () => {
+  it('extract id from Snowflake ID', () => {
+    expect(extractId(1263785187301658678n)).toBe(54);
+  });
+  it('extract machine id from Snowflake ID', () => {
+    expect(extractMachineId(1263785187301658678n)).toBe(65);
+  });
+  it('extract timestamp from Snowflake ID', () => {
+    expect(extractTimestamp(1263785187301658678n, new Date(1420070400000))).toStrictEqual(new Date(1721380268646));
+  });
+});

src/tools/snowflake-id-extractor/snowflake-id-extractor.service.ts

@@ -0,0 +1,15 @@
+export function extractId(id: bigint) {
+  return Number(id & 4095n);
+}
+
+export function extractMachineId(id: bigint) {
+  return Number((id >> 12n) & 127n);
+}
+
+export function extractTimestamp(id: bigint, epoch: bigint | Date) {
+  return new Date(Number((id >> 22n) + getTimestamp(epoch)));
+}
+
+function getTimestamp(time: bigint | Date) {
+  return typeof time === 'bigint' ? time : BigInt(new Date(time).getTime());
+}

src/tools/snowflake-id-extractor/snowflake-id-extractor.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { extractId, extractMachineId, extractTimestamp } from './snowflake-id-extractor.service';
+
+const inputId = ref('1263785187301658678');
+const inputEpoch = ref('');
+
+const inputProps = {
+  'labelPosition': 'left',
+  'labelWidth': '170px',
+  'labelAlign': 'right',
+  'readonly': true,
+  'mb-2': '',
+} as const;
+</script>
+
+<template>
+  <div>
+    <c-card>
+      <c-input-text v-model:value="inputId" label="Snowflake ID" placeholder="Put Snowflake ID here (eg. 1263785187301658678)" label-position="left" label-width="110px" mb-2 label-align="right" />
+      <c-input-text v-model:value="inputEpoch" label="Epoch" placeholder="Put Epoch Timestamp here (optional, eg. 1420070400000)" label-position="left" label-width="110px" mb-2 label-align="right" />
+
+      <n-divider />
+
+      <InputCopyable
+        label="Local date"
+        v-bind="inputProps"
+        :value="inputEpoch ? new Date(extractTimestamp(BigInt(inputId.valueOf()), BigInt(inputEpoch.valueOf()))).toLocaleString() : ''"
+        placeholder="Epoch Timestamp will be here..."
+        label-position="left" label-width="110px" mb-2 label-align="right"
+      />
+
+      <InputCopyable
+        label="Timestamp"
+        v-bind="inputProps"
+        :value="inputEpoch ? new Date(extractTimestamp(BigInt(inputId.valueOf()), BigInt(inputEpoch.valueOf()))).getTime() : ''"
+        placeholder="Epoch Timestamp will be here..."
+        label-position="left" label-width="110px" mb-2 label-align="right"
+      />
+
+      <InputCopyable
+        label="Machine ID"
+        v-bind="inputProps"
+        :value="extractMachineId(BigInt(inputId.valueOf()))"
+        placeholder="Machine ID will be here..."
+        label-position="left" label-width="110px" mb-2 label-align="right"
+      />
+
+      <InputCopyable
+        label="Sequence"
+        v-bind="inputProps"
+        :value="extractId(BigInt(inputId.valueOf()))"
+        placeholder="Sequence number will be here..."
+        label-position="left" label-width="110px" mb-2 label-align="right"
+      />
+    </c-card>
+  </div>
+</template>