How to use floatingAlignment method in storybook-root

Best JavaScript code snippet using storybook-root

labels.ts

Source:labels.ts Github

copy

Full Screen

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 }...

Full Screen

Full Screen

typings.d.ts

Source:typings.d.ts Github

copy

Full Screen

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;...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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'. */

Full Screen

Using AI Code Generation

copy

Full Screen

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?

Full Screen

Using AI Code Generation

copy

Full Screen

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?

Full Screen

Using AI Code Generation

copy

Full Screen

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": {

Full Screen

Using AI Code Generation

copy

Full Screen

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';

Full Screen

Using AI Code Generation

copy

Full Screen

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';

Full Screen

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.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run storybook-root automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful