feat(design-system: Add Atoms to design system (#16)

apps/design-system/custom.d.ts

@@ -0,0 +1,8 @@
+declare module 'ramda'
+
+declare module '*.svg' {
+  import React = require('react')
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
+  const src: string
+  export default src
+}

apps/design-system/src/assets/icons/index.ts

@@ -0,0 +1,26 @@
+export { ReactComponent as Github } from './github.svg'
+export { ReactComponent as Twitter } from './twitter.svg'
+export { ReactComponent as Discord } from './discord.svg'
+export { ReactComponent as Info } from './info.svg'
+export { ReactComponent as Warning } from './warning.svg'
+export { ReactComponent as ExternalLink } from './externalLink.svg'
+export { ReactComponent as Transfer } from './transfer.svg'
+export { ReactComponent as Incoming } from './incoming.svg'
+export { ReactComponent as Outgoing } from './outgoing.svg'
+export { ReactComponent as Plus } from './plus.svg'
+export { ReactComponent as Swap } from './swap.svg'
+export { ReactComponent as Arrow } from './arrow.svg'
+export { ReactComponent as ArrowRight } from './arrowRight.svg'
+export { ReactComponent as ArrowDown } from './arrowDown.svg'
+export { ReactComponent as ArrowsLeftRight } from './arrowsLeftRight.svg'
+export { ReactComponent as ChevronUpDown } from './chevronUpDown.svg'
+export { ReactComponent as Eye } from './eye.svg'
+export { ReactComponent as XMark } from './xMark.svg'
+export { ReactComponent as BarsArrowUp } from './barsArrowUp.svg'
+export { ReactComponent as BarsArrowDown } from './barsArrowDown.svg'
+export { ReactComponent as ShoppingBag } from './shoppingBag.svg'
+export { ReactComponent as HandRaised } from './handRaised.svg'
+export { ReactComponent as HandThumbUp } from './handThumbUp.svg'
+export { ReactComponent as Tag } from './tag.svg'
+export { ReactComponent as LockClosed } from './lockClosed.svg'
+export { ReactComponent as Fire } from './fire.svg'

apps/design-system/src/common/utils/index.ts

@@ -0,0 +1,13 @@
+export {
+  noop,
+  formatNumber,
+  isUp,
+  formatAmount,
+  formatPercentage,
+  formatDate,
+  formatShortDate,
+  formatDateTime,
+  ipfsToHttps,
+  calculateProfitPercentage,
+  verifiedValidAddress,
+} from './utils'

apps/design-system/src/common/utils/utils.test.ts

@@ -0,0 +1,122 @@
+import '@testing-library/jest-dom'
+
+import * as SUT from './utils'
+
+describe('common/utils', () => {
+  describe('isUp', () => {
+    it.each([
+      [-1, false],
+      [0, true],
+      [1, true],
+    ])('should, with value %i, return %s as expected', (value, result) => {
+      // when ... we provide a value
+      // then ... it should return as expected
+      expect(SUT.isUp(value)).toEqual(result)
+    })
+  })
+
+  describe('formatPercentage', () => {
+    it('should add a percentage to the number value', () => {
+      // when ... we provide a value
+      const result = SUT.formatPercentage(0.01)
+      const expected = '1%'
+
+      // then ... it should return as expected
+      expect(result).toEqual(expected)
+    })
+  })
+
+  describe('formatAmount', () => {
+    it.each([
+      [2000, '2,000'],
+      [3, '3'],
+      [1000000, '1,000,000'],
+      [0.12, '0.12'],
+      [0.00123456, '0.0012'],
+      [-1000000, '-1,000,000'],
+      [-0.12, '-0.12'],
+      [-0.00123456, '-0.0012'],
+    ])('should, with value %s, return %s as expected', (value, result) => {
+      // when ... we provide a value
+      // then ... it should return as expected
+      expect(SUT.formatAmount(value)).toEqual(result)
+    })
+  })
+
+  describe('formatDate', () => {
+    it.each([
+      ['1970-01-01T00:00:00Z', 'January 1, 1970'],
+      ['2021-09-27T10:26:14Z', 'September 27, 2021'],
+    ])('should, with value %s, return %s as expected', (date, result) => {
+      // when ... we provide a value
+      // then ... it should return as expected
+      expect(SUT.formatDate(date)).toEqual(result)
+    })
+  })
+
+  describe('getISODate', () => {
+    it.each([
+      ['2022-01-11 16:13:50', '2022-01-11T16:13:50.000Z'],
+      ['2022-01-11T16:13:50Z', '2022-01-11T16:13:50.000Z'],
+    ])('should, with value %s, return %s as expected', (date, result) => {
+      // when ... we provide a value
+      // then ... it should return as expected
+      expect(SUT.getISODate(date)).toBe(result)
+    })
+  })
+
+  describe('formatDateTime', () => {
+    it.each([
+      ['1970-01-01T00:00:00Z', 'January 1, 1970 at 01:00 AM'],
+      ['2021-09-27T10:26:14Z', 'September 27, 2021 at 12:26 PM'],
+      ['2022-01-11 16:13:50', 'January 11, 2022 at 05:13 PM'],
+      ['2022-01-11T16:13:50Z', 'January 11, 2022 at 05:13 PM'],
+    ])('should, with value %s, return %s as expected', (date, result) => {
+      // when ... we provide a value
+      // then ... it should return as expected
+      expect(SUT.formatDateTime(date)).toEqual(result)
+    })
+  })
+
+  describe('formatShortDate', () => {
+    it.each([
+      ['1970-01-01T00:00:00Z', 'Jan 1, 1970'],
+      ['2021-09-27T10:26:14Z', 'Sep 27, 2021'],
+    ])('should, with value %s, return %s as expected', (date, result) => {
+      // when ... we provide a value
+      // then ... it should return as expected
+      expect(SUT.formatShortDate(date)).toEqual(result)
+    })
+  })
+
+  describe('ipfsToHttps', () => {
+    it.each([
+      ['ipfs://hash', 'https://ipfs.io/ipfs/hash'],
+      ['https://stakenow.fi/hash', 'https://stakenow.fi/hash'],
+    ])('should, with value %s, return %s as expexted', (url, result) => {
+      // when ... we provide a value
+      // then ... it should return as expected
+      expect(SUT.ipfsToHttps(url)).toEqual(result)
+    })
+  })
+
+  describe('calculateProfitPercentage', () => {
+    it.each([
+      [2, 1],
+      [3, 2],
+      [0.5, -0.5],
+    ])('should, with value %s, return %s as expected', (value, result) => {
+      // when ... we provide a value
+      // then ... it should return as expected
+      expect(SUT.calculateProfitPercentage(1)(value)).toEqual(result)
+    })
+  })
+
+  describe('chunkString', () => {
+    it('should split up the string into array based on provided chunk size', () => {
+      // when ... we provide a chunksize and string
+      // then ... it should return array as expected
+      expect(SUT.chunkString(6)('aaaaaabbbbbbcccccc')).toEqual(['aaaaaa', 'bbbbbb', 'cccccc'])
+    })
+  })
+})