@tcn/ui 0.0.1

package/src/typography/typography-showcase.stories.tsx

@@ -0,0 +1,347 @@
+import React from 'react';
+import { HStack } from '../stacks/h_stack.js';
+import { Spacer } from '../stacks/spacer.js';
+import { VStack } from '../stacks/v_stack.js';
+import { BodyText } from './body_text/body_text.js';
+import { Callout } from './callout/callout.js';
+import { Caption } from './caption/caption.js';
+import { Footnote } from './footnote/footnote.js';
+import { Headline } from './headline/headline.js';
+import { Subheadline } from './subheadline/subheadline.js';
+import { Title } from './title/title.js';
+
+export default {
+  title: 'Showcase',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export function Typography() {
+  return (
+    <VStack gap="30px" maxWidth="800px">
+      <HStack height="auto">
+        <Subheadline hierarchy="tertiary">Primary</Subheadline>
+        <Spacer />
+        <Subheadline hierarchy="tertiary">Secondary</Subheadline>
+        <Spacer />
+        <Subheadline hierarchy="tertiary">Tertiary</Subheadline>
+      </HStack>
+
+      {/* Title - Large */}
+      <HStack height="auto">
+        <Title hierarchy="primary" size="lg">
+          Large Title
+        </Title>
+        <Spacer />
+        <Title hierarchy="secondary" size="lg">
+          Large Title
+        </Title>
+        <Spacer />
+        <Title hierarchy="tertiary" size="lg">
+          Large Title
+        </Title>
+      </HStack>
+
+      {/* Title - Medium */}
+      <HStack height="auto">
+        <Title hierarchy="primary" size="md">
+          Medium Title
+        </Title>
+        <Spacer />
+        <Title hierarchy="secondary" size="md">
+          Medium Title
+        </Title>
+        <Spacer />
+        <Title hierarchy="tertiary" size="md">
+          Medium Title
+        </Title>
+      </HStack>
+
+      {/* Title - Small */}
+      <HStack height="auto">
+        <Title hierarchy="primary" size="sm">
+          Small Title
+        </Title>
+        <Spacer />
+        <Title hierarchy="secondary" size="sm">
+          Small Title
+        </Title>
+        <Spacer />
+        <Title hierarchy="tertiary" size="sm">
+          Small Title
+        </Title>
+      </HStack>
+
+      {/* Subheadline - Large */}
+      <HStack height="auto">
+        <Subheadline hierarchy="primary" size="lg">
+          Large Subheadline
+        </Subheadline>
+        <Spacer />
+        <Subheadline hierarchy="secondary" size="lg">
+          Large Subheadline
+        </Subheadline>
+        <Spacer />
+        <Subheadline hierarchy="tertiary" size="lg">
+          Large Subheadline
+        </Subheadline>
+      </HStack>
+
+      {/* Subheadline - Medium */}
+      <HStack height="auto">
+        <Subheadline hierarchy="primary" size="md">
+          Medium Subheadline
+        </Subheadline>
+        <Spacer />
+        <Subheadline hierarchy="secondary" size="md">
+          Medium Subheadline
+        </Subheadline>
+        <Spacer />
+        <Subheadline hierarchy="tertiary" size="md">
+          Medium Subheadline
+        </Subheadline>
+      </HStack>
+
+      {/* Subheadline - Small */}
+      <HStack height="auto">
+        <Subheadline hierarchy="primary" size="sm">
+          Small Subheadline
+        </Subheadline>
+        <Spacer />
+        <Subheadline hierarchy="secondary" size="sm">
+          Small Subheadline
+        </Subheadline>
+        <Spacer />
+        <Subheadline hierarchy="tertiary" size="sm">
+          Small Subheadline
+        </Subheadline>
+      </HStack>
+
+      {/* Headline - Large */}
+      <HStack height="auto">
+        <Headline hierarchy="primary" size="lg">
+          Large Headline
+        </Headline>
+        <Spacer />
+        <Headline hierarchy="secondary" size="lg">
+          Large Headline
+        </Headline>
+        <Spacer />
+        <Headline hierarchy="tertiary" size="lg">
+          Large Headline
+        </Headline>
+      </HStack>
+
+      {/* Headline - Medium */}
+      <HStack height="auto">
+        <Headline hierarchy="primary" size="md">
+          Medium Headline
+        </Headline>
+        <Spacer />
+        <Headline hierarchy="secondary" size="md">
+          Medium Headline
+        </Headline>
+        <Spacer />
+        <Headline hierarchy="tertiary" size="md">
+          Medium Headline
+        </Headline>
+      </HStack>
+
+      {/* Headline - Small */}
+      <HStack height="auto">
+        <Headline hierarchy="primary" size="sm">
+          Small Headline
+        </Headline>
+        <Spacer />
+        <Headline hierarchy="secondary" size="sm">
+          Small Headline
+        </Headline>
+        <Spacer />
+        <Headline hierarchy="tertiary" size="sm">
+          Small Headline
+        </Headline>
+      </HStack>
+
+      {/* BodyText - Large */}
+      <HStack height="auto">
+        <BodyText hierarchy="primary" size="lg">
+          Large Body Text
+        </BodyText>
+        <Spacer />
+        <BodyText hierarchy="secondary" size="lg">
+          Large Body Text
+        </BodyText>
+        <Spacer />
+        <BodyText hierarchy="tertiary" size="lg">
+          Large Body Text
+        </BodyText>
+      </HStack>
+
+      {/* BodyText - Medium */}
+      <HStack height="auto">
+        <BodyText hierarchy="primary" size="md">
+          Medium Body Text
+        </BodyText>
+        <Spacer />
+        <BodyText hierarchy="secondary" size="md">
+          Medium Body Text
+        </BodyText>
+        <Spacer />
+        <BodyText hierarchy="tertiary" size="md">
+          Medium Body Text
+        </BodyText>
+      </HStack>
+
+      {/* BodyText - Small */}
+      <HStack height="auto">
+        <BodyText hierarchy="primary" size="sm">
+          Small Body Text
+        </BodyText>
+        <Spacer />
+        <BodyText hierarchy="secondary" size="sm">
+          Small Body Text
+        </BodyText>
+        <Spacer />
+        <BodyText hierarchy="tertiary" size="sm">
+          Small Body Text
+        </BodyText>
+      </HStack>
+
+      {/* Callout - Large */}
+      <HStack height="auto">
+        <Callout hierarchy="primary" size="lg">
+          Large Callout
+        </Callout>
+        <Spacer />
+        <Callout hierarchy="secondary" size="lg">
+          Large Callout
+        </Callout>
+        <Spacer />
+        <Callout hierarchy="tertiary" size="lg">
+          Large Callout
+        </Callout>
+      </HStack>
+
+      {/* Callout - Medium */}
+      <HStack height="auto">
+        <Callout hierarchy="primary" size="md">
+          Medium Callout
+        </Callout>
+        <Spacer />
+        <Callout hierarchy="secondary" size="md">
+          Medium Callout
+        </Callout>
+        <Spacer />
+        <Callout hierarchy="tertiary" size="md">
+          Medium Callout
+        </Callout>
+      </HStack>
+
+      {/* Callout - Small */}
+      <HStack height="auto">
+        <Callout hierarchy="primary" size="sm">
+          Small Callout
+        </Callout>
+        <Spacer />
+        <Callout hierarchy="secondary" size="sm">
+          Small Callout
+        </Callout>
+        <Spacer />
+        <Callout hierarchy="tertiary" size="sm">
+          Small Callout
+        </Callout>
+      </HStack>
+
+      {/* Caption - Large */}
+      <HStack height="auto">
+        <Caption hierarchy="primary" size="lg">
+          Large Caption
+        </Caption>
+        <Spacer />
+        <Caption hierarchy="secondary" size="lg">
+          Large Caption
+        </Caption>
+        <Spacer />
+        <Caption hierarchy="tertiary" size="lg">
+          Large Caption
+        </Caption>
+      </HStack>
+
+      {/* Caption - Medium */}
+      <HStack height="auto">
+        <Caption hierarchy="primary" size="md">
+          Medium Caption
+        </Caption>
+        <Spacer />
+        <Caption hierarchy="secondary" size="md">
+          Medium Caption
+        </Caption>
+        <Spacer />
+        <Caption hierarchy="tertiary" size="md">
+          Medium Caption
+        </Caption>
+      </HStack>
+
+      {/* Caption - Small */}
+      <HStack height="auto">
+        <Caption hierarchy="primary" size="sm">
+          Small Caption
+        </Caption>
+        <Spacer />
+        <Caption hierarchy="secondary" size="sm">
+          Small Caption
+        </Caption>
+        <Spacer />
+        <Caption hierarchy="tertiary" size="sm">
+          Small Caption
+        </Caption>
+      </HStack>
+
+      {/* Footnote - Large */}
+      <HStack height="auto">
+        <Footnote hierarchy="primary" size="lg">
+          Large Footnote
+        </Footnote>
+        <Spacer />
+        <Footnote hierarchy="secondary" size="lg">
+          Large Footnote
+        </Footnote>
+        <Spacer />
+        <Footnote hierarchy="tertiary" size="lg">
+          Large Footnote
+        </Footnote>
+      </HStack>
+
+      {/* Footnote - Medium */}
+      <HStack height="auto">
+        <Footnote hierarchy="primary" size="md">
+          Medium Footnote
+        </Footnote>
+        <Spacer />
+        <Footnote hierarchy="secondary" size="md">
+          Medium Footnote
+        </Footnote>
+        <Spacer />
+        <Footnote hierarchy="tertiary" size="md">
+          Medium Footnote
+        </Footnote>
+      </HStack>
+
+      {/* Footnote - Small */}
+      <HStack height="auto">
+        <Footnote hierarchy="primary" size="sm">
+          Small Footnote
+        </Footnote>
+        <Spacer />
+        <Footnote hierarchy="secondary" size="sm">
+          Small Footnote
+        </Footnote>
+        <Spacer />
+        <Footnote hierarchy="tertiary" size="sm">
+          Small Footnote
+        </Footnote>
+      </HStack>
+    </VStack>
+  );
+}

package/src/utils/__stories__/use_draggable.stories.tsx

@@ -0,0 +1,217 @@
+import React, { useState, useRef } from 'react';
+import { useDraggable } from '../hooks/use_draggable';
+import { Box } from '../../stacks/box/box.js';
+
+export default {
+  title: 'Hooks/useDraggable',
+  component: <></>,
+  args: {
+    startX: 200,
+    startY: 100,
+  },
+};
+
+export const BasicDraggable = {
+  render: args => {
+    const [position, setPosition] = useState({ x: args.startX, y: args.startY });
+    const [isDragging, setIsDragging] = useState(false);
+    const elementStartPosition = useRef({ x: args.startX, y: args.startY });
+
+    const dragRef = useDraggable({
+      startDragCallback: () => {
+        setIsDragging(true);
+        elementStartPosition.current = { x: position.x, y: position.y };
+      },
+      dragCallback: (deltaX, deltaY) => {
+        setPosition({
+          x: elementStartPosition.current.x + deltaX,
+          y: elementStartPosition.current.y + deltaY,
+        });
+      },
+      endDragCallback: () => {
+        setIsDragging(false);
+      },
+    });
+
+    return (
+      <div>
+        <Box
+          ref={dragRef as React.RefObject<HTMLDivElement>}
+          style={{
+            width: '100px',
+            height: '100px',
+            backgroundColor: isDragging ? '#3593de' : '#2196F3',
+            position: 'absolute',
+            left: `${position.x}px`,
+            top: `${position.y}px`,
+            cursor: 'move',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'white',
+            borderRadius: '4px',
+          }}
+        >
+          Drag Me!
+        </Box>
+        <div style={{ marginTop: '20px' }}>
+          <p>
+            Current Position: x={position.x}, y={position.y}
+          </p>
+          <p>Status: {isDragging ? 'Dragging' : 'Idle'}</p>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const MultipleDraggables = {
+  render: () => {
+    const [boxes, setBoxes] = useState([
+      { id: 1, x: 0, y: 150, color: '#f44336' },
+      { id: 2, x: 100, y: 150, color: '#4CAF50' },
+      { id: 3, x: 200, y: 150, color: '#9C27B0' },
+      { id: 4, x: 300, y: 150, color: '#2196F3' },
+    ]);
+
+    const createDragHandlers = (
+      id: number,
+      elementStartPosition: React.RefObject<{ x: number; y: number }>
+    ) => ({
+      startDragCallback: () => {
+        const box = boxes.find(b => b.id === id);
+        if (box && elementStartPosition.current) {
+          elementStartPosition.current.x = box.x;
+          elementStartPosition.current.y = box.y;
+        }
+      },
+      dragCallback: (deltaX: number, deltaY: number) => {
+        if (!elementStartPosition.current) return;
+        setBoxes(prev =>
+          prev.map(box =>
+            box.id === id
+              ? {
+                  ...box,
+                  x: (elementStartPosition.current?.x ?? box.x) + deltaX,
+                  y: (elementStartPosition.current?.y ?? box.y) + deltaY,
+                }
+              : box
+          )
+        );
+      },
+      endDragCallback: () => {},
+    });
+
+    return (
+      <div
+        style={{
+          position: 'relative',
+        }}
+      >
+        <h3>Multiple Draggable Elements</h3>
+        <p>
+          box 1: x= {boxes[0].x}, y= {boxes[0].y},
+          <br />
+          box 2: x= {boxes[1].x}, y= {boxes[1].y},
+          <br />
+          box 3: x= {boxes[2].x}, y= {boxes[2].y}
+          <br />
+          box 4: x= {boxes[3].x}, y= {boxes[3].y}
+        </p>
+        {boxes.map(box => {
+          const elementStartPosition = useRef({ x: box.x, y: box.y });
+          const dragRef = useDraggable(createDragHandlers(box.id, elementStartPosition));
+          return (
+            <Box
+              key={box.id}
+              ref={dragRef as React.RefObject<HTMLDivElement>}
+              style={{
+                width: '90px',
+                height: '100px',
+                backgroundColor: box.color,
+                position: 'absolute',
+                left: `${box.x}px`,
+                top: `${box.y}px`,
+                cursor: 'move',
+                borderRadius: '4px',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: 'white',
+              }}
+            >
+              {box.id}
+            </Box>
+          );
+        })}
+      </div>
+    );
+  },
+};
+
+// Custom drag handle
+export const CustomDragHandle = {
+  render: args => {
+    const [position, setPosition] = useState({ x: args.startX, y: args.startY });
+    const [isDragging, setIsDragging] = useState(false);
+    const elementStartPosition = useRef({ x: args.startX, y: args.startY });
+
+    const dragRef = useDraggable({
+      startDragCallback: () => {
+        setIsDragging(true);
+        elementStartPosition.current = { x: position.x, y: position.y };
+      },
+      dragCallback: (deltaX, deltaY) => {
+        setPosition({
+          x: elementStartPosition.current.x + deltaX,
+          y: elementStartPosition.current.y + deltaY,
+        });
+      },
+      endDragCallback: () => {
+        setIsDragging(false);
+      },
+    });
+
+    return (
+      <div>
+        <h3>Custom Drag Handle</h3>
+        <Box
+          style={{
+            width: '200px',
+            height: '150px',
+            position: 'absolute',
+            left: `${position.x}px`,
+            top: `${position.y}px`,
+            border: '2px solid #666',
+            backgroundColor: '#f5f5f5',
+            borderRadius: '4px',
+            boxShadow: '0 4px 4px rgba(0,0,0,0.2)',
+          }}
+        >
+          <Box
+            ref={dragRef as React.RefObject<HTMLDivElement>}
+            style={{
+              height: '30px',
+              backgroundColor: '#2196F3',
+              cursor: 'move',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: 'white',
+              fontSize: '12px',
+            }}
+          >
+            Grab Here
+          </Box>
+          <Box padding="8px">
+            <p>Grab the handle above to drag this element.</p>
+          </Box>
+        </Box>
+        <p>
+          Position: x={position.x}, y={position.y}
+        </p>
+        <p>Status: {isDragging ? 'Dragging' : 'Idle'}</p>
+      </div>
+    );
+  },
+};

package/src/utils/calendar/calendar_date.ts

@@ -0,0 +1,10 @@
+import type { MonthValue } from './month.js';
+
+export interface CalendarDate {
+  month: MonthValue;
+  year: number;
+  date: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+}

package/src/utils/calendar/calendar_dates_generator.ts

@@ -0,0 +1,59 @@
+import type { CalendarDate } from './calendar_date.js';
+import type { MonthValue } from './month.js';
+
+export class CalendarDatesGenerator {
+  private _extraDates: CalendarDate[] = [];
+  readonly dates: CalendarDate[];
+
+  constructor(year: number, month: number) {
+    this.dates = [];
+    this._fillDates();
+    this.updateDates(year, month);
+  }
+
+  protected _fillDates() {
+    const dates = this.dates;
+    dates.length = 0;
+
+    for (let date = 0; date < 42; date++) {
+      dates.push({
+        year: 0,
+        month: 0,
+        date: 0,
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+      });
+    }
+  }
+
+  private _addExtraDates() {
+    if (this.dates.length === 35) {
+      this.dates.push(...this._extraDates);
+    }
+  }
+
+  updateDates(year: number, month: number) {
+    this._addExtraDates();
+
+    const dates: CalendarDate[] = this.dates;
+    const startDate = new Date(year, month);
+
+    while (startDate.getDay() !== 0) {
+      startDate.setDate(startDate.getDate() - 1);
+    }
+
+    for (let i = 0; i < 42; i++) {
+      const date = dates[i];
+
+      date.year = startDate.getFullYear();
+      date.month = startDate.getMonth() as MonthValue;
+      date.date = startDate.getDate();
+      date.hours = 0;
+      date.minutes = 0;
+      date.seconds = 0;
+
+      startDate.setDate(startDate.getDate() + 1);
+    }
+  }
+}

package/src/utils/calendar/get_days_of_week.ts

@@ -0,0 +1,17 @@
+export function getDaysOfWeek(
+  countryCode: string,
+  dayFormat: 'long' | 'short' | 'narrow' = 'long'
+) {
+  const formatter = new Intl.DateTimeFormat(countryCode, { weekday: dayFormat });
+  const days: string[] = [];
+  // DO NOT USE UTC HERE, IT WILL BREAK THE DAYS
+  const referenceDate = new Date(2024, 0, 7); // A Sunday
+
+  for (let i = 0; i < 7; i++) {
+    const date = new Date(referenceDate);
+    date.setDate(referenceDate.getDate() + i);
+    days.push(formatter.format(date));
+  }
+
+  return days;
+}

package/src/utils/calendar/get_months_of_year.ts

@@ -0,0 +1,32 @@
+export function getMonthsOfYear(
+  countryCode: string,
+  monthFormat: 'long' | 'short' | 'narrow' | 'numeric' | '2-digit' = 'long'
+): string[] {
+  const formatter = new Intl.DateTimeFormat(countryCode, { month: monthFormat });
+  const months: string[] = [];
+  // DO NOT USE UTC HERE, IT WILL BREAK THE MONTHS
+  const referenceDate = new Date(2024, 0, 1);
+
+  for (let i = 0; i < 12; i++) {
+    const date = new Date(referenceDate);
+    date.setMonth(i);
+
+    // Format the month name
+    let month = formatter.format(date);
+
+    // Capitalize the first segment of the string
+    month = capitalizeFirstCharacter(month, countryCode);
+
+    months.push(month);
+  }
+
+  return months;
+}
+
+function capitalizeFirstCharacter(input: string, locale: string): string {
+  const segmenter = new Intl.Segmenter(locale, { granularity: 'grapheme' });
+  const segments = segmenter.segment(input);
+  const firstSegment = segments[Symbol.iterator]().next().value?.segment || '';
+
+  return firstSegment.toLocaleUpperCase(locale) + input.slice(firstSegment.length);
+}

package/src/utils/calendar/month.ts

@@ -0,0 +1,16 @@
+export const Month = {
+  January: 0,
+  February: 1,
+  March: 2,
+  April: 3,
+  May: 4,
+  June: 5,
+  July: 6,
+  August: 7,
+  September: 8,
+  October: 9,
+  November: 10,
+  December: 11,
+} as const;
+
+export type MonthValue = (typeof Month)[keyof typeof Month];