chemical_docs/pages/api/SymbolsPage.tsx

import React from 'react';
import { ContentPage } from '../../components/ContentPage';
import { ApiSection } from '../../types';

const symbolsApi: ApiSection[] = [
  {
    title: 'Chemical.Symbols',
    description: 'Chemical uses special "Symbol" objects for certain keys in the `Compose` API, particularly for event handling and child management. These ensure uniqueness and provide type information.',
    entries: [
      {
        signature: 'Chemical.OnEvent(eventName: GuiTypes.EventNames): Symbol',
        description: 'Creates a symbol representing a Roblox UI event. Used as a key in the `Compose` properties table to attach an event listener.',
        parameters: [
          { name: 'eventName', type: 'string (GuiTypes.EventNames)', description: 'The name of the Roblox GUI event (e.g., "Activated", "MouseButton1Click", "MouseEnter").' },
        ],
        returns: { type: 'Symbol', description: 'An event symbol.' },
        example: `
local Chemical = require(game.ReplicatedStorage.Chemical)
local Compose = Chemical.Compose
local OnEvent = Chemical.OnEvent
local Children = Chemical.Symbols.Children -- Alias for Children key
-- Assuming playerGui is defined

local MyScreen = Compose("ScreenGui")({
  Parent = playerGui,
  [Children] = { -- Use the aliased Children symbol
    Compose("TextButton")({
      Text = "Click",
      [OnEvent("Activated")] = function()
        print("Button Activated!")
      end
    })
  }
})
        `,
      },
      {
        signature: 'Chemical.OnChange(propertyName: GuiTypes.PropertyNames): Symbol',
        description: 'Creates a symbol representing a property change event for a Roblox Instance. Used as a key in the `Compose` properties table to listen to `GetPropertyChangedSignal`.',
        parameters: [
          { name: 'propertyName', type: 'string (GuiTypes.PropertyNames)', description: 'The name of the Instance property to observe (e.g., "Text", "Visible", "Size").' },
        ],
        returns: { type: 'Symbol', description: 'A property change symbol.' },
        example: `
local Chemical = require(game.ReplicatedStorage.Chemical)
local Value = Chemical.Value
local Compose = Chemical.Compose
local OnChange = Chemical.OnChange
local Children = Chemical.Symbols.Children -- Alias for Children key
local Effect = Chemical.Effect
-- Assuming playerGui is defined

local currentText = Value("")

local MyScreen = Compose("ScreenGui")({
  Parent = playerGui,
  [Children] = { -- Use the aliased Children symbol
    Compose("TextBox")({
      PlaceholderText = "Type here",
      [OnChange("Text")] = currentText -- Bind TextBox's Text property to currentText Value
    })
  }
})

Effect(function()
    print("TextBox content:", currentText:get())
end)
        `,
      },
      {
        signature: 'Chemical.Symbols.Children: Symbol',
        description: 'A pre-defined symbol used as a key in the `Compose` properties table to specify an array of child Instances or Compositions.',
        returns: { type: 'Symbol', description: 'The children symbol.' },
        example: `
local Chemical = require(game.ReplicatedStorage.Chemical)
local Compose = Chemical.Compose
local Children = Chemical.Symbols.Children -- Alias the symbol
-- Assuming playerGui exists

local MyScreen = Compose("ScreenGui")({
  Parent = playerGui,
  [Children] = { -- Use the aliased Children symbol
    Compose("Frame")({
      Name = "ParentFrame",
      Size = UDim2.new(0.5, 0, 0.5, 0),
      Position = UDim2.fromScale(0.25, 0.25),
      BackgroundColor3 = Color3.fromRGB(50,50,50),
      [Children] = { -- Use the aliased Children symbol
        Compose("TextLabel")({ Text = "Child 1", Size = UDim2.new(1,0,0.5,0) }),
        Compose("TextLabel")({ Text = "Child 2", Position = UDim2.fromScale(0, 0.5), Size = UDim2.new(1,0,0.5,0) })
      }
    })
  }
})
        `,
      },
      {
        signature: 'Chemical.Symbols.All(subjectType: string): Symbol',
        description: 'Creates a generic symbol typically used to represent "all instances of a certain type" or a global subject, for example, in Reactor configurations to target all players.',
        parameters: [
            { name: 'subjectType', type: 'string', description: 'A string describing the subject (e.g., "Players").' }
        ],
        returns: { type: 'Symbol', description: 'A generic "All" symbol.'},
        example: `
local Chemical = require(game.ReplicatedStorage.Chemical)
local Reactor = Chemical.Reactor
local Value = Chemical.Value
local Symbols = Chemical.Symbols -- Keep this for Symbols.All access
local AllPlayers = Symbols.All("Players")

-- Used in Reactor configuration
local GlobalReactor = Reactor({
    Name = "GlobalState",
    Subjects = AllPlayers -- Replicates to all players
}, function()
    return { message = Value("Hello All!") }
end)
        `
      }
    ],
  },
];

export const SymbolsPage: React.FC = () => {
  return <ContentPage title="Chemical Symbols" sections={symbolsApi} />;
};