@womp/kookie-ui 0.19.0 → 0.21.0

package/README.md

@@ -234,30 +234,23 @@ import '@womp/kookie-ui/layout.css'; // Layout utilities
 - `Sidebar` - Collapsible sidebar navigation
 - `Flex` - Flexible container with gap support
 - `Grid` - CSS Grid container
-- `Container` - Responsive container with max-width
-- `Section` - Semantic section wrapper
 
 ### Navigation
 
 - `Tabs` - Tab navigation component
 - `SegmentedControl` - Segmented control for mutually exclusive options
-- `TabNav` - Tab navigation for page-level navigation
 
 ### Data Entry
 
 - `Button` - Primary action button
-- `IconButton` - Icon-only button
-- `ToggleButton` - Toggle state button
-- `ToggleIconButton` - Toggle state icon button
+- `Toggle` - Pressed or not; `iconOnly` for an icon
 - `TextField` - Text input field
 - `TextArea` - Multi-line text input
 - `Select` - Dropdown selection
 - `Checkbox` - Checkbox input
 - `CheckboxGroup` - Group of checkboxes
-- `CheckboxCards` - Card-based checkbox selection
 - `Radio` - Radio button input
 - `RadioGroup` - Group of radio buttons
-- `RadioCards` - Card-based radio selection
 - `Switch` - Toggle switch
 - `Slider` - Range slider input
 - `Progress` - Progress indicator
@@ -266,11 +259,8 @@ import '@womp/kookie-ui/layout.css'; // Layout utilities
 
 - `Card` - Content card container
 - `Avatar` - User avatar image
-- `Badge` - Status badge
-- `Image` - Responsive image component
+- `Chip` - A short label
 - `Table` - Data table
-- `DataList` - List of data items
-- `Skeleton` - Loading skeleton placeholder
 
 ### Feedback
 
@@ -278,7 +268,6 @@ import '@womp/kookie-ui/layout.css'; // Layout utilities
 - `Dialog` - Modal dialog
 - `Sheet` - Slide-out panel
 - `Popover` - Floating content panel
-- `HoverCard` - Hover-triggered card
 - `Tooltip` - Contextual tooltip
 - `Notice` - A message about a condition that is true now
 - `Spinner` - Loading spinner
@@ -296,14 +285,9 @@ import '@womp/kookie-ui/layout.css'; // Layout utilities
 - `Code` - Inline code
 - `Kbd` - Keyboard key display
 - `Blockquote` - Block quote
-- `Quote` - Inline quote
-- `Em` - Emphasis
-- `Strong` - Strong emphasis
 
 ### Layout Utilities
 
-- `AspectRatio` - Maintain aspect ratio
-- `Inset` - Inset spacing
 - `Separator` - Visual separator
 - `ScrollArea` - Custom scrollable area
 

package/codemods/components-0.21.py

@@ -0,0 +1,123 @@
+"""
+Kookie UI 0.21 components codemod.
+
+The component list follows v2. Four names merge into others. This rewrites, in place:
+
+- IconButton -> Button iconOnly, ToggleIconButton -> Toggle iconOnly, ToggleButton -> Toggle,
+  Badge -> Chip: JSX tags, the import from @womp/kookie-ui, other references to the
+  imported name, and the Props types (IconButtonProps -> ButtonProps, BadgeProps -> ChipProps,
+  ToggleButtonProps and ToggleIconButtonProps -> ToggleProps) (.ts/.tsx/.jsx/.mdx)
+- .rt-Badge -> .rt-Chip and .rt-IconButton -> .rt-Button[data-icon-only] in .css/.scss
+
+It only renames. Dropped components, margin props on leaf components and icon-only buttons
+named by visible text need a person: see MIGRATION.md.
+
+Usage: python3 components-0.21.py <folder> [<folder> ...]   Safe to run twice.
+"""
+import glob
+import os
+import re
+import sys
+
+# old name -> (new name, adds iconOnly)
+RENAME = {
+    'IconButton': ('Button', True),
+    'ToggleIconButton': ('Toggle', True),
+    'ToggleButton': ('Toggle', False),
+    'Badge': ('Chip', False),
+}
+TYPES = {
+    'IconButtonProps': 'ButtonProps',
+    'ToggleIconButtonProps': 'ToggleProps',
+    'ToggleButtonProps': 'ToggleProps',
+    'BadgeProps': 'ChipProps',
+}
+IMPORT = re.compile(r'import(\s+type)?\s*\{([^{}]*)\}\s*from\s*([\'"])@womp/kookie-ui\3')
+CSS = [
+    (re.compile(r'\.rt-Badge(?![\w-])'), '.rt-Chip'),
+    (re.compile(r'\.rt-IconButton(?![\w-])'), '.rt-Button[data-icon-only]'),
+]
+SKIP = ('node_modules', '/.next/', '/dist/', '/build/')
+
+
+def word(name):
+    return re.compile(r'(?<![\w$.-])' + name + r'(?![\w$-])')
+
+
+def imported(text):
+    names = set()
+    for m in IMPORT.finditer(text):
+        for part in m.group(2).split(','):
+            bits = part.replace('type ', ' ').split()
+            if len(bits) == 1:
+                names.add(bits[0])
+    return names
+
+
+def fix_import(m):
+    parts = []
+    for part in m.group(2).split(','):
+        bits = part.split()
+        if not bits:
+            continue
+        i = 1 if bits[0] == 'type' else 0
+        old = bits[i]
+        bits[i] = TYPES.get(old) or (RENAME[old][0] if old in RENAME else old)
+        p = ' '.join(bits)
+        if p not in parts:
+            parts.append(p)
+    multiline = '\n' in m.group(2)
+    body = (',\n  '.join(parts) + ',') if multiline else ', '.join(parts)
+    body = ('\n  ' + body + '\n') if multiline else (' ' + body + ' ')
+    return 'import%s {%s} from %s@womp/kookie-ui%s' % (m.group(1) or '', body, m.group(3), m.group(3))
+
+
+def rewrite_jsx(text, mdx):
+    names = imported(text)
+    for old, (new, icon_only) in RENAME.items():
+        if old not in names and not mdx:
+            continue
+        flag = ' iconOnly' if icon_only else ''
+        text = re.sub(r'<' + old + r'(?![\w$.-])', '<' + new + flag, text)
+        text = re.sub(r'</' + old + r'\s*>', '</' + new + '>', text)
+    for old, new in TYPES.items():
+        if old in names:
+            text = word(old).sub(new, text)
+    for old, (new, _) in RENAME.items():
+        if old in names:
+            text = word(old).sub(new, text)
+    return IMPORT.sub(fix_import, text) if names & (set(RENAME) | set(TYPES)) else text
+
+
+def rewrite_css(text):
+    for pattern, new in CSS:
+        text = pattern.sub(new, text)
+    return text
+
+
+def main(folders):
+    changed = 0
+    for folder in folders:
+        for path in glob.glob(os.path.join(folder, '**', '*'), recursive=True):
+            if not os.path.isfile(path) or any(s in path for s in SKIP):
+                continue
+            if path.endswith(('.css', '.scss')):
+                fn = rewrite_css
+            elif path.endswith(('.ts', '.tsx', '.jsx', '.mdx')):
+                fn = lambda t, mdx=path.endswith('.mdx'): rewrite_jsx(t, mdx)
+            else:
+                continue
+            with open(path) as f:
+                before = f.read()
+            after = fn(before)
+            if after != before:
+                with open(path, 'w') as f:
+                    f.write(after)
+                changed += 1
+    print('%d files rewritten' % changed)
+
+
+if __name__ == '__main__':
+    if len(sys.argv) < 2:
+        sys.exit(__doc__)
+    main(sys.argv[1:])

package/codemods/type-0.20.py

@@ -0,0 +1,73 @@
+"""
+Kookie UI 0.20 type codemod.
+
+Type takes v2's nine steps (12, 14, 16, 18, 20, 24, 32, 44, 64px) and three weights
+(regular, medium, semibold). Sizes v2 lacks move to the nearest step: 0 -> 1, 8 -> 7,
+10, 11 and 12 -> 9. Weights: thin, extralight and light -> regular; bold and extrabold -> semibold.
+This rewrites, in place:
+
+- size and weight props on Text, Heading, Link, Code, Kbd, Blockquote, Em, Strong and Quote,
+  plain strings and responsive objects (.tsx/.jsx/.mdx)
+- var(--font-size-N), var(--line-height-N), var(--letter-spacing-N) and
+  var(--font-weight-NAME) in .css/.ts/.tsx/.mdx
+
+Usage: python3 type-0.20.py <folder> [<folder> ...]   Safe to run twice.
+"""
+import glob
+import os
+import re
+import sys
+
+SIZE = {'0': '1', '8': '7', '10': '9', '11': '9', '12': '9'}
+WEIGHT = {'thin': 'regular', 'extralight': 'regular', 'light': 'regular', 'bold': 'semibold', 'extrabold': 'semibold'}
+TYPE = r'(?:Text|Heading|Link|Code|Kbd|Blockquote|Em|Strong|Quote)'
+TAG = re.compile(r'<' + TYPE + r'\b[^<>]*?>', re.S)
+PLAIN = re.compile(r'(\b(size|weight)=)(["\'])([\w-]+)\3')
+OBJECT = re.compile(r'(\b(size|weight)=\{\{)([^{}]*)(\}\})')
+ENTRY = re.compile(r'(\w+\s*:\s*)(["\'])([\w-]+)\2')
+TOKEN = re.compile(r'--(font-size|line-height|letter-spacing)-(\d+)\b')
+WEIGHT_TOKEN = re.compile(r'--font-weight-(thin|extralight|light|bold|extrabold)\b')
+SKIP = ('node_modules', '/.next/', '/dist/', '/build/')
+
+
+def value(prop, v):
+    return (SIZE if prop == 'size' else WEIGHT).get(v, v)
+
+
+def tag(m):
+    t = PLAIN.sub(lambda p: p.group(1) + p.group(3) + value(p.group(2), p.group(4)) + p.group(3), m.group(0))
+    return OBJECT.sub(
+        lambda o: o.group(1) + ENTRY.sub(lambda e: e.group(1) + e.group(2) + value(o.group(2), e.group(3)) + e.group(2), o.group(3)) + o.group(4),
+        t,
+    )
+
+
+def rewrite(text, jsx):
+    if jsx:
+        text = TAG.sub(tag, text)
+    text = TOKEN.sub(lambda m: '--%s-%s' % (m.group(1), SIZE.get(m.group(2), m.group(2))), text)
+    return WEIGHT_TOKEN.sub(lambda m: '--font-weight-' + WEIGHT[m.group(1)], text)
+
+
+def main(folders):
+    changed = 0
+    for folder in folders:
+        for path in glob.glob(os.path.join(folder, '**', '*'), recursive=True):
+            if not os.path.isfile(path) or any(s in path for s in SKIP):
+                continue
+            if not path.endswith(('.css', '.scss', '.ts', '.tsx', '.jsx', '.mdx')):
+                continue
+            with open(path) as f:
+                before = f.read()
+            after = rewrite(before, path.endswith(('.tsx', '.jsx', '.mdx')))
+            if after != before:
+                with open(path, 'w') as f:
+                    f.write(after)
+                changed += 1
+    print('%d files rewritten' % changed)
+
+
+if __name__ == '__main__':
+    if len(sys.argv) < 2:
+        sys.exit(__doc__)
+    main(sys.argv[1:])