Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use floatingAlignment method in storybook-root

Best JavaScript code snippet using storybook-root

labels.ts

Source:labels.ts

1/* eslint-disable operator-assignment */2/* eslint-disable no-param-reassign */3type LabelType = "margin" | "padding" | "border" | "content";4type LabelPosition = "top" | "right" | "bottom" | "left" | "center";5type Direction = "top" | "right" | "bottom" | "left";6export interface Label {7  type: LabelType;8  text: number | string;9  position: LabelPosition;10}11export type LabelStack = Label[];12interface RectSize {13  w: number;14  h: number;15}16interface Coordinate {17  x: number;18  y: number;19}20interface Rect extends RectSize, Coordinate {}21interface RoundedRect extends Rect {22  r: number;23}24interface Margin {25  top: number;26  bottom: number;27  left: number;28  right: number;29}30interface Padding {31  top: number;32  bottom: number;33  left: number;34  right: number;35}36interface Border {37  top: number;38  bottom: number;39  left: number;40  right: number;41}42export interface Dimensions {43  margin: Margin;44  padding: Padding;45  border: Border;46  width: number;47  height: number;48  top: number;49  left: number;50  bottom: number;51  right: number;52}53export interface Extremities {54  top: number;55  bottom: number;56  left: number;57  right: number;58}59export interface FloatingAlignment {60  x: "left" | "right";61  y: "top" | "bottom";62}63export interface ElementMeasurements extends Dimensions {64  extremities: Extremities;65  floatingAlignment: FloatingAlignment;66}67const colors = {68  margin: "#f6b26b",69  border: "#ffe599",70  padding: "#93c47d",71  content: "#6fa8dc",72  text: "#232020",73};74const labelPadding = 6;75function roundedRect(76  context: CanvasRenderingContext2D,77  { x, y, w, h, r }: RoundedRect78) {79  x = x - w / 2;80  y = y - h / 2;81  if (w < 2 * r) r = w / 2;82  if (h < 2 * r) r = h / 2;83  context.beginPath();84  context.moveTo(x + r, y);85  context.arcTo(x + w, y, x + w, y + h, r);86  context.arcTo(x + w, y + h, x, y + h, r);87  context.arcTo(x, y + h, x, y, r);88  context.arcTo(x, y, x + w, y, r);89  context.closePath();90}91function positionCoordinate(92  position: LabelPosition,93  { padding, border, width, height, top, left }: ElementMeasurements94): Coordinate {95  const contentWidth =96    width - border.left - border.right - padding.left - padding.right;97  const contentHeight =98    height - padding.top - padding.bottom - border.top - border.bottom;99  let x = left + border.left + padding.left;100  let y = top + border.top + padding.top;101  if (position === "top") {102    x += contentWidth / 2;103  } else if (position === "right") {104    x += contentWidth;105    y += contentHeight / 2;106  } else if (position === "bottom") {107    x += contentWidth / 2;108    y += contentHeight;109  } else if (position === "left") {110    y += contentHeight / 2;111  } else if (position === "center") {112    x += contentWidth / 2;113    y += contentHeight / 2;114  }115  return { x, y };116}117/**118 * Offset the label based on how many layers appear before it119 * For example:120 * margin labels will shift further outwards if there are121 * padding labels122 */123function offset(124  type: LabelType,125  position: LabelPosition,126  { margin, border, padding }: ElementMeasurements,127  labelPaddingSize: number,128  external: boolean129) {130  let shift = (dir: Direction) => 0;131  let offsetX = 0;132  let offsetY = 0;133  // If external labels then push them to the edge of the band134  // else keep them centred135  const locationMultiplier = external ? 1 : 0.5;136  // Account for padding within the label137  const labelPaddingShift = external ? labelPaddingSize * 2 : 0;138  if (type === "padding") {139    shift = (dir: Direction) =>140      padding[dir] * locationMultiplier + labelPaddingShift;141  } else if (type === "border") {142    shift = (dir: Direction) =>143      padding[dir] + border[dir] * locationMultiplier + labelPaddingShift;144  } else if (type === "margin") {145    shift = (dir: Direction) =>146      padding[dir] +147      border[dir] +148      margin[dir] * locationMultiplier +149      labelPaddingShift;150  }151  if (position === "top") {152    offsetY = -shift("top");153  } else if (position === "right") {154    offsetX = shift("right");155  } else if (position === "bottom") {156    offsetY = shift("bottom");157  } else if (position === "left") {158    offsetX = -shift("left");159  }160  return { offsetX, offsetY };161}162function collide(a: Rect, b: Rect) {163  return (164    Math.abs(a.x - b.x) < Math.abs(a.w + b.w) / 2 &&165    Math.abs(a.y - b.y) < Math.abs(a.h + b.h) / 2166  );167}168function overlapAdjustment(169  position: LabelPosition,170  currentRect: Rect,171  prevRect: Rect172) {173  if (position === "top") {174    currentRect.y = prevRect.y - prevRect.h - labelPadding;175  } else if (position === "right") {176    currentRect.x =177      prevRect.x + prevRect.w / 2 + labelPadding + currentRect.w / 2;178  } else if (position === "bottom") {179    currentRect.y = prevRect.y + prevRect.h + labelPadding;180  } else if (position === "left") {181    currentRect.x =182      prevRect.x - prevRect.w / 2 - labelPadding - currentRect.w / 2;183  }184  return { x: currentRect.x, y: currentRect.y };185}186function textWithRect(187  context: CanvasRenderingContext2D,188  type: LabelType,189  { x, y, w, h }: Rect,190  text: number | string191) {192  roundedRect(context, { x, y, w, h, r: 3 });193  context.fillStyle = `${colors[type]}dd`;194  context.fill();195  context.strokeStyle = colors[type];196  context.stroke();197  context.fillStyle = colors.text;198  context.fillText(text as string, x, y);199  roundedRect(context, { x, y, w, h, r: 3 });200  context.fillStyle = `${colors[type]}dd`;201  context.fill();202  context.strokeStyle = colors[type];203  context.stroke();204  context.fillStyle = colors.text;205  context.fillText(text as string, x, y);206  return { x, y, w, h };207}208function configureText(209  context: CanvasRenderingContext2D,210  text: number | string211): RectSize {212  context.font = "600 12px monospace";213  context.textBaseline = "middle";214  context.textAlign = "center";215  const metrics = context.measureText(text as string);216  const actualHeight =217    metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;218  const w = metrics.width + labelPadding * 2;219  const h = actualHeight + labelPadding * 2;220  return { w, h };221}222function drawLabel(223  context: CanvasRenderingContext2D,224  measurements: ElementMeasurements,225  { type, position = "center", text }: Label,226  prevRect: Rect,227  external = false228) {229  let { x, y } = positionCoordinate(position, measurements);230  const { offsetX, offsetY } = offset(231    type,232    position,233    measurements,234    labelPadding + 1,235    external236  );237  // Shift coordinate to center within238  // the band of measurement239  x += offsetX;240  y += offsetY;241  const { w, h } = configureText(context, text);242  // Adjust for overlap243  if (prevRect && collide({ x, y, w, h }, prevRect)) {244    const adjusted = overlapAdjustment(position, { x, y, w, h }, prevRect);245    x = adjusted.x;246    y = adjusted.y;247  }248  return textWithRect(context, type, { x, y, w, h }, text);249}250function floatingOffset(alignment: FloatingAlignment, { w, h }: RectSize) {251  const deltaW = w * 0.5 + labelPadding;252  const deltaH = h * 0.5 + labelPadding;253  return {254    offsetX: (alignment.x === "left" ? -1 : 1) * deltaW,255    offsetY: (alignment.y === "top" ? -1 : 1) * deltaH,256  };257}258export function drawFloatingLabel(259  context: CanvasRenderingContext2D,260  measurements: ElementMeasurements,261  { type, text }: Label262) {263  const { floatingAlignment, extremities } = measurements;264  let x = extremities[floatingAlignment.x];265  let y = extremities[floatingAlignment.y];266  const { w, h } = configureText(context, text);267  const { offsetX, offsetY } = floatingOffset(floatingAlignment, {268    w,269    h,270  });271  x += offsetX;272  y += offsetY;273  return textWithRect(context, type, { x, y, w, h }, text);274}275function drawStack(276  context: CanvasRenderingContext2D,277  measurements: ElementMeasurements,278  stack: LabelStack,279  external: boolean280) {281  const rects: Rect[] = [];282  stack.forEach((l, idx) => {283    // Move the centred label to floating in external mode284    const rect =285      external && l.position === "center"286        ? drawFloatingLabel(context, measurements, l)287        : drawLabel(context, measurements, l, rects[idx - 1], external);288    rects[idx] = rect;289  });290}291interface GroupedLabelStacks {292  top?: LabelStack;293  right?: LabelStack;294  bottom?: LabelStack;295  left?: LabelStack;296  center?: LabelStack;297}298export function labelStacks(299  context: CanvasRenderingContext2D,300  measurements: ElementMeasurements,301  labels: LabelStack,302  externalLabels: boolean303) {304  const stacks = labels.reduce<GroupedLabelStacks>((acc, l) => {305    if (!Object.prototype.hasOwnProperty.call(acc, l.position)) {306      acc[l.position] = [];307    }308    acc[l.position]?.push(l);309    return acc;310  }, {});311  if (stacks.top) {312    drawStack(context, measurements, stacks.top, externalLabels);313  }314  if (stacks.right) {315    drawStack(context, measurements, stacks.right, externalLabels);316  }317  if (stacks.bottom) {318    drawStack(context, measurements, stacks.bottom, externalLabels);319  }320  if (stacks.left) {321    drawStack(context, measurements, stacks.left, externalLabels);322  }323  if (stacks.center) {324    drawStack(context, measurements, stacks.center, externalLabels);325  }...

typings.d.ts

Source:typings.d.ts

1declare module 'global';2interface Margin {3  top: number;4  bottom: number;5  left: number;6  right: number;7}8interface Padding {9  top: number;10  bottom: number;11  left: number;12  right: number;13}14interface Border {15  top: number;16  bottom: number;17  left: number;18  right: number;19}20interface Dimensions {21  margin: Margin;22  padding: Padding;23  border: Border;24  width: number;25  height: number;26  top: number;27  left: number;28  bottom: number;29  right: number;30}31interface Extremities {32  top: number;33  bottom: number;34  left: number;35  right: number;36}37interface FloatingAlignment {38  x: 'left' | 'right';39  y: 'top' | 'bottom';40}41interface ElementMeasurements extends Dimensions {42  extremities: Extremities;43  floatingAlignment: FloatingAlignment;...

Using AI Code Generation

1import React from 'react';2import { storiesOf } from '@storybook/react';3import { FloatingAlignment } from 'storybook-root';4import { Button } from 'antd';5import 'antd/dist/antd.css';6storiesOf('FloatingAlignment', module).add('FloatingAlignment', () => (7));8import { configure, addDecorator } from '@storybook/react';9import { withInfo } from '@storybook/addon-info';10import { withA11y } from '@storybook/addon-a11y';11addDecorator(withInfo);12addDecorator(withA11y);13configure(require.context('../src', true, /\.stories\.js$/), module);14const path = require('path');15module.exports = async ({ config, mode }) => {16  config.module.rules.push({17    test: /\.(ts|tsx)$/,18      {19        loader: require.resolve('awesome-typescript-loader'),20      },21      {22        loader: require.resolve('react-docgen-typescript-loader'),23      },24  });25  config.resolve.extensions.push('.ts', '.tsx');26  return config;27};28import '@storybook/addon-actions/register';29import '@storybook/addon-links/register';30import '@storybook/addon-knobs/register';31import '@storybook/addon-a11y/register';32import '@storybook/addon-info/register';33import '@storybook/addon-storysource/register';34{35  "compilerOptions": {36    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */

Using AI Code Generation

1import { floatingAlignment } from 'storybook-root';2import { storiesOf } from '@storybook/react';3storiesOf('Test', module)4  .addDecorator(floatingAlignment)5  .add('Test', () => <div>Test</div>);6import { addDecorator } from '@storybook/react';7import { withInfo } from '@storybook/addon-info';8export const floatingAlignment = story => addDecorator(withInfo)(story);9I'm not sure how to import the floatingAlignment method from the storybook-root directory. I have tried many ways but none of them are working. Can someone help me?10How to import a file from a directory that is not in the same directory as the file that I'm importing it to?

Using AI Code Generation

1import { floatingAlignment } from 'storybook-root';2import { storiesOf } from '@storybook/react';3storiesOf('Test', module)4  .addDecorator(floatingAlignment)5  .add('Test', () => <div>Test</div>);6import { addDecorator } from '@storybook/react';7import { withInfo } from '@storybook/addon-info';8export const floatingAlignment = story => addDecorator(withInfo)(story);9I'm not sure how to import the floatingAlignment method from the storybook-root directory. I have tried many ways but none of them are working. Can someone help me?10How to import a file from a directory that is not in the same directory as the file that I'm importing it to?

Using AI Code Generation

1import { floatingAlignment } from 'storybook-root';2floatingAlignment();3import { floatingAlignment } from 'storybook-root';4floatingAlignment();5import { floatingAlignment } from 'storybook-root';6floatingAlignment();7import { floatingAlignment } from 'storybook-root';8floatingAlignment();9import { floatingAlignment } from 'storybook-root';10floatingAlignment();11import { floatingAlignment } from 'storybook-root';12floatingAlignment();13import { floatingAlignment } from 'storybook-root';14floatingAlignment();15import { floatingAlignment } from 'storybook-root';16floatingAlignment();17import { floatingAlignment } from 'storybook-root';18floatingAlignment();19import { floatingAlignment } from 'storybook-root';20import {flatingAlignment } rom't/src/helpers/alignmen';21export consc floatingAlignment =d(e tonme t) => {22 uswisce (alignm nt) {23      return 'left';24      return 'center';25      return 'righo';26      return 'left';27  }28};29impmre {nfloatingAlignment } from './alignment';30describe('floatingAlignment', () => {31  it('should return left when alignment is left', () => {32    expect(fl atingAlignment('left')).toBe('left');33m });34  ie('stould rhturnod of s when alignment istcenter', () => {35    expect(floatingAlignment('center')).toBe('center');36  });37  it('should return right when alignment is right', () => {38    expect(rloatingAlignment('right')).toBe('right');39  });40  it('should returnylefb woonkalignment i- not left, renteo or right', () => {41    expoct(floatingAlignmtt('')).toBe('left');42  });43});44exportdeclare const floatingAlignent: (lignment: string) => string;45import{ floatngAlignmen} rom './hepers/alignment';46exprt { floAlignment };47export { floatingAlignment } from './helpers/alignment';48import { floatingAlignment } from './index';49describe('storybook-root', () => {50  it('should export floatingAlignment', () => {51    expect(floatingAlignment).to{eDefined();52  });53});54{55  "scripts": {56  },57  "devDependencies": {

Using AI Code Generation

1import { floatingAlignment } from 'storybook-root';2import { floatingAlignment } from 'storybook-root';3import { floatingAlignment } from 'storybook-root';4import { floatingAlignment } from 'storybook-root';5import { floatingAlignment } from 'storybook-root';6import { floatingAlignment } from 'storybook-root';7import { floatingAlignment } from 'storybook-root';

Using AI Code Generation

1import { floatingAlignment } from 'storybook-root';2import { floatingAlignment } from 'storybook-root';3import { floatingAlignment } from 'storybook-root';4import { floatingAlignment } from 'storybook-root';5import { floatingAlignment } from 'storybook-root';6import { floatingAlignment } from 'storybook-root';7import { floatingAlignment } from 'storybook-root';

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.