@charcoal-ui/tailwind-config 1.0.1-alpha.0 → 1.0.1-alpha.3

package/src/docs/borderRadius/BorderRadius.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { borderRadius } from '.'
+
+export const BorderRadius: React.FC = () => {
+  return (
+    <div className="space-y-40">
+      {Object.entries(borderRadius).map(([key, value]) => (
+        <div key={key}>
+          <p className="typography-14 text-text2">rounded-{key}</p>
+          <div className="space-x-16 flex">
+            <div
+              className={`bg-surface4 rounded-${key} h-64`}
+              style={{ width: '64px' }}
+            ></div>
+            <div
+              className={`bg-surface4 rounded-${key} h-64`}
+              style={{ width: '272px' }}
+            ></div>
+          </div>
+          <p className="typography-12 text-text3">
+            border-radius: <span className="text-text2">{value}</span>
+          </p>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/docs/borderRadius/index.story.mdx

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import { BorderRadius } from '.'
+
+<Meta title="tailwind-config/BorderRadius" component={[BorderRadius]} />
+
+# Border radius
+
+<br />
+
+<BorderRadius />

package/src/docs/borderRadius/index.ts

@@ -0,0 +1,5 @@
+import { config } from '../../'
+
+export const borderRadius = config.theme.borderRadius ?? {}
+
+export { BorderRadius } from './BorderRadius'

package/src/docs/colors/Colors.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import { EffectType } from '@charcoal-ui/theme'
+import { colors } from '.'
+
+const effectTypes: { [type in EffectType]: null } = {
+  hover: null,
+  press: null,
+  disabled: null,
+}
+
+const ColorBox: React.FC<{
+  bgColorClass: string
+  label: string
+  emphasizeLabelByDefault?: boolean
+}> = ({ bgColorClass, label, emphasizeLabelByDefault = false }) => (
+  <div className="group grow basis-0 space-y-8">
+    <p
+      className={`typography-14 ${
+        emphasizeLabelByDefault ? 'text-text2' : 'text-text3'
+      } group-hover:text-text2 transition-colors`}
+    >
+      {label}
+    </p>
+    <div className="relative h-64 w-full">
+      <div
+        /**
+         * Display checker pattern for visualizing colors with transparency
+         */
+        className="absolute top-0 right-0 h-full w-6/12"
+        aria-hidden="true"
+        style={{
+          backgroundImage:
+            'linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(135deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(135deg, transparent 75%, #ccc 75%)',
+          backgroundSize: '12px 12px',
+          backgroundPosition: '0 0, 6px 0, 6px -6px, 0 6px',
+        }}
+      ></div>
+      <button
+        type="button"
+        className={`absolute top-0 left-0 h-full w-full border border-r-0 group-last:border-r border-default cursor-pointer ${bgColorClass}`}
+        onClick={() => {
+          void navigator.clipboard.writeText(bgColorClass)
+        }}
+      >
+        <span className="opacity-0 group-hover:opacity-100 transition-opacity typography-14 text-text2">
+          Click to copy the class
+        </span>
+      </button>
+    </div>
+  </div>
+)
+
+export const Colors: React.FC = () => {
+  return (
+    <div className="space-y-24">
+      {Object.entries(colors).map(([colorName, values]) => (
+        <div className="flex" key={colorName}>
+          {typeof values === 'object' && 'DEFAULT' in values ? (
+            <>
+              <ColorBox
+                bgColorClass={`bg-${colorName}`}
+                label={colorName}
+                emphasizeLabelByDefault
+              />
+              {Object.keys(effectTypes).map((modifier) =>
+                modifier in values ? (
+                  <ColorBox
+                    bgColorClass={`bg-${colorName}-${modifier}`}
+                    label={`-${modifier}`}
+                  />
+                ) : null
+              )}
+            </>
+          ) : (
+            <ColorBox
+              bgColorClass={`bg-${colorName}`}
+              label={colorName}
+              emphasizeLabelByDefault
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/docs/colors/TextBgColor.story.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import type { Story } from '../../_lib/compat'
+
+import { colors } from '.'
+
+export default {
+  title: 'tailwind-config/Colors/Text bg color',
+  argTypes: {
+    textColorClass: {
+      control: {
+        type: 'select',
+        options: Object.keys(colors).map((color) => `text-${color}`),
+      },
+      defaultValue: 'text-text1',
+    },
+    bgColorClass: {
+      control: {
+        type: 'select',
+        options: Object.keys(colors).map((color) => `bg-${color}`),
+      },
+      defaultValue: 'bg-background1',
+    },
+  },
+}
+
+type Props = Readonly<{
+  textColorClass: string
+  bgColorClass: string
+}>
+
+export const Playground: Story<Props> = ({ textColorClass, bgColorClass }) => (
+  <div className={`${bgColorClass} p-64 max-w-2xl`}>
+    <p className={`typography-20 ${textColorClass}`}>
+      charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web
+      フロントエンドの実装に用いる npm パッケージ集のことを言います。Lorem ipsum
+      dolor sit amet, consectetur adipiscing elit. Aliquam at odio bibendum nisl
+      mollis eleifend et quis turpis. Quisque dignissim porta justo ut
+      convallis.dipiscing elit.
+    </p>
+  </div>
+)

package/src/docs/colors/TextColors.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { colors } from '.'
+
+export const TextColors: React.FC = () => (
+  <div className="space-y-24">
+    {Object.keys(colors).map((colorName) => (
+      <div key={colorName}>
+        <p className="typography-14 text-text2 mb-4">text-{colorName}</p>
+        <div className={`relative z-0`}>
+          <div
+            className="absolute top-0 right-0 h-full w-6/12 bg-surface8 z-[-1]"
+            aria-hidden="true"
+          ></div>
+          <p className={`typography-20 text-${colorName}`}>
+            charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web
+            フロントエンドの実装に用いる npm パッケージ集のことを言います。
+          </p>
+        </div>
+      </div>
+    ))}
+  </div>
+)

package/src/docs/colors/index.story.mdx

@@ -0,0 +1,27 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import { Colors, TextColors } from '.'
+
+<Meta title="tailwind-config/Colors/Doc" component={[Colors, TextColors]} />
+
+# Colors
+
+<br />
+
+## Bg colors
+
+<br />
+
+<Story name="Colors">
+  <Colors />
+</Story>
+
+<br />
+<br />
+
+## Text colors
+
+<br />
+
+<Story name="Text colors">
+  <TextColors />
+</Story>

package/src/docs/colors/index.ts

@@ -0,0 +1,6 @@
+import { config } from '../../'
+
+export const colors = config.theme.colors ?? {}
+
+export { Colors } from './Colors'
+export { TextColors } from './TextColors'

package/src/docs/gradient/Gradients.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { utilityClasses, directions, effectTypes } from '.'
+import { getUniqueGradientNames } from './utils'
+
+const GradientBox: React.FC<{
+  gradientClassName: string
+  label: string
+  emphasizeLabelByDefault?: boolean
+}> = ({ gradientClassName, label, emphasizeLabelByDefault = false }) => (
+  <div className="group grow basis-0">
+    <p
+      className={`typography-14 ${
+        emphasizeLabelByDefault ? 'text-text2' : 'text-text3'
+      } group-hover:text-text2 transition-colors`}
+    >
+      {label}
+    </p>
+    <button
+      type="button"
+      className={`${gradientClassName} h-64 w-full border-none cursor-pointer`}
+      onClick={() => {
+        void navigator.clipboard.writeText(gradientClassName)
+      }}
+    >
+      <span className="opacity-0 group-hover:opacity-100 transition-opacity typography-14 text-text2">
+        Click to copy the class
+      </span>
+    </button>
+  </div>
+)
+
+export const Gradients: React.FC = () => {
+  const utilityClassNames = Object.keys(utilityClasses)
+  const uniqueGradientNames = getUniqueGradientNames(utilityClassNames)
+
+  return (
+    <div className="space-y-64">
+      {uniqueGradientNames.map((gradientName) => (
+        <div className="space-y-24" key={gradientName}>
+          {directions.map((direction) => (
+            <div className="flex" key={direction}>
+              {utilityClassNames.includes(`${gradientName}-${direction}`) && (
+                <GradientBox
+                  gradientClassName={`${gradientName}-${direction}`}
+                  label={`${gradientName}-${direction}`}
+                  emphasizeLabelByDefault
+                />
+              )}
+              {Object.keys(effectTypes).map(
+                (effectType) =>
+                  utilityClassNames.includes(
+                    `${gradientName}-${direction}-${effectType}`
+                  ) && (
+                    <GradientBox
+                      gradientClassName={`${gradientName}-${direction}-${effectType}`}
+                      label={`-${effectType}`}
+                      key={effectType}
+                    />
+                  )
+              )}
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/docs/gradient/index.story.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import { Gradients } from '.'
+
+<Meta title="tailwind-config/Gradients" component={[Gradients]} />
+
+# Gradients
+
+<br />
+
+<Story name="Gradients">
+  <Gradients />
+</Story>

package/src/docs/gradient/index.ts

@@ -0,0 +1,26 @@
+import { EffectType } from '@charcoal-ui/theme'
+import { config } from '../../'
+import { TailwindPlugin, getUtilities } from '../'
+
+export { Gradients } from './Gradients'
+
+/**
+ * TODO:
+ * Seek for some better way to find the plugin we need here
+ * from `config.plugins` array
+ */
+const gradientPlugin: TailwindPlugin = config.plugins
+  ? (config.plugins[2] as unknown as TailwindPlugin)
+  : { handler: () => void {} }
+
+export const utilityClasses = getUtilities(gradientPlugin)
+
+export const directions = ['top', 'bottom', 'right', 'left'] as const
+export type Direction = typeof directions[number]
+
+export type { EffectType }
+export const effectTypes: { [type in EffectType]: null } = {
+  hover: null,
+  press: null,
+  disabled: null,
+}

package/src/docs/gradient/utils.ts

@@ -0,0 +1,37 @@
+import { directions } from '.'
+
+export const getUniqueGradientNames = (utilityClasses: string[]): string[] => {
+  return Array.from(
+    new Set(
+      utilityClasses
+        .map((className) => {
+          /**
+           * like `['bg', 'surface5', 'bottom', 'disabled']`
+           */
+          const classNameParts = className.split('-')
+
+          /**
+           * like `bottom`
+           */
+          const directionInClassName = directions.find((direction) =>
+            classNameParts.includes(direction)
+          )
+          if (!directionInClassName) return null
+
+          /**
+           * like `['bg', 'surface5']`
+           */
+          const classNameWithoutModifiers = classNameParts.slice(
+            0,
+            classNameParts.indexOf(directionInClassName)
+          )
+
+          /**
+           * like `bg-surface5`
+           */
+          return classNameWithoutModifiers.join('-')
+        })
+        .filter((value): value is string => typeof value === 'string')
+    ).values()
+  )
+}

package/src/docs/index.ts

@@ -0,0 +1,34 @@
+import { mapObject } from '../util'
+
+export type TailwindPlugin = {
+  handler: ({
+    addBase,
+    addUtilities,
+  }: {
+    addBase: unknown
+    addUtilities: unknown
+  }) => void
+}
+
+export type UtilityClasses = Record<string, Record<string, unknown>>
+
+export const getUtilities = (plugin: TailwindPlugin) => {
+  let utilities: UtilityClasses = {}
+
+  plugin.handler({
+    addBase: () => {
+      /**
+       * We don't need these base styles as they gonna be
+       * applied to the `:root` element by Tailwind automatically
+       */
+    },
+    addUtilities: (args: UtilityClasses) => {
+      utilities = { ...utilities, ...args }
+    },
+  })
+
+  return mapObject(utilities, (key, value) => [
+    key.startsWith('.') ? key.slice(1) : key,
+    value,
+  ])
+}

package/src/docs/screens/Screens.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { screens } from '.'
+
+export const Screens: React.FC = () => {
+  return (
+    <div className="space-y-40">
+      {Object.entries(screens).map(
+        ([screenName, value]) =>
+          typeof value === 'string' && (
+            <div key={screenName}>
+              <p className="typography-14 text-text2">{screenName}</p>
+              <div className="bg-surface4 h-64" style={{ width: value }}></div>
+              <p className="typography-12 text-text3">
+                @media (<span className="text-text2">min-width: {value}</span>)
+              </p>
+            </div>
+          )
+      )}
+    </div>
+  )
+}

package/src/docs/screens/index.story.mdx

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import { Screens } from '.'
+
+<Meta title="tailwind-config/Screens" component={[Screens]} />
+
+# Screens
+
+<br />
+
+<Screens />

package/src/docs/screens/index.ts

@@ -0,0 +1,5 @@
+import { config } from '../../'
+
+export const screens = config.theme.screens ?? {}
+
+export { Screens } from './Screens'

package/src/docs/spacing/Spacing.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { spacing } from '.'
+
+export const Spacing: React.FC = () => {
+  return (
+    <div className="space-y-40">
+      {Object.keys(spacing).map((space) => (
+        <div key={space}>
+          <p className="typography-14 text-text2">p-{space}</p>
+          <div className={`bg-surface3 p-${space} w-[min-content]`}>
+            <div className="bg-brand h-40" style={{ width: '40px' }}></div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/docs/spacing/index.story.mdx

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import { Spacing } from '.'
+
+<Meta title="tailwind-config/Spacing" component={[Spacing]} />
+
+# Spacing
+
+<br />
+
+<Spacing />

package/src/docs/spacing/index.ts

@@ -0,0 +1,5 @@
+import { config } from '../../'
+
+export const spacing = config.theme.spacing ?? {}
+
+export { Spacing } from './Spacing'

package/src/docs/typography/HalfLeading.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { sizeClasses } from '.'
+
+export const HalfLeading: React.FC = () => (
+  <div className="p-40 bg-brand-disabled">
+    <div className="flex items-center space-x-16">
+      <p className="typography-14 text-text1 w-6/12 text-right">
+        without half leading (default)
+      </p>
+      <p className="typography-14 text-text1 w-6/12">preserve-half-leading</p>
+    </div>
+    {Object.entries(sizeClasses).map(([sizeClassName]) => (
+      <div
+        key={sizeClassName}
+        className="flex items-center justify-center space-x-16"
+      >
+        <p className={`${sizeClassName} bg-background1 text-text1`}>
+          Abcあいう123
+        </p>
+        <p
+          className={`${sizeClassName} bg-background1 text-text1 preserve-half-leading`}
+        >
+          Abcあいう123
+        </p>
+      </div>
+    ))}
+  </div>
+)

package/src/docs/typography/Sizes.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { sizeClasses } from '.'
+
+export const Sizes: React.FC = () => (
+  <div className="space-y-64">
+    {Object.entries(sizeClasses).map(([className, value]) => (
+      <div key={className}>
+        <p className="typography-14 text-text2">{className}</p>
+        <p className={`${className} text-text1`}>
+          charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web
+          フロントエンドの実装に用いる npm パッケージ集のことを言います。 Lorem
+          ipsum dolor sit amet, consectetur adipiscing elit.
+        </p>
+        <p className="typography-12 text-text3">
+          font-size: <span className="text-text2">{value['font-size']}</span> /{' '}
+          line-height:{' '}
+          <span className="text-text2">{value['line-height']}</span>
+        </p>
+      </div>
+    ))}
+  </div>
+)

package/src/docs/typography/index.story.mdx

@@ -0,0 +1,26 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import { Sizes, HalfLeading } from '.'
+
+<Meta title="tailwind-config/Typography" component={[Sizes]} />
+
+# Typography
+
+<br />
+
+## Sizes
+
+<br />
+
+<Story name="Sizes">
+  <Sizes />
+</Story>
+
+<br />
+
+## Half leading cancellation
+
+<br />
+
+<Story name="Half leading">
+  <HalfLeading />
+</Story>

package/src/docs/typography/index.ts

@@ -0,0 +1,26 @@
+import { config } from '../../'
+import { TailwindPlugin, getUtilities } from '../'
+
+export { Sizes } from './Sizes'
+export { HalfLeading } from './HalfLeading'
+
+/**
+ * TODO:
+ * Seek for some better way to find the plugin we need here
+ * from `config.plugins` array
+ */
+const typographyPlugin: TailwindPlugin = config.plugins
+  ? (config.plugins[0] as unknown as TailwindPlugin)
+  : { handler: () => void {} }
+
+export const utilityClasses = getUtilities(typographyPlugin)
+
+type SizeClassValue = Readonly<{
+  'font-size': string
+  'line-height': string
+}>
+export const sizeClasses: Record<string, SizeClassValue> = Object.fromEntries(
+  Object.entries(utilityClasses).filter(
+    ([className]) => className !== 'preserve-half-leading'
+  )
+) as Record<string, SizeClassValue>

package/src/util.ts

@@ -66,6 +66,12 @@ Got: ${JSON.stringify(Array.from(effectKeys))}`)
   }
 }
 
+/**
+ * @example
+ * ```js
+ * mapKeys({ a: 'aa', b: 'bb' }, (key) => key.toUpperCase()) // => { A: "aa", B: "bb" }
+ * ````
+ */
 export function mapKeys<V, K extends string>(
   object: Record<string, V>,
   callback: (key: string) => K
@@ -75,6 +81,14 @@ export function mapKeys<V, K extends string>(
   ) as Record<K, V>
 }
 
+/**
+ * @example
+ * ```js
+ * mapObject({ a: 'aa', b: 'bb', c: 'cc' }, (key, value) =>
+ *   key === 'b' ? undefined : [key + '1', value.toUpperCase()]
+ * ) // => { a1: "AA", c1: "CC" }
+ * ```
+ */
 export function mapObject<
   SourceKey extends string,
   SourceValue,
@@ -99,6 +113,15 @@ export function mapObject<
   ) as Record<DestKey, DestValue>
 }
 
+/**
+ * @example
+ * ```js
+ * flatMapObject({ a: 'aa', b: 'bb' }, (key, value) => [
+ *   [key + '1', value + '1'],
+ *   [key + '2', value + '2'],
+ * ]) // => { a1: "aa1", a2: "aa2", b1: "bb1", b2: "bb2" }
+ * ```
+ */
 export function flatMapObject<
   SourceKey extends string,
   SourceValue,
@@ -115,6 +138,15 @@ export function flatMapObject<
   ) as Record<DestKey, DestValue>
 }
 
+/**
+ * @example
+ * ```ts
+ * filterObject(
+ *   { a: 'aa', b: 'bb', c: 'cc' },
+ *   (value): value is string => value !== 'bb'
+ * ) // => { a: "aa", c: "cc" }
+ * ```
+ */
 export function filterObject<Source, Dest extends Source>(
   source: Record<string, Source>,
   fn: (value: Source) => value is Dest