@commercetools/nimbus 0.0.2 → 0.0.3

package/src/docs/transitions.mdx

@@ -1,164 +0,0 @@
----
-id: Style Props-Transitions
-title: Transitions
-description:
-  JSX style props for controlling an element's transition and animation.
-documentState: InitialDraft
-order: 999
-menu:
-  - Style Props
-  - Transitions
-tags:
-  - document
----
-
-# Transitions
-
-JSX style props for controlling an element's transition and animation.
-
-## Transition
-
-Use the `transition` prop to control the transition of an element.
-
-```jsx
-// hardcoded value
-<Box bg="red.400" _hover={{ bg: "red.500" }} transition="background 0.2s ease-in-out">
-  Hover me
-</Box>
-
-// shortcut value
-<Box bg="red.400" _hover={{ bg: "red.500" }} transition="backgrounds">
-  Hover me
-</Box>
-```
-
-| Prop         | CSS Property | Token Category |
-| ------------ | ------------ | -------------- |
-| `transition` | `transition` | -              |
-
-## Transition Timing Function
-
-Use the `transitionTimingFunction` prop to control the timing function of a
-transition.
-
-```jsx
-<Box
-  bg="red.400"
-  _hover={{ bg: "red.500" }}
-  transition="backgrounds"
-  transitionTimingFunction="ease-in-out"
->
-  Hover me
-</Box>
-```
-
-| Prop                       | CSS Property                 | Token Category |
-| -------------------------- | ---------------------------- | -------------- |
-| `transitionTimingFunction` | `transition-timing-function` | `easings`      |
-
-## Transition Duration
-
-Use the `transitionDuration` prop to control the duration of a transition.
-
-```jsx
-<Box
-  bg="red.400"
-  _hover={{ bg: "red.500" }}
-  transition="backgrounds"
-  transitionDuration="fast"
->
-  Hover me
-</Box>
-```
-
-| Prop                 | CSS Property          | Token Category |
-| -------------------- | --------------------- | -------------- |
-| `transitionDuration` | `transition-duration` | `durations`    |
-
-## Transition Delay
-
-Use the `transitionDelay` prop to control the delay of a transition.
-
-```jsx
-<Box
-  bg="red.400"
-  _hover={{ bg: "red.500" }}
-  transition="backgrounds"
-  transitionDelay="fast"
->
-  Hover me
-</Box>
-```
-
-| Prop              | CSS Property       | Token Category |
-| ----------------- | ------------------ | -------------- |
-| `transitionDelay` | `transition-delay` | `durations`    |
-
-## Animation
-
-Use the `animation` prop to control the animation of an element.
-
-```jsx
-<Box animation="bounce" />
-```
-
-| Prop        | CSS Property     | Token Category |
-| ----------- | ---------------- | -------------- |
-| `animation` | `animation-name	` | `animations`   |
-
-## Animation Name
-
-Use the `animationName` prop to control the name of an animation. Compose
-multiple animation names to create complex animations.
-
-:::info
-
-The value of the `animation` prop points to a global keyframe animation. Use the
-`theme.keyframes` object to define the animation.
-
-:::
-
-```jsx
-<Box animationName="bounce, fade-in" animationDuration="fast" />
-```
-
-| Prop            | CSS Property     | Token Category |
-| --------------- | ---------------- | -------------- |
-| `animationName` | `animation-name` | `animations`   |
-
-## Animation Timing Function
-
-Use the `animationTimingFunction` prop to control the timing function of an
-animation.
-
-```jsx
-<Box animation="bounce" animationTimingFunction="ease-in-out" />
-```
-
-| Prop                      | CSS Property                | Token Category |
-| ------------------------- | --------------------------- | -------------- |
-| `animationTimingFunction` | `animation-timing-function` | `easings`      |
-
-## Animation Duration
-
-Use the `animationDuration` prop to control the duration of an animation.
-
-```jsx
-<Box animation="bounce" animationDuration="fast" />
-```
-
-| Prop                | CSS Property         | Token Category |
-| ------------------- | -------------------- | -------------- |
-| `animationDuration` | `animation-duration` | `durations`    |
-
-## Animation Delay
-
-Use the `animationDelay` prop to control the delay of an animation.
-
-```jsx
-<Box animation="bounce" animationDelay="fast" />
-```
-
-| Prop             | CSS Property      | Token Category |
-| ---------------- | ----------------- | -------------- |
-| `animationDelay` | `animation-delay` | `durations`    |

package/src/docs/typography.mdx

@@ -1,17 +0,0 @@
----
-id: Components-Typography
-title: Typography
-description: Components for text styling and formatting.
-documentState: InitialDraft
-order: 6
-menu:
-  - Components
-  - Typography
-tags:
-  - document
-icon: FontDownload
----
-
-# Typography
-
-Components for text styling and formatting.

package/src/docs/utilities.mdx

@@ -1,17 +0,0 @@
----
-id: Components-Utilities
-title: Utilities
-description: Low-level or functional components for utility purposes.
-documentState: InitialDraft
-order: 8
-menu:
-  - Components
-  - Utilities
-tags:
-  - document
-icon: Construction
----
-
-# Utilities
-
-Low-level or functional components for utility purposes.

package/src/hooks/index.ts

@@ -1,2 +0,0 @@
-export { useHotkeys } from "@/hooks/use-hotkeys/use-hotkeys.ts";
-export { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard/use-copy-to-clipboard.ts";

package/src/hooks/use-copy-to-clipboard/use-copy-to-clipboard.mdx

@@ -1,54 +0,0 @@
----
-id: useCopyToClipboard
-title: useCopyToClipboard
-description: copy text to the clipboard
-documentState: InitialDraft
-order: 999
-menu:
-  - Hooks
-  - useCopyToClipboard
-tags:
-  - clipboard
-  - copy
----
-
-# useCopyToClipboard
-
-Copy text to a user's clipboard.
-
-## Usage
-
-```jsx
-const Demo = () => {
-  const [text, setText] = React.useState("");
-  const [state, copyToClipboard] = useCopyToClipboard();
-
-  return (
-    <div>
-      <input value={text} onChange={(e) => setText(e.target.value)} />
-      <button type="button" onClick={() => copyToClipboard(text)}>
-        copy text
-      </button>
-      {state.error ? (
-        <p>Unable to copy value: {state.error.message}</p>
-      ) : (
-        state.value && <p>Copied {state.value}</p>
-      )}
-    </div>
-  );
-};
-```
-
-## Reference
-
-```js
-const [{ value, error, noUserInteraction }, copyToClipboard] =
-  useCopyToClipboard();
-```
-
-- `value` &mdash; value that was copied to clipboard, undefined when nothing was
-  copied.
-- `error` &mdash; caught error when trying to copy to clipboard.
-- `noUserInteraction` &mdash; boolean indicating if user interaction was
-  required to copy the value to clipboard to expose full API from underlying
-  [`copy-to-clipboard`](https://github.com/sudodoki/copy-to-clipboard) library.

package/src/hooks/use-copy-to-clipboard/use-copy-to-clipboard.ts

@@ -1 +0,0 @@
-export { useCopyToClipboard } from "react-use";

package/src/hooks/use-hotkeys/use-hotkeys.mdx

@@ -1,48 +0,0 @@
----
-id: useHotkeys
-title: useHotkeys
-description: use keyboard shortcuts to do stuff
-documentState: InitialDraft
-order: 999
-menu:
-  - Hooks
-  - useHotkeys
-tags:
-  - keys
-  - shortcut
-  - keyboard
----
-
-# useHotkeys
-
-This hook allows you to listen to hotkeys in a declarative way and execute a
-callback function once the user pressed down the given hotkey.
-
-## Basic Usage
-
-Import the `useHotkeys` hook from the package:
-
-```js
-import { useHotkeys } from "@commercetools/nimbus";
-```
-
-## Simple Hotkey
-
-The most basic usage for the hook is to assign a hotkey you want to listen to
-and a callback to get executed once the user hits that key.
-
-```jsx-live
-import { useHotkeys } from "@commercetools/nimbus";
-
-const App = () => {
-  useHotkeys("a", () => alert("Key a was pressed"));
-
-  return <span>Press the a key to see it work.</span>;
-};
-```
-
-## More stuff
-
-Use the documentation of the underlying library for now:
-
-https://react-hotkeys-hook.vercel.app/docs/intro

package/src/hooks/use-hotkeys/use-hotkeys.stories.tsx

@@ -1,69 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { useHotkeys } from "./use-hotkeys";
-import { userEvent, expect, fn } from "@storybook/test";
-import { useState } from "react";
-
-const UseHotkeysDemo = ({
-  combo,
-  onHotkey = () => {},
-}: {
-  combo: string;
-  onHotkey?: () => void;
-}) => {
-  const [ran, setRan] = useState(0);
-
-  useHotkeys(combo, () => {
-    setRan(ran + 1);
-    onHotkey();
-  });
-
-  return (
-    <div>
-      {ran >= 1
-        ? `Success, fn ran ${ran} x times`
-        : `Click here + hit ${combo} to trigger hotkey`}
-    </div>
-  );
-};
-
-const meta: Meta<typeof UseHotkeysDemo> = {
-  title: "Hooks/useHotkeys",
-  component: UseHotkeysDemo,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["!autodocs"],
-};
-
-export default meta;
-type Story = StoryObj<typeof UseHotkeysDemo>;
-
-export const SingleKey: Story = {
-  args: {
-    combo: "esc",
-    onHotkey: fn(),
-  },
-  play: async ({ args, step }) => {
-    const onHotkey = args.onHotkey;
-    await step("Trigger hotkey", async () => {
-      await expect(onHotkey).toHaveBeenCalledTimes(0);
-      await userEvent.keyboard("{esc}");
-      await expect(onHotkey).toHaveBeenCalledTimes(1);
-    });
-  },
-};
-
-export const KeyCombo: Story = {
-  args: {
-    combo: "Ctrl+l",
-    onHotkey: fn(),
-  },
-  play: async ({ args, step }) => {
-    const onHotkey = args.onHotkey;
-    await step("Trigger hotkey combination", async () => {
-      await expect(onHotkey).toHaveBeenCalledTimes(0);
-      await userEvent.keyboard("{Control>}l{/Control}");
-      await expect(onHotkey).toHaveBeenCalledTimes(1);
-    });
-  },
-};

package/src/hooks/use-hotkeys/use-hotkeys.ts

@@ -1 +0,0 @@
-export { useHotkeys } from "react-hotkeys-hook";

package/src/index.ts

@@ -1,3 +0,0 @@
-export * from "./components";
-export * from "./hooks";
-export * from "./theme";

package/src/test/utils.tsx

@@ -1,20 +0,0 @@
-import { type ReactNode } from "react";
-import {
-  render,
-  type RenderOptions,
-  type RenderResult,
-} from "@testing-library/react";
-import { NimbusProvider } from "@/components";
-import { userEvent as baseUserEvent } from "@testing-library/user-event";
-
-const renderWithProvider = (
-  ui: ReactNode,
-  options?: RenderOptions
-): RenderResult => {
-  return render(<NimbusProvider>{ui}</NimbusProvider>, options);
-};
-
-export * from "@testing-library/react";
-export const userEvent = baseUserEvent.setup();
-export { act } from "react";
-export { renderWithProvider as render };

package/src/theme/animation-styles.ts

@@ -1,52 +0,0 @@
-import { defineAnimationStyles } from "@chakra-ui/react";
-
-type AnimationStylesType = ReturnType<typeof defineAnimationStyles>;
-
-export const animationStyles: AnimationStylesType = defineAnimationStyles({
-  "slide-fade-in": {
-    value: {
-      transformOrigin: "var(--transform-origin)",
-      "&[data-placement^=top]": {
-        animationName: "slide-from-bottom, fade-in",
-      },
-      "&[data-placement^=bottom]": {
-        animationName: "slide-from-top, fade-in",
-      },
-      "&[data-placement^=left]": {
-        animationName: "slide-from-right, fade-in",
-      },
-      "&[data-placement^=right]": {
-        animationName: "slide-from-left, fade-in",
-      },
-    },
-  },
-  "slide-fade-out": {
-    value: {
-      transformOrigin: "var(--transform-origin)",
-      "&[data-placement^=top]": {
-        animationName: "slide-to-bottom, fade-out",
-      },
-      "&[data-placement^=bottom]": {
-        animationName: "slide-to-top, fade-out",
-      },
-      "&[data-placement^=left]": {
-        animationName: "slide-to-right, fade-out",
-      },
-      "&[data-placement^=right]": {
-        animationName: "slide-to-left, fade-out",
-      },
-    },
-  },
-  "scale-fade-in": {
-    value: {
-      transformOrigin: "var(--transform-origin)",
-      animationName: "scale-in, fade-in",
-    },
-  },
-  "scale-fade-out": {
-    value: {
-      transformOrigin: "var(--transform-origin)",
-      animationName: "scale-out, fade-out",
-    },
-  },
-});

package/src/theme/breakpoints.ts

@@ -1,32 +0,0 @@
-import { themeTokens } from "@commercetools/nimbus-tokens";
-
-interface BreakpointValue {
-  value?: string;
-  [key: string]: any;
-}
-
-interface BreakpointsTokenObject {
-  [key: string]: string | BreakpointValue;
-}
-
-interface TransformedBreakpoints {
-  [key: string]: string;
-}
-
-function transformBreakpoints(
-  input: BreakpointsTokenObject
-): TransformedBreakpoints {
-  const transformed: TransformedBreakpoints = {};
-
-  for (const key in input) {
-    if ((input[key] as BreakpointValue)?.value) {
-      transformed[key] = (input[key] as BreakpointValue).value!;
-    } else {
-      transformed[key] = input[key] as string;
-    }
-  }
-
-  return transformed;
-}
-
-export const breakpoints = transformBreakpoints(themeTokens.breakpoints);

package/src/theme/global-css.ts

@@ -1,53 +0,0 @@
-import { defineGlobalStyles } from "@chakra-ui/react";
-
-export const globalCss = defineGlobalStyles({
-  "*": {
-    fontFeatureSettings:
-      '"liga", "calt", "case", "ss01", "ss07", "ss08", "tnum"',
-    "--ring-inset": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--ring-offset-width": "0px",
-    "--ring-offset-color": "#fff",
-    "--ring-color": "rgba(66, 153, 225, 0.6)",
-    "--ring-offset-shadow": "0 0 #0000",
-    "--ring-shadow": "0 0 #0000",
-    "--focus-ring-color": "colors.primary.7",
-    "--brightness": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--contrast": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--hue-rotate": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--invert": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--saturate": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--sepia": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--drop-shadow": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--backdrop-blur": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--backdrop-brightness": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--backdrop-contrast": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--backdrop-grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--backdrop-hue-rotate": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--backdrop-invert": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--backdrop-opacity": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--backdrop-saturate": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--backdrop-sepia": "var(--chakra-empty,/*!*/ /*!*/)",
-    "--global-font-mono": "fonts.mono",
-    "--global-font-body": "fonts.body",
-    "--global-color-border": "colors.border",
-  },
-  /** 'liga' may replace 2 characters with a single one,
-   * which causes differences in formatting when a monospace font is used.*/
-  "code *": {
-    fontFeatureSettings: '"calt", "case", "ss01", "ss07", "ss08", "tnum"',
-  },
-  html: {
-    color: "fg",
-    bg: "bg",
-    lineHeight: "1.5",
-    colorPalette: "neutral",
-  },
-  "*::placeholder": {
-    color: "fg.muted/80",
-  },
-  "*::selection": {
-    bg: "colorPalette.9",
-    color: "colorPalette.contrast",
-  },
-});

package/src/theme/index.ts

@@ -1,35 +0,0 @@
-import {
-  createSystem,
-  defaultBaseConfig,
-  defineConfig,
-} from "@chakra-ui/react";
-import { animationStyles } from "./animation-styles";
-import { breakpoints } from "./breakpoints";
-import { globalCss } from "./global-css";
-import { keyframes } from "./keyframes";
-import { layerStyles } from "./layer-styles";
-import { recipes } from "./recipes";
-import { semanticTokens } from "./semantic-tokens";
-import { slotRecipes } from "./slot-recipes";
-import { textStyles } from "./text-styles";
-import { tokens } from "./tokens";
-
-const themeConfig = defineConfig({
-  preflight: true,
-  cssVarsPrefix: "nimbus",
-  cssVarsRoot: ":where(:root, :host)",
-  globalCss,
-  theme: {
-    breakpoints,
-    keyframes,
-    tokens,
-    semanticTokens,
-    recipes,
-    slotRecipes,
-    textStyles,
-    layerStyles,
-    animationStyles,
-  },
-});
-
-export const system = createSystem(defaultBaseConfig, themeConfig);