Merge pull request #45 from glweems/code-viewer

Code viewer

Grid/CodeSection.tsx

@@ -0,0 +1,66 @@
+import CodeBlock from '@components/CodeBlock';
+import theme from '@lib/theme';
+import { AnimatePresence, motion } from 'framer-motion';
+import React, { Fragment, memo, useCallback, useState } from 'react';
+import { Resizable } from 'react-resizable';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import cssState from './cssState';
+import { optionsState } from './GridActions';
+import { Handle } from './Handle';
+
+export const CodeSection = ({ className }) => {
+  const [{ width: initialWidth, useCssRepeatFn }, setOptions] = useRecoilState(
+    optionsState
+  );
+  const code = useRecoilValue(cssState);
+  const [width, setWidth] = useState(initialWidth);
+  const [resizing, setResizing] = useState(false);
+  const handleResizeStart = useCallback(() => setResizing(true), []);
+  return (
+    <motion.section
+      style={{ width: `${width}px`, position: 'relative' }}
+      className={className}
+    >
+      <Resizable
+        height={0}
+        width={width}
+        resizeHandles={['w']}
+        handle={(h) => <Handle className={`handle-${h}`} resizing={resizing} />}
+        onResizeStart={handleResizeStart}
+        onResizeStop={() => setResizing(false)}
+        onResize={(_, { size }) => {
+          setWidth(Math.round(size.width));
+        }}
+      >
+        <AnimatePresence>
+          <motion.div
+            style={{ padding: theme.space[2] }}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+          >
+            <Fragment>
+              <label>
+                <input
+                  type="checkbox"
+                  defaultChecked={useCssRepeatFn}
+                  onClick={() =>
+                    setOptions((prev) => ({
+                      ...prev,
+                      useCssRepeatFn: !prev.useCssRepeatFn,
+                    }))
+                  }
+                />
+                use css repeat
+              </label>
+              {code?.css && <CodeBlock language="css" code={code.css} />}
+              {code?.html && <CodeBlock language="html" code={code.html} />}
+            </Fragment>
+          </motion.div>
+        </AnimatePresence>
+      </Resizable>
+    </motion.section>
+  );
+};
+
+export default memo(CodeSection);

Grid/GridActions.tsx

@@ -0,0 +1,62 @@
+import React, { FC, memo } from 'react';
+import { atom, useSetRecoilState } from 'recoil';
+import styled from 'styled-components';
+
+export type OptionsState = {
+  showCode: boolean;
+  useCssRepeatFn: boolean;
+  className: string;
+  width: number;
+  showSidebar: boolean;
+};
+
+export const optionsState = atom<OptionsState>({
+  key: 'options',
+  default: {
+    showCode: true,
+    showSidebar: true,
+    useCssRepeatFn: false,
+    className: 'grid',
+    width: 300,
+  },
+});
+type GridActionsProps = { className: string };
+
+const GridActions: FC<GridActionsProps> = ({ className }) => {
+  const setOptions = useSetRecoilState(optionsState);
+  const handleToggle = (
+    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ): void =>
+    setOptions((prev) => ({
+      ...prev,
+      [e.currentTarget.name]: !prev[e.currentTarget.name],
+    }));
+  return (
+    <GridActionsStyles className={className}>
+      <button name="showSidebar" onClick={handleToggle}>
+        sidebar
+      </button>
+      <button name="showCode" onClick={handleToggle}>
+        show code
+      </button>
+    </GridActionsStyles>
+  );
+};
+
+const GridActionsStyles = styled.div`
+  display: flex;
+  place-items: center;
+  justify-content: space-between;
+  padding: 0 ${(props) => props.theme.space[3]};
+  background-color: ${({ theme }) => theme.colors.bg.grayDark};
+
+  label {
+    color: ${(props) => props.theme.colors.bodytext};
+    background-color: ${(props) => props.theme.colors.yellow[4]};
+  }
+  .btn {
+    width: unset;
+  }
+`;
+
+export default memo(GridActions);

Grid/GridArea.tsx

@@ -1,55 +1,48 @@
-import { Absolute, Button, ButtonGroup } from '@primer/components';
+import { camelCase, omit } from 'lodash';
 import React, { FC, memo, useState } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import styled from 'styled-components';
 import gridAreaStr from '../css-grid-template-parser/gridAreaStr';
 import { areaState } from './gridAreasState';
+import { gridState } from './gridState';
 
 export const GridArea: FC<{ name: string }> = ({ name: initialName }) => {
+  const setGrid = useSetRecoilState(gridState);
   const area = useRecoilValue(areaState(initialName));
   const setArea = useSetRecoilState(areaState(initialName));
+  const [name, setName] = useState(() =>
+    initialName === 'temp' ? '' : initialName
+  );
+  const bg = area?.bg ?? 'blue.5';
 
+  // const func = useDebounce(handleChange);
   const handleDelete = () => {
     setArea(null);
   };
-  const initialBg = area?.bg ?? 'blue.5';
 
   const gridArea = gridAreaStr(area);
-  const [state, setState] = useState({
-    editing: false,
-    name: initialName,
-    bg: area.bg,
-  });
-  const handleChange = (e) =>
-    setState((prev) => ({
+
+  const handleSave = () => {
+    return setGrid((prev) => ({
       ...prev,
-      name: e.target.value,
+      areas: { ...omit(prev.areas, initialName), [name]: { ...area, bg } },
     }));
-  return (
-    <NamedAreaDiv bg={state.bg} gridArea={gridArea}>
-      <AreaNameInput value={state.name} onChange={handleChange} />
+  };
 
-      <Absolute top={2} right={2}>
-        {!state.editing ? (
-          <Button
-            onClick={() => setState((prev) => ({ ...prev, editing: true }))}
-          >
-            edit
-          </Button>
-        ) : (
-          <ButtonGroup>
-            <Button>Save</Button>
-            <Button
-              onClick={() =>
-                setState({ editing: false, name: initialName, bg: initialBg })
-              }
-            >
-              Cancel
-            </Button>
-            <Button onClick={handleDelete}>Delete</Button>
-          </ButtonGroup>
-        )}
-      </Absolute>
+  const handleChange = (e) => setName(camelCase(e.currentTarget.value));
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (e.key === 'Enter') handleSave();
+    if (e.key === 'Escape') handleDelete();
+  };
+
+  return (
+    <NamedAreaDiv bg={bg} gridArea={gridArea}>
+      <AreaNameInput
+        value={name}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        placeholder="name"
+      />
     </NamedAreaDiv>
   );
 };
@@ -58,10 +51,9 @@ type NamedAreaDivProps = {
   isEditing?: boolean;
   bg: string;
 };
+
 export const NamedAreaDiv = styled.div<NamedAreaDivProps>`
   position: relative;
-  /* z-index: 12; */
-  /* z-index: ${(props) => (props.isEditing ? 1000 : 1)}; */
   display: flex;
   grid-area: ${(props) => props.gridArea};
   place-content: center;
@@ -70,6 +62,10 @@ export const NamedAreaDiv = styled.div<NamedAreaDivProps>`
   button {
     z-index: 1000;
   }
+  :focus {
+    outline: 4px dashed ${({ theme }) => theme.colors.focus};
+    outline-offset: -4px;
+  }
 `;
 
 export const AreaNameInput = styled.input`
@@ -90,9 +86,6 @@ export const AreaNameInput = styled.input`
     outline-offset: -4px;
   }
 `;
-AreaNameInput.defaultProps = {
-  // variant: 'small',
-};
 
 GridArea.displayName = 'GridArea';
 export default memo(GridArea);