Fiddle: update kibalabs libraries

package.json

@@ -34,13 +34,13 @@
     "src/wrappers/*/styles.scss"
   ],
   "dependencies": {
-    "@kibalabs/core": "^0.7.2-next.5",
-    "@kibalabs/core-react": "^0.10.1-next.4",
+    "@kibalabs/core": "^0.7.2-next.7",
+    "@kibalabs/core-react": "^0.10.1-next.5",
     "lazysizes": "^5.3.2",
     "markdown-to-jsx": "^9.10.3"
   },
   "devDependencies": {
-    "@kibalabs/build": "0.14.1",
+    "@kibalabs/build": "0.14.2-next.10",
     "@storybook/addon-docs": "10.6.1",
     "@storybook/react-vite": "10.6.1",
     "@types/react": "19.3.0",

src/app/kibaApp.tsx

@@ -31,9 +31,7 @@ export function KibaApp(props: IKibaAppProps): React.ReactElement {
       window.lazySizes.cfg.minSize = 20;
     }
   });
-  // eslint-disable-next-line react/no-danger
   const extraGlobalCssStyle = props.extraGlobalCss ? <style dangerouslySetInnerHTML={{ __html: props.extraGlobalCss }} /> : null;
-  // eslint-disable-next-line react/no-danger
   const extraCssStyle = props.extraCss ? <style dangerouslySetInnerHTML={{ __html: props.extraCss }} /> : null;
   const mainViewStyle: React.CSSProperties = {
     minHeight: props.isFullPageApp ? '100%' : '100vh',

src/atoms/bulletList/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { BulletList } from '.';

src/atoms/bulletText/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { BulletText } from '.';
@@ -22,7 +20,7 @@ type Story = StoryObj<typeof BulletText>;
 
 export const Default: Story = {
   args: {
-    text: "I'm a bullet point",
+    text: 'I\'m a bullet point',
   },
 };
 

src/atoms/button/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from '.';

src/atoms/checkbox/component.tsx

@@ -27,7 +27,6 @@ export function Checkbox({
     }
   }, [isDisabled, propsOnToggled]);
   return (
-    // eslint-disable-next-line jsx-a11y/label-has-associated-control
     <label
       id={props.id}
       className={getClassName(Checkbox.displayName, props.className, props.isDisabled && 'disabled', props.isChecked && 'checked', ...(variant?.split('-') || []))}

src/atoms/collapsibleBox/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { CollapsibleBox, StatefulCollapsibleBox } from '.';

src/atoms/iconButton/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { IconButton } from '.';

src/atoms/inputWrapper/component.tsx

@@ -39,7 +39,6 @@ export function InputWrapper({
       className={getClassName(InputWrapper.displayName, className, props.messageText && 'message-showing', isFocussed && 'focus', !props.isEnabled && 'disabled', isFullWidth && 'full-width', ...(variant?.split('-') || []))}
       style={props.style}
     >
-      {/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/no-noninteractive-tabindex */}
       <div
         role={props.onClicked ? 'button' : undefined}
         tabIndex={props.onClicked ? 0 : undefined}
@@ -52,7 +51,6 @@ export function InputWrapper({
       >
         {props.children}
       </div>
-      {/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/no-noninteractive-tabindex */}
       <HidingView isHidden={!props.messageText}>
         <p
           id={props.id && `${props.id}-message`}

src/atoms/linkBase/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { LinkBase } from '.';

src/atoms/prettyText/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { PrettyText } from '.';

src/atoms/selectableView/component.tsx

@@ -1,4 +1,3 @@
-
 import React from 'react';
 
 import { getClassName } from '@kibalabs/core';

src/atoms/webView/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { WebView } from '.';

src/layouts/container/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Container } from '.';

src/layouts/equalGrid/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { EqualGrid } from '.';

src/layouts/grid/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Grid } from '.';

src/layouts/layerContainer/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { LayerContainer } from '.';

src/layouts/stack/component.tsx

@@ -60,8 +60,8 @@ interface IStackProps extends IMultiAnyChildProps, IPaddingViewPaddingProps {
   minHeightResponsive?: ResponsiveField<string>;
   minWidth?: string;
   minWidthResponsive?: ResponsiveField<string>;
-  paddingStart?: PaddingSizeProp,
-  paddingEnd?: PaddingSizeProp,
+  paddingStart?: PaddingSizeProp;
+  paddingEnd?: PaddingSizeProp;
   direction?: Direction;
   directionResponsive?: ResponsiveField<Direction>;
   childAlignment?: Alignment;

src/layouts/stack/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Stack } from '.';

src/model/alignment.ts

@@ -1,4 +1,3 @@
-
 // See https://webdesign.tutsplus.com/tutorials/a-comprehensive-guide-to-flexbox-alignment--cms-30183
 // to learn about alignment
 

src/model/direction.ts

@@ -1,4 +1,3 @@
-
 export enum Direction {
   Horizontal = 'horizontal',
   Vertical = 'vertical',

src/model/inputType.ts

@@ -1,9 +1,8 @@
-
 export enum InputType {
   Text = 'text',
   Url = 'url',
   Password = 'password',
   Email = 'email',
   Number = 'number',
-  PhoneNumber = 'tel'
+  PhoneNumber = 'tel',
 }

src/molecules/appDownloadButton/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { AppDownloadButton } from '.';

src/molecules/carousel/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Carousel } from '.';

src/molecules/inputFrame/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { InputFrame } from '.';

src/molecules/markdown/component.tsx

@@ -7,7 +7,7 @@ import { BulletList, BulletText, Link, PrettyText } from '../../atoms';
 import { Box, Media, TextAlignment } from '../../particles';
 import { getVariant } from '../../util';
 
-function MarkdownParagraph(props: React.AnchorHTMLAttributes<HTMLAnchorElement> & {isInline: boolean | undefined}): React.ReactElement {
+function MarkdownParagraph(props: React.AnchorHTMLAttributes<HTMLAnchorElement> & { isInline: boolean | undefined }): React.ReactElement {
   const childrenDisplayNames = React.Children.map(props.children, (child: React.ReactNode): string | null => (
     // @ts-expect-error: Property 'displayName' does not exist on type
     (child && typeof child === 'object' && 'type' in child) ? String(child.type.displayName).split('-')[0] : null

src/molecules/markdown/documentation.stories.tsx

@@ -1,4 +1,3 @@
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Markdown } from '.';
@@ -13,7 +12,7 @@ type Story = StoryObj<typeof Markdown>;
 
 export const Default: Story = {
   args: {
-    source: "This is an **example**\n\nIt's got [links](https://www.kibalabs.com)\n\n![cool image](https://upload.wikimedia.org/wikipedia/commons/5/50/Male_gorilla_in_SF_zoo.jpg)",
+    source: 'This is an **example**\n\nIt\'s got [links](https://www.kibalabs.com)\n\n![cool image](https://upload.wikimedia.org/wikipedia/commons/5/50/Male_gorilla_in_SF_zoo.jpg)',
   },
 };
 

src/molecules/markdownText/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MarkdownText } from '.';

src/molecules/multiLineInput/component.tsx

@@ -7,7 +7,7 @@ import { InputFrame } from '../inputFrame';
 import { IMoleculeProps } from '../moleculeProps';
 
 interface IMultiLineInputProps extends IMoleculeProps {
-  value: string| null;
+  value: string | null;
   isEnabled?: boolean;
   minRowCount?: number;
   maxRowCount?: number;

src/molecules/optionSelect/component.tsx

@@ -20,7 +20,7 @@ export interface IOption {
 interface IOptionSelectProps extends IMoleculeProps {
   options: IOption[];
   selectedItemKey?: string;
-  isDisabled?:boolean;
+  isDisabled?: boolean;
   closeIconId?: string;
   openIconId?: string;
   messageText?: string;
@@ -37,7 +37,7 @@ interface IOptionSelectProps extends IMoleculeProps {
 interface IOptionSelectContentProps {
   options: IOption[];
   selectedItemKey?: string;
-  isDisabled?:boolean;
+  isDisabled?: boolean;
   placeholderText?: string;
   optionListVariant?: string;
   optionTextVariant?: string;

src/molecules/singleLineInput/component.tsx

@@ -12,7 +12,8 @@ import { IMoleculeProps } from '../moleculeProps';
 const getAutocompleteType = (inputType: InputType): string | undefined => {
   if (inputType === InputType.Email) {
     return 'email';
-  } if (inputType === InputType.Url) {
+  }
+  if (inputType === InputType.Url) {
     return 'url';
   }
   return undefined;

src/particles/box/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Box } from '.';

src/particles/colors/documentation.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
 
-import { IColorGuide, buildColors } from '.';
-
 <Meta title='Particles/Colors' />
 
 # Colors

src/particles/dimensions/documentation.mdx

@@ -1,7 +1,5 @@
 import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
 
-import { IDimensionGuide, buildDimensions } from '.';
-
 <Meta title='Particles/Dimensions' />
 
 # Dimensions

src/particles/divider/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Divider } from '.';

src/particles/icon/component.tsx

@@ -30,7 +30,6 @@ export function Icon({
       id={props.id}
       className={getClassName(Icon.displayName, className, shouldAddFill && 'fill', shouldAddStroke && 'stroke', ...(variant?.split('-') || []))}
       style={iconStyles}
-      // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{ __html: props.svgContent }}
     />
   );

src/particles/icon/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Icon } from '.';

src/particles/image/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Image } from '.';

src/particles/kibaIcon/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { KibaIcon } from '.';

src/particles/loadingSpinner/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { LoadingSpinner } from '.';

src/particles/media/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Media } from '.';

src/particles/pill/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Pill } from '.';

src/particles/portal/component.tsx

@@ -15,7 +15,7 @@ export enum Placement {
   bottomRight = 'bottom-right',
   topLeft = 'top-left',
   topCenter = 'top-center',
-  topRight = 'top-right'
+  topRight = 'top-right',
 }
 
 export function getOffsetTop(rect: DOMRect, vertical: number | string): number {

src/particles/spacing/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Spacing } from '.';

src/particles/text/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Text } from '.';

src/wrappers/backgroundView/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { BackgroundView } from '.';

src/wrappers/colorSettingView/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { ColorSettingView } from '.';

src/wrappers/containingView/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { ContainingView } from '.';

src/wrappers/paddingView/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { PaddingView } from '.';

src/wrappers/responsiveContainingView/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { ResponsiveContainingView } from '.';

src/wrappers/responsiveHidingView/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { ResponsiveHidingView } from '.';

src/wrappers/responsiveTextAlignmentView/documentation.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { ResponsiveTextAlignmentView } from '.';