diff --git a/.Rbuildignore b/.Rbuildignore deleted file mode 100644 index 0bb1753a..00000000 --- a/.Rbuildignore +++ /dev/null @@ -1,34 +0,0 @@ -# ignore JS config files/folders -node_modules/ -coverage/ -src/ -lib/ -.babelrc -.builderrc -.eslintrc -.npmignore -.editorconfig -.eslintignore -.prettierrc -.circleci -.github - -# demo folder has special meaning in R -# this should hopefully make it still -# allow for the possibility to make R demos -demo/.*\.js -demo/.*\.html -demo/.*\.css - -# ignore Python files/folders -setup.py -usage.py -setup.py -requirements.txt -MANIFEST.in -CHANGELOG.md -test/ -# CRAN has weird LICENSE requirements -LICENSE.txt -^.*\.Rproj$ -^\.Rproj\.user$ diff --git a/.builderrc b/.builderrc deleted file mode 100644 index 8cf7af30..00000000 --- a/.builderrc +++ /dev/null @@ -1,3 +0,0 @@ ---- -archetypes: - - dash-components-archetype diff --git a/.circleci/config.yml b/.circleci/config.yml deleted file mode 100644 index 5267779d..00000000 --- a/.circleci/config.yml +++ /dev/null @@ -1,100 +0,0 @@ -version: 2 - -jobs: - percy-finalize: - docker: - - image: percyio/agent - auth: - username: dashautomation - password: $DASH_PAT_DOCKERHUB - steps: - - run: percy finalize --all - - python-2.7: &test-template - docker: - - image: circleci/python:2.7.18-stretch-node-browsers - auth: - username: dashautomation - password: $DASH_PAT_DOCKERHUB - environment: - PYTHON_VERSION: py27 - PERCY_ENABLE: 0 - - working_directory: ~/repo - - steps: - - checkout - - - run: - name: ✍️ Write job name - command: echo $CIRCLE_JOB > circlejob.txt - - - run: - name: 🏗️ Install dependencies - command: | - sudo pip install virtualenv --upgrade - python -m venv venv || virtualenv venv - . venv/bin/activate - pip install -r dev-requirements.txt - npm ci - - - run: - name: 🏗️ Install dependencies (dash) - command: | - git clone --depth 1 git@github.com:plotly/dash.git dash-main - git clone --depth 1 git@github.com:plotly/dash-core-components.git - git clone --depth 1 git@github.com:plotly/dash-table.git - . venv/bin/activate - pip install -e ./dash-main[testing,dev] --quiet - renderer build - cd dash-core-components && npm ci && npm run build && pip install -e . && cd .. - cd dash-table && npm ci && npm run build && pip install -e . && cd .. - - - run: - name: 🧰 Build - command: | - . venv/bin/activate - python --version - npm run clean - npm run build - - - run: - name: 🧪 Run tests - command: | - . venv/bin/activate - python --version - npm run test - - python-3.6: - <<: *test-template - docker: - - image: circleci/python:3.6.13-stretch-node-browsers - auth: - username: dashautomation - password: $DASH_PAT_DOCKERHUB - environment: - PYTHON_VERSION: py36 - PERCY_ENABLE: 0 - - python-3.9: - <<: *test-template - docker: - - image: circleci/python:3.9.2-buster-node-browsers - auth: - username: dashautomation - password: $DASH_PAT_DOCKERHUB - environment: - PYTHON_VERSION: py39 - PERCY_ENABLE: 1 - PERCY_PARALLEL_TOTAL: -1 - -workflows: - version: 2 - build: - jobs: - - python-2.7 - - python-3.6 - - python-3.9 - - percy-finalize: - requires: - - python-3.9 diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 6e8965cf..00000000 --- a/.eslintignore +++ /dev/null @@ -1,16 +0,0 @@ -.tox -build/ -dist/ -node_modules/ -.npm -vv/ -venv/ -*.pyc -*.egg-info -*.log -.DS_Store -lib/bundle.js -lib/bundle.js.map -lib/metadata.json -.idea -dash_html_components/ diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 7082e142..00000000 --- a/.eslintrc +++ /dev/null @@ -1,121 +0,0 @@ -{ - "extends": ["eslint:recommended"], - "parser": "babel-eslint", - "parserOptions": { - "ecmaVersion": 6, - "sourceType": "module", - "ecmaFeatures": { - "arrowFunctions": true, - "blockBindings": true, - "classes": true, - "defaultParams": true, - "destructuring": true, - "forOf": true, - "generators": true, - "modules": true, - "templateStrings": true, - "jsx": true - } - }, - "env": { - "browser": true, - "es6": true, - "jasmine": true, - "jest": true, - "node": true - }, - "globals": { - "jest": true - }, - "plugins": [ - "react", - "import" - ], - "rules": { - "accessor-pairs": ["error"], - "block-scoped-var": ["error"], - "consistent-return": ["error"], - "curly": ["error", "multi-line"], - "default-case": ["error"], - "dot-location": ["off"], - "dot-notation": ["error"], - "eqeqeq": ["error"], - "guard-for-in": ["off"], - "import/named": ["off"], - "import/no-duplicates": ["error"], - "import/no-named-as-default": ["error"], - "new-cap": ["error"], - "no-alert": [1], - "no-caller": ["error"], - "no-case-declarations": ["error"], - "no-console": ["off"], - "no-div-regex": ["error"], - "no-dupe-keys": ["error"], - "no-else-return": ["error"], - "no-empty-pattern": ["error"], - "no-eq-null": ["error"], - "no-eval": ["error"], - "no-extend-native": ["error"], - "no-extra-bind": ["error"], - "no-extra-boolean-cast": ["error"], - "no-inline-comments": ["error"], - "no-implicit-coercion": ["error"], - "no-implied-eval": ["error"], - "no-inner-declarations": ["off"], - "no-invalid-this": ["error"], - "no-iterator": ["error"], - "no-labels": ["error"], - "no-lone-blocks": ["error"], - "no-loop-func": ["error"], - "no-multi-str": ["error"], - "no-native-reassign": ["error"], - "no-new": ["error"], - "no-new-func": ["error"], - "no-new-wrappers": ["error"], - "no-param-reassign": ["error"], - "no-process-env": ["warn"], - "no-proto": ["error"], - "no-redeclare": ["error"], - "no-return-assign": ["error"], - "no-script-url": ["error"], - "no-self-compare": ["error"], - "no-sequences": ["error"], - "no-shadow": ["off"], - "no-throw-literal": ["error"], - "no-undefined": ["error"], - "no-unused-expressions": ["error"], - "no-use-before-define": ["error", "nofunc"], - "no-useless-call": ["error"], - "no-useless-concat": ["error"], - "no-with": ["error"], - "prefer-const": ["error"], - "radix": ["error"], - "react/jsx-no-duplicate-props": ["error"], - "react/jsx-no-undef": ["error"], - "react/jsx-uses-react": ["error"], - "react/jsx-uses-vars": ["error"], - "react/no-did-update-set-state": ["error"], - "react/no-direct-mutation-state": ["error"], - "react/no-is-mounted": ["error"], - "react/no-unknown-property": ["error"], - "react/prefer-es6-class": ["error", "always"], - "react/prop-types": "error", - "valid-jsdoc": ["off"], - "yoda": ["error"], - "spaced-comment": ["error", "always", { - "block": { - "exceptions": ["*"] - } - }], - "no-unused-vars": ["error", { - "args": "after-used", - "argsIgnorePattern": "^_", - "caughtErrorsIgnorePattern": "^e$" - }], - "no-magic-numbers": ["error", { - "ignoreArrayIndexes": true, - "ignore": [-1, 0, 1, 2, 3, 100, 10, 0.5] - }], - "no-underscore-dangle": ["off"] - } -} diff --git a/.gitignore b/.gitignore index ddc9da8c..0fc616f6 100644 --- a/.gitignore +++ b/.gitignore @@ -20,7 +20,6 @@ Project.toml /src /build -/dash_html_components /deps /inst /man diff --git a/.pylintrc b/.pylintrc deleted file mode 100644 index 0893bd26..00000000 --- a/.pylintrc +++ /dev/null @@ -1,561 +0,0 @@ -[MASTER] - -# A comma-separated list of package or module names from where C extensions may -# be loaded. Extensions are loading into the active Python interpreter and may -# run arbitrary code -extension-pkg-whitelist= - -# Add files or directories to the blacklist. They should be base names, not -# paths. -ignore=CVS - -# Add files or directories matching the regex patterns to the blacklist. The -# regex matches against base names, not paths. -ignore-patterns= - -# Python code to execute, usually for sys.path manipulation such as -# pygtk.require(). -#init-hook= - -# Use multiple processes to speed up Pylint. -jobs=4 - -# List of plugins (as comma separated values of python modules names) to load, -# usually to register additional checkers. -load-plugins= - -# Pickle collected data for later comparisons. -persistent=no - -# Specify a configuration file. -#rcfile= - -# When enabled, pylint would attempt to guess common misconfiguration and emit -# user-friendly hints instead of false-positive error messages -suggestion-mode=yes - -# Allow loading of arbitrary C extensions. Extensions are imported into the -# active Python interpreter and may run arbitrary code. -unsafe-load-any-extension=no - - -[MESSAGES CONTROL] - -# Only show warnings with the listed confidence levels. Leave empty to show -# all. Valid levels: HIGH, INFERENCE, INFERENCE_FAILURE, UNDEFINED -confidence= - -# Disable the message, report, category or checker with the given id(s). You -# can either give multiple identifiers separated by comma (,) or put this -# option multiple times (only on the command line, not in the configuration -# file where it should appear only once).You can also use "--disable=all" to -# disable everything first and then reenable specific checks. For example, if -# you want to run only the similarities checker, you can use "--disable=all -# --enable=similarities". If you want to run only the classes checker, but have -# no Warning level messages displayed, use"--disable=all --enable=classes -# --disable=W" -disable=print-statement, - parameter-unpacking, - unpacking-in-except, - old-raise-syntax, - backtick, - long-suffix, - old-ne-operator, - old-octal-literal, - import-star-module-level, - non-ascii-bytes-literal, - invalid-unicode-literal, - raw-checker-failed, - bad-inline-option, - locally-disabled, - locally-enabled, - file-ignored, - suppressed-message, - useless-suppression, - deprecated-pragma, - apply-builtin, - basestring-builtin, - buffer-builtin, - cmp-builtin, - coerce-builtin, - execfile-builtin, - file-builtin, - long-builtin, - raw_input-builtin, - reduce-builtin, - standarderror-builtin, - unicode-builtin, - xrange-builtin, - coerce-method, - delslice-method, - getslice-method, - setslice-method, - no-absolute-import, - old-division, - dict-iter-method, - dict-view-method, - next-method-called, - metaclass-assignment, - indexing-exception, - raising-string, - reload-builtin, - oct-method, - hex-method, - nonzero-method, - cmp-method, - input-builtin, - round-builtin, - intern-builtin, - unichr-builtin, - map-builtin-not-iterating, - zip-builtin-not-iterating, - range-builtin-not-iterating, - filter-builtin-not-iterating, - using-cmp-argument, - eq-without-hash, - div-method, - idiv-method, - rdiv-method, - exception-message-attribute, - invalid-str-codec, - sys-max-int, - bad-python3-import, - deprecated-string-function, - deprecated-str-translate-call, - deprecated-itertools-function, - deprecated-types-field, - next-method-defined, - dict-items-not-iterating, - dict-keys-not-iterating, - dict-values-not-iterating, - deprecated-operator-function, - deprecated-urllib-function, - xreadlines-attribute, - deprecated-sys-function, - exception-escape, - comprehension-escape - #duplicate-code, - #unused-argument, - #line-too-long, - #redefined-builtin, - #missing-docstring, - #invalid-name, - #too-many-ancestors, - #bad-whitespace, - #bad-continuation, - #too-many-locals, - #too-many-arguments, - #consider-iterating-dictionary, - #no-else-return, - #wrong-import-position, - #assign-to-new-keyword - -# Enable the message, report, category or checker with the given id(s). You can -# either give multiple identifier separated by comma (,) or put this option -# multiple time (only on the command line, not in the configuration file where -# it should appear only once). See also the "--disable" option for examples. -enable=c-extension-no-member - - -[REPORTS] - -# Python expression which should return a note less than 10 (10 is the highest -# note). You have access to the variables errors warning, statement which -# respectively contain the number of errors / warnings messages and the total -# number of statements analyzed. This is used by the global evaluation report -# (RP0004). -evaluation=10.0 - ((float(5 * error + warning + refactor + convention) / statement) * 10) - -# Template used to display messages. This is a python new-style format string -# used to format the message information. See doc for all details -#msg-template= - -# Set the output format. Available formats are text, parseable, colorized, json -# and msvs (visual studio).You can also give a reporter class, eg -# mypackage.mymodule.MyReporterClass. -output-format=text - -# Tells whether to display a full report or only the messages -reports=yes - -# Activate the evaluation score. -score=no - - -[REFACTORING] - -# Maximum number of nested blocks for function / method body -max-nested-blocks=5 - -# Complete name of functions that never returns. When checking for -# inconsistent-return-statements if a never returning function is called then -# it will be considered as an explicit return statement and no message will be -# printed. -never-returning-functions=optparse.Values,sys.exit - - -[BASIC] - -# Naming style matching correct argument names -argument-naming-style=snake_case - -# Regular expression matching correct argument names. Overrides argument- -# naming-style -#argument-rgx= - -# Naming style matching correct attribute names -attr-naming-style=snake_case - -# Regular expression matching correct attribute names. Overrides attr-naming- -# style -#attr-rgx= - -# Bad variable names which should always be refused, separated by a comma -bad-names=foo, - bar, - baz, - toto, - tutu, - tata - -# Naming style matching correct class attribute names -class-attribute-naming-style=any - -# Regular expression matching correct class attribute names. Overrides class- -# attribute-naming-style -#class-attribute-rgx= - -# Naming style matching correct class names -class-naming-style=PascalCase - -# Regular expression matching correct class names. Overrides class-naming-style -#class-rgx= - -# Naming style matching correct constant names -const-naming-style=UPPER_CASE - -# Regular expression matching correct constant names. Overrides const-naming- -# style -#const-rgx= - -# Minimum line length for functions/classes that require docstrings, shorter -# ones are exempt. -docstring-min-length=-1 - -# Naming style matching correct function names -function-naming-style=snake_case - -# Regular expression matching correct function names. Overrides function- -# naming-style -#function-rgx= - -# Good variable names which should always be accepted, separated by a comma -good-names=i, - j, - k, - ex, - Run, - _ - -# Include a hint for the correct naming format with invalid-name -include-naming-hint=no - -# Naming style matching correct inline iteration names -inlinevar-naming-style=any - -# Regular expression matching correct inline iteration names. Overrides -# inlinevar-naming-style -#inlinevar-rgx= - -# Naming style matching correct method names -method-naming-style=snake_case - -# Regular expression matching correct method names. Overrides method-naming- -# style -#method-rgx= - -# Naming style matching correct module names -module-naming-style=snake_case - -# Regular expression matching correct module names. Overrides module-naming- -# style -#module-rgx= - -# Colon-delimited sets of names that determine each other's naming style when -# the name regexes allow several styles. -name-group= - -# Regular expression which should only match function or class names that do -# not require a docstring. -no-docstring-rgx=^_ - -# List of decorators that produce properties, such as abc.abstractproperty. Add -# to this list to register other decorators that produce valid properties. -property-classes=abc.abstractproperty - -# Naming style matching correct variable names -variable-naming-style=snake_case - -# Regular expression matching correct variable names. Overrides variable- -# naming-style -#variable-rgx= - - -[FORMAT] - -# Expected format of line ending, e.g. empty (any line ending), LF or CRLF. -expected-line-ending-format= - -# Regexp for a line that is allowed to be longer than the limit. -ignore-long-lines=^\s*(# )??$ - -# Number of spaces of indent required inside a hanging or continued line. -indent-after-paren=4 - -# String used as indentation unit. This is usually " " (4 spaces) or "\t" (1 -# tab). -indent-string=' ' - -# Maximum number of characters on a single line. -max-line-length=120 - -# Maximum number of lines in a module -max-module-lines=1000 - -# List of optional constructs for which whitespace checking is disabled. `dict- -# separator` is used to allow tabulation in dicts, etc.: {1 : 1,\n222: 2}. -# `trailing-comma` allows a space between comma and closing bracket: (a, ). -# `empty-line` allows space-only lines. -no-space-check=trailing-comma, - dict-separator - -# Allow the body of a class to be on the same line as the declaration if body -# contains single statement. -single-line-class-stmt=no - -# Allow the body of an if to be on the same line as the test if there is no -# else. -single-line-if-stmt=no - - -[LOGGING] - -# Logging modules to check that the string format arguments are in logging -# function parameter format -logging-modules=logging - - -[MISCELLANEOUS] - -# List of note tags to take in consideration, separated by a comma. -notes=FIXME, - XXX, - TODO - - -[SIMILARITIES] - -# Ignore comments when computing similarities. -ignore-comments=yes - -# Ignore docstrings when computing similarities. -ignore-docstrings=yes - -# Ignore imports when computing similarities. -ignore-imports=no - -# Minimum lines number of a similarity. -min-similarity-lines=4 - - -[SPELLING] - -# Limits count of emitted suggestions for spelling mistakes -max-spelling-suggestions=4 - -# Spelling dictionary name. Available dictionaries: none. To make it working -# install python-enchant package. -spelling-dict= - -# List of comma separated words that should not be checked. -spelling-ignore-words= - -# A path to a file that contains private dictionary; one word per line. -spelling-private-dict-file= - -# Tells whether to store unknown words to indicated private dictionary in -# --spelling-private-dict-file option instead of raising a message. -spelling-store-unknown-words=no - - -[TYPECHECK] - -# List of decorators that produce context managers, such as -# contextlib.contextmanager. Add to this list to register other decorators that -# produce valid context managers. -contextmanager-decorators=contextlib.contextmanager - -# List of members which are set dynamically and missed by pylint inference -# system, and so shouldn't trigger E1101 when accessed. Python regular -# expressions are accepted. -generated-members= - -# Tells whether missing members accessed in mixin class should be ignored. A -# mixin class is detected if its name ends with "mixin" (case insensitive). -ignore-mixin-members=yes - -# This flag controls whether pylint should warn about no-member and similar -# checks whenever an opaque object is returned when inferring. The inference -# can return multiple potential results while evaluating a Python object, but -# some branches might not be evaluated, which results in partial inference. In -# that case, it might be useful to still emit no-member and other checks for -# the rest of the inferred objects. -ignore-on-opaque-inference=yes - -# List of class names for which member attributes should not be checked (useful -# for classes with dynamically set attributes). This supports the use of -# qualified names. -ignored-classes=optparse.Values,thread._local,_thread._local - -# List of module names for which member attributes should not be checked -# (useful for modules/projects where namespaces are manipulated during runtime -# and thus existing member attributes cannot be deduced by static analysis. It -# supports qualified module names, as well as Unix pattern matching. -ignored-modules= - -# Show a hint with possible names when a member name was not found. The aspect -# of finding the hint is based on edit distance. -missing-member-hint=yes - -# The minimum edit distance a name should have in order to be considered a -# similar match for a missing member name. -missing-member-hint-distance=1 - -# The total number of similar names that should be taken in consideration when -# showing a hint for a missing member. -missing-member-max-choices=1 - - -[VARIABLES] - -# List of additional names supposed to be defined in builtins. Remember that -# you should avoid to define new builtins when possible. -additional-builtins= - -# Tells whether unused global variables should be treated as a violation. -allow-global-unused-variables=yes - -# List of strings which can identify a callback function by name. A callback -# name must start or end with one of those strings. -callbacks=cb_, - _cb - -# A regular expression matching the name of dummy variables (i.e. expectedly -# not used). -dummy-variables-rgx=_+$|(_[a-zA-Z0-9_]*[a-zA-Z0-9]+?$)|dummy|^ignored_|^unused_ - -# Argument names that match this expression will be ignored. Default to name -# with leading underscore -ignored-argument-names=_.*|^ignored_|^unused_ - -# Tells whether we should check for unused import in __init__ files. -init-import=no - -# List of qualified module names which can have objects that can redefine -# builtins. -redefining-builtins-modules=six.moves,past.builtins,future.builtins,io,builtins - - -[CLASSES] - -# List of method names used to declare (i.e. assign) instance attributes. -defining-attr-methods=__init__, - __new__, - setUp - -# List of member names, which should be excluded from the protected access -# warning. -exclude-protected=_asdict, - _fields, - _replace, - _source, - _make - -# List of valid names for the first argument in a class method. -valid-classmethod-first-arg=cls - -# List of valid names for the first argument in a metaclass class method. -valid-metaclass-classmethod-first-arg=mcs - - -[DESIGN] - -# Maximum number of arguments for function / method -max-args=5 - -# Maximum number of attributes for a class (see R0902). -max-attributes=7 - -# Maximum number of boolean expressions in a if statement -max-bool-expr=5 - -# Maximum number of branch for function / method body -max-branches=12 - -# Maximum number of locals for function / method body -max-locals=15 - -# Maximum number of parents for a class (see R0901). -max-parents=7 - -# Maximum number of public methods for a class (see R0904). -max-public-methods=20 - -# Maximum number of return / yield for function / method body -max-returns=6 - -# Maximum number of statements in function / method body -max-statements=50 - -# Minimum number of public methods for a class (see R0903). -min-public-methods=2 - - -[IMPORTS] - -# Allow wildcard imports from modules that define __all__. -allow-wildcard-with-all=yes - -# Analyse import fallback blocks. This can be used to support both Python 2 and -# 3 compatible code, which means that the block might have code that exists -# only in one or another interpreter, leading to false positives when analysed. -analyse-fallback-blocks=no - -# Deprecated modules which should not be used, separated by a comma -deprecated-modules=optparse,tkinter.tix - -# Create a graph of external dependencies in the given file (report RP0402 must -# not be disabled) -ext-import-graph= - -# Create a graph of every (i.e. internal and external) dependencies in the -# given file (report RP0402 must not be disabled) -import-graph= - -# Create a graph of internal dependencies in the given file (report RP0402 must -# not be disabled) -int-import-graph= - -# Force import order to recognize a module as part of the standard -# compatibility libraries. -known-standard-library= - -# Force import order to recognize a module as part of a third party library. -known-third-party=enchant - - -[EXCEPTIONS] - -# Exceptions that will emit a warning when being caught. Defaults to -# "Exception" -overgeneral-exceptions=Exception diff --git a/CHANGELOG.md b/CHANGELOG.md index 82a3b54a..3e0e9916 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/). +## [2.0.0] - 2021-08-23 + +As of Dash 2, the development of dash-html-components has been moved to the [main Dash repo](https://github.com/plotly/dash) + +This package exists for backward compatibility + ## [1.1.4] - 2021-07-09 ### Changed diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c6e57a37..fddd6840 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,3 +1,9 @@ +# Notice + +As of Dash 2, the development of dash-html-components has been moved to the [main Dash repo](https://github.com/plotly/dash) + +--- + # Contributing to dash-html-components ## Getting Started diff --git a/MANIFEST.in b/MANIFEST.in index d74677d2..7425f8e8 100644 --- a/MANIFEST.in +++ b/MANIFEST.in @@ -1,7 +1,2 @@ -include dash_html_components/dash_html_components.min.js -include dash_html_components/dash_html_components.min.js.map -include dash_html_components/metadata.json -include dash_html_components/package-info.json include LICENSE.md include README.md -include package.json diff --git a/README.md b/README.md index a7408d26..852fd194 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,11 @@ +# Notice + +As of Dash 2, the development of dash-html-components has been moved to the [main Dash repo](https://github.com/plotly/dash) + +This package exists for backward compatibility + +--- + # dash-html-components Vanilla HTML components for [Dash][] diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index 37c94a31..00000000 --- a/babel.config.js +++ /dev/null @@ -1,6 +0,0 @@ -const presets = [ - '@babel/preset-env', - '@babel/preset-react' -]; - -module.exports = { presets }; diff --git a/dash-info.yaml b/dash-info.yaml deleted file mode 100644 index 0193c8b4..00000000 --- a/dash-info.yaml +++ /dev/null @@ -1,2744 +0,0 @@ -pkg_help_description: >- - 'Dash' is a web application framework that - provides pure Python and R abstraction around HTML, CSS, and - JavaScript. Instead of writing HTML or using an HTML - templating engine, you compose your layout using R - functions within the 'dashHtmlComponents' package. The - source for this package is on GitHub: - plotly/dash-html-components. -pkg_help_title: >- - Vanilla HTML Components for 'Dash' -pkg_authors: >- - c(person("Chris", "Parmer", email = "chris@plotly.com", role = c("aut")), person("Ryan Patrick", "Kyle", email = "ryan@plotly.com", role = c("cre"), comment = c(ORCID = "0000-0002-4958-2844")), person(family = "Plotly Technologies, Inc.", role = "cph")) -pkg_copyright: >- - Plotly Technologies, Inc. -r_examples: - - name: htmlA - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlA(children='Link to external site', - href='https://plotly.com', - target='_blank') - ) - ) - ) - - app$run_server() - } - - name: htmlAbbr - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlAbbr(children='Hello! htmlAbbr at work!', - title='\U{1F50D} Hover over this line for a few seconds and see the text box appear...') - ) - ) - ) - - app$run_server() - } - - name: htmlAcronym - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlAcronym(children='ASAP', - title='Mouse over these words to see the acronym for \'as soon as possible\'.') - ) - ) - ) - - app$run_server() - } - - name: htmlAddress - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlAddress(children='5555 Avenue de Gaspe, Montreal QC H2T 2A3') - ) - ) - ) - - app$run_server() - } - - name: htmlArea - dontrun: FALSE - code: | - # The URL below has been chunked to comply with CRAN - # requirements; the use of file.path is optional and not required - # for this component. - if (interactive()) { - library(dash) - - app$layout( - htmlDiv(list( - htmlImg(src = file.path('https://upload.wikimedia.org', - 'wikipedia/commons/0/0c', - 'PIA17351-ApparentSizes-MarsDeimosPhobos-EarthMoon.jpg', - fsep = '/'), - useMap = '#image-map'), - htmlMapEl(list( - htmlArea(target='_blank', - alt='Deimos', - title='Deimos', - href='https://en.wikipedia.org/wiki/Deimos_(moon)', - coords='5,114,32,147', - shape='rect'), - htmlArea(target='_blank', - alt='Phobos', - title='Phobos', - href='https://en.wikipedia.org/wiki/Phobos_(moon)', - coords='113,196,32,103', - shape='rect'), - htmlArea(target='_blank', - alt='Moon', - title='Moon', - href='https://en.wikipedia.org/wiki/Moon', - coords='127,285,294,1', - shape='rect') - ), - name = 'image-map' - ), - htmlDiv(children = 'Click on the image to visit a Wikipedia article', - id = 'object-name') - ) - ) - ) - - app$run_server() - } - - name: htmlArticle - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlArticle(list( - htmlH2('Dash for R launched!'), - htmlP('Dash is a user interface library for creating analytical\n - web applications. Those who use R for data analysis, data\n - exploration, visualization, modelling, instrument control,\n - and reporting will find immediate use for Dash for R.'), - htmlAside('Plotly is a technical computing company with offices\n - in Montreal, Canada and Cambridge, Massachusetts.') - ) - ) - ) - ) - ) - - app$run_server() - } - - name: htmlAside - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlArticle(list( - htmlH2('Dash for R launched!'), - htmlP('Dash is a user interface library for creating analytical\n - web applications. Those who use R for data analysis, data\n - exploration, visualization, modelling, instrument control,\n - and reporting will find immediate use for Dash for R.'), - htmlAside('Plotly is a technical computing company with offices\n - in Montreal, Canada and Cambridge, Massachusetts.') - ) - ) - ) - ) - ) - - app$run_server() - } - - name: htmlAudio - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlAudio(src='https://www.nasa.gov/62284main_onesmall2.wav', - controls=TRUE, - title='Apollo 11 - July 16, 1969 - Neil Armstrong') - ) - ) - ) - - app$run_server() - } - - name: htmlB - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlB(children="This is a bold statement!"), - htmlP(children="This is not so bold.") - ) - ) - ) - - app$run_server() - } - - name: htmlBase - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlBase(href="https://www.w3schools.com/"), - htmlA(children="HTML base tag", href="tags/tag_base.asp") - ) - ) - ) - - app$run_server() - } - - name: htmlBasefont - dontrun: FALSE - code: | - if (interactive()) { - # This feature is obsolete. It may still work in some - # browsers, but could stop working at any time. Try to - # avoid using this component. - # - # Instead, use CSS properties to set font, font-family, - # font-size and color. - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlBasefont(color="FF0000", - face="Helvetica", - size="+2"), - htmlP(children="If it works, this will be Helvetica but a couple point sizes larger.") - ) - ) - ) - - app$run_server() - } - - name: htmlBdi - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlP(children="This text is 'Aladdin', but in Arabic script:"), - htmlBdi(children=paste0("\U{0639}\U{0644}\U{0627}\U{0621}", - "\U{0627}\U{0644}\U{062F}\U{064A}\U{0646}")) - ) - ) - ) - - app$run_server() - } - - name: htmlBdo - dontrun: FALSE - code: | - if (interactive()) { - # This element supports bidirectional text override. - # We can force text to render from right to left instead - # of left to right. - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlP(children="This text will print from left to right."), - htmlP(children="Below, we use bidirectional override to print right to left:"), - htmlBdo(children="This text will print from right to left.", - dir="rtl") - ) - ) - ) - - app$run_server() - } - - name: htmlBig - dontrun: FALSE - code: | - if (interactive()) { - # The tag is not supported in HTML5. - # Instead, use the font-size property in - # CSS to enlarge text. - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlP(children="This text will display in standard size."), - htmlBig(children="This text may or may not appear slightly larger.") - ) - ) - ) - - app$run_server() - } - - name: htmlBlink - dontrun: FALSE - code: | - if (interactive()) { - # The blink tag is now obsolete and deprecated. - # It may not function properly in all browsers, - # and it may cease working without warning. - # - # This element is generally unsupported on all - # modern browser releases. - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlP(children="Here is a bit of text."), - htmlBlink(children="Here is a bit of blinking text.") - ) - ) - ) - - app$run_server() - } - - name: htmlBlockquote - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlP("Here is some text."), - htmlBlockquote(children=list( - htmlP("And here is a quotation in block format.") - ) - ) - ) - ) - ) - - app$run_server() - } - - name: htmlBr - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlP("Here is some text."), - htmlBr(), - htmlP("Here is additional text."), - htmlBr(), - htmlP("See the gap in between the lines?") - ) - ) - ) - - app$run_server() - } - - name: htmlButton - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlButton("Click me!") - ) - ) - ) - - app$run_server() - } - - name: htmlCanvas - dontrun: FALSE - code: | - if (interactive()) { - # this component requires JavaScript code to draw on the canvas - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlCanvas(id="canvas-component") - ) - ) - ) - - app$run_server() - } - - name: htmlCaption - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlTable(list( - htmlCaption("Elevations of a few Cascade Range volcanoes"), - htmlThead( - htmlTr(list( - htmlTh("Mountain"), - htmlTh("Elevation (m)"), - htmlTh("Elevation (ft)") - ) - )), - htmlTbody(list( - htmlTr(list( - htmlTd("Mount Rainier"), - htmlTd("4,392"), - htmlTd("14,411") - ) - ), - htmlTr(list( - htmlTd("Mount Hood"), - htmlTd("3,429"), - htmlTd("11,249") - ) - ), - htmlTr(list( - htmlTd("Lassen Peak"), - htmlTd("3,187"), - htmlTd("10,457") - ) - ), - htmlTr(list( - htmlTd("Mount St. Helens"), - htmlTd("2,549"), - htmlTd("8,363") - ) - ) - ) - ) - ), style = list( - border = "1px black solid" - ) - ) - ) - ) - ) - - app$run_server() - } - - name: htmlCenter - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlCenter("Centered text!") - ) - ) - ) - - app$run_server() - } - - name: htmlCite - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlCite("Click me!") - ) - ) - ) - - app$run_server() - } - - name: htmlCode - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout(htmlDiv(list( - htmlCode( - children = 'cat("Hello world!")' - ) - ) - ) - ) - - app$run_server() - } - - name: htmlCol - dontrun: FALSE - code: | - if (interactive()) { - # Used within htmlColgroup to define columns. - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlTable(list( - htmlColgroup( - list( - htmlCol(span = 2, style = list("background-color"= "red")) - ) - ), - htmlTr( - list( - htmlTd("Cell A"), - htmlTd("Cell B"), - htmlTd("Cell C") - ) - ) - )) - ) - ) - ) - - app$run_server() - } - - name: htmlColgroup - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlTable(list( - htmlColgroup( - list( - htmlCol(span = 2, style = list("background-color"= "red")) - ) - ), - htmlTr( - list( - htmlTd("Cell A"), - htmlTd("Cell B"), - htmlTd("Cell C") - ) - ) - )) - ) - ) - ) - - app$run_server() - } - - name: htmlCommand - dontrun: FALSE - code: | - # This component is deprecated and its use is no longer recommended. - - name: htmlContent - dontrun: FALSE - code: | - # This feature is obsolete and no longer supported. It is recommended - # that you use the htmlSlot component instead. - - name: htmlData - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlUl(list( - htmlLi(list(htmlData(value = 398, "First Element"))), - htmlLi(list(htmlData(value = 399, "Second Element"))), - htmlLi(list(htmlData(value = 400, "First Element"))) - )) - ) - ) - ) - - # Include the following in a separate CSS file in an - # `assets` directory in the root of your app. - # - # data:hover::after { - # content: ' (ID ' attr(value) ')'; - # font-size: .7em; - # } - - app$run_server() - } - - name: htmlDatalist - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout(htmlDiv(list( - dccInput( - placeholder = 'Enter here', - list = 'list-of-options'), - htmlDatalist(id = 'list-of-options', - children=list( - htmlOption("Option 1"), - htmlOption("Option 2"), - htmlOption("Option 3") - ) - ) - ) - ) - ) - - app$run_server() - } - - name: htmlDd - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout(htmlDiv(list( - htmlDl( - children= list(htmlDt("Dash for R"), - htmlDd('HtmlDt and htmlDD must be used - within htmlDl')) - ) - ) - ) - ) - - app$run_server() - } - - name: htmlDel - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout(htmlDiv(list( - htmlDel( - children ="Deleted Hello" - ) - ) - ) - ) - - app$run_server() - } - - name: htmlDetails - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlDetails( - children = list( - htmlSummary( - children = "Within a details element, the summary can act as a clickable description" - ), - "And the rest is hidden until the summary is clicked" - ) - ) - ) - ) - ) - - app$run_server() - } - - name: htmlDfn - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout(htmlDiv(list( - htmlDfn( - children ="Hello" - ) - ) - ) - ) - - app$run_server() - } - - name: htmlDialog - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout(htmlDiv(list( - htmlDialog( - children = htmlP('Greetings') - ) - ) - ) - ) - - app$run_server() - } - - name: htmlDiv - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout( - htmlDiv(list( - htmlDiv('This Title is Wrapped inside an inner Div') - ) - ) - ) - - app$run_server() - } - - name: htmlDl - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout(htmlDiv(list( - htmlDl( - children= list(htmlDt("Dash for R"), - htmlDd('HtmlDt and htmlDD must be used - within htmlDl')) - ) - ) - ) - ) - - app$run_server() - } - - name: htmlDt - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout(htmlDiv(list( - htmlDl( - children= list(htmlDt("Dash for R"), - htmlDd('HtmlDt and htmlDD must be used - within htmlDl')) - ) - ) - ) - ) - - app$run_server() - } - - name: htmlElement - dontrun: FALSE - code: | - # This feature is obsolete. It may still work in some - # browsers, but could stop working at any time. Try to - # avoid using this component. - - name: htmlEm - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout(htmlDiv(list( - htmlH1(list('Dash is a very ', - htmlEm(' important '), - 'framework') - ) - ) - ) - ) - - app$run_server() - } - - name: htmlEmbed - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout(htmlDiv(list( - htmlEmbed( - src = 'https://archive.org/embed/VintageCartoonsSet1Mp4', - width = '500', - height = '500') - ) - ) - ) - - app$run_server() - } - - name: htmlFieldset - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout(htmlDiv(list( - htmlFieldset( - children = list('Choose your favorite Dash HTML component', - dccRadioItems( - options=list( - list("label"= "htmlDiv", "value"= "htmlDiv"), - list("label"= "htmlBase", "value"= "htmlBase"), - list("label"= "htmlArticle", "value"= "htmlArticle") - ) - ) - ) - ) - ) - ) - ) - - app$run_server() - } - - name: htmlFigcaption - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout(htmlDiv(list( - htmlFigure(children = list( - htmlImg(src = 'https://brand.plotly.com/static/images/plotly-logo-01-stripe@2x.png'), - htmlFigcaption(children = 'Plotly Logo'))) - ) - ) - ) - - app$run_server() - } - - name: htmlFigure - dontrun: FALSE - code: | - if (interactive()) { - library(dash) - - app <- Dash$new() - - app$layout(htmlDiv(list( - htmlFigure(children = list( - htmlImg(src = 'https://brand.plotly.com/static/images/plotly-logo-01-stripe@2x.png', - width = '400', - height = '150') - ) - ) - ) - ) - ) - - app$run_server() - } - - name: htmlFont - dontrun: FALSE - code: | - # Starting with HTML 4, HTML does not convey styling information - # anymore (outside the - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - -

Dash is a web application framework that provides pure R and Python abstraction around HTML, CSS, and JavaScript. Instead of writing HTML or using an HTML templating engine, you compose your layout using R functions within the dashHtmlComponents package. The source is on GitHub at plotly/dash-html-components.

-

Please visit our online documentation, which is interactive and frequently updated: https://dashr.plotly.com.

-

The components in this package are all simple wrappers for HTML5 elements. Extensive documentation for these elements is available online: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/

-

Here is an example of a simple HTML structure:

-
library(dash)
-
-htmlDiv(list(
-  htmlH1('Hello Dash'),
-  htmlDiv(list(
-    htmlP('Dash converts R classes into HTML'),
-    htmlP("This conversion happens behind the scenes by Dash's JavaScript front-end")
-  ))
-))
-

which gets converted (behind the scenes) into the following HTML in your web application:

-
<div>
-    <h1>Hello Dash</h1>
-    <div>
-        <p>Dash converts Python classes into HTML</p>
-        <p>This conversion happens behind the scenes by the JavaScript front-end</p>
-    </div>
-</div>
-

If you’re not comfortable with HTML, don’t worry! You can get 95% of the way there with just a few elements and attributes. Dash’s core component library also supports Markdown.

-
library(dash)
-
-dccMarkdown('''
-#### Dash and Markdown
-Dash supports [Markdown](https://daringfireball.net/projects/markdown/).
-
-Markdown is a simple way to write and format text.
-It includes a syntax for things like **bold text** and *italics*,
-[links](https://daringfireball.net/projects/markdown/), inline `code` snippets, lists,
-quotes, and more.
-''')
-

which renders the following:

-
-

Dash and Markdown

-

Dash supports Markdown Markdown is a simple way to write and format text. It includes a syntax for things like bold text and italics, links, inline code snippets, lists, quotes, and more.

-
-

If you’re using HTML components, then you also have access to properties like style, class, and id.

-

All of these attributes are available in the R functions. The HTML elements and Dash classes are mostly the same but there are a few key differences:

- -

Let’s take a look at an example.

-
library(dash)
-
-htmlDiv(list(
-    htmlDiv('Example Div', style=list('color' = 'blue', 'fontSize' = 14)),
-    htmlP('Example P', className='my-class', id='my-p-element')
-), style=list('marginBottom' = 50, 'marginTop' = 25))
-

That Dash code will render this HTML markup:

-
<div style="margin-bottom: 50px; margin-top: 25px;">
-
-   <div style="color: blue; font-size: 14px">
-       Example Div
-   </div>
-
-   <p class="my-class", id="my-p-element">
-       Example P
-   </p>
-</div>
- - - - -
- - - - - - - - - - - - - - - diff --git a/vignettes/dash-html-components.html.asis b/vignettes/dash-html-components.html.asis deleted file mode 100644 index c215f91e..00000000 --- a/vignettes/dash-html-components.html.asis +++ /dev/null @@ -1,3 +0,0 @@ -%\VignetteEngine{knitr::knitr} -%\VignetteIndexEntry{Dash HTML Components} -%\usepackage[utf8]{inputenc} diff --git a/webpack.config.js b/webpack.config.js deleted file mode 100644 index fafb3684..00000000 --- a/webpack.config.js +++ /dev/null @@ -1,68 +0,0 @@ -const path = require('path'); -const packagejson = require('./package.json'); - -const dashLibraryName = packagejson.name.replace(/-/g, '_'); - -module.exports = (env, argv) => { - - let mode; - - const overrides = module.exports || {}; - - // if user specified mode flag take that value - if (argv && argv.mode) { - mode = argv.mode; - } - - // else if configuration object is already set (module.exports) use that value - else if (overrides.mode) { - mode = overrides.mode; - } - - // else take webpack default (production) - else { - mode = 'production'; - } - - let filename = (overrides.output || {}).filename; - if(!filename) { - const modeSuffix = mode === 'development' ? 'dev' : 'min'; - filename = `${dashLibraryName}.${modeSuffix}.js`; - } - - const entry = overrides.entry || {main: './src/index.js'}; - - const devtool = overrides.devtool || 'source-map'; - - const externals = ('externals' in overrides) ? overrides.externals : ({ - react: 'React', - 'react-dom': 'ReactDOM', - 'plotly.js': 'Plotly', - 'prop-types': 'PropTypes' - }); - - return { - mode, - entry, - target: ['web', 'es5'], - output: { - path: path.resolve(__dirname, dashLibraryName), - filename, - library: dashLibraryName, - libraryTarget: 'window', - }, - externals, - module: { - rules: [ - { - test: /\.js$/, - exclude: /node_modules/, - use: { - loader: 'babel-loader', - }, - } - ], - }, - devtool - } -}; \ No newline at end of file