@ttoss/ui 0.8.4 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "0.8.4",
+  "version": "0.9.2",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -32,15 +32,17 @@
     "dev": "yarn workspace @ttoss/storybook run dev"
   },
   "dependencies": {
-    "@theme-ui/components": "^0.11.1",
-    "@theme-ui/core": "^0.11.1"
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@theme-ui/components": "^0.13.1",
+    "@theme-ui/core": "^0.13.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@ttoss/config": "^0.8.4",
-    "@ttoss/test-utils": "^0.8.4"
+    "@ttoss/config": "^0.9.2",
+    "@ttoss/test-utils": "^0.9.2"
   },
-  "gitHead": "9d8124a3110e71122dbdeebc791bac649e43791c"
+  "gitHead": "6a904124b42ad72f3ba318ec42b861f803acb218"
 }

package/src/components/Card/Card.tsx

@@ -0,0 +1,3 @@
+export { Card as default } from '@theme-ui/components';
+
+export type { CardProps } from '@theme-ui/components';

package/src/index.ts

@@ -3,10 +3,11 @@ export {
   ThemeProviderProps,
 } from './theme/ThemeProvider';
 
-export { default as Box } from './components/Box/Box';
-export type { BoxProps } from './components/Box/Box';
+export { useTheme } from './theme/useTheme';
 
+export { default as Box, BoxProps } from './components/Box/Box';
 export { default as Button, ButtonProps } from './components/Button/Button';
+export { default as Card, CardProps } from './components/Card/Card';
 export { default as Flex, FlexProps } from './components/Flex/Flex';
 export {
   default as FormField,

package/src/theme/ThemeProvider.spec.tsx

@@ -0,0 +1,68 @@
+import { renderHook } from '@ttoss/test-utils';
+
+import { defaultTheme } from './defaultTheme';
+import ThemeProvider from './ThemeProvider';
+import { useTheme } from './useTheme';
+
+test('should return default theme colors', () => {
+  const { result } = renderHook(() => useTheme(), {
+    wrapper: ThemeProvider,
+    initialProps: { theme: {} },
+  });
+
+  expect(result.current.theme.colors).toEqual(defaultTheme.colors);
+});
+
+test('should return new theme colors', () => {
+  const newColor = '#000';
+
+  const { result } = renderHook(() => useTheme(), {
+    wrapper: ThemeProvider,
+    initialProps: {
+      theme: {
+        colors: {
+          background: newColor,
+          text: newColor,
+          primary: newColor,
+          secondary: newColor,
+        },
+      },
+    },
+  });
+
+  expect(result.current.theme.colors?.background).toEqual(newColor);
+  expect(result.current.theme.colors?.text).toEqual(newColor);
+  expect(result.current.theme.colors?.primary).toEqual(newColor);
+  expect(result.current.theme.colors?.secondary).toEqual(newColor);
+});
+
+test('should pass variants', () => {
+  const authCard = {
+    backgroundColor: 'red',
+  };
+
+  const authLayout = {
+    backgroundColor: 'blue',
+  };
+
+  const variants = {
+    layout: {
+      auth: authLayout,
+    },
+    cards: {
+      auth: authCard,
+    },
+  };
+
+  const { result } = renderHook(() => useTheme(), {
+    wrapper: ThemeProvider,
+    initialProps: {
+      theme: {
+        colors: {},
+        ...variants,
+      },
+    },
+  });
+
+  expect(result.current.theme).toEqual(expect.objectContaining(variants));
+});

package/src/theme/ThemeProvider.tsx

@@ -1,15 +1,27 @@
-// import * as React from 'react';
+import {
+  ThemeProvider as ThemeUiProvider,
+  ThemeProviderProps,
+  merge,
+} from '@theme-ui/core';
+import * as React from 'react';
 
-import { ThemeProvider as ThemeUiProvider, Theme } from '@theme-ui/core';
+import { defaultTheme } from './defaultTheme';
 
-import { theme } from './theme';
+export type { ThemeProviderProps };
 
-export type ThemeProviderProps = {
-  theme?: Theme | ((outerTheme: Theme) => Theme);
-};
+const ThemeProvider: React.FC<Partial<ThemeProviderProps>> = ({
+  children,
+  theme = {},
+}) => {
+  const mergedTheme = React.useMemo(() => {
+    if (typeof theme === 'function') {
+      return theme;
+    }
+
+    return merge(defaultTheme, theme);
+  }, [theme]);
 
-const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
-  return <ThemeUiProvider theme={theme}>{children}</ThemeUiProvider>;
+  return <ThemeUiProvider theme={mergedTheme}>{children}</ThemeUiProvider>;
 };
 
 export default ThemeProvider;

package/src/theme/{theme.ts → defaultTheme.ts}

@@ -1,6 +1,6 @@
 import { Theme } from '@theme-ui/core';
 
-export const theme: Theme = {
+export const defaultTheme: Theme = {
   colors: {
     text: '#000',
     background: '#fff',

package/src/theme/useTheme.ts

@@ -0,0 +1,3 @@
+import { useThemeUI } from '@theme-ui/core';
+
+export const useTheme = useThemeUI;

package/dist/esm/index.js

@@ -1,97 +0,0 @@
-// tsup.inject.js
-import * as React from "react";
-
-// src/theme/ThemeProvider.tsx
-import { ThemeProvider as ThemeUiProvider } from "@theme-ui/core";
-
-// src/theme/theme.ts
-var theme = {
-  colors: {
-    text: "#000",
-    background: "#fff",
-    primary: "#07c",
-    secondary: "#639",
-    gray: "#555"
-  },
-  buttons: {
-    primary: {
-      color: "background",
-      bg: "primary"
-    },
-    secondary: {
-      color: "background",
-      bg: "secondary"
-    },
-    gray: {
-      color: "background",
-      bg: "gray"
-    }
-  }
-};
-
-// src/theme/ThemeProvider.tsx
-var ThemeProvider = ({ children }) => {
-  return /* @__PURE__ */ React.createElement(ThemeUiProvider, {
-    theme
-  }, children);
-};
-var ThemeProvider_default = ThemeProvider;
-
-// src/components/Box/Box.tsx
-import { Box } from "@theme-ui/components";
-
-// src/components/Button/Button.tsx
-import { Button } from "@theme-ui/components";
-
-// src/components/Flex/Flex.tsx
-import { Flex } from "@theme-ui/components";
-
-// src/components/FormField/FormField.tsx
-import {
-  createElement
-} from "react";
-
-// src/components/Label/Label.tsx
-import { Label } from "@theme-ui/components";
-
-// src/components/Text/Text.tsx
-import { Text } from "@theme-ui/components";
-
-// src/components/FormField/FormField.tsx
-var FormField = ({ children, label, error }) => {
-  const errorAsArray = (() => {
-    if (Array.isArray(error)) {
-      return error;
-    }
-    if (typeof error === "string") {
-      return [error];
-    }
-    return [];
-  })();
-  return /* @__PURE__ */ createElement(Box, null, /* @__PURE__ */ createElement(Label, {
-    sx: { display: "flex", flexDirection: "column" }
-  }, label && /* @__PURE__ */ createElement(Text, {
-    as: "span"
-  }, label), children), errorAsArray.map((err) => /* @__PURE__ */ createElement(Text, {
-    key: err,
-    as: "span",
-    variant: "error"
-  }, err)));
-};
-var FormField_default = FormField;
-
-// src/components/Image/Image.tsx
-import { Image } from "@theme-ui/components";
-
-// src/components/Input/Input.tsx
-import { Input } from "@theme-ui/components";
-export {
-  Box,
-  Button,
-  Flex,
-  FormField_default as FormField,
-  Image,
-  Input,
-  Text,
-  ThemeProvider_default as ThemeProvider
-};

package/dist/index.d.ts

@@ -1,17 +0,0 @@
-import { Theme } from '@theme-ui/core';
-export { Box, BoxProps, Button, ButtonProps, Flex, FlexProps, Image, ImageProps, Input, InputProps, Text, TextProps } from '@theme-ui/components';
-import * as React$1 from 'react';
-
-declare type ThemeProviderProps = {
-    theme?: Theme | ((outerTheme: Theme) => Theme);
-};
-declare const ThemeProvider: React.FC<ThemeProviderProps>;
-
-declare type FormFieldProps = {
-    children?: React$1.ReactNode;
-    label?: string;
-    error?: string[] | string;
-};
-declare const FormField: ({ children, label, error }: FormFieldProps) => JSX.Element;
-
-export { FormField, FormFieldProps, ThemeProvider, ThemeProviderProps };

package/dist/index.js

@@ -1,97 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }// tsup.inject.js
-var _react = require('react'); var React = _interopRequireWildcard(_react);
-
-// src/theme/ThemeProvider.tsx
-var _core = require('@theme-ui/core');
-
-// src/theme/theme.ts
-var theme = {
-  colors: {
-    text: "#000",
-    background: "#fff",
-    primary: "#07c",
-    secondary: "#639",
-    gray: "#555"
-  },
-  buttons: {
-    primary: {
-      color: "background",
-      bg: "primary"
-    },
-    secondary: {
-      color: "background",
-      bg: "secondary"
-    },
-    gray: {
-      color: "background",
-      bg: "gray"
-    }
-  }
-};
-
-// src/theme/ThemeProvider.tsx
-var ThemeProvider = ({ children }) => {
-  return /* @__PURE__ */ React.createElement(_core.ThemeProvider, {
-    theme
-  }, children);
-};
-var ThemeProvider_default = ThemeProvider;
-
-// src/components/Box/Box.tsx
-var _components = require('@theme-ui/components');
-
-// src/components/Button/Button.tsx
-
-
-// src/components/Flex/Flex.tsx
-
-
-// src/components/FormField/FormField.tsx
-
-
-
-
-// src/components/Label/Label.tsx
-
-
-// src/components/Text/Text.tsx
-
-
-// src/components/FormField/FormField.tsx
-var FormField = ({ children, label, error }) => {
-  const errorAsArray = (() => {
-    if (Array.isArray(error)) {
-      return error;
-    }
-    if (typeof error === "string") {
-      return [error];
-    }
-    return [];
-  })();
-  return /* @__PURE__ */ _react.createElement.call(void 0, _components.Box, null, /* @__PURE__ */ _react.createElement.call(void 0, _components.Label, {
-    sx: { display: "flex", flexDirection: "column" }
-  }, label && /* @__PURE__ */ _react.createElement.call(void 0, _components.Text, {
-    as: "span"
-  }, label), children), errorAsArray.map((err) => /* @__PURE__ */ _react.createElement.call(void 0, _components.Text, {
-    key: err,
-    as: "span",
-    variant: "error"
-  }, err)));
-};
-var FormField_default = FormField;
-
-// src/components/Image/Image.tsx
-
-
-// src/components/Input/Input.tsx
-
-
-
-
-
-
-
-
-
-
-exports.Box = _components.Box; exports.Button = _components.Button; exports.Flex = _components.Flex; exports.FormField = FormField_default; exports.Image = _components.Image; exports.Input = _components.Input; exports.Text = _components.Text; exports.ThemeProvider = ThemeProvider_default;