dotdata_widgets 0.1.0 → 0.1.1

package/README.md

@@ -1,11 +1,12 @@
 
-# dotdata_widgets
+# Dotdata widgets
 
-[![Build Status](https://travis-ci.org/dotdata/dotdata_widgets.svg?branch=master)](https://travis-ci.org/dotdata/dotdata_widgets)
-[![codecov](https://codecov.io/gh/dotdata/dotdata_widgets/branch/master/graph/badge.svg)](https://codecov.io/gh/dotdata/dotdata_widgets)
+A dotdata widget
 
-
-A Custom Jupyter Widget Library
+### Prerequisites
+1. nodejs >= 18
+2. yarn (npm install yarn -g)
+3. python 3
 
 ## Installation
 
@@ -25,8 +26,7 @@ jupyter nbextension enable --py [--sys-prefix|--user|--system] dotdata_widgets
 
 Create a dev environment:
 ```bash
-conda create -n dotdata_widgets-dev -c conda-forge nodejs yarn python jupyterlab
-conda activate dotdata_widgets-dev
+python -m venv venv/
 ```
 
 Install the python. This will also build the TS package.
@@ -54,6 +54,18 @@ the `install` command every time that you rebuild your extension. For certain in
 you might also need another flag instead of `--sys-prefix`, but we won't cover the meaning
 of those flags here.
 
+### Watch Mode
+```bash
+yarn run watch
+```
+
+### Docker 
+```bash
+git clone ...
+
+docker run -it --name dotdata_widget -v $(pwd)/dotdata_widgets:/dotdata_widgets -p 8889:8888 jupyter/scipy-notebook
+```
+
 ### How to see your changes
 #### Typescript:
 If you use JupyterLab to develop then you can watch the source directory and run JupyterLab at the same time in different

package/css/colors.css

@@ -0,0 +1,120 @@
+:root {
+  --c-red-50: #ffebee;
+  --c-red-100: #ffcdd2;
+  --c-red-200: #ef9a9a;
+  --c-red-300: #e57373;
+  --c-red-400: #ef5350;
+  --c-red-500: #f44336;
+  --c-red-600: #e53935;
+  --c-red-700: #d32f2f;
+  --c-red-800: #c62828;
+  --c-red-900: #b71c1c;
+  --c-purple-50: #f3e5f5;
+  --c-purple-100: #e1bee7;
+  --c-purple-200: #ce93d8;
+  --c-purple-300: #ba68c8;
+  --c-purple-400: #ab47bc;
+  --c-purple-500: #9c27b0;
+  --c-purple-600: #8e24aa;
+  --c-purple-700: #7b1fa2;
+  --c-purple-800: #6a1b9a;
+  --c-purple-900: #4a148c;
+  --c-cyan-50: #e0f7fa;
+  --c-cyan-100: #b2ebf2;
+  --c-cyan-200: #80deea;
+  --c-cyan-300: #4dd0e1;
+  --c-cyan-400: #26c6da;
+  --c-cyan-500: #00bcd4;
+  --c-cyan-600: #00acc1;
+  --c-cyan-700: #0097a7;
+  --c-cyan-800: #00838f;
+  --c-cyan-900: #006064;
+  --c-blue-50: #e3f2fd;
+  --c-blue-100: #bbdefb;
+  --c-blue-200: #90caf9;
+  --c-blue-300: #64b5f6;
+  --c-blue-400: #42a5f5;
+  --c-blue-500: #2196f3;
+  --c-blue-600: #1e88e5;
+  --c-blue-700: #1976d2;
+  --c-blue-800: #1565c0;
+  --c-blue-900: #0d47a1;
+  --c-light-blue-50: #e1f5fe;
+  --c-light-blue-100: #b3e5fc;
+  --c-light-blue-200: #81d4fa;
+  --c-light-blue-300: #4fc3f7;
+  --c-light-blue-400: #29b6f6;
+  --c-light-blue-500: #03a9f4;
+  --c-light-blue-600: #039be5;
+  --c-light-blue-700: #0288d1;
+  --c-light-blue-800: #0277bd;
+  --c-light-blue-900: #01579b;
+  --c-green-50: #e8f5e9;
+  --c-green-100: #c8e6c9;
+  --c-green-200: #a5d6a7;
+  --c-green-300: #81c784;
+  --c-green-400: #66bb6a;
+  --c-green-500: #4caf50;
+  --c-green-600: #43a047;
+  --c-green-700: #388e3c;
+  --c-green-800: #2e7d32;
+  --c-light-green-50: #f1f8e9;
+  --c-light-green-100: #dcedc8;
+  --c-light-green-200: #c5e1a5;
+  --c-light-green-300: #aed581;
+  --c-light-green-400: #9ccc65;
+  --c-light-green-500: #8bc34a;
+  --c-light-green-600: #7cb342;
+  --c-light-green-700: #689f38;
+  --c-light-green-800: #558b2f;
+  --c-light-green-900: #33691e;
+  --c-yellow-50: #fffde7;
+  --c-yellow-100: #fff9c4;
+  --c-yellow-200: #fff59d;
+  --c-yellow-300: #fff176;
+  --c-yellow-400: #ffee58;
+  --c-yellow-500: #ffeb3b;
+  --c-yellow-600: #fdd835;
+  --c-yellow-700: #fbc02d;
+  --c-yellow-800: #f9a825;
+  --c-yellow-900: #f57f17;
+  --c-amber-100: #ffecb3;
+  --c-amber-200: #ffe082;
+  --c-amber-300: #ffd54f;
+  --c-amber-400: #ffca28;
+  --c-amber-500: #ffc107;
+  --c-amber-600: #ffb300;
+  --c-amber-700: #ffa000;
+  --c-amber-800: #ff8f00;
+  --c-amber-900: #ff6f00;
+  --c-orange-50: #fff3e0;
+  --c-orange-100: #ffe0b2;
+  --c-orange-200: #ffcc80;
+  --c-orange-300: #ffb74d;
+  --c-orange-400: #ffa726;
+  --c-orange-500: #ff9800;
+  --c-orange-600: #fb8c00;
+  --c-orange-700: #f57c00;
+  --c-orange-800: #ef6c00;
+  --c-orange-900: #e65100;
+  --c-brown-50: #efebe9;
+  --c-brown-100: #d7ccc8;
+  --c-brown-200: #bcaaa4;
+  --c-brown-300: #a1887f;
+  --c-brown-400: #8d6e63;
+  --c-brown-500: #795548;
+  --c-brown-600: #6d4c41;
+  --c-brown-700: #5d4037;
+  --c-brown-800: #4e342e;
+  --c-brown-900: #3e2723;
+  --c-grey-50: #fafafa;
+  --c-grey-100: #f5f5f5;
+  --c-grey-200: #eee;
+  --c-grey-300: #e0e0e0;
+  --c-grey-400: #bdbdbd;
+  --c-grey-500: #9e9e9e;
+  --c-grey-600: #757575;
+  --c-grey-700: #616161;
+  --c-grey-800: #424242;
+  --c-grey-900: #212121;
+}

package/css/typography.css

@@ -0,0 +1,35 @@
+h1,
+.h1 {
+  font-size: 24px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0;
+}
+
+h2,
+.h2 {
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 30px;
+  letter-spacing: 0;
+}
+
+h3,
+.h3 {
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 26px;
+  letter-spacing: 0;
+}
+
+.label {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.label-bold {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}

package/css/widget.css

@@ -1,4 +1,54 @@
-.custom-widget {
-  background-color: lightseagreen;
-  padding: 0px 2px;
+@import url('~@fontsource/roboto');
+@import url('~@fontsource/roboto/500.css');
+
+@import url('colors.css');
+@import url('typography.css');
+
+@import url('../src/components/accordion/accordion.css');
+@import url('../src/components/input/input.css');
+
+:root {
+  --c-text: var(--c-grey-900);
+
+  /* TABLE */
+  --table-border-color: var(--c-grey-300);
+  --table-header-color: var(--c-grey-600);
+  --table-row-height: 30px;
+}
+
+.dotdata-widget {
+  font-family: Roboto, serif;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--c-text);
+}
+
+h1,
+h2,
+h3 {
+  margin-block: 0.4em;
+}
+
+.grey-label {
+  color: var(--c-grey-700);
+}
+
+.table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.table :is(th, td) {
+  padding: 0.3rem;
+  min-width: 50px;
+}
+
+.table :is(tr) {
+  height: var(--table-row-height);
+}
+
+.table th {
+  color: var(--table-header-color);
+  border-bottom: 1px solid var(--c-grey-300);
+  text-align: start;
 }