@commercetools/nimbus 0.0.2 → 0.0.3

package/src/docs/forms.mdx

@@ -1,22 +0,0 @@
----
-id: Forms
-title: Forms
-description: components useful for assembling forms
-documentState: InitialDraft
-order: 4
-menu:
-  - Components
-  - Inputs
-tags:
-  - forms
-icon: Input
----
-
-# Inputs
-
-Components for user input and interaction.
-
-- **Text Inputs**: e.g., InputField, TextArea.
-- **Selection Controls**: e.g., Dropdown, Checkbox, RadioButton.
-- **Buttons**: e.g., Button, IconButton, ToggleButton.
-- **Sliders & Pickers**: e.g., RangeSlider, DatePicker, TimePicker.

package/src/docs/generated/index.mdx

@@ -1,16 +0,0 @@
----
-id: AI1733919690376
-title: Unsorted Generated Content
-description: Index page for generated content.
-documentState: InitialDraft
-order: 999
-menu:
-  - Unsorted
-tags:
-  - unsorted
----
-
-# Unsorted
-
-Documents here are generated and not sorted yet. Please sort them into the
-correct category.

package/src/docs/getting-started.mdx

@@ -1,17 +0,0 @@
----
-id: Home-Getting Started
-title: Getting Started
-description: Quick start guide to set up and use the package.
-documentState: InitialDraft
-order: 2
-menu:
-  - Home
-  - Getting started
-tags:
-  - document
-icon: Rocket
----
-
-# Getting Started
-
-Quick start guide to set up and use the package.

package/src/docs/home.mdx

@@ -1,56 +0,0 @@
----
-id: Home
-title: Home
-description: Start here if you're new.
-documentState: InitialDraft
-order: 1
-menu:
-  - Home
-tags:
-  - forms
----
-
-# Hello!
-
-This repository aims to solve 2 problems:
-
-1. Provide everything necessary to create beautiful, accessible and resilient
-   user-interfaces.
-2. Document all the bits and pieces that make that happen.
-
-The repository is currently structured into 3 workspaces, 1 app-workspace and 2
-package-workspaces.
-
-## Apps
-
-### docs
-
-The doc-app is a developer tool for creating and managing content-driven web
-applications by leveraging MDX files, structured metadata, and reusable UI
-components.
-
-- **Web Frontend**: The app generates a web-based frontend for browsing and
-  interacting with the content.
-- **Development Environment**: A development server allows users to edit
-  documents and add images directly through their browser.
-- **Content Indexing**: The app scans designated folders for MDX documents,
-  automatically generating and linking pages.
-- **Content Organization**: Frontmatter in MDX files provides metadata for
-  structuring menus and annotating content, enabling flexible organization.
-- **UI Component Integration**: The app utilizes components from
-  `@commercetools/nimbus`, demonstrating how to create polished frontends with
-  this UI library.
-
-## Packages
-
-Currently this two packages contain the mentioned bits and pieces, reusable
-across several frontends:
-
-### @commercetools/nimbus
-
-This package contains react components & hooks, as well as a ct-tailored
-default-theme.
-
-### @commercetools/nimbus-icons
-
-This package contains icons for many different scenarios.

package/src/docs/hooks.mdx

@@ -1,16 +0,0 @@
----
-id: Hooke
-title: Hooke
-description: react hooks
-documentState: InitialDraft
-order: 999
-menu:
-  - Hooks
-tags:
-  - hooks
-  - react
----
-
-# Hooks
-
-A colleciton of useful react hooks.

package/src/docs/inputs.mdx

@@ -1,21 +0,0 @@
----
-id: Components-Forms
-title: Forms
-description: Components specifically tailored for form creation and management.
-documentState: InitialDraft
-order: 9
-menu:
-  - Components
-  - Forms
-tags:
-  - document
-icon: DynamicForm
----
-
-# Forms
-
-Components specifically tailored for form creation and management.
-
-- **Fieldsets**: e.g., FormGroup, FieldSet.
-- **Validation Components**: e.g., ValidationMessage, FormError.
-- **Action Controls**: e.g., SubmitButton, ResetButton.

package/src/docs/installation.mdx

@@ -1,60 +0,0 @@
----
-id: Home-Installation
-title: Installation
-description: Learn how to install @commercetools/nimbus and its dependencies.
-documentState: InitialDraft
-order: 1
-menu:
-  - Home
-  - Installation
-tags:
-  - document
-icon: Download
----
-
-## Development Setup
-
-### Installation
-
-Make sure you fulfill the requirements below and install dependencies with the
-provided command.
-
-#### Requirements
-
-The following software needs to be installed on your system before you can
-proceed:
-
-- Node v20+
-- pnpm v9+
-
-#### Install dependencies
-
-```bash
-$ pnpm install
-```
-
-### Development
-
-1. If you just set up the repository, do an initial [build](#build).
-2. Start the development environment with the following command
-
-```bash
-$ pnpm run dev
-```
-
-1. Open the documentation app in the
-   browser: [http://localhost:5173/](http://localhost:5173/)
-
-### Build
-
-To build packages & the documentation app:
-
-```bash
-$ pnpm run build
-```
-
-To only build packages:
-
-```bash
-$ pnpm run build-packages
-```

package/src/docs/interactivity.mdx

@@ -1,278 +0,0 @@
----
-id: Style Props-Interactivity
-title: Interactivity
-description: JSX style props to enhance interactivity on an element
-documentState: InitialDraft
-order: 999
-menu:
-  - Style Props
-  - Interactivity
-tags:
-  - document
----
-
-# Interactivity
-
-JSX style props to enhance interactivity on an element
-
-## Accent Color
-
-Use the `accentColor` prop to set the accent color for browser generated
-user-interface controls.
-
-```jsx
-// hardcoded
-<label>
-  <chakra.input type="checkbox" accentColor="#3b82f6" />
-</label>
-
-// token value
-<label>
-  <chakra.input type="checkbox" accentColor="blue.500" />
-</label>
-```
-
-| Prop          | CSS Property   | Token Category |
-| ------------- | -------------- | -------------- |
-| `accentColor` | `accent-color` | `colors`       |
-
-## Appearance
-
-Use the `appearance` prop to set the appearance of an element.
-
-```jsx
-<chakra.select appearance="none">
-  <option value="1">Option 1</option>
-  <option value="2">Option 2</option>
-  <option value="3">Option 3</option>
-</chakra.select>
-```
-
-| Prop         | CSS Property | Token Category |
-| ------------ | ------------ | -------------- |
-| `appearance` | `appearance` | -              |
-
-## Caret Color
-
-Use the `caretColor` prop to set the color of the text cursor (caret) in an
-input or textarea
-
-```jsx
-// hardcoded
-<chakra.input caretColor="#3b82f6" />
-
-// token value
-<chakra.input caretColor="blue.500" />
-```
-
-| Prop         | CSS Property  | Token Category |
-| ------------ | ------------- | -------------- |
-| `caretColor` | `caret-color` | `colors`       |
-
-## Cursor
-
-Use the `cursor` prop to set the mouse cursor image to show when the mouse
-pointer is over an element.
-
-```jsx
-<Box cursor="pointer" />
-```
-
-| Prop     | CSS Property | Token Category |
-| -------- | ------------ | -------------- |
-| `cursor` | `cursor`     | -              |
-
-## Pointer Events
-
-Use the `pointerEvents` prop to control how pointer events are handled on an
-element.
-
-```jsx
-<Box pointerEvents="none">Can't click me</Box>
-```
-
-| Prop            | CSS Property     | Token Category |
-| --------------- | ---------------- | -------------- |
-| `pointerEvents` | `pointer-events` | -              |
-
-## Resize
-
-Use the `resize` prop to control whether an element is resizable, and if so, in
-which directions.
-
-```jsx
-<chakra.textarea resize="both" />
-<chakra.textarea resize="horizontal" />
-<chakra.textarea resize="vertical" />
-```
-
-| Prop     | CSS Property | Token Category |
-| -------- | ------------ | -------------- |
-| `resize` | `resize`     | -              |
-
-## Scrollbar
-
-Use the `scrollbar` prop to customize the appearance of scrollbars.
-
-```jsx
-<Box scrollbar="hidden" maxH="100px" overflowY="auto">
-  Scrollbar hidden
-</Box>
-```
-
-## Scroll Behavior
-
-Use the `scrollBehavior` prop to set the behavior for a scrolling box when
-scrolling is triggered by the navigation or JavaScript code.
-
-```jsx
-<Box maxH="100px" overflowY="auto" scrollBehavior="smooth">
-  <div>Scroll me</div>
-</Box>
-```
-
-| Prop             | CSS Property      | Token Category |
-| ---------------- | ----------------- | -------------- |
-| `scrollBehavior` | `scroll-behavior` | -              |
-
-## Scroll Margin
-
-Use the `scrollMargin*` prop to set margins around scroll containers.
-
-```jsx
-<Box maxH="100px" overflowY="auto" scrollMarginY="2">
-  Scrollbar Container with block padding
-</Box>
-```
-
-| Prop                                  | CSS Property                 | Token Category |
-| ------------------------------------- | ---------------------------- | -------------- |
-| `scrollMarginX` ,`scrollMarginInline` | `scroll-margin-inline`       | `spacing`      |
-| `scrollMarginInlineStart`             | `scroll-margin-inline-start` | `spacing`      |
-| `scrollMarginInlineEnd`               | `scroll-margin-inline-end`   | `spacing`      |
-| `scrollMarginY` , `scrollMarginBlock` | `scroll-margin-block`        | `spacing`      |
-| `scrollMarginBlockStart`              | `scroll-margin-block-start`  | `spacing`      |
-| `scrollMarginBlockEnd`                | `scroll-margin-block-end`    | `spacing`      |
-| `scrollMarginLeft`                    | `scroll-margin-left`         | `spacing`      |
-| `scrollMarginRight`                   | `scroll-margin-right`        | `spacing`      |
-| `scrollMarginTop`                     | `scroll-margin-top`          | `spacing`      |
-| `scrollMarginBottom`                  | `scroll-margin-bottom`       | `spacing`      |
-
-## Scroll Padding
-
-Use the `scrollPadding*` prop to set padding inside scroll containers.
-
-```jsx
-<Box maxH="100px" overflowY="auto" scrollPaddingY="2">
-  Scrollbar Container with block padding
-</Box>
-```
-
-| Prop                                     | CSS Property                  | Token Category |
-| ---------------------------------------- | ----------------------------- | -------------- |
-| `scrollPaddingX` , `scrollPaddingInline` | `scroll-padding-inline`       | `spacing`      |
-| `scrollPaddingInlineStart`               | `scroll-padding-inline-start` | `spacing`      |
-| `scrollPaddingInlineEnd`                 | `scroll-padding-inline-end`   | `spacing`      |
-| `scrollPaddingY` , `scrollPaddingBlock`  | `scroll-padding-block`        | `spacing`      |
-| `scrollPaddingBlockStart`                | `scroll-padding-block-start`  | `spacing`      |
-| `scrollPaddingBlockEnd`                  | `scroll-padding-block-end`    | `spacing`      |
-| `scrollPaddingLeft`                      | `scroll-padding-left`         | `spacing`      |
-| `scrollPaddingRight`                     | `scroll-padding-right`        | `spacing`      |
-| `scrollPaddingTop`                       | `scroll-padding-top`          | `spacing`      |
-| `scrollPaddingBottom`                    | `scroll-padding-bottom`       | `spacing`      |
-
-## Scroll Snap Margin
-
-Use the `scrollSnapMargin*` prop to set margins around scroll containers.
-
-```jsx
-<Box maxH="100px" overflowY="auto" scrollSnapMarginY="2">
-  Scrollbar Container with block padding
-</Box>
-```
-
-| Prop                     | CSS Property           | Token Category |
-| ------------------------ | ---------------------- | -------------- |
-| `scrollSnapMargin`       | `scroll-margin`        | `spacing`      |
-| `scrollSnapMarginTop`    | `scroll-margin-top`    | `spacing`      |
-| `scrollSnapMarginBottom` | `scroll-margin-bottom` | `spacing`      |
-| `scrollSnapMarginLeft`   | `scroll-margin-left`   | `spacing`      |
-| `scrollSnapMarginRight`  | `scroll-margin-right`  | `spacing`      |
-
-## Scroll Snap Type
-
-Use the `scrollSnapType` prop to control how strictly snap points are enforced
-in a scroll container.
-
-```jsx
-<Box maxH="100px" overflowY="auto" scrollSnapType="x">
-  Scroll container with x snap type
-</Box>
-```
-
-| Value  |                                      |
-| ------ | ------------------------------------ |
-| `none` | `none`                               |
-| `x`    | `x var(--scroll-snap-strictness)`    |
-| `y`    | `y var(--scroll-snap-strictness)`    |
-| `both` | `both var(--scroll-snap-strictness)` |
-
-## Scroll Snap Strictness
-
-Use the `scrollSnapStrictness` prop to set the scroll snap strictness of an
-element. This requires `scrollSnapType` to be set to `x`,`y` or `both`.
-
-It's values can be `mandatory` or `proximity` values, and maps to
-`var(--scroll-snap-strictness)`.
-
-```jsx
-<Box maxH="100px" overflowY="auto" scrollSnapStrictness="proximity">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-</Box>
-```
-
-| Prop                   | CSS Property               | Token Category |
-| ---------------------- | -------------------------- | -------------- |
-| `scrollSnapStrictness` | `--scroll-snap-strictness` | -              |
-
-## Touch Action
-
-Use the `touchAction` prop to control how an element's region can be manipulated
-by a touchscreen user
-
-```jsx
-<Box touchAction="none" />
-```
-
-| Prop          | CSS Property   | Token Category |
-| ------------- | -------------- | -------------- |
-| `touchAction` | `touch-action` | -              |
-
-## User Select
-
-Use the `userSelect` prop to control whether the user can select text within an
-element.
-
-```jsx
-<Box userSelect="none">
-  <p>Can't Select me</p>
-</Box>
-```
-
-| Prop         | CSS Property  | Token Category |
-| ------------ | ------------- | -------------- |
-| `userSelect` | `user-select` | -              |
-
-## Will Change
-
-Use the `willChange` prop to hint browsers how an element's property is expected
-to change.
-
-```jsx
-<Box willChange="transform" />
-```
-
-| Prop         | CSS Property  | Token Category |
-| ------------ | ------------- | -------------- |
-| `willChange` | `will-change` | -              |

package/src/docs/known-issues.mdx

@@ -1,19 +0,0 @@
----
-id: Home-Known issues
-title: Known issues
-description:
-  Current bugs, limitations, and compatibility issues with possible workarounds.
-documentState: InitialDraft
-documentAudiences: []
-order: 4
-menu:
-  - Home
-  - Bugs & Issues
-tags:
-  - document
-icon: PestControl
----
-
-# Known issues
-
-Current bugs, limitations, and compatibility issues with possible workarounds.