AppTweak GUI Library

https://storybook.apptweak.com/version/latest
Admin
AppTweak GUI Library is a comprehensive React component library featuring atoms, molecules,...
Tokens:6,413
Snippets:97
Trust Score:10
Update:6 months ago
Show doc for...
Tokens:
Raw
### Custom Popover with Tippy.js (Hover and Focus Trigger)

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fatoms-popover--docs

For advanced use cases like custom positioning or layout, build a custom popover using tippyjs-react. This example shows triggering the popover on both hover and focus events.

```javascript
import Tippy from "@tippyjs/react";
import {tippyPopoverConfig} from "@apptweak/gui-lib";

<Tippy content="I'm the button popover" trigger="mouseenter focus" {...tippyPopoverConfig}>
  <button className="at-btn">Hover or focus to see my popover</button>
</Tippy>
```

--------------------------------

### Tooltip Component Usage

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fatoms-tooltips--docs

How to import and implement the Tooltip component in your application.

```APIDOC
## Tooltip Component Usage

### Description
The `Tooltip` component is used to display contextual information when a user hovers over an element. It is imported from the tool repository.

### Request Example
```javascript
import Tooltip from "@components/Tooltips/Tooltip";

<Tooltip content="I'm the button tooltip">
  <button className="at-btn">Hover me to see my tooltip</button>
</Tooltip>
```
```

--------------------------------

### Import Chart SCSS Styles

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fcharts-styling--docs

Import the `aptk-gui-lib-charts.scss` file from the root of the `aptk-gui-lib` package to apply CSS rules to chart elements.

```scss
@import "@aptk-gui-lib/charts/aptk-gui-lib-charts.scss";
```

--------------------------------

### Import and Use Tooltip Component

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fatoms-tooltips--docs

Import the Tooltip component from the tool repository and use it by wrapping the target element. The content prop defines the tooltip's text.

```javascript
import Tooltip from "@components/Tooltips/Tooltip";

<Tooltip content="I'm the button tooltip">
  <button className="at-btn">Hover me to see my tooltip</button>
</Tooltip>
```

--------------------------------

### Tooltip Props

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fatoms-tooltips--docs

Configuration options for the Tooltip component.

```APIDOC
## Tooltip Props

### Description
The `Tooltip` component supports standard `tippyjs-react` props with specific overrides for internal design consistency.

### Parameters
#### Request Body
- **content** (string) - Required - The text or component to display inside the tooltip.
- **delayOverride** (number) - Optional - Allows overriding the pre-configured delay value.
```

--------------------------------

### Configure and Import AvenirNext in SCSS

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-font--docs

Override the default font path token and import the AvenirNext font styles.

```scss
@import "aptk-gui-lib/Core/Typography/font.tokens";
$avenir-font-path: "/assets/avenir-next/";
@import "aptk-gui-lib/Core/Typography/AvenirNext/avenir-next";
```

--------------------------------

### Empty Code Blocks

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-focus-states--docs

Placeholder code blocks provided in the source documentation.

```text

```

```text

```

```text

```

```text

```

--------------------------------

### Custom Static Popover Styling

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fatoms-popover--docs

Apply the `at-popover` CSS class for static popovers that follow the design system but do not use Tippy.js.

```html
<div className="at-popover">
  A static popover box
</div>
```

--------------------------------

### CSS Variable Naming Convention

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-tokens--docs

Illustrates the mapping between Figma design token paths and their corresponding CSS variable names using snake-case.

```css
Color / text / default --> --text-default
Color / background / semantic / subtle / positive --> --background-semantic-subtle-positive
Color / border / semantic / positive --> --border-semantic-positive
```

--------------------------------

### Configure HighCharts Theme

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fcharts-introduction--docs

Apply the AppTweak theme to the HighCharts instance at the root of your application.

```typescript
// ex: globals/Highcharts.ts
import { applyAtHighChartsTheme } from "aptk-gui-lib/charts";
import Highcharts from "highcharts/highcharts";

// ... Other config or plugins init

applyAtHighChartsTheme(Highcharts);

export default Highcharts;
```

--------------------------------

### Audio Element

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-media--docs

Basic HTML5 audio element for embedding sound content. Requires a valid audio source.

```html
<audio controls>
  <source src="path/to/audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
```

--------------------------------

### Use PopoverButton for Standard Popovers

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fatoms-popover--docs

Use the PopoverButton component from gui-lib for standard popover functionality. It adheres to design standards and is simple to use.

```javascript
import { PopoverButton } from "@apptweak/gui-lib";

<PopoverButton label="Click me">
  I'm a popover!
</PopoverButton>
```

--------------------------------

### Apply Small Border Radius to Box

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-border-radius--docs

Use the `at-border-radius-small` class to apply a small border radius to a Box component. This is useful for visually adjusting component appearance.

```html
<Box class="at-border-radius-small">Box has default border radius</Box>
```

--------------------------------

### Remove Borders with Utility Classes

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-border-size--docs

Apply these utility classes to components to selectively remove borders from specific sides or entirely.

```html
borderLess
at-no-border-end
at-no-border-start
at-no-border-top
at-no-border-bottom
```

--------------------------------

### Apply Border Radius to LiveSearch Input

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-border-radius--docs

Demonstrates applying border radius modifications to the input element of a LiveSearch component. Note that direct access to the input might be limited; global modifiers are preferred when possible.

```html
<div class="live-search at-border-radius-none-start">
  <input type="text" placeholder="Live search (border radius none start)" />
  <button>Cancel</button>
</div>
<div class="live-search at-border-radius-none-end">
  <input type="text" placeholder="Live search (border radius none end)" />
  <button>Cancel</button>
</div>
<div class="live-search at-border-radius-none-top">
  <input type="text" placeholder="Live search (border radius none top)" />
  <button>Cancel</button>
</div>
<div class="live-search at-border-radius-none-bottom">
  <input type="text" placeholder="Live search (border radius none bottom)" />
  <button>Cancel</button>
</div>
```

--------------------------------

### Padding Utility Classes

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-spacings--docs

These classes apply inner spacing (paddings) to elements. They follow the format `p{edge}-{size}`, where `{edge}` can be omitted for all sides, and `{size}` ranges from `none` to `xxl`.

```css
.at-p-none
.at-pt-none
.at-pr-none
.at-pb-none
.at-pl-none
.at-p-xxs
.at-pt-xxs
.at-pr-xxs
.at-pb-xxs
.at-pl-xxs
.at-p-xs
.at-pt-xs
.at-pr-xs
.at-pb-xs
.at-pl-xs
.at-p-s
.at-pt-s
.at-pr-s
.at-pb-s
.at-pl-s
.at-p-m
.at-pt-m
.at-pr-m
.at-pb-m
.at-pl-m
.at-p-l
.at-pt-l
.at-pr-l
.at-pb-l
.at-pl-l
.at-p-xl
.at-pt-xl
.at-pr-xl
.at-pb-xl
.at-pl-xl
.at-p-xxl
.at-pt-xxl
.at-pr-xxl
.at-pb-xxl
.at-pl-xxl
```

--------------------------------

### Custom Popover with Tippy.js (Hover and Focus Trigger - Alternative)

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fatoms-popover--docs

This is an alternative way to configure the Tippy.js popover to trigger on both hover and focus events by setting the `trigger` property.

```javascript
<Tippy content="I'm the button popover" {...tippyPopoverConfig} trigger="mouseenter focus">
  <button className="at-btn">Hover or focus to see my popover</button>
</Tippy>
```

--------------------------------

### Component Property Definition

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-animation--docs

Standard structure for defining component properties within the Storybook documentation.

```APIDOC
## Component Property Specification

### Description
Defines the interface for component properties including name, description, default values, and control types.

### Parameters
- **propertyName** (string) - Required - The identifier for the component property.
- **description** (string) - Required - A short summary of the property's function.
- **defaultValue** (any) - Optional - The default value applied if none is provided.
- **control** (string) - Optional - The UI control type used for editing the property.
```

--------------------------------

### Video Element

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-media--docs

Basic HTML5 video element for embedding video content. Requires a valid video source.

```html
<video controls width="600">
  <source src="path/to/video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>
```

--------------------------------

### Apply Drop Shadow Class

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-dropshadows--docs

Use these classes within a component's classNames to apply a specific level of box-shadow.

```html
<div class="at-board at-dropshadow-l1">
  <p>Text here...</p>
</div>
```

--------------------------------

### Enable CSS Styling for Highcharts

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fcharts-styling--docs

Call `applyAtHighChartsTheme` with `reset` set to `true` to enable CSS rules to be applied to the chart. Ensure Highcharts and the function are imported.

```typescript
import { applyAtHighChartsTheme } from "aptk-gui-lib/charts";
import Highcharts from "highcharts/highcharts";

const optionalAdditionalHighChartsRules: Highcharts.Options = {
// Your custom HighCharts rules
};

applyAtHighChartsTheme(Highcharts, optionalAdditionalHighChartsRules, true);
```

--------------------------------

### Progress Element

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-media--docs

HTML5 progress element indicating the completion progress of a task. Displays a determinate progress bar.

```html
<progress value="70" max="100"></progress>
```

--------------------------------

### Sass Helper for CSS Variables

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-tokens--docs

Demonstrates the usage of a Sass helper function `safeCssVar` to safely reference CSS variables, ensuring they are valid tokens.

```sass
.my-component {
  color: safeCssVar(--text-default);
  // will be compiled to
  // color: var(--text-default);
}
```

--------------------------------

### Margin Utility Classes

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-spacings--docs

These classes apply outer spacing (margins) to elements. They follow the format `m{edge}-{size}`, where `{edge}` can be omitted for all sides, and `{size}` ranges from `none` to `xxl`, including a special `auto` size for margins.

```css
.at-m-none
.at-mt-none
.at-mr-none
.at-mb-none
.at-ml-none
.at-m-xxs
.at-mt-xxs
.at-mr-xxs
.at-mb-xxs
.at-ml-xxs
.at-m-xs
.at-mt-xs
.at-mr-xs
.at-mb-xs
.at-ml-xs
.at-m-s
.at-mt-s
.at-mr-s
.at-mb-s
.at-ml-s
.at-m-m
.at-mt-m
.at-mr-m
.at-mb-m
.at-ml-m
.at-m-l
.at-mt-l
.at-mr-l
.at-mb-l
.at-ml-l
.at-m-xl
.at-mt-xl
.at-mr-xl
.at-mb-xl
.at-ml-xl
.at-m-xxl
.at-mt-xxl
.at-mr-xxl
.at-mb-xxl
.at-ml-xxl
```

--------------------------------

### Define Font Weight Tokens

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-font--docs

SCSS variables used to define font weights for the AvenirNext typeface.

```scss
$at-font-weight-light
```

```scss
$at-font-weight-normal
```

```scss
$at-font-weight-bold
```

--------------------------------

### Image with Muted Class

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-media--docs

Applies a muted style to an image using the `.img-muted` class.

```html
<img class="img-muted" src="path/to/image.jpg" alt="Descriptive Alt Text">
```

--------------------------------

### Create Plot Band with Custom Color

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fcharts-introduction--docs

Use `createPlotBand` to configure `AxisPlotBandOptions` with predefined color groups. This function sets background, border, and label colors according to the specified color group.

```javascript
import HighchartsReact from "highcharts-react-official";
import React from "react";
import HighchartsWithAtTheme from "wherever/you/choose/to/putIt";
import { createPlotBand } from "aptk-gui-lib/charts";

const ExampleLineCharColor = () => (
    <HighchartsReact
      highcharts={HighchartsWithAtTheme}
      options={{
        xAxis: {
          plotBand: [
            createPlotBand({
              from: 2018,
              to: 2020,
              label: {
                text: "Default color (grey)"
              }
            }),
            createPlotBand(
              {
                from: 2013,
                to: 2016,
                label: {
                  text: "Green color scheme"
                }
              },
              AtColorsGroups.Green
            )
          ]
        }
      }}
    />
);

```

--------------------------------

### Configure Plot Band on Y-Axis

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fcharts-introduction--docs

When creating a plot band for the y-axis, set the `yAxis` option to `true` within the plot band configuration. This ensures correct rotation and spacing for y-axis labels.

```javascript
// (default) Used on an xAxis.plotBand
createPlotBand(
  {
    from: 2013,
    to: 2016,
    label: {
      text: "Green color scheme"
    }
  },
  AtColorsGroups.Green
);

// Used on an yAxis.plotBand
createPlotBand(
  {
    from: 2013,
    to: 2016,
    label: {
      text: "Green color scheme"
    },
    yAxis: true // important! informe the helpers that your plot band will bon on the y axis
  },
  AtColorsGroups.Green
);

```

--------------------------------

### Iframe Element

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-media--docs

Inline frame element used to embed another HTML document within the current one. Requires a valid source URL.

```html
<iframe src="path/to/external.html" width="400" height="300"></iframe>
```

--------------------------------

### createPlotLine

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fcharts-introduction--docs

Configures an AxisPlotLinesOptions object with a specific color group from the design system.

```APIDOC
## createPlotLine

### Description
Pre-configures an AxisPlotLinesOptions object for a given AtColorGroups to ensure consistent color usage and styling.

### Parameters
- **options** (Omit<AxisPlotLinesOptions, "color">) - Required - Highcharts plot line options excluding color.
- **colorGroup** (AtColorsGroups) - Required - The design system color group to apply.

### Request Example
createPlotLine({ value: 2015, label: { text: "Label" } }, AtColorsGroups.Green);
```

--------------------------------

### createPlotBand

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fcharts-introduction--docs

Configures an AxisPlotBandsOptions object with a specific color group, supporting both x-axis and y-axis configurations.

```APIDOC
## createPlotBand

### Description
Pre-configures an AxisPlotBandsOptions object for a given AtColorGroups. Automatically handles label rotation and spacing based on whether it is applied to an x-axis or y-axis.

### Parameters
- **options** (Omit<AxisPlotBandsOptions, "color" | "borderColor" | "borderWidth"> & { yAxis?: boolean }) - Required - Highcharts plot band options. Set yAxis to true if applying to a y-axis.
- **colorGroup** (AtColorsGroups) - Required - The design system color group to apply.

### Request Example
createPlotBand({ from: 2013, to: 2016, label: { text: "Green" }, yAxis: true }, AtColorsGroups.Green);
```

--------------------------------

### Apply Large Border Radius to Box

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-border-radius--docs

Use the `at-border-radius-large` class to apply a large border radius to a Box component. This can be used when a more pronounced rounded corner is needed.

```html
<Box class="at-border-radius-large">Box has default border radius</Box>
```

--------------------------------

### Meter Element

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-media--docs

HTML5 meter element representing a scalar measurement within a known range. Displays '2 out of 10'.

```html
<meter min="0" max="10" value="2">2 out of 10</meter>
```

--------------------------------

### Remove Specific Border Radius Sides

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-border-radius--docs

Use utility classes like `at-border-radius-none-end`, `at-border-radius-none-start`, `at-border-radius-none-top`, and `at-border-radius-none-bottom` to remove border radius from specific sides of an element.

```html
<Box class="at-border-radius-none-end">Box has default border radius</Box>
<Box class="at-border-radius-none-start">Box has default border radius</Box>
<Box class="at-border-radius-none-top">Box has default border radius</Box>
<Box class="at-border-radius-none-bottom">Box has default border radius</Box>
```

--------------------------------

### Create Plot Line with Custom Color

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fcharts-introduction--docs

Use `createPlotLine` to configure `AxisPlotLinesOptions` with predefined color groups. This function ensures adherence to the color palette and applies a specific dash style.

```javascript
import HighchartsReact from "highcharts-react-official";
import React from "react";
import HighchartsWithAtTheme from "wherever/you/choose/to/putIt";
import { createPlotLine } from "aptk-gui-lib/charts";

const ExampleLineCharColor = () => (
    <HighchartsReact
      highcharts={HighchartsWithAtTheme}
      options={{
        xAxis: {
          plotLines: [
            createPlotLine({
              value: 2015,
              label: {
                text: "Default color (grey)"
              }
            }),
            createPlotLine(
              {
                value: 2014,
                label: {
                  text: "Green color scheme"
                }
              },
              AtColorsGroups.Green
            )
          ]
        }
      }}
    />
);

```

--------------------------------

### Skeleton Pulse Animation CSS

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-animation--docs

This CSS class is used for creating a skeleton pulse animation effect. It's typically applied to elements that are loading content.

```css
.at-skeleton-pulse
```

--------------------------------

### Canvas Element

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-media--docs

HTML5 canvas element used for drawing graphics via JavaScript. Requires scripting to render content.

```html
<canvas id="myCanvas" width="200" height="100"></canvas>
```

--------------------------------

### Inline SVG Element

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-media--docs

Inline Scalable Vector Graphics (SVG) element for embedding vector images directly in HTML.

```html
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
```

--------------------------------

### Remove Border Radius

Source: https://storybook.apptweak.com/version/latest?path=%2Fdocs%2Fstyle-border-radius--docs

Utilize `at-border-radius-none` to remove all border radius from an element. This is helpful for creating sharp, unrounded corners.

```html
<Box class="at-border-radius-none">Box has default border radius</Box>
```
Tokens:
Raw