diff --git a/packages/component-generator/src/typings.ts b/packages/component-generator/src/typings.ts index f29ddc8..6620a11 100644 --- a/packages/component-generator/src/typings.ts +++ b/packages/component-generator/src/typings.ts @@ -44,7 +44,7 @@ export type BaseConfig = { styleProps?: styleFn[]; element?: keyof JSX.IntrinsicElements; component?: ThemedStyledFunction< - keyof JSX.IntrinsicElements | React.ComponentType, + keyof JSX.IntrinsicElements, ThemeType | any, React.ComponentType, keyof any diff --git a/packages/container/README.md b/packages/container/README.md new file mode 100644 index 0000000..7cdd752 --- /dev/null +++ b/packages/container/README.md @@ -0,0 +1,11 @@ +# `@artifak/container` + +> TODO: description + +## Usage + +``` +const container = require('@artifak/container'); + +// TODO: DEMONSTRATE API +``` diff --git a/packages/container/__tests__/__snapshots__/container.test.tsx.snap b/packages/container/__tests__/__snapshots__/container.test.tsx.snap new file mode 100644 index 0000000..28d9001 --- /dev/null +++ b/packages/container/__tests__/__snapshots__/container.test.tsx.snap @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`@artifak/container renders 1`] = ` + +
+

+ Hello World +

+
+
+`; + +exports[`@artifak/container renders 2`] = ` + +
+

+ Hello World +

+
+
+`; diff --git a/packages/container/__tests__/container.test.tsx b/packages/container/__tests__/container.test.tsx new file mode 100644 index 0000000..bbda174 --- /dev/null +++ b/packages/container/__tests__/container.test.tsx @@ -0,0 +1,29 @@ +import { Container } from '../src'; +import React from 'react'; +import { render } from '@testing-library/react'; + +describe('@artifak/container', () => { + it('renders', () => { + const { asFragment } = render( + + <> +

Hello World

+ +
+ ); + + expect(asFragment()).toMatchSnapshot(); + }); + + it('renders', () => { + const { asFragment } = render( + + <> +

Hello World

+ +
+ ); + + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/packages/container/index.stories.tsx b/packages/container/index.stories.tsx new file mode 100644 index 0000000..84b28ed --- /dev/null +++ b/packages/container/index.stories.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Container } from './src'; + +export const ContainerTest = () => { + return ( + + <> +

Hello World

+ +
+ ); +}; + +export default { + title: 'Container', + component: [ContainerTest] +}; diff --git a/packages/container/package.json b/packages/container/package.json new file mode 100644 index 0000000..b57c332 --- /dev/null +++ b/packages/container/package.json @@ -0,0 +1,55 @@ +{ + "name": "@artifak/container", + "version": "1.0.0", + "description": "A basic React container component", + "keywords": [ + "react", + "react-component", + "component", + "ui", + "container", + "grid", + "block", + "layout" + ], + "author": "Julian Low", + "license": "MIT", + "sideEffects": false, + "main": "dist/container.cjs.js", + "module": "dist/container.esm.js", + "src": "src/index.tsx", + "types": "dist/src/index.d.ts", + "directories": { + "test": "__tests__", + "src": "src" + }, + "files": [ + "dist" + ], + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/heyjul3s/artifak.git" + }, + "scripts": { + "build": "rimraf dist && builder", + "test": "echo \"Error: run tests from root\" && exit 1" + }, + "bugs": { + "url": "https://github.com/heyjul3s/artifak/issues" + }, + "homepage": "https://github.com/heyjul3s/artifak#readme", + "devDependencies": { + "@artifak/bundler": "^1.1.4" + }, + "peerDependencies": { + "react": ">=17.0.1", + "react-dom": ">=17.0.1", + "styled-components": ">=5.2.1" + }, + "dependencies": { + "@artifak/component-generator": "^2.0.3" + } +} diff --git a/packages/container/src/index.tsx b/packages/container/src/index.tsx new file mode 100644 index 0000000..97cc862 --- /dev/null +++ b/packages/container/src/index.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { createStyledComponent, BaseProps } from '@artifak/component-generator'; + +export function Container({ children, ...props }) { + return {children}; +} + +const ContainerBase = createStyledComponent>({ + styles: { + margin: '0 auto', + width: '100%' + } +}); diff --git a/packages/container/tsconfig.json b/packages/container/tsconfig.json new file mode 100644 index 0000000..0a8ae60 --- /dev/null +++ b/packages/container/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "allowSyntheticDefaultImports": true, + "compilerOptions": { + "outDir": "dist" + }, + "references": [], + "include": ["src"] +} diff --git a/yarn.lock b/yarn.lock index aa709b9..51a217b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12244,7 +12244,7 @@ react-docgen@^5.0.0: node-dir "^0.1.10" strip-indent "^3.0.0" -react-dom@^17.0.1: +react-dom@>=17.0.1, react-dom@^17.0.1: version "17.0.1" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6" integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug== @@ -12398,7 +12398,7 @@ react-textarea-autosize@^8.1.1: use-composed-ref "^1.0.0" use-latest "^1.0.0" -react@^17.0.1: +react@>=17.0.1, react@^17.0.1: version "17.0.1" resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127" integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==