[FRNT-548] Add documentation configurator (#170)

* feat(docs): add configurators (+ color configurator) * style(docs): fix spaces * style(icons): format * style: lint styles * chore: add lint:style:fix command * perf(configurators): replace heavy libraries * [FRNT-562] add icon component (#163) * add icon component * fix * fix naming * fix usage * fix usage * [FRNT-559] add toast weight (#165) * add toast weight * fix chip and button usage * fix toast styles * [FRNT-564] Implement color palette fabrics (#162) * feat: implement color palette fabrucs * refactor: remame variable Co-authored-by: Шараев Айнур Раильевич <mr.sharaevainur@yandex.ru> * [FRNT-568] add font stacks (#153) * feat: add system-ui as a fallback font, add a font-weight vars * feat: move font-stacks to a separate file * refactor: remove font-weight, rename system font-stack * refactor: rebase and format * [FRNT-560] add weight to button-icon (#164) * add weight to button-icon * add goast styles * fix icon-button styles * [FRNT-396] Rewrite data selectors (#150) * fix: rewrite data-selector, fix grammar * feat: write styleguide for data-attribute * update Styleguide Co-authored-by: Ira <i.aristova@opends.tech> * [FRNT-520] Rewrite tooltip (#129) * chore: bump version (#169) * feat(docs): add configurators (+ color configurator) * style(docs): fix spaces * feat(docs): add white priority to configurators * refactor(configurators): change layout and color * chore(deps): update lock * fix(configurators): hardcoded configurator name * refactor(configurators): remove unused data-attribute * refactor(configurators): replace transparency parrent with svg * refactor(configurators): styling * style(configurators): remove unnecessary xmlns attribute * refactor(configurators): styling * style(configurators): remove unnecessary variables * style(configurators): remove useless code * refactor(configurator): stylesheets, simplify and add some comments * fix(configurators): add viewbox for svg * refactor(configurators): remove unused refs * feat(configurators): add scope colors * feat(configurators): limit the height of configurator's tab * refactor(configurators): remove unused forwardRef * fix(configurators): typo Co-authored-by: Ainur <33234903+purplecandle@users.noreply.github.com> * refactor(configurators): simplify toggle state * chore(deps): sync lock * refactor(configurators): size units * fix(configurators): remove tertiary priority, add success priority Co-authored-by: Irina Aristova <38761239+Irinaristova@users.noreply.github.com> Co-authored-by: tatinacher <tatinacher@gmail.com> Co-authored-by: Шараев Айнур Раильевич <mr.sharaevainur@yandex.ru> Co-authored-by: Ainur <33234903+purplecandle@users.noreply.github.com> Co-authored-by: Ira <i.aristova@opends.tech> Co-authored-by: rchubarkin <dasasd31@gmail.com>
woly-ui · Jul 22, 2021 · 77f4b63 · 77f4b63
1 parent a32a4e0
commit 77f4b63
Show file tree

Hide file tree

Showing 20 changed files with 1,153 additions and 44 deletions.
diff --git a/package.json b/package.json
@@ -11,6 +11,8 @@
     "lint:code": "eslint --ext .ts,.tsx src",
     "lint:code:fix": "yarn lint:code --fix",
     "lint:style": "stylelint './src/**/*.{js,css,ts,tsx}'",
+    "lint:style:fix": "stylelint './src/**/*.{js,css,ts,tsx}' --fix",
+    "percy:cypress": "percy exec -- cypress run",
     "start": "gatsby clean && gatsby develop",
     "test:screenshot": "node screenshot-testing",
     "percy:ci": "start-server-and-test 'yarn docs:build && gatsby serve -p 8000' 8000 'yarn percy exec yarn test:screenshot'",
@@ -43,8 +45,11 @@
     "@rollup/plugin-node-resolve": "^11.1.1",
     "@rollup/plugin-strip": "^2.0.0",
     "@rollup/plugin-url": "^6.0.0",
+    "@types/color": "^3.0.1",
+    "@types/color-rgba": "^2.1.0",
     "@types/node": "^14.14.25",
     "@types/react": "^17.0.1",
+    "@types/react-color": "^3.0.4",
     "@types/react-dropzone": "^5.1.0",
     "@types/styled-components": "^5.1.7",
     "@types/webpack": "^4.41.26",
@@ -100,8 +105,13 @@
     "webpack": "^4"
   },
   "dependencies": {
+    "@tippyjs/react": "^4.2.5",
+    "color-rgba": "^2.2.3",
+    "nanoid": "^3.1.23",
     "react": "16.14.0",
+    "react-colorful": "^5.2.3",
     "react-dom": "16.14.0",
+    "react-resize-detector": "^6.7.4",
     "react-dropzone": "^11.3.4",
     "styled-components": "^5.2.1"
   },

diff --git a/src/lib/configurators/color/index.tsx b/src/lib/configurators/color/index.tsx
@@ -0,0 +1,6 @@
+import { SCOPES } from './scopes';
+import { useSectionsJSX } from '../common/sections';
+
+export const ColorConfigurator: React.FC = () => {
+  return useSectionsJSX('color', SCOPES);
+};
diff --git a/src/lib/configurators/color/scopes.ts b/src/lib/configurators/color/scopes.ts
@@ -0,0 +1,117 @@
+import { Scope, Variable } from '../types';
+
+const CONFIGURABLE_COLORS: Variable[] = [
+  {
+    displayName: 'Shape (default)',
+    name: '--woly-shape-default',
+    type: 'color',
+  },
+  {
+    displayName: 'Shape text (default)',
+    name: '--woly-shape-text-default',
+    type: 'color',
+  },
+  {
+    displayName: 'Shape (disabled)',
+    name: '--woly-shape-disabled',
+    type: 'color',
+  },
+  {
+    displayName: 'Shape text (disabled)',
+    name: '--woly-shape-text-disabled',
+    type: 'color',
+  },
+  {
+    displayName: 'Shape (hover)',
+    name: '--woly-shape-hover',
+    type: 'color',
+  },
+  {
+    displayName: 'Shape text (hover)',
+    name: '--woly-shape-text-hover',
+    type: 'color',
+  },
+  {
+    displayName: 'Shape (active)',
+    name: '--woly-shape-active',
+    type: 'color',
+  },
+  {
+    displayName: 'Shape text (active)',
+    name: '--woly-shape-text-active',
+    type: 'color',
+  },
+  {
+    displayName: 'Canvas (default)',
+    name: '--woly-canvas-default',
+    type: 'color',
+  },
+  {
+    displayName: 'Canvas text (default)',
+    name: '--woly-canvas-text-default',
+    type: 'color',
+  },
+  {
+    displayName: 'Canvas (disabled)',
+    name: '--woly-canvas-disabled',
+    type: 'color',
+  },
+  {
+    displayName: 'Canvas text (disabled)',
+    name: '--woly-canvas-text-disabled',
+    type: 'color',
+  },
+  {
+    displayName: 'Canvas (hover)',
+    name: '--woly-canvas-hover',
+    type: 'color',
+  },
+  {
+    displayName: 'Canvas text (hover)',
+    name: '--woly-canvas-text-hover',
+    type: 'color',
+  },
+  {
+    displayName: 'Canvas (active)',
+    name: '--woly-canvas-active',
+    type: 'color',
+  },
+  {
+    displayName: 'Canvas text (active)',
+    name: '--woly-canvas-text-active',
+    type: 'color',
+  },
+];
+
+export const SCOPES: Scope[] = [
+  {
+    displayName: 'Priorities: Default',
+    selector: `[data-priority='default']`,
+    variables: CONFIGURABLE_COLORS,
+  },
+  {
+    displayName: 'Priorities: Primary',
+    selector: `[data-priority='primary']`,
+    variables: CONFIGURABLE_COLORS,
+  },
+  {
+    displayName: 'Priorities: Secondary',
+    selector: `[data-priority='secondary']`,
+    variables: CONFIGURABLE_COLORS,
+  },
+  {
+    displayName: 'Priorities: White',
+    selector: `[data-priority='white']`,
+    variables: CONFIGURABLE_COLORS,
+  },
+  {
+    displayName: 'Priorities: Success',
+    selector: `[data-priority='success']`,
+    variables: CONFIGURABLE_COLORS,
+  },
+  {
+    displayName: 'Priorities: Danger',
+    selector: `[data-priority='danger']`,
+    variables: CONFIGURABLE_COLORS,
+  },
+];
diff --git a/src/lib/configurators/common/sections.tsx b/src/lib/configurators/common/sections.tsx
@@ -0,0 +1,102 @@
+import styled from 'styled-components';
+import React, { useReducer, useState } from 'react';
+import { IconArrowDown } from 'static/icons';
+
+import { ConfiguratorName, Scope } from '../types';
+import { VariableField } from './variable-field';
+import { getInitialVariableValue } from '../stylesheet';
+import { useLocalConfiguratorsState } from '../context';
+
+type SectionProps = React.HTMLAttributes<HTMLElement> & { name: string };
+
+const SectionView: React.FC<SectionProps> = ({ name, children, ...rest }) => {
+  const [isOpen, toggleOpen] = useReducer((is) => !is, false);
+
+  return (
+    <section {...rest}>
+      <div data-name-wrapper={true} onClick={toggleOpen}>
+        <IconArrowDown data-arrow-icon={true} data-reversed={isOpen} />
+        <span data-section-name={true}>{name}</span>
+      </div>
+      {isOpen && <div data-section-content={true}>{children}</div>}
+    </section>
+  );
+};
+
+export const Section = styled(SectionView)`
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+
+  & [data-name-wrapper] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    margin: 6px 0;
+    padding: 6px 0;
+
+    cursor: pointer;
+
+    user-select: none;
+  }
+
+  & [data-arrow-icon] {
+    & path {
+      fill: currentColor;
+    }
+
+    &[data-reversed='true'] {
+      transform: rotate(180deg);
+    }
+  }
+
+  & [data-section-name] {
+    margin-left: 12px;
+  }
+
+  & [data-section-content] {
+    margin: 12px 0;
+  }
+`;
+
+export function useSectionsJSX(configurator: ConfiguratorName, scopes: Scope[]) {
+  const { id } = useLocalConfiguratorsState();
+
+  const sections = scopes.map((scope) => {
+    const inputs = scope.variables
+      .map((variable) => {
+        const initialValue = getInitialVariableValue(id, {
+          selector: scope.selector,
+          variable: variable.name,
+        });
+
+        if (!initialValue) {
+          // there is no element using this variable inside
+          return null;
+        }
+
+        return (
+          <VariableField
+            key={variable.name}
+            configurator={configurator}
+            scope={scope}
+            variable={variable}
+          />
+        );
+      })
+      .filter(Boolean);
+
+    if (inputs.length === 0) {
+      return null;
+    }
+
+    return (
+      <Section key={scope.selector} name={scope.displayName}>
+        {inputs}
+      </Section>
+    );
+  });
+
+  return <>{sections}</>;
+}
diff --git a/src/lib/configurators/common/variable-field.tsx b/src/lib/configurators/common/variable-field.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ColorInput } from '../inputs/color';
+import { ConfiguratorName, Scope, Variable, VariableType } from '../types';
+import { InputProps } from '../inputs/types';
+import { useCssVariable } from '../stylesheet';
+
+interface Props {
+  configurator: ConfiguratorName;
+  scope: Scope;
+  variable: Variable;
+}
+
+export const VariableField: React.FC<Props> = ({ configurator, scope, variable }) => {
+  const [value, setValue] = useCssVariable({
+    configurator,
+    selector: scope.selector,
+    variable: variable.name,
+  });
+
+  if (!value) return null;
+  const Input = mapTypeToInput[variable.type];
+
+  return (
+    <VariableWrapper>
+      <Input value={value} onChange={setValue} />
+      <VariableName>{variable.displayName}</VariableName>
+    </VariableWrapper>
+  );
+};
+
+const mapTypeToInput: Record<VariableType, React.FC<InputProps>> = {
+  color: ColorInput,
+};
+
+const VariableWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 12px;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+`;
+
+const VariableName = styled.span`
+  display: inline-block;
+  margin-left: 16px;
+
+  font-size: 14px;
+`;