@plone-collective/volto-image-editor 1.0.0-alpha.1

package/src/theme/custom.css

@@ -0,0 +1,82 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  /*--ifm-color-primary: #25c2a0;*/
+  /*--ifm-color-primary-dark: rgb(33, 175, 144);*/
+  /*--ifm-color-primary-darker: rgb(31, 165, 136);*/
+  /*--ifm-color-primary-darkest: rgb(26, 136, 112);*/
+  /*--ifm-color-primary-light: rgb(70, 203, 174);*/
+  /*--ifm-color-primary-lighter: rgb(102, 212, 189);*/
+  /*--ifm-color-primary-lightest: rgb(146, 224, 208);*/
+  /*--ifm-code-font-size: 95%;*/
+
+  /*--ifm-color-primary: #61dafb;*/
+  /*--ifm-color-primary-dark: #3fd2fa;*/
+  /*--ifm-color-primary-darker: #2ecefa;*/
+  /*--ifm-color-primary-darkest: #06bcee;*/
+  /*--ifm-color-primary-light: #83e2fc;*/
+  /*--ifm-color-primary-lighter: #94e6fc;*/
+  /*--ifm-color-primary-lightest: #c7f2fe;*/
+  --ifm-font-size-base: 15px;
+
+  --ifm-color-primary: #1aa7f9;
+  --ifm-color-primary-dark: #069bf1;
+  --ifm-color-primary-darker: #0692e4;
+  --ifm-color-primary-darkest: #0578bc;
+  --ifm-color-primary-light: #35b1fa;
+  --ifm-color-primary-lighter: #42b6fa;
+  --ifm-color-primary-lightest: #6ac6fb;
+
+  --ifm-navbar-background-color: #20232a;
+  --ifm-navbar-link-color: white;
+  --ifm-navbar-link-hover-color: #61dafb;
+  /*--ifm-menu-color: #dadde1;*/
+  /*--ifm-menu-color-background-active: rgba(255,255,255, 0.05);*/
+  /*--ifm-menu-color-active: white;*/
+
+  --ifm-navbar-padding-horizontal: 24px;
+  --ifm-spacing-horizontal: 24px;
+  --ifm-code-font-size: 85%;
+  /* Rewrite the exclusions for sidebar */
+  /*--doc-sidebar-width: 200px !important;*/
+  --ifm-menu-link-sublist-icon-filter: invert(100%) sepia(94%) saturate(17%)
+    hue-rotate(223deg) brightness(104%) contrast(98%);
+}
+
+.navbar,
+.navbar-sidebar {
+  color: white;
+}
+
+.navbar__brand:hover {
+  color: var(--ifm-navbar-link-hover-color);
+}
+
+.navbar-sidebar .menu__link {
+  color: white;
+}
+
+.navbar-sidebar .menu__link--active {
+  color: #61dafb;
+}
+
+.docusaurus-highlight-code-line {
+  display: block;
+  padding: 0 var(--ifm-pre-padding);
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+html[data-theme='dark'] .docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+article {
+  max-width: 660px;
+  margin: 0 auto;
+}

package/src/theme/mixins.scss

@@ -0,0 +1,91 @@
+@import './constants';
+
+@mixin desktop() {
+  @media (max-width: $maximum) {
+    @content;
+  }
+}
+
+@mixin tablet() {
+  @media (max-width: $desktop) {
+    @content;
+  }
+}
+
+@mixin mobile() {
+  @media (max-width: $tablet) {
+    @content;
+  }
+}
+
+@mixin small-mobile() {
+  @media (max-width: $mobile) {
+    @content;
+  }
+}
+
+@mixin large-desktop() {
+  @media (min-width: $maximum - 1) {
+    @content;
+  }
+}
+
+@mixin max-width($width) {
+  @media (max-width: $width) {
+    @content;
+  }
+}
+
+@mixin reset-browsers-button-styles {
+  border: none;
+  background: none;
+  color: inherit;
+  &:focus {
+    outline: none;
+  }
+}
+
+@mixin reset-browsers-input-styles {
+  border: none;
+  background: none;
+  &:focus {
+    outline: none;
+  }
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
+    /* display: none; <- Crashes Chrome on hover */
+    -webkit-appearance: none;
+  }
+
+  &[type='number'] {
+    -moz-appearance: textfield; /* Firefox */
+  }
+}
+
+@mixin center-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin circle {
+  flex-shrink: 0;
+  border-radius: 50%;
+}
+
+@mixin container {
+  max-width: $maximum;
+  padding-right: $container-padding;
+  padding-left: $container-padding;
+  margin: 0 auto;
+  @include desktop() {
+    max-width: $desktop;
+  }
+  @include tablet() {
+    max-width: $tablet;
+  }
+  @include mobile() {
+    max-width: 100%;
+  }
+}

package/towncrier.toml

@@ -0,0 +1,33 @@
+[tool.towncrier]
+filename = "CHANGELOG.md"
+directory = "news/"
+title_format = "## {version} ({project_date})"
+underlines = ["", "", ""]
+template = "./node_modules/@plone/scripts/templates/towncrier_template.jinja"
+start_string = "<!-- towncrier release notes start -->\n"
+issue_format = "[#{issue}](https://github.com/collective/volto-image-editor/issue/{issue})"
+
+[[tool.towncrier.type]]
+directory = "breaking"
+name = "Breaking"
+showcontent = true
+
+[[tool.towncrier.type]]
+directory = "feature"
+name = "Feature"
+showcontent = true
+
+[[tool.towncrier.type]]
+directory = "bugfix"
+name = "Bugfix"
+showcontent = true
+
+[[tool.towncrier.type]]
+directory = "internal"
+name = "Internal"
+showcontent = true
+
+[[tool.towncrier.type]]
+directory = "documentation"
+name = "Documentation"
+showcontent = true

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "target": "es2022",
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "module": "preserve",
+    "noEmit": true,
+    "lib": ["es2022", "dom", "dom.iterable"],
+    "jsx": "react-jsx",
+    "paths": {
+      "@plone/volto/*": ["../../core/packages/volto/src/*"],
+      "@plone-collective/volto-image-editor/*": ["./src/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
+  "exclude": [
+    "node_modules",
+    "build",
+    "public",
+    "coverage",
+    "**/*.test.{js,jsx,ts,tsx}",
+    "**/*.spec.{js,jsx,ts,tsx}",
+    "**/*.stories.{js,jsx,ts,tsx}"
+  ]
+}