mds-storybook 0.1.0

package/README.md

@@ -0,0 +1,70 @@
+# Marketing Design System (MDS)
+
+A themed React component library for marketing — dark mode by default, light mode via `data-theme="light"`.
+
+## Stack
+
+- React 18 + TypeScript
+- Sass Modules
+- Storybook 8 + Vite
+
+## Getting started
+
+```bash
+npm install
+npm run storybook     # dev server at localhost:6006
+npm run build-storybook
+```
+
+## Build outputs
+
+```bash
+npm run npm:build:lib
+npm run npm:build:storybook
+npm run npm:build:all
+```
+
+- `npm run npm:build:lib` builds the consumable package into `dist/`.
+- `npm run npm:build:storybook` builds the Storybook display site into `storybook-static/`.
+- `npm run npm:build:all` builds both outputs.
+
+The `dist/` folder is the package output intended for consumption.
+
+The `storybook-static/` folder is the Storybook presentation build.
+
+## Publish scripts
+
+```bash
+npm run npm:pack:check
+npm run npm:version:patch
+npm run npm:publish
+```
+
+- `npm:pack:check` previews the npm tarball before publishing.
+- `npm:version:patch|minor|major` bumps the package version.
+- `npm:publish` publishes the package.
+- `npm:publish:public` publishes a scoped package with public access.
+- `npm:whoami` confirms the logged-in npm account.
+
+Remove `"private": true` from `package.json` before publishing, otherwise npm will refuse to publish the package.
+
+## Package usage
+
+```tsx
+import { Button, Checkbox, Headline, Icon, SmallIcon, SSOButton, Subhead } from 'mds-storybook';
+import 'mds-storybook/style.css';
+```
+
+## Theming
+
+Tokens live in `src/styles/tokens.scss`. All colors are CSS custom properties — switch themes by toggling `html[data-theme="light"]`.
+
+## Components
+
+| Component | Variants | Description |
+|-----------|----------|-------------|
+| `Headline` | `xxl` `xl` `l` `m` `s` `xs` `xxs` `xxxs` | Montserrat Bold/SemiBold headings |
+| `Subhead` | `l` `m` `s` | Montserrat Medium subheadings |
+| `Button` | variant: `primary` `secondary` · platform: `ow` `cf` `tb` `nt` `op` · size: `l` `m` | Marketing CTA button, platform-themed |
+| `Checkbox` | size: `l` `s` · states: unchecked, checked, indeterminate, disabled | Form checkbox with optional leading/trailing label |
+| `SSOButton` | provider: `discord` `facebook` `google` `twitch` | Social sign-in button with branded icon tile |

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import type { IconName } from '../Icon';
+export type ButtonVariant = 'primary' | 'secondary';
+export type ButtonPlatform = 'ow' | 'cf' | 'tb' | 'nt' | 'op';
+export type ButtonSize = 'l' | 'm';
+export interface ButtonProps {
+    variant?: ButtonVariant;
+    platform?: ButtonPlatform;
+    size?: ButtonSize;
+    icon?: IconName;
+    iconPosition?: 'leading' | 'trailing';
+    disabled?: boolean;
+    onClick?: () => void;
+    children: ReactNode;
+    className?: string;
+}
+export declare const Button: ({ variant, platform, size, icon, iconPosition, disabled, onClick, children, className, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonPlatform, ButtonSize } from './Button';

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,11 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+export type CheckboxSize = 'l' | 's';
+export type CheckboxIndicatorPosition = 'leading' | 'trailing';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'children' | 'size' | 'type'> {
+    size?: CheckboxSize;
+    indicatorPosition?: CheckboxIndicatorPosition;
+    indeterminate?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+export declare const Checkbox: ({ size, indicatorPosition, indeterminate, children, className, disabled, id, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps, CheckboxSize, CheckboxIndicatorPosition, } from './Checkbox';

package/dist/components/Headline/Headline.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+export type HeadlineSize = "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" | "xxxs";
+type HeadingElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export interface HeadlineProps {
+    size?: HeadlineSize;
+    as?: HeadingElement;
+    children: ReactNode;
+    className?: string;
+}
+export declare const Headline: ({ size, as, children, className, }: HeadlineProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Headline/index.d.ts

@@ -0,0 +1,2 @@
+export { Headline } from './Headline';
+export type { HeadlineProps, HeadlineSize } from './Headline';

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,9 @@
+export declare const ICON_NAMES: readonly ["arrow-right", "arrow-left", "arrow-up", "arrow-down", "chevron-right", "chevron-left", "chevron-up", "chevron-down", "close", "plus", "minus", "check", "search", "download", "external-link", "play", "discord", "facebook", "google", "instagram", "linkedin", "reddit", "tiktok", "twitch", "twitter", "whatsapp", "youtube"];
+export type IconName = (typeof ICON_NAMES)[number];
+export type IconSize = 16 | 20 | 24 | 32;
+export interface IconProps {
+    name: IconName;
+    size?: IconSize;
+    className?: string;
+}
+export declare const Icon: ({ name, size, className }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/index.d.ts

@@ -0,0 +1,3 @@
+export { Icon } from './Icon';
+export { ICON_NAMES } from './Icon';
+export type { IconProps, IconName, IconSize } from './Icon';

package/dist/components/SSOButton/SSOButton.d.ts

@@ -0,0 +1,9 @@
+import type { ButtonHTMLAttributes } from 'react';
+export declare const SSO_PROVIDERS: readonly ["discord", "facebook", "google", "twitch"];
+export type SSOProvider = (typeof SSO_PROVIDERS)[number];
+export interface SSOButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    provider: SSOProvider;
+    label?: string;
+    fullWidth?: boolean;
+}
+export declare const SSOButton: ({ provider, label, fullWidth, className, type, ...props }: SSOButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SSOButton/index.d.ts

@@ -0,0 +1,2 @@
+export { SSOButton, SSO_PROVIDERS } from './SSOButton';
+export type { SSOButtonProps, SSOProvider } from './SSOButton';

package/dist/components/SmallIcon/SmallIcon.d.ts

@@ -0,0 +1,9 @@
+import type { SmallIconName } from './smallIconData';
+export type { SmallIconName };
+export interface SmallIconProps {
+    name: SmallIconName;
+    /** Rendered size in px. Default: 40 (native). */
+    size?: number;
+    className?: string;
+}
+export declare const SmallIcon: ({ name, size, className }: SmallIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SmallIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { SmallIcon } from './SmallIcon';
+export type { SmallIconProps, SmallIconName } from './SmallIcon';

package/dist/components/SmallIcon/smallIconData.d.ts

@@ -0,0 +1,5 @@
+export type SmallIconName = 'castel' | 'robot' | 'report' | 'history' | 'cancel' | 'check' | 'recipe' | 'globe' | 'monetize-in-minutes' | 'money' | 'layout' | 'swords' | 'shield' | 'cart' | 'checkout' | 'checkout-alt' | 'growth' | 'gift-card' | 'badge' | 'coupon' | 'flash' | 'basket' | 'subscriptions' | 'no-hidden-costs' | 'team' | 'management' | 'gem' | 'games' | 'gamer' | 'pixel-heart' | 'stop-hand' | 'ow-app' | 'pc' | 'internet' | 'image' | 'bike' | 'meteor' | 'planet' | 'award' | 'tools' | 'multi-platform' | 'api' | 'analytics' | 'dev-console' | 'men' | 'dollar' | 'anchor' | 'explore' | 'key' | 'joystick' | 'user' | 'crown' | 'badge-check' | 'overlay' | 'lock' | 'flag' | 'search' | 'bell' | 'rocket' | 'code' | 'filter' | 'star' | 'token' | 'video' | 'lightbulb' | 'discord' | 'stop-hand-2' | 'games-2' | 'academy' | 'support' | 'knowledgebase' | 'chat' | 'update' | 'changes' | 'profit' | 'star-2' | 'upload' | 'download' | 'flame' | 'window' | 'apple' | 'linux' | 'mobile' | 'store' | 'store-2' | 'control-panel' | 'currency-exchange' | 'multi-currency-2' | 'multi-currency-3' | 'eye' | 'ai' | 'percent' | 'ad' | 'cursor' | 'medkit' | 'rate-us' | 'premium-diamond' | 'megaphone' | 'megaphone-2' | 'chest' | 'money-bag' | 'movie' | 'ticket' | 'map' | 'fps' | 'sports' | 'racing' | 'moba' | 'battle-royale' | 'rpg' | 'rts' | 'simulator' | 'tools-hogwarts' | 'community-hogwarts' | 'smiley-bad' | 'smiley-poor' | 'average' | 'good' | 'excellent' | 'timezone' | 'place' | 'keyboard' | 'mouse' | 'headset' | 'globe-2' | 'chargebacks' | 'display' | 'native' | 'ctv' | 'olv' | 'tv' | 'mic' | 'tag' | 'discount' | 'wallet' | 'legal' | 'scale' | 'credit-card' | 'pie-chart' | 'cashier' | 'growth-2' | 'money-file' | 'money-record' | 'analysis' | 'tracking' | 'map-pin' | 'capa' | 'golden-logo';
+export declare const smallIconData: Record<SmallIconName, {
+    inner: string;
+    viewBox: string;
+}>;

package/dist/components/Subhead/Subhead.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+export type SubheadSize = 'l' | 'm' | 's';
+type HeadingElement = 'h3' | 'h4' | 'h5' | 'h6';
+export interface SubheadProps {
+    size?: SubheadSize;
+    as?: HeadingElement;
+    children: ReactNode;
+    className?: string;
+}
+export declare const Subhead: ({ size, as, children, className }: SubheadProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Subhead/index.d.ts

@@ -0,0 +1,2 @@
+export { Subhead } from './Subhead';
+export type { SubheadProps, SubheadSize } from './Subhead';

package/dist/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from './Button';
+export * from './Checkbox';
+export * from './Headline';
+export * from './Icon';
+export * from './SmallIcon';
+export * from './SSOButton';
+export * from './Subhead';