feat: add the ability to center the text in paragraphs

Author: aradzie

packages/keybr-multiplayer-ui/lib/Connector.tsx

@@ -1,5 +1,5 @@
 import { ClientCodec } from "@keybr/multiplayer-shared";
-import { Article, Para, styleTextCenter } from "@keybr/widget";
+import { Article, Para } from "@keybr/widget";
 import { type ReactNode, useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 import { Game } from "./Game.tsx";
@@ -39,7 +39,7 @@ function useTransport() {
 
 function Banner(): ReactNode {
   return (
-    <Para className={styleTextCenter}>
+    <Para align="center">
       <FormattedMessage
         id="multiplayer.intro.description"
         defaultMessage="Compete against other players in this online multiplayer game. The faster you type, the faster your car goes. Type as fast as you can to win the race!"

packages/keybr-widget/lib/components/text/Para.tsx

@@ -1,12 +1,17 @@
 import { clsx } from "clsx";
 import { type ReactNode } from "react";
+import { alignClassName } from "../../styles/index.ts";
 import * as styles from "./Para.module.less";
 import { type ParaProps } from "./Para.types.ts";
 
 export function Para(props: ParaProps): ReactNode {
-  const { as: Component = "p", id, title, className, children } = props;
+  const { as: Component = "p", id, title, className, children, align } = props;
   return (
-    <Component id={id} className={clsx(styles.root, className)} title={title}>
+    <Component
+      id={id}
+      className={clsx(styles.root, alignClassName(align), className)}
+      title={title}
+    >
       {children}
     </Component>
   );

packages/keybr-widget/lib/components/text/Para.types.ts

@@ -1,4 +1,5 @@
 import { type ElementType, type HTMLAttributes, type ReactNode } from "react";
+import { type AlignName } from "../../styles/index.ts";
 import { type ClassName } from "../types.ts";
 
 export type ParaProps = {
@@ -7,4 +8,5 @@ export type ParaProps = {
   readonly id?: string;
   readonly title?: string;
   readonly children?: ReactNode;
+  readonly align?: AlignName;
 };

packages/keybr-widget/lib/styles/size.ts

@@ -23,8 +23,8 @@ export type SizeName =
   | 24
   | 32;
 
-export const sizeClassName = (size?: SizeName | null): ClassName => {
-  switch (size) {
+export const sizeClassName = (value?: SizeName | null): ClassName => {
+  switch (value) {
     case "fill":
       return styleSizeFill;
     case "fillAlt":

packages/keybr-widget/lib/styles/text.ts

@@ -1,7 +1,22 @@
+import { type ClassName } from "../components/index.ts";
 import * as styles from "./text.module.less";
 
 export const styleTextCenter = styles.textCenter;
 export const styleTextStart = styles.textStart;
 export const styleTextEnd = styles.textEnd;
 export const styleTextNoWrap = styles.textNoWrap;
 export const styleTextTruncate = styles.textTruncate;
+
+export type AlignName = "start" | "center" | "end";
+
+export const alignClassName = (value?: AlignName | null): ClassName => {
+  switch (value) {
+    case "start":
+      return styleTextStart;
+    case "center":
+      return styleTextCenter;
+    case "end":
+      return styleTextEnd;
+  }
+  return null;
+};

packages/page-practice/lib/practice/LearningRateDescription.tsx

@@ -1,6 +1,6 @@
 import { useIntlNumbers } from "@keybr/intl";
 import { type LearningRate, type LessonKey } from "@keybr/lesson";
-import { Name, Para, styleTextCenter, Value } from "@keybr/widget";
+import { Name, Para, Value } from "@keybr/widget";
 import { type ReactNode } from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -14,7 +14,7 @@ export function LearningRateDescription({
   const { formatNumber, formatPercents } = useIntlNumbers();
   if ((lessonKey.bestConfidence ?? 0) >= 1) {
     return (
-      <Para className={styleTextCenter}>
+      <Para align="center">
         <Name>
           <FormattedMessage
             id="learningRate.alreadyUnlocked"
@@ -30,7 +30,7 @@ export function LearningRateDescription({
     learningRate.certainty > 0
   ) {
     return (
-      <Para className={styleTextCenter}>
+      <Para align="center">
         <Name>
           <FormattedMessage
             id="learningRate.remainingLessons"
@@ -52,7 +52,7 @@ export function LearningRateDescription({
     );
   }
   return (
-    <Para className={styleTextCenter}>
+    <Para align="center">
       <Name>
         <FormattedMessage
           id="learningRate.unknown"

packages/page-profile/lib/profile/AccuracyHistogramSection.tsx

@@ -7,7 +7,6 @@ import {
   Figure,
   Para,
   RadioBox,
-  styleTextCenter,
   Value,
 } from "@keybr/widget";
 import React, { type ReactNode, useMemo, useState } from "react";
@@ -49,7 +48,7 @@ export function AccuracyHistogramSection({
         </Figure.Description>
       </Explainer>
 
-      <Para className={styleTextCenter}>
+      <Para align="center">
         {period === "average" ? (
           <FormattedMessage
             id="profile.chart.compareAverageAccuracy.description"

packages/page-profile/lib/profile/AccuracyStreaksSection.tsx

@@ -5,13 +5,7 @@ import {
   MutableStreakList,
   type Streak,
 } from "@keybr/result";
-import {
-  Explainer,
-  Figure,
-  NameValue,
-  Para,
-  styleTextCenter,
-} from "@keybr/widget";
+import { Explainer, Figure, NameValue, Para } from "@keybr/widget";
 import { type ReactNode } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { type ResultSummary } from "./resultsummary.ts";
@@ -39,7 +33,7 @@ export function AccuracyStreaksSection({
           ))}
         </dl>
       ) : (
-        <Para className={styleTextCenter}>
+        <Para align="center">
           <FormattedMessage
             id="profile.accuracy.noData"
             defaultMessage="You don’t have any accuracy streaks. Consider completing a lesson with a highest accuracy possible, regardless of typing speed."

packages/page-profile/lib/profile/KeySpeedChartSection.tsx

@@ -4,7 +4,7 @@ import { KeyDetails, KeySelector } from "@keybr/lesson-ui";
 import { hasData } from "@keybr/math";
 import { type KeyStatsMap } from "@keybr/result";
 import { useSettings } from "@keybr/settings";
-import { Explainer, Figure, Para, styleTextCenter } from "@keybr/widget";
+import { Explainer, Figure, Para } from "@keybr/widget";
 import { type ReactNode, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { ChartWrapper } from "./ChartWrapper.tsx";
@@ -47,7 +47,7 @@ export function KeySpeedChartSection({
         </Figure.Description>
       </Explainer>
 
-      <Para className={styleTextCenter}>
+      <Para align="center">
         <KeySelector
           keyStatsMap={keyStatsMap}
           current={current}
@@ -57,7 +57,7 @@ export function KeySpeedChartSection({
         />
       </Para>
 
-      <Para className={styleTextCenter}>
+      <Para align="center">
         <KeyDetails lessonKey={LessonKey.from(keyStats, target)} />
       </Para>
 

packages/page-profile/lib/profile/SpeedHistogramSection.tsx

@@ -7,7 +7,6 @@ import {
   Figure,
   Para,
   RadioBox,
-  styleTextCenter,
   Value,
 } from "@keybr/widget";
 import React, { type ReactNode, useMemo, useState } from "react";
@@ -49,7 +48,7 @@ export function SpeedHistogramSection({
         </Figure.Description>
       </Explainer>
 
-      <Para className={styleTextCenter}>
+      <Para align="center">
         {period === "average" ? (
           <FormattedMessage
             id="profile.chart.compareAverageSpeed.description"

packages/page-typing-test/lib/components/Report.tsx

@@ -18,7 +18,6 @@ import {
   NameValue,
   Para,
   Spacer,
-  styleTextCenter,
   useHotkeys,
   Value,
 } from "@keybr/widget";
@@ -64,7 +63,7 @@ export const Report = memo(function Report({
         />
       </Box>
 
-      <Para className={styleTextCenter}>
+      <Para align="center">
         <NameValue name="Characters" value={formatNumber(length)} />
         <NameValue name="Errors" value={formatNumber(errors)} />
         <NameValue
@@ -82,7 +81,7 @@ export const Report = memo(function Report({
         />
       </Box>
 
-      <Para className={styleTextCenter}>
+      <Para align="center">
         <Name>
           Faster than <Value value={formatPercents(pSpeed)} /> of all other
           people.
@@ -101,7 +100,7 @@ export const Report = memo(function Report({
         />
       </Box>
 
-      <Para className={styleTextCenter}>
+      <Para align="center">
         <Name>
           More accurate than <Value value={formatPercents(pAccuracy)} /> of all
           other people.
@@ -128,7 +127,7 @@ export const Report = memo(function Report({
         <Field.Filler />
       </FieldList>
 
-      <Para className={styleTextCenter}>
+      <Para align="center">
         Press <Kbd>Enter</Kbd> to start a new test.
       </Para>
     </Screen>