@clement_lores/admin-design-system 1.0.0

package/src/utils/content-styles.ts

@@ -0,0 +1,268 @@
+import { css } from '@styled-components'
+
+import themeGet from './theme-get.js'
+
+/**
+ *
+ * Gives you the default styles for all "content" elements like:
+ * ul, li, h1-h5 etc.
+ *
+ * ### Example
+ *
+ * ```typescript
+ * import { styled } from '@styled-components'
+ * import { contentCSS } from '@adminjs/design-system'
+ *
+ * const myComponent = styled`
+ *   ${contentCSS};
+ * `
+ * ```
+ *
+ * @memberof module:@adminjs/design-system
+ */
+const contentCSS: ReturnType<typeof css> = css`
+  font-family: ${({ theme }) => theme.font};
+  font-size: ${themeGet('fontSizes', 'md')};
+  line-height: ${themeGet('lineHeights', 'lg')};
+  font-weight: ${themeGet('fontWeights', 'light')};
+  div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed,
+  figure, figcaption, footer, header, hgroup,
+  main, menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    &:not([class*="adminjs_"]) {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  img {
+    max-width: 100%;
+  }
+
+  p, div {
+    margin-bottom: ${themeGet('space', 'xl')};
+    font-size: ${themeGet('fontSizes', 'md')};
+    font-weight: ${themeGet('fontWeights', 'light')};
+  }
+
+  strong, b {
+    font-weight: ${themeGet('fontWeights', 'bolder')}
+  }
+
+  li + li {
+    margin-top: ${themeGet('space', 'md')};
+  }
+
+  p:not(:last-child),
+  dl:not(:last-child),
+  ol:not(:last-child),
+  ul:not(:last-child),
+  blockquote:not(:last-child),
+  pre:not(:last-child),
+  table:not(:last-child) {
+    margin-bottom: ${themeGet('space', 'xl')};
+  }
+
+  pre {
+    background-color: ${themeGet('colors', 'grey20')};
+    border: 1px solid ${themeGet('colors', 'grey40')};
+    padding: ${themeGet('space', 'xl')};
+    margin: ${themeGet('space', 'xl')} 0 ${themeGet('space', 'xxl')};
+    white-space: pre;
+    font-family: 'Courier New', Courier, monospace;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: ${themeGet('fontWeights', 'light')};
+    line-height: ${themeGet('lineHeights', 'xl')};
+    font-size: ${themeGet('fontSizes', 'h3')};
+    margin-top: ${themeGet('space', 'xxl')};
+    margin-bottom: ${themeGet('space', 'xl')};
+  }
+
+  h1:first-child,
+  h2:first-child,
+  h3:first-child,
+  h4:first-child,
+  h5:first-child,
+  h6:first-child {
+    margin-top: ${themeGet('space', 'sm')};
+  }
+
+  h1 {
+    font-size: ${themeGet('fontSizes', 'h1')};
+    line-height: ${themeGet('lineHeights', 'xxl')};
+    margin-top: ${themeGet('space', 'x4')};
+    margin-bottom: ${themeGet('space', 'x3')};
+  }
+
+  h2 {
+    font-size: ${themeGet('fontSizes', 'h2')};
+    line-height: ${themeGet('lineHeights', 'xxl')};
+    margin-top: ${themeGet('space', 'x3')};
+    margin-bottom: ${themeGet('space', 'xxl')};
+  }
+
+  h3 {
+
+  }
+
+  h4 {
+    font-size: ${themeGet('fontSizes', 'h4')};
+    line-height: ${themeGet('lineHeights', 'xl')};
+    margin-top: ${themeGet('space', 'xxl')};
+    margin-bottom: ${themeGet('space', 'xl')};
+  }
+
+  h5 {
+    font-size: ${themeGet('fontSizes', 'xl')};
+    line-height: ${themeGet('lineHeights', 'lg')};
+    margin-top: ${themeGet('space', 'xl')};
+    margin-bottom: ${themeGet('space', 'lg')};
+    font-weight: ${themeGet('fontWeights', 'normal')};
+  }
+
+  h6 {
+    font-size: ${themeGet('fontSizes', 'lg')};
+    line-height: ${themeGet('lineHeights', 'lg')};
+    margin-top: ${themeGet('space', 'lg')};
+    margin-bottom: ${themeGet('space', 'default')};
+    font-weight: ${themeGet('fontWeights', 'normal')};
+  }
+
+  blockquote {
+    background-color: ${themeGet('colors', 'grey20')};
+    border-left: ${themeGet('space', 'sm')} solid ${themeGet('colors', 'primary20')};
+    padding: ${themeGet('space', 'xl')};
+    margin: ${themeGet('space', 'xxl')} 0;
+  }
+
+  ol {
+    list-style-position: outside;
+    margin-top: ${themeGet('space', 'lg')};
+    margin-left: ${themeGet('space', 'xl')};
+  }
+  ol:not([type]) {
+    list-style-type: decimal;
+  }
+  ol:not([type]).is-lower-alpha {
+    list-style-type: lower-alpha;
+  }
+  ol:not([type]).is-lower-roman {
+    list-style-type: lower-roman;
+  }
+  ol:not([type]).is-upper-alpha {
+    list-style-type: upper-alpha;
+  }
+  ol:not([type]).is-upper-roman {
+    list-style-type: upper-roman;
+  }
+
+  ul {
+    list-style: disc outside;
+    margin-left: ${themeGet('space', 'xl')};
+    margin-top: ${themeGet('space', 'lg')};
+  }
+  ul ul {
+    list-style-type: circle;
+    margin-top: ${themeGet('space', 'sm')};
+  }
+  ul ul ul {
+    list-style-type: square;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  dd {
+    margin-left: ${themeGet('space', 'xl')};
+  }
+
+  figure {
+    margin-left: ${themeGet('space', 'md')};
+    margin-right: ${themeGet('space', 'md')};
+    text-align: center;
+  }
+  figure:not(:first-child) {
+    margin-top: ${themeGet('space', 'md')};
+  }
+  figure:not(:last-child) {
+    margin-bottom: ${themeGet('space', 'md')};
+  }
+  figure img {
+    display: inline-block;
+  }
+  figure figcaption {
+    font-style: italic;
+  }
+
+  sup,
+  sub {
+    font-size: 75%;
+  }
+
+  table {
+    width: 100%;
+    margin: ${themeGet('space', 'xl')} 0;
+  }
+  table td,
+  table th {
+    padding: ${themeGet('space', 'lg')};
+    vertical-align: top;
+  }
+  table th {
+    color: ${themeGet('colors', 'grey60')};
+    border-bottom: 1px solid ${themeGet('colors', 'grey40')};
+  }
+
+  table td {
+    border-bottom: 1px solid ${themeGet('colors', 'grey20')};
+  }
+  table th:not([align]) {
+    text-align: inherit;
+  }
+  table thead td,
+  table thead th {
+    border-bottom: 1px solid ${themeGet('colors', 'grey40')};
+    color: ${themeGet('colors', 'grey60')};
+  }
+  table tfoot td,
+  table tfoot th {
+    border-bottom: 1px solid ${themeGet('colors', 'grey40')};
+    color: ${themeGet('colors', 'grey60')};
+  }
+  table tbody tr:last-child td,
+  table tbody tr:last-child th {
+    border-bottom-width: 0;
+  }
+
+  .tabs li + li {
+    margin-top: 0;
+  }
+
+  *:not(pre) > code {
+    color: red !important;
+    padding: 0.2em 0.4em !important;
+    margin: 0;
+    font-size: 85%;
+    background-color: #afb8c133;
+    border-radius: 6px;
+  }
+`
+
+export default contentCSS

package/src/utils/css-class.ts

@@ -0,0 +1,37 @@
+// eslint-disable-next-line import/prefer-default-export
+
+/**
+ *
+ * Generates class name for given component. It is used by AdminJS core to append namespaced
+ * classes.
+ *
+ * ### example
+ *
+ * ```javascript
+ * import { cssClass } from '@adminjs/design-system'
+ *
+ * cssClass('Icon', 'my-regular-class-name')
+ * // returns: 'adminjs_Icon my-regular-class-name'
+ * ```
+ *
+ *
+ * @param {string | Array<string>} className
+ * @param {string}                [regularClass]
+ * @memberof module:@adminjs/design-system
+ */
+export const cssClass = (className: string | Array<string>, regularClass?: string): string => {
+  let names: Array<string> = []
+  if ((className as any).join) {
+    names = className as Array<string>
+  } else {
+    names = [className as string]
+  }
+  const parsed = names.map((name) => `adminjs_${name}`)
+  if (regularClass) {
+    parsed.push(regularClass)
+  }
+
+  return parsed.join(' ')
+}
+
+export default cssClass

package/src/utils/date-utils.ts

@@ -0,0 +1,60 @@
+type PropertyType = 'date' | 'datetime' | string
+
+/**
+ * adds leading 0 to the number when it is lower than 10
+ * @param {number} pad        number - i.e 8
+ * @returns {sting}           formatted number: i.e. "08"
+ * @memberof module:@adminjs/design-system
+ */
+const pad = (n: number): string => (n < 10 ? `0${n.toString()}` : n.toString())
+
+/**
+ * Formats date to YYYY-MM-DD
+ *
+ * @param   {Date}    date
+ * @return  {string}
+ * @memberof module:@adminjs/design-system
+ */
+const formatDate = (date: Date): string => `${date.getFullYear()}-${pad(date.getMonth() + 1)
+}-${pad(date.getDate())}`
+
+/**
+ * Formats date to HH:mm
+ *
+ * @param   {Date}    date
+ * @return  {string}
+ * @memberof module:@adminjs/design-system
+ */
+const formatTime = (date: Date): string => `${pad(date.getHours())}:${pad(date.getMinutes())}`
+
+/**
+ * Formats date to YYYY-MM-DD HH:mm
+ *
+ * @param   {Date}    date
+ * @return  {string}
+ * @memberof module:@adminjs/design-system
+ */
+const formatDateTime = (date: Date): string => `${formatDate(date)} ${formatTime(date)}`
+
+/**
+ * Based on the property type formats date to either YYYY-MM-DD HH:mm or YYYY-MM-DD
+ *
+ * @param   {Date}    date
+ * @param   {PropertyType}    propertyType
+ * @return  {string}
+ * @memberof module:@adminjs/design-system
+ */
+const formatDateProperty = (date: Date, propertyType?: PropertyType): string => {
+  if (propertyType === 'date') {
+    return formatDate(date)
+  }
+  return formatDateTime(date)
+}
+
+export {
+  formatDateProperty,
+  formatDate,
+  formatDateTime,
+  pad,
+  PropertyType,
+}