@atlaskit/side-navigation 1.1.2

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2019 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,16 @@
+# Side Navigation
+
+The new side navigation experience used in Atlassian products.
+
+## Installation
+
+```sh
+yarn add @atlaskit/side-navigation
+```
+
+## Usage
+
+Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/navigation/side-navigation).
+
+To add a top navigation, use [@atlaskit/atlassian-navigation](https://atlaskit.atlassian.com/packages/navigation/atlassian-navigation)
+To control the layout of these navigation elements and add expand/collapse functionality to `side-navigation`, use [@atlaskit/page-layout](https://atlaskit.atlassian.com/packages/design-system/page-layout).

package/build/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    "declaration": true,
+    "target": "es5",
+    "paths": {}
+  },
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.tsx"
+  ],
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ]
+}

package/codemods/0.8.0-change-css-fn-prop.ts

@@ -0,0 +1,184 @@
+import { NodePath } from 'ast-types/lib/node-path';
+import core, {
+  API,
+  ASTPath,
+  FileInfo,
+  ImportDeclaration,
+  ImportSpecifier,
+  Options,
+} from 'jscodeshift';
+
+import {
+  addCommentBeforeJSX,
+  getDefaultSpecifierName,
+} from './helpers/generic';
+
+function getJSXAttributesByName(
+  j: core.JSCodeshift,
+  element: ASTPath<any>,
+  attributeName: string,
+) {
+  return j(element)
+    .find(j.JSXOpeningElement)
+    .find(j.JSXAttribute)
+    .filter((attribute) => {
+      const matches = j(attribute)
+        .find(j.JSXIdentifier)
+        .filter((identifier) => identifier.value.name === attributeName);
+      return Boolean(matches.length);
+    });
+}
+
+function getImportSpecifier(
+  j: core.JSCodeshift,
+  source: ReturnType<typeof j>,
+  specifier: string,
+  imported: string,
+) {
+  const specifiers = source
+    .find(j.ImportDeclaration)
+    .filter(
+      (path: ASTPath<ImportDeclaration>) =>
+        path.node.source.value === specifier,
+    )
+    .find(j.ImportSpecifier)
+    .filter(
+      (path: ASTPath<ImportSpecifier>) => path.value.imported.name === imported,
+    );
+
+  if (!specifiers.length) {
+    return null;
+  }
+
+  return specifiers.nodes()[0]!.local!.name;
+}
+
+function updateCssFnProp(
+  j: core.JSCodeshift,
+  source: ReturnType<typeof j>,
+  specifier: string,
+) {
+  source.findJSXElements(specifier).forEach((element) => {
+    const cssFnPropCollection = getJSXAttributesByName(j, element, 'cssFn');
+
+    // no cssProp usage for this element
+    if (!cssFnPropCollection.length) {
+      return;
+    }
+
+    const cssFnProp = cssFnPropCollection.get();
+
+    const cssFnExpression: NodePath = j(cssFnProp)
+      .find(j.JSXExpressionContainer)
+      .find(j.Expression)
+      .get();
+
+    if (cssFnExpression) {
+      // just remove the state styles param
+      try {
+        const [stylePropName] = cssFnExpression!.value.params;
+        j(cssFnExpression)
+          .find(j.SpreadElement)
+          .forEach((n) => {
+            // discerns whether there are multiple identifiers here
+            const isComplexIdentifier = j(n).find(j.Identifier).length > 1;
+
+            if (isComplexIdentifier) {
+              throw new Error(
+                'CSSFn Prop codemod: Unable to parse spread element',
+              );
+            }
+
+            const hasStyleProp = !!j(n)
+              .find(j.Identifier)
+              .filter((node) => node.value.name === stylePropName.name).length;
+            if (hasStyleProp) {
+              j(n).remove();
+            }
+          });
+
+        cssFnExpression!.value.params.shift();
+      } catch (e) {
+        addCommentBeforeJSX(
+          j,
+          cssFnProp,
+          `
+        The usage of the 'cssFn' prop in this component could not be transformed and requires manual intervention.
+        The 'cssFn' prop has been simplified so that users no longer need to merge the inherited styles with their own overrides.
+        For more info please reach out to #help-design-system-code.
+        `,
+        );
+      }
+    }
+  });
+}
+
+function hasImportDeclaration(
+  j: core.JSCodeshift,
+  source: ReturnType<typeof j>,
+  importPath: string,
+) {
+  return !!source
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === importPath).length;
+}
+
+export default function transformer(
+  fileInfo: FileInfo,
+  { jscodeshift: j }: API,
+  options: Options,
+) {
+  const source = j(fileInfo.source);
+
+  if (hasImportDeclaration(j, source, '@atlaskit/side-navigation')) {
+    const defaultSpecifier = getDefaultSpecifierName({
+      j,
+      base: source,
+      packageName: '@atlaskit/side-navigation',
+    });
+
+    if (defaultSpecifier != null) {
+      updateCssFnProp(j, source, defaultSpecifier);
+    }
+
+    [
+      'SideNavigation',
+      'Header',
+      'NavigationHeader',
+      'NavigationContent',
+      'Section',
+      'HeadingItem',
+      'SkeletonHeadingItem',
+      'NestableNavigationContent',
+      'NestingItem',
+      'ButtonItem',
+      'LinkItem',
+      'GoBackItem',
+      'CustomItem',
+      'SkeletonItem',
+      'Footer',
+      'NavigationFooter',
+      'LoadingItems',
+    ].forEach((pkg) => {
+      const importSpecifier = getImportSpecifier(
+        j,
+        source,
+        '@atlaskit/side-navigation',
+        pkg,
+      );
+
+      if (importSpecifier != null) {
+        updateCssFnProp(j, source, importSpecifier);
+      }
+    });
+
+    return source.toSource(
+      options.printOptions || {
+        quote: 'single',
+        trailingComma: true,
+      },
+    );
+  }
+
+  return fileInfo.source;
+}

package/codemods/__tests__/0.8.0-change-css-fn-prop.ts

@@ -0,0 +1,360 @@
+jest.autoMockOff();
+
+import * as transformer from '../0.8.0-change-css-fn-prop';
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('Updates and removes current inline styles', () => {
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+      import { ButtonItem } from '@atlaskit/something';
+
+      const App = () => {
+        return <ButtonItem />;
+      }
+    `,
+    `
+      import { ButtonItem } from '@atlaskit/something';
+
+      const App = () => {
+        return <ButtonItem />;
+      }
+  `,
+    'leaves unrelated code untouched',
+  );
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+      import { ButtonItem } from '@atlaskit/side-navigation';
+
+      const App = () => {
+        return <ButtonItem cssFn={(styles, state) => ({
+
+        })} />;
+      }
+    `,
+    `
+      import { ButtonItem } from '@atlaskit/side-navigation';
+
+      const App = () => {
+        return (
+          <ButtonItem cssFn={state => {
+
+          }} />
+        );
+      }
+  `,
+    'should remove current styles from inline function',
+  );
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+      import { ButtonItem } from '@atlaskit/side-navigation';
+
+      const App = () => {
+        return (
+          <div cssFn={(styles, state) => ({
+            ...styles,
+          })}>
+            <ButtonItem
+              cssFn={(styles, state) => ({
+                ...styles,
+              })}
+            />
+          </div>
+        );
+      };
+
+      `,
+    `
+      import { ButtonItem } from '@atlaskit/side-navigation';
+
+      const App = () => {
+        return (
+          <div cssFn={(styles, state) => ({
+            ...styles,
+          })}>
+            <ButtonItem
+              cssFn={state => ({})}
+            />
+          </div>
+        );
+      };
+  `,
+    'should remove current styles from scope',
+  );
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+    import { ButtonItem } from '@atlaskit/side-navigation';
+
+    const App = () => {
+      return <ButtonItem cssFn={(styles, state) => ({
+        ...styles,
+        color: 'red',
+      })} />;
+    }
+      `,
+    `
+    import { ButtonItem } from '@atlaskit/side-navigation';
+
+    const App = () => {
+      return (
+        <ButtonItem cssFn={state => ({
+          color: 'red',
+        })} />
+      );
+    }
+    `,
+    'correctly removes spread styles',
+  );
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+    import { ButtonItem } from '@atlaskit/side-navigation';
+
+    const App = () => {
+      return <ButtonItem cssFn={(styles, state) => ({
+        ...styles,
+        color: 'red',
+        ':hover': {
+          ...styles[':hover'],
+          color: 'blue',
+        }
+      })} />;
+    }
+      `,
+    `
+    import { ButtonItem } from '@atlaskit/side-navigation';
+
+    const App = () => {
+      return (
+        <ButtonItem cssFn={state => ({
+          color: 'red',
+
+          ':hover': {
+            color: 'blue',
+          },
+        })} />
+      );
+    }
+    `,
+    'correctly removes spread styles with pseudo-selector access',
+  );
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+    import { ButtonItem } from '@atlaskit/side-navigation';
+
+    const App = () => {
+      return (
+        <ButtonItem cssFn={(styles, state) => ({
+          ...(state.x ? styles : {}),
+          color: 'red',
+        })} />
+      );
+    }
+      `,
+    `
+    import { ButtonItem } from '@atlaskit/side-navigation';
+
+    const App = () => {
+      return (
+        <ButtonItem
+          /*
+          TODO: (from codemod) The usage of the 'cssFn' prop in this component could not be transformed and requires manual intervention.
+          The 'cssFn' prop has been simplified so that users no longer need to merge the inherited styles with their own overrides.
+          For more info please reach out to #help-design-system-code.
+          */
+          cssFn={(styles, state) => ({
+            ...(state.x ? styles : {}),
+            color: 'red',
+          })} />
+      );
+    }
+      `,
+    'fail smoothly if the current styles are being used in a non-trivial way',
+  );
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+    import { ButtonItem } from '@atlaskit/side-navigation';
+
+    const App = () => {
+      return <ButtonItem cssFn={() => ({
+        color: 'red',
+      })} />;
+    }
+      `,
+    `
+    import { ButtonItem } from '@atlaskit/side-navigation';
+
+    const App = () => {
+      return <ButtonItem cssFn={() => ({
+        color: 'red',
+      })} />;
+    }
+    `,
+    'not change anything if user is not using the current state or styles',
+  );
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+    import { ButtonItem } from '@atlaskit/side-navigation';
+
+    const App = () => {
+      return <ButtonItem cssFn={(styles, state) => ({
+        ...styles,
+        color: 'red',
+      })}>
+        <ButtonItem cssFn={(styles, state) => ({
+          ...styles,
+          color: 'red',
+        })}/>
+      </ButtonItem>;
+    }
+      `,
+    `
+    import { ButtonItem } from '@atlaskit/side-navigation';
+
+    const App = () => {
+      return (
+        <ButtonItem cssFn={state => ({
+          color: 'red',
+        })}>
+          <ButtonItem cssFn={state => ({
+            color: 'red',
+          })}/>
+        </ButtonItem>
+      );
+    }
+    `,
+    'should remove styles in nested children',
+  );
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+    import { ButtonItem } from '@atlaskit/side-navigation';
+
+    const App = () => {
+      return <ButtonItem />;
+    }
+      `,
+    `
+    import { ButtonItem } from '@atlaskit/side-navigation';
+
+    const App = () => {
+      return <ButtonItem />;
+    }
+    `,
+    'should leave affected items with no use of cssFn untouched',
+  );
+});
+
+describe('Updates and removes current styles', () => {
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+    import { ButtonItem } from '@atlaskit/side-navigation';
+
+    const cssFn = (styles, state) => ({
+      ...styles,
+      color: 'red',
+    });
+
+    const App = () => {
+      return <ButtonItem cssFn={cssFn} />;
+    }
+      `,
+    `
+    import { ButtonItem } from '@atlaskit/side-navigation';
+
+    const cssFn = (styles, state) => ({
+      ...styles,
+      color: 'red',
+    });
+
+    const App = () => {
+      return (
+        <ButtonItem
+          /*
+          TODO: (from codemod) The usage of the 'cssFn' prop in this component could not be transformed and requires manual intervention.
+          The 'cssFn' prop has been simplified so that users no longer need to merge the inherited styles with their own overrides.
+          For more info please reach out to #help-design-system-code.
+          */
+          cssFn={cssFn} />
+      );
+    }
+    `,
+    'should add prompt for non-inline function',
+  );
+
+  defineInlineTest(
+    { ...transformer, parser: 'tsx' },
+    {},
+    `
+    import { ButtonItem, LinkItem } from '@atlaskit/side-navigation';
+
+    const cssFunction = (styles, state) => ({
+      ...styles,
+      color: 'red',
+    });
+
+    const App = () => {
+      return (
+        <ButtonItem cssFn={cssFunction}>
+          <LinkItem cssFn={cssFunction} />
+        </ButtonItem>
+      );
+    };
+      `,
+    `
+    import { ButtonItem, LinkItem } from '@atlaskit/side-navigation';
+
+    const cssFunction = (styles, state) => ({
+      ...styles,
+      color: 'red',
+    });
+
+    const App = () => {
+      return (
+        <ButtonItem
+          /*
+          TODO: (from codemod) The usage of the 'cssFn' prop in this component could not be transformed and requires manual intervention.
+          The 'cssFn' prop has been simplified so that users no longer need to merge the inherited styles with their own overrides.
+          For more info please reach out to #help-design-system-code.
+          */
+          cssFn={cssFunction}>
+          <LinkItem
+            /*
+            TODO: (from codemod) The usage of the 'cssFn' prop in this component could not be transformed and requires manual intervention.
+            The 'cssFn' prop has been simplified so that users no longer need to merge the inherited styles with their own overrides.
+            For more info please reach out to #help-design-system-code.
+            */
+            cssFn={cssFunction} />
+        </ButtonItem>
+      );
+    };
+    `,
+    'should add prompt for non-inline function to multiple instances',
+  );
+});