@ttoss/ui 0.8.3 → 0.9.1

package/README.md

@@ -0,0 +1,42 @@
+# @ttoss/ui
+
+## 📚 About
+
+<strong> @ttoss/ui</strong> is a easiest way to use Ui components in your React application.
+
+## 🚀 Get Started
+
+### Install @ttoss/ui
+
+```shell
+$ yarn add @ttoss/ui
+# or
+$ npm install @ttoss/ui
+```
+
+## 📄 Examples of use
+
+```tsx
+import { Flex, Text, Box, Button } from '@ttoss/ui';
+
+const App = () => {
+  return (
+    <ThemeProvider>
+      <Flex sx={{ flexDirection: 'column' }}>
+        <Text>Text Value</Text>
+        <Box>
+          <Text>Text Value</Text>
+
+          <Button>Button Primary</Button>
+        </Box>
+      </Flex>
+    </ThemeProvider>
+  );
+};
+
+export default App;
+```
+
+```tsx
+
+```

package/dist/esm/index.js

@@ -2,10 +2,14 @@
 import * as React from "react";
 
 // src/theme/ThemeProvider.tsx
-import { ThemeProvider as ThemeUiProvider } from "@theme-ui/core";
+import {
+  ThemeProvider as ThemeUiProvider,
+  merge
+} from "@theme-ui/core";
+import * as React2 from "react";
 
-// src/theme/theme.ts
-var theme = {
+// src/theme/defaultTheme.ts
+var defaultTheme = {
   colors: {
     text: "#000",
     background: "#fff",
@@ -30,13 +34,26 @@ var theme = {
 };
 
 // src/theme/ThemeProvider.tsx
-var ThemeProvider = ({ children }) => {
-  return /* @__PURE__ */ React.createElement(ThemeUiProvider, {
-    theme
+var ThemeProvider = ({
+  children,
+  theme = {}
+}) => {
+  const mergedTheme = React2.useMemo(() => {
+    if (typeof theme === "function") {
+      return theme;
+    }
+    return merge(defaultTheme, theme);
+  }, [theme]);
+  return /* @__PURE__ */ React2.createElement(ThemeUiProvider, {
+    theme: mergedTheme
   }, children);
 };
 var ThemeProvider_default = ThemeProvider;
 
+// src/theme/useTheme.ts
+import { useThemeUI } from "@theme-ui/core";
+var useTheme = useThemeUI;
+
 // src/components/Box/Box.tsx
 import { Box } from "@theme-ui/components";
 
@@ -47,9 +64,7 @@ import { Button } from "@theme-ui/components";
 import { Flex } from "@theme-ui/components";
 
 // src/components/FormField/FormField.tsx
-import {
-  createElement
-} from "react";
+import * as React3 from "react";
 
 // src/components/Label/Label.tsx
 import { Label } from "@theme-ui/components";
@@ -68,11 +83,11 @@ var FormField = ({ children, label, error }) => {
     }
     return [];
   })();
-  return /* @__PURE__ */ createElement(Box, null, /* @__PURE__ */ createElement(Label, {
+  return /* @__PURE__ */ React3.createElement(Box, null, /* @__PURE__ */ React3.createElement(Label, {
     sx: { display: "flex", flexDirection: "column" }
-  }, label && /* @__PURE__ */ createElement(Text, {
+  }, label && /* @__PURE__ */ React3.createElement(Text, {
     as: "span"
-  }, label), children), errorAsArray.map((err) => /* @__PURE__ */ createElement(Text, {
+  }, label), children), errorAsArray.map((err) => /* @__PURE__ */ React3.createElement(Text, {
     key: err,
     as: "span",
     variant: "error"
@@ -93,5 +108,6 @@ export {
   Image,
   Input,
   Text,
-  ThemeProvider_default as ThemeProvider
+  ThemeProvider_default as ThemeProvider,
+  useTheme
 };

package/dist/index.d.ts

@@ -1,17 +1,18 @@
-import { Theme } from '@theme-ui/core';
+import * as _theme_ui_core from '@theme-ui/core';
+import { ThemeProviderProps } from '@theme-ui/core';
+export { ThemeProviderProps } from '@theme-ui/core';
+import * as React from 'react';
 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 const ThemeProvider: React.FC<Partial<ThemeProviderProps>>;
+
+declare const useTheme: () => _theme_ui_core.ThemeUIContextValue;
 
 declare type FormFieldProps = {
-    children?: React$1.ReactNode;
+    children?: React.ReactNode;
     label?: string;
     error?: string[] | string;
 };
 declare const FormField: ({ children, label, error }: FormFieldProps) => JSX.Element;
 
-export { FormField, FormFieldProps, ThemeProvider, ThemeProviderProps };
+export { FormField, FormFieldProps, ThemeProvider, useTheme };

package/dist/index.js

@@ -1,11 +1,54 @@
-"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);
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Box: () => import_components.Box,
+  Button: () => import_components2.Button,
+  Flex: () => import_components3.Flex,
+  FormField: () => FormField_default,
+  Image: () => import_components6.Image,
+  Input: () => import_components7.Input,
+  Text: () => import_components5.Text,
+  ThemeProvider: () => ThemeProvider_default,
+  useTheme: () => useTheme
+});
+
+// tsup.inject.js
+var React = __toESM(require("react"));
 
 // src/theme/ThemeProvider.tsx
-var _core = require('@theme-ui/core');
+var import_core = require("@theme-ui/core");
+var React2 = __toESM(require("react"));
 
-// src/theme/theme.ts
-var theme = {
+// src/theme/defaultTheme.ts
+var defaultTheme = {
   colors: {
     text: "#000",
     background: "#fff",
@@ -30,32 +73,43 @@ var theme = {
 };
 
 // src/theme/ThemeProvider.tsx
-var ThemeProvider = ({ children }) => {
-  return /* @__PURE__ */ React.createElement(_core.ThemeProvider, {
-    theme
+var ThemeProvider = ({
+  children,
+  theme = {}
+}) => {
+  const mergedTheme = React2.useMemo(() => {
+    if (typeof theme === "function") {
+      return theme;
+    }
+    return (0, import_core.merge)(defaultTheme, theme);
+  }, [theme]);
+  return /* @__PURE__ */ React2.createElement(import_core.ThemeProvider, {
+    theme: mergedTheme
   }, children);
 };
 var ThemeProvider_default = ThemeProvider;
 
+// src/theme/useTheme.ts
+var import_core2 = require("@theme-ui/core");
+var useTheme = import_core2.useThemeUI;
+
 // src/components/Box/Box.tsx
-var _components = require('@theme-ui/components');
+var import_components = require("@theme-ui/components");
 
 // src/components/Button/Button.tsx
-
+var import_components2 = require("@theme-ui/components");
 
 // src/components/Flex/Flex.tsx
-
+var import_components3 = require("@theme-ui/components");
 
 // src/components/FormField/FormField.tsx
-
-
-
+var React3 = __toESM(require("react"));
 
 // src/components/Label/Label.tsx
-
+var import_components4 = require("@theme-ui/components");
 
 // src/components/Text/Text.tsx
-
+var import_components5 = require("@theme-ui/components");
 
 // src/components/FormField/FormField.tsx
 var FormField = ({ children, label, error }) => {
@@ -68,11 +122,11 @@ var FormField = ({ children, label, error }) => {
     }
     return [];
   })();
-  return /* @__PURE__ */ _react.createElement.call(void 0, _components.Box, null, /* @__PURE__ */ _react.createElement.call(void 0, _components.Label, {
+  return /* @__PURE__ */ React3.createElement(import_components.Box, null, /* @__PURE__ */ React3.createElement(import_components4.Label, {
     sx: { display: "flex", flexDirection: "column" }
-  }, label && /* @__PURE__ */ _react.createElement.call(void 0, _components.Text, {
+  }, label && /* @__PURE__ */ React3.createElement(import_components5.Text, {
     as: "span"
-  }, label), children), errorAsArray.map((err) => /* @__PURE__ */ _react.createElement.call(void 0, _components.Text, {
+  }, label), children), errorAsArray.map((err) => /* @__PURE__ */ React3.createElement(import_components5.Text, {
     key: err,
     as: "span",
     variant: "error"
@@ -81,17 +135,20 @@ var FormField = ({ children, label, error }) => {
 var FormField_default = FormField;
 
 // src/components/Image/Image.tsx
-
+var import_components6 = require("@theme-ui/components");
 
 // 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;
+var import_components7 = require("@theme-ui/components");
+module.exports = __toCommonJS(src_exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Box,
+  Button,
+  Flex,
+  FormField,
+  Image,
+  Input,
+  Text,
+  ThemeProvider,
+  useTheme
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "0.8.3",
+  "version": "0.9.1",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -32,15 +32,15 @@
     "dev": "yarn workspace @ttoss/storybook run dev"
   },
   "dependencies": {
-    "@theme-ui/components": "^0.11.1",
-    "@theme-ui/core": "^0.11.1"
+    "@theme-ui/components": "^0.13.1",
+    "@theme-ui/core": "^0.13.1"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@ttoss/config": "^0.8.3",
-    "@ttoss/test-utils": "^0.8.3"
+    "@ttoss/config": "^0.9.1",
+    "@ttoss/test-utils": "^0.9.1"
   },
-  "gitHead": "4a0b5b1f51c9241b0b8d4a35b88a84d856d46d44"
+  "gitHead": "22b5b5069d316cf219a95635bb05c21b8e3367a4"
 }

package/src/index.ts

@@ -3,9 +3,9 @@ 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 Flex, FlexProps } from './components/Flex/Flex';
 export {

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;