chore(docs): Separate Code and CodeBlock into separate folders

mlaursen · Oct 19, 2021 · 4c492b3 · 4c492b3
1 parent 93ebaa4
commit 4c492b3
Show file tree

Hide file tree

Showing 51 changed files with 91 additions and 87 deletions.
diff --git a/packages/documentation/src/_everything.scss b/packages/documentation/src/_everything.scss
@@ -5,21 +5,3 @@
     $rmd-theme-secondary: $rmd-pink-a-200,
     $rmd-utils-auto-dense: true
   );
-
-$solarized-base-03: #002b36;
-$solarized-base-02: #073642;
-$solarized-base-01: #586e75;
-$solarized-base-00: #657b83;
-$solarized-base-0: #839496;
-$solarized-base-1: #93a1a1;
-$solarized-base-2: #eee8d5;
-$solarized-base-3: #fdf6e3;
-
-$solarized-yellow: #b58900;
-$solarized-orange: #cb4b16;
-$solarized-red: #d30102;
-$solarized-magenta: #d33682;
-$solarized-violet: #6c71c4;
-$solarized-blue: #268bd2;
-$solarized-cyan: #2aa198;
-$solarized-green: #859900;
diff --git a/packages/documentation/src/components/Code/Code.module.scss b/packages/documentation/src/components/Code/Code.module.scss
@@ -1,4 +1,4 @@
-@use '../../everything' as *;
+@use 'react-md' as *;
 
 .code {
   @include rmd-typography(body-1);

diff --git a/packages/documentation/src/components/Code/index.ts b/packages/documentation/src/components/Code/index.ts
@@ -1,2 +1 @@
-export { default as Code } from "./Code";
-export { default as CodeBlock } from "./CodeBlock";
+export { default } from "./Code";
diff --git a/...src/components/Code/CodeBlock.module.scss → ...omponents/CodeBlock/CodeBlock.module.scss b/...src/components/Code/CodeBlock.module.scss → ...omponents/CodeBlock/CodeBlock.module.scss
@@ -1,10 +1,11 @@
-@use '../../everything' as *;
+@use 'react-md' as *;
+@use './solarized';
 
 .block {
   @include rmd-typography(body-1);
 
-  background-color: $solarized-base-03;
-  color: $solarized-base-1;
+  background-color: solarized.$base-03;
+  color: solarized.$base-1;
 
   // always enforce ltr for blocked code
   direction: ltr;
@@ -15,7 +16,7 @@
 
   &::selection,
   *::selection {
-    background-color: $solarized-base-02;
+    background-color: solarized.$base-02;
   }
 
   // to help with the collapse transition on expandable code, update it so
@@ -34,45 +35,45 @@
 
       &.comment,
       &.doctype {
-        color: $solarized-base-01;
+        color: solarized.$base-01;
       }
 
       &.keyword {
-        color: $solarized-green;
+        color: solarized.$green;
       }
 
       &.punctuation {
-        color: $solarized-base-01;
+        color: solarized.$base-01;
       }
 
       &.inserted,
       &.string,
       .language-tsx &.attr-value {
-        color: $solarized-cyan;
+        color: solarized.$cyan;
       }
 
       &.tag,
       &.selector,
       &.class-name {
-        color: $solarized-blue;
+        color: solarized.$blue;
       }
 
       &.attr-name,
       &.property,
       &.builtin {
-        color: $solarized-yellow;
+        color: solarized.$yellow;
       }
 
       &.script,
       &.interpolation {
-        color: $solarized-base-1;
+        color: solarized.$base-1;
       }
 
       &.deleted,
       &.boolean,
       &.number,
       &.interpolation-punctuation {
-        color: $solarized-red;
+        color: solarized.$red;
       }
 
       &.important,
@@ -92,16 +93,16 @@
 
   &:global(.language-scss) :global .token.function,
   &:global(.language-scss) :global .token.variable {
-    color: $solarized-blue;
+    color: solarized.$blue;
   }
 
   &:global(.language-ts) :global .token + .class-name {
-    color: $solarized-base-1;
+    color: solarized.$base-1;
   }
 
   &:global(.language-scss) :global .token.function,
   &:global(.language-shell) :global .token.function {
-    color: $solarized-orange;
+    color: solarized.$orange;
   }
 }
 

diff --git a/...ntation/src/components/Code/CodeBlock.tsx → ...on/src/components/CodeBlock/CodeBlock.tsx b/...ntation/src/components/Code/CodeBlock.tsx → ...on/src/components/CodeBlock/CodeBlock.tsx
@@ -6,8 +6,8 @@ import React, {
 } from "react";
 import cn from "classnames";
 
+import Code from "../Code";
 import styles from "./CodeBlock.module.scss";
-import Code from "./Code";
 import LineNumbers from "./LineNumbers";
 import { highlightCode } from "./utils";
 

diff --git a/...c/components/Code/LineNumbers.module.scss → ...ponents/CodeBlock/LineNumbers.module.scss b/...c/components/Code/LineNumbers.module.scss → ...ponents/CodeBlock/LineNumbers.module.scss
@@ -1,7 +1,7 @@
-@use '../../everything' as *;
+@use './solarized';
 
 .container {
-  border-right: 1px solid $solarized-base-01;
+  border-right: 1px solid solarized.$base-01;
   counter-reset: line-numbers;
   display: flex;
   flex-direction: column;

diff --git a/...ation/src/components/Code/LineNumbers.tsx → .../src/components/CodeBlock/LineNumbers.tsx b/...ation/src/components/Code/LineNumbers.tsx → .../src/components/CodeBlock/LineNumbers.tsx
diff --git a/packages/documentation/src/components/CodeBlock/_solarized.scss b/packages/documentation/src/components/CodeBlock/_solarized.scss
@@ -0,0 +1,17 @@
+$base-03: #002b36;
+$base-02: #073642;
+$base-01: #586e75;
+$base-00: #657b83;
+$base-0: #839496;
+$base-1: #93a1a1;
+$base-2: #eee8d5;
+$base-3: #fdf6e3;
+
+$yellow: #b58900;
+$orange: #cb4b16;
+$red: #d30102;
+$magenta: #d33682;
+$violet: #6c71c4;
+$blue: #268bd2;
+$cyan: #2aa198;
+$green: #859900;
diff --git a/packages/documentation/src/components/CodeBlock/index.ts b/packages/documentation/src/components/CodeBlock/index.ts
@@ -0,0 +1 @@
+export { default } from "./CodeBlock";
diff --git a/...ocumentation/src/components/Code/utils.ts → ...ntation/src/components/CodeBlock/utils.ts b/...ocumentation/src/components/Code/utils.ts → ...ntation/src/components/CodeBlock/utils.ts
diff --git a/packages/documentation/src/components/ColorsAndTheming/ColorPalette/About.tsx b/packages/documentation/src/components/ColorsAndTheming/ColorPalette/About.tsx
@@ -1,9 +1,10 @@
 import React, { ReactElement } from "react";
 import { Text, TextContainer } from "@react-md/typography";
+import { Link } from "@react-md/link";
 
+import Code from "components/Code";
+import CodeBlock from "components/CodeBlock";
 import Heading from "components/Heading";
-import { Link } from "@react-md/link";
-import { Code, CodeBlock } from "components/Code";
 
 export default function About(): ReactElement {
   return (

diff --git a/packages/documentation/src/components/DemoSandbox/CodePreview.tsx b/packages/documentation/src/components/DemoSandbox/CodePreview.tsx
@@ -3,7 +3,7 @@ import cn from "classnames";
 import { IFiles } from "codesandbox-import-utils/lib/api/define";
 import { CircularProgress } from "@react-md/progress";
 
-import { CodeBlock } from "components/Code";
+import CodeBlock from "components/CodeBlock";
 
 import FileNotFound from "./FileNotFound";
 

diff --git a/packages/documentation/src/components/DemoSandbox/FileNotFound.tsx b/packages/documentation/src/components/DemoSandbox/FileNotFound.tsx
@@ -7,7 +7,7 @@ import { List, ListItem } from "@react-md/list";
 import { Text, TextContainer } from "@react-md/typography";
 import { bem } from "@react-md/utils";
 
-import Code from "components/Code/Code";
+import Code from "components/Code";
 
 import styles from "./CodePreview.module.scss";
 

diff --git a/packages/documentation/src/components/Demos/Alert/HandlingDuplicatedMessages.tsx b/packages/documentation/src/components/Demos/Alert/HandlingDuplicatedMessages.tsx
@@ -10,7 +10,7 @@ import { Divider } from "@react-md/divider";
 import { Fieldset, Form, NativeSelect, Radio, useChoice } from "@react-md/form";
 import { ArrowDropDownSVGIcon } from "@react-md/material-icons";
 
-import Code from "components/Code/Code";
+import Code from "components/Code";
 
 interface Props {
   duplicates: DuplicateBehavior;

diff --git a/packages/documentation/src/components/Demos/Elevation/AllElevations.tsx b/packages/documentation/src/components/Demos/Elevation/AllElevations.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement } from "react";
 import cn from "classnames";
 
-import Code from "components/Code/Code";
+import Code from "components/Code";
 
 import styles from "./AllElevations.module.scss";
 

diff --git a/packages/documentation/src/components/Demos/Form/FileInputs/FileInputExample.tsx b/packages/documentation/src/components/Demos/Form/FileInputs/FileInputExample.tsx
@@ -12,7 +12,7 @@ import {
 } from "@react-md/form";
 import { SrOnly, Text } from "@react-md/typography";
 
-import CodeBlock from "components/Code/CodeBlock";
+import CodeBlock from "components/CodeBlock";
 
 import styles from "./FileInputExample.module.scss";
 

diff --git a/packages/documentation/src/components/Demos/Form/Sliders/ConfigurableSlider.tsx b/packages/documentation/src/components/Demos/Form/Sliders/ConfigurableSlider.tsx
@@ -13,7 +13,7 @@ import {
 import { Text } from "@react-md/typography";
 import { Grid, GridCell } from "@react-md/utils";
 
-import Code from "components/Code/Code";
+import Code from "components/Code";
 import { NfcSVGIcon, SyncSVGIcon } from "@react-md/material-icons";
 
 interface ConfiguredSliderProps extends UseSliderOptions {

diff --git a/packages/documentation/src/components/Demos/Form/TextFields/NumberHookExamples.tsx b/packages/documentation/src/components/Demos/Form/TextFields/NumberHookExamples.tsx
@@ -8,7 +8,7 @@ import {
 import { Text } from "@react-md/typography";
 import { Grid } from "@react-md/utils";
 
-import Code from "components/Code/Code";
+import Code from "components/Code";
 
 export default function NumberHookExamples(): ReactElement | null {
   const [value1, field1Props] = useNumberField({

diff --git a/packages/documentation/src/components/Demos/Form/Validation/WithReactHookForm.tsx b/packages/documentation/src/components/Demos/Form/Validation/WithReactHookForm.tsx
@@ -14,7 +14,7 @@ import {
 import { CircularProgress } from "@react-md/progress";
 import { useTimeout } from "@react-md/utils";
 
-import CodeBlock from "components/Code/CodeBlock";
+import CodeBlock from "components/CodeBlock";
 import ControllerTextField, { ExampleFormData } from "./ControllerTextField";
 
 interface State {

diff --git a/packages/documentation/src/components/Demos/Layout/ConfigurationForm.tsx b/packages/documentation/src/components/Demos/Layout/ConfigurationForm.tsx
@@ -8,7 +8,8 @@ import {
 } from "@react-md/layout";
 import { Text } from "@react-md/typography";
 import { Grid, useAppSize } from "@react-md/utils";
-import Code from "components/Code/Code";
+
+import Code from "components/Code";
 
 interface ConfigurationFormProps {
   phoneLayout: SupportedPhoneLayout;

diff --git a/packages/documentation/src/components/Demos/Layout/CurrentChildren.tsx b/packages/documentation/src/components/Demos/Layout/CurrentChildren.tsx
@@ -1,7 +1,8 @@
+import React, { ReactElement } from "react";
 import { Text } from "@react-md/typography";
 import { Grid } from "@react-md/utils";
-import Code from "components/Code/Code";
-import React, { ReactElement } from "react";
+
+import Code from "components/Code";
 
 export interface CurrentChildrenProps {
   route: string;

diff --git a/packages/documentation/src/components/Demos/Layout/LayoutVisibility.tsx b/packages/documentation/src/components/Demos/Layout/LayoutVisibility.tsx
@@ -3,8 +3,8 @@ import { Button } from "@react-md/button";
 import { isPersistentLayout, useLayoutConfig } from "@react-md/layout";
 import { Text } from "@react-md/typography";
 
-import CodeBlock from "components/Code/CodeBlock";
 import Blockquote from "components/Blockquote";
+import CodeBlock from "components/CodeBlock";
 
 export default function LayoutVisibility(): ReactElement {
   const { showNav, hideNav, ...remaining } = useLayoutConfig();

diff --git a/packages/documentation/src/components/Demos/Link/SimpleExamples.tsx b/packages/documentation/src/components/Demos/Link/SimpleExamples.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement } from "react";
 import { Link } from "@react-md/link";
 import { Text } from "@react-md/typography";
 
-import Code from "components/Code/Code";
+import Code from "components/Code";
 
 export default function SimpleExamples(): ReactElement {
   return (

diff --git a/packages/documentation/src/components/Demos/MaterialIcons/AllIcons.tsx b/packages/documentation/src/components/Demos/MaterialIcons/AllIcons.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement } from "react";
 import * as MaterialIcons from "@react-md/material-icons";
 import { Tooltipped } from "@react-md/tooltip";
 
-import Code from "components/Code/Code";
+import Code from "components/Code";
 
 import styles from "./AllIcons.module.scss";
 

diff --git a/packages/documentation/src/components/Demos/Menu/AddingEventHandlers/AddingOnClick.tsx b/packages/documentation/src/components/Demos/Menu/AddingEventHandlers/AddingOnClick.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement, useState } from "react";
 import { DropdownMenu } from "@react-md/menu";
 import { Text } from "@react-md/typography";
 
-import Code from "components/Code/Code";
+import Code from "components/Code";
 
 export default function AddingOnClick(): ReactElement {
   const [value, setValue] = useState("None");

diff --git a/packages/documentation/src/components/Demos/Menu/AddingEventHandlers/CustomMenuItems.tsx b/packages/documentation/src/components/Demos/Menu/AddingEventHandlers/CustomMenuItems.tsx
@@ -5,7 +5,7 @@ import { AddSVGIcon, ShareSVGIcon } from "@react-md/material-icons";
 import { DropdownMenu, MenuItem, MenuItemProps } from "@react-md/menu";
 import { Text } from "@react-md/typography";
 
-import Code from "components/Code/Code";
+import Code from "components/Code";
 
 function Share(props: MenuItemProps): ReactElement {
   return (

diff --git a/packages/documentation/src/components/Demos/Menu/CustomRenderers/NonVirtualizedMenu.tsx b/packages/documentation/src/components/Demos/Menu/CustomRenderers/NonVirtualizedMenu.tsx
@@ -3,7 +3,7 @@ import { ListItemAddonType } from "@react-md/list";
 import { DropdownMenu } from "@react-md/menu";
 import { Text } from "@react-md/typography";
 
-import Code from "components/Code/Code";
+import Code from "components/Code";
 
 interface Item {
   leftAddon: ReactNode;

diff --git a/packages/documentation/src/components/Demos/Menu/CustomRenderers/VirtualizedMenu.tsx b/packages/documentation/src/components/Demos/Menu/CustomRenderers/VirtualizedMenu.tsx
@@ -6,7 +6,7 @@ import { DropdownMenu, Menu, MenuItem, MenuRenderer } from "@react-md/menu";
 import { Text } from "@react-md/typography";
 import { unitToNumber, useAppSize } from "@react-md/utils";
 
-import Code from "components/Code/Code";
+import Code from "components/Code";
 
 const mobileHeight = unitToNumber(scssVariables["rmd-list-item-large-height"]);
 const desktopHeight = unitToNumber(

diff --git a/packages/documentation/src/components/Demos/Portal/CustomPortalContainer.tsx b/packages/documentation/src/components/Demos/Portal/CustomPortalContainer.tsx
@@ -3,7 +3,7 @@ import { Radio, useChoice } from "@react-md/form";
 import { Portal } from "@react-md/portal";
 import { Text } from "@react-md/typography";
 
-import Code from "components/Code/Code";
+import Code from "components/Code";
 
 import styles from "./CustomPortalContainer.module.scss";
 

diff --git a/packages/documentation/src/components/Demos/Tooltip/AdvancedAPIAndGotchas.tsx b/packages/documentation/src/components/Demos/Tooltip/AdvancedAPIAndGotchas.tsx
@@ -3,7 +3,7 @@ import { Button } from "@react-md/button";
 import { Tooltipped } from "@react-md/tooltip";
 import { Text } from "@react-md/typography";
 
-import CodeBlock from "components/Code/CodeBlock";
+import CodeBlock from "components/CodeBlock";
 
 function BrokenButton(): ReactElement {
   return <Button>No go</Button>;

diff --git a/packages/documentation/src/components/Demos/Transition/CrossFadeExamples.tsx b/packages/documentation/src/components/Demos/Transition/CrossFadeExamples.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement } from "react";
 import { Divider } from "@react-md/divider";
 import { Text } from "@react-md/typography";
 
-import Code from "components/Code/Code";
+import Code from "components/Code";
 
 import CrossFadeExamplesAsync from "./CrossFadeExamplesAsync";
 import CrossFadeExamplesStatic from "./CrossFadeExamplesStatic";

diff --git a/packages/documentation/src/components/Demos/Utils/AppSizeListenerExample.tsx b/packages/documentation/src/components/Demos/Utils/AppSizeListenerExample.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement } from "react";
 import { TextContainer, Text } from "@react-md/typography";
 import { AppSizeListener, useAppSize } from "@react-md/utils";
 
-import CodeBlock from "components/Code/CodeBlock";
+import CodeBlock from "components/CodeBlock";
 
 function CurrentSize(): ReactElement {
   const context = useAppSize();

diff --git a/packages/documentation/src/components/Demos/Utils/ResizeListenerExample.tsx b/packages/documentation/src/components/Demos/Utils/ResizeListenerExample.tsx
@@ -3,7 +3,7 @@ import { Checkbox, useChecked } from "@react-md/form";
 import { Text } from "@react-md/typography";
 import { ResizeListener } from "@react-md/utils";
 
-import CodeBlock from "components/Code/CodeBlock";
+import CodeBlock from "components/CodeBlock";
 
 export default function ResizeListenerExample(): ReactElement {
   const [size, setSize] = useState(() => {

diff --git a/packages/documentation/src/components/Home/Components.tsx b/packages/documentation/src/components/Home/Components.tsx
@@ -9,7 +9,8 @@ import { Divider } from "@react-md/divider";
 import { MediaContainer } from "@react-md/media";
 import { Text } from "@react-md/typography";
 
-import { Code, CodeBlock } from "components/Code";
+import Code from "components/Code";
+import CodeBlock from "components/CodeBlock";
 import LinkButton from "components/LinkButton";
 
 import { Component as SVG } from "./components.svg";