feat: text component

babel.config.js

@@ -17,10 +17,14 @@ module.exports = function (api) {
       },
     ],
     "@babel/preset-typescript",
-    "@babel/preset-react",
+    ["@babel/preset-react",       
+    { "runtime": "automatic", "importSource": "@emotion/react" }
+    ],
+    "@emotion/babel-preset-css-prop"
   ]
 
   const plugins = [
+    "@emotion/babel-plugin",
     "@babel/plugin-proposal-class-properties",
   ]
 

jest.config.js

@@ -1,15 +1,12 @@
 
 module.exports = {
-    preset: "ts-jest",
-    testEnvironment: "node",
+    preset: 'ts-jest',
+    projects: ['<rootDir>/jest.config.js'],
+    modulePaths: [`<rootDir>/src/`],
     collectCoverageFrom: ["src/**/*.{ts,tsx, js, jsx}"],
-    transform: { ".(ts|tsx)$": "ts-jest/dist" },
     transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"],
     setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect"],
-     coveragePathIgnorePatterns: ["<roorDir>/node_modules/", "<rootDir>/src/index.ts"],
-    globals: {
-      "ts-jest": {
-        tsconfig: "tsconfig.json",
-      },
-    },
+    coveragePathIgnorePatterns: ["<roorDir>/node_modules/", "<rootDir>/src/index.ts"],
+    modulePathIgnorePatterns: ["<rootDir>/dist/"]
+
   }

package.json

@@ -18,6 +18,7 @@
     "theme:build": "yarn theme build",
     "theme:test": "yarn theme test",
     "theme:clean": "yarn theme clean",
+    "components": "yarn workspace @react-atomic-ui/components",
     "site": "yarn workspace @react-atomic-ui/site",
     "site:dev": "yarn site dev",
     "build": "yarn workspaces run build",
@@ -36,6 +37,8 @@
     "@babel/preset-react": "7.12.13",
     "@babel/preset-typescript": "7.12.17",
     "@babel/runtime": "7.12.18",
+    "@emotion/babel-plugin": "^11.2.0",
+    "@emotion/babel-preset-css-prop": "^11.2.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "^5.0.3",
@@ -57,7 +60,6 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-testing-library": "^3.10.1",
     "jest": "^26.6.3",
-    "lerna": "^3.22.1",
     "nodemon": "^2.0.7",
     "prettier": "^2.2.1",
     "react": "^17.0.1",

packages/components/README.md

@@ -0,0 +1,11 @@
+# `components`
+
+> TODO: description
+
+## Usage
+
+```
+import { ... } from '@react-atomic-ui/components
+
+// TODO: DEMONSTRATE API
+```

packages/components/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="@emotion/react/types/css-prop" />

packages/components/jest.config.js

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const commonConfig = require("../../jest.config")
+
+module.exports = {
+  ...commonConfig,
+  coveragePathIgnorePatterns: [
+    "node_modules",
+    "<rootDir>/src/atoms/index.ts",
+    "<rootDir>/src/index.ts",
+  ],
+}

packages/components/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@react-atomic-ui/components",
+  "version": "1.0.0",
+  "description": "> TODO: description",
+  "author": "Laura <laurazenc@gmail.com>",
+  "homepage": "https://github.com/laurazenc/react-atomic-ui#readme",
+  "license": "ISC",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/laurazenc/react-atomic-ui.git"
+  },
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "dev": "nodemon --watch src --exec yarn build -e ts,tsx",
+    "build": "concurrently yarn:build:*",
+    "build:esm": "tsc --module es6 --target es5 --outDir dist/esm",
+    "build:cjs": "tsc --module commonjs --target es5 --outDir dist/cjs",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "clean": "rimraf coverage",
+    "test": "jest --passWithNoTests --env=jsdom ",
+    "test:ci": "yarn test  --watchAll --coverage",
+    "test:cov": "yarn clean && yarn test --coverage --ci --runInBand",
+    "lint": "eslint src --ext .ts,.tsx --config ../../.eslintrc"
+  },
+  "bugs": {
+    "url": "https://github.com/laurazenc/react-atomic-ui/issues"
+  },
+  "peerDependencies": {
+    "react": "17.x"
+  },
+  "dependencies": {
+    "@react-atomic-ui/theme": "*",
+    "@emotion/react": "^11.1.5"
+  }
+}

packages/components/src/atoms/Layout/Layout.test.tsx

@@ -0,0 +1,15 @@
+import { render } from "@testing-library/react"
+import React from "react"
+import { Box, Row } from "./index"
+
+describe("Layout", () => {
+  it("should render Box", () => {
+    const renderInstance = render(<Box>wadus</Box>)
+    expect(renderInstance.asFragment().firstChild).toBeDefined()
+  })
+
+  it("should render Row", () => {
+    const renderInstance = render(<Row>wadus</Row>)
+    expect(renderInstance.asFragment().firstChild).toBeDefined()
+  })
+})

packages/components/src/atoms/Layout/config.ts

@@ -0,0 +1,16 @@
+import * as CSS from "csstype"
+
+export interface FlexProps {
+  alignItems?: CSS.Property.AlignItems
+  justifyContent?: CSS.Property.JustifyContent
+  flexWrap?: CSS.Property.FlexWrap
+  flexDirection?: CSS.Property.FlexDirection
+  flexBsis?: CSS.Property.FlexBasis
+  flexGrow?: CSS.Property.FlexGrow
+  flexShrink?: CSS.Property.FlexShrink
+}
+
+export interface SizeProps {
+  width?: CSS.Property.Width
+  height?: CSS.Property.Height
+}

packages/components/src/atoms/Layout/index.tsx

@@ -0,0 +1,34 @@
+/** @jsx jsx */
+import { jsx } from "@emotion/react"
+import { css, raui } from "@react-atomic-ui/theme"
+import React from "react"
+import { FlexProps, SizeProps } from "./config"
+
+const StyledBox = raui.div``
+
+interface BoxProps extends FlexProps, SizeProps {}
+
+export const Box: React.FunctionComponent<BoxProps> = (props) => {
+  const { children, ...rest } = props
+
+  const styleCss = css({
+    display: "flex",
+    ...rest,
+  })
+
+  return <StyledBox css={styleCss}>{children}</StyledBox>
+}
+
+const StyledFlex = raui(StyledBox)``
+
+export const Row: React.FunctionComponent<BoxProps> = (props) => {
+  const { children, ...rest } = props
+
+  const styleCss = css({
+    display: "flex",
+    flexDirection: "row",
+    ...rest,
+  })
+
+  return <StyledFlex css={styleCss}>{children}</StyledFlex>
+}

packages/components/src/atoms/Text/Text.test.tsx

@@ -0,0 +1,10 @@
+import { render } from "@testing-library/react"
+import React from "react"
+import { Text } from "./"
+
+describe("Text", () => {
+  it("should render", () => {
+    const renderInstance = render(<Text>wadus</Text>)
+    expect(renderInstance.asFragment().firstChild).toBeDefined()
+  })
+})

packages/components/src/atoms/Text/config.ts

@@ -0,0 +1,10 @@
+import * as CSS from "csstype"
+
+export interface TextProps {
+  fontSize?: CSS.Property.FontFamily
+  lineHeight?: CSS.Property.LineHeight
+  textDecoration?: CSS.Property.TextDecoration
+  textAlign?: CSS.Property.TextAlign
+  textTransform?: CSS.Property.TextTransform
+  fontWeight?: CSS.Property.FontWeight
+}

packages/components/src/atoms/Text/index.tsx

@@ -0,0 +1,17 @@
+/** @jsx jsx */
+import { jsx, css } from "@emotion/react"
+
+import React from "react"
+import { raui } from "@react-atomic-ui/theme"
+import { TextProps } from "./config"
+
+const StyledText = raui.div``
+
+export const Text: React.FunctionComponent<TextProps> = ({
+  children,
+  ...style
+}) => {
+  const styleCss = css(style as Record<string, string | number>)
+
+  return <StyledText css={styleCss}>{children}</StyledText>
+}

packages/components/src/atoms/index.ts

@@ -0,0 +1,2 @@
+export * from "./Text"
+export * from "./Layout"

packages/components/src/index.ts

@@ -0,0 +1 @@
+export * from "./atoms"

packages/components/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "dist",
+        "baseUrl": "src",
+    },
+    "include": [
+        "src"
+    ],
+}

packages/theme/package.json

@@ -42,7 +42,7 @@
     "url": "https://github.com/laurazenc/react-atomic-ui/issues"
   },
   "peerDependencies": {
-    "react": "16.x"
+    "react": "17.x"
   },
   "dependencies": {
     "@emotion/react": "^11.1.5",

packages/theme/src/raui.ts

@@ -1,3 +1,3 @@
 import styled from "@emotion/styled"
-
-export const raui = styled
+export { jsx } from "@emotion/react"
+export { styled as raui }

packages/utils/package.json

@@ -33,6 +33,6 @@
     "url": "https://github.com/laurazenc/react-atomic-ui/issues"
   },
   "peerDependencies": {
-    "react": "16.x"
+    "react": "17.x"
   }
 }

site/package.json

@@ -19,6 +19,7 @@
     "@next/mdx": "^10.0.7",
     "@react-atomic-ui/core": "*",
     "@react-atomic-ui/theme": "*",
+    "@react-atomic-ui/components": "*",
     "next": "10.0.7",
     "next-mdx-enhanced": "^5.0.0",
     "react": "17.0.1",

site/pages/docs/getting-started.mdx

@@ -1,6 +1,6 @@
 ---
 title: Getting Started
-description: How to install and set up Chakra UI in your project
+description: How to install and set up React Atomic UI in your project
 ---
 
 # h1

site/pages/index.tsx

@@ -1,18 +1,21 @@
-import React from 'react'
-import Head from 'next/head'
+import React from "react"
+import Head from "next/head"
+
+import { Text } from "@react-atomic-ui/components"
 
 const Home = () => (
   <div>
     <Head>
       <title>Home</title>
-      <link rel='icon' href='/favicon.ico' />
+      <link rel="icon" href="/favicon.ico" />
     </Head>
 
-    <div className='hero'>
-      <h1 className='title'>Welcome to Next.js!</h1>
-      <p className='description'>
+    <div className="hero">
+      <h1 className="title">Welcome to Next.js!</h1>
+      <p className="description">
         To get started, edit <code>pages/index.js</code> and save to reload.
       </p>
+      <Text fontSize="24px">hola</Text>
     </div>
   </div>
 )

site/src/components/page.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import { Box } from "@react-atomic-ui/components"
 
 interface PageProps {
   frontmatter: { [key: string]: unknown }
@@ -16,7 +17,9 @@ const Page: React.FC<PageProps> = ({
   const { title } = frontmatter
   return (
     <>
-      <div>the header</div>
+      <Box justifyContent="center" alignItems="center" height="60px">
+        the header
+      </Box>
       <div style={{ display: "flex" }}>
         {sidebar || null}
         <div style={{ flex: 1 }}>

tsconfig.json

@@ -13,21 +13,14 @@
     "strictFunctionTypes": true,           /* Enable strict checking of function types. */
     "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
     "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */"allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
     "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
     "allowJs": true,
     "skipLibCheck": true,                     /* Skip type checking of declaration files. */
     "forceConsistentCasingInFileNames": true,  /* Disallow inconsistently-cased references to the same file. */
     "suppressImplicitAnyIndexErrors": true,
-
   },
   "include": ["packages"],
   "exclude": ["node_modules", "packages/**/dist"],
-  "ts-node": {
-    "compilerOptions": {
-      "module": "CommonJS",
-      "resolveJsonModule": true,
-      "noImplicitAny": false
-    }
-  }
 }