type improvements, shadow on output squares

.babelrc

@@ -1,6 +1,10 @@
 {
   "presets": ["next/babel"],
   "plugins": [
-    ["styled-components", {"ssr": true}]
+    ["babel-plugin-styled-components",
+      {
+        "ssr": false
+      }
+    ]
   ]
 }

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
     'eslint:recommended',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
     'plugin:jsx-a11y/recommended',
     'plugin:react-hooks/recommended',
     'next',

src/components/CodeBlocks/Filter.tsx

@@ -1,13 +1,13 @@
 import { Form, Switch } from 'antd';
 import hljs from 'highlight.js/lib/core';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import shallow from 'zustand/shallow';
 import { symbols, rgbToString } from './Output';
 import { SectionTitle } from './SectionTitle';
 import SliderInput from './SliderInput';
 import { useInputStore } from '~/components/store';
 
-export const FilterControls = () => {
+export const FilterControls: React.FC = () => {
   const [svgProps, cssProps, filterProps, setFilterProps] = useInputStore(
     (state) => [state.svgProps, state.cssProps, state.filterProps, state.setFilterProps],
     shallow

src/components/CodeBlocks/Output.tsx

@@ -1,12 +1,13 @@
+import React from 'react';
 import styled from 'styled-components';
 import shallow from 'zustand/shallow';
-import { useInputStore } from '~/components/store';
+import { ColorType, useInputStore } from '~/components/store';
 
 export const symbols = /[\r\n%#()<>?[\\\]^`{|}]/g;
 
-export const rgbToString = ({ r, g, b, a }) => `rgba(${r},${g},${b},${a})`;
+export const rgbToString = ({ r, g, b, a }: ColorType) => `rgba(${r},${g},${b},${a})`;
 
-const Output = () => {
+const Output: React.FC = () => {
   const [svgProps, cssProps, filterProps] = useInputStore(
     (state) => [state.svgProps, state.cssProps, state.filterProps],
     shallow
@@ -37,9 +38,11 @@ const Output = () => {
 {
   width: 250px;
   height: 250px;
-  background: ${gradientType}-gradient(${gradientFirstParam}, ${rgbToString(color1)}, ${rgbToString(
-    color2
-  )})${showTransparency ? ', url(/checkers.png)' : ''};
+  background: 
+    ${gradientType}-gradient(${gradientFirstParam}, 
+      ${rgbToString(color1)}, ${rgbToString(color2)})${
+    showTransparency ? ', url(/checkers.png)' : ''
+  };
   /* filter: contrast(${contrast}%) brightness(${brightness}%); */
 }`;
 
@@ -56,7 +59,10 @@ filter: contrast(${contrast}%) brightness(${brightness}%);
     <Container>
       <Noise size={size} code={svgString} />
       <Gradient css={gradientCss} />
-      <Filter css={liveCss} />
+      <FilterContainer>
+        <FilterShadow />
+        <Filter css={liveCss} />
+      </FilterContainer>
     </Container>
   );
 };
@@ -78,10 +84,26 @@ const Noise = styled.div`
   width: ${p=>p.size}px;
   height: ${p=>p.size}px;
   background: url("data:image/svg+xml,${(p) => p.code.replace(symbols, encodeURIComponent)}");
+  box-shadow: rgb(50 50 93 / 23%) 0px 30px 60px -15px, rgb(0 0 0 / 32%) 0px 18px 36px -18px;
 `;
 
 const Gradient = styled.div`
   ${(p) => p.css}
+  box-shadow: rgb(50 50 93 / 23%) 0px 30px 60px -15px, rgb(0 0 0 / 32%) 0px 18px 36px -18px;
+`;
+
+const FilterContainer = styled.div`
+  position: relative;
+`;
+
+// have to create a new layer, or the filter affects box-shadow
+const FilterShadow = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-shadow: rgb(50 50 93 / 23%) 0px 30px 60px -15px, rgb(0 0 0 / 32%) 0px 18px 36px -18px;
 `;
 
 const Filter = styled.div`

src/components/CodeBlocks/Reset.tsx

@@ -1,8 +1,9 @@
 import { Button } from 'antd';
+import React from 'react';
 import shallow from 'zustand/shallow';
 import { useInputStore } from '~/components/store';
 
-export const Reset = () => {
+export const Reset: React.FC = () => {
   const [resetAllProps] = useInputStore((state) => [state.resetAllProps], shallow);
   return <Button onClick={() => resetAllProps()}>Reset all</Button>;
 };

src/components/CodeBlocks/SectionTitle.tsx

@@ -3,6 +3,7 @@ import { Button } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
 import CopyToClipboard from '~/components/CopyToClipboard';
+
 interface ISectionTitle {
   title: string;
   copyText?: string;
@@ -12,9 +13,11 @@ export const SectionTitle: React.FC<ISectionTitle> = ({ title, copyText }) => {
     <TitleBar>
       <H2>{title}</H2>
       {copyText && (
-        <CopyToClipboard textToCopy={copyText}>
-          <Button icon={<CopyOutlined />}>Copy</Button>
-        </CopyToClipboard>
+        <div style={{ marginBottom: 12 }}>
+          <CopyToClipboard textToCopy={copyText}>
+            <Button icon={<CopyOutlined />}>Copy</Button>
+          </CopyToClipboard>
+        </div>
       )}
     </TitleBar>
   );
@@ -26,5 +29,5 @@ const H2 = styled.h2`
 const TitleBar = styled.div`
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-end;
 `;

src/components/CodeBlocks/SliderInput.tsx

@@ -1,7 +1,17 @@
 import { Form, Slider, InputNumber } from 'antd';
 import styled from 'styled-components';
 
-const SliderInput = (props) => {
+interface ISliderInput {
+  label: string;
+  name: string;
+  onChange: (val: number) => void;
+  value: number;
+  min: number;
+  max?: number;
+  step?: number;
+  tipFormatter?: (val: number) => string;
+}
+const SliderInput: React.FC<ISliderInput> = (props) => {
   const { label, name, onChange, value, min, max, step, tipFormatter } = props;
   return (
     <Form.Item label={label} name={name} style={{ width: '100%', margin: 0 }}>

src/components/CodeBlocks/Svg.tsx

@@ -1,12 +1,12 @@
 import { Form } from 'antd';
 import hljs from 'highlight.js/lib/core';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import shallow from 'zustand/shallow';
 import { SectionTitle } from './SectionTitle';
 import SliderInput from './SliderInput';
 import { useInputStore } from '~/components/store';
 
-export const SvgControls = () => {
+export const SvgControls: React.FC = () => {
   const [svgProps, setSvgProps] = useInputStore(
     (state) => [state.svgProps, state.setSvgProps],
     shallow

src/components/store.tsx

@@ -1,14 +1,44 @@
-/* eslint no-unused-vars: "off" */
-
 import create from 'zustand';
 
+export type SvgPropsType = {
+  size: number;
+  baseFrequency: number;
+  numOctaves: number;
+};
+
+export type ColorType = { r: number; g: number; b: number; a: number };
+
+export type CssPropsType = {
+  gradientType: string;
+  angle: number;
+  color1: ColorType;
+  color2: ColorType;
+  showTransparency: boolean;
+  posX: number;
+  posY: number;
+};
+
+export type FilterPropsType = {
+  contrast: number;
+  brightness: number;
+  inlineSvg: boolean;
+};
+
 export type InputState = {
-  svgProps: Record<string, number>;
-  setSvgProps: ({ size, baseFrequency, numOctaves }) => void;
-  cssProps: Record<string, any>;
-  setCssProps: ({ gradientType, angle, color1, color2, showTransparency, posX, posY }) => void;
-  filterProps: Record<string, number | boolean>;
-  setFilterProps: ({ contrast, brightness, inlineSvg }) => void;
+  svgProps: SvgPropsType;
+  setSvgProps: ({ size, baseFrequency, numOctaves }: SvgPropsType) => void;
+  cssProps: CssPropsType;
+  setCssProps: ({
+    gradientType,
+    angle,
+    color1,
+    color2,
+    showTransparency,
+    posX,
+    posY,
+  }: CssPropsType) => void;
+  filterProps: FilterPropsType;
+  setFilterProps: ({ contrast, brightness, inlineSvg }: FilterPropsType) => void;
   resetAllProps: () => void;
 };