Browse Source

feat: add basic grid layout

tags/0.1.2
Dany Sluijk 9 months ago
parent
commit
3641bdabec
Signed by: dsluijk GPG Key ID: EEEBA79CCB6729B0
18 changed files with 144 additions and 49 deletions
  1. +0
    -2
      .eslintrc.json
  2. +5
    -0
      .prettierrc
  3. +19
    -15
      example/src/Main.tsx
  4. +1
    -2
      example/src/index.tsx
  5. +1
    -0
      example/src/teenyui.d.ts
  6. +4
    -3
      package.json
  7. +1
    -1
      src/button/style.scss
  8. +1
    -1
      src/index.ts
  9. +18
    -0
      src/layout/container/index.tsx
  10. +22
    -0
      src/layout/container/style.scss
  11. +20
    -0
      src/layout/grid/index.tsx
  12. +33
    -0
      src/layout/grid/style.scss
  13. +0
    -7
      src/layout/header/index.tsx
  14. +0
    -3
      src/layout/header/style.scss
  15. +2
    -2
      src/layout/index.ts
  16. +0
    -7
      src/layout/layout/index.tsx
  17. +0
    -6
      src/layout/layout/style.scss
  18. +17
    -0
      src/mixins.scss

+ 0
- 2
.eslintrc.json View File

@@ -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",


+ 5
- 0
.prettierrc View File

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

+ 19
- 15
example/src/Main.tsx View File

@@ -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>
);

+ 1
- 2
example/src/index.tsx View File

@@ -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.


+ 1
- 0
example/src/teenyui.d.ts View File

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

+ 4
- 3
package.json View File

@@ -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",


+ 1
- 1
src/button/style.scss View File

@@ -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;


+ 1
- 1
src/index.ts View File

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

+ 18
- 0
src/layout/container/index.tsx View File

@@ -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;
}

+ 22
- 0
src/layout/container/style.scss View File

@@ -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;
}

+ 20
- 0
src/layout/grid/index.tsx View File

@@ -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;
}

+ 33
- 0
src/layout/grid/style.scss View File

@@ -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;
}
}

+ 0
- 7
src/layout/header/index.tsx View File

@@ -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>
);

+ 0
- 3
src/layout/header/style.scss View File

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

+ 2
- 2
src/layout/index.ts View File

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

+ 0
- 7
src/layout/layout/index.tsx View File

@@ -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>
);

+ 0
- 6
src/layout/layout/style.scss View File

@@ -1,6 +0,0 @@
.layout {
height: 100%;
width: 100%;

background-color: var(--primary-background);
}

+ 17
- 0
src/mixins.scss View File

@@ -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;
}
}
}

Loading…
Cancel
Save