Skip to content

Commit

Permalink
chore(docs): Separate Code and CodeBlock into separate folders
Browse files Browse the repository at this point in the history
  • Loading branch information
mlaursen committed Oct 19, 2021
1 parent 93ebaa4 commit 4c492b3
Show file tree
Hide file tree
Showing 51 changed files with 91 additions and 87 deletions.
18 changes: 0 additions & 18 deletions packages/documentation/src/_everything.scss
Expand Up @@ -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;
@@ -1,4 +1,4 @@
@use '../../everything' as *;
@use 'react-md' as *;

.code {
@include rmd-typography(body-1);
Expand Down
3 changes: 1 addition & 2 deletions 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";
@@ -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;
Expand All @@ -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
Expand All @@ -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,
Expand All @@ -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;
}
}

Expand Down
Expand Up @@ -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";

Expand Down
@@ -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;
Expand Down
17 changes: 17 additions & 0 deletions 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;
1 change: 1 addition & 0 deletions packages/documentation/src/components/CodeBlock/index.ts
@@ -0,0 +1 @@
export { default } from "./CodeBlock";
@@ -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 (
Expand Down
Expand Up @@ -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";

Expand Down
Expand Up @@ -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";

Expand Down
Expand Up @@ -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;
Expand Down
@@ -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";

Expand Down
Expand Up @@ -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";

Expand Down
Expand Up @@ -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 {
Expand Down
Expand Up @@ -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({
Expand Down
Expand Up @@ -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 {
Expand Down
Expand Up @@ -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;
Expand Down
@@ -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;
Expand Down
Expand Up @@ -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();
Expand Down
Expand Up @@ -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 (
Expand Down
Expand Up @@ -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";

Expand Down
Expand Up @@ -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");
Expand Down
Expand Up @@ -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 (
Expand Down
Expand Up @@ -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;
Expand Down
Expand Up @@ -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(
Expand Down
Expand Up @@ -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";

Expand Down
Expand Up @@ -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>;
Expand Down
Expand Up @@ -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";
Expand Down
Expand Up @@ -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();