@veeqo/ui 0.0.4 → 0.0.6

package/src/theme/storybook/ShadowDocs.mdx

@@ -1,37 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-import { Stack } from '../../components';
-import { theme } from '../';
-
-<Meta title="Theme/Shadows" parameters={{ previewTabs: { canvas: { hidden: true } } }} />
-
-# Shadows
-
-## Usage
-
-```jsx
-import { theme } from '@veeqo/components';
-
-...
-  boxShadow: theme.shadows.base;
-...
-```
-
-## Values
-
-<Stack direction="horizontal" spacing="xxl">
-  {Object.keys(theme.shadows).map((value) => (
-    <Stack key={value}>
-      <span style={{ fontWeight: 'bold' }}>{value}</span>
-      <div
-        style={{
-          boxShadow: theme.shadows[value],
-          borderRadius: theme.radius.base,
-          backgroundColor: theme.colors.neutral.grey.light,
-          width: '32px',
-          height: '32px',
-        }}
-      />
-    </Stack>
-  ))}
-</Stack>

package/src/theme/storybook/SizesDocs.mdx

@@ -1,104 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-import { colors } from '../modules/colors';
-import { sizes, sizeScale, sizeAliases } from '../modules/sizes';
-
-import { Stack } from '../../components';
-import { theme } from '../';
-
-<Meta title="Theme/Sizes" parameters={{ previewTabs: { canvas: { hidden: true } } }} />
-
-# Sizes
-
-## Usage
-
-```jsx
-import { theme } from '@veeqo/components';
-
-theme.sizes.base; // alias
-theme.sizes[4]; // scale value
-```
-
-## Aliases
-
-<Stack direction="horizontal" alignY="end">
-  <Stack alignX="center" spacing="sm">
-    <span style={{ fontWeight: 'bold' }}>Scale</span>
-    <span>Value</span>
-    <span>Alias</span>
-  </Stack>
-  {Object.keys(sizeAliases).map((size) => {
-    return (
-      <Stack alignX="center" spacing="sm" key={size}>
-        <div
-          style={{
-            width: sizes[size],
-            height: sizes[size],
-            backgroundColor: colors.neutral.ink.lightest,
-          }}
-        />
-        <span style={{ fontWeight: 'bold' }}>{size}</span>
-        <span>{sizes[size]}</span>
-      </Stack>
-    );
-  })}
-</Stack>
-
-## Scale values
-
-<Stack direction="horizontal" alignY="start">
-  <Stack direction="vertical">
-    <Stack direction="horizontal" alignY="end">
-      <Stack alignX="center" spacing="sm">
-        <span style={{ fontWeight: 'bold' }}>Scale</span>
-        <span>Value</span>
-        <span>Alias</span>
-      </Stack>
-
-      {Object.keys(sizeScale)
-        .slice(0, 10)
-        .map((size, index) => (
-          <>
-            <Stack alignX="center" spacing="sm" key={size}>
-              <div
-                style={{
-                  width: sizes[size],
-                  height: sizes[size],
-                  backgroundColor: colors.neutral.ink.lightest,
-                }}
-              />
-              <span style={{ fontWeight: 'bold' }}>{size}</span>
-              <span>{sizes[size]}</span>
-            </Stack>
-          </>
-        ))}
-    </Stack>
-
-  <Stack direction="horizontal" alignY="end">
-    <Stack alignX="center" spacing="sm">
-      <span style={{ fontWeight: 'bold' }}>Scale</span>
-      <span>Value</span>
-      <span>Alias</span>
-    </Stack>
-
-    {Object.keys(sizeScale)
-      .slice(10)
-      .map((size, index) => (
-        <>
-          <Stack alignX="center" spacing="sm" key={size}>
-            <div
-              style={{
-                width: sizes[size],
-                height: sizes[size],
-                backgroundColor: colors.neutral.ink.lightest,
-              }}
-            />
-            <span style={{ fontWeight: 'bold' }}>{size}</span>
-            <span>{sizes[size]}</span>
-          </Stack>
-        </>
-      ))}
-    </Stack>
-
-  </Stack>
-</Stack>

package/src/theme/storybook/components.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { theme } from '..';
-
-export const Swatch = ({ color }: any) => (
-  <div
-    style={{ backgroundColor: color, padding: theme.sizes.base, borderRadius: theme.radius.base }}
-  >
-    <span
-      style={{
-        fontWeight: 'bold',
-        backgroundColor: 'rgba(255,255,255,0.5)',
-        padding: theme.sizes.line,
-        borderRadius: theme.radius.base,
-      }}
-    >
-      {color}
-    </span>
-  </div>
-);

package/src/utils/buildClassnames.ts

@@ -1,2 +0,0 @@
-export const buildClassnames = (names: (string | undefined)[]): string =>
-  names.filter(Boolean).join(' ');

package/src/utils/color.ts

@@ -1,27 +0,0 @@
-/**
- * A function to convert hex color to rgb.
- */
-export const hexToRgb = (hex: string) => {
-  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  const hexTmp = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
-
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexTmp);
-  return result
-    ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
-      }
-    : null;
-};
-
-/**
- * A function to get a hex color with opacity, after converting to `rgba`.
- * @param hex color in hex format
- */
-export const getOpaqueHexColor = (hex: string, opacity: number) => {
-  const rgb = hexToRgb(hex);
-  if (!rgb) return hex;
-
-  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
-};

package/src/utils/generateId.ts

@@ -1,4 +0,0 @@
-export const generateId = (prefix: string): string => {
-  const randomNumber = Math.floor(Math.random() * 1000);
-  return `${prefix}-${randomNumber}`;
-};

package/src/utils/paginationList.ts

@@ -1,6 +0,0 @@
-export const paginationDefaultRangeList = [
-  { label: '10 / page', value: 10 },
-  { label: '25 / page', value: 25 },
-  { label: '50 / page', value: 50 },
-  { label: '100 / page', value: 100 },
-];

package/src/utils/setupIntersectionObserverMock.ts

@@ -1,46 +0,0 @@
-/**
- * https://stackoverflow.com/a/58651649
- *
- * Utility function that mocks the `IntersectionObserver` API. Necessary for components that rely
- * on it, otherwise the tests will crash. Recommended to execute inside `beforeEach`.
- * @param intersectionObserverMock - Parameter that is sent to the `Object.defineProperty`
- * overwrite method. `jest.fn()` mock functions can be passed here if the goal is to not only
- * mock the intersection observer, but its methods.
- */
-export function setupIntersectionObserverMock({
-  root = null,
-  rootMargin = '',
-  thresholds = [],
-  disconnect = () => null,
-  observe = () => null,
-  takeRecords = () => [],
-  unobserve = () => null,
-} = {}): void {
-  class MockIntersectionObserver implements IntersectionObserver {
-    readonly root: Element | null = root;
-
-    readonly rootMargin: string = rootMargin;
-
-    readonly thresholds: ReadonlyArray<number> = thresholds;
-
-    disconnect: () => void = disconnect;
-
-    observe: (target: Element) => void = observe;
-
-    takeRecords: () => IntersectionObserverEntry[] = takeRecords;
-
-    unobserve: (target: Element) => void = unobserve;
-  }
-
-  Object.defineProperty(window, 'IntersectionObserver', {
-    writable: true,
-    configurable: true,
-    value: MockIntersectionObserver,
-  });
-
-  Object.defineProperty(global, 'IntersectionObserver', {
-    writable: true,
-    configurable: true,
-    value: MockIntersectionObserver,
-  });
-}

package/tsconfig.json

@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "declaration": true,
-    "declarationDir": "lib",
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "isolatedModules": true,
-    "jsx": "react",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "module": "esnext",
-    "moduleResolution": "Node",
-    "noEmit": false,
-    "outDir": "lib",
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "target": "es5"
-  },
-  "exclude": ["lib", "node_modules", "**/*.stories*"],
-  "include": ["src"]
-}