@mediquo/medicore 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +11 -66
  2. package/package.json +1 -5
package/README.md CHANGED
@@ -1,89 +1,34 @@
1
- # MediCore Design System
1
+ # @mediquo/medicore
2
2
 
3
- Design system de las plataformas web de mediQuo — React 19 + TypeScript + Tailwind CSS v4 + [Base UI](https://base-ui.com), portado desde la librería de Figma **MediCore** (`https://www.figma.com/design/HQxFV7lE8QkJgpJZpuPEOy/MediCore`).
3
+ MediCore, el design system de las plataformas web de mediQuo: componentes React 19 + TypeScript sobre Tailwind CSS v4 y [Base UI](https://base-ui.com).
4
4
 
5
- Se publica en npm como **`@mediquo/medicore`** (paquete público, igual que `@mediquo/elements`; el repo es privado). Lo consumen `mediquo-web-clinics` y el admin de clínicas.
6
-
7
- ## Usarlo en una app
5
+ ## Instalación
8
6
 
9
7
  ```sh
10
8
  pnpm add @mediquo/medicore
11
9
  ```
12
10
 
13
- La app tiene que usar **Tailwind CSS v4**. MediCore no trae CSS precompilado: publica sus tokens como `@theme` y le dice al Tailwind de la app que escanee sus componentes, así todo sale en una sola pasada y sin duplicados.
11
+ Necesita `react` y `react-dom` 19 y **Tailwind CSS v4** en la app. El paquete no trae CSS precompilado: publica sus tokens como `@theme` y le indica a Tailwind que escanee sus componentes.
14
12
 
15
13
  ```css
16
- /* src/styles/index.css de la app */
17
14
  @import "tailwindcss";
18
15
  @import "@mediquo/medicore/theme.css";
19
16
  ```
20
17
 
18
+ ## Uso
19
+
21
20
  ```tsx
22
21
  import { Button, MediCoreProvider } from "@mediquo/medicore";
23
22
  import { CalendarIcon } from "@mediquo/medicore/icons";
24
23
 
25
- <MediCoreProvider labels={{ close: t`Cerrar`, loading: t`Cargando` }}>
24
+ <MediCoreProvider labels={{ close: "Cerrar", loading: "Cargando" }}>
26
25
  <Button leadingIcon={<CalendarIcon />}>Pedir cita</Button>
27
26
  </MediCoreProvider>;
28
27
  ```
29
28
 
30
- - **Textos**: los componentes no llevan copy fijo. Los textos propios (nombres accesibles, "Paso 1 de 2"…) salen de `MediCoreProvider`, que la app traduce una vez (con Lingui en clinics). Sin provider, van en español.
31
- - **Fuente**: los tokens piden `Scoop`, pero el paquete **no incluye la fuente** (tiene licencia). Cada app sirve sus `@font-face` (clinics ya lo hace desde `/fonts/scoop/`).
29
+ - **Textos**: el copy de cada pantalla va por props. Los textos propios de los componentes (nombres accesibles, "Paso 1 de 2"…) se traducen una vez en `MediCoreProvider`. Sin provider, van en español.
30
+ - **Fuente**: los tokens usan `Scoop`, que no va incluida en el paquete. Cada app sirve sus propios `@font-face`.
32
31
  - **Modo oscuro**: sigue `prefers-color-scheme`. Para forzarlo, `data-theme="light"` o `data-theme="dark"` en `<html>`.
33
- - **Marca por clínica**: los componentes usan solo tokens semánticos, así que el color de cada organización se aplica sobrescribiendo `--color-brand`, `--color-brand-strong`, `--color-brand-subtle`, `--color-text-brand` y `--color-border-focus` en `:root`.
34
-
35
- ## Tokens
36
-
37
- Todo está confirmado 1:1 contra las variables y estilos de Figma:
38
-
39
- | Archivo | Qué hay |
40
- |---|---|
41
- | `src/styles/primitives.css` | Paleta primitiva (`--palette-*`). No se usa en componentes |
42
- | `src/styles/tokens.css` | Tokens semánticos (`@theme`): color con modo oscuro, radios, sombras (Elevation), tamaños de icono/avatar/control, tipografía |
43
- | `src/styles/typography.css` | Los 14 estilos de texto como utilidades (`text-heading-h2`, `text-body-small`…) |
44
- | `src/styles/utilities.css` | `focus-ring`, `focus-ring-within` y `touch-target` (área pulsable de 44px) |
45
-
46
- El **espaciado** usa la escala por defecto de Tailwind (1 = 4px), que ya cubre todos los `space-*` de Figma: `space-16` → `p-4`. Ver la tabla en [CONTRIBUTING.md](CONTRIBUTING.md).
47
-
48
- ## Componentes
49
-
50
- | Grupo | Componentes |
51
- |---|---|
52
- | Forms | Button, IconButton, Link, Input, Textarea, Select / NativeSelect, Field, Checkbox / CheckboxField / CheckboxGroup, Radio / RadioGroup / RadioField, Switch / SwitchField, SelectionCard, PhoneInput, OTPInput, Rating, SeverityScale |
53
- | Overlays | Modal (centrado en escritorio, hoja inferior en móvil) / ConfirmModal, Toast (`ToastProvider` + `useToast`), Banner, Tooltip, Menu, AnnouncementDialog / AnnouncementIllustration |
54
- | Navigation | AppShell, Sidebar, NavItem, BottomBar, MobileHeader, PageHeader, Breadcrumb, Tabs, SegmentedControl, StepIndicator |
55
- | Content | Card / CardCallout / CardList, ListRow, Table (ordenable, responsive) |
56
- | Agenda y citas | TimeSlot / TimeSlotGroup, DayCell / DayCellGroup, AvailabilityRow, AvailabilityColumn, CardAppointment, CardProfessional |
57
- | Chat | ChatMessageList, ChatBubble, ChatDeliveryStatus, ChatAttachment, ChatDateSeparator, ChatTypingIndicator, ChatComposer, ChatRoomHeader, ChatConversationRow, ChatLauncher |
58
- | Videollamada | VideoStage, VideoTile, VideoLabel, VideoControlButton |
59
- | Historial | HealthRecordSection, HealthRecordHeader, HealthRecordRow, SeverityIndicator |
60
- | Acceso | SocialButton, BrandMark (Google, Apple), AuthPanel |
61
- | Home y programas | HeroGreeting, DateBadge, AppointmentRow, CardProgram, CardArticle, CardServiceOption, CardProfessionalMini, CardTestimonial, IncludedItem, AdvisorContact, StatTile, StoreBadge, PromoApp |
62
- | Layout | Divider, Spinner, Badge, Chip / ChipGroup, IconContainer, SectionHeader, Footer |
63
- | Media | Avatar (+ estado), Logo |
64
- | States | Skeleton, EmptyState |
65
- | Iconos | 178 iconos en `@mediquo/medicore/icons` (`pnpm icons` los regenera desde `scripts/icons/figma-icons.json`) |
66
-
67
- Cubre todas las páginas `Components / *` del Figma. Las páginas `Patterns / *` (Chat, Pedir cita, Historial médico, Videollamada, Acceso, Inicio, Programas) están en Storybook como stories de pantallas completas (`src/patterns/`), montadas con estos componentes.
68
-
69
- `StoreBadge` no incluye el arte oficial de App Store / Google Play (en Figma es un marcador): la app le pasa la imagen oficial por `src`.
70
-
71
- ## Desarrollo
72
-
73
- ```sh
74
- pnpm install
75
- pnpm dev # Storybook en http://localhost:6006
76
- pnpm tc # tipos
77
- pnpm format-and-lint # biome (mismas reglas que clinics)
78
- pnpm test # cada story se renderiza en Chromium y pasa axe (a11y)
79
- pnpm build # librería en dist/
80
- ```
81
-
82
- Cómo se construye un componente: [CONTRIBUTING.md](CONTRIBUTING.md).
83
-
84
- ## Publicar una versión
85
-
86
- 1. Sube la versión en `package.json` en un PR y mérgealo en `main`.
87
- 2. Lanza a mano el workflow **Publish** desde GitHub Actions (necesita el secret `NPM_TOKEN` con permiso de publicación en la org `mediquo` de npm).
32
+ - **Marca propia**: sobrescribe `--color-brand`, `--color-brand-strong`, `--color-brand-subtle`, `--color-text-brand` y `--color-border-focus` en `:root`.
88
33
 
89
- Es manual a propósito: publicar en npm es público y no se puede deshacer.
34
+ Incluye componentes de formularios, overlays, navegación, contenido, agenda y citas, chat, videollamada, historial médico, acceso y home, además de 178 iconos en `@mediquo/medicore/icons`.
package/package.json CHANGED
@@ -1,13 +1,9 @@
1
1
  {
2
2
  "name": "@mediquo/medicore",
3
3
  "description": "MediCore — design system de las plataformas web de mediQuo",
4
- "version": "0.1.0",
4
+ "version": "0.1.1",
5
5
  "type": "module",
6
6
  "license": "UNLICENSED",
7
- "repository": {
8
- "type": "git",
9
- "url": "git+https://github.com/mediquo/medicore-design-system.git"
10
- },
11
7
  "sideEffects": [
12
8
  "**/*.css"
13
9
  ],