@commercetools/nimbus 0.0.2 → 0.0.3

package/src/components/table/table.recipe.ts

@@ -1,170 +0,0 @@
-import { defineSlotRecipe } from "@chakra-ui/react";
-
-export const tableSlotRecipe = defineSlotRecipe({
-  className: "chakra-table",
-  slots: [
-    "root",
-    "header",
-    "body",
-    "row",
-    "columnHeader",
-    "cell",
-    "footer",
-    "caption",
-  ],
-  base: {
-    root: {
-      fontVariantNumeric: "lining-nums tabular-nums",
-      borderCollapse: "collapse",
-      width: "full",
-      textAlign: "start",
-      verticalAlign: "top",
-    },
-    row: {
-      _selected: {
-        bg: "colorPalette.subtle",
-      },
-    },
-    cell: {
-      textAlign: "start",
-      alignItems: "center",
-    },
-    columnHeader: {
-      fontWeight: "medium",
-      textAlign: "start",
-      color: "fg",
-    },
-    caption: {
-      fontWeight: "medium",
-      textStyle: "xs",
-    },
-    footer: {
-      fontWeight: "medium",
-    },
-  },
-  variants: {
-    interactive: {
-      true: {
-        body: {
-          "& tr": {
-            _hover: {
-              bg: "colorPalette.subtle",
-            },
-          },
-        },
-      },
-    },
-    stickyHeader: {
-      true: {
-        header: {
-          "& :where(tr)": {
-            top: "var(--table-sticky-offset, 0)",
-            position: "sticky",
-            zIndex: 1,
-          },
-        },
-      },
-    },
-    striped: {
-      true: {
-        row: {
-          "&:nth-of-type(odd) td": {
-            bg: "bg.muted",
-          },
-        },
-      },
-    },
-    showColumnBorder: {
-      true: {
-        columnHeader: {
-          "&:not(:last-of-type)": {
-            borderInlineEndWidth: "1px",
-          },
-        },
-        cell: {
-          "&:not(:last-of-type)": {
-            borderInlineEndWidth: "1px",
-          },
-        },
-      },
-    },
-    variant: {
-      line: {
-        columnHeader: {
-          borderBottomWidth: "1px",
-        },
-        cell: {
-          borderBottomWidth: "1px",
-        },
-        row: {
-          bg: "bg",
-        },
-      },
-      outline: {
-        root: {
-          boxShadow: "0 0 0 1px {colors.border}",
-          overflow: "hidden",
-        },
-        columnHeader: {
-          borderBottomWidth: "1px",
-        },
-        header: {
-          bg: "bg.muted",
-        },
-        row: {
-          "&:not(:last-of-type)": {
-            borderBottomWidth: "1px",
-          },
-        },
-        footer: {
-          borderTopWidth: "1px",
-        },
-      },
-    },
-    size: {
-      sm: {
-        root: {
-          textStyle: "sm",
-        },
-        columnHeader: {
-          px: "200",
-          py: "200",
-        },
-        cell: {
-          px: "200",
-          py: "200",
-        },
-      },
-      md: {
-        root: {
-          textStyle: "sm",
-        },
-        columnHeader: {
-          px: "300",
-          py: "300",
-        },
-        cell: {
-          px: "300",
-          py: "300",
-        },
-      },
-      lg: {
-        root: {
-          textStyle: "md",
-        },
-        columnHeader: {
-          px: "400",
-          py: "300",
-        },
-        cell: {
-          px: "400",
-          py: "300",
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    variant: "line",
-    size: "md",
-  },
-});

package/src/components/table/table.tsx

@@ -1,43 +0,0 @@
-import { Table } from "@chakra-ui/react";
-
-// Extracting props types from subcomponents
-export type TableRootProps = React.ComponentProps<typeof Table.Root>;
-export type TableColumnGroupProps = React.ComponentProps<
-  typeof Table.ColumnGroup
->;
-export type TableColumnProps = React.ComponentProps<typeof Table.Column>;
-export type TableHeaderProps = React.ComponentProps<typeof Table.Header>;
-export type TableFooterProps = React.ComponentProps<typeof Table.Footer>;
-export type TableRowProps = React.ComponentProps<typeof Table.Row>;
-export type TableCellProps = React.ComponentProps<typeof Table.Cell>;
-export type TableBodyProps = React.ComponentProps<typeof Table.Body>;
-export type TableColumnHeaderProps = React.ComponentProps<
-  typeof Table.ColumnHeader
->;
-
-const TableRoot = (props: TableRootProps) => <Table.Root {...props} />;
-const TableColumnGroup = (props: TableColumnGroupProps) => (
-  <Table.ColumnGroup {...props} />
-);
-const TableColumn = (props: TableColumnProps) => <Table.Column {...props} />;
-const TableHeader = (props: TableHeaderProps) => <Table.Header {...props} />;
-const TableFooter = (props: TableFooterProps) => <Table.Footer {...props} />;
-const TableRow = (props: TableRowProps) => <Table.Row {...props} />;
-const TableCell = (props: TableCellProps) => <Table.Cell {...props} />;
-const TableBody = (props: TableBodyProps) => <Table.Body {...props} />;
-const TableColumnHeader = (props: TableColumnHeaderProps) => (
-  <Table.ColumnHeader {...props} />
-);
-
-export {
-  Table,
-  TableRoot,
-  TableColumnGroup,
-  TableColumn,
-  TableHeader,
-  TableFooter,
-  TableRow,
-  TableCell,
-  TableBody,
-  TableColumnHeader,
-};

package/src/components/text/index.ts

@@ -1 +0,0 @@
-export * from "./text.tsx";

package/src/components/text/text.mdx

@@ -1,244 +0,0 @@
----
-id: Text
-title: Text
-description: the Text component is used to display text
-documentState: InitialDraft
-order: 1
-menu:
-  - Components
-  - Typography
-  - Text
-tags:
-  - text
-  - typography
----
-
-# Text
-
-The `<Text>` component is a foundational element for displaying text content. It
-provides a simple and flexible way to style text with consistent design tokens
-and responsive behavior.
-
-> [!NOTE] If you need to render **large, bold text with a semantic meaning** you
-> may want to use the [`Heading`](/components/typography/heading) component
-> instead.
-
-`<Text>` is designed to:
-
-- Display inline or block-level text content.
-- apply consistent typography styles via `textStyles`
-- customize text appearance with style-props
-- support responsive styling
-
-## Basic Example
-
-Without any configuration, Text will simply render a paragraph element `<p>`
-without adding styling, solely relying on the cascade (**C**SS), inheriting
-existing styles:
-
-```jsx-live
-import { Text } from "@commercetools/nimbus";
-
-const App = () => <Text>I am a plain old paragraph.</Text>;
-```
-
-## Changing the HTML tag (semantics)
-
-If you need to render a different HTML element than a `<p>` tag, you can use the
-`as` prop to change the html-tag that used to render the text to the DOM:
-
-```jsx-live
-import { Text } from "@commercetools/nimbus";
-
-const App = () => (
-  <>
-    <Text as="div">We look the same, but</Text>
-    <Text as="span">we use different semantics.</Text>
-  </>
-);
-```
-
-_Alternatively_, if you need Text to render as another element which may even
-need it's own configuration, you can use the `asChild` prop to keep the props
-separated:
-
-```jsx-live
-import { Text } from "@commercetools/nimbus";
-
-const App = () => (
-  <Text textStyle="2xl" asChild>
-    <button onClick={()=>alert('Click!')}>
-      Amazing. A native html-button.
-    </button>
-  </Text>
-);
-```
-
-## Predefined Text-Styles
-
-Apply predefined text styles via the `textStyle` prop. No further configuration
-apart from the `textStyle` prop is needed.
-
-Text-styles can and usually do set a bunch of typographic css-rules in order to
-achieve the desired look.
-
-A `textStyle` can be a simple as a combination of font-size & line-height or
-more complex, containing capitalisation rules etc.
-
-> [!NOTE] A list of available text-styles
-> [can be found here](/tokens/typography)
-
-```jsx-live
-import { Text } from "@commercetools/nimbus";
-
-const App = () => (
-  <Text textStyle="xl">Extra Large Text</Text>
-);
-```
-
-## Custom CSS / styling
-
-Technically, you can set any css-property on the text-component via the
-available [style props](/style-props), here are the most common ones for
-changing text appearance:
-
-### Text Alignment
-
-```jsx-live
-const App = () => (
-  <>
-    <Text textAlign="left">left aligned text</Text>
-    <Text textAlign="right">right aligned text</Text>
-    <Text textAlign="center">centered text</Text>
-  </>
-)
-```
-
-### Font Size
-
-#### The recommended way
-
-Basic `textStyle` 's are available and set the size of the text and an
-appropriate line-height for this size at the same time.
-
-```jsx-live
-const App = () => (
-  <Flex flexDirection="column">
-    {["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl","5xl","6xl","7xl"].map((size) => (
-      <Text key={size} asChild textStyle={size}>
-        <span>Displays text in `{size}` size</span>
-      </Text>
-    ))}
-  </Flex>
-)
-```
-
-#### The escape hatch
-
-If you need to set the font-size manually and independent from the line-height,
-use `fontSize` and a font-size token. Be cautious as this may affect layout and
-readability.
-
-> [!NOTE] The list of available font-sizes
-> [can be found here](/tokens/typography#font-sizes)
-
-```jsx-live
-const App = () => (
-  <Flex flexDirection="column">
-    {["250", "300", "350", "400", "450", "500", "600"].map((size) => (
-      <Text key={size} fontSize={size}>
-        Displays text in `{size}` size
-      </Text>
-    ))}
-  </Flex>
-)
-```
-
-### Text Color
-
-Use the `color` prop to change the color of the text.
-
-```jsx-live
-import { Stack, Text } from "@commercetools/nimbus"
-
-const App = () => (
-    <Stack>
-      <Text color="primary.11">Franz jagt im komplett verwahrlosten Taxi quer durch Bayern</Text>
-      <Text color="info.11">Franz jagt im komplett verwahrlosten Taxi quer durch Bayern</Text>
-      <Text color="success.11">Franz jagt im komplett verwahrlosten Taxi quer durch Bayern</Text>
-      <Text color="danger.11">Franz jagt im komplett verwahrlosten Taxi quer durch Bayern</Text>
-      <Text color="error.11">Franz jagt im komplett verwahrlosten Taxi quer durch Bayern</Text>
-    </Stack>
-  )
-```
-
-### Font Weight
-
-Make text bolder or lighter by setting the `fontWeight` prop.
-
-```jsx-live
-const App = () => {
-  return (
-    <Stack>
-      <Text fontWeight="100">Franz jagt im komplett verwahrlosten Taxi quer durch Bayern</Text>
-      <Text fontWeight="200">Franz jagt im komplett verwahrlosten Taxi quer durch Bayern</Text>
-      <Text fontWeight="300">Franz jagt im komplett verwahrlosten Taxi quer durch Bayern</Text>
-      <Text fontWeight="400">Franz jagt im komplett verwahrlosten Taxi quer durch Bayern</Text>
-      <Text fontWeight="500">Franz jagt im komplett verwahrlosten Taxi quer durch Bayern</Text>
-      <Text fontWeight="600">Franz jagt im komplett verwahrlosten Taxi quer durch Bayern</Text>
-      <Text fontWeight="700">Franz jagt im komplett verwahrlosten Taxi quer durch Bayern</Text>
-      <Text fontWeight="800">Franz jagt im komplett verwahrlosten Taxi quer durch Bayern</Text>
-      <Text fontWeight="900">Franz jagt im komplett verwahrlosten Taxi quer durch Bayern</Text>
-    </Stack>
-  )
-}
-```
-
-## Truncate Text
-
-Use the `truncate` prop to truncate the text after a single line.
-
-```jsx-live
-import { Flex, Text } from "@commercetools/nimbus"
-
-const App = () => (
-    <Flex maxW="300px">
-      <Text truncate>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-      </Text>
-    </Flex>
-  )
-```
-
-## Clamp Lines
-
-Use the `lineClamp` prop to truncate the text after a certain number of lines.
-
-```jsx-live
-import { Flex, Text } from "@commercetools/nimbus"
-
-const App = () => (
-    <Flex maxW="300px">
-      <Text lineClamp="2">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat.
-      </Text>
-    </Flex>
-  )
-```
-
-## Additional Style Props
-
-The `Text` component supports all style-props that are available as
-[style-Props](/style-props). Here are some more common text-related ones:
-
-| Prop Name        | Description                          |
-| ---------------- | ------------------------------------ |
-| `textDecoration` | Set the text-decoration of the text. |
-| `textTransform`  | Set the text-transform of the text.  |
-| `letterSpacing`  | Set the letter-spacing of the text.  |
-| `lineHeight`     | Set the line-height of the text.     |
-| `whiteSpace`     | Set the white-space of the text.     |
-| ...              | ...                                  |

package/src/components/text/text.tsx

@@ -1,23 +0,0 @@
-import {
-  Text as ChakraText,
-  type TextProps as ChakraTextProps,
-} from "@chakra-ui/react";
-import { forwardRef } from "react";
-
-export interface TextProps extends ChakraTextProps {}
-
-/**
- * Render Text
- *
- * Use this component to render text. Various props can be passed to customize the text.
- * Check the documentation for more information.
- *
- * @see https://DOMAIN/components/typography/text
- */
-export const Text = forwardRef<HTMLParagraphElement, TextProps>(
-  (props, ref) => {
-    return <ChakraText ref={ref} {...props} />;
-  }
-);
-
-Text.displayName = "Text";

package/src/components/text-input/index.ts

@@ -1,2 +0,0 @@
-export * from "./text-input";
-export * from "./text-input.types";

package/src/components/text-input/text-input.mdx

@@ -1,118 +0,0 @@
----
-id: Components-TextInput
-title: TextInput
-description: An input component that takes in a text as input
-documentState: InitialDraft
-order: 999
-menu:
-  - Components
-  - Inputs
-  - TextInput
-tags:
-  - component
----
-
-# TextInput
-
-The TextInput component is a form control that allows users to enter text into
-an input field. It provides a clean, accessible interface for text input with
-support for different states and variants.
-
-## Features
-
-- **Accessible:** Built with ARIA attributes for screen reader support
-- **Customizable:** Supports different sizes and visual variants
-- **State Management:** Handles disabled, invalid, and focus states
-
-## Basic Usage
-
-The TextInput component is used to create form input fields where users can enter text. It supports various states and can be customized using props.
-
-```jsx-live
-const App = () => <TextInput placeholder="basic text input"/>
-```
-
-### Sizes
-
-Available sizes.
-
-```jsx-live
-const App = () => {
-
-  const sizes = ['md', 'sm',];
-
-  return (
-    <Stack direction="horizontal" alignItems="center">
-      {sizes.map(size => (
-        <TextInput key={size} size={size} placeholder={size}/>
-      ))}
-    </Stack>
-  )
-}
-```
-
-### Variants
-
-There are two variants currently:
-- **Solid:** The default variant with a solid background.
-- **Ghost:** A minimal variant without background.
-
-
-```jsx-live
-const App = () => {
-
-  const variants = ['solid','ghost',];
-
-  return (
-    <Stack direction="horizontal">
-      {variants.map(variant => (
-        <TextInput key={variant} variant={variant} placeholder={variant} />
-      ))}
-    </Stack>
-  )
-}
-```
-
-## States
-
-### Disabled
-
-When interaction is not allowed.
-
-```jsx-live
-const App = () => {
-
-  const variants = ['solid','ghost',];
-
-  return (
-    <Stack direction="horizontal">
-      {variants.map(variant => (
-        <TextInput key={variant} variant={variant} placeholder={variant} disabled/>
-      ))}
-    </Stack>
-  )
-}
-```
-
-### Invalid
-
-For showing error states in forms.
-
-```jsx-live
-const App = () => {
-
-  const variants = ['solid','ghost',];
-
-  return (
-    <Stack direction="horizontal">
-      {variants.map(variant => (
-        <TextInput key={variant} variant={variant} placeholder={variant} isInvalid/>
-      ))}
-    </Stack>
-  )
-}
-```
-
-## Props
-
-<PropTable id="TextInput" />

package/src/components/text-input/text-input.recipe.tsx

@@ -1,68 +0,0 @@
-import { defineRecipe } from "@chakra-ui/react";
-
-/**
- * Recipe configuration for the TextInput component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-export const textInputRecipe = defineRecipe({
-  // Unique class name prefix for the component
-  className: "nimbus-text-input",
-
-  // Base styles applied to all instances of the component
-  base: {
-    display: "block",
-    borderRadius: "200",
-    colorPalette: "neutral",
-    focusVisibleRing: "outside",
-    bg: "transparent",
-    outline: "none",
-    boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
-    _placeholder: {
-      opacity: 0.5,
-      color: "currentColor",
-    },
-    _disabled: {
-      layerStyle: "disabled",
-    },
-    "&[data-invalid='true']": {
-      "--border-color": "colors.error.7",
-      color: "error.11",
-    },
-  },
-
-  variants: {
-    size: {
-      sm: {
-        h: 800,
-        textStyle: "sm",
-        px: 300,
-      },
-      md: {
-        h: 1000,
-        textStyle: "md",
-        px: 400,
-      },
-    },
-
-    variant: {
-      solid: {
-        "--border-width": "sizes.25",
-        "--border-color": "colors.neutral.7",
-        backgroundColor: "neutral.1",
-        _hover: {
-          backgroundColor: "primary.2",
-        },
-      },
-      ghost: {
-        _hover: {
-          backgroundColor: "primary.2",
-        },
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: "md",
-    variant: "solid",
-  },
-});

package/src/components/text-input/text-input.slots.tsx

@@ -1,24 +0,0 @@
-import {
-  type HTMLChakraProps,
-  type RecipeVariantProps,
-  type UnstyledProp,
-  createRecipeContext,
-} from "@chakra-ui/react";
-
-import { textInputRecipe } from "./text-input.recipe";
-
-export interface TextInputRecipeProps
-  extends RecipeVariantProps<typeof textInputRecipe>,
-    UnstyledProp {}
-
-export type TextInputRootProps = HTMLChakraProps<"input", TextInputRecipeProps>;
-
-const { withContext } = createRecipeContext({ recipe: textInputRecipe });
-
-/**
- * Root component that provides the styling context for the TextInput component.
- * Uses Chakra UI's recipe context system for consistent styling across instances.
- */
-export const TextInputRoot = withContext<HTMLInputElement, TextInputRootProps>(
-  "input"
-);