feat(typescript): prevent duplicate exports (#289)

* feat(typescript): prevent duplicate exports

* v0.0.0

* feat: preventing duplicate exports

* feat: fix package bundle

* fix: fix yarn.lock

* feat: github workflow for namespace checking

Author: masoudmanson

.eslintrc.js

@@ -15,8 +15,21 @@ module.exports = {
     "airbnb-typescript",
     "plugin:sonarjs/recommended",
     "plugin:jest-playwright/recommended",
-    "plugin:prettier/recommended",
     "plugin:storybook/recommended",
+    "plugin:prettier/recommended",
+  ],
+  // this is to disable
+  // no-unused-var, no-extraneous-dependencies and prettier
+  // rules in all ComponentName.namespace.tsx files
+  overrides: [
+    {
+      files: ["src/core/**/*.namespace-test.tsx"],
+      rules: {
+        "@typescript-eslint/no-unused-vars": "off",
+        "import/no-extraneous-dependencies": "off",
+        "prettier/prettier": "off",
+      },
+    },
   ],
   parser: "@typescript-eslint/parser",
   parserOptions: {

.github/workflows/namespace-check.yml

@@ -0,0 +1,17 @@
+# .github/workflows/namespace-check.yml
+
+name: "Namespace Check"
+on: push
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/checkout@v2
+      - uses: bahmutov/npm-install@v1
+
+      - name: Namespace Checking
+        run: yarn namespace-check

.gitignore

@@ -63,7 +63,7 @@ typings/
 .node_repl_history
 
 # Output of 'npm pack'
-*.tgz
+# *.tgz
 
 # Yarn Integrity file
 .yarn-integrity

czifui-v0.0.26.tgz

@@ -1,6 +1,6 @@
 {
   "name": "czifui",
-  "version": "0.0.0-development",
+  "version": "0.0.26",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "repository": {
@@ -48,6 +48,7 @@
     "concurrently": "^6.0.0",
     "css-font": "^1.2.0",
     "cz-conventional-changelog": "^3.3.0",
+    "czifui": "file:czifui-v0.0.26.tgz",
     "eslint": "^7.32.0",
     "eslint-config-airbnb-typescript": "^12.3.1",
     "eslint-config-prettier": "^8.1.0",
@@ -110,7 +111,11 @@
     "ci": "yarn install --frozen-lockfile",
     "test": "jest",
     "sd-build": "yarn style-dictionary build --config src/common/styles-dictionary/config.js",
-    "chromatic": "npx chromatic --exit-zero-on-changes --project-token=cad4aacbfeba"
+    "chromatic": "npx chromatic --exit-zero-on-changes --project-token=cad4aacbfeba",
+    "build-and-pack-a-new-version": "yarn build && yarn version --no-git-tag-version --patch && yarn pack",
+    "install-czifui-locally": "yarn add -D file:\"czifui-v$npm_package_version.tgz\"",
+    "prenamespace-check": "rm czifui-*.tgz && yarn remove czifui && yarn build-and-pack-a-new-version && yarn install-czifui-locally",
+    "namespace-check": "tsc --p tsconfig-namespace-check.json --noEmit"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,md,html,css,yml}": "npx prettier --write"
@@ -137,6 +142,5 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
-  },
-  "dependencies": {}
+  }
 }

package.json

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 12 Aug 2022 21:49:52 GMT
+ * Generated on Thu, 24 Nov 2022 06:48:00 GMT
  */
 
 :root {

src/common/styles-dictionary/css/variables.css

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 12 Aug 2022 21:49:52 GMT
+// Generated on Thu, 24 Nov 2022 06:48:00 GMT
 
 $sds-font-letter-spacing-default: 0.3px;
 $sds-font-letter-spacing-caps: 1px;

src/common/styles-dictionary/scss/_variables.scss

@@ -0,0 +1,8 @@
+import { Accordion, AccordionProps } from "czifui";
+import React from "react";
+
+const AccordionNameSpaceTest = (props: AccordionProps) => {
+  return (
+    <Accordion {...props} useDivider togglePosition="right" id="accordion-id" />
+  );
+};

src/core/Accordion/Accordion.namespace-test.tsx

@@ -91,7 +91,9 @@ function LivePreviewDemo(props: Args): JSX.Element {
   );
 }
 
-const LivePreviewTemplate: Story = (args) => <LivePreviewDemo {...args} />;
+const LivePreviewTemplate: Story = (args: Args) => (
+  <LivePreviewDemo {...args} />
+);
 
 export const LivePreview = LivePreviewTemplate.bind({});
 

src/core/Accordion/index.stories.tsx

@@ -1,7 +1,11 @@
 import { AccordionProps as RawAccordionProps } from "@mui/material";
 import React from "react";
+import AccordionDetails from "./components/AccordionDetails";
+import AccordionHeader from "./components/AccordionHeader";
 import { AccordionExtraProps, StyledAccordion } from "./style";
 
+export { AccordionHeader, AccordionDetails };
+
 export type AccordionProps = RawAccordionProps & AccordionExtraProps;
 
 /**

src/core/Accordion/index.tsx

@@ -0,0 +1,13 @@
+import { Banner, BannerProps } from "czifui";
+import React from "react";
+
+const BannerNameSpaceTest = (props: BannerProps) => {
+  return (
+    <Banner {...props} dismissible sdsType="primary">
+      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nesciunt aliquid
+      maxime soluta voluptas expedita molestias neque saepe aperiam amet enim
+      natus placeat, tempore doloribus odio reiciendis repellat? Dolorem,
+      voluptatem tempore.
+    </Banner>
+  );
+};

src/core/Banner/Banner.namespace-test.tsx

@@ -0,0 +1,10 @@
+import { Button, ButtonProps } from "czifui";
+import React from "react";
+
+const ButtonNameSpaceTest = (props: ButtonProps) => {
+  return (
+    <Button sdsType="primary" sdsStyle="rounded" {...props}>
+      Button
+    </Button>
+  );
+};

src/core/Button/Button.namespace-test.tsx

@@ -0,0 +1,15 @@
+import { ButtonDropdown, ButtonDropdownProps, Icon } from "czifui";
+import React from "react";
+
+const ButtonDropdownNameSpaceTest = (props: ButtonDropdownProps) => {
+  return (
+    <ButtonDropdown
+      sdsType="primary"
+      sdsStyle="rounded"
+      icon={<Icon sdsIcon="download" sdsSize="l" sdsType="button" />}
+      {...props}
+    >
+      Button Dropdown
+    </ButtonDropdown>
+  );
+};

src/core/ButtonDropdown/ButtonDropdown.namespace-test.tsx

@@ -0,0 +1,10 @@
+import { ButtonIcon, ButtonIconProps, Icon } from "czifui";
+import React from "react";
+
+const ButtonIconNameSpaceTest = (props: ButtonIconProps) => {
+  return (
+    <ButtonIcon active size="large" sdsType="primary" {...props}>
+      <Icon sdsIcon="download" sdsSize="l" sdsType="button" />
+    </ButtonIcon>
+  );
+};

src/core/ButtonIcon/ButtonIcon.namespace-test.tsx

@@ -0,0 +1,11 @@
+import { Callout, CalloutProps, CalloutTitle } from "czifui";
+import React from "react";
+
+const CalloutNameSpaceTest = (props: CalloutProps) => {
+  return (
+    <Callout {...props} autoDismiss intent="info" dismissed>
+      <CalloutTitle>Title</CalloutTitle>
+      This is a callout!
+    </Callout>
+  );
+};

src/core/Callout/Callout.namespace-test.tsx

@@ -0,0 +1,28 @@
+import { CellBasic, CellBasicProps, Icon } from "czifui";
+import React from "react";
+
+const CellBasicNameSpaceTest = (props: CellBasicProps) => {
+  return (
+    <table>
+      <tbody>
+        <tr>
+          <CellBasic
+            horizontalAlign="center"
+            verticalAlign="center"
+            icon={<Icon sdsIcon="download" sdsSize="l" sdsType="button" />}
+            iconVerticalAlign="center"
+            primaryText="Primary Text"
+            primaryTextWrapLineCount={2}
+            secondaryText="Secondary Text"
+            secondaryTextWrapLineCount={1}
+            tertiaryText="Tertiary Text"
+            tertiaryTextWrapLineCount={1}
+            shouldShowTooltipOnHover
+            tooltipProps={{ sdsStyle: "light" }}
+            shouldTextWrap
+          />
+        </tr>
+      </tbody>
+    </table>
+  );
+};

src/core/CellBasic/CellBasic.namespace-test.tsx

@@ -0,0 +1,16 @@
+import { CellComponent, CellComponentProps, Icon } from "czifui";
+import React from "react";
+
+const CellBasicNameSpaceTest = (props: CellComponentProps) => {
+  return (
+    <table>
+      <tbody>
+        <tr>
+          <CellComponent horizontalAlign="center" verticalAlign="center">
+            <Icon sdsIcon="download" sdsSize="l" sdsType="button" />
+          </CellComponent>
+        </tr>
+      </tbody>
+    </table>
+  );
+};

src/core/CellComponent/CellComponent.namespace-test.tsx

@@ -0,0 +1,26 @@
+import { CellHeader, CellHeaderProps } from "czifui";
+import React from "react";
+import { noop } from "src/common/utils";
+
+const CellBasicNameSpaceTest = (props: CellHeaderProps) => {
+  return (
+    <table>
+      <tbody>
+        <tr>
+          <CellHeader
+            onClick={noop}
+            direction="asc"
+            active
+            hideSortIcon
+            horizontalAlign="center"
+            shouldShowTooltipOnHover
+            tooltipProps={{ sdsStyle: "light" }}
+            tooltipText="Tooltip"
+          >
+            Header
+          </CellHeader>
+        </tr>
+      </tbody>
+    </table>
+  );
+};

src/core/CellHeader/CellHeader.namespace-test.tsx

@@ -0,0 +1,29 @@
+import { ComplexFilter, ComplexFilterProps } from "czifui";
+import React from "react";
+import { noop } from "src/common/utils";
+
+const OPTIONS = [
+  {
+    color: "#7057ff",
+    description: "Good for newcomers",
+    name: "good first issue",
+  },
+  {
+    color: "#008672",
+    description: "Extra attention is needed",
+    name: "help wanted",
+  },
+];
+
+const ComplexFilterNameSpaceTest = (props: ComplexFilterProps<true>) => {
+  return (
+    <ComplexFilter
+      label="Click Target"
+      onChange={noop}
+      multiple
+      search
+      options={OPTIONS}
+      isTriggerChangeOnOptionClick
+    />
+  );
+};

src/core/ComplexFilter/ComplexFilter.namespace-test.tsx

@@ -8,11 +8,11 @@ interface Props {
   onDelete: (option: DefaultDropdownMenuOption) => void;
 }
 
-export default function Chips({
+const Chips = ({
   value,
   multiple = false,
   onDelete,
-}: Props): JSX.Element | null {
+}: Props): JSX.Element | null => {
   if (!value) return null;
 
   if (!multiple) {
@@ -32,4 +32,6 @@ export default function Chips({
       })}
     </>
   );
-}
+};
+
+export default Chips;

src/core/ComplexFilter/components/Chips/index.tsx

@@ -17,7 +17,7 @@ export {
   StyledPopper as ComplexFilterPopper,
   InputDropdown as ComplexFilterInputDropdown,
 };
-interface ComplexFilterProps<Multiple> {
+export interface ComplexFilterProps<Multiple> {
   label: string;
   options: DefaultDropdownMenuOption[];
   multiple?: Multiple;
@@ -34,9 +34,7 @@ interface ComplexFilterProps<Multiple> {
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
-export default function ComplexFilter<
-  Multiple extends boolean | undefined = false
->({
+const ComplexFilter = <Multiple extends boolean | undefined = false>({
   options,
   label = "",
   multiple = false,
@@ -49,7 +47,7 @@ export default function ComplexFilter<
   InputDropdownComponent = InputDropdown,
   isTriggerChangeOnOptionClick = false,
   ...rest
-}: ComplexFilterProps<Multiple>): JSX.Element {
+}: ComplexFilterProps<Multiple>): JSX.Element => {
   const isControlled = propValue !== undefined;
 
   const [open, setOpen] = useState(false);
@@ -207,4 +205,6 @@ export default function ComplexFilter<
       ? ([] as unknown as Value<DefaultDropdownMenuOption, Multiple>)
       : null;
   }
-}
+};
+
+export default ComplexFilter;

src/core/ComplexFilter/index.tsx

@@ -0,0 +1,32 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogProps,
+  DialogTitle,
+} from "czifui";
+import React from "react";
+import { noop } from "src/common/utils";
+
+const CellBasicNameSpaceTest = (props: DialogProps) => {
+  return (
+    <Dialog onClose={noop} open canClickOutsideClose sdsSize="s">
+      <DialogTitle
+        title="Title"
+        subtitle="Optional subtitle"
+        onClose={noop}
+        data-testid="dialog-title"
+      />
+      <DialogContent data-testid="dialog-content">Content Module</DialogContent>
+      <DialogActions data-testid="dialog-actions" buttonPosition="left">
+        <Button sdsStyle="square" sdsType="primary" onClick={noop}>
+          Primary Action
+        </Button>
+        <Button sdsStyle="square" sdsType="secondary" onClick={noop}>
+          Secondary Action
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};