@digigov/ui 2.0.0-daaf7bdf → 2.0.0-eaf330f5

package/src/typography/Code/index.tsx

@@ -1,4 +1,4 @@
 export * from '@digigov/react-core/Code';
 
 import Code from '@digigov/react-core/Code';
-export default Code;
+export default Code;

package/src/typography/CodeBlock/doc.mdx

@@ -0,0 +1,30 @@
+---
+id: code-block
+title: CodeBlock
+---
+
+# CodeBlock
+
+Use the CodeBlock component to display code.
+
+## How to use
+
+<code src="@digigov/ui/typography/CodeBlock/__stories__/Default.tsx" />
+
+### Highlighted
+
+<code src="@digigov/ui/typography/CodeBlock/__stories__/Highlighted.tsx" />
+
+### With copy to clipboard
+
+<code src="@digigov/ui/typography/CodeBlock/__stories__/WithCopyToClipboard.tsx" />
+
+### With phase banner
+
+<code src="@digigov/ui/typography/CodeBlock/__stories__/WithPhaseBanner.tsx" />
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps componentName={["CodeBlock", "CodeBlockContainer", "CodeBlockContent", "CodeBlockHeader"]} /> 

package/src/typography/CodeBlock/index.test.tsx

@@ -26,6 +26,10 @@ test('renders the All CodeBlock variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/typography/CodeBlock/index.tsx

@@ -45,17 +45,19 @@ const addLineNumbers = (code: string, highlightLines: number[]): string => {
 };
 
 export const CodeBlock: React.FC<CodeBlockProps> = React.forwardRef(
-  function CodeBlock({
-    children,
-    language,
-    copyToClipboard,
-    highlighted,
-    showLineNumbers,
-    phaseBannerTagName,
-    highlightLines,
-    ref,
-    ...props
-  }) {
+  function CodeBlock(
+    {
+      children,
+      language,
+      copyToClipboard,
+      highlighted,
+      showLineNumbers,
+      phaseBannerTagName,
+      highlightLines,
+      ...props
+    },
+    ref
+  ) {
     const Tag = 'span';
     const codeString = typeof children === 'string' ? children : '';
     let displayingCode = codeString;

package/src/typography/Heading/{index.mdx → doc.mdx}

@@ -3,13 +3,11 @@ id: heading
 title: Heading
 ---
 
+# Heading
+
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Heading"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/typography/Heading/__stories__/Default.tsx" />
 
 ## API
 

package/src/typography/Heading/index.test.tsx

@@ -14,6 +14,10 @@ test('renders the All Heading variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/typography/HeadingCaption/{index.mdx → doc.mdx}

@@ -3,16 +3,16 @@ id: heading-caption
 title: HeadingCaption
 ---
 
+# HeadingCaption
+
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/HeadingCaption"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/typography/HeadingCaption/__stories__/Default.tsx" />
 
 ### Nested caption to title
 
+<code src="@digigov/ui/typography/HeadingCaption/__stories__/NestedToTitle.tsx" />
+
 ## API
 
 See below for a complete reference to all of the props  available to the components mentioned here.

package/src/typography/HeadingCaption/index.test.tsx

@@ -18,6 +18,10 @@ test('renders the All HeadingCaption variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/typography/Hint/{index.mdx → doc.mdx}

@@ -3,21 +3,15 @@ id: hint
 title: Hint
 ---
 
+# Hint
+
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Hint"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/typography/Hint/__stories__/Default.tsx" />
 
 ### Font sizes
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Hint"
-  story="FontSizes.tsx"
-/>
+<code src="@digigov/ui/typography/NormalText/__stories__/FontSizes.tsx" />
 
 ## API
 

package/src/typography/Hint/index.test.tsx

@@ -18,6 +18,10 @@ test('renders the All Hint variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/typography/NormalText/doc.mdx

@@ -0,0 +1,30 @@
+---
+id: normal-text
+title: NormalText
+---
+
+# NormalText
+
+## How to use
+
+<code src="@digigov/ui/typography/NormalText/__stories__/Default.tsx" />
+
+### Variants
+
+<code src="@digigov/ui/typography/NormalText/__stories__/Variants.tsx" />
+
+## Font override classes
+
+### Font size
+
+<code src="@digigov/ui/typography/NormalText/__stories__/FontSizes.tsx" />
+
+### Font weight
+
+<code src="@digigov/ui/typography/NormalText/__stories__/FontWeight.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["NormalText"]} /> 

package/src/typography/NormalText/index.test.tsx

@@ -26,6 +26,10 @@ test('renders the All NormalText variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/typography/Paragraph/doc.mdx

@@ -0,0 +1,34 @@
+---
+id: paragraph
+title: Paragraph
+---
+
+# Paragraph
+
+## How to use
+
+<code src="@digigov/ui/typography/Paragraph/__stories__/Default.tsx" />
+
+### Lead paragraph
+
+<code src="@digigov/ui/typography/Paragraph/__stories__/LeadVariant.tsx" />
+
+### Small paragraph
+
+<code src="@digigov/ui/typography/Paragraph/__stories__/SmallVariant.tsx" />
+
+## Font override classes
+
+### Font size
+
+<code src="@digigov/ui/typography/Paragraph/__stories__/FontSizes.tsx" />
+
+### Font weight
+
+<code src="@digigov/ui/typography/Paragraph/__stories__/FontWeight.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Paragraph"]} /> 

package/src/typography/Paragraph/index.test.tsx

@@ -30,6 +30,10 @@ test('renders the All Paragraph variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/typography/Typography/doc.mdx

@@ -0,0 +1,14 @@
+---
+id: typography
+title: Typography
+---
+
+# Typography
+
+Typography component is a HOC (Higher-Order Component) for typography components such as `NormalText` component.
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Typography"]} /> 

package/src/typography/Typography/index.tsx

@@ -1,4 +1,4 @@
 import Typography from '@digigov/react-core/Typography';
 
 export * from '@digigov/react-core/Typography';
-export default Typography;
+export default Typography;

package/src/utils/Base/doc.mdx

@@ -0,0 +1,66 @@
+---
+id: base
+title: Base
+---
+
+# Base
+
+Base component is the `parent` component from which all `digigov` components inherit
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+The type `SpacingValues` is used to define the spacing values in the `Base` component. It is a union type that includes various numeric values representing spacing units.
+
+```
+export type SpacingValues =
+  | 0
+  | 0.5
+  | 1
+  | 1.5
+  | 2
+  | 2.5
+  | 3
+  | 3.5
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 14
+  | 16
+  | 20
+  | 24
+  | 28
+  | 32
+  | 36
+  | 40
+  | 44
+  | 48
+  | 52
+  | 56
+  | 60
+  | 64
+  | 72
+  | 80
+  | 96;
+```
+
+The interface `SpacingMediaValues` use the `SpacingValues` type to define the spacing values for different media queries.
+
+```
+export interface SpacingMediaValues {
+  xs?: SpacingValues;
+  sm?: SpacingValues;
+  md?: SpacingValues;
+  lg?: SpacingValues;
+  xl?: SpacingValues;
+}
+```
+
+<ComponentProps componentName={['Base']} />{' '}

package/src/utils/VisuallyHidden/{index.mdx → doc.mdx}

@@ -3,6 +3,8 @@ id: visually-hidden
 title: VisuallyHidden
 ---
 
+# VisuallyHidden
+
 Use this component to convey meaning to people using screen readers, helping
 them access information and context.
 
@@ -10,12 +12,7 @@ VisuallyHidden is a web accessibility technique used to hide content from the vi
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="utils/VisuallyHidden"
-  story="Default.tsx"
-/>
-
+<code src="@digigov/ui/utils/VisuallyHidden/__stories__/Default.tsx" />
 
 ## API
 

package/src/utils/VisuallyHidden/index.test.tsx

@@ -14,6 +14,10 @@ test('renders the All VisuallyHidden variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/utils/hooks/useDebounce.ts

@@ -12,7 +12,7 @@ export const useDebounceCallback = <CallbackArgs extends any[]>(
   // Cleans up pending timeouts when the deps change
   React.useEffect(
     () => () => {
-      timeout.current && clearTimeout(timeout.current);
+      if (timeout.current) clearTimeout(timeout.current);
       timeout.current = void 0;
     },
     deps
@@ -27,11 +27,11 @@ export const useDebounceCallback = <CallbackArgs extends any[]>(
       timeout.current = setTimeout(() => {
         timeout.current = void 0;
       }, wait);
-      // eslint-disable-next-line prefer-spread
+
       return storedCallback.current.apply(null, args as any);
     }
     // Clear the timeout every call and start waiting again
-    current && clearTimeout(current);
+    if (current) clearTimeout(current);
     // Waits for `wait` before invoking the callback
     timeout.current = setTimeout(() => {
       timeout.current = void 0;
@@ -40,7 +40,7 @@ export const useDebounceCallback = <CallbackArgs extends any[]>(
   }, deps);
 };
 
-export const useDebounce = <State extends any>(
+export const useDebounce = <State>(
   initialState: State | (() => State),
   wait?: number,
   leading?: boolean

package/src/utils/hooks/useLatest.ts

@@ -1,7 +1,7 @@
 // copied from https://github.com/jaredLunde/react-hook/blob/master/packages/latest/src/index.tsx
 import * as React from 'react';
 
-const useLatest = <T extends any>(current: T) => {
+const useLatest = <T>(current: T) => {
   const storedValue = React.useRef(current);
   React.useEffect(() => {
     storedValue.current = current;

package/src/utils/hooks/useScreen.native.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+import { useWindowDimensions } from 'react-native';
+import breakpoints from '@digigov/css/screens.json';
+
+export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export const breakpointKeys: Breakpoints[] = Object.keys(
+  breakpoints
+) as Breakpoints[];
+export const breakpointValues = Object.values(breakpoints) as number[];
+
+function resolveScreenSize(width: number): Breakpoints {
+  let breakpointIndex = 0;
+  for (const breakpoint of breakpointValues) {
+    if (width >= breakpoint && width < breakpointValues[breakpointIndex + 1]) {
+      return breakpointKeys[breakpointIndex];
+    }
+    breakpointIndex++;
+  }
+  return 'xl';
+}
+
+export const useScreenSize = () => {
+  const { width } = useWindowDimensions();
+  const [screenSize, setScreenSize] = useState<Breakpoints>(
+    resolveScreenSize(width)
+  );
+
+  useEffect(() => {
+    setScreenSize(resolveScreenSize(width));
+  }, [width]);
+
+  return { screenSize, screenWidth: width };
+};
+
+export default useScreenSize;

package/src/utils/hooks/useScreen.ts

@@ -1,45 +1,2 @@
-import { useEffect, useState } from "react";
-import breakpoints from '@digigov/css/screens.json'
-export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export const breakpointKeys: Breakpoints[] = Object.keys(breakpoints) as Breakpoints[];
-export const breakpointValues = Object.values(breakpoints) as number[];
-
-function resolveScreenSize(width: number): Breakpoints {
-  let breakpointIndex = 0
-  for (const breakpoint of breakpointValues) {
-    if (width > breakpoint && width < breakpointValues[breakpointIndex + 1]) {
-      return breakpointKeys[breakpointIndex]
-    }
-    breakpointIndex++
-  }
-  return 'xl'
-}
-
-const listeners = new Set<Function>()
-let resizeObserver: ResizeObserver | null = null
-function createResizeObserver() {
-  if (resizeObserver === null && typeof window !== 'undefined') {
-    resizeObserver = new ResizeObserver(([body]) => {
-      listeners.forEach((listener) => {
-        listener(body.contentRect.width)
-      })
-    })
-    resizeObserver.observe(window.document?.body);
-  }
-  return listeners
-
-}
-export const useScreenSize = () => {
-  const [screenSize, setSize] = useState<Breakpoints>(resolveScreenSize(typeof window !== 'undefined' ? window.document.body.clientWidth : 0))
-  useEffect(() => {
-    const listeners = createResizeObserver()
-    const listener = (width: number) => {
-      setSize(resolveScreenSize(width))
-    }
-    listeners.add(listener)
-    return () => {
-      listeners.delete(listener)
-    }
-  }, [])
-  return { screenSize, screenWidth: typeof window !== 'undefined' && window.document.body.clientWidth }
-}
+export * from '@digigov/ui/utils/hooks/useScreen.web';
+export { default as default } from '@digigov/ui/utils/hooks/useScreen.web';

package/src/utils/hooks/useScreen.web.ts

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import breakpoints from '@digigov/css/screens.json';
+export type Breakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export const breakpointKeys: Breakpoints[] = Object.keys(
+  breakpoints
+) as Breakpoints[];
+export const breakpointValues = Object.values(breakpoints) as number[];
+
+function resolveScreenSize(width: number): Breakpoints {
+  let breakpointIndex = 0;
+  for (const breakpoint of breakpointValues) {
+    if (width >= breakpoint && width < breakpointValues[breakpointIndex + 1]) {
+      return breakpointKeys[breakpointIndex];
+    }
+    breakpointIndex++;
+  }
+  return 'xl';
+}
+
+const listeners = new Set<(width: number) => void>();
+let resizeObserver: ResizeObserver | null = null;
+function createResizeObserver() {
+  if (resizeObserver === null && typeof window !== 'undefined') {
+    resizeObserver = new ResizeObserver(([body]) => {
+      listeners.forEach((listener) => {
+        listener(body.contentRect.width);
+      });
+    });
+    resizeObserver.observe(window.document?.body);
+  }
+  return listeners;
+}
+export const useScreenSize = () => {
+  const [screenSize, setSize] = useState<Breakpoints>(
+    resolveScreenSize(
+      typeof window !== 'undefined' ? window.document.body.clientWidth : 0
+    )
+  );
+  useEffect(() => {
+    const listeners = createResizeObserver();
+    const listener = (width: number) => {
+      setSize(resolveScreenSize(width));
+    };
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  }, []);
+  return {
+    screenSize,
+    screenWidth:
+      typeof window !== 'undefined' && window.document.body.clientWidth,
+  };
+};
+
+export default useScreenSize;

package/src/utils/hooks/useSearch.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-types */
 import { useMemo } from 'react';
 
 export function normalizeGreek(text) {
@@ -14,7 +13,7 @@ export function normalizeGreek(text) {
   return text;
 }
 
-export function fullTextSearch(data: Object, search: string): boolean {
+export function fullTextSearch(data: object, search: string): boolean {
   if (!search) {
     return true;
   }
@@ -35,7 +34,7 @@ export function fullTextSearch(data: Object, search: string): boolean {
   ).includes(q);
 }
 
-export function useSearch(data: Array<Object>, query?: string) {
+export function useSearch(data: object[], query?: string) {
   return useMemo(() => {
     if (!query) return data;
     return data.filter((t) => fullTextSearch(t, query));

package/src/utils/index.ts

@@ -1,3 +1,2 @@
 export * from '@digigov/ui/utils/Base';
-export * from '@digigov/ui/utils/SvgIcon';
 export * from '@digigov/ui/utils/VisuallyHidden';

package/typography/Code/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/typography/Code/index.tsx"],
-  "sourcesContent": ["export * from '@digigov/react-core/Code';\n\nimport Code from '@digigov/react-core/Code';\nexport default Code;"],
+  "sourcesContent": ["export * from '@digigov/react-core/Code';\n\nimport Code from '@digigov/react-core/Code';\nexport default Code;\n"],
   "mappings": "AAAA,cAAc;AAEd,OAAO,UAAU;AACjB,IAAO,eAAQ;",
   "names": []
 }

package/typography/CodeBlock/index.js

@@ -36,9 +36,8 @@ const CodeBlock = React.forwardRef(
     showLineNumbers,
     phaseBannerTagName,
     highlightLines,
-    ref,
     ...props
-  }) {
+  }, ref) {
     const Tag = "span";
     const codeString = typeof children === "string" ? children : "";
     let displayingCode = codeString;