feat: add basic grid layout

.eslintrc.json

@@ -3,7 +3,6 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "prettier/@typescript-eslint"
   ],
   "ignorePatterns": ["*.d.ts"],
@@ -117,7 +116,6 @@
         "caughtErrors": "all"
       }
     ],
-    "@typescript-eslint/no-unsafe-call": "error",
     "@typescript-eslint/prefer-for-of": "error",
     "@typescript-eslint/prefer-nullish-coalescing": "error",
     "@typescript-eslint/prefer-optional-chain": "error",

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "trailingComma": "all",
+  "semi": true,
+  "singleQuote": false
+}

example/src/Main.tsx

@@ -1,20 +1,24 @@
 import { h, FunctionalComponent } from "preact";
-import { Button, Layout } from "teenyui";
+import { Button, layout } from "teenyui";
 
 import { timeout } from "./utils";
 
-const Main: FunctionalComponent = () => (
-  <Layout>
-    <Button onClick={() => alert("You clicked me!")}>Hello World!</Button>
-    <Button
-      onClick={async () => {
-        await timeout(5000);
-        alert("You clicked me!");
-      }}
-    >
-      Delayed Hello!
-    </Button>
-  </Layout>
-);
+const { Container, Grid } = layout;
 
-export default Main;
+export const Main: FunctionalComponent = () => (
+  <Container>
+    <Grid size={4} mobileSize={12} desktopSize={2}>
+      <Button onClick={() => alert("You clicked me!")}>Hello World!</Button>
+    </Grid>
+    <Grid size={8} mobileSize={12} desktopSize={10}>
+      <Button
+        onClick={async () => {
+          await timeout(5000);
+          alert("You clicked me!");
+        }}
+      >
+        Delayed Hello!
+      </Button>
+    </Grid>
+  </Container>
+);

example/src/index.tsx

@@ -1,10 +1,9 @@
 import { h, render } from "preact";
 
 import "regenerator-runtime/runtime";
-
 import "./global.scss";
 
-import Main from "./Main";
+import { Main } from "./Main";
 
 /**
  * Start the application.

example/src/teenyui.d.ts

@@ -0,0 +1 @@
+export * from '../../dist';

package.json

@@ -10,11 +10,12 @@
   "license": "GPL-3.0",
   "sideEffects": false,
   "scripts": {
+    "start": "yarn watch",
+    "watch": "rollup -c -w",
+    "build": "rollup -c",
     "lint": "yarn lint-ts && yarn lint-scss",
     "lint-ts": "eslint --max-warnings 0 --ext .js,.jsx,.ts,.tsx ./src",
-    "lint-scss": "stylelint './src/**/*.scss'",
-    "build": "rollup -c",
-    "watch": "rollup -c -w"
+    "lint-scss": "stylelint './src/**/*.scss'"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.3.0",

src/button/style.scss

@@ -5,7 +5,7 @@
   border-radius: 0.3em;
   cursor: pointer;
   color: #fff;
-  background-color: var(--primary-color);
+  background: var(--primary-color);
 
   &:disabled {
     cursor: not-allowed;

src/index.ts

@@ -1,2 +1,2 @@
 export * from "./button";
-export * from "./layout";
+export * as layout from "./layout";

src/layout/container/index.tsx

@@ -0,0 +1,18 @@
+import { h, FunctionalComponent, RenderableProps } from "preact";
+
+import style from "./style.scss";
+
+export const Container: FunctionalComponent<RenderableProps<Props>> = (
+  props,
+) => {
+  const direction = style[props.direction || "row"];
+  const pillars = props.pillar ? style.pillar : "";
+  const styles = `${style.container} ${direction} ${pillars}`;
+
+  return <div class={styles}>{props.children}</div>;
+};
+
+interface Props {
+  direction?: "row" | "column";
+  pillar?: boolean;
+}

src/layout/container/style.scss

@@ -0,0 +1,22 @@
+@import "../../mixins";
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  margin: 0 auto;
+}
+
+@include breakpoint(min, large) {
+  .pillar {
+    width: 80%;
+  }
+}
+
+.row {
+  flex-direction: row;
+}
+
+.column {
+  flex-direction: column;
+}

src/layout/grid/index.tsx

@@ -0,0 +1,20 @@
+import { h, FunctionalComponent, RenderableProps } from "preact";
+
+import style from "./style.scss";
+
+export const Grid: FunctionalComponent<RenderableProps<Props>> = (props) => {
+  const size = style[`grid-${props.size}`];
+  const mobileSize = style[`grid-mobile-${props.mobileSize}`];
+  const desktopSize = style[`grid-desktop-${props.desktopSize}`];
+  const spacing = style[`spacing-${props.spacing}`] || "";
+  const styles = `${style.grid} ${size} ${mobileSize} ${desktopSize} ${spacing}`;
+
+  return <div class={styles}>{props.children}</div>;
+};
+
+interface Props {
+  size: number | string;
+  mobileSize?: number | string;
+  desktopSize?: number | string;
+  spacing?: 4 | 8 | 12 | 16;
+}

src/layout/grid/style.scss

@@ -0,0 +1,33 @@
+@import "../../mixins";
+
+.grid {
+  box-sizing: border-box;
+}
+
+@for $i from 1 through 12 {
+  .grid-#{$i} {
+    flex-basis: round(($i / 12) * 100% * 10) / 10;
+  }
+}
+
+@include breakpoint(max, small) {
+  @for $i from 1 through 12 {
+    .grid-mobile-#{$i} {
+      flex-basis: round(($i / 12) * 100% * 10) / 10;
+    }
+  }
+}
+
+@include breakpoint(min, large) {
+  @for $i from 1 through 12 {
+    .grid-desktop-#{$i} {
+      flex-basis: round(($i / 12) * 100% * 10) / 10;
+    }
+  }
+}
+
+@for $i from 1 through 4 {
+  .spacing-#{$i} {
+    padding: $i * 1px;
+  }
+}

src/layout/header/index.tsx

@@ -1,7 +0,0 @@
-import { h, FunctionalComponent } from "preact";
-
-import style from "./style.scss";
-
-export const Header: FunctionalComponent = (props) => (
-  <div class={style.header}>{props.children}</div>
-);

src/layout/header/style.scss

@@ -1,3 +0,0 @@
-.header {
-  background-color: #123456;
-}

src/layout/index.ts

@@ -1,2 +1,2 @@
-export * from "./header";
-export * from "./layout";
+export * from "./container";
+export * from "./grid";

src/layout/layout/index.tsx

@@ -1,7 +0,0 @@
-import { h, FunctionalComponent } from "preact";
-
-import style from "./style.scss";
-
-export const Layout: FunctionalComponent = (props) => (
-  <div class={style.layout}>{props.children}</div>
-);

src/layout/layout/style.scss

@@ -1,6 +0,0 @@
-.layout {
-  height: 100%;
-  width: 100%;
-
-  background-color: var(--primary-background);
-}

src/mixins.scss

@@ -0,0 +1,17 @@
+$breakpoints: (
+  "small": 576px,
+  "medium": 768px,
+  "large": 1250px,
+) !default;
+
+@mixin breakpoint($operator, $breakpoint) {
+  @if $operator == min {
+    @media (min-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  } @else if $operator == max {
+    @media (max-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  }
+}