From 4803e74c2c6eee6330c6018fcb188c74386a9101 Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Thu, 4 Mar 2021 13:34:49 +1100 Subject: [PATCH 1/4] initial scaffolding --- packages/bundler/index.js | 5 ++ packages/container/README.md | 11 ++++ .../container/__tests__/container.test.tsx | 7 +++ packages/container/package.json | 52 +++++++++++++++++++ packages/container/src/index.tsx | 3 ++ packages/container/tsconfig.json | 9 ++++ 6 files changed, 87 insertions(+) create mode 100644 packages/container/README.md create mode 100644 packages/container/__tests__/container.test.tsx create mode 100644 packages/container/package.json create mode 100644 packages/container/src/index.tsx create mode 100644 packages/container/tsconfig.json diff --git a/packages/bundler/index.js b/packages/bundler/index.js index 8f25cc1..94bdade 100755 --- a/packages/bundler/index.js +++ b/packages/bundler/index.js @@ -64,6 +64,11 @@ const formatOptions = [ format: 'esm', esModule: true }, + { + file: `dist/${fileName}.esm.min.js`, + format: 'esm', + esModule: true + }, { file: `dist/${fileName}.umd.js`, format: 'umd', 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__/container.test.tsx b/packages/container/__tests__/container.test.tsx new file mode 100644 index 0000000..3804245 --- /dev/null +++ b/packages/container/__tests__/container.test.tsx @@ -0,0 +1,7 @@ +'use strict'; + +const container = require('..'); + +describe('@artifak/container', () => { + it('needs tests'); +}); diff --git a/packages/container/package.json b/packages/container/package.json new file mode 100644 index 0000000..4ae65ba --- /dev/null +++ b/packages/container/package.json @@ -0,0 +1,52 @@ +{ + "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" + } +} diff --git a/packages/container/src/index.tsx b/packages/container/src/index.tsx new file mode 100644 index 0000000..f945a7b --- /dev/null +++ b/packages/container/src/index.tsx @@ -0,0 +1,3 @@ +export function container() { + // TODO +} 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"] +} From 8026d64776b1dadc8170d71b0590db45c8cb98a3 Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Mon, 8 Mar 2021 14:34:40 +1100 Subject: [PATCH 2/4] add generator to container, implementation of Container --- packages/container/package.json | 3 +++ packages/container/src/index.tsx | 14 ++++++++++++-- yarn.lock | 4 ++-- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/container/package.json b/packages/container/package.json index 4ae65ba..b57c332 100644 --- a/packages/container/package.json +++ b/packages/container/package.json @@ -48,5 +48,8 @@ "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 index f945a7b..97cc862 100644 --- a/packages/container/src/index.tsx +++ b/packages/container/src/index.tsx @@ -1,3 +1,13 @@ -export function container() { - // TODO +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/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== From 170c83a98384b61eb269d443cf1c17fb157ff019 Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Mon, 8 Mar 2021 14:41:07 +1100 Subject: [PATCH 3/4] remove React.ComponentType from component BaseConfig for createStyledComponents --- packages/component-generator/src/typings.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 From f917180653c2ce58568bacbe41c0b843bd5a015c Mon Sep 17 00:00:00 2001 From: heyjul3s Date: Mon, 8 Mar 2021 14:53:12 +1100 Subject: [PATCH 4/4] add snap and story --- .../__snapshots__/container.test.tsx.snap | 27 +++++++++++++++++ .../container/__tests__/container.test.tsx | 30 ++++++++++++++++--- packages/container/index.stories.tsx | 22 ++++++++++++++ 3 files changed, 75 insertions(+), 4 deletions(-) create mode 100644 packages/container/__tests__/__snapshots__/container.test.tsx.snap create mode 100644 packages/container/index.stories.tsx 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 index 3804245..bbda174 100644 --- a/packages/container/__tests__/container.test.tsx +++ b/packages/container/__tests__/container.test.tsx @@ -1,7 +1,29 @@ -'use strict'; - -const container = require('..'); +import { Container } from '../src'; +import React from 'react'; +import { render } from '@testing-library/react'; describe('@artifak/container', () => { - it('needs tests'); + 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] +};