- {i18n('StickerCreator--title')}
-
-
-
-
-
-
-
-
-
-
-
-
-
- {i18n('icu:StickerCreator--DropStage--title')}
-
-
- {i18n('StickerCreator--DropStage--help')}
-
- {haveStickers ? (
-
- {i18n('StickerCreator--DropStage--showMargins')}
-
- ) : null}
-
-
-
- {i18n('StickerCreator--EmojiStage--title')}
-
-
- {i18n('StickerCreator--EmojiStage--help')}
-
-
-
-
- {i18n('StickerCreator--MetaStage--title')}
-
-
-
-
- {i18n('StickerCreator--MetaStage--Field--title')}
-
-
-
-
- {i18n('StickerCreator--MetaStage--Field--author')}
-
-
-
- {i18n('StickerCreator--MetaStage--Field--cover--help')}
-
- - {i18n('StickerCreator--MetaStage--Field--cover')} -
-
-
-
- {cover?.src ? (
- 
- ) : null}
-
-
- {i18n('StickerCreator--ShareStage--title')}
-
-
- {linkCopied ? (
-
-
-
-
-
-
- #makeprivacystick,
- ]}
- />
-
-
-
-
-
-
- {i18n('StickerCreator--Toasts--linkedCopied')}
-
-
- ) : null}
-
- ) : null}
-
-
- {i18n('StickerCreator--UploadStage-uploaded', {
- // We convert these to string so that 0 isn't falsy, which i18n checks for.
- count: String(complete),
- total: String(total),
- })}
-
-
- {i18n('StickerCreator--UploadStage--title')}
-
-
,
- popperRoot
- )
- : null;
-});
diff --git a/sticker-creator/components/ShareButtons.scss b/sticker-creator/components/ShareButtons.scss
deleted file mode 100644
index 3b0ff7aaf1d1..000000000000
--- a/sticker-creator/components/ShareButtons.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-@import '../../stylesheets/variables';
-@import '../mixins';
-
-.container {
- display: flex;
- justify-content: center;
-}
-
-.text {
- @include light-theme() {
- border: 1px solid $color-gray-15;
- color: $color-gray-90;
- }
-
- @include dark-theme() {
- border: 1px solid $color-gray-60;
- color: $color-white;
- }
-}
-
-.button {
- width: 32px;
- height: 32px;
- background: transparent;
- border: none;
- margin-left: 12px;
-}
diff --git a/sticker-creator/components/ShareButtons.stories.tsx b/sticker-creator/components/ShareButtons.stories.tsx
deleted file mode 100644
index 8f9717200ed3..000000000000
--- a/sticker-creator/components/ShareButtons.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import * as React from 'react';
-import { text } from '@storybook/addon-knobs';
-
-import { StoryRow } from '../elements/StoryRow';
-import { ShareButtons } from './ShareButtons';
-
-export default {
- title: 'Sticker Creator/components',
-};
-
-export const _ShareButtons = (): JSX.Element => {
- const value = text('value', 'https://signal.org');
-
- return (
-
- {buttonPaths.map(([title, fill, path, url]) => (
-
- ))}
-
- );
- }
-);
diff --git a/sticker-creator/components/StickerFrame.scss b/sticker-creator/components/StickerFrame.scss
deleted file mode 100644
index 039e98717ade..000000000000
--- a/sticker-creator/components/StickerFrame.scss
+++ /dev/null
@@ -1,143 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-@import '../mixins';
-@import '../../stylesheets/variables';
-
-$width: 186px;
-$height: 186px;
-$guide-offset: 6px;
-$border-width: 1px;
-
-.container {
- position: relative;
- width: $width;
- height: $height;
- border: {
- radius: 4px;
- width: $border-width;
- style: solid;
- }
- overflow: hidden;
- user-select: none;
-
- @include light-theme() {
- border-color: $color-gray-25;
- background: $color-white;
- }
-
- @include dark-theme() {
- border-color: $color-gray-60;
- background: $color-gray-90;
- }
-}
-
-.dragActive {
- composes: container;
-
- @include light-theme() {
- border-color: $color-ultramarine;
- }
-
- @include dark-theme() {
- border-color: $color-ultramarine-light;
- }
-}
-
-.image {
- width: $width;
- height: $height;
-}
-
-@keyframes spin {
- to {
- transform: rotate(360deg);
- }
-}
-
-.spinner {
- composes: image;
- animation: spin 1s linear infinite;
- display: flex;
- justify-content: center;
- align-items: center;
-
- @include light-theme() {
- color: $color-gray-25;
- }
-
- @include dark-theme() {
- color: $color-gray-60;
- }
-}
-
-.guide {
- width: $width - (2 * $guide-offset);
- height: $height - (2 * $guide-offset);
- position: absolute;
- left: $guide-offset - $border-width;
- top: $guide-offset - $border-width;
- border: {
- radius: 0px;
- width: $border-width;
- style: dashed;
- }
- pointer-events: none;
-
- @include light-theme() {
- border-color: $color-gray-25;
- }
-
- @include dark-theme() {
- border-color: $color-gray-60;
- }
-}
-
-.close-button {
- width: 16px;
- height: 16px;
- position: absolute;
- display: flex;
- justify-content: center;
- align-items: center;
- top: 8px;
- right: 8px;
- font-family: $inter;
- border: none;
- background: none;
- padding: 0;
-
- &-icon {
- @include light-theme() {
- color: $color-black;
- }
- @include dark-theme() {
- color: $color-white;
- }
- }
-}
-
-.emoji-button {
- width: 41px;
- height: 28px;
- position: absolute;
- top: 6px;
- right: 6px;
- border: none;
- border-radius: 13.5px;
- padding: 0;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
-
- @include light-theme() {
- background-color: $color-gray-05;
- color: $color-gray-90;
- }
-
- @include dark-theme() {
- background-color: $color-gray-75;
- color: rgba(255, 255, 255, 0.75);
- }
-}
diff --git a/sticker-creator/components/StickerFrame.stories.tsx b/sticker-creator/components/StickerFrame.stories.tsx
deleted file mode 100644
index b616ebd40705..000000000000
--- a/sticker-creator/components/StickerFrame.stories.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import * as React from 'react';
-import { boolean, select, text } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
-
-import { StoryRow } from '../elements/StoryRow';
-import { StickerFrame } from './StickerFrame';
-
-import type { EmojiPickDataType } from '../../ts/components/emoji/EmojiPicker';
-
-export default {
- title: 'Sticker Creator/components',
-};
-
-export const _StickerFrame = (): JSX.Element => {
- const image = text('image url', '/fixtures/512x515-thumbs-up-lincoln.webp');
- const showGuide = boolean('show guide', true);
- const mode = select('mode', ['removable', 'pick-emoji', 'add'], 'add');
- const onRemove = action('onRemove');
- const onDrop = action('onDrop');
- const [skinTone, setSkinTone] = React.useState(0);
- const [emoji, setEmoji] = React.useState
- {
- // eslint-disable-next-line no-nested-ternary
- mode !== 'add' ? (
- image ? (
-
-
- {({ ref }) => (
-
- )}
-
- {emojiPickerOpen && emojiPopperRoot
- ? createPortal(
-
- {({ ref, style }) => (
- ,
- emojiPopperRoot
- )
- : null}
-
- ) : null}
- {mode !== 'pick-emoji' &&
- image &&
- previewActive &&
- previewPopperRoot
- ? createPortal(
-
- {({ ref, style, arrowProps, placement }) => (
- ,
- previewPopperRoot
- )
- : null}
-
- )}
- {spinnerSvg}
- )
- ) : null
- }
- {showGuide && mode !== 'add' ? (
-
- ) : null}
- {mode === 'add' && onDrop ? (
-
- {ids.length > 0 ? (
- <>
- {ids.map((p, i) => (
-
- );
- }
-);
-
-export const StickerGrid = SortableContainer((props: Props) => {
- const ids = stickersDuck.useStickerOrder();
- const actions = stickersDuck.useStickerActions();
- const handleSortEnd = React.useCallback
-
- );
-});
diff --git a/sticker-creator/components/Toaster.stories.tsx b/sticker-creator/components/Toaster.stories.tsx
deleted file mode 100644
index 047cb36e0e14..000000000000
--- a/sticker-creator/components/Toaster.stories.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-// Copyright 2020 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import * as React from 'react';
-import { debounce, dropRight } from 'lodash';
-import { text as textKnob } from '@storybook/addon-knobs';
-
-import { StoryRow } from '../elements/StoryRow';
-import { Toaster } from './Toaster';
-
-export default {
- title: 'Sticker Creator/components',
-};
-
-export const _Toaster = (): JSX.Element => {
- const inputText = textKnob('Slices', ['error 1', 'error 2'].join('|'));
- const initialState = React.useMemo(() => inputText.split('|'), [inputText]);
- const [state, setState] = React.useState(initialState);
-
- // TODO not sure how to fix this
- // eslint-disable-next-line react-hooks/exhaustive-deps
- const handleDismiss = React.useCallback(
- // Debounce is required here since auto-dismiss is asynchronously called
- // from multiple rendered instances (multiple themes)
- debounce(() => {
- setState(dropRight);
- }, 10),
- [setState]
- );
-
- return (
-
- {i18n('StickerCreator--Preview--title')}
-
-
-
-
- {images.map(src => (
- 
- ))}
-
-
-
- {title}
- {author}
-
-
- {slice.text}
-
-
- );
-});
diff --git a/sticker-creator/custom.d.ts b/sticker-creator/custom.d.ts
deleted file mode 100644
index dced16540be7..000000000000
--- a/sticker-creator/custom.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// Copyright 2020 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-declare module '*.scss';
diff --git a/sticker-creator/elements/Button.scss b/sticker-creator/elements/Button.scss
deleted file mode 100644
index e4dd33c42d81..000000000000
--- a/sticker-creator/elements/Button.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-@import '../mixins';
-@import '../../stylesheets/variables';
-
-.base {
- border: none;
- min-width: 80px;
- height: 36px;
- padding: 0 25px;
- border-radius: 4px;
- display: flex;
- justify-content: center;
- align-items: center;
- font-family: $inter;
- font-weight: normal;
- font-size: 14px;
- white-space: nowrap;
-
- @include light-theme() {
- background-color: $color-gray-05;
- color: $color-gray-90;
- }
-
- @include dark-theme() {
- background-color: $color-gray-75;
- color: $color-white;
- }
-
- &:disabled {
- opacity: 0.4;
- }
-}
-
-.primary {
- composes: base;
-
- @include light-theme() {
- background-color: $color-ultramarine;
- color: $color-white;
- }
-
- @include dark-theme() {
- background-color: $color-ultramarine-light;
- color: $color-white;
- }
-}
-
-.pill {
- composes: base;
- height: 28px;
- border-radius: 15px;
- padding: 0 17px;
-
- @include light-theme() {
- color: $color-gray-90;
- border: 1px solid $color-gray-90;
- background: transparent;
- }
-
- @include dark-theme() {
- color: $color-white;
- border: 1px solid $color-white;
- background: transparent;
- }
-}
-
-.pill-primary {
- composes: pill;
-
- @include light-theme() {
- border: none;
- background-color: $color-ultramarine;
- color: $color-white;
- }
-
- @include dark-theme() {
- border: none;
- background-color: $color-ultramarine-light;
- color: $color-white;
- }
-}
diff --git a/sticker-creator/elements/Button.stories.tsx b/sticker-creator/elements/Button.stories.tsx
deleted file mode 100644
index c1d7341cc4f0..000000000000
--- a/sticker-creator/elements/Button.stories.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import * as React from 'react';
-import { action } from '@storybook/addon-actions';
-import { text } from '@storybook/addon-knobs';
-
-import { StoryRow } from './StoryRow';
-import { Button } from './Button';
-
-export default {
- title: 'Sticker Creator/elements',
-};
-
-export const _Button = (): JSX.Element => {
- const onClick = action('onClick');
- const child = text('text', 'foo bar');
-
- return (
- <>
-
-
- );
-}
diff --git a/sticker-creator/elements/CopyText.scss b/sticker-creator/elements/CopyText.scss
deleted file mode 100644
index 2483f6af6d69..000000000000
--- a/sticker-creator/elements/CopyText.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-@import '../../stylesheets/variables';
-@import '../mixins';
-
-.container {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- width: 330px;
- height: 36px;
-}
-
-.input {
- width: 242px;
- height: 36px;
- line-height: 34px;
- padding: 0 12px;
- border-radius: 4px;
- background-color: transparent;
- font-size: 14px;
- font-family: $inter;
-
- &::placeholder {
- color: $color-gray-45;
- }
-
- @include light-theme() {
- border: 1px solid $color-gray-15;
- color: $color-gray-90;
- }
-
- @include dark-theme() {
- border: 1px solid $color-gray-60;
- color: $color-white;
- }
-}
diff --git a/sticker-creator/elements/CopyText.stories.tsx b/sticker-creator/elements/CopyText.stories.tsx
deleted file mode 100644
index 5b819bd96162..000000000000
--- a/sticker-creator/elements/CopyText.stories.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import * as React from 'react';
-import { text } from '@storybook/addon-knobs';
-
-import { StoryRow } from './StoryRow';
-import { CopyText } from './CopyText';
-
-export default {
- title: 'Sticker Creator/elements',
-};
-
-export const _CopyText = (): JSX.Element => {
- const label = text('label', 'foo bar');
- const value = text('value', 'foo bar');
-
- return (
- {title}
-{children}
-
-
-
-
-
-
-
-
- );
- }
-);
diff --git a/sticker-creator/elements/DropZone.scss b/sticker-creator/elements/DropZone.scss
deleted file mode 100644
index 08a0016baabe..000000000000
--- a/sticker-creator/elements/DropZone.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-@import '../../stylesheets/variables';
-@import '../mixins';
-
-.base {
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- flex-grow: 1;
-
- @include light-theme() {
- color: $color-gray-60;
- }
-
- @include dark-theme() {
- color: $color-gray-45;
- }
-}
-
-.text {
- margin: 16px 0 0 0;
- font-family: $inter;
- font-size: 14px;
- font-weight: normal;
-
- @include light-theme() {
- color: $color-gray-60;
- }
-
- @include dark-theme() {
- color: $color-gray-45;
- }
-}
-
-.standalone {
- composes: base;
- border-radius: 4px;
- border: 2px solid;
-
- @include light-theme() {
- border-color: $color-gray-25;
- }
-
- @include dark-theme() {
- border-color: $color-gray-60;
- }
-}
-
-.active {
- composes: standalone;
-
- @include light-theme() {
- border-color: $color-ultramarine;
- }
-
- @include dark-theme() {
- border-color: $color-ultramarine-light;
- }
-}
diff --git a/sticker-creator/elements/DropZone.stories.tsx b/sticker-creator/elements/DropZone.stories.tsx
deleted file mode 100644
index 5c8637b78157..000000000000
--- a/sticker-creator/elements/DropZone.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import * as React from 'react';
-import { action } from '@storybook/addon-actions';
-
-import { DropZone } from './DropZone';
-
-export default {
- title: 'Sticker Creator/elements',
-};
-
-export const _DropZone = (): JSX.Element => {
- return
-
-
- {!inner ? (
-
- );
-}
diff --git a/sticker-creator/elements/LabeledCheckbox.scss b/sticker-creator/elements/LabeledCheckbox.scss
deleted file mode 100644
index 99c75af325d2..000000000000
--- a/sticker-creator/elements/LabeledCheckbox.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-@import '../../stylesheets/variables';
-@import '../mixins';
-
-.base {
- display: flex;
- flex-direction: row;
- align-items: center;
-
- padding: 2px;
-
- // We'd really like to use focus-within-visible or :has(:focus-visible), to ensure that
- // this doesn't show when using the mouse, but neither are ready yet!
- &:focus-within {
- outline: 2px solid -webkit-focus-ring-color;
- }
-}
-
-.input {
- position: absolute;
- width: 0;
- height: 0;
- opacity: 0;
-}
-
-.checkbox {
- width: 18px;
- height: 18px;
- border-radius: 2px;
- display: flex;
- justify-content: center;
- align-items: center;
- border: {
- width: 2px;
- style: solid;
- }
-
- @include light-theme() {
- border-color: $color-gray-60;
- }
-
- @include dark-theme() {
- border-color: $color-gray-25;
- }
-}
-
-.checkbox-checked {
- composes: checkbox;
- border: none;
- background-color: $color-ultramarine;
- color: $color-white;
-}
-
-.label {
- margin-left: 6px;
- position: relative;
- user-select: none;
-}
diff --git a/sticker-creator/elements/LabeledCheckbox.stories.tsx b/sticker-creator/elements/LabeledCheckbox.stories.tsx
deleted file mode 100644
index 008af57e5354..000000000000
--- a/sticker-creator/elements/LabeledCheckbox.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import * as React from 'react';
-import { text } from '@storybook/addon-knobs';
-
-import { StoryRow } from './StoryRow';
-import { LabeledCheckbox } from './LabeledCheckbox';
-
-export default {
- title: 'Sticker Creator/elements',
-};
-
-export const _LabeledCheckbox = (): JSX.Element => {
- const child = text('label', 'foo bar');
- const [checked, setChecked] = React.useState(false);
-
- return (
- - {isDragActive - ? i18n('StickerCreator--DropZone--activeText') - : i18n('StickerCreator--DropZone--staticText')} -
- ) : null} -
- {children}
-
- );
-}
diff --git a/sticker-creator/elements/MessageMeta.scss b/sticker-creator/elements/MessageMeta.scss
deleted file mode 100644
index 291f16c522a0..000000000000
--- a/sticker-creator/elements/MessageMeta.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-@import '../mixins';
-@import '../../stylesheets/variables';
-
-.base {
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- margin-top: 3px;
-}
-
-.item {
- margin-left: 6px;
- font: {
- size: 11px;
- family: $inter;
- weight: normal;
- }
-}
-
-.bubble {
- composes: item;
- color: rgba(255, 255, 255, 0.8);
-}
-
-.light {
- composes: item;
- color: $color-gray-60;
-}
-
-.dark {
- composes: item;
- color: rgba(255, 255, 255, 0.8);
-}
diff --git a/sticker-creator/elements/MessageMeta.tsx b/sticker-creator/elements/MessageMeta.tsx
deleted file mode 100644
index b96731cba1e3..000000000000
--- a/sticker-creator/elements/MessageMeta.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import * as React from 'react';
-import * as styles from './MessageMeta.scss';
-import { useI18n } from '../util/i18n';
-
-export type Props = {
- kind?: 'bubble' | 'dark' | 'light';
- minutesAgo: number;
-};
-
-const getItemClass = ({ kind }: Props) => {
- if (kind === 'dark') {
- return styles.dark;
- }
-
- if (kind === 'light') {
- return styles.light;
- }
-
- return styles.bubble;
-};
-
-export const MessageMeta = React.memo(function MessageMetaInner(props: Props) {
- const i18n = useI18n();
- const itemClass = getItemClass(props);
-
- return (
-
-
-
- );
-});
diff --git a/sticker-creator/elements/MessageSticker.scss b/sticker-creator/elements/MessageSticker.scss
deleted file mode 100644
index 65edeccbe696..000000000000
--- a/sticker-creator/elements/MessageSticker.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-@import '../../stylesheets/variables';
-
-.base {
- padding: 6px 12px;
-}
-
-.image {
- width: 116px;
- height: 116px;
-}
diff --git a/sticker-creator/elements/MessageSticker.stories.tsx b/sticker-creator/elements/MessageSticker.stories.tsx
deleted file mode 100644
index 2e8538a402fd..000000000000
--- a/sticker-creator/elements/MessageSticker.stories.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import * as React from 'react';
-import { number, text } from '@storybook/addon-knobs';
-
-import { StoryRow } from './StoryRow';
-import { MessageSticker } from './MessageSticker';
-
-export default {
- title: 'Sticker Creator/elements',
-};
-
-export const _MessageSticker = (): JSX.Element => {
- const image = text('image url', '/fixtures/512x515-thumbs-up-lincoln.webp');
- const minutesAgo = number('minutesAgo', 3);
-
- return (
-
- {i18n('minutesAgo', [props.minutesAgo.toString()])}
-
-
-
- 
-
- );
-}
diff --git a/sticker-creator/elements/PageHeader.scss b/sticker-creator/elements/PageHeader.scss
deleted file mode 100644
index 6ed2d2749be1..000000000000
--- a/sticker-creator/elements/PageHeader.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-@import '../../stylesheets/variables';
-@import '../mixins';
-
-.base {
- height: 47px;
- width: 100%;
- border-bottom-width: 1px;
- border-bottom-style: solid;
- padding: 0 16px;
- display: flex;
- flex-direction: row;
- align-items: center;
- flex-shrink: 0;
-
- @include light-theme() {
- border-bottom-color: $color-gray-15;
- }
-
- @include dark-theme() {
- border-bottom-color: $color-gray-75;
- }
-}
diff --git a/sticker-creator/elements/PageHeader.stories.tsx b/sticker-creator/elements/PageHeader.stories.tsx
deleted file mode 100644
index de7143eeb039..000000000000
--- a/sticker-creator/elements/PageHeader.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import * as React from 'react';
-import { text } from '@storybook/addon-knobs';
-
-import { StoryRow } from './StoryRow';
-import { PageHeader } from './PageHeader';
-
-export default {
- title: 'Sticker Creator/elements',
-};
-
-export const _PageHeader = (): JSX.Element => {
- const child = text('text', 'foo bar');
-
- return (
- {children}
; -}); diff --git a/sticker-creator/elements/ProgressBar.scss b/sticker-creator/elements/ProgressBar.scss deleted file mode 100644 index 0a73e843dc0a..000000000000 --- a/sticker-creator/elements/ProgressBar.scss +++ /dev/null @@ -1,27 +0,0 @@ -// Copyright 2019 Signal Messenger, LLC -// SPDX-License-Identifier: AGPL-3.0-only - -@import '../../stylesheets/variables'; -@import '../mixins'; - -.base { - height: 4px; - width: 100%; - max-width: 448px; - - @include light-theme() { - background: $color-gray-15; - } - - @include dark-theme() { - background: $color-gray-75; - } -} - -.bar { - height: 4px; - width: 0px; - background: $color-ultramarine; - - transition: width 100ms ease-out; -} diff --git a/sticker-creator/elements/ProgressBar.stories.tsx b/sticker-creator/elements/ProgressBar.stories.tsx deleted file mode 100644 index 6e4401576690..000000000000 --- a/sticker-creator/elements/ProgressBar.stories.tsx +++ /dev/null @@ -1,27 +0,0 @@ -// Copyright 2019 Signal Messenger, LLC -// SPDX-License-Identifier: AGPL-3.0-only - -import * as React from 'react'; -import { number } from '@storybook/addon-knobs'; - -import { StoryRow } from './StoryRow'; -import { ProgressBar } from './ProgressBar'; - -export default { - title: 'Sticker Creator/elements', -}; - -export const _ProgressBar = (): JSX.Element => { - const count = number('count', 5); - const total = number('total', 10); - - return ( -
-
-
- );
-});
diff --git a/sticker-creator/elements/StickerPreview.scss b/sticker-creator/elements/StickerPreview.scss
deleted file mode 100644
index 9d623e24b9f4..000000000000
--- a/sticker-creator/elements/StickerPreview.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-@import '../mixins';
-@import '../../stylesheets/variables';
-
-.base {
- width: 380px;
- padding: 4px;
- display: flex;
- flex-direction: row;
- border-radius: 8px;
- box-shadow: 0 2px 13px 3px rgba(0, 0, 0, 0.3);
- position: relative;
-
- @include light-theme() {
- background: $color-white;
- }
-
- @include dark-theme() {
- background: $color-gray-75;
- }
-}
-
-.frame {
- width: 50%;
- padding: 12px 12px 3px 12px;
-}
-
-.frame-light {
- composes: frame;
- background: $color-white;
- border-radius: 6px 0 0 6px;
-}
-
-.frame-dark {
- composes: frame;
- background: $color-black;
- border-radius: 0 6px 6px 0;
-}
-
-.arrow {
- position: absolute;
- width: 0;
- height: 0;
- border-style: solid;
-}
-
-.arrow-top {
- composes: arrow;
- border-width: 0 8px 8px 8px;
- top: -8px;
-
- @include light-theme() {
- border-color: transparent transparent $color-white transparent;
- }
-
- @include dark-theme() {
- border-color: transparent transparent $color-gray-75 transparent;
- }
-}
-
-.arrow-bottom {
- composes: arrow;
- border-width: 8px 8px 0 8px;
- bottom: -8px;
-
- @include light-theme() {
- border-color: $color-white transparent transparent transparent;
- }
-
- @include dark-theme() {
- border-color: $color-gray-75 transparent transparent transparent;
- }
-}
-
-.arrow-left {
- composes: arrow;
- border-width: 8px 8px 8px 0;
- left: -8px;
-
- @include light-theme() {
- border-color: transparent $color-white transparent transparent;
- }
-
- @include dark-theme() {
- border-color: transparent $color-gray-75 transparent transparent;
- }
-}
-
-.arrow-right {
- composes: arrow;
- border-width: 8px 0 8px 8px;
- right: -8px;
-
- @include light-theme() {
- border-color: transparent transparent transparent $color-white;
- }
-
- @include dark-theme() {
- border-color: transparent transparent transparent $color-gray-75;
- }
-}
diff --git a/sticker-creator/elements/StickerPreview.stories.tsx b/sticker-creator/elements/StickerPreview.stories.tsx
deleted file mode 100644
index b44c9f25f2ce..000000000000
--- a/sticker-creator/elements/StickerPreview.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import * as React from 'react';
-import { text } from '@storybook/addon-knobs';
-
-import { StoryRow } from './StoryRow';
-import { StickerPreview } from './StickerPreview';
-
-export default {
- title: 'Sticker Creator/elements',
-};
-
-export const _StickerPreview = (): JSX.Element => {
- const image = text('image url', '/fixtures/512x515-thumbs-up-lincoln.webp');
-
- return (
-
- {arrowProps ? (
-
- ) : null}
-
- );
- }
- )
-);
diff --git a/sticker-creator/elements/StoryRow.scss b/sticker-creator/elements/StoryRow.scss
deleted file mode 100644
index f26214ae5a2c..000000000000
--- a/sticker-creator/elements/StoryRow.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-.base {
- flex: 1;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- width: 100%;
-}
-
-.left {
- composes: base;
- justify-content: flex-start;
-}
-
-.right {
- composes: base;
- justify-content: flex-end;
-}
-
-.top {
- composes: base;
- align-items: flex-start;
-}
-
-.bottom {
- composes: base;
- align-items: flex-end;
-}
diff --git a/sticker-creator/elements/StoryRow.tsx b/sticker-creator/elements/StoryRow.tsx
deleted file mode 100644
index 342f8795e2fa..000000000000
--- a/sticker-creator/elements/StoryRow.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import * as React from 'react';
-import * as styles from './StoryRow.scss';
-
-type Props = {
- left?: boolean;
- right?: boolean;
- top?: boolean;
- bottom?: boolean;
-};
-
-const getClassName = ({ left, right, top, bottom }: Props) => {
- if (left) {
- return styles.left;
- }
-
- if (right) {
- return styles.right;
- }
-
- if (top) {
- return styles.top;
- }
-
- if (bottom) {
- return styles.bottom;
- }
-
- return styles.base;
-};
-
-export function StoryRow({
- children,
- ...props
-}: React.PropsWithChildren
- {renderMessages(
- i18n('StickerCreator--StickerPreview--light'),
- image,
- 'light'
- )}
-
-
- {renderMessages(
- i18n('StickerCreator--StickerPreview--dark'),
- image,
- 'dark'
- )}
-
- {children}
;
-}
diff --git a/sticker-creator/elements/Toast.scss b/sticker-creator/elements/Toast.scss
deleted file mode 100644
index 65e9c6891dae..000000000000
--- a/sticker-creator/elements/Toast.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-@import '../../stylesheets/variables';
-
-.base {
- padding: 8px 12px;
- border-radius: 4px;
- border: none;
- background-color: $color-gray-75;
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 20px 0px rgba(0, 0, 0, 0.33);
- font-family: $inter;
- font-weight: normal;
- font-size: 14px;
- color: $color-gray-05;
- line-height: 18px;
- cursor: pointer;
-}
diff --git a/sticker-creator/elements/Toast.stories.tsx b/sticker-creator/elements/Toast.stories.tsx
deleted file mode 100644
index 2d6b98c07af2..000000000000
--- a/sticker-creator/elements/Toast.stories.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-// Copyright 2019 Signal Messenger, LLC
-// SPDX-License-Identifier: AGPL-3.0-only
-
-import * as React from 'react';
-import { text } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
-
-import { StoryRow } from './StoryRow';
-import { Toast } from './Toast';
-
-export default {
- title: 'Sticker Creator/elements',
-};
-
-export const _Toast = (): JSX.Element => {
- const child = text('text', 'foo bar');
-
- return (
- {child}
-{child}
-- {children} -
- ); -}); - -export const H2 = React.memo(function H2Inner({ - children, - className, - ...rest -}: Props & HeadingProps) { - return ( -- {children} -
- ); -}); - -export const Text = React.memo(function TextInner({ - children, - className, - center, - secondary, - ...rest -}: Props & ParagraphProps) { - return ( -- {children} -
- ); -}); - -export const Inline = React.memo(function InlineInner({ - children, - className, - ...rest -}: Props & SpanProps) { - return ( - - {children} - - ); -}); diff --git a/sticker-creator/elements/icons/AddEmoji.tsx b/sticker-creator/elements/icons/AddEmoji.tsx deleted file mode 100644 index 7074f07e10e3..000000000000 --- a/sticker-creator/elements/icons/AddEmoji.tsx +++ /dev/null @@ -1,12 +0,0 @@ -// Copyright 2019 Signal Messenger, LLC -// SPDX-License-Identifier: AGPL-3.0-only - -import * as React from 'react'; - -export const AddEmoji = React.memo(function AddEmojiInner() { - return ( - - ); -}); diff --git a/sticker-creator/elements/icons/index.tsx b/sticker-creator/elements/icons/index.tsx deleted file mode 100644 index aacea4a8d882..000000000000 --- a/sticker-creator/elements/icons/index.tsx +++ /dev/null @@ -1,4 +0,0 @@ -// Copyright 2019 Signal Messenger, LLC -// SPDX-License-Identifier: AGPL-3.0-only - -export { AddEmoji } from './AddEmoji'; diff --git a/sticker-creator/index.html b/sticker-creator/index.html deleted file mode 100644 index b5aeb8c25463..000000000000 --- a/sticker-creator/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - - - - - - diff --git a/sticker-creator/index.tsx b/sticker-creator/index.tsx deleted file mode 100644 index 52b1ef137cb0..000000000000 --- a/sticker-creator/index.tsx +++ /dev/null @@ -1,12 +0,0 @@ -// Copyright 2019 Signal Messenger, LLC -// SPDX-License-Identifier: AGPL-3.0-only - -import * as React from 'react'; -import { render } from 'react-dom'; -import { Root } from './root'; - -const root = document.getElementById('root'); - -// eslint-disable-next-line no-console -console.log('Sticker Creator: Starting root'); -render(