@designcrowd/fe-shared-lib 1.0.0 → 1.0.1-2.eng2594

package/.eslintrc.js

@@ -1,35 +1,35 @@
-module.exports = {
-  root: true,
-  env: {
-    browser: true,
-  },
-  extends: ['plugin:vue/recommended', '@vue/airbnb', '@vue/prettier', 'plugin:storybook/recommended'],
-  parser: 'vue-eslint-parser',
-  plugins: ['prettier', '@typescript-eslint'],
-  parserOptions: {
-    parser: '@typescript-eslint/parser',
-    ecmaVersion: 2020,
-    sourceType: 'module',
-  },
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'import/no-extraneous-dependencies': [
-      'error',
-      {
-        devDependencies: true,
-      },
-    ],
-    'vue/no-template-target-blank': 'off',
-    'vuejs-accessibility/form-control-has-label': 'off',
-    'vue/html-button-has-type': 'off',
-    'vue/no-reserved-component-names': 'off',
-    'vuejs-accessibility/click-events-have-key-events': 'off',
-  },
-  overrides: [
-    {
-      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.test.{j,t}s?(x)'],
-      env: {},
-    },
-  ],
-};
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+  },
+  extends: ['plugin:vue/recommended', '@vue/airbnb', '@vue/prettier', 'plugin:storybook/recommended'],
+  parser: 'vue-eslint-parser',
+  plugins: ['prettier', '@typescript-eslint'],
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: true,
+      },
+    ],
+    'vue/no-template-target-blank': 'off',
+    'vuejs-accessibility/form-control-has-label': 'off',
+    'vue/html-button-has-type': 'off',
+    'vue/no-reserved-component-names': 'off',
+    'vuejs-accessibility/click-events-have-key-events': 'off',
+  },
+  overrides: [
+    {
+      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.test.{j,t}s?(x)'],
+      env: {},
+    },
+  ],
+};

package/.prettierrc.js

@@ -1,7 +1,7 @@
-module.exports = {
-  singleQuote: true,
-  trailingComma: 'all',
-  arrowParens: 'always',
-  endOfLine: 'auto',
-  printWidth: 120,
-};
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'all',
+  arrowParens: 'always',
+  endOfLine: 'auto',
+  printWidth: 120,
+};

package/.storybook/main.ts

@@ -1,39 +1,39 @@
-import { mergeConfig } from 'vite';
-
-module.exports = {
-  stories: ['../src/**/components/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-a11y',
-    '@storybook/addon-actions',
-    '@storybook/addon-controls',
-    '@storybook/addon-essentials',
-    '@storybook/addon-links',
-    {
-      name: '@storybook/addon-themes',
-      options: {
-        postCss: true,
-      },
-    },
-  ],
-  framework: {
-    name: '@storybook/vue3-vite',
-    options: {},
-  },
-  staticDirs: ['../public'],
-  docs: {
-    autodocs: true,
-  },
-  async viteFinal(config, options) {
-    const configExtension = {
-      optimizeDeps: {
-        include: ['deepmerge'],
-      },
-      build: {
-        commonjsOptions: {
-          include: [/node_modules/],
-        },
-      },
-    };
-    return mergeConfig(config, configExtension);
-  },
-};
+import { mergeConfig } from 'vite';
+
+module.exports = {
+  stories: ['../src/**/components/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-actions',
+    '@storybook/addon-controls',
+    '@storybook/addon-essentials',
+    '@storybook/addon-links',
+    {
+      name: '@storybook/addon-themes',
+      options: {
+        postCss: true,
+      },
+    },
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  staticDirs: ['../public'],
+  docs: {
+    autodocs: true,
+  },
+  async viteFinal(config, options) {
+    const configExtension = {
+      optimizeDeps: {
+        include: ['deepmerge'],
+      },
+      build: {
+        commonjsOptions: {
+          include: [/node_modules/],
+        },
+      },
+    };
+    return mergeConfig(config, configExtension);
+  },
+};

package/.storybook/preview-head-master.html

@@ -1,4 +1,4 @@
-<link
-  rel="stylesheet"
-  href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap"
-/>
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap"
+/>

package/.storybook/preview-head-publish-master.html

@@ -1,4 +1,4 @@
-<link
-  rel="stylesheet"
-  href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap"
-/>
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap"
+/>

package/.storybook/preview-head-publish.html

@@ -1,10 +1,10 @@
-<link
-  rel="stylesheet"
-  href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap"
-/>
-
-<link rel="stylesheet" href="css/tailwind-brandCrowd.css">
-<link rel="stylesheet" href="css/tailwind-brandPage.css">
-<link rel="stylesheet" href="css/tailwind-crazyDomains.css">
-<link rel="stylesheet" href="css/tailwind-designCom.css">
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap"
+/>
+
+<link rel="stylesheet" href="css/tailwind-brandCrowd.css">
+<link rel="stylesheet" href="css/tailwind-brandPage.css">
+<link rel="stylesheet" href="css/tailwind-crazyDomains.css">
+<link rel="stylesheet" href="css/tailwind-designCom.css">
 <link rel="stylesheet" href="css/tailwind-designCrowd.css">

package/.storybook/preview-head.html

@@ -1,10 +1,10 @@
-<link
-  rel="stylesheet"
-  href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap"
-/>
-
-<link rel="stylesheet" href="css/tailwind-brandCrowd.css">
-<link rel="stylesheet" href="css/tailwind-brandPage.css">
-<link rel="stylesheet" href="css/tailwind-crazyDomains.css">
-<link rel="stylesheet" href="css/tailwind-designCom.css">
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap"
+/>
+
+<link rel="stylesheet" href="css/tailwind-brandCrowd.css">
+<link rel="stylesheet" href="css/tailwind-brandPage.css">
+<link rel="stylesheet" href="css/tailwind-crazyDomains.css">
+<link rel="stylesheet" href="css/tailwind-designCom.css">
 <link rel="stylesheet" href="css/tailwind-designCrowd.css">

package/.storybook/preview.js

@@ -1,14 +1,14 @@
-import { withThemeByClassName } from '@storybook/addon-themes';
-
-export const decorators = [
-  withThemeByClassName({
-    themes: {
-      designCom: 'theme-designCom',
-      brandCrowd: 'theme-brandCrowd',
-      crazyDomain: 'theme-crazyDomains',
-      designCrowd: 'theme-designCrowd',
-      brandPage: 'theme-brandPage',
-    },
-    defaultTheme: 'brandCrowd',
-  }),
-];
+import { withThemeByClassName } from '@storybook/addon-themes';
+
+export const decorators = [
+  withThemeByClassName({
+    themes: {
+      designCom: 'theme-designCom',
+      brandCrowd: 'theme-brandCrowd',
+      crazyDomain: 'theme-crazyDomains',
+      designCrowd: 'theme-designCrowd',
+      brandPage: 'theme-brandPage',
+    },
+    defaultTheme: 'brandCrowd',
+  }),
+];

package/Dockerfile

@@ -1,41 +1,41 @@
-FROM node:20.11.0-slim
-
-RUN npm i -g npm@10.7.0
-
-RUN apt-get update \
-    && apt-get install -qq build-essential python3
-
-WORKDIR /app
-
-# First we copy only the things needed by gulp to preload the resources
-COPY package.json .
-COPY package-lock.json .
-
-# Import the token to access private npm packages
-COPY npmrc .
-
-# Copy the npmrc and rename it to .npmrc -- reason being if its present in the repository with the '.' then npm tries to use it.. ¯\_(ツ)_/¯
-RUN mv npmrc .npmrc
-
-ARG NPM_TOKEN
-RUN echo $NPM_TOKEN
-
-RUN npm i
-
-COPY . .
-
-COPY .npmignore ./
-
-RUN mkdir artifacts
-RUN npm publish || touch artifacts/npm_publish_failed
-RUN cp package.json artifacts/
-
-ENTRYPOINT ["/bin/echo", "Nothing to do."]
-
-# Publish to NPM:
-#
-# Windows
-# docker build . --build-arg NPM_TOKEN=%NPM_TOKEN%
-#
-# Linux
-# docker build . --build-arg NPM_TOKEN=$NPM_TOKEN
+FROM node:20.11.0-slim
+
+RUN npm i -g npm@10.7.0
+
+RUN apt-get update \
+    && apt-get install -qq build-essential python3
+
+WORKDIR /app
+
+# First we copy only the things needed by gulp to preload the resources
+COPY package.json .
+COPY package-lock.json .
+
+# Import the token to access private npm packages
+COPY npmrc .
+
+# Copy the npmrc and rename it to .npmrc -- reason being if its present in the repository with the '.' then npm tries to use it.. ¯\_(ツ)_/¯
+RUN mv npmrc .npmrc
+
+ARG NPM_TOKEN
+RUN echo $NPM_TOKEN
+
+RUN npm i
+
+COPY . .
+
+COPY .npmignore ./
+
+RUN mkdir artifacts
+RUN npm publish || touch artifacts/npm_publish_failed
+RUN cp package.json artifacts/
+
+ENTRYPOINT ["/bin/echo", "Nothing to do."]
+
+# Publish to NPM:
+#
+# Windows
+# docker build . --build-arg NPM_TOKEN=%NPM_TOKEN%
+#
+# Linux
+# docker build . --build-arg NPM_TOKEN=$NPM_TOKEN

package/README.md

@@ -1,103 +1,103 @@
-# fe-shared-lib
-
-## Contents
-
-- [Start](#start)
-- [Local Development](#local-development)
-- [Testing in a UAT](#testing-uat)
-- [Storybook](#storybook)
-
-```
-npm install
-```
-
-### Start
-
-This command will build all of the necessary Tailwind files for each theme and setup the configuration for Storybook. Once complete, Storybook will open and you can preview the shared components.
-
-```
-npm start
-```
-
-<a id="local-development"></a>
-
-### Local Development
-
-To edit the design system locally whilst being using in a consumer you need to run `npm link` in this directory and then `npm link @designcrowd/fe-shared-lib` in the consumer.
-
-<a id="testing-uat"></a>
-
-### Testing in a UAT
-
-If you want to have an experimental version of your change, like have it in a uat env without publishing it to prod:
-
-1. Update package.json with `"version": "[current]-[short description of your work]"`
-2. Run npm i
-3. run `docker build . --build-arg NPM_TOKEN=$NPM_TOKEN` in the project directory (make sure you have $NPM_TOKEN properly set in your local env)
-4. Update package reference in the consumer to the version you have just built
-
-### If you are making changes to components used into the BrandPage Tab in BC.NET
-
-1. Get latest app.maker source code.
-2. Update its reference to `@designcrowd/fe-shared-lib` with the one you just built
-3. Bump its version (app.maker version)
-4. Run `npm run docker:publish:bp`
-5. IN BC.Net Update reference of `@designcrowd/library.brand-page` to use the version you just set in the app.maker
-
-<a id="storybook"></a>
-
-### Storybook
-
-Storybook is published with each new commit to `master` and can be found here:
-
-https://brandcrowd-storybook.s3.amazonaws.com/fe-shared-lib/live/index.html
-
-
-
-
-# atoms (formerly shared-component-library)
-
-This flow chart describes the workflow for the shared component library.
-https://app.diagrams.net/#G1TtCW8-zgVQz7bacsfQpqL5ZYCzeCGnXu
-
-
-## Project setup
-
-```
-npm i
-```
-
-### Start
-
-This command will build all necessary Tailwind files for each theme and set up the configuration for Storybook. Once complete, Storybook will open and you can preview the shared components.
-
-```
-npm start
-```
-
-### Local Development
-
-### Storybook
-
-Update Storybook: `npx storybook@latest upgrade`
-
-Writing stories: 
-
-* Storybook Vue 3 docs: https://storybook.js.org/docs/get-started/vue3-vite
-* Official examples: https://github.com/storybookjs/storybook/blob/next/test-storybooks/portable-stories-kitchen-sink/vue3/stories/Button.stories.ts
-
-
-
-# DesignCrowd Tailwind Configuration
-The purpose of the `themes` directory is to build up a library of themes for our different products in a single place. These themes are then exported and consumed into each product using a local Tailwind CSS setup specific to that product. This provides us with a consistent approach for our colours, fonts, spacing etc whilst also being able to control the Tailwind CSS styles across all of our products.
-
-TODO This repository is published as an NPM package and it's themes and helper functions are exposed in the `index.js` file.
-
-## Adding new configuration styles
-New configuration styles can be added to the `themes/base.js` file which will be shared by all child themes. If you want to add a new option only in a specific theme, then edit the `themes/xx.js` file. The format for the theme files follows the structure of the `tailwind.config.js` file. https://tailwindcss.com/docs/configuration
-
-## Adding new themes
-New themes can be added by creating a new xx.js file in the themes folder. Once the new theme has been configured, it will need to be made exportable in the `index.js` file.
-
-## Versioning
-Ensure to bump the version number in `package.json` followed by running `npm i` before each commit. And then run `npm run docker:publish` to publish the version to NPM.
+# fe-shared-lib
+
+## Contents
+
+- [Start](#start)
+- [Local Development](#local-development)
+- [Testing in a UAT](#testing-uat)
+- [Storybook](#storybook)
+
+```
+npm install
+```
+
+### Start
+
+This command will build all of the necessary Tailwind files for each theme and setup the configuration for Storybook. Once complete, Storybook will open and you can preview the shared components.
+
+```
+npm start
+```
+
+<a id="local-development"></a>
+
+### Local Development
+
+To edit the design system locally whilst being using in a consumer you need to run `npm link` in this directory and then `npm link @designcrowd/fe-shared-lib` in the consumer.
+
+<a id="testing-uat"></a>
+
+### Testing in a UAT
+
+If you want to have an experimental version of your change, like have it in a uat env without publishing it to prod:
+
+1. Update package.json with `"version": "[current]-[short description of your work]"`
+2. Run npm i
+3. run `docker build . --build-arg NPM_TOKEN=$NPM_TOKEN` in the project directory (make sure you have $NPM_TOKEN properly set in your local env)
+4. Update package reference in the consumer to the version you have just built
+
+### If you are making changes to components used into the BrandPage Tab in BC.NET
+
+1. Get latest app.maker source code.
+2. Update its reference to `@designcrowd/fe-shared-lib` with the one you just built
+3. Bump its version (app.maker version)
+4. Run `npm run docker:publish:bp`
+5. IN BC.Net Update reference of `@designcrowd/library.brand-page` to use the version you just set in the app.maker
+
+<a id="storybook"></a>
+
+### Storybook
+
+Storybook is published with each new commit to `master` and can be found here:
+
+https://brandcrowd-storybook.s3.amazonaws.com/fe-shared-lib/live/index.html
+
+
+
+
+# atoms (formerly shared-component-library)
+
+This flow chart describes the workflow for the shared component library.
+https://app.diagrams.net/#G1TtCW8-zgVQz7bacsfQpqL5ZYCzeCGnXu
+
+
+## Project setup
+
+```
+npm i
+```
+
+### Start
+
+This command will build all necessary Tailwind files for each theme and set up the configuration for Storybook. Once complete, Storybook will open and you can preview the shared components.
+
+```
+npm start
+```
+
+### Local Development
+
+### Storybook
+
+Update Storybook: `npx storybook@latest upgrade`
+
+Writing stories: 
+
+* Storybook Vue 3 docs: https://storybook.js.org/docs/get-started/vue3-vite
+* Official examples: https://github.com/storybookjs/storybook/blob/next/test-storybooks/portable-stories-kitchen-sink/vue3/stories/Button.stories.ts
+
+
+
+# DesignCrowd Tailwind Configuration
+The purpose of the `themes` directory is to build up a library of themes for our different products in a single place. These themes are then exported and consumed into each product using a local Tailwind CSS setup specific to that product. This provides us with a consistent approach for our colours, fonts, spacing etc whilst also being able to control the Tailwind CSS styles across all of our products.
+
+TODO This repository is published as an NPM package and it's themes and helper functions are exposed in the `index.js` file.
+
+## Adding new configuration styles
+New configuration styles can be added to the `themes/base.js` file which will be shared by all child themes. If you want to add a new option only in a specific theme, then edit the `themes/xx.js` file. The format for the theme files follows the structure of the `tailwind.config.js` file. https://tailwindcss.com/docs/configuration
+
+## Adding new themes
+New themes can be added by creating a new xx.js file in the themes folder. Once the new theme has been configured, it will need to be made exportable in the `index.js` file.
+
+## Versioning
+Ensure to bump the version number in `package.json` followed by running `npm i` before each commit. And then run `npm run docker:publish` to publish the version to NPM.

package/buildspec.yml

@@ -1,46 +1,46 @@
-version: 0.2
-environment_variables:
-  plaintext:
-    S3_KEY_PREFIX: 'brandcrowd-storybook/fe-shared-lib'
-    STATIC_PATH: './.storybook-static'
-env:
-  parameter-store:
-    NPM_TOKEN: 'publish-npm-designcrowd-token'
-    build_docker_username: 'build-docker-username'
-    build_docker_password: 'build-docker-password'
-phases:
-  install:
-    runtime-versions:
-      nodejs: 20
-    commands:
-      - npm i -g npm@10.4.0
-      - cp npmrc .npmrc
-      - npm install
-      - echo Installing yarn...
-      - npm install -g yarn
-  pre_build:
-    commands:
-      - IMAGE_TAG=$(echo $CODEBUILD_RESOLVED_SOURCE_VERSION | cut -c 1-7)
-  build:
-    commands:
-      - echo Build started on `date`
-      - echo Building the Docker image...
-      - docker login -u $build_docker_username -p $build_docker_password
-      - yarn build
-      - docker build -t $IMAGE_TAG --build-arg NPM_TOKEN=$NPM_TOKEN .
-      - echo Build started on `date`
-      - yarn build:storybook
-  post_build:
-    commands:
-      - echo Build completed on `date`
-      - echo Extracting artifacts from Docker container...
-      - docker create --name "temp_library.fe-shared-lib_$IMAGE_TAG" $IMAGE_TAG
-      - docker cp temp_library.fe-shared-lib_$IMAGE_TAG:/app/artifacts .
-      - docker rm temp_library.fe-shared-lib_$IMAGE_TAG
-      - NPM_PUBLISH_FAILED=$(ls -1 ./artifacts/npm_publish_failed | wc -l)
-      - NPM_PUBLISH_VERSION=$(grep version ./artifacts/package.json | sed -En "s/\s+\"version\".\s+\"(.+)\",/\1/p")
-      - JSON="{\"npmPublishVersion\":{\"DataType\":\"String\",\"StringValue\":\"$NPM_PUBLISH_VERSION\"},\"npmPublishFailed\":{\"DataType\":\"String\",\"StringValue\":\"$NPM_PUBLISH_FAILED\"},\"gitRepoName\":{\"DataType\":\"String\",\"StringValue\":\"fe-shared-lib\"}, \"gitHash\":{\"DataType\":\"String\",\"StringValue\":\"${CODEBUILD_RESOLVED_SOURCE_VERSION}\"}, \"containerPath\":{\"DataType\":\"String\",\"StringValue\":\"${IMAGE_TAG}\"}}"
-      - aws sns publish --topic-arn "arn:aws:sns:us-east-1:104415087145:ci-libraryimagemaker-build" --message "Build Complete" --message-attributes "$JSON"
-      - aws s3 rm s3://${S3_KEY_PREFIX}/live --recursive
-      - aws s3 cp ${STATIC_PATH}/ s3://${S3_KEY_PREFIX}/live --recursive
-      - echo Build completed on `date`
+version: 0.2
+environment_variables:
+  plaintext:
+    S3_KEY_PREFIX: 'brandcrowd-storybook/fe-shared-lib'
+    STATIC_PATH: './.storybook-static'
+env:
+  parameter-store:
+    NPM_TOKEN: 'publish-npm-designcrowd-token'
+    build_docker_username: 'build-docker-username'
+    build_docker_password: 'build-docker-password'
+phases:
+  install:
+    runtime-versions:
+      nodejs: 20
+    commands:
+      - npm i -g npm@10.4.0
+      - cp npmrc .npmrc
+      - npm install
+      - echo Installing yarn...
+      - npm install -g yarn
+  pre_build:
+    commands:
+      - IMAGE_TAG=$(echo $CODEBUILD_RESOLVED_SOURCE_VERSION | cut -c 1-7)
+  build:
+    commands:
+      - echo Build started on `date`
+      - echo Building the Docker image...
+      - docker login -u $build_docker_username -p $build_docker_password
+      - yarn build
+      - docker build -t $IMAGE_TAG --build-arg NPM_TOKEN=$NPM_TOKEN .
+      - echo Build started on `date`
+      - yarn build:storybook
+  post_build:
+    commands:
+      - echo Build completed on `date`
+      - echo Extracting artifacts from Docker container...
+      - docker create --name "temp_library.fe-shared-lib_$IMAGE_TAG" $IMAGE_TAG
+      - docker cp temp_library.fe-shared-lib_$IMAGE_TAG:/app/artifacts .
+      - docker rm temp_library.fe-shared-lib_$IMAGE_TAG
+      - NPM_PUBLISH_FAILED=$(ls -1 ./artifacts/npm_publish_failed | wc -l)
+      - NPM_PUBLISH_VERSION=$(grep version ./artifacts/package.json | sed -En "s/\s+\"version\".\s+\"(.+)\",/\1/p")
+      - JSON="{\"npmPublishVersion\":{\"DataType\":\"String\",\"StringValue\":\"$NPM_PUBLISH_VERSION\"},\"npmPublishFailed\":{\"DataType\":\"String\",\"StringValue\":\"$NPM_PUBLISH_FAILED\"},\"gitRepoName\":{\"DataType\":\"String\",\"StringValue\":\"fe-shared-lib\"}, \"gitHash\":{\"DataType\":\"String\",\"StringValue\":\"${CODEBUILD_RESOLVED_SOURCE_VERSION}\"}, \"containerPath\":{\"DataType\":\"String\",\"StringValue\":\"${IMAGE_TAG}\"}}"
+      - aws sns publish --topic-arn "arn:aws:sns:us-east-1:104415087145:ci-libraryimagemaker-build" --message "Build Complete" --message-attributes "$JSON"
+      - aws s3 rm s3://${S3_KEY_PREFIX}/live --recursive
+      - aws s3 cp ${STATIC_PATH}/ s3://${S3_KEY_PREFIX}/live --recursive
+      - echo Build completed on `date`