Merge pull request #5 from PDFTron/lr-modal

Overlay components

Author: liamross

.eslintrc.js

@@ -0,0 +1,51 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: { project: './tsconfig.lint.json' },
+  plugins: ['react-hooks'],
+  extends: [
+    'plugin:jsx-a11y/recommended',
+    'plugin:jest/recommended',
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+
+    // Prettier overrides
+    'prettier',
+    'prettier/react',
+    'prettier/@typescript-eslint',
+  ],
+  settings: {
+    react: { version: '16.8' },
+  },
+  env: {
+    browser: true,
+    es6: true,
+    commonjs: true,
+    node: true,
+    jest: true,
+  },
+  rules: {
+    // Turn on or modify rules.
+    'prefer-const': 'error',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'error',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { ignoreRestSiblings: true, argsIgnorePattern: '^_' },
+    ],
+    '@typescript-eslint/unbound-method': 'error',
+
+    // Turn off rules.
+    'react/prop-types': 'off',
+    'react/display-name': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
+    '@typescript-eslint/camelcase': 'off',
+    '@typescript-eslint/no-triple-slash-reference': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+  },
+};

.eslintrc.yaml

@@ -58,10 +58,8 @@ addParameters({
 
     // Since we do not add component description in code (instead inserting it
     // into a .md file) we extract it using the following.
-    extractComponentDescription: (_c: unknown, { info }: { info: string | { info?: string; text?: string } }) => {
-      if (typeof info === 'string') return info;
-      if (info.info) return info.info;
-      if (info.text) return info.text;
+    extractComponentDescription: (_c: unknown, { readme }: { readme: string }) => {
+      if (readme) return readme;
       return null;
     },
 

.storybook/preview.tsx

@@ -3,9 +3,9 @@ export const componentStory = (componentName: string) =>
 import { boolean, text } from '@storybook/addon-knobs';
 import React from 'react';
 import { ${componentName} } from '../${componentName}';
-import info from './README.md';
+import readme from './README.md';
 
-export default { title: 'Components/${componentName}', component: ${componentName}, parameters: { info } };
+export default { title: 'Components/${componentName}', component: ${componentName}, parameters: { readme } };
 
 export const Basic = () => (
   <${componentName}

scripts/make/file-content/componentStory.ts

@@ -85,16 +85,11 @@ async function createSassVariablesFile(ast) {
   fs.writeFileSync(`src/styles/_variables.scss`, fileContent);
 }
 
-/**
- * Parse the mixins file and generate mixins mdx.
- */
-async function mixins() {
-  const url = 'src/styles/_mixins.scss';
-  const docsUrl = 'src/__stories__/2_style/3_mixins.stories.mdx';
-  const mixinsUrl = 'src/__stories__/2_style/mixins.ts';
+/* --- Mixins. --- */
 
-  const mixinsAst = getAST(url);
-  const docsFile = fs.readFileSync(docsUrl);
+async function generateMixinsFile(input, output, transform, replace = v => v) {
+  const mixinsAst = getAST(input);
+  const docsFile = fs.readFileSync(transform);
 
   const mixinLines = docsFile.toString().split('\n');
   const indexOfEntry = mixinLines.findIndex(l => l.includes('GENERATE_ENTRY'));
@@ -126,21 +121,27 @@ async function mixins() {
     const media = isMedia ? ` {\n  // Content\n}` : '';
     return {
       include: `@include ${m.params}${media};`,
-      code: css
-        .slice(m.source.start.line - 2, m.source.end.line)
-        .join('\n')
-        .trim(),
+      code: replace(
+        css
+          .slice(m.source.start.line - 2, m.source.end.line - 1)
+          .filter(line => !line.includes('@mixin'))
+          .map(line =>
+            line.replace('  ', '').replace('@content;', '/* Content */'),
+          )
+          .join('\n')
+          .trim(),
+      ),
       animation: animation && `\n\n${animation}`,
     };
   });
 
   printFile(
-    mixinsUrl,
+    output,
     data.map(d => d.include),
   );
 
   fs.writeFileSync(
-    docsUrl,
+    transform,
     `${pre}
 ${data
   .map(
@@ -149,20 +150,89 @@ ${data
 
 \`\`\`scss
 ${d.code}${d.animation}
-\`\`\`
-`,
+\`\`\``,
   )
-  .join('\n')}`,
+  .join('\n')}
+`,
   );
 }
 
+/**
+ * Parse the mixins file and generate mixins mdx.
+ */
+async function mixins() {
+  const url = 'src/styles/_mixins.scss';
+  const docsUrl = 'src/__stories__/2_style/3_mixins.stories.mdx';
+  const mixinsUrl = 'src/__stories__/2_style/generated/mixins.ts';
+
+  generateMixinsFile(url, mixinsUrl, docsUrl);
+}
+
+/**
+ * Parse breakpoints.
+ */
+async function breakpoints() {
+  const url = 'src/styles/_breakpoints.scss';
+  const breakpointsUrl = 'src/__stories__/2_style/generated/breakpoints.ts';
+  const docsUrl = 'src/__stories__/2_style/4_breakpoints.stories.mdx';
+
+  const breakpointsAST = getAST(url);
+
+  const breakpointsNodes = breakpointsAST.nodes;
+
+  const declarations = (() => {
+    const decl = [];
+
+    breakpointsNodes.forEach(n => {
+      if (n.type !== 'decl') return;
+      decl.push(n);
+    });
+
+    return decl;
+  })().map(({ prop, value }) => ({ prop, value }));
+
+  const mixins = breakpointsNodes.filter(n => n.name === 'mixin');
+  const css = mixins[0].source.input.css.split('\n');
+
+  const data = mixins.map(m => {
+    const code = css
+      .slice(m.source.start.line - 2, m.source.end.line)
+      .join('\n')
+      .trim();
+    const isOnly = m.params.includes('only');
+    const declaration = declarations.find(decl => code.includes(decl.prop));
+    const numValue = Number(declaration.value.replace('px', ''));
+    return {
+      params: m.params,
+      min: isOnly ? undefined : numValue,
+      max: isOnly ? numValue - 1 : undefined,
+      ...declaration,
+    };
+  });
+
+  printFile('src/__stories__/2_style/generated/breakpointRange.ts', data);
+
+  generateMixinsFile(url, breakpointsUrl, docsUrl, val => {
+    let newVal = val;
+    data.forEach(data => {
+      const isMax = newVal.includes('max-width');
+      if (isMax && data.max) {
+        newVal = newVal.replace(data.prop, `${data.max}px`);
+      } else if (!isMax && data.min) {
+        newVal = newVal.replace(data.prop, `${data.min}px`);
+      }
+      newVal = newVal.replace(' - 1', '');
+    });
+    return newVal;
+  });
+}
+
 /**
  * Parse variables and themes files, generate variables and colors mdx.
  */
 function main() {
-  /* --- Generate mixins file. --- */
-
   mixins();
+  breakpoints();
 
   const ast = getAST('src/styles/_theme.scss');
   const nodes = ast.nodes.find(n => n.selector === ':root').nodes;
@@ -175,32 +245,35 @@ function main() {
     const color = [];
     const zIndex = [];
     const padding = [];
-    const breakpoint = [];
     const fontSize = [];
     const fontWeight = [];
     const borderRadius = [];
+    const boxShadow = [];
+    const focus = [];
     const other = [];
 
     nodes.forEach(n => {
       if (n.type !== 'decl') return;
       if (n.prop.startsWith('--color')) return color.push(n);
       if (n.prop.startsWith('--z-index')) return zIndex.push(n);
       if (n.prop.startsWith('--padding')) return padding.push(n);
-      if (n.prop.startsWith('--breakpoint')) return breakpoint.push(n);
       if (n.prop.startsWith('--font-size')) return fontSize.push(n);
       if (n.prop.startsWith('--font-weight')) return fontWeight.push(n);
       if (n.prop.startsWith('--border-radius')) return borderRadius.push(n);
+      if (n.prop.startsWith('--box-shadow')) return boxShadow.push(n);
+      if (n.prop.startsWith('--focus')) return focus.push(n);
       other.push(n);
     });
 
     return {
       color,
       zIndex,
       padding,
-      breakpoint,
       fontSize,
       fontWeight,
       borderRadius,
+      boxShadow,
+      focus,
       other,
     };
   })();
@@ -215,6 +288,7 @@ function main() {
     const gray = [];
     const blueGray = [];
     const contrast = [];
+    const message = [];
     const other = [];
 
     allColors.forEach(c => {
@@ -223,10 +297,11 @@ function main() {
       if (c.scss.startsWith('$color-gray')) return gray.push(c);
       if (c.scss.startsWith('$color-blue-gray')) return blueGray.push(c);
       if (c.scss.startsWith('$color-contrast')) return contrast.push(c);
+      if (c.scss.startsWith('$color-message')) return message.push(c);
       other.push(c);
     });
 
-    return { theme, font, gray, blueGray, contrast, other };
+    return { theme, font, gray, blueGray, contrast, message, other };
   })();
 
   /* --- Map variables. --- */
@@ -235,7 +310,8 @@ function main() {
   const fontWeight = declarations.fontWeight.map(mapper);
   const padding = declarations.padding.map(mapper);
   const borderRadius = declarations.borderRadius.map(mapper);
-  const breakpoint = declarations.breakpoint.map(mapper);
+  const boxShadow = declarations.boxShadow.map(mapper);
+  const focus = declarations.focus.map(mapper);
   const zIndex = declarations.zIndex.map(mapper);
   const other = declarations.other.map(mapper);
 
@@ -245,13 +321,17 @@ function main() {
     fontWeight,
     padding,
     borderRadius,
-    breakpoint,
+    boxShadow,
+    focus,
     zIndex,
     other,
   };
 
   createSassVariablesFile(variableObject);
-  printFile('src/__stories__/2_style/styleVariables.ts', variableObject);
+  printFile(
+    'src/__stories__/2_style/generated/styleVariables.ts',
+    variableObject,
+  );
 }
 
 main();

scripts/parse_scss.js

@@ -49,6 +49,7 @@ the <LinkTo title="Style/Colors">Style section</LinkTo>.
 ```scss
 @import "~@pdftron/webviewer-react-toolkit/dist/scss/_variables.scss";
 @import "~@pdftron/webviewer-react-toolkit/dist/scss/_mixins.scss";
+@import "~@pdftron/webviewer-react-toolkit/dist/scss/_breakpoints.scss";
 ```
 
 ## Fonts (optional)

src/__stories__/1_basics/2_getting-started.stories.mdx

@@ -28,6 +28,12 @@ div {
 }
 ```
 
+If you are using Sass, make sure you import the Sass variables file:
+
+```scss
+@import "~@pdftron/webviewer-react-toolkit/dist/scss/_variables.scss";
+```
+
 ## Themes
 
 The toolkit ships with a default light and dark theme To see what the colors

src/__stories__/2_style/1_colors.stories.mdx

@@ -28,6 +28,12 @@ div {
 }
 ```
 
+If you are using Sass, make sure you import the Sass variables file:
+
+```scss
+@import "~@pdftron/webviewer-react-toolkit/dist/scss/_variables.scss";
+```
+
 ## Overriding
 
 Since each value is a variable, and all Sass variables just point to the CSS