@teleporthq/teleport-plugin-react-jss 0.18.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 teleporthq
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,14 @@
+# teleport-plugin-react-jss
+
+A plugin for injecting the styles with JSS inside React components.
+
+> This package is part of the [teleport ecosystem](https://github.com/teleporthq/teleport-code-generators). For a complete guide, check out the [official documentation](https://docs.teleporthq.io/).
+
+## Install
+```bash
+npm install @teleporthq/teleport-plugin-react-jss
+```
+or
+```bash
+yarn add @teleporthq/teleport-plugin-react-jss
+```

package/__tests__/component-referenced.ts

@@ -0,0 +1,88 @@
+import { createReactJSSPlugin } from '../src'
+import { staticNode, elementNode, component } from '@teleporthq/teleport-uidl-builders'
+import { ComponentStructure } from '@teleporthq/teleport-types'
+import { createComponentChunk } from './mocks'
+
+describe('Component Scoped Styles', () => {
+  const uidl = component('MYComponent', elementNode('container', {}, [], null, {}), {}, {})
+  uidl.styleSetDefinitions = {
+    'primary-navbar': {
+      type: 'reusable-component-style-map',
+      content: {
+        width: staticNode('100px'),
+        height: staticNode('200px'),
+      },
+    },
+    secondaryNavbar: {
+      type: 'reusable-component-style-map',
+      content: {
+        height: staticNode('50px'),
+        width: staticNode('50px'),
+      },
+    },
+  }
+
+  it('Generates component-scoped style sheet', async () => {
+    const plugin = createReactJSSPlugin()
+    const structure: ComponentStructure = {
+      uidl,
+      chunks: [createComponentChunk()],
+      dependencies: {},
+      options: {},
+    }
+    const { chunks } = await plugin(structure)
+    const styleChunk = chunks.find((chunk) => chunk.name === 'jss-style-definition')
+    const expression = styleChunk.content.declarations[0].init
+    const properties = expression.arguments[0].properties
+
+    expect(styleChunk).toBeDefined()
+    expect(expression.callee.name).toBe('createUseStyles')
+    expect(properties.length).toBe(2)
+    expect(properties[0].key.value).toBe('primary-navbar')
+    expect(properties[1].key.value).toBe('secondaryNavbar')
+  })
+
+  it(`Generates Component-scoped style sheet and adds to the node`, async () => {
+    const plugin = createReactJSSPlugin()
+    uidl.node.content.referencedStyles = {
+      '12345678': {
+        type: 'style-map',
+        content: {
+          mapType: 'component-referenced',
+          content: staticNode('md-8'),
+        },
+      },
+      '1415161718': {
+        type: 'style-map',
+        content: {
+          mapType: 'component-referenced',
+          content: {
+            type: 'dynamic',
+            content: {
+              referenceType: 'prop',
+              id: 'variant',
+            },
+          },
+        },
+      },
+    }
+    const structure: ComponentStructure = {
+      uidl,
+      chunks: [createComponentChunk()],
+      dependencies: {},
+      options: {},
+    }
+
+    const { chunks } = await plugin(structure)
+    const jsxComp = chunks.find((chunk) => chunk.name === 'jsx-component')
+    const attrs = jsxComp.meta.nodesLookup.container.openingElement.attributes[0]
+    const attrExpressions = attrs.value.expression.expressions
+
+    expect(attrs.value.expression.quasis.length).toBe(3)
+    expect(attrExpressions.length).toBe(2)
+    expect(attrExpressions[0].name).toBe("'md-8'")
+    expect(attrExpressions[1].object.name).toBe('classes')
+    expect(attrExpressions[1].property.object.name).toBe('props')
+    expect(attrExpressions[1].property.property.name).toBe('variant')
+  })
+})

package/__tests__/index.ts

@@ -0,0 +1,57 @@
+import { component, elementNode, staticNode } from '@teleporthq/teleport-uidl-builders'
+import { ComponentStructure, ChunkType } from '@teleporthq/teleport-types'
+import { createReactJSSPlugin } from '../src/index'
+import { createComponentChunk } from './mocks'
+
+describe('plugin-react-jss', () => {
+  const plugin = createReactJSSPlugin({
+    styleChunkName: 'jss-chunk',
+  })
+  const componentChunk = createComponentChunk()
+
+  it('generates no chunk if no styles exist', async () => {
+    const uidlSample = component('JSS', elementNode('container'))
+    const structure: ComponentStructure = {
+      uidl: uidlSample,
+      options: {},
+      chunks: [componentChunk],
+      dependencies: {},
+    }
+
+    const { chunks } = await plugin(structure)
+
+    expect(chunks.length).toBe(1)
+  })
+
+  it('Should add react-jss as dependency', async () => {
+    const style = {
+      height: staticNode('100px'),
+    }
+    const element = elementNode(
+      'container',
+      {},
+      [],
+      { type: 'package' as const, version: '10.4.0', path: 'react-jss' },
+      style
+    )
+    element.content.key = 'container'
+    const uidlSample = component('JSS', element)
+    const structure: ComponentStructure = {
+      uidl: uidlSample,
+      options: {},
+      chunks: [componentChunk],
+      dependencies: {},
+    }
+
+    const { dependencies, chunks } = await plugin(structure)
+    const { createUseStyles } = dependencies
+
+    expect(Object.keys(dependencies).length).toBeGreaterThan(0)
+    expect(createUseStyles.type).toBe('package')
+    expect(createUseStyles.path).toBe('react-jss')
+
+    expect(chunks.length).toBe(2)
+    expect(chunks[1].type).toBe(ChunkType.AST)
+    expect(chunks[1].name).toBe('jss-chunk')
+  })
+})

package/__tests__/mocks.ts

@@ -0,0 +1,35 @@
+import { ChunkDefinition, FileType, ChunkType } from '@teleporthq/teleport-types'
+
+export const createComponentChunk = (): ChunkDefinition => ({
+  name: 'jsx-component',
+  meta: {
+    nodesLookup: {
+      container: {
+        openingElement: {
+          name: {
+            name: '',
+          },
+          attributes: [],
+        },
+      },
+    },
+    dynamicRefPrefix: {
+      prop: 'props',
+    },
+  },
+  type: ChunkType.AST,
+  fileType: FileType.JS,
+  linkAfter: ['import-local'],
+  content: {
+    declarations: [
+      {
+        init: {
+          params: [],
+          body: {
+            body: [],
+          },
+        },
+      },
+    ],
+  },
+})

package/__tests__/referenced-styles.ts

@@ -0,0 +1,118 @@
+import { ComponentStructure, UIDLStyleSetDefinition } from '@teleporthq/teleport-types'
+import { createReactJSSPlugin } from '../src'
+import { component, elementNode, staticNode } from '@teleporthq/teleport-uidl-builders'
+import { createComponentChunk } from './mocks'
+
+describe('Referenced Styles on Node', () => {
+  const componentChunk = createComponentChunk()
+  const uidl = component('MyComponent', elementNode('container', null, [], null, null, null, null))
+
+  it('Media and pseudo styles are generated from referencedStyles', async () => {
+    const plugin = createReactJSSPlugin()
+    uidl.node.content.referencedStyles = {
+      '5ed659b1732f9b804f7b6381': {
+        type: 'style-map',
+        content: {
+          mapType: 'inlined',
+          conditions: [{ conditionType: 'screen-size', maxWidth: 991 }],
+          styles: {
+            display: staticNode('none'),
+          },
+        },
+      },
+      '5ed659b1732f9b804f7b6382': {
+        type: 'style-map',
+        content: {
+          mapType: 'inlined',
+          conditions: [{ conditionType: 'element-state', content: 'hover' }],
+          styles: {
+            display: staticNode('block'),
+          },
+        },
+      },
+    }
+    uidl.node.content.key = 'container'
+
+    const structure: ComponentStructure = {
+      uidl,
+      chunks: [componentChunk],
+      dependencies: {},
+      options: {},
+    }
+    const result = await plugin(structure)
+    const { chunks, dependencies } = result
+
+    expect(chunks.length).toBe(2)
+    expect(Object.keys(dependencies).length).toBe(1)
+    expect(dependencies.createUseStyles.path).toBe('react-jss')
+  })
+
+  it('References a style from project and adds, Media and pseudo from referencedStyles', async () => {
+    const plugin = createReactJSSPlugin()
+    uidl.node.content.referencedStyles = {
+      '5ed659b1732f9b804f7b6381': {
+        type: 'style-map',
+        content: {
+          mapType: 'inlined',
+          conditions: [{ conditionType: 'screen-size', maxWidth: 991 }],
+          styles: {
+            display: staticNode('none'),
+          },
+        },
+      },
+      '5ed659b1732f9b804f7b6382': {
+        type: 'style-map',
+        content: {
+          mapType: 'inlined',
+          conditions: [{ conditionType: 'element-state', content: 'hover' }],
+          styles: {
+            display: staticNode('block'),
+          },
+        },
+      },
+      '5ed659b1732f9b804f7b6384': {
+        type: 'style-map',
+        content: {
+          mapType: 'project-referenced',
+          referenceId: 'primaryButton',
+        },
+      },
+    }
+    uidl.node.content.key = 'container'
+
+    const structure: ComponentStructure = {
+      uidl,
+      chunks: [componentChunk],
+      dependencies: {},
+      options: {},
+    }
+
+    const styleSetDefinitions: Record<string, UIDLStyleSetDefinition> = {
+      primaryButton: {
+        type: 'reusable-project-style-map' as const,
+        content: {
+          background: staticNode('blue'),
+          color: staticNode('red'),
+        },
+      },
+    }
+
+    structure.options.projectStyleSet = {
+      styleSetDefinitions,
+      fileName: 'style',
+      path: '../',
+    }
+
+    const result = await plugin(structure)
+    const { chunks, dependencies } = result
+    const styleChunk = chunks.find((chunk) => chunk.name === 'jss-style-definition')
+    const properties = styleChunk.content.declarations[0].init.arguments[0]
+
+    expect(chunks.length).toBe(2)
+    expect(Object.keys(dependencies).length).toBe(2)
+    expect(dependencies.createUseStyles.path).toBe('react-jss')
+    expect(dependencies.useProjectStyles.path).toBe('../style')
+    expect(dependencies.useProjectStyles.meta.namedImport).toBe(true)
+    expect(properties.properties[0].value.properties[0].key.value).toBe('&:hover')
+  })
+})

package/__tests__/style-sheet.ts

@@ -0,0 +1,122 @@
+import {
+  ComponentStructure,
+  UIDLStyleSetDefinition,
+  UIDLDesignTokens,
+} from '@teleporthq/teleport-types'
+import { createStyleSheetPlugin } from '../src'
+import { component, elementNode, staticNode } from '@teleporthq/teleport-uidl-builders'
+import { createComponentChunk } from './mocks'
+
+describe('Style Sheet from react-jss', () => {
+  const componentChunk = createComponentChunk()
+
+  it('Generates a style sheet from the give JSON of styleSet', async () => {
+    const plugin = createStyleSheetPlugin()
+    const uidl = component('MyComponent', elementNode('container'))
+    const tokens: UIDLDesignTokens = {
+      'blue-500': {
+        type: 'static',
+        content: '#9999ff',
+      },
+      'blue-600': {
+        type: 'static',
+        content: '#6b7db3',
+      },
+      'red-500': {
+        type: 'static',
+        content: '#ff9999',
+      },
+    }
+    const structure: ComponentStructure = {
+      uidl,
+      chunks: [componentChunk],
+      options: {},
+      dependencies: {},
+    }
+    const styleSetDefinitions: Record<string, UIDLStyleSetDefinition> = {
+      primaryButton: {
+        type: 'reusable-project-style-map',
+        content: {
+          background: staticNode('blue'),
+          color: staticNode('red'),
+        },
+      },
+      secondaryButton: {
+        type: 'reusable-project-style-map',
+        content: {
+          background: staticNode('red'),
+          color: staticNode('blue'),
+        },
+      },
+      conditionalButton: {
+        type: 'reusable-project-style-map',
+        conditions: [
+          {
+            type: 'screen-size',
+            meta: { maxWidth: 991 },
+            content: {
+              backgrouns: staticNode('purple'),
+            },
+          },
+          {
+            type: 'element-state',
+            meta: { state: 'hover' },
+            content: {
+              background: staticNode('yellow'),
+            },
+          },
+        ],
+        content: {
+          background: staticNode('red'),
+          color: staticNode('blue'),
+        },
+      },
+    }
+
+    structure.uidl = {
+      ...structure.uidl,
+      styleSetDefinitions,
+      designLanguage: {
+        tokens,
+      },
+    }
+
+    const result = await plugin(structure)
+    const { chunks, dependencies } = result
+
+    expect(chunks.length).toBe(3)
+    expect(dependencies.createUseStyles.path).toBe('react-jss')
+  })
+
+  it('Changes the name of output file, with the name is passed', async () => {
+    const plugin = createStyleSheetPlugin({ fileName: 'index' })
+    const uidl = component('MyComponent', elementNode('container'))
+    const structure: ComponentStructure = {
+      uidl,
+      chunks: [componentChunk],
+      options: {},
+      dependencies: {},
+    }
+    structure.uidl.styleSetDefinitions = {
+      primaryButton: {
+        type: 'reusable-project-style-map',
+        content: {
+          background: staticNode('blue'),
+          color: staticNode('red'),
+        },
+      },
+      secondaryButton: {
+        type: 'reusable-project-style-map',
+        content: {
+          background: staticNode('red'),
+          color: staticNode('blue'),
+        },
+      },
+    }
+
+    const result = await plugin(structure)
+    const { chunks } = result
+    const styleChunk = chunks.find((chunk) => chunk.name === 'index')
+    expect(styleChunk).toBeDefined()
+  })
+})

package/dist/cjs/index.d.ts

@@ -0,0 +1,14 @@
+import { ComponentPluginFactory, ComponentPlugin } from '@teleporthq/teleport-types';
+import { createStyleSheetPlugin } from './style-sheet';
+interface JSSConfig {
+    styleChunkName?: string;
+    importChunkName?: string;
+    componentChunkName: string;
+    jssDeclarationName?: string;
+    classAttributeName?: string;
+    styleObjectImportName?: string;
+}
+export declare const createReactJSSPlugin: ComponentPluginFactory<JSSConfig>;
+export { createStyleSheetPlugin };
+declare const _default: ComponentPlugin;
+export default _default;