feat(@lapidist/image): init (#14)

* feat(@lapidist/image): init

* feat(@lapidist/image): initial implementation

packages/image/.npmignore

@@ -0,0 +1,9 @@
+*.ts
+!*.d.ts
+*.spec.js
+*.spec.d.ts
+*.tsx
+*.mdx
+tsconfig.json
+__snapshots__
+jest.config.js

packages/image/jest.config.js

@@ -0,0 +1 @@
+module.exports = require('../../jest.config');

packages/image/package.json

@@ -0,0 +1,29 @@
+{
+    "name": "@lapidist/image",
+    "version": "0.0.0",
+    "description": "Image component",
+    "author": "Brett Dorrans <[email protected]>",
+    "license": "MIT",
+    "main": "src/index.js",
+    "scripts": {
+        "build": "tsc -p tsconfig.json",
+        "test": "jest"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "release": {
+        "analyzeCommits": {
+            "preset": "angular",
+            "releaseRules": [
+                {
+                    "type": "build",
+                    "release": "minor"
+                }
+            ]
+        }
+    },
+    "dependencies": {
+        "@lapidist/theme-provider": "^1.15.0"
+    }
+}

packages/image/src/Image.spec.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-styled-components';
+
+import Image from './index';
+
+test('it works', () => {
+    const tree = renderer
+        .create(<Image src="https://placehold.it/500x500" alt="image" />)
+        .toJSON();
+    expect(tree).toMatchSnapshot();
+});

packages/image/src/__snapshots__/Image.spec.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it works 1`] = `
+.c0 {
+  padding-bottom: 16px;
+  display: block;
+  width: 100%;
+}
+
+<img
+  alt="image"
+  className="c0"
+  src="https://placehold.it/500x500"
+/>
+`;

packages/image/src/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import { defaultTheme } from '@lapidist/theme-provider';
+
+export interface ImageProps {
+    /** The Image's id. */
+    readonly id?: string;
+    /** The Image's classname. */
+    readonly className?: string;
+    /** The Image's alt tag. */
+    readonly alt?: string;
+    /** The Image's src. */
+    readonly src: string;
+}
+
+const ImageContainer: React.FC<ImageProps> = ({ id, className, src, alt }) => (
+    <img id={id} className={className} src={src} alt={alt} />
+);
+
+const Image: React.FC<ImageProps> = styled(ImageContainer)<ImageProps>`
+    padding-bottom: ${defaultTheme.sizing.m};
+    display: block;
+    width: 100%;
+`;
+
+export default Image;

packages/image/tsconfig.json

@@ -0,0 +1,5 @@
+{
+    "$schema": "http://json.schemastore.org/tsconfig",
+    "extends": "../../tsconfig.base.json",
+    "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

yarn.lock

@@ -468,6 +468,11 @@
   resolved "https://registry.npmjs.org/@lapidist/theme-provider/-/theme-provider-1.14.0.tgz#30d0b7fc5aac14299321fcd9cbcf819faab97ed3"
   integrity sha512-26IxvlE7H4s0G05kjfPoouQTVmJfwh/VDmF8cZu23BvIANs92hLzZmYeE/g4Hd/VYf4lCzCIsfe51C7ELRDHwQ==
 
+"@lapidist/theme-provider@^1.15.0":
+  version "1.15.0"
+  resolved "https://registry.npmjs.org/@lapidist/theme-provider/-/theme-provider-1.15.0.tgz#7797a3b0196e594945e0d8a670c38be1ba6d357c"
+  integrity sha512-euOmSZFKvv/v5+pLKnW6iRp7rp98QrZDohaFDUIb124G58RZNn4Jl/mV4HqmSwxBxILlWFHw2BZiIVj1+YJw8A==
+
 "@lapidist/theme-provider@^1.5.0", "@lapidist/theme-provider@^1.7.0":
   version "1.9.0"
   resolved "https://registry.npmjs.org/@lapidist/theme-provider/-/theme-provider-1.9.0.tgz#5f90c86b4a99e0974b76d798d4adc16ab2aa7cc9"