Merge f917180 into 2189241

packages/component-generator/src/typings.ts

@@ -44,7 +44,7 @@ export type BaseConfig<Props = void, Attributes = void, ThemeType = void> = {
   styleProps?: styleFn[];
   element?: keyof JSX.IntrinsicElements;
   component?: ThemedStyledFunction<
-    keyof JSX.IntrinsicElements | React.ComponentType<Props>,
+    keyof JSX.IntrinsicElements,
     ThemeType | any,
     React.ComponentType<Props>,
     keyof any

packages/container/README.md

@@ -0,0 +1,11 @@
+# `@artifak/container`
+
+> TODO: description
+
+## Usage
+
+```
+const container = require('@artifak/container');
+
+// TODO: DEMONSTRATE API
+```

packages/container/__tests__/__snapshots__/container.test.tsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`@artifak/container renders 1`] = `
+<DocumentFragment>
+  <div
+    class="sc-bdfBwQ eaQfTv"
+    width="100%"
+  >
+    <p>
+      Hello World
+    </p>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`@artifak/container renders 2`] = `
+<DocumentFragment>
+  <div
+    class="sc-bdfBwQ lmFeAU"
+    width="100%"
+  >
+    <p>
+      Hello World
+    </p>
+  </div>
+</DocumentFragment>
+`;

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(
+      <Container>
+        <>
+          <p>Hello World</p>
+        </>
+      </Container>
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('renders', () => {
+    const { asFragment } = render(
+      <Container maxWidth={['40em', '52em', '64em', '80em']}>
+        <>
+          <p>Hello World</p>
+        </>
+      </Container>
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

packages/container/index.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Container } from './src';
+
+export const ContainerTest = () => {
+  return (
+    <Container
+      maxWidth={['40em', '52em', '64em', '80em']}
+      style={{
+        background: 'red'
+      }}
+    >
+      <>
+        <p>Hello World</p>
+      </>
+    </Container>
+  );
+};
+
+export default {
+  title: 'Container',
+  component: [ContainerTest]
+};

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"
+  }
+}

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 <ContainerBase {...props}>{children}</ContainerBase>;
+}
+
+const ContainerBase = createStyledComponent<BaseProps<any>>({
+  styles: {
+    margin: '0 auto',
+    width: '100%'
+  }
+});

packages/container/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "allowSyntheticDefaultImports": true,
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "references": [],
+  "include": ["src"]
+}

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==