@squiz/formatted-text-editor 1.12.0-alpha.40 → 1.12.0-alpha.8

package/src/ui/DropdownButton/DropdownButton.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import CheckIcon from '@mui/icons-material/Check';
-
-type DropdownButtonProps = {
-  children?: JSX.Element;
-  handleOnClick: () => void;
-  isDisabled: boolean;
-  isActive: boolean;
-  label: string;
-};
-
-const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label }: DropdownButtonProps) => {
-  return (
-    <button
-      aria-label={label}
-      title={label}
-      type="button"
-      onClick={handleOnClick}
-      disabled={isDisabled}
-      className={`btn dropdown-button ${isActive ? 'is-active' : ''}`}
-    >
-      <span>{children || label}</span>
-      {isActive && <CheckIcon className="dropdown-button-icon" />}
-    </button>
-  );
-};
-
-export default DropdownButton;

package/src/ui/DropdownButton/_dropdown-button.scss

@@ -1,7 +0,0 @@
-.dropdown-button {
-  padding: 4px 8px;
-  color: #707070;
-  height: 40px;
-  width: 100%;
-  justify-content: space-between;
-}

package/src/ui/ToolbarButton/ToolbarButton.tsx

@@ -1,26 +0,0 @@
-import React, { ReactElement } from 'react';
-
-type ToolbarButtonProps = {
-  handleOnClick: () => void;
-  isDisabled: boolean;
-  isActive: boolean;
-  icon: ReactElement;
-  label: string;
-};
-
-const ToolbarButton = ({ handleOnClick, isDisabled, isActive, icon, label }: ToolbarButtonProps) => {
-  return (
-    <button
-      aria-label={label}
-      title={label}
-      type="button"
-      onClick={handleOnClick}
-      disabled={isDisabled}
-      className={`btn toolbar-button ${isActive ? 'is-active' : ''}`}
-    >
-      {icon}
-    </button>
-  );
-};
-
-export default ToolbarButton;

package/src/ui/ToolbarButton/_toolbar-button.scss

@@ -1,37 +0,0 @@
-.btn {
-  @apply font-normal rounded;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  border: 1px solid transparent;
-
-  &:active,
-  &:hover,
-  &:focus {
-    background-color: rgba(black, 0.04);
-  }
-
-  &.disabled,
-  &[disabled] {
-    cursor: not-allowed;
-    @apply opacity-50;
-  }
-}
-
-.toolbar-button {
-  @apply bg-white text-gray-600 p-1;
-
-  ~ .toolbar-button {
-    margin-left: 2px;
-  }
-
-  &.is-active,
-  &:active {
-    @apply text-blue-300 bg-blue-100;
-  }
-}

package/src/ui/ToolbarDropdown/ToolbarDropdown.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import 'flowbite';
-
-type ToolbarDropdownProps = {
-  children: JSX.Element | JSX.Element[];
-  label: string;
-};
-
-const ToolbarDropdown = ({ children, label }: ToolbarDropdownProps) => {
-  return (
-    <>
-      <button
-        id="dropdownHoverButton"
-        data-dropdown-toggle="dropdown"
-        className="toolbar-dropdown__button"
-        type="button"
-      >
-        <span className="toolbar-dropdown__label">{label}</span>
-        <ExpandMoreIcon className="toolbar-dropdown__icon" aria-hidden="true" />
-      </button>
-      <div
-        id="dropdown"
-        className="toolbar-dropdown__menu z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-169 dark:bg-gray-700"
-      >
-        <ul aria-labelledby="dropdownHoverButton">{children}</ul>
-      </div>
-    </>
-  );
-};
-
-export default ToolbarDropdown;

package/src/ui/ToolbarDropdown/_toolbar-dropdown.scss

@@ -1,27 +0,0 @@
-.toolbar-dropdown__button {
-  @apply font-base text-md font-semibold text-gray-600;
-  align-self: center;
-
-  height: 2rem;
-  padding-left: 0.5rem;
-
-  &:active,
-  &:hover,
-  &:focus {
-    background-color: rgba(black, 0.04);
-  }
-
-  .toolbar-dropdown__label {
-    display: inline-flex;
-    width: 7rem;
-  }
-
-  .toolbar-dropdown__icon {
-    width: 1rem;
-    height: 1.5rem;
-  }
-}
-
-.toolbar-dropdown__menu {
-  inset: 0rem auto auto 1rem !important;
-}

package/tailwind.config.cjs

@@ -1,62 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './node_modules/flowbite/**/*.js'],
-  theme: {
-    extend: {
-      borderRadius: {
-        DEFAULT: '4px',
-        md: '6px',
-      },
-      fontFamily: {
-        base: 'Open Sans, Arial, sans-serif',
-      },
-      fontWeight: {
-        normal: '400',
-        medium: '500',
-        semibold: '600',
-        bold: '700',
-      },
-      fontSize: {
-        xlg: '1.125rem',
-        lg: '1rem',
-        md: '0.875rem',
-        sm: '0.8125rem',
-      },
-      boxShadow: {
-        outline: '0 0 0 1px rgba(0,0,0,0.10)',
-        sm: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 4px 2px rgba(0,0,0,0.08)',
-        DEFAULT: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12)',
-        md: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12)',
-        lg: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 24px 12px rgba(0,0,0,0.12)',
-        inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
-        none: 'none',
-      },
-      spacing: {
-        1: '0.25rem', // 4px
-        2: '0.5rem', // 8px
-        3: '0.75rem', // 12px
-        4: '1rem', // 16px
-        5: '1.25rem', // 20px
-        6: '1.5rem', // 24px
-        7: '1.75rem', // 28px
-        8: '2rem', // 32px
-        169: '169px', // 169px
-      },
-      colors: {
-        gray: {
-          200: '#ededed',
-          300: '#e0e0e0',
-          600: '#707070',
-        },
-        blue: {
-          100: '#e6f1fa',
-          300: '#0774d2',
-        },
-        orange: {
-          100: '#dadbe9',
-        },
-      },
-    },
-  },
-  plugins: [require('flowbite/plugin')],
-};

package/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "experimentalDecorators": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react",
-    "declaration": true,
-    "outDir": "./lib"
-  },
-  "files": ["src/index.ts"]
-}

package/vite.config.ts

@@ -1,19 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  root: 'demo',
-  build: {
-    outDir: 'build/demo',
-  },
-  plugins: [
-    react({
-      babel: {
-        parserOpts: {
-          plugins: ['decorators-legacy'],
-        },
-      },
-    }),
-  ],
-});