@popsure/dirty-swan 0.26.10 → 0.26.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.26.10",
+  "version": "0.26.11",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,
@@ -16,6 +16,7 @@
   "bin": "dist/bin/index.js",
   "files": [
     "dist",
+    "src",
     "Readme.md"
   ],
   "dependencies": {

package/src/App.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import './lib/scss/index.scss';
+
+import DateSelector from './lib/components/dateSelector';
+import Dropzone from './lib/components/dropzone';
+import SignaturePad from './lib/components/signaturePad';
+import { CardWithLeftIcon } from './lib/components/cards';
+import AutocompleteAddress from './lib/components/autocompleteAddress';
+
+function App() {
+  return (
+    <div>
+      <div className="p-btn p-btn--primary">Hello world</div>
+      <DateSelector
+        onChange={() => {}}
+        yearBoundaries={{ min: 1990, max: 2010 }}
+      />
+      <div className="p-notice p-notice--info d-flex">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
+        malesuada laoreet nulla, non maximus ante porta sit amet. Aenean non
+        ipsum nec quam gravida convallis vitae sit amet nisi.
+      </div>
+      <Dropzone
+        uploading={true}
+        progress={32}
+        onSelectedFile={() => {}}
+        // uploadedFileUrl="http://foo.com/my-file.png"
+      />
+      <div style={{ backgroundColor: 'white', padding: '24px' }}>
+        <SignaturePad
+          onChange={(v) => {
+            console.log(v);
+          }}
+        />
+      </div>
+      <div className="mt80"></div>
+      <CardWithLeftIcon
+        title="Lorem ipsum"
+        cardSize="small"
+        className="wmx6 mt8"
+        rightIcon="arrow"
+      >
+        Praesent euismod porta odio at tempus. Aenean urna massa, facilisis
+        malesuada eros at, rhoncus imperdiet nunc
+      </CardWithLeftIcon>
+    </div>
+  );
+}
+
+export default App;

package/src/bin/index.ts

@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+
+import {
+  readConfigurationFile,
+  generateSass,
+  createConfigurationFile,
+  resetToDefaultTheme,
+} from './util';
+import * as path from 'path';
+import * as yargs from 'yargs';
+
+const DEFAULT_FILENAME = 'dirty-swan.config.json';
+const DEFAULT_PATH = './';
+
+yargs
+  .command(
+    'init [path]',
+    'initialize dirty swan with a configuration file',
+    (yargs) => {
+      yargs.positional('path', {
+        describe: 'path to where the configuration file should be at',
+        type: 'string',
+        default: `${DEFAULT_PATH}${DEFAULT_FILENAME}`,
+      });
+    },
+    ({ path }: { path: string }) => {
+      console.log(`🦢 Creating configuration file at: ${path}`);
+      createConfigurationFile(path);
+      console.log(`🦢 Successfully created configuration file at: ${path}`);
+    }
+  )
+  .command(
+    'theme [configuration]',
+    'theme dirty swan according to the configuration file',
+    (yargs) => {
+      yargs.positional('configuration', {
+        describe: '',
+        default: `${DEFAULT_PATH}${DEFAULT_FILENAME}`,
+      });
+      yargs.option('reset', { alias: '-R', default: false, type: 'boolean' });
+    },
+    ({
+      configuration: configurationFile,
+      reset,
+    }: {
+      configuration: string;
+      reset: boolean;
+    }) => {
+      if (reset === true) {
+        console.log('🦢 Reseting to default theme');
+        resetToDefaultTheme();
+        console.log('🦢 Successfully reseted to default theme 💫');
+      } else {
+        const configurationFileAbsolutePath = path.resolve(
+          process.cwd(),
+          configurationFile
+        );
+        console.log(`🦢 Reading configuration file ${configurationFile}`);
+
+        const configuration = readConfigurationFile(
+          configurationFileAbsolutePath
+        );
+        generateSass(configuration);
+        console.log(`🦢 Successfully updated with new theme 💫`);
+      }
+    }
+  )
+  .demandCommand()
+  .showHelpOnFail(true)
+  .help('help', 'Show usage instructions.').argv;

package/src/bin/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "module": "CommonJS",
+    "declaration": true,
+    "target": "ES5",
+    "moduleResolution": "node",
+    "rootDir": "./",
+    "outDir": "../../dist/bin",
+    "strict": true
+  },
+  "include": ["./index.ts"],
+  "exclude": ["*.test.ts"]
+}

package/src/bin/util/index.test.ts

@@ -0,0 +1,85 @@
+import { generatePrimaryColors, generateFont, readConfigurationFile } from '.';
+
+describe('Generate primary colors', () => {
+  it('Should skip unspecified primary colors', () => {
+    expect(
+      generatePrimaryColors({
+        theme: {
+          colors: {
+            primary: {
+              100: '#FFA07A',
+              300: '',
+              500: '',
+              700: '',
+              900: '',
+            },
+          },
+        },
+      })
+    ).toEqual(`$ds-primary-100: #FFA07A;`);
+  });
+
+  it('Should generate sass primary colors', () => {
+    expect(
+      generatePrimaryColors({
+        theme: {
+          colors: {
+            primary: {
+              100: '#FFA07A',
+              300: '#E9967A',
+              500: '#FA8072',
+              700: '#F08080',
+              900: '#CD5C5C',
+            },
+          },
+        },
+      })
+    ).toEqual(
+      `$ds-primary-100: #FFA07A;\n$ds-primary-300: #E9967A;\n$ds-primary-500: #FA8072;\n$ds-primary-700: #F08080;\n$ds-primary-900: #CD5C5C;`
+    );
+  });
+
+  it('Shouldn’t generate sass primary colors if no entry for primary colors', () => {
+    expect(generatePrimaryColors({})).toBeUndefined();
+  });
+});
+
+describe('Generate font', () => {
+  it('Should generate sass font with url', () => {
+    expect(
+      generateFont({
+        theme: {
+          font: {
+            sans: {
+              url:
+                'https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap',
+              family: ['Ubuntu', 'sans-serif'],
+            },
+          },
+        },
+      })
+    ).toEqual(
+      `@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');\n\n$font-family: 'Ubuntu', 'sans-serif';`
+    );
+  });
+
+  it('Should generate sass font without url', () => {
+    expect(
+      generateFont({
+        theme: {
+          font: { sans: { family: ['Arial', 'Helvetica', 'sans-serif'] } },
+        },
+      })
+    ).toEqual("$font-family: 'Arial', 'Helvetica', 'sans-serif';");
+  });
+
+  it('Shouldn’t generate sass font', () => {
+    expect(generateFont({})).toBeUndefined();
+  });
+});
+
+describe('Read configuration file', () => {
+  it('Should read the configuration file', () => {
+    expect(readConfigurationFile(`${__dirname}/test/data.json`)).toBeDefined();
+  });
+});

package/src/bin/util/index.ts

@@ -0,0 +1,132 @@
+#!/usr/bin/env node
+
+import * as fs from 'fs';
+import * as sass from 'sass';
+
+interface ConfigurationFile {
+  theme?: {
+    colors?: {
+      primary?: {
+        100: string;
+        300: string;
+        500: string;
+        700: string;
+        900: string;
+      };
+    };
+    font?: {
+      sans: {
+        family: string[];
+        url?: string;
+      };
+    };
+  };
+}
+
+export function generatePrimaryColors(configuration: ConfigurationFile) {
+  if (configuration.theme?.colors?.primary) {
+    const primaryColors = configuration.theme.colors.primary;
+    return Object.entries(primaryColors)
+      .filter(([shade, hex]) => {
+        if (hex.length === 0) {
+          console.warn(
+            `🦢 value wasn’t specified for shade ${shade}, skipping.`
+          );
+          return false;
+        }
+        return true;
+      })
+      .reduce(
+        (result, [shade, hex], index, arr) =>
+          result +
+          `$ds-primary-${shade}: ${hex};${index < arr.length - 1 ? '\n' : ''}`,
+        ''
+      );
+  }
+  return undefined;
+}
+
+export function generateFont(configuration: ConfigurationFile) {
+  if (configuration.theme?.font?.sans) {
+    const sans = configuration.theme.font.sans;
+    let result = '';
+    if (sans.url && sans.url.length > 0) {
+      result = `@import url('${sans.url}');\n\n`;
+    }
+
+    result =
+      result +
+      `$font-family: ${sans.family.reduce(
+        (result, family, index) =>
+          `${index === 0 ? '' : result + ', '}'${family}'`,
+        ''
+      )};`;
+
+    return result;
+  }
+
+  return undefined;
+}
+
+export function createConfigurationFile(path: string) {
+  type RecursiveRequired<T> = {
+    [P in keyof T]-?: RecursiveRequired<T[P]>;
+  };
+  const exampleConfigurationFile: RecursiveRequired<ConfigurationFile> = {
+    theme: {
+      colors: {
+        primary: {
+          100: '',
+          300: '',
+          500: '',
+          700: '',
+          900: '',
+        },
+      },
+      font: {
+        sans: {
+          family: [],
+          url: '',
+        },
+      },
+    },
+  };
+
+  fs.appendFileSync(path, JSON.stringify(exampleConfigurationFile, null, 2));
+}
+
+export function readConfigurationFile(path: string): ConfigurationFile {
+  const configurationFile = fs.readFileSync(path, 'utf8');
+  const parsedConfigurationFile = JSON.parse(configurationFile);
+  return parsedConfigurationFile;
+}
+
+const SCSS_LIB_FOLDER_PATH = __dirname + '/../../lib/scss';
+const COLORS_OVERRIDE_PATH =
+  SCSS_LIB_FOLDER_PATH + '/public/colors/overrides.scss';
+const FONT_OVERRIDE_PATH = SCSS_LIB_FOLDER_PATH + '/public/font/overrides.scss';
+
+export function resetToDefaultTheme() {
+  fs.writeFileSync(COLORS_OVERRIDE_PATH, '');
+  fs.writeFileSync(FONT_OVERRIDE_PATH, '');
+  const result = sass.renderSync({
+    file: SCSS_LIB_FOLDER_PATH + '/index.scss',
+    outFile: SCSS_LIB_FOLDER_PATH + '/../index.css',
+  });
+  fs.writeFileSync(SCSS_LIB_FOLDER_PATH + '/../../index.css', result.css);
+}
+
+export function generateSass(configuration: ConfigurationFile) {
+  const colors = generatePrimaryColors(configuration);
+  const font = generateFont(configuration);
+
+  colors && fs.writeFileSync(COLORS_OVERRIDE_PATH, colors);
+  font && fs.writeFileSync(FONT_OVERRIDE_PATH, font);
+
+  const result = sass.renderSync({
+    file: SCSS_LIB_FOLDER_PATH + '/index.scss',
+    outFile: SCSS_LIB_FOLDER_PATH + '/../index.css',
+  });
+
+  fs.writeFileSync(SCSS_LIB_FOLDER_PATH + '/../../index.css', result.css);
+}

package/src/bin/util/test/data.json

@@ -0,0 +1,13 @@
+{
+  "theme": {
+    "colors": {
+      "primary": {
+        "100": "#FFA07A",
+        "300": "#E9967A",
+        "500": "#FA8072",
+        "700": "#F08080",
+        "900": "#CD5C5C"
+      }
+    }
+  }
+}

package/src/colors.scss

@@ -0,0 +1 @@
+@import 'lib/scss/public/colors';

package/src/font-weight.scss

@@ -0,0 +1 @@
+@import 'lib/scss/public/font-weight';

package/src/grid.scss

@@ -0,0 +1 @@
+@import 'lib/scss/public/grid';

package/src/index.tsx

@@ -0,0 +1,37 @@
+import ReactDOM from 'react-dom';
+import App from './App';
+
+export {
+  DateSelector,
+  Dropzone,
+  SignaturePad,
+  AutocompleteAddress,
+  Input,
+  MultiDropzone,
+  DownloadRing,
+  IbanInput,
+  CurrencyInput,
+  BottomModal,
+  RegularModal,
+  BottomOrRegularModal,
+  CardWithTopLeftIcon,
+  CardWithLeftIcon,
+  CardWithTopIcon,
+  InfoCard,
+  CardButton,
+  Button,
+  AutoSuggestMultiSelect,
+  Chip,
+  AutoSuggestInput,
+  ComparisonTable,
+  TableRating,
+  TableTrueFalse,
+  TableRowHeader,
+  TableInfoButton,
+  SegmentedControl,
+  DownloadButton
+} from './lib';
+
+export type { TableHeader, DownloadRingDownloadStatus, DownloadStatus } from './lib';
+
+ReactDOM.render(<App />, document.getElementById('root'));

package/src/intro.stories.mdx

@@ -0,0 +1,41 @@
+# Dirty Swan
+
+<Meta title="Intro" />
+
+Dirty Swan is the Design System build and maintained at [Feather](https://feather-insurance.com/).
+
+## Installation
+
+Run the following command using [npm](https://www.npmjs.com):
+
+```bash
+npm install @popsure/dirty-swan --save
+```
+
+If you prefer [Yarn](https://www.npmjs.com), use the following command instead:
+
+```bash
+yarn add @popsure/dirty-swan
+```
+
+## Usage
+
+To use Dirty Swan, import the scss file in one of your App entry point (typically `index/js` or `App.js` if you’re using [create react app](https://create-react-app.dev))
+
+```javaScript
+import '@popsure/dirty-swan/dist/index.css';
+```
+
+## Design values
+
+### Simple Swan
+
+We are a company that believes in the simplicity of things. We don't want to over complicate something that is already a thousand headed hydra at the best of times. We believe that problems can be solved elegantly but most importantly, simply.
+
+We aren't ones to break the wheel, if it works we'll make full use of it. That's why we believe in a design system that is usable and reusable, designing with simplicity and durability in mind.
+
+### Lego Swan
+
+Our design system, like many before it, uses the fundamental methodology of Atomic Design. Building from what is as a foundation and continuously improving from what was.
+
+We believe in building a solid foundation in order to continue solidly from where we began. Future proofing is one of our fundamental values and beliefs. Everything that we design and implement is done with future features in mind.

package/src/lib/components/autocompleteAddress/demo.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { Address } from '@popsure/public-models';
+
+import AutoCompleteAddress from '.';
+
+export const WithoutAddress = () => {
+  const [address, setAddress] = useState<Partial<Address> | undefined>(
+    undefined
+  );
+  return (
+    <AutoCompleteAddress
+      onAddressChange={(address) => {
+        setAddress(address);
+      }}
+      address={address}
+      apiKey="AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8"
+    />
+  );
+};
+
+export const WithAddress = () => {
+  const [address, setAddress] = useState<Partial<Address> | undefined>({
+    street: 'Lohmuehlenstraße',
+    houseNumber: '65',
+    city: 'Berlin',
+    country: 'DE',
+    additionalInformation: 'c/o Factory',
+  });
+  return (
+    <AutoCompleteAddress
+      onAddressChange={(address) => {
+        setAddress(address);
+      }}
+      address={address}
+      apiKey="AIzaSyDg0DSrjYKt5smmsjkVasDz7c4T5rbOXT8"
+    />
+  );
+};

package/src/lib/components/autocompleteAddress/index.stories.mdx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+
+import AutocompleteAddress from '.';
+import { WithoutAddress, WithAddress } from './demo';
+
+<Meta title="JSX/Autocomplete Address" component={AutocompleteAddress} />
+
+# Autocomplete Address
+
+| attribute       | unit                                      | description                                                                                                                    | default value | required |
+| --------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------- | -------- |
+| address         | `Partial<Address>`                        | The address                                                                                                                    | undefined     | false    |
+| onAddressChange | `function (newAddress: Partial<Address>)` | Callback with the updated address, this function will get called everytime the address gets updated.                           | n/a           | true     |
+| apiKey          | string                                    | Your private API key for the [Google Places API](https://developers.google.com/maps/documentation/places/web-service/overview) | n/a           | true     |
+
+Autocomplete Address are user interface elements which allow users start typing an address and get autocompletion suggestions on the address.
+
+## Important notes
+
+This component is for now only restricted to "address" types and will restrict every query to Germany.
+
+## Default example
+
+### Input without an address filled
+
+<WithoutAddress />
+
+### Input with an address filled
+
+<WithAddress />
+
+```typescript
+import React, { useState } from 'react';
+import { Address } from '@popsure/public-models';
+
+import AutoCompleteAddress from '.';
+
+export default () => {
+  const [address, setAddress] = useState<Address>(undefined);
+  return <AutoCompleteAddress onAddressChange={setAddress} address={address} />;
+};
+```