feat: initial commit

integrations/storybook/rollup.config.js

@@ -10,5 +10,6 @@ export default config({
     './src/register-storyconfig-panel.tsx',
     './src//docs-page/full-page.tsx',
     './src//docs-page/testing-page.tsx',
+    './src//docs-page/viewport-page.tsx',
   ],
 });

integrations/storybook/src/docs-page/viewport-page.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable react/display-name */
+import React from 'react';
+import { ViewportPage } from '@component-controls/pages';
+import { DocsContainer } from './DocsContainer';
+
+export default {
+  key: 'viewport',
+  title: 'Viewport',
+  render: ({ active }: { active: boolean }) => {
+    return (
+      <DocsContainer active={active}>
+        <ViewportPage />
+      </DocsContainer>
+    );
+  },
+};

integrations/storybook/src/preset.ts

@@ -14,6 +14,7 @@ module.exports = {
     const pages = customPages || [
       require.resolve('./full-page'),
       require.resolve('./testing-page'),
+      require.resolve('./viewport-page'),
     ];
     if (pages.length) {
       return [

plugins/viewport-plugin/.eslintignore

@@ -0,0 +1 @@
+dist

plugins/viewport-plugin/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Atanas Stoyanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

plugins/viewport-plugin/README.md

@@ -0,0 +1,30 @@
+# Table of contents
+
+- [In action](#in-action)
+- [Overview](#overview)
+- [Getting Started](#getting-started)
+  - [Install](#install)
+  - [Configure](#configure)
+  - [Pages format](#pages-format)
+  - [Examples](#examples)
+    - [Simple page](#simple-page)
+- [API](#api)
+  - [<ins>AxeAllyBlock</ins>](#insaxeallyblockins)
+  - [<ins>isSelected</ins>](#insisselectedins)
+  - [<ins>isTagSelected</ins>](#insistagselectedins)
+
+# In action
+
+[Example site](https://components-storybook-6-no-docs.netlify.app/?path=/test/components-actioncontainer--overview)
+
+# Overview
+
+# Getting Started
+
+## Install
+
+## Configure
+
+# API
+
+<react-docgen-typescript path="./src" />

plugins/viewport-plugin/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@component-controls/viewport-plugin",
+  "version": "1.2.0",
+  "private": true,
+  "description": "Viewport plugin",
+  "keywords": [
+    "addon",
+    "viewport"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "package.json",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "yarn cross-env NODE_ENV=production rollup -c",
+    "dev": "yarn cross-env NODE_ENV=development rollup -cw",
+    "docs": "ts-node  -O '{\"module\": \"commonjs\"}' ../../scripts/docs.ts",
+    "fix": "yarn lint --fix",
+    "lint": "yarn eslint . --ext mdx,ts,tsx",
+    "prepare": "yarn build",
+    "test": "yarn jest --passWithNoTests"
+  },
+  "homepage": "https://github.com/ccontrols/component-controls",
+  "bugs": {
+    "url": "https://github.com/ccontrols/component-controls/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ccontrols/component-controls.git",
+    "directory": "plugins/viewport-plugin"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@component-controls/blocks": "^1.2.0",
+    "@component-controls/components": "^1.2.0",
+    "@primer/octicons-react": "^9.6.0",
+    "react": "^16.12.0",
+    "theme-ui": "^0.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.34",
+    "typescript": "^3.8.3"
+  },
+  "peerDependencies": {
+    "@component-controls/blocks": "*",
+    "react": "*",
+    "theme-ui": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "Atanas Stoyanov"
+  ],
+  "gitHead": "c5145d66c6b8a355839e53c3bca97fd361ce9377"
+}

plugins/viewport-plugin/rollup.config.js

@@ -0,0 +1,5 @@
+import { config } from '../../rollup-config';
+
+export default config({
+  input: ['./src/index.tsx'],
+});

plugins/viewport-plugin/src/index.tsx

@@ -0,0 +1,21 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { Box, jsx } from 'theme-ui';
+
+export const ViewportBlock: FC = () => {
+  return (
+    <div>
+      <Box
+        color="black"
+        bg="#e6e5e5"
+        p={40}
+        sx={{
+          width: '2000px',
+          height: '300px',
+        }}
+      >
+        content here
+      </Box>
+    </div>
+  );
+};

plugins/viewport-plugin/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "declaration": true,
+    "resolveJsonModule": true,
+    "sourceMap": false,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "baseUrl": "./",
+    "typeRoots": ["../../node_modules/@types", "node_modules/@types"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/**"]
+}

ui/pages/package.json

@@ -31,6 +31,7 @@
   "license": "MIT",
   "dependencies": {
     "@component-controls/axe-plugin": "^1.2.0",
+    "@component-controls/viewport-plugin": "^1.2.0",
     "@component-controls/blocks": "^1.2.0",
     "react": "^16.8.3"
   },

ui/pages/src/ViewportPage/ViewportPage.tsx

@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+import { Title } from '@component-controls/blocks';
+import { ViewportBlock } from '@component-controls/viewport-plugin';
+export const ViewportPage: FC = () => (
+  <>
+    <Title />
+    <ViewportBlock />
+  </>
+);

ui/pages/src/ViewportPage/index.ts

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

ui/pages/src/index.ts

@@ -2,3 +2,4 @@ export * from './CanvasPage';
 export * from './ClassicPage';
 export * from './CurrentStoryPage';
 export * from './TestingPage';
+export * from './ViewportPage';