From d8cec98904ff214c4f8237cb1af3908beb43e9ba Mon Sep 17 00:00:00 2001 From: Fanil Zubairov Date: Tue, 15 Feb 2022 13:51:03 +0200 Subject: [PATCH 1/3] feat(plasma-web-docs): Using b2b tokens / switch light/dark --- website/plasma-web-docs/package-lock.json | 95 ++++++++++++++++++----- 1 file changed, 76 insertions(+), 19 deletions(-) diff --git a/website/plasma-web-docs/package-lock.json b/website/plasma-web-docs/package-lock.json index fae14dffa..a3f176615 100644 --- a/website/plasma-web-docs/package-lock.json +++ b/website/plasma-web-docs/package-lock.json @@ -2234,11 +2234,12 @@ } }, "@sberdevices/plasma-docs-ui": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@sberdevices/plasma-docs-ui/-/plasma-docs-ui-0.5.0.tgz", - "integrity": "sha512-uzjhbD9reuZnPy1Av6aNmw/m3deVqGoDt5p7EC7VCAbV9wkxbfIh3tuzmFh20TMFNWPpLoGRKNGHrvaFrxEj6g==", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@sberdevices/plasma-docs-ui/-/plasma-docs-ui-0.6.0.tgz", + "integrity": "sha512-UeENaQIdCpcrgSF6XgBvWiBnzI6L2blm7vqroPRuAW0z01vOV0SBU7gBTL3XMB/cJFN5vzF17kQSpv8/4PaPpQ==", "requires": { "@sberdevices/plasma-core": "1.27.3", + "@sberdevices/plasma-tokens-b2b": "1.1.0", "@sberdevices/plasma-web": "1.73.1", "@types/marked": "3.0.1", "codesandbox": "2.2.3", @@ -2285,9 +2286,9 @@ } }, "@sberdevices/plasma-icons": { - "version": "1.71.0", - "resolved": "https://registry.npmjs.org/@sberdevices/plasma-icons/-/plasma-icons-1.71.0.tgz", - "integrity": "sha512-o98DLWza1I8+zOgG4Nu382I4mGdp7dFVWg5y93LBlxEqznSXnVGGGO3nKn83cUZ1GxToLyANvFnvdWxxa+Qd7A==" + "version": "1.73.0", + "resolved": "https://registry.npmjs.org/@sberdevices/plasma-icons/-/plasma-icons-1.73.0.tgz", + "integrity": "sha512-geqn+5Jy2s+7S6hzXPYMHo3kh1LtBUaL8s38LDXxmUJNd3W+YCjWxahccp9Pj0ehrR/potTIjX5+ZZAm68mEjg==" }, "@sberdevices/plasma-tokens-b2b": { "version": "1.1.0", @@ -2300,20 +2301,21 @@ "integrity": "sha512-xdrD2tfS79hSYQCgbax8M/XhxITq/EMrJeI0qKNOuRFjjw3PpWp0jWvTSTN7souf8UhlxfObqtICB1/jVliCdA==" }, "@sberdevices/plasma-web": { - "version": "1.83.0", - "resolved": "https://registry.npmjs.org/@sberdevices/plasma-web/-/plasma-web-1.83.0.tgz", - "integrity": "sha512-3n8q4IxMkx7c8B8atsrNovv4lyB5FSoG2d3zDXY37dyadlXTlW8GYUh/CzUHxlvfylRGDszuuxg7qvHZ5eqQSQ==", + "version": "1.90.0", + "resolved": "https://registry.npmjs.org/@sberdevices/plasma-web/-/plasma-web-1.90.0.tgz", + "integrity": "sha512-BRZTUvGwnsk8J8xxWGh4D7Jdo2Ir9G7zUGfa9wWIbxUxeRKdKxdU8QHnj9a2H+HKchSDvKXwvjzJW/Uez8k2cw==", "requires": { "@popperjs/core": "2.9.2", - "@sberdevices/plasma-core": "1.53.0", + "@sberdevices/plasma-core": "1.54.0", + "react-focus-lock": "2.8.1", "react-popper": "2.2.5", "storeon": "3.1.4" }, "dependencies": { "@sberdevices/plasma-core": { - "version": "1.53.0", - "resolved": "https://registry.npmjs.org/@sberdevices/plasma-core/-/plasma-core-1.53.0.tgz", - "integrity": "sha512-EsJV5+npyLUAUKuKBbkHqJ4jL05cxedkj9koQseBLcW+CYnCmdKmqs5UypeqqIQEJndteEQx8qQUNUto0qvzTQ==", + "version": "1.54.0", + "resolved": "https://registry.npmjs.org/@sberdevices/plasma-core/-/plasma-core-1.54.0.tgz", + "integrity": "sha512-dPA7YH9m87uunRWKuolfToD8SyRCqgowTmTgxVYSc5bv3NrhxMmsqxVMIhfaPT1TkjoI/dQqnSG+V/5mozXu6Q==", "requires": { "focus-visible": "5.2.0", "lodash.throttle": "4.1.1" @@ -4188,9 +4190,9 @@ } }, "ansi-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", - "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=" + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz", + "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==" }, "axios": { "version": "0.18.1", @@ -5286,6 +5288,11 @@ "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz", "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==" }, + "detect-node-es": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", + "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==" + }, "detect-port": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.3.0.tgz", @@ -6177,6 +6184,14 @@ "fbjs": "^3.0.0" } }, + "focus-lock": { + "version": "0.10.2", + "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.10.2.tgz", + "integrity": "sha512-DSaI/UHZ/02sg1P616aIWgToQcrKKBmcCvomDZ1PZvcJFj350PnWhSJxJ76T3e5/GbtQEARIACtbrdlrF9C5kA==", + "requires": { + "tslib": "^2.0.3" + } + }, "focus-visible": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-5.2.0.tgz", @@ -7496,9 +7511,9 @@ "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==" }, "ansi-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", - "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=" + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.1.tgz", + "integrity": "sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==" }, "chalk": { "version": "2.4.2", @@ -10159,6 +10174,14 @@ "pure-color": "^1.2.0" } }, + "react-clientside-effect": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.5.tgz", + "integrity": "sha512-2bL8qFW1TGBHozGGbVeyvnggRpMjibeZM2536AKNENLECutp2yfs44IL8Hmpn8qjFQ2K7A9PnYf3vc7aQq/cPA==", + "requires": { + "@babel/runtime": "^7.12.13" + } + }, "react-dev-utils": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", @@ -10303,6 +10326,19 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" }, + "react-focus-lock": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.8.1.tgz", + "integrity": "sha512-4kb9I7JIiBm0EJ+CsIBQ+T1t5qtmwPRbFGYFQ0t2q2qIpbFbYTHDjnjJVFB7oMBtXityEOQehblJPjqSIf3Amg==", + "requires": { + "@babel/runtime": "^7.0.0", + "focus-lock": "^0.10.2", + "prop-types": "^15.6.2", + "react-clientside-effect": "^1.2.5", + "use-callback-ref": "^1.2.5", + "use-sidecar": "^1.0.5" + } + }, "react-helmet": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz", @@ -12747,6 +12783,11 @@ "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==" }, + "use-callback-ref": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz", + "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==" + }, "use-composed-ref": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/use-composed-ref/-/use-composed-ref-1.1.0.tgz", @@ -12768,6 +12809,22 @@ "use-isomorphic-layout-effect": "^1.0.0" } }, + "use-sidecar": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.0.5.tgz", + "integrity": "sha512-k9jnrjYNwN6xYLj1iaGhonDghfvmeTmYjAiGvOr7clwKfPjMXJf4/HOr7oT5tJwYafgp2tG2l3eZEOfoELiMcA==", + "requires": { + "detect-node-es": "^1.1.0", + "tslib": "^1.9.3" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", From 68ff3fd113e7db2e19906ba860433abc70b87a88 Mon Sep 17 00:00:00 2001 From: Fanil Zubairov Date: Tue, 15 Feb 2022 13:54:38 +0200 Subject: [PATCH 2/3] feat(plasma-docs-ui): Using b2b tokens --- utils/plasma-docs-ui/package.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/utils/plasma-docs-ui/package.json b/utils/plasma-docs-ui/package.json index a372855bb..8850e1959 100644 --- a/utils/plasma-docs-ui/package.json +++ b/utils/plasma-docs-ui/package.json @@ -28,9 +28,7 @@ "publishConfig": { "access": "restricted" }, - "files": [ - "lib" - ], + "files": ["lib"], "dependencies": { "@sberdevices/plasma-core": "1.27.3", "@sberdevices/plasma-tokens-b2b": "1.1.0", From 61ad5c5791931f02af1a7001e4c5a2b3d3a733f1 Mon Sep 17 00:00:00 2001 From: Fanil Zubairov Date: Wed, 16 Feb 2022 16:03:02 +0200 Subject: [PATCH 3/3] feat(plasma-web-docs): Switch between b2b and b2c --- .../src/theme/Playground/PlaygroundPreview.ts | 19 ++++++++++++ .../src/theme/Playground/index.tsx | 30 +++++++++++-------- 2 files changed, 36 insertions(+), 13 deletions(-) create mode 100644 website/plasma-web-docs/src/theme/Playground/PlaygroundPreview.ts diff --git a/website/plasma-web-docs/src/theme/Playground/PlaygroundPreview.ts b/website/plasma-web-docs/src/theme/Playground/PlaygroundPreview.ts new file mode 100644 index 000000000..9fbf1db9c --- /dev/null +++ b/website/plasma-web-docs/src/theme/Playground/PlaygroundPreview.ts @@ -0,0 +1,19 @@ +import styled from 'styled-components'; +import { PlaygroundPreview as BasePreview } from '@sberdevices/plasma-docs-ui'; +import { light as b2bLight, dark as b2bDark } from '@sberdevices/plasma-tokens-b2b/themes'; +import { light as b2cLight, dark as b2cDark } from '@sberdevices/plasma-tokens-b2c/themes'; + +const themes = { + b2b: { + light: b2bLight[':root'], + dark: b2bDark[':root'], + }, + b2c: { + light: b2cLight[':root'], + dark: b2cDark[':root'], + }, +}; + +export const PlaygroundPreview = styled(BasePreview)<{ theme?: 'light' | 'dark'; pckg?: 'b2b' | 'b2c' }>` + ${({ theme = 'light', pckg = 'b2b' }) => themes[pckg][theme]} +`; diff --git a/website/plasma-web-docs/src/theme/Playground/index.tsx b/website/plasma-web-docs/src/theme/Playground/index.tsx index 8c80aafa6..c91ad2d46 100644 --- a/website/plasma-web-docs/src/theme/Playground/index.tsx +++ b/website/plasma-web-docs/src/theme/Playground/index.tsx @@ -1,25 +1,19 @@ -import React, { FC } from 'react'; +import React, { FC, useState } from 'react'; import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'; import styled from 'styled-components'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useIsBrowser from '@docusaurus/useIsBrowser'; import usePrismTheme from '@theme/hooks/usePrismTheme'; import useThemeContext from '@theme/hooks/useThemeContext'; -import { PlaygroundPreview } from '@sberdevices/plasma-docs-ui'; -import { light, dark } from '@sberdevices/plasma-tokens-b2b/themes'; +import { Button } from '@sberdevices/plasma-web'; import Translate from '@docusaurus/Translate'; import clsx from 'clsx'; import { CodeSandbox } from '../../components'; +import { PlaygroundPreview } from './PlaygroundPreview'; import styles from './styles.module.css'; -const lightTheme = light[':root']; -const darkTheme = dark[':root']; -const StyledPreview = styled(PlaygroundPreview)<{ theme?: 'light' | 'dark' }>` - ${({ theme = 'light' }) => (theme === 'light' ? lightTheme : darkTheme)} -`; - const StyledWrap = styled.div` width: fit-content; position: absolute; @@ -44,16 +38,26 @@ const Header: FC = ({ children }) => { }; const ResultWithHeader: FC = () => { + const [pckg, setPackage] = useState('b2b'); const { isDarkTheme } = useThemeContext(); return ( <>
- - Result - +
- + );