start refactor core functions to typescript

package.json

@@ -20,7 +20,8 @@
 	"scripts": {
 		"postinstall": "lerna bootstrap",
 		"lern": "lerna run  watch --stream",
-		"start": "npm-run-all --parallel core:dev tailwind:plugin example:tlwd ",
+		"core": "lerna exec --scope @styled-rhythm/core -- yarn develop",
+		"start": "npm-run-all --parallel core tailwind:plugin example:tlwd ",
 		"test": "jest --watch --onlyChanged --watchman --forceExit --detectOpenHandles --notify --notifyMode=failure",
 		"docs": "lerna exec --scope @styled-rhythm/docs -- yarn start",
 		"tailwind:plugin": "lerna exec --scope @styled-rhythm/tailwindcss -- yarn start",

packages/core/package.json

@@ -4,13 +4,28 @@
 	"author": "Apostolos Christodoulou <[email protected]>",
 	"license": "MIT",
 	"main": "dist/index.js",
+	"module": "dist/index.es.js",
+	"files": [
+		"dist"
+	],
+	"types": "dist/index.d.ts",
+	"publishConfig": {
+		"access": "public"
+	},
 	"scripts": {
-		"tdd": "jest --watchAll --watchman --forceExit --detectOpenHandles --notify --notifyMode=failure",
-		"start": "node ../../scripts/parcel-start.js",
-		"build": "node ../../scripts/parcel-build.js"
+		"build": "rollup -c",
+		"develop": "rollup -cw"
 	},
 	"devDependencies": {
-		"parcel": "^1.12.4",
-		"parcel-bundler": "^1.12.4"
+		"@babel/core": "^7.6.0",
+		"@types/node": "^12.0.10",
+		"babel-loader": "8.0.6",
+		"rollup": "^1.19.4",
+		"rollup-plugin-typescript2": "^0.24.0",
+		"rollup-plugin-url": "^2.2.2",
+		"typescript": "3.6.2"
+	},
+	"dependencies": {
+		"csstype": "^2.6.9"
 	}
 }

packages/core/rollup.config.js

@@ -0,0 +1,4 @@
+import { createRollupConfig } from '../rollup.base';
+import pkg from './package.json';
+
+export default createRollupConfig(pkg);

packages/core/src/columns.ts

@@ -0,0 +1,39 @@
+import * as CSS from 'csstype';
+
+interface Style extends CSS.Properties {
+	[key: string]: any;
+}
+export const columns = ({ count }: { count: Number }): Style => {
+	return {
+		display: 'grid',
+		gridTemplateColumns: `repeat(${count}, minmax(0,1fr))`,
+		[`& > * `]: {
+			gridColumn: 'span 1',
+		},
+	};
+};
+
+export const column = ({ start, span }: { start: Number; span: Number }): Style => {
+	return {
+		gridColumn: `${start} / span ${span}`,
+	};
+};
+
+export const gap = ({ space }: { space: string }): Style => {
+	return {
+		gridRowGap: space,
+		gridColumnGap: space,
+	};
+};
+
+export const gapX = ({ space }: { space: string }): Style => {
+	return {
+		gridColumnGap: space,
+	};
+};
+
+export const gapY = ({ space }: { space: string }): Style => {
+	return {
+		gridRowGap: space,
+	};
+};

packages/core/src/index.ts

@@ -0,0 +1,5 @@
+export * from './measure';
+export * from './rhythm';
+export * from './columns';
+
+export * from './style-baseline-rel';

packages/core/src/measure.ts

@@ -0,0 +1,19 @@
+import { Properties } from 'csstype';
+
+export const measure = ({ length }: { length: Number }): Properties => {
+	return {
+		maxWidth: `${length}ch`,
+	};
+};
+
+export const measureMin = ({ length }: { length: Number }): Properties => {
+	return {
+		minWidth: `${length}ch`,
+	};
+};
+
+export const measureMax = ({ length }: { length: Number }): Properties => {
+	return {
+		maxWidth: `${length}ch`,
+	};
+};

packages/core/src/rhythm.ts

@@ -0,0 +1,29 @@
+import * as CSS from 'csstype';
+
+interface Style extends CSS.Properties {
+	[key: string]: any;
+}
+
+export const rhythm = ({ space }: { space: string }): Style => {
+	return {
+		[`& > * + * `]: {
+			marginTop: space,
+		},
+	};
+};
+
+export const rhythmY = ({ space }: { space: string }): Style => {
+	return {
+		[`& > * + * `]: {
+			marginTop: space,
+		},
+	};
+};
+
+export const rhythmX = ({ space }: { space: string }): Style => {
+	return {
+		[`& > * + * `]: {
+			marginLeft: space,
+		},
+	};
+};

packages/core/src/style-baseline-rel.js → packages/core/src/style-baseline-rel.ts

@@ -1,8 +1,48 @@
+import * as CSS from 'csstype';
+
+interface IFont {
+	upm: number;
+	capHeight: number;
+	ascent: number;
+	descent: number;
+	weight: CSS.FontWeightProperty;
+	italic: boolean;
+	familyName: CSS.FontFamilyProperty;
+	fallback: CSS.FontFamilyProperty;
+}
+
+interface ITypeStyleBaselineParams {
+	font: IFont;
+	baseline: number;
+	root: number;
+	fontSize: number;
+	leading: number;
+}
+
+type TypeStyleBaseline = {
+	fontFamily: CSS.FontFamilyProperty;
+	fontWeight: CSS.FontWeightProperty;
+	fontStyle: CSS.FontStyleProperty;
+	display: CSS.DisplayProperty;
+	fontSize: CSS.FontSizeProperty<string>;
+	lineHeight: CSS.LineHeightProperty<string | number>;
+	transform: CSS.TransformProperty;
+	paddingTop: CSS.PaddingTopProperty<string>;
+	'&:before': {
+		content: string;
+		marginTop: CSS.MarginProperty<string>;
+		display: CSS.DisplayProperty;
+		height: CSS.HeightProperty<string | number>;
+	};
+};
+
 /**
  *
  *
  */
-const styleBaseline = ({ font, baseline, root, fontSize, leading = 0 }) => {
+export const styleBaselineRel = (params: ITypeStyleBaselineParams): TypeStyleBaseline => {
+	//
+	const { font, baseline, root, fontSize, leading = 0 } = params;
 	//
 	const preventCollapse = 1;
 
@@ -53,5 +93,3 @@ const styleBaseline = ({ font, baseline, root, fontSize, leading = 0 }) => {
 		},
 	};
 };
-
-module.exports = styleBaseline;

packages/core/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.settings.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "baseUrl": "./"
+  },
+  "include": ["src/**/*"]
+}

packages/rollup.base.js

@@ -0,0 +1,25 @@
+import typescript from 'rollup-plugin-typescript2';
+import url from 'rollup-plugin-url';
+
+export const createRollupConfig = pkg => ({
+	input: ['src/index.ts'],
+	output: [
+		{
+			file: pkg.main,
+			format: 'cjs',
+			exports: 'named',
+		},
+		{
+			file: pkg.module,
+			format: 'es',
+			exports: 'named',
+		},
+	],
+	external: [...Object.keys(pkg.peerDependencies || {})],
+	plugins: [
+		typescript({
+			clean: true,
+			typescript: require('typescript'),
+		}),
+	],
+});

packages/types.d.ts

@@ -0,0 +1,4 @@
+declare const __DEV__: boolean;
+declare const __PROD__: boolean;
+declare const __BROWSER__: boolean;
+declare const __SERVER__: boolean;

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "files": [], // do not remove!
+  "extends": "./tsconfig.settings.json"
+}

tsconfig.settings.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "allowSyntheticDefaultImports": true,
+    "declaration": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "outDir": "./dist",
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": false,
+    "target": "es5",
+    "baseUrl": "./",
+    "noErrorTruncation": true,
+    "lib": ["es6", "dom"]
+  },
+  "module": "commonjs",
+  "exclude": ["node_modules"]
+}

tslint.json

@@ -0,0 +1,9 @@
+{
+  "extends": ["tslint:latest", "tslint-react"],
+  "rules": {
+    "quotemark": [true, "single"],
+    "no-submodule-imports": false,
+    "object-literal-sort-keys": false,
+    "jsx-no-multiline-js": false
+  }
+}