refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

1 files changed, 305 insertions, 0 deletions

diff --git a/src/components/molecules/layout/code.module.scss b/src/components/molecules/layout/code.module.scss
new file mode 100644
index 0000000..1feeccc
--- /dev/null
+++ b/src/components/molecules/layout/code.module.scss
@@ -0,0 +1,305 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+.wrapper {
+  :global {
+    .code-toolbar {
+      --toolbar-height: #{fun.convert-px(100)};
+
+      position: relative;
+      margin-top: calc(var(--toolbar-height) + var(--spacing-sm));
+
+      @include mix.media("screen") {
+        @include mix.dimensions("2xs") {
+          --toolbar-height: #{fun.convert-px(60)};
+        }
+      }
+
+      .toolbar {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+        width: 100%;
+        height: var(--toolbar-height);
+        position: absolute;
+        top: calc(var(--toolbar-height) * -1);
+        left: 0;
+        right: 0;
+        background: var(--color-bg-tertiary);
+        border: fun.convert-px(1) solid var(--color-border);
+      }
+
+      .toolbar-item {
+        display: flex;
+        align-items: center;
+        margin: 0 var(--spacing-2xs);
+      }
+
+      .toolbar-item:nth-child(1) {
+        flex: 0 0 100%;
+        justify-content: center;
+        margin: 0 auto 0 0;
+        padding: 0 var(--spacing-sm);
+        background: var(--color-bg-code);
+        border-bottom: fun.convert-px(1) solid var(--color-border);
+        color: var(--color-primary-darker);
+        font-size: var(--font-size-sm);
+        font-weight: 600;
+
+        @include mix.media("screen") {
+          @include mix.dimensions("2xs") {
+            flex: 0 0 auto;
+            justify-content: left;
+            border-bottom: none;
+            border-right: fun.convert-px(1) solid var(--color-border);
+          }
+        }
+      }
+    }
+
+    .copy-to-clipboard-button,
+    .prism-color-scheme-button {
+      display: block;
+      padding: fun.convert-px(3) var(--spacing-xs);
+      background: var(--color-bg);
+      border: 0.4ex solid var(--color-primary);
+      border-radius: fun.convert-px(30);
+      box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
+          var(--color-shadow),
+        fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
+          var(--color-shadow),
+        fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
+          var(--color-shadow);
+      color: var(--color-primary);
+      font-size: var(--font-size-sm);
+      font-weight: 600;
+      transition: all 0.35s ease-in-out 0s;
+
+      &:hover,
+      &:focus {
+        transform: translateX(#{fun.convert-px(-2)})
+          translateY(#{fun.convert-px(-2)});
+        box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
+            var(--color-shadow-light),
+          fun.convert-px(1) fun.convert-px(2) fun.convert-px(2)
+            fun.convert-px(-2) var(--color-shadow-light),
+          fun.convert-px(3) fun.convert-px(4) fun.convert-px(5)
+            fun.convert-px(-4) var(--color-shadow-light),
+          fun.convert-px(4) fun.convert-px(7) fun.convert-px(8)
+            fun.convert-px(-3) var(--color-shadow-light);
+      }
+
+      &:focus {
+        text-decoration: underline var(--color-primary) fun.convert-px(3);
+      }
+
+      &:active {
+        text-decoration: none;
+        transform: translateY(#{fun.convert-px(2)});
+        box-shadow: 0 0 0 0 var(--color-shadow);
+      }
+    }
+
+    pre[class*="language-"] {
+      --gutter-size-with-spacing: calc(var(--gutter-size) + var(--spacing-xs));
+
+      position: relative;
+      overflow: auto;
+      background: var(--color-bg-secondary);
+      border: fun.convert-px(1) solid var(--color-border-light);
+      color: var(--color-fg);
+      hyphens: none;
+      tab-size: 4;
+      text-align: left;
+      white-space: pre;
+      word-spacing: normal;
+      word-break: normal;
+      word-wrap: normal;
+
+      &.command-line {
+        --gutter-size: 19ch;
+        padding-left: var(--gutter-size-with-spacing);
+      }
+
+      &.line-numbers {
+        --gutter-size: 6ch;
+
+        counter-reset: lineNumber;
+        padding-left: var(--gutter-size-with-spacing);
+      }
+
+      code {
+        display: block;
+        padding: var(--spacing-xs) 0;
+        position: relative;
+      }
+
+      .line-numbers-rows,
+      .command-line-prompt {
+        display: block;
+        width: var(--gutter-size);
+        padding: var(--spacing-xs) 0;
+        position: absolute;
+        top: 0;
+        left: calc(var(--gutter-size-with-spacing) * -1);
+        background: var(--color-bg);
+        border-right: fun.convert-px(1) solid var(--color-border);
+        font-size: 100%;
+        letter-spacing: -1px;
+        text-align: right;
+        pointer-events: none;
+        user-select: none;
+
+        > span {
+          &::before {
+            display: block;
+            padding-right: var(--spacing-xs);
+            color: var(--color-fg-light);
+          }
+        }
+      }
+
+      .command-line-prompt {
+        > span {
+          &::before {
+            content: " ";
+          }
+
+          &[data-user]::before {
+            content: "[" attr(data-user) "@" attr(data-host) "] $";
+          }
+
+          &[data-user="root"]::before {
+            content: "[" attr(data-user) "@" attr(data-host) "] #";
+          }
+
+          &[data-prompt]::before {
+            content: attr(data-prompt);
+          }
+
+          &[data-continuation-prompt]::before {
+            content: attr(data-continuation-prompt);
+          }
+        }
+      }
+
+      .line-numbers-rows {
+        > span {
+          counter-increment: lineNumber;
+
+          &::before {
+            content: counter(lineNumber);
+          }
+        }
+      }
+
+      .token {
+        &.comment,
+        &.doc-comment {
+          color: var(--color-fg-light);
+        }
+
+        &.punctuation {
+          color: var(--color-fg);
+        }
+
+        &.attr-name,
+        &.hexcode,
+        &.inserted,
+        &.string {
+          color: var(--color-token-green);
+        }
+
+        &.class,
+        &.coord,
+        &.id,
+        &.function {
+          color: var(--color-token-purple);
+        }
+
+        &.builtin,
+        &.builtin.class-name,
+        &.property-access,
+        &.regex,
+        &.scope {
+          color: var(--color-token-magenta);
+        }
+
+        &.class-name,
+        &.constant,
+        &.global,
+        &.interpolation,
+        &.key,
+        &.package,
+        &.this,
+        &.title,
+        &.variable {
+          color: var(--color-token-blue);
+        }
+
+        &.combinator,
+        &.keyword,
+        &.operator,
+        &.pseudo-class,
+        &.pseudo-element,
+        &.rule,
+        &.selector,
+        &.unit {
+          color: var(--color-token-orange);
+        }
+
+        &.attr-value,
+        &.boolean,
+        &.number {
+          color: var(--color-token-yellow);
+        }
+
+        &.delimiter,
+        &.doctype,
+        &.parameter,
+        &.parent,
+        &.property,
+        &.shebang,
+        &.tag {
+          color: var(--color-token-cyan);
+        }
+
+        &.deleted {
+          color: var(--color-token-red);
+        }
+
+        &.punctuation.brace-hover,
+        &.punctuation.brace-selected {
+          background: var(--color-bg);
+          outline: solid fun.convert-px(1) var(--color-primary-light);
+        }
+      }
+
+      span.inline-color-wrapper {
+        background: url(fun.encode-svg(
+          '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="gray" d="M0 0h2v2H0z"/><path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/></svg>'
+        ));
+
+        // Prevent repeating pattern to be seen.
+        background-position: center;
+        background-size: 110%;
+
+        display: inline-block;
+        height: 1.1ch;
+        width: 1.1ch;
+        margin: 0 0.5ch 0 0;
+        border: fun.convert-px(1) solid var(--color-bg);
+        outline: fun.convert-px(1) solid var(--color-border-dark);
+        overflow: hidden;
+      }
+
+      span.inline-color {
+        display: block;
+
+        /* To prevent visual glitches again */
+        height: 120%;
+        width: 120%;
+      }
+    }
+  }
+}