@sonic-equipment/ui 0.0.9 → 0.0.11

package/README.md

@@ -0,0 +1,191 @@
+# @sonic-equipment/ui
+
+`@sonic-equipment/ui` is a private, React component library designed with modularity and reusability in mind.
+
+## Features
+
+- 🔄 **Universally Compatible**: Our components seamlessly integrate across any meta framework, including Next.js, Remix, or Vite React with React Router, ensuring effortless adaptability.
+- 🎨 **Styled with PostCSS:** Leveraging PostCSS modules for scoped and manageable styles and compatibility with React Server Components.
+- 📚 **Documented with Storybook:** Components are documented and showcased using Storybook, with stories co-located alongside components for easy reference.
+- 📦 **Bundled with Rollup:** Efficiently compiled for production with Rollup and published as a private NPM package.
+
+## Getting Started
+
+### Prerequisites
+
+Ensure you have React 18 or newer in your project to use `@sonic-equipment/ui`.
+
+### Installation
+
+Since `@sonic-equipment/ui` is a private package, ensure you have access to the private npm registry configured in your project. Then, install the library using npm:
+
+```sh
+npm install @sonic-equipment/ui
+```
+
+#### Import styles
+
+```css
+@import "@sonic-equipment/ui/reset.css";
+@import "@sonic-equipment/ui/fonts.css";
+@import "@sonic-equipment/ui/styles.css";
+```
+
+Or within your App.tsx
+
+```tsx
+import "@sonic-equipment/ui/reset.css";
+import "@sonic-equipment/ui/fonts.css";
+import "@sonic-equipment/ui/styles.css";
+```
+
+#### Apply base styles
+
+```css
+html {
+  font-family: var(--font-family-sonic);
+  font-size: var(--font-size-base);
+  text-size-adjust: none;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+```
+
+### Usage
+
+Import and use a component from the library like so:
+
+```jsx
+import { Button } from "@sonic-equipment/ui";
+
+const App = () => (
+  <Button variant="solid" color="primary">
+    Click Me
+  </Button>
+);
+```
+
+## Styling
+
+This library uses PostCSS with modules CSS, allowing you to import styles directly into your React components for scoped styling. The PostCSS configuration includes the following plugins:
+
+- **`postcss-import`**: Allows you to use the `@import` statement inside your CSS files, enabling you to split your CSS into smaller, more maintainable pieces. This plugin processes each import, inlining content directly into the CSS file, making it easier to organize and share styles across different files.
+
+- **`postcss-nested`**: Enables you to write your CSS in a nested manner, similar to what you might be used to in preprocessors like SCSS or Less. This makes managing complex CSS structures simpler by keeping related rules nested within one another.
+
+- **`postcss-custom-media`**: Provides the ability to define custom media query aliases inside your CSS, allowing for more readable and maintainable responsive design. By defining a custom name for media queries, you can reuse them throughout your stylesheets without repeating the conditions.
+
+- **`autoprefixer`**: Automatically adds vendor prefixes to CSS rules using values from Can I Use. It ensures your CSS will work with as many browsers as possible by adding necessary prefixes for you, saving time and helping avoid potential errors in manual prefixing.
+
+## Design Tokens
+
+Design tokens in `@sonic-equipment/ui` serve as the foundational building blocks of our component library's visual design. They encapsulate and centralize the core stylistic attributes such as typography, colors, spacing, and borders, ensuring consistency across the library. Our tokens are organized and imported through `index.css`.
+
+### Example: Color Tokens
+
+Our color tokens, defined in `colors.css`, offer a wide palette ranging from grayscale to brand-specific hues. These tokens are used to maintain visual harmony and can be applied throughout your project for consistency and easy themeability.
+
+```css
+:root {
+  /* Global color tokens */
+  --color-white: #ffffff;
+  --color-black: #000000;
+  ...
+
+  /* Brand-specific aliases */
+  --color-brand-red: var(--color-red-700);
+  --color-brand-dark-red: var(--color-red-800);
+  ...
+}
+```
+
+### Utilizing Tokens in Components
+
+Design tokens are applied directly in our component styles, ensuring consistent look and feel. Here's how a token is used in the styling of our `Button` component:
+
+```css
+.solid {
+  &:where(.primary) {
+    background-color: var(--color-brand-red);
+    color: var(--color-white);
+
+    &:where([data-hovered]),
+    &:where([data-pressed]) {
+      background-color: var(--color-brand-dark-red);
+    }
+  }
+}
+```
+
+### Customizing Tokens
+
+To customize these tokens for your project, override the default values in a global CSS file after importing the library's styles. This allows you to tailor the appearance of `@sonic-equipment/ui` components to fit your brand's identity:
+
+```css
+:root {
+  --color-brand-red: #ff0000; /* Your brand red */
+  --color-brand-dark-red: #cc0000; /* A darker shade of your brand red */
+}
+```
+
+This approach ensures that any component from the `@sonic-equipment/ui` library not only adheres to your design system but is also flexible enough to accommodate brand-specific styling.
+
+## Getting Started with Development
+
+This section provides a step-by-step guide to setting up your development environment for `@sonic-equipment/ui`. Whether you're looking to contribute or simply want to run the library locally for development, follow the instructions below.
+
+### Prerequisites
+
+Before you begin, ensure you have the following installed on your system:
+
+- [Node.js](https://nodejs.org/) (version 14 or newer)
+- [pnpm](https://pnpm.io/) (as this project uses pnpm for dependency management)
+
+### Installation
+
+Run the following command in the root directory of the project to install the necessary dependencies:
+
+```bash
+pnpm install
+```
+
+### Running Storybook
+
+To view and interact with the components in a development environment, this project utilizes Storybook. Run Storybook locally with the following command:
+
+```bash
+pnpm dev
+```
+
+This will start the Storybook server, typically available at `http://localhost:6006`. You can browse through the component stories and work on components in real-time.
+
+### Building the Library
+
+The library uses Rollup for bundling, optimized for ESM format. When you're ready to build the library for production:
+
+```bash
+pnpm build
+```
+
+This command triggers the Rollup build process as configured in the project, compiling your components into the `dist` directory.
+
+### Linting
+
+To ensure your code follows the project's coding standards and guidelines, run the linter with:
+
+```bash
+pnpm lint
+```
+
+This will check your code for any stylistic or programming errors and help maintain code quality.
+
+## Publishing
+
+Publishing is handled via a private npm registry. Ensure you have the necessary permissions and authentication configured before attempting to publish. When ready, run:
+
+```bash
+pnpm publish
+```

package/dist/{dts → buttons}/button/button.d.ts

@@ -4,9 +4,6 @@ export type ButtonProps = ComponentPropsWithoutRef<typeof AriaButton> & {
     variant?: "solid" | "outline" | "ghost";
     size?: "md" | "lg";
     color?: "primary" | "secondary" | "tertiary" | "quaternary";
+    withArrow?: boolean;
 };
 export declare function Button({ children, variant, size, color, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Button {
-    var displayName: string;
-}
-//# sourceMappingURL=button.d.ts.map

package/dist/buttons/button/button.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from "@storybook/react";
+import { Button } from "./button";
+declare const meta: {
+    title: string;
+    component: typeof Button;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        onPress: import("@storybook/test").Mock<[e: import("react-aria-components").PressEvent], void>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Solid: Story;
+export declare const Outlined: Story;
+export declare const Ghost: Story;

package/dist/buttons/favorite/favorite-button.d.ts

@@ -0,0 +1,5 @@
+export type FavoriteButtonProps = {
+    isFavorite: boolean;
+    onPress: () => void;
+};
+export declare function FavoriteButton({ isFavorite, onPress }: FavoriteButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/favorite/favorite-button.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from "@storybook/react";
+import { FavoriteButton } from "./favorite-button";
+declare const meta: {
+    title: string;
+    component: typeof FavoriteButton;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        onPress: import("@storybook/test").Mock<[], void>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const InFavorites: Story;
+export declare const NotInFavorites: Story;

package/dist/buttons/icon-button/icon-button.d.ts

@@ -0,0 +1,7 @@
+import { ComponentPropsWithoutRef } from "react";
+import { Button as AriaButton } from "react-aria-components";
+export type IconButtonProps = ComponentPropsWithoutRef<typeof AriaButton> & {
+    size?: "md" | "lg";
+    color?: "primary" | "secondary";
+};
+export declare function IconButton({ size, color, className, ...props }: IconButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/icon-button/icon-button.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from "@storybook/react";
+import { IconButton } from "./icon-button";
+declare const meta: {
+    title: string;
+    component: typeof IconButton;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    args: {
+        onPress: import("@storybook/test").Mock<[e: import("react-aria-components").PressEvent], void>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;

package/dist/cards/product-card/product-card.d.ts

@@ -0,0 +1,9 @@
+import { ComponentType } from "react";
+export type ProductCardProps = {
+    product: {
+        id: string;
+        title: string;
+    };
+    favoriteButton: ComponentType<any>;
+};
+export declare function ProductCard({ product, favoriteButton: FavoriteButton, }: ProductCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/cards/product-card/product-card.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from "@storybook/react";
+import { ProductCard } from "./product-card";
+declare const meta: {
+    title: string;
+    component: typeof ProductCard;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/{base.css → fonts.css}

@@ -1,36 +1,9 @@
-:root {   
-  --font-family-sonic: 'Pancetta', sans-serif;  
-
-  --font-size-20: 0.75rem; /* 12px */
-  --font-size-24: 0.875rem; /* 14px */
-  --font-size-28: 1rem; /* 16px */
-  --font-size-32: 1.125rem; /* 18px */
-  --font-size-36: 1.25rem; /* 20px */
-  --font-size-40: 1.5rem; /* 24px */
-  --font-size-48: 1.875rem;/* 30px */ 
-  --font-size-56: 2.25rem; /* 36px */
-  --font-size-64: 3rem; /* 48px */
-  --font-size-72: 3.75rem; /* 60px */
-  --font-size-80: 4.5rem; /* 72px */
-  --font-size-96: 6rem; /* 96px */
-  --font-size-112: 8rem; /* 128px */
-  --font-size-base: var(--font-size-28);
-
-  --font-weight-thin: 100;
-  --font-weight-extralight: 200;
-  --font-weight-light: 300;
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --font-weight-extrabold: 800;
-  --font-weight-black: 900;
-}
 /*********************************************************
  *
  *  Pancetta
  *
 *********************************************************/
+
 @font-face {
   font-display: swap;
   font-family: "Pancetta";
@@ -39,6 +12,7 @@
   font-weight: 100;
   font-style: normal;
 }
+
 @font-face {
   font-display: swap;
   font-family: "Pancetta";
@@ -47,6 +21,7 @@
   font-weight: 100;
   font-style: italic;
 }
+
 @font-face {
   font-display: swap;
   font-family: "Pancetta";
@@ -55,6 +30,7 @@
   font-weight: 200;
   font-style: normal;
 }
+
 @font-face {
   font-display: swap;
   font-family: "Pancetta";
@@ -63,6 +39,8 @@
   font-weight: 200;
   font-style: italic;
 }
+
+
 @font-face {
   font-display: swap;
   font-family: "Pancetta";
@@ -71,6 +49,7 @@
   font-weight: 300;
   font-style: normal;
 }
+
 @font-face {
   font-display: swap;
   font-family: "Pancetta";
@@ -79,6 +58,7 @@
   font-weight: 300;
   font-style: italic;
 }
+
 @font-face {
   font-display: swap;
   font-family: "Pancetta";
@@ -87,6 +67,7 @@
   font-weight: 400;
   font-style: normal;
 }
+
 @font-face {
   font-display: swap;
   font-family: "Pancetta";
@@ -95,6 +76,7 @@
   font-weight: 400;
   font-style: italic;
 }
+
 @font-face {
   font-display: swap;
   font-family: "Pancetta";
@@ -103,6 +85,7 @@
   font-weight: 500;
   font-style: normal;
 }
+
 @font-face {
   font-display: swap;
   font-family: "Pancetta";
@@ -111,6 +94,7 @@
   font-weight: 500;
   font-style: italic;
 }
+
 @font-face {
   font-display: swap;
   font-family: "Pancetta";
@@ -119,6 +103,7 @@
   font-weight: 600;
   font-style: normal;
 }
+
 @font-face {
   font-display: swap;
   font-family: "Pancetta";
@@ -127,6 +112,7 @@
   font-weight: 600;
   font-style: italic;
 }
+
 @font-face {
   font-display: swap;
   font-family: "Pancetta";
@@ -135,6 +121,7 @@
   font-weight: 700;
   font-style: normal;
 }
+
 @font-face {
   font-display: swap;
   font-family: "Pancetta";
@@ -143,6 +130,7 @@
   font-weight: 700;
   font-style: italic;
 }
+
 @font-face {
   font-display: swap;
   font-family: "Pancetta";
@@ -151,6 +139,7 @@
   font-weight: 900;
   font-style: normal;
 }
+
 @font-face {
   font-display: swap;
   font-family: "Pancetta";
@@ -159,82 +148,3 @@
   font-weight: 900;
   font-style: italic;
 }
-:root {
-  --breakpoint-sm: 640px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 1024px;
-  --breakpoint-xl: 1280px;
-  --breakpoint-xxl: 1536px;
-}
-:root {
-  --space-2: 2px;
-  --space-4: 4px;
-  --space-6: 6px;
-  --space-8: 8px;
-  --space-12: 12px;
-  --space-16: 16px;
-  --space-20: 20px;
-  --space-26: 24px;
-  --space-28: 28px;
-  --space-32: 32px;
-  --space-36: 36px;
-  --space-40: 40px;
-  --space-48: 48px;
-  --space-64: 64px;
-  --space-80: 80px;
-  --space-96: 96px;
-  --space-112: 112px;
-  --space-128: 128px;
-  --space-160: 160px;
-  --space-192: 192px;
-  --space-224: 224px;
-}
-:root {
-  --white: #ffffff;
-  --red-50: #fff0f1;
-  --red-100: #ffdee0;
-  --red-200: #ffc3c7;
-  --red-300: #ff999f;
-  --red-400: #ff5e67;
-  --red-500: #ff2b37;
-  --red-600: #f60c1a;
-  --red-700: #e30613;
-  --red-800: #ab0913;
-  --red-900: #8d0f16;
-  --red-950: #4d0206;
-
-  --gray-100: #ededed;
-  --gray-500: #bcbcbc;
-  --gray-900: #6f6f6f;
-
-  --black: #000000;
-
-  --brand-color-black: var(--black);
-
-  --brand-color-red: var(--red-700);
-  --brand-color-dark-red: var(--red-800);
-
-  --brand-color-light-gray: var(--gray-100);
-  --brand-color-medium-gray: var(--gray-500);
-  --brand-color-dark-gray: var(--gray-900);
-
-  --focus-ring-color: var(--brand-color-red);
-}
-:root {
-  --border-radius-0: 0px;
-  --border-radius-1: 2px;
-  --border-radius-2: 4px;
-  --border-radius-3: 6px;
-  --border-radius-4: 8px;
-  --border-radius-5: 12px;
-  --border-radius-6: 16px;
-  --border-radius-7: 20px;
-  --border-radius-8: 22px;
-  --border-radius-9: 30px;
-  --border-radius-full: 9999px;
-
-  --border-width-0: 0px;
-  --border-width-1: 1px;
-  --border-width-2: 2px;
-  --border-width-3: 4px;
-}

package/dist/icons/favorite/favorite-filled-icon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function FavoriteFilledIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/icons/favorite/favorite-outline-icon.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function FavoriteOutlinedIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -0,0 +1,96 @@
+/// <reference types="react" />
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Button as Button$1, Checkbox as Checkbox$1 } from 'react-aria-components';
+import { ComponentPropsWithoutRef, ComponentType } from 'react';
+
+type ButtonProps = ComponentPropsWithoutRef<typeof Button$1> & {
+    variant?: "solid" | "outline" | "ghost";
+    size?: "md" | "lg";
+    color?: "primary" | "secondary" | "tertiary" | "quaternary";
+    withArrow?: boolean;
+};
+declare function Button({ children, variant, size, color, className, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+declare function FavoriteFilledIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+declare function FavoriteOutlinedIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
+
+type FavoriteButtonProps = {
+    isFavorite: boolean;
+    onPress: () => void;
+};
+declare function FavoriteButton({ isFavorite, onPress }: FavoriteButtonProps): react_jsx_runtime.JSX.Element;
+
+type IconButtonProps = ComponentPropsWithoutRef<typeof Button$1> & {
+    size?: "md" | "lg";
+    color?: "primary" | "secondary";
+};
+declare function IconButton({ size, color, className, ...props }: IconButtonProps): react_jsx_runtime.JSX.Element;
+
+type ProductCardProps = {
+    product: {
+        id: string;
+        title: string;
+    };
+    favoriteButton: ComponentType<any>;
+};
+declare function ProductCard({ product, favoriteButton: FavoriteButton, }: ProductCardProps): react_jsx_runtime.JSX.Element;
+
+type CheckboxProps = ComponentPropsWithoutRef<typeof Checkbox$1>;
+declare function Checkbox({ children, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+type Filters = {
+    color: {
+        options: {
+            value: string;
+            label: string;
+            count: number;
+        }[];
+    };
+};
+type ActiveFilters = {
+    colors: string[];
+};
+type Sort = {
+    by: string;
+    direction: string;
+};
+type ProductListingProps = {
+    productCard: ComponentType<any>;
+    products: {
+        id: string;
+        title: string;
+    }[];
+    total: number;
+    filters: Filters;
+    activeFilters: ActiveFilters;
+    sort: {
+        by: string;
+        direction: string;
+    };
+    isLoading?: boolean;
+    onFilterChange: (filters: ActiveFilters) => void;
+    onSortChange: (sort: Sort) => void;
+};
+declare function ProductListing({ productCard: ProductCard, products, filters, isLoading, activeFilters, onFilterChange, onSortChange, }: ProductListingProps): react_jsx_runtime.JSX.Element;
+
+declare function createProductListingSearchParams(state: {
+    sort: {
+        by: string;
+        direction: string;
+    };
+    filters: {
+        colors: string[];
+    };
+}): URLSearchParams;
+declare function parseProductListingSearchParams(params: URLSearchParams): {
+    filters: {
+        colors: string[];
+    };
+    sort: {
+        by: string;
+        direction: string;
+    };
+};
+
+export { type ActiveFilters, Button, type ButtonProps, Checkbox, type CheckboxProps, FavoriteButton, type FavoriteButtonProps, FavoriteFilledIcon, FavoriteOutlinedIcon, type Filters, IconButton, type IconButtonProps, ProductCard, type ProductCardProps, ProductListing, type ProductListingProps, type Sort, createProductListingSearchParams, parseProductListingSearchParams };