Types

Overview

The types module (src/utils/types.ts) exports TypeScript type definitions used throughout stevenson.space for type-safe schedule management, theme configuration, and period tracking.

Schedule Types

Schedule

A schedule can be either single-day (like most schedules) or multi-day (like Finals week).

type Schedule = SingleDaySchedule | MultiDaySchedule;

Show SingleDaySchedule

name

ScheduleMode

required

The name of the schedule mode (e.g., “Normal”, “Half Periods”)

isCustom

boolean

Whether this is a user-defined custom schedule

start

string[]

required

Array of start times in 24-hour format (e.g., [“8:00”, “9:00”])

end

string[]

required

Array of end times in 24-hour format

periods

string[]

required

Array of period names (e.g., [“1”, “2”, “3”])

Show MultiDaySchedule

name

ScheduleMode

required

The name of the schedule mode

isCustom

boolean

Whether this is a user-defined custom schedule

start

string[] | string[][]

required

Start times - can be 2D array for multi-day schedules

end

string[] | string[][]

required

End times - can be 2D array for multi-day schedules

periods

string[] | string[][]

required

Period names - can be 2D array for multi-day schedules

ScheduleCollection

Groups multiple schedule modes together for a specific date range.

name

ScheduleType

required

The type of schedule (e.g., “Standard Schedule”, “Late Arrival”)

isSpecial

boolean

required

Whether this is a special schedule

dates

string[]

required

Array of date patterns this schedule applies to

modes

Schedule[]

required

Array of schedule modes available for this schedule type

eventAliases

string[]

Optional alternative names for this schedule

CustomSchedules

Format for storing user-defined schedules in localStorage.

type CustomSchedules = Record<string, Schedule[]>

Example:

const customSchedules: CustomSchedules = {
  "My Schedule": [
    {
      name: "Normal",
      isCustom: true,
      start: ["8:00", "9:30", "11:00"],
      end: ["9:20", "10:50", "12:20"],
      periods: ["1", "2", "3"]
    }
  ]
};

Period Types

Period

Represents a class period, passing period, or before/after school time.

type Period =
  | { beforeSchool: true, afterSchool?: false }
  | { beforeSchool?: false, afterSchool: true }
  | { beforeSchool?: false, afterSchool?: false, name: string, start: string, end: string }

Show Period Properties

The Period type is a discriminated union with three variants:Before School:

beforeSchool

true

required

Indicates time before first period

After School:

afterSchool

true

required

Indicates time after last period

During School:

name

string

required

Period name (e.g., “1”, “2”) or ”!Passing” for passing periods

start

string

required

Start time in 24-hour format (e.g., “8:00”)

end

string

required

End time in 24-hour format (e.g., “9:20”)

Example Usage:

import { Period } from '@/utils/types';

// Before school
const beforeSchool: Period = { beforeSchool: true };

// Regular period
const period1: Period = {
  name: "1",
  start: "8:00",
  end: "9:20"
};

// Passing period (prefixed with !)
const passing: Period = {
  name: "!Passing",
  start: "9:20",
  end: "9:30"
};

Theme Types

Theme

Defines the complete structure for a visual theme.

metadata

ThemeMetadata

required

Show properties

name

string

required

Display name of the theme

author

string

required

Theme creator’s name

visibility

'show' | 'draft' | 'hide'

required

Controls whether theme appears in theme selector

recommended

ThemeRecommended

Show properties

timing

'always' | 'never' | 'season' | string

required

When to recommend this theme

message

string

Homepage message advertising the theme

seasonalDates

string

Date pattern for seasonal themes (e.g., “12/1-12/31”)

styling

ThemeStyling

required

Complete styling configuration (see ThemeStyling below)

ThemeStyling

Defines all visual styling properties for a theme.

base

'light' | 'dark'

Base color scheme

background

string

Background color (CSS color value)

secondaryBackground

string

Secondary background color for cards and panels

accent

string

Accent color for interactive elements

text

ThemeTextColors

Show properties

primary

string

required

Primary text color

secondary

string

required

Secondary text color

tertiary

string

required

Tertiary text color

header

ThemeHeaderConfig

Show properties

background

string

required

Header background color

image

object

Show properties

full

string

required

Desktop background image URL

mobile

string

Mobile background image URL

scheduleBar

string

required

Color of the bar below the header

iconCards

ThemeIconCards

Show properties

regular

string

required

Text color for regular icon cards

invert

string

required

Text color for inverted icon cards

particles

ThemeParticles

Show properties

images

string[]

required

Array of particle image URLs

speed

number

Particle animation speed

count

number

Number of particles to display

size

number

Particle size in pixels

opacity

number

Particle opacity (0-1)

windPower

number

Horizontal drift strength

Example Theme:

import { Theme } from '@/utils/types';

const winterTheme: Theme = {
  metadata: {
    name: "Winter Wonderland",
    author: "Student Council"
  },
  visibility: "show",
  recommended: {
    timing: "season",
    message: "Get into the winter spirit!"
  },
  seasonalDates: "12/1-2/28",
  styling: {
    base: "dark",
    background: "#1a2332",
    accent: "#64b5f6",
    text: {
      primary: "#ffffff",
      secondary: "#b0bec5",
      tertiary: "#78909c"
    },
    particles: {
      images: ["/images/snowflake.png"],
      speed: 2,
      count: 50
    }
  }
};

Utility Types

NonEmptyArray

Ensures an array has at least one element.

type NonEmptyArray<T> = { 0: T } & T[];

MapStateToComputed

Helper type for mapping Vuex/Pinia state to computed properties.

type MapStateToComputed<S> = {
  [K in keyof S]: () => S[K]
}

Example:

import { MapStateToComputed } from '@/utils/types';

interface MyState {
  count: number;
  name: string;
}

// Creates: { count: () => number, name: () => string }
type MyComputed = MapStateToComputed<MyState>;

Usage in Components

import { Schedule, Period, Theme } from '@/utils/types';
import { useScheduleStore } from '@/stores/schedules';

export default {
  setup() {
    const scheduleStore = useScheduleStore();
    
    // Type-safe schedule access
    const currentSchedule: Schedule = scheduleStore.currentSchedule;
    
    // Type-safe period checking
    const checkPeriod = (period: Period) => {
      if (period.beforeSchool) {
        console.log('Before school');
      } else if (period.afterSchool) {
        console.log('After school');
      } else {
        console.log(`Period ${period.name}: ${period.start} - ${period.end}`);
      }
    };
  }
};

Components

State Management

Utilities

Overview

Schedule Types

Schedule

ScheduleCollection

CustomSchedules

Period Types

Period

Theme Types

Theme

ThemeStyling

Utility Types

NonEmptyArray

MapStateToComputed

Usage in Components

Build docs developers (and LLMs) love

Components

State Management

Utilities

​Overview

​Schedule Types

​Schedule

​ScheduleCollection

​CustomSchedules

​Period Types

​Period

​Theme Types

​Theme

​ThemeStyling

​Utility Types

​NonEmptyArray

​MapStateToComputed

​Usage in Components

Build docs developers (and LLMs) love

Overview

Schedule Types

Schedule

ScheduleCollection

CustomSchedules

Period Types

Period

Theme Types

Theme

ThemeStyling

Utility Types

NonEmptyArray

MapStateToComputed

Usage in Components